daoji_h5/user/pages/bell/list.vue

610 lines
17 KiB
Vue

<template>
<view class="pages-user-bell" v-if="isLoad">
<!-- <fixed v-if="can_add_order">
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
width="50%" height="100rpx"></tab>
<view class="b-1px-b"></view>
</fixed> -->
<!-- <view class="pt-lg pl-lg pr-lg" v-if="activeIndex==0 && have_check.length>0"> -->
<view class="pt-lg pl-lg pr-lg" v-if="activeIndex==0 && have_check.length>0">
<view class="f-desc c-paragraph text-bold">已选择项目</view>
<block v-for="(item, index) in have_check" :key="index">
<view class="list-item pd-lg fill-base radius-16" :class="[{'mt-lg':index==0},{'mt-md':index!=0}]">
<view class="flex-center">
<!-- #ifdef H5 -->
<view class="cover radius-16">
<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<image mode="aspectFill" class="cover radius-16" :src="item.cover"></image>
<!-- #endif -->
<view class="flex-1 ml-md" style="max-width: 456rpx;">
<view class="flex-between">
<view class="f-title c-title text-bold ellipsis" style="max-width: 250rpx;">
{{ item.title }}
</view>
<view class="flex-warp">
<button @tap.stop="changeNum(-1,index)" class="reduce"
:style="{borderColor:primaryColor,color:primaryColor}"><i
class="iconfont icon-jian-bold"></i></button>
<button class="addreduce clear-btn">{{item.init_add_num || 0}}</button>
<button @tap.stop="changeNum(1,index)" class="add"
:style="{background:primaryColor,borderColor:primaryColor}"><i
class="iconfont icon-jia-bold"></i></button>
</view>
</view>
<view class="flex-warp mt-sm">
<view class="time-long flex-center">{{ item.time_long }}分钟</view>
<view class="f-caption c-caption">{{ item.total_sale }}人已预约</view>
</view>
<view class="flex-between mt-md">
<view class="flex-y-baseline">
<view class="flex-y-baseline f-icontext c-warning ml-sm mr-sm">¥<view
class="f-sm-title">
{{ item.price }}
</view>
</view>
<view class="flex-y-baseline f-caption c-paragraph" v-if="!activeIndex">需补差价:<view
class="c-warning">
¥{{item.init_add_price}}</view>
</view>
</view>
<view @tap.stop="toAddDelItem(2,index)" class="remove-btn flex-center f-caption radius"
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">移除
</view>
</view>
</view>
</view>
<view class="flex-between f-desc mt-lg pt-lg b-1px-t" style="color: #2E3541;">
<view class="flex-y-center">{{item.order_goods_name | textFormat }}</view>
<view class="shengji-icon-text flex-1 flex-center flex-column" :style="{color:primaryColor}">
<view class="f-icontext">升级为</view>
<i class="iconfont iconshengji"></i>
</view>
<view class="flex-y-center">{{item.title | textFormat }}</view>
</view>
</view>
</block>
</view>
<view class="pd-md" v-if="activeIndex==1">
<view class="flex-y-center f-title c-title text-bold"> 选择加钟项目 </view>
</view>
<view class="flex-center pt-lg pb-sm pl-lg pr-lg fill-base mt-md rel" v-if="activeIndex === 0">
<view class="flex-1 flex-y-center f-title c-title text-bold">
将<view :style="{color:primaryColor}">{{order_goods[goodsInd].goods_name | textFormat }}</view>升级为以下项目
</view>
<view @tap.stop="showGoods = !showGoods" class="change-btn flex-center radius"
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">切换项目 <i class="iconfont"
:class="[{'icon-up-fill':showGoods},{'icon-down-fill':!showGoods}]"></i></view>
<view class="change-goods-info pd-md abs" v-if="showGoods">
<view @tap.stop="toChangeGoods(index)" class="goods-title flex-y-center"
:class="[{'c-title':goodsInd!=index},{'c-base cur':goodsInd==index}]"
:style="{background:goodsInd==index?primaryColor:'',borderColor:goodsInd==index?primaryColor:''}"
v-for="(item,index) in order_goods" :key="index">{{item.goods_name}}
</view>
</view>
</view>
<view :class="[{'pl-lg pr-lg fill-base' :activeIndex==0}]">
<block v-for="(item, index) in serviceList" :key="index">
<view @tap.stop="toAddDelItem(1,index)" class="list-item flex-center"
:class="[{'pt-lg pb-lg':activeIndex==0},{'ml-md mr-md pd-lg fill-base radius-16':activeIndex==1},{'b-1px-t':index!=0 && item.id != no_check_id && activeIndex==0},{'mt-md':index!=0&&activeIndex==1}]"
v-if="(activeIndex==0&&!item.is_check) || activeIndex==1">
<i class="iconfont mr-md"
:class="[{'icon-xuanze':!item.is_check},{'icon-xuanze-fill':item.is_check}]"
:style="{color:item.is_check?primaryColor:'#999'}" v-if="activeIndex==0"></i>
<view class="flex-center flex-1">
<!-- #ifdef H5 -->
<view class="cover radius-16">
<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<image mode="aspectFill" class="cover radius-16" :src="item.cover"></image>
<!-- #endif -->
<view class="flex-1 ml-md" :style="{maxWidth:activeIndex==0?'456rpx':'495rpx'}">
<view class="flex-between">
<view class="f-title c-title text-bold ellipsis" style="max-width: 250rpx;">
{{ item.title }}
</view>
<view class="f-caption c-caption">{{ item.total_sale }}人已预约</view>
</view>
<view class="flex-between mt-sm">
<view class="time-long flex-center">{{ item.time_long }}分钟</view>
<view>
<view class="f-caption c-caption" v-if="item.material_price*1>0">
物料费:¥{{item.material_price}}</view>
</view>
</view>
<view class="flex-center mt-md">
<view class="flex-1 flex-y-baseline f-icontext c-warning ml-sm mr-sm">¥<view
class="f-sm-title">
{{ item.price }}
</view>
</view>
<view class="flex-y-center f-paragraph c-paragraph" v-if="activeIndex==0">需补差价<view
class="c-warning">¥{{item.init_add_price}}</view>
</view>
<view class="flex-warp" v-if="activeIndex==1">
<block v-if="item.car_num">
<button @tap.stop="changeNum(-1,index)" class="reduce"
:style="{borderColor:primaryColor,color:primaryColor}"><i
class="iconfont icon-jian-bold"></i></button>
<button class="addreduce clear-btn">{{item.car_num || 0}}</button>
</block>
<button @tap.stop="changeNum(1,index)" class="add"
:style="{background:primaryColor,borderColor:primaryColor}"><i
class="iconfont icon-jia-bold"></i></button>
</view>
</view>
</view>
</view>
</view>
</block>
<view class="space-md" v-if="have_all_check || serviceList.length==0"></view>
</view>
<abnor v-if="(!loading&&serviceList.length==0) || (activeIndex==0 && have_all_check)"></abnor>
<view class="space-max-footer"></view>
<!-- <fix-bottom-button @cancel="$util.goUrl({url:1,openType:`navigateBack`})" @confirm="toOrder"
:text="[{text:`暂不${navTitle}`,type:'cancel'},{text:'下单',type:'confirm',isAuth:true}]" bgColor="#fff"
:classType="2"> -->
<fix-bottom-button @cancel="$util.goUrl({url:1,openType:`navigateBack`})" @confirm="toOrder"
:text="[{text:`暂不加钟`,type:'cancel'},{text:'下单',type:'confirm',isAuth:true}]" bgColor="#fff"
:classType="2">
</fix-bottom-button>
</view>
</template>
<script>
import {
mapState,
mapActions,
mapMutations
} from "vuex"
export default {
components: {},
data() {
return {
isLoad: false,
options: {},
navTitle: '',
tabList: [{
id: 1,
title: '项目升级'
}, {
id: 2,
title: '项目加钟'
}],
activeIndex: 1,
serviceList: [],
serviceList_check: [],
no_check_id: 0,
have_check: [],
have_check_num: 0,
have_all_check: false,
can_add_order: 0, // 是否可加钟
order_goods: [],
order_uprecord: [],
goodsInd: 0,
showGoods: false,
loading: true,
popupInfo: {},
lockTap: false
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
userInfo: state => state.user.userInfo,
}),
onLoad(options) {
this.options = options
// let {
// tab = 1
// } = options
let tab = 1
this.activeIndex = tab
this.initIndex()
},
watch: {
'have_check'(value) {
if (this.activeIndex == 0) {
this.toFormatHaveCheck()
}
}
},
filters: {
textFormat(val) {
let text = val
if (val.length > 5) {
text = val.substring(0, 5) + '...'
}
return text
}
},
methods: {
...mapActions([]),
...mapMutations(['updateOrderItem']),
async initIndex(refresh = false) {
// #ifdef H5
if (!refresh && this.$jweixin.isWechat()) {
await this.$jweixin.initJssdk();
this.$jweixin.wxReady(() => {
this.$jweixin.hideOptionMenu()
})
}
// #endif
await this.getDetail()
await this.getList()
uni.setNavigationBarTitle({
title: this.navTitle
})
this.isLoad = true
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
},
initRefresh() {
this.initIndex(true)
},
async getDetail() {
let {
id,
} = this.options
let {
order_goods,
can_add_order
} = await this.$api.order.orderInfo({
id
})
this.order_goods = order_goods
this.can_add_order = can_add_order
this.navTitle = can_add_order ? '升级/加钟' : '升级项目'
},
async getList() {
let {
id: order_id,
coach_id
} = this.options
let {
id: order_goods_id,
true_price,
} = this.order_goods[this.goodsInd]
let {
activeIndex
} = this
let methodModel = activeIndex === 0 ? 'getUpOrderGoods' : 'coachServiceList'
let param = activeIndex === 0 ? {
order_goods_id
} : {
coach_id,
order_goods_id,
is_add: 1
}
let data = await this.$api.service[methodModel](param)
if (activeIndex == 1) {
data = data.data
}
data.map(item => {
item.is_check = false
if (activeIndex == 0) {
item.init_add_num = 1
item.init_add_price = (item.price - true_price).toFixed(2)
item.is_check = this.serviceList_check.includes(item.id)
}
})
this.serviceList = data
await this.toFormatHaveCheck(3)
this.loading = false
this.$util.hideAll()
},
handerTabChange(index) {
this.activeIndex = index
this.serviceList = []
this.getList()
},
async toChangeGoods(index) {
this.goodsInd = index
this.showGoods = false
await this.toFormatHaveCheck(2)
this.handerTabChange(0)
},
async toFormatHaveCheck(type = 1) {
let {
id
} = this.order_goods[this.goodsInd]
if (type != 3) {
let arr = this.have_check.filter(item => {
return item.order_goods_id == id
})
this.have_all_check = arr.length == this.serviceList.length
this.serviceList_check = arr.map(item => {
return item.id
})
let have_check_num = 0
arr.map(item => {
have_check_num = have_check_num + item.init_add_num
})
this.have_check_num = have_check_num
}
if (type != 2) {
let no_check = this.serviceList.filter(item => {
return !item.is_check
})
this.no_check_id = no_check.length > 0 ? no_check[0].id : 0
}
},
// 加/减数量
async changeNum(mol, index) {
let {
activeIndex
} = this
if (activeIndex == 0) {
let have_check = this.$util.deepCopy(this.have_check)
let {
init_add_num
} = have_check[index]
let {
num: goods_num
} = this.order_goods[this.goodsInd]
let {
have_check_num
} = this
let num = init_add_num + mol
if ((have_check_num + mol > goods_num) || !num) {
this.$util.showToast({
title: !num ? `数量至少为1` : `数量不可大于${init_add_num}`
})
return
}
have_check[index].init_add_num = num
this.have_check = have_check
return
}
let {
id: order_id,
coach_id
} = this.options
let {
id: service_id,
car_num = 0,
car_id = 0
} = this.serviceList[index]
if (this.lockTap) return;
this.lockTap = true;
let methodModel = mol > 0 ? 'addCar' : 'delCar'
let param = mol > 0 ? {
service_id,
coach_id,
order_id,
num: 1
} : {
id: car_id,
num: 1
}
try {
let add_car_id = await this.$api.order[methodModel](param)
this.serviceList[index].car_num = car_num + mol
if (add_car_id && mol > 0 && !car_id) {
this.serviceList[index].car_id = add_car_id
}
if (this.serviceList[index].car_num < 1) {
this.serviceList[index].car_id = 0
}
this.lockTap = false
} catch (e) {
this.lockTap = false
}
},
// 选择升级项目/加钟项目加购
async toAddDelItem(type, index) {
let {
activeIndex,
have_check_num
} = this
if (activeIndex == 1) return
let {
id: order_goods_id,
num: goods_num,
goods_name
} = this.order_goods[this.goodsInd]
if (type == 1 && have_check_num == goods_num) {
this.$util.showToast({
title: `当前项目最多可升级${goods_num}个服务数量`
})
return
}
if (type == 1) {
this.serviceList[index].order_goods_id = order_goods_id
this.serviceList[index].order_goods_name = goods_name
this.serviceList[index].is_check = true
this.have_check.push(this.serviceList[index])
} else {
let {
id: serid,
order_goods_id: ogid
} = this.have_check[index]
this.have_check.splice(index, 1)
if (order_goods_id == ogid) {
let serind = this.serviceList.findIndex(item => {
return item.id === serid
})
this.serviceList[serind].is_check = false
}
}
},
// 下单
async toOrder() {
let {
have_check,
activeIndex,
} = this
let car_count = 0
if (activeIndex == 1) {
this.serviceList.map(item => {
car_count += item.car_num
})
}
if ((activeIndex == 0 && have_check.length == 0) || (activeIndex == 1 && car_count < 1)) {
let msg = activeIndex == 0 ? `升级` : `加钟`
this.$util.showToast({
title: `请选择${msg}服务`
})
return
}
let {
id: order_id,
coach_id
} = this.options
let val = {
order_type: activeIndex
}
if (activeIndex == 0) {
let order_goods = have_check.map(aitem => {
return {
order_goods_id: aitem.order_goods_id,
service_id: aitem.id,
num: aitem.init_add_num
}
})
val = Object.assign({}, val, {
order_id,
order_goods
})
} else {
val = Object.assign({}, val, {
coach_id,
order_id
})
await this.$api.order.checkAddOrder({
order_id
})
}
this.updateOrderItem({
key: 'bellOrderParams',
val
})
this.$util.goUrl({
url: `/user/pages/bell/order`,
openType: `redirectTo`
})
},
}
}
</script>
<style lang="scss">
.pages-user-bell {
.change-goods-info {
top: 89rpx;
right: 30rpx;
min-width: 218rpx;
min-height: 280rpx;
max-height: 500rpx;
overflow-y: auto;
background: #FFFFFF;
box-shadow: 0px 6px 16px 0px rgba(222, 222, 222, 0.37);
border-radius: 16px;
border: 1px solid #F5F5F5;
z-index: 99999;
.goods-title {
font-size: 20rpx;
margin: 15rpx 0;
}
.cur {
height: 36rpx;
padding: 0 9rpx;
border-radius: 4rpx;
}
}
.list-item {
.icon-xuanze,
.icon-xuanze-fill {
font-size: 40rpx;
}
.cover {
width: 155rpx;
height: 155rpx;
}
.time-long {
min-width: 72rpx;
height: 30rpx;
padding: 0 5rpx;
background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
border-radius: 4rpx;
font-size: 20rpx;
color: #FFEEB9;
margin-right: 16rpx;
}
.f-icontext {
font-size: 18rpx;
}
.text-delete {
font-size: 20rpx;
color: #B9B9B9;
}
.remove-btn {
width: 110rpx;
height: 54rpx;
transform: rotateZ(360deg);
}
.shengji-icon-text {
height: 60rpx
}
}
.change-btn {
width: 125rpx;
height: 46rpx;
font-size: 20rpx;
transform: rotateZ(360deg);
.iconfont {
font-size: 20rpx;
transform: scale(0.8);
}
}
}
</style>