gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

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

@@ -1,76 +1,169 @@
<template>
   <!-- 商品详情 -->
   <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="aspectFill"></image>
               </swiper-item>
            </swiper>
      </view>
      <view class="return-icon iconfont iconzuojiantou"></view>
      <view class="dots-container justify-center">
         <view v-for="(item, index) in bannerList" :key="index">
            <view :class="['dot', index === swiperIndex ? 'actives' : '']">1</view>
      <navigator open-type="navigateBack" hover-class="none">
         <view class="back iconfont iconzuojiantou"></view>
      </navigator>
      <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>
         /3
      </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:[
               {
                  state: 1,
                  name: '商品介绍'
               },
               {
                  state: 2,
                  name: '商品属性'
               }
            ],
            tabIndex:0,
            productInfo: {}
         }
      },
      onLoad(options) {
         this.goodsType = options.goodsType;
         this.getInfo(options.id);
      },
      methods:{
         swiperChange(e){
            this.swiperIndex = e.detail.current;
         },

         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" ');
                  }
						
               }
            })
         }
      }
   }
</script>

<style>
   .return-icon{
   page{
      background: #F6F6F8;
   }
   .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 {
      display: flex;
      padding-bottom: 17px;
   .banner .indicator{
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: rgba(0,0,0,0.5);
      border-radius: 20px;
      padding: 2px 15px;
      color: #FFFFFF;
      font-size: 10px;
   }
   .dots-box{
		
   .product-info{
      background: #FFFFFF;
      padding: 15px 10px;
      font-size: 14px;
      margin-bottom: 10px;
   }
   .dot{
		
   .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;
   }
   .product-desc{
      padding: 10px;
      min-height: 500rpx;
      font-size: 14px;
   }
	
</style>