gx

queenwuli

2021-01-15 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9

 hive-app/pages/workbench/productDetail/refillCard.vue

@@ -1,52 +1,135 @@
<template>
   <!-- 充值卡 -->
   <view>
      <view class="content">
         <view class="content-title">
            <text>卡项产品可消费类型</text>
      <view class="list">
         <view class="list-item">
            <text>商品编码</text>
            <text>{{productInfo.goodsNo}}</text>
         </view>
         <view class="content-row left">
            <text>深层皮肤管理</text>
         <view class="list-item">
            <text>商品分类</text>
            <text>{{productInfo.goodsType}}</text>
         </view>
         <view class="content-row left">
            <text>家具产品类型</text>
         <view class="list-item">
            <text>赠送金额</text>
            <text>{{productInfo.giftPrice || 0}}</text>
         </view>
         <view class="list-item">
            <text>充值卡使用范围</text>
            <text>{{productInfo.carIsAll | formatCard}}</text>
         </view>
         <view class="list-item">
            <text>最大使用次数</text>
            <text>{{productInfo.maxUseCnt || '-'}}</text>
         </view>
         <view class="list-item">
            <text>每人限购次数</text>
            <text>{{productInfo.limitBuyCnt || '-'}}</text>
         </view>
         <view class="list-item">
            <text>最大销售数量</text>
            <text>{{productInfo.maxSaleCnt || '-'}}</text>
         </view>
      </view>
      <view class="content mt-10">
         <view class="content-title">
            <text>卡项产品可消产品</text>
      <view class="list">
         <view class="title">
            <text>卡项产品可消费类型</text>
         </view>
         <view class="content-row left">
            <text>深层皮肤管理</text>
         <uni-collapse accordion="true">
             <uni-collapse-item :title="item.name" :showAnimation="true" v-for="item in list">
                 <view class="list-row-wrap">
                  <view class="list-row" v-for="op in item.children">
                      {{op.name}}
                  </view>
               </view>
             </uni-collapse-item>
         </uni-collapse>
      </view>
		
      <view class="list">
         <view class="title">
            <text>卡项产品可消费产品</text>
         </view>
         <view class="content-row left">
            <text>皮肤肌底修护液 (10%)</text>
         <view class="list-item" v-for="item in productInfo.assembleProj">
            <text>{{item.name}}</text>
         </view>
      </view>
   </view>
</template>

<script>
   import uniCollapse from '../../../components/uni-collapse/uni-collapse.vue'
   import uniCollapseItem from '../../../components/uni-collapse-item/uni-collapse-item.vue'
   export default{
      components: {
         uniCollapse,
         uniCollapseItem
      },
      props:{
         productInfo: {
            default: {}
         }
      },
      data(){
         return {
            list: []
         }
      },
      filters:{
         formatCard(val){
            if(val==='是'){
               return '所有产品'
            } else {
               return '部分产品'
            }
         }
      },
      created() {
         let arr = [];
         this.productInfo.cardCategory.forEach((item) => {
            if(item.parentId === 0){
               item.children = [];
               arr.push(item)
            }
         });
         arr.forEach((item) => {
            this.productInfo.cardCategory.forEach((op) => {
               if(op.parentId === item.id){
                  item.children.push(op)
               }
            });
         });
         this.list = arr;
      }
   }
</script>

<style>
   .content{
      text-align: center;
   .list{
      background: #FFFFFF;
      padding: 0 10px;
      border-radius: 4px;
      box-shadow:0 -6px 6px rgba(237,234,244,0.5);
      font-size: 14px;
   }
   .content-title{
      padding: 12px 0;
      font-size: 15px;
   .list .title{
      text-align: center;
      padding: 20px 0 8px;
      font-size: 16px;
   }
   .content-row{
   .list-item{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #EDEAF4;
      padding: 12px 0;
   }
   .content-row:nth-last-child(1){
      border: 0;
   .list-row-wrap{
      font-size: 13px;
      padding: 0 40rpx 10rpx;
      color: #999;
   }
   .list-row{
      line-height: 24px;
   }
   .uni-collapse-cell--open{
      background-color: #F6F6F8;
   }
</style>