<template>
|
<!-- 项目套餐 -->
|
<view>
|
<view>
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
@tabClick="tabChange"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 6,
|
fontSize: '28',
|
underLineWidth: 60,
|
}"
|
/>
|
</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>
|
<view class="flex align-center justify-between">
|
<view>
|
<text class="font-10 gray mt-5">有效期至: {{item.invalidTime || '-'}}</text>
|
<text class="font-12 blue block">剩余次数: {{item.count}}次</text>
|
</view>
|
<button class="blue-btn" v-if="item.count" @click="order(item)">立即预约</button>
|
</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>
|
<view class="flex align-center justify-between">
|
<view>
|
<text class="font-10 gray mt-5">时长: {{op.timeLength}}分钟</text>
|
<text class="font-12 blue block">剩余次数: {{op.count}}次</text>
|
</view>
|
<button class="blue-btn" v-if="op.count" @click="order(op)">立即预约</button>
|
</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>剩余总次数：{{item.count}}</text>
|
</view>
|
</view>
|
<no-record :isShow="!comboList.length" size="mini" txt="暂无套餐" class="no-record"></no-record>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
export default {
|
components: {
|
HTabs
|
},
|
data() {
|
return {
|
type: 0,
|
tabs:[
|
{
|
state: 0,
|
name: '全部'
|
},
|
{
|
state: 1,
|
name: '有效'
|
},
|
{
|
state: 2,
|
name: '1个月内过期'
|
},
|
{
|
state: 3,
|
name: '失效'
|
},
|
],
|
id: '',
|
vipName: '',
|
comboList: [], //套餐
|
projectList: [], //项目
|
}
|
},
|
onLoad(options) {
|
this.id = options.id;
|
this.vipName = options.vipName;
|
this.loadList();
|
},
|
methods:{
|
loadList(){
|
this.$httpUtils.request('/api/serviceOrder/findVipProject',{
|
type: this.type,
|
vipId: this.id
|
},'POST').then((res) => {
|
if(res.status == 200){
|
let result = res.mapInfo.proj;
|
this.projectList = result.proj;
|
this.comboList = result.composeProj;
|
}
|
})
|
},
|
tabChange(e){
|
this.type = e;
|
this.loadList()
|
},
|
// 立即预约
|
order(goods){
|
goods = Object.assign(goods, {num: 1});
|
let selectItems = [goods];
|
let str = (encodeURIComponent(JSON.stringify(selectItems))).replace(/%/g, '%25');
|
uni.navigateTo({
|
url: '../workbench/selectService/index?id='+this.id+'&vipName='+this.vipName+'&selectItems='+str
|
})
|
}
|
},
|
filters:{
|
formatType(val){
|
if(val === 'Y'){
|
return '任选套餐'
|
} else {
|
return '固定套餐'
|
}
|
},
|
formatIsInvalid(val){
|
if(val == 1){
|
return '即将过期'
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.tab{
|
background: #FFFFFF;
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.content{
|
padding: 10px;
|
}
|
.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: 70px;
|
height: 70px;
|
border-radius: 4px;
|
}
|
.status{
|
width: 80px;
|
flex: 0 0 80px;
|
text-align: right;
|
color: #a5abaf;
|
font-weight: 700;
|
}
|
.no-record{
|
margin: 20px 0!important;
|
}
|
.blue-btn{
|
margin: 0;
|
font-size: 12px;
|
line-height: 30px;
|
border-radius: 16px;
|
}
|
</style>
|
