<template>
|
<view>
|
<view class="header">
|
<search-bar @confirm="search" placeholder="商品名称、编号、拼音" class="ml-10 mr-10"></search-bar>
|
</view>
|
<view class="content">
|
<view class="content-box">
|
<view class="content-box-title">
|
<text class="font-bold">项目</text>
|
</view>
|
<view class="flex align-center content-box-row" v-for="item in projectList">
|
<image class="product-img" mode="aspectFill" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
|
<view class="flex flex-v ml-10 flex-1">
|
<view class="flex justify-between">
|
<text class="font-12">{{item.name}}</text>
|
<text class="font-12 red">{{item.isInvalid | formatIsInvalid}}</text>
|
</view>
|
<text class="font-10 gray mt-5">时长: {{item.timeLength}}分钟</text>
|
<text class="font-10 gray mt-5">有效期至: {{item.invalidTime || '-'}}</text>
|
<view class="flex align-center justify-between">
|
<text class="font-12 blue">剩余次数: {{item.count}}次</text>
|
<view class="flex align-center justify-end mt-10">
|
<template v-if="item.num">
|
<text class="iconfont iconjian blue-outline-btn-circle mr-10"
|
@click.stop="decreaseGoods(item)"></text>
|
<text>{{item.num}}</text>
|
</template>
|
<text class="iconfont iconjia blue-btn-circle ml-10"
|
@click.stop="addGoods(item)"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<no-record :isShow="!projectList.length" size="mini" txt="暂无项目" class="no-record"></no-record>
|
</view>
|
|
<view class="content-box mt-10">
|
<view class="content-box-title">
|
<text class="font-bold">套餐</text>
|
</view>
|
<view class="flex flex-v content-box-row" v-for="item in comboList">
|
<view class="font-14 flex align-center justify-between">
|
<text>{{item.name}}</text>
|
<text class="status">{{item.isCourse | formatType}}</text>
|
</view>
|
<view class="flex align-center mt-10" v-for="op in item.proj">
|
<image class="product-img" mode="aspectFill" :src="op.img?op.img:'../../../static/images/no-img.png'"></image>
|
<view class="flex flex-v ml-10 flex-1">
|
<text class="font-12">{{op.name}}</text>
|
<text class="font-10 gray mt-5">时长: {{op.timeLength}}分钟</text>
|
<view class="flex align-center justify-between">
|
<text class="font-12 blue">剩余次数: {{op.count}}次</text>
|
<view class="flex align-center justify-end mt-10">
|
<template v-if="op.num">
|
<text class="iconfont iconjian blue-outline-btn-circle mr-10"
|
@click.stop="decreaseGoods(op)"></text>
|
<text>{{op.num}}</text>
|
</template>
|
<text class="iconfont iconjia blue-btn-circle ml-10"
|
@click.stop="addGoods(op)"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="flex justify-between font-12 mt-10">
|
<text>有效期至: {{item.invalidTime}}<text class="red" v-if="item.isInvalid==1">（{{item.isInvalid | formatIsInvalid}}）</text></text>
|
<text v-if="item.isCourse === 'Y'">剩余总次数：{{item.count}}</text>
|
</view>
|
</view>
|
<no-record :isShow="!comboList.length" size="mini" txt="暂无套餐" class="no-record"></no-record>
|
</view>
|
</view>
|
<view class="footer">
|
<view class="flex align-center" @click="openShoppingCart">
|
<view class="icon-car-wrap">
|
<text class="iconfont iconicongouwuche icon-car gray"></text>
|
<text class="count" v-if="totalCount">{{totalCount}}</text>
|
</view>
|
</view>
|
<button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
|
</view>
|
<shopping-cart ref="shopCart" :list="selectItems" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
|
</view>
|
</template>
|
|
<script>
|
import searchBar from '@/components/searchBar/index.vue';
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
import shoppingCart from './shoppingCart.vue'
|
export default {
|
components:{
|
searchBar,
|
uniPopup,
|
shoppingCart
|
},
|
data(){
|
return{
|
queryKey: '',
|
id: '',
|
comboList: [], //套餐
|
projectList: [], //项目
|
selectItems: []
|
}
|
},
|
onLoad(options) {
|
this.id = options.id;
|
if(options.selectItems){
|
this.selectItems = JSON.parse(decodeURIComponent(options.selectItems));
|
}
|
uni.setNavigationBarTitle({
|
title: '当前客户：' + options.vipName
|
});
|
this.loadList();
|
},
|
computed:{
|
// 购物车总数量
|
totalCount(){
|
let count = 0;
|
this.selectItems.forEach((item) => {
|
count += item.num;
|
})
|
return count;
|
},
|
isEnableSumbit(){
|
return !this.selectItems.length
|
}
|
},
|
methods:{
|
openShoppingCart(){
|
this.$refs.shopCart.toggle()
|
},
|
// 搜索
|
search(val){
|
this.queryKey = val;
|
this.loadList();
|
},
|
loadList(){
|
this.$httpUtils.request('/api/serviceOrder/findVipProject',{
|
queryKey: this.queryKey,
|
vipId: this.id
|
},'POST').then((res) => {
|
if(res.status == 200){
|
let result = res.mapInfo.proj;
|
let projectList = result.proj;
|
let comboList = result.composeProj;
|
// 项目
|
projectList.forEach((item) => {
|
item.num = 0;
|
this.selectItems.forEach((op) => {
|
if(item.id == op.id){
|
item.num = op.num;
|
}
|
})
|
});
|
|
// 套餐
|
comboList.forEach((item) => {
|
item.proj.forEach((op) => {
|
op.num = 0;
|
this.selectItems.forEach((key) => {
|
if(op.id == key.id){
|
op.num = key.num;
|
}
|
})
|
op.totalCount = item.count;
|
op.isCourse = item.isCourse;
|
op.parentId = item.id;
|
})
|
});
|
this.projectList = projectList;
|
this.comboList = comboList;
|
}
|
})
|
},
|
getCurCount(id){
|
let curCount = 0;
|
let list = [];
|
this.comboList.forEach((item) => {
|
if(item.id == id){
|
list = item.proj
|
};
|
})
|
list.forEach((item) => {
|
curCount += item.num;
|
});
|
return curCount;
|
},
|
/**
|
* goods.isCourse: 套餐类型 Y-任选套餐 N-固定套餐
|
* */
|
addGoods(goods){
|
// 当前总数
|
let curCount = this.getCurCount(goods.parentId)
|
// 任选套餐，当前总数不能超出总剩余数
|
if(goods.isCourse === 'Y' && curCount >= goods.totalCount){
|
this.$toast.info('超出剩余次数~')
|
return;
|
}
|
if(goods.num >= goods.count){
|
this.$toast.info('超出剩余次数~')
|
return;
|
}
|
goods.num++;
|
|
let selectIndex = this.selectItems.findIndex((item) => {
|
return item.id == goods.id;
|
});
|
// 该商品若已在购物车，则购物车数量上+1,否则加入购物车
|
if(selectIndex > -1){
|
this.selectItems[selectIndex].num = goods.num;
|
}else{
|
this.selectItems.push(goods);
|
}
|
|
// 项目
|
let projectIndex = this.projectList.findIndex((item) => {
|
return item.id == goods.id;
|
})
|
if(projectIndex > -1){
|
this.projectList[projectIndex].num = goods.num;
|
}
|
// 套餐
|
let comboParentIndex = this.comboList.findIndex((item) => {
|
return item.id == goods.parentId;
|
})
|
let comboIndex = null;
|
if(comboParentIndex > -1){
|
comboIndex = this.comboList[comboParentIndex].proj.findIndex((item) => {
|
return item.id == goods.id;
|
})
|
}
|
if(comboParentIndex > -1 && comboIndex > -1){
|
this.comboList[comboParentIndex].proj[comboIndex].num = goods.num;
|
}
|
},
|
decreaseGoods(goods){
|
goods.num = goods.num <= 0 ? 0 : goods.num - 1;
|
|
let selectIndex = this.selectItems.findIndex((item) => {
|
return item.id == goods.id;
|
});
|
// 该商品若已在购物车，则购物车数量上-1,否则从购物车删除
|
if(goods.num >= 1){
|
this.selectItems[selectIndex].num = goods.num;
|
}else{
|
this.selectItems.splice(selectIndex, 1);
|
}
|
|
// 项目
|
let projectIndex = this.projectList.findIndex((item) => {
|
return item.id == goods.id;
|
})
|
if(projectIndex > -1){
|
this.projectList[projectIndex].num = goods.num;
|
}
|
// 套餐
|
let comboParentIndex = this.comboList.findIndex((item) => {
|
return item.id == goods.parentId;
|
})
|
let comboIndex = null;
|
if(comboParentIndex > -1){
|
comboIndex = this.comboList[comboParentIndex].proj.findIndex((item) => {
|
return item.id == goods.id;
|
})
|
}
|
if(comboParentIndex > -1 && comboIndex > -1){
|
this.comboList[comboParentIndex].proj[comboIndex].num = goods.num;
|
}
|
},
|
clearShopCart(){
|
this.selectItems = [];
|
this.comboList.forEach((item) => {
|
item.num = 0;
|
});
|
let arr = this.comboList;
|
arr.forEach((item) => {
|
item.proj.forEach((op) => {
|
op.num = 0
|
})
|
});
|
this.comboList = arr;
|
this.projectList.forEach((item) => {
|
item.num = 0;
|
});
|
},
|
submit(){
|
let str = (encodeURIComponent(JSON.stringify(this.selectItems))).replace(/%/g, '%25');
|
uni.navigateTo({
|
url: '../confirmService?id='+this.id+'&list='+str
|
});
|
}
|
},
|
filters:{
|
formatType(val){
|
if(val === 'Y'){
|
return '任选套餐'
|
} else {
|
return '固定套餐'
|
}
|
},
|
formatIsInvalid(val){
|
if(val == 1){
|
return '即将过期'
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.header{
|
background: #FFFFFF;
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
padding:10px 0 1px;
|
}
|
.content{
|
padding: 10px 10px 65px;
|
}
|
.content-box{
|
background: #FFFFFF;
|
padding: 0 10px 10px;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.content-box-title{
|
padding: 12px 5px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.content-box-row{
|
padding: 10px 0;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.content-box-row:nth-last-child(1){
|
border: 0;
|
padding-bottom: 0;
|
}
|
.product-img{
|
width: 80px;
|
height: 80px;
|
border-radius: 4px;
|
}
|
.status{
|
width: 80px;
|
text-align: right;
|
color: #a5abaf;
|
font-weight: 700;
|
}
|
.footer{
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: 999;
|
display: flex;
|
justify-content: space-between;
|
background: #FFFFFF;
|
padding: 10px;
|
padding-bottom: 10px;
|
padding-bottom: calc(10px + constant(safe-area-inset-bottom));
|
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
box-shadow: 0 -6px 6px rgba(237,234,244,0.2);
|
}
|
.footer .icon-car-wrap{
|
position: relative;
|
margin-right: 15px;
|
}
|
.footer .icon-car{
|
font-size: 28px;
|
}
|
.footer .count{
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
background: #518EFF;
|
border-radius: 50%;
|
color: #FFFFFF;
|
font-size: 12px;
|
text-align: center;
|
}
|
.footer .btn{
|
border-radius: 20px;
|
line-height: 36px;
|
padding: 0 26px;
|
font-size: 14px;
|
}
|
.no-record{
|
margin: 20px 0!important;
|
}
|
</style>
|
