gx

queenwuli

2020-12-30 bb6aebd55fc9a8039e1c199ae1ea8af4eb547b1b

 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>