products/uni-shop/pages/product/product.vue

<template>
  <v-header title="商品详情" async @fetch="fetch" backgroundColor="#fff">
    <view class="container overflow flex screen_all">
      <view class="flex-all-1 overflow">
        <scroll-view
            scroll-y
            class="screen_all"
        >
          <view>
            <view class="banner" >
              <swiper  duration="400">
                <swiper-item class="swiper-item" v-for="(item,index) in item.images" :key="index">
                  <image :src="item" @click="previewImage(index)" mode="aspectFill"></image>
                </swiper-item>
              </swiper>
            </view>
            <view class="shop-info overflow">
              <view class="shop-price-warp">
                <text class="shop-price"><text>¥</text><text class="shop-price-target">{{item.sales_price || '0.00'}}</text></text>
              </view>
              <view class="row">
                <view class="flex-all-1 shop-title">{{item.title}}</view>
                <view @click="openShareModal" class="shop-share-warp shop-share row aCenter">
                  <image src="/static/images/share.png" class="shop-share-icon"></image>
                  <text>分享</text>
                </view>
              </view>
            </view>

            <view class="shop-padding">
              <!--   排行榜   -->
              <view class="ranking row aCenter" @click.stop="routerRanking">
                <image src="/static/images/ranking.png" class="ranking-icon"></image>
                <view class="ranking-title">排行榜</view>
                <view class="flex-all-1 row ranking-introduce line-1">商品热榜<text v-if="item.rankTexts" :class="{'ranking-prominent':cItem.active}" v-for="(cItem,index) in item.rankTexts" :key="index">{{cItem.label}}</text></view>
                <text class="iconfont iconfont-more ranking-more"></text>
              </view>
              <!--   服务类型   -->
              <view class="service">
                <view
                    v-for="(cItem,index) in productData"
                    :key="index"
                    class="row aCenter service-aside"
                    v-if="cItem.where&&!loadingStatus?item[cItem.where]:true"
                >
                  <view>{{cItem.label}}</view>
                  <view class="flex-all-1 service-content">
                    <view v-if="cItem.type==='coupon'" @click="openCoupon" class="row aCenter">
                      <view class="service-coupon-label center">领券</view>
                      <view class="flex-all-1"></view>
                      <text class="iconfont iconfont-more ranking-more"></text>
                    </view>
                    <view v-else class="service-title line-1">{{service[cItem.key]}}</view>
                  </view>
                </view>
              </view>

              <!--   商品评论   -->
              <view class="comment">
                <view class="comment-header row aCenter">
                  <view class="flex-all-1 row">商品评论<text v-if="item.evaluate && item.evaluate.count >0" class="comment-header-margin">({{item.evaluate.count}})</text></view>
                  <view v-if="loadingStatus || item.evaluate.count>0" @click="routerRankingList" class="row aCenter">
                    <text class="comment-more-title">查看全部</text>
                    <text class="iconfont iconfont-more ranking-more"></text>
                  </view>
                </view>
                <view class="comment-content">

                  <layout-comment
                    v-for="(item,index) in comment"
                    :key="index"
                    :item="item"
                    goDetail
                  ></layout-comment>

                  <view v-if="!loadingStatus && item.evaluate.count<=0" class="comment-content-empty">此商品暂无评论</view>
                </view>


              </view>

              <!--   店铺   -->
              <view @click="goHome" class="shop-store row aCenter">
                <image src="/static/images/logo.jpg" class="shop-store-image"></image>
                <view class="flex-all-1">
                  <view class="shop-store-title">{{config.name}}</view>
                  <view class="shop-store-comment center">
                    <uni-rate  class="store-comment-target" :margin="1" :disabled="true" :value="5"></uni-rate>
                  </view>
                </view>
                <view class="row aCenter">
                  <text class="comment-more-title store-more-title">进入店铺</text>
                  <text class="iconfont iconfont-more ranking-more"></text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!--  底部控件  -->
      <view  class="control-footer row aCenter">
        <view
            v-for="(item,index) in productControl"
            :key="index"
            class="flex-all-1 center relative"
            @click="trigger(item)"
        >
          <button v-if="item.type" :open-type="item.type" class="flex-all-1 clear-button flex center">
            <image :src="item.icon" mode="aspectFit" class="control-icon"></image>
            <view class="control-label">{{item.label}}</view>
          </button>
          <template v-else>
            <image :src="item.icon" mode="aspectFit" class="control-icon"></image>
            <view class="control-label">{{item.label}}</view>
            <dot v-if="item.carDot" class="control-label-dot absolute" :value="car.carNumber"></dot>
          </template>

        </view>
        <view v-if="failMessage" class="control-button-group center control-fail-button overflow"><view class="line-1">{{failMessage}}</view></view>
        <view class="control-button-group row overflow" v-else-if="isLogin">
          <view @click="triggerBuyType(2)" v-if="!item.is_datebuy" class="control-button control-button-car center">加入购物车</view>
          <view @click="triggerBuyType(1)" :class="{'flex-1': item.is_datebuy}" class="control-button center">立即购买</view>
        </view>
        <view @click="routerLogin" class="control-button-group control-button-group-login center" v-else>授权登录</view>
      </view>

      <!--  选择分享方式  -->
      <modal-select v-model="productShareModal" @trigger="triggerProduct" :data="productShare"></modal-select>

      <!--  选择领取优惠券  -->
      <modal v-model="couponModal" animateContent="translateYR">
        <view class="screen_all flex">
          <view class="flex-all-1" @click="cancelCoupon"></view>
          <view class="coupon-modal flex">
            <view class="coupon-title center">优惠</view>
            <view class="coupon-sub-title">领取以下优惠券</view>
            <view class="flex-all-1 overflow coupon-screen">
              <scroll-view class="screen_all overflow" scroll-y>
                <view>
                  <layout-use-coupon
                    v-for="(cItem,index) in couponData"
                    :key="index"
                    :item="cItem"
                    @receive="receiveCoupon($event,index)"
                    :receiveStatus="couponReceiveIds[cItem.id]"
                  ></layout-use-coupon>

                  <view class="coupon-info">最终已购买价格为准</view>
                </view>
              </scroll-view>
            </view>
            <view @click="cancelCoupon" class="coupon-button center">我知道了</view>
          </view>
        </view>
      </modal>

      <!--   商品规格购买模块   -->
      <modal v-model="ruleModal" animateContent="translateYR">
        <view class="screen_all flex">
          <view class="flex-all-1" @click="cancelRuleModal"></view>
          <view class="shop-buy-modal flex">
            <view class="shop-buy-header row aCenter">
              <v-image :src="item.image" class="shop-buy-image"></v-image>
              <view class="flex-all-1 shop-buy-content">
                <view class="shop-buy-title line-2 overflow">{{item.title}}</view>
                <text class="shop-buy-price-group"><text>¥</text><text>{{buyType===1 && item.is_datebuy?rulesPriceNumber:priceNumber}}</text></text>
              </view>
              <view class="shop-buy-close">
                <view @click="cancelRuleModal" class="iconfont iconfont-close shop-buy-close-icon"></view>
              </view>
            </view>
            <!--  规格  -->
            <view v-show="buyType===1" v-if="item.is_datebuy" class="flex-all-1 overflow">
              <scroll-view
                scroll-y
                class="screen_all"
              >
                <view class="shop-rules-container">
                  <view class="shop-rules-item"
                        v-for="(item,index) in rulesOption"
                        :key="index"
                  >
                    <view class="shop-rules-title row aCenter wrap">
                      <view class="shop-rules-title-target line-1">{{item.label}}</view>
                      <view class="flex-all-1 shop-rules-info" v-if="item.info">{{item.info}}</view>
                    </view>
                    <view class="shop-rules-group row wrap">
                      <view class="shop-rules-label jCenter"
                            v-for="(cItem,cIndex) in item.data"
                            :class="{'shop-rules-label-active': cItem.value === rules[item.key]}"
                            :key="cIndex"
                            @click="triggerChangeRule(cItem,index)"
                      >
                        <view class="line-1">{{cItem.label}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
            <!--  数量  -->
            <view class="row aCenter shop-step">
              <view class="flex-all-1">数量</view>
              <v-step :value="buyNumber" @input="changeBuyNumber"></v-step>
            </view>
            <!--  按钮  -->
            <view class="shop-buy-button-warp center">
              <view v-if="failMessage" class="shop-buy-button control-button center control-fail-button overflow"><view class="line-1">{{failMessage}}</view></view>
              <view v-else-if="isLogin" class="shop-buy-button center control-button"
                :class="{'control-button-car':buyType===2}"
                    @click="triggerBuy(buyType)"
              >{{buyType===2?'加入购物车':'立即购买'}}</view>
              <view v-else @click="routerLogin" class="shop-buy-button control-button control-button-group-login center" >授权登录</view>
            </view>
          </view>
        </view>
      </modal>

      <poster ref="poster" :authorize="authorize" @openSetting="openSetting"></poster>
    </view>
  </v-header>

</template>

<script>
	import {
    mapState
	} from 'vuex';
	import layoutComment from '@/layout/layout-commet/main.vue';
	import uniRate from '@/components/uni-rate/uni-rate';
	import modalSelect from '@/components/modal-select/main.vue';
	import mixins from './mixins/index';
	import modal from '@/components/modal/main.vue';
	import vHeader from '@/components/v-header/main.vue';
	import vStep from '@/components/v-step/main.vue';
  import layoutUseCoupon from '@/layout/layout-use-coupon/main.vue';
  import vImage from '@/components/v-image/main';
  import poster from '@/components/poster/poster';
  import dot from '@/components/dot/main';
	export default {
    mixins,
		components: {
      layoutComment,
      uniRate,
      modalSelect,
      modal,
      vHeader,
      vImage,
      vStep,
      layoutUseCoupon,
      poster,
      dot
		},
		computed: {
      ...mapState(['config','car']),
		}
	}
</script>

<style lang="scss" src="./product.scss"></style>