From 805546268abc5687dbefdd40cd927da62b096fad Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Thu, 31 Dec 2020 16:50:00 +0800
Subject: [PATCH] 领用
---
hive-app/pages/member/projectPlan.vue | 165 ++++++++++++++++++++++++++++---------------------------
1 files changed, 84 insertions(+), 81 deletions(-)
diff --git a/hive-app/pages/member/projectPlan.vue b/hive-app/pages/member/projectPlan.vue
index fb8c228..ea64477 100644
--- a/hive-app/pages/member/projectPlan.vue
+++ b/hive-app/pages/member/projectPlan.vue
@@ -1,13 +1,11 @@
<template>
<!-- 项目套餐 -->
<view>
- <!-- #ifndef H5 -->
- <view class="status_bar"></view>
- <!-- #endif -->
<view>
<h-tabs
class="tab"
- :tabData="tabs"
+ :tabData="tabs"
+ @tabClick="tabChange"
:config="{
color: '#abb1cc',
activeColor: '#518EFF',
@@ -21,68 +19,51 @@
<view class="content">
<view class="content-box">
<view class="content-box-title">
- <text>项目</text>
+ <text class="font-bold">项目</text>
</view>
- <view class="flex align-center content-box-row" v-for="item in 2">
- <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <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="font-12 flex align-center justify-between">
- <text>面部护理</text>
- <text class="red">即将过期</text>
+ <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">时长: 30分钟</text>
- <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
- <view class="mt-5 flex align-center justify-between">
- <text class="font-12 blue">剩余次数: 2次</text>
- <navigator url="./" hover-class="none" class="right">
- <button class="blue-btn small-btn">立即预约</button>
- </navigator>
+ <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>
</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>套餐</text>
+ <text class="font-bold">套餐</text>
</view>
- <view class="flex flex-v content-box-row" v-for="item in 2">
+ <view class="flex flex-v content-box-row" v-for="item in comboList">
<view class="font-14 flex align-center justify-between">
- <text>时尚补水套餐</text>
- <text class="red">即将过期</text>
+ <text>{{item.name}}</text>
+ <text class="status">{{item.isCourse | formatType}}</text>
</view>
- <view class="flex align-center mt-5">
- <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <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">面部护理</text>
- <text class="font-10 gray mt-5">时长: 30分钟</text>
- <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
- <view class="mt-5 flex align-center justify-between">
- <text class="font-12 blue">剩余次数: 2次</text>
- <navigator url="./" hover-class="none" class="right">
- <button class="blue-btn small-btn">立即预约</button>
- </navigator>
+ <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>
</view>
</view>
- <view class="flex align-center mt-10">
- <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
- <view class="flex flex-v ml-10 flex-1">
- <text class="font-12">面部护理</text>
- <text class="font-10 gray mt-5">时长: 30分钟</text>
- <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
- <view class="mt-5 flex align-center justify-between">
- <text class="font-12 blue">剩余次数: 2次</text>
- <navigator url="./" hover-class="none" class="right">
- <button class="blue-btn small-btn">立即预约</button>
- </navigator>
- </view>
- </view>
- </view>
- <view class="font-12 mt-5">
- <text>有效期至: 2021-01-03</text>
+ <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>
@@ -96,25 +77,66 @@
},
data() {
return {
+ type: 0,
tabs:[
{
- state: 1,
+ state: 0,
name: '全部'
},
{
- state: 2,
+ state: 1,
name: '有效'
},
{
- state: 3,
+ state: 2,
name: '1个月内过期'
},
{
- state: 4,
+ state: 3,
name: '失效'
},
],
+ id: '',
+ comboList: [], //套餐
+ projectList: [], //项目
}
+ },
+ onLoad(options) {
+ this.id = options.id;
+ 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()
+ }
+ },
+ filters:{
+ formatType(val){
+ if(val === 'Y'){
+ return '任选套餐'
+ } else {
+ return '固定套餐'
+ }
+ },
+ formatIsInvalid(val){
+ if(val == 1){
+ return '即将过期'
+ }
+ return ''
+ }
}
}
</script>
@@ -134,13 +156,13 @@
}
.content-box{
background: #FFFFFF;
- padding: 10px;
+ 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: 10px 5px;
+ padding: 12px 5px;
border-bottom: 1px solid #EDEAF4;
}
.content-box-row{
@@ -152,36 +174,17 @@
padding-bottom: 0;
}
.product-img{
- width: 80px;
- height: 80px;
+ width: 70px;
+ height: 70px;
border-radius: 4px;
}
- .shopping{
- background: #FFFFFF;
- padding: 10px 10px;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
+ .status{
+ width: 80px;
+ text-align: right;
+ color: #a5abaf;
+ font-weight: 700;
}
- .shopping-icon{
- font-size: 28px;
- position: relative;
- }
- .shopping-icon-num{
- width: 20px;
- height: 20px;
- background: #518EFF;
- border-radius: 50%;
- color: #FFFFFF;
- position: absolute;
- right: -10px;
- top: -10px;
- }
- .btn{
- border-radius: 20px;
- line-height: 34px;
- padding: 0 24px;
- font-size: 14px;
+ .no-record{
+ margin: 20px 0!important;
}
</style>
--
Gitblit v1.9.1