商品详情

li-guang

2020-12-18 7baf798ebef349d2d40879dc1ec6cbe48c245b94

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

@@ -1,5 +1,6 @@
<template>
   <!-- 商品详情 -->
   <!-- 默认是基础属性 1是项目 2是套餐 3是充值卡 -->
   <view>
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
@@ -13,39 +14,122 @@
               >
               <swiper-item v-for="(item,index) in bannerList" :key="index">
                  <image class="banner-img" :src="item.img" mode="aspectFill"></image>
                  <view class="dots-container flex align-center justify-center">
                     <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text>
                  </view>
               </swiper-item>
            </swiper>
         </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>
      <view class="return-icon iconfont iconzuojiantou" @click="goBack"></view>
      <view class="product-price">
         <text class="font-20 red">￥128.00</text>
         <view class="font-14 flex justify-between">
            <text>多肽沁妍水润面膜</text>
            <text class="gray">月销：122</text>
         </view>
         /3
      </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: 6,
                  fontSize: '30',
                  underLineWidth: 110,
               }"
               @tabClick="tabClick($event)"
            />
         </view>
         <view v-if="tabIndex==0">
            <image class="product-img" mode="aspectFit" 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>
   </view>
</template>

<script>
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   import project from './project.vue';
   import combo from './combo.vue'
   import refillCard from './refillCard.vue'
   export default{
      components: {
          HTabs,
         project,
         combo,
         refillCard
      },
      data(){
         return{
            bannerList:[
               {img:'../../../static/images/banner1.jpg'},
               {img:'../../../static/images/banner1.jpg'}
            ]
            ],
            swiperIndex:0,
            tabs:[
               {
                  state: 1,
                  name: '商品介绍'
               },
               {
                  state: 2,
                  name: '商品属性'
               }
            ],
            tabIndex:0,
            type:3
         }
      },
      methods:{
         swiperChange(e){
            this.swiperIndex = e.detail.current;
         },

         goBack(){
            uni.navigateBack()
         },
         tabClick(index){
            this.tabIndex=index
         }
      }
   }
</script>

<style>
   page{
      background: #F6F6F8;
   }
   .return-icon{
      font-size: 28px;
      opacity: 0.5;
@@ -62,15 +146,50 @@
      height: 100%;
   }
   .dots-container {
      display: flex;
      padding-bottom: 17px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: rgba(0,0,0,0.5);
      border-radius: 20px;
      padding: 2px 15px;
   }
   .dots-box{
		
   .product-price{
      background: #FFFFFF;
      padding: 10px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .dot{
		
   .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;
      margin: 0 10px;
      border-bottom: 1px solid #EDEAF4;
   }
   .product-img{
      width: 100%;
      height: 640px;
   }
   .product-all{
      background: #F6F6F8;
   }
   .product-property{
      background: #FFFFFF;
      padding: 0 10px;
      font-size: 14px;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .product-property-row{
      border-bottom: 1px solid #EDEAF4;
      padding: 10px 0;
   }
   .product-property-row:nth-last-child(1){
      border: 0;
   }
</style>