gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

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

@@ -1,104 +1,73 @@
<template>
   <!-- 商品详情 -->
   <!-- 默认是基础属性 1是项目 2是套餐 3是充值卡 -->
   <view>
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <view class="banner">
         <swiper class="swiper" 
            autoplay="true" 
            interval="5000" 
            duration="1500"	
            @change="swiperChange"
            >
            <swiper-item v-for="(item,index) in bannerList" :key="index">
               <image class="banner-img" :src="item.img" mode="widthFix"></image>
               <view class="dots-container flex align-center justify-center">
                  <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text>
               </view>
            </swiper-item>
         </swiper>
      </view>
      <navigator open-type="navigateBack">
         <view class="return-icon iconfont iconzuojiantou"></view>
      <navigator open-type="navigateBack" hover-class="none">
         <view class="back iconfont iconzuojiantou"></view>
      </navigator>
      <view class="product-price">
         <text class="font-24 red font-bold">￥128.00</text>
         <view class="font-14 flex justify-between mt-5">
            <text>多肽沁妍水润面膜</text>
            <text class="gray">月销：122</text>
      <swiper class="banner"
         autoplay="true" 
         interval="5000" 
         duration="1500"	
         @change="swiperChange">
         <swiper-item v-for="(item,index) in banner" :key="index">
            <image class="img" :src="item?item:'../../../static/images/no-img.png'"></image>
            <view class="indicator">
               <text>{{swiperIndex+1}}/{{banner.length}}</text>
            </view>
         </swiper-item>
      </swiper>
      <view class="product-info">
         <text class="price">￥{{productInfo.salePrice}}</text>
         <view class="flex justify-between align-center">
            <text>{{productInfo.goodsName}}</text>
            <text class="gray">月销：{{productInfo.saleCnt}}</text>
         </view>
      </view>
      <view class="product-info mt-15">
         <view class="product-info-row">
            <h-tabs
               class="tab"
               :tabData="tabs" 
               :config="{
                  color: '#abb1cc',
                  activeColor: '#518EFF',
                  underLineColor: '#518EFF',
                  underLineHeight: 4,
                  fontSize: '28',
                  underLineWidth: 110
               }"
               @tabClick="tabClick($event)"
            />
         </view>
         <view v-if="tabIndex==0">
            <image class="product-img" mode="widthFix" src="../../../static/images/banner1.jpg"></image>
         </view>
         <view v-else class="product-all">
            <view class="product-property">
               <view class="product-property-row flex justify-between">
                  <text>商品编码</text>
                  <text>123123000</text>
               </view>
               <view class="product-property-row flex justify-between">
                  <text>商品分类</text>
                  <text>家居产品</text>
               </view>
               <view class="product-property-row flex justify-between">
                  <text>规格</text>
                  <text>500ml</text>
               </view>
               <view class="product-property-row flex justify-between">
                  <text>每人限购次数</text>
                  <text>1</text>
               </view>
               <view class="product-property-row flex justify-between">
                  <text>最大销售数量</text>
                  <text>23</text>
               </view>
            </view>	
            <project class="mt-10" v-if="type==1"></project>
            <combo class="mt-10" v-if="type==2"></combo>
            <refillCard class="mt-10" v-if="type==3"></refillCard>
         </view>
			
      <view class="product-desc-wrap">
         <h-tabs
            class="tab"
            :tabData="tabs" 
            :config="{
               color: '#abb1cc',
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 4,
               fontSize: '28',
               underLineWidth: 110
            }"
            @tabClick="tabClick($event)"
         />
         <template v-if="tabIndex==0">
            <view class="product-desc" v-html="productInfo.desc"></view>
         </template>
         <template v-else>
            <product :productInfo="productInfo" v-if="goodsType=='家居产品'"></product>
            <project :productInfo="productInfo" v-if="goodsType=='项目'"></project>
            <combo :productInfo="productInfo" v-if="goodsType=='套餐'"></combo>
            <refillCard :productInfo="productInfo" v-if="goodsType=='充值卡'"></refillCard>
         </template>
      </view>
   </view>
</template>

<script>
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   import product from './product.vue';
   import project from './project.vue';
   import combo from './combo.vue'
   import refillCard from './refillCard.vue'
   export default{
      components: {
          HTabs,
         product,
         project,
         combo,
         refillCard
      },
      data(){
         return{
            bannerList:[
               {img:'../../../static/images/banner1.jpg'},
               {img:'../../../static/images/banner1.jpg'}
            ],
            goodsType: '家居产品',
            banner:[],
            swiperIndex:0,
            tabs:[
               {
@@ -111,8 +80,12 @@
               }
            ],
            tabIndex:0,
            type:3
            productInfo: {}
         }
      },
      onLoad(options) {
         this.goodsType = options.goodsType;
         this.getInfo(options.id);
      },
      methods:{
         swiperChange(e){
@@ -120,6 +93,18 @@
         },
         tabClick(index){
            this.tabIndex=index
         },
         getInfo(id){
            this.$httpUtils.request('/api/order/findGoodsDetailById/'+id).then((res) => {
               if(res.status == 200){
                  this.productInfo = res.mapInfo.goods;
                  this.banner = this.productInfo.img?this.productInfo.img.split(','):[];
                  if(this.productInfo.desc){
                     this.productInfo.desc = this.productInfo.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                  }
						
               }
            })
         }
      }
   }
@@ -129,64 +114,56 @@
   page{
      background: #F6F6F8;
   }
   .return-icon{
   .back{
      position: absolute;
      top: var(--status-bar-height);
      left: 10px;
      z-index: 9;
      font-size: 28px;
      opacity: 0.5;
      position: absolute;
      top: 10px;
      left: 10px;
   }
   .swiper{
   .banner{
      width: 100%;
      height: 300px;
   }
   .banner-img{
   .banner .img{
      width: 100%;
      height: 100%;
   }
   .dots-container {
   .banner .indicator{
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: rgba(0,0,0,0.5);
      border-radius: 20px;
      padding: 2px 15px;
   }
   .product-price{
      background: #FFFFFF;
      padding: 15px 10px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      color: #FFFFFF;
      font-size: 10px;
   }
   .product-info{
      background: #FFFFFF;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      box-shadow:0 -6px 6px rgba(237,234,244,0.5);
   }
   .product-info-row{
      background: #FFFFFF;
      border-bottom: 1px solid #EDEAF4;
   }
   .product-img{
      width: 100%;
   }
   .product-all{
      background: #F6F6F8;
   }
   .product-property{
      background: #FFFFFF;
      padding: 0 10px;
      padding: 15px 10px;
      font-size: 14px;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      margin-bottom: 10px;
   }
   .product-property-row{
   .product-info .price{
      display: block;
      font-size: 24px;
      font-weight: bold;
      color: #FA5151;
      margin-bottom: 5px;
   }
   .product-desc-wrap{
      background: #FFFFFF;
   }
   .tab{
      background: #FFFFFF;
      border-bottom: 1px solid #EDEAF4;
      padding: 12px 0;
   }
   .product-property-row:nth-last-child(1){
      border: 0;
   .product-desc{
      padding: 10px;
      min-height: 500rpx;
      font-size: 14px;
   }
	
</style>