jichuangshe/mini/pages/product/detail.vue

<template>
  <page-loading :loading="loading">
    <scroll-view
      class="product-detail"
      scroll-x="false"
      :scroll-top="scrollTop"
      :scroll-into-view="intoView"
      scroll-y
    >
      <!--  案例    -->
      <view id="top" class="cases">
        <image
          v-for="(item,index) in detail.cases"
          :key="index"
          class="full-img"
          :src="item"
          mode="aspectFill"
          @click="handlePreview(detail.cases, index)"
        />
      </view>
      <!--  只有VIP用户和设计师才能查看 价格     -->
      <template v-if="userInfo.account.type === $const.ACCOUNT_DESIGN || userInfo.account.type === $const.ACCOUNT_VIP">
        <u-divider />
        <!-- 资料下载  -->
        <view id="file" class="file">
          <view class="header main-between cross-center">
            <view class="left main-left cross-center">
              <view class="icon icon-file" />
              <text>资料下载</text>
            </view>
            <view class="icon" @click="fileShow = !fileShow">
              <u-icon :name="fileShow?'minus':'plus'" size="36rpx" />
            </view>
          </view>
          <view class="content dir-top-wrap" :class="fileShow?'show':''">
            <view
              v-for="(item,index) in detail.files"
              :key="index"
              class="file-item main-between cross-center"
            >
              <text>{{ item.name }}</text>
              <view class="icon icon-download" @click="handleCopy(item)" />
            </view>
          </view>
        </view>
      </template>

      <!--  只有VIP用户才能查看 价格     -->
      <template v-if="userInfo.account.type === $const.ACCOUNT_VIP">
        <u-divider />
        <!--   查看价格    -->
        <view id="price" class="price main-between cross-center">
          <u-text :text="specsText" color="#B4936D" size="32rpx" :lines="1" />
          <view class="number">
            <u-text :text="price" mode="price" color="#B4936D" size="36rpx" align="right" />
          </view>
        </view>
        <!--  规格    -->
        <u-divider />
        <view class="specs">
          <view
            v-for="(item, index) in specs"
            :key="index"
            class="spec-item"
          >
            <view class="group-name main-between cross-center">
              <text>{{ item.name }}</text>
              <u-icon :name="item.show?'minus':'plus'" @click="handleOpenSpec(item)" />
            </view>
            <view v-show="item.show" class="specs-content dir-left-wrap">
              <view
                v-for="(spec, specIndex) in item.specs"
                :key="specIndex"
                class="spec main-center cross-center"
                :class="{active: spec.active}"
                @click="handleSelectSpec(spec)"
              >
                {{ spec.name }}
              </view>
            </view>
            <u-divider />
          </view>
        </view>
      </template>
      <!--定位锚点-->
      <view class="float-view dir-top-wrap  cross-center" :class="{show: showView}">
        <view class="icon icon-close" @click="showView = false" />
        <view class="view-item main-left cross-center" @click="scrollIntoView('top')">
          <view class="icon icon-up" />
          <text>回到顶部</text>
        </view>
        <view
          v-if="userInfo.account.type === $const.ACCOUNT_DESIGN || userInfo.account.type === $const.ACCOUNT_VIP"
          class="view-item main-left cross-center"
          @click="scrollIntoView('file')"
        >
          <view class="icon icon-down" />
          <text>资料下载</text>
        </view>
        <view
          v-if="userInfo.account.type === $const.ACCOUNT_VIP"
          class="view-item main-left cross-center"
          @click="scrollIntoView('price')"
        >
          <view class="icon icon-eye" />
          <text>查看价格</text>
        </view>
      </view>
      <view class="float-btn icon icon-float-btn" @click="showView = !showView" />
    </scroll-view>
  </page-loading>
</template>

<script>
import { mapState } from 'vuex'
import PageLoading from '@/components/PageLoading'
export default {
  name: 'ProductDetail',
  components: { PageLoading },
  data() {
    return {
      id: '',
      loading: true,
      intoView: '',
      detail: {},
      specs: [],
      showView: false,
      scrollTop: 0,
      fileShow: false,
      selectedSpecs: []
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    }),
    price() {
      let price = 0
      this.selectedSpecs.forEach(obj => {
        price += parseFloat(obj.price)
      })
      return price.toFixed(2)
    },
    specsText() {
      const specs = []
      this.selectedSpecs.forEach(obj => {
        specs.push(obj.name)
      })
      return specs.join(' ')
    }
  },
  watch: {
    specs: {
      handler(val) {
        console.log('-->data', val)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handlePreview(urls, current) {
      uni.previewImage({
        current,
        urls
      })
    },
    handleCopy(item) {
      this.$api.product.download(this.id).then(res => {
        this.$util.copyText(item.url)
      })
    },
    handleOpenSpec(item) {
      item.show = !item.show
      console.log('-->data', item)
      this.$forceUpdate()
    },
    handleSelectSpec(spec) {
      spec.active = !spec.active
      this.selectedSpecs = []
      this.specs.forEach(obj => {
        obj.specs.forEach((spec, index) => {
          if (spec.active) {
            this.selectedSpecs.push(spec)
          }
        })
      })
      this.$forceUpdate()
    },
    scrollIntoView(name) {
      this.intoView = name
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        this.intoView = ''
      })
    },
    getDetail() {
      this.$api.product.detail(this.id).then(res => {
        this.loading = false
        res.data.specs.forEach(obj => {
          obj.show = true
          obj.specs.forEach((spec, index) => {
            obj.active = false
            spec.key = obj.id + spec.name + index
          })
        })
        this.detail = res.data
        this.specs = res.data.specs
      })
    },
    viewer() {
      this.$api.product.viewer(this.id).then(res => {

      })
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getDetail()
    this.viewer()
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  padding: 20rpx 20rpx 0;
  width: 710rpx;
  height: 100vh;
  .cases{
    .full-img{
      width: 710rpx;
      margin-bottom: 10rpx;
    }
  }
  .file{
    .header{
      padding: 20rpx 0;
      .left{
        text{
          margin-left: 10rpx;
          font-size: 32rpx;
        }
      }
    }
    .content{
      padding: 10rpx 20rpx 30rpx;
      display: none;
      .file-item{
        padding: 10rpx 0 20rpx 30rpx;
        color: #333;
        font-size: 26rpx;
      }
      &.show{
        display: flex;
      }
    }
  }
  .price{
    margin: 50rpx 0;
    .number{
      max-width: 320rpx;
    }
  }
  .specs{
    padding-bottom: 80rpx;
    .spec-item{
      color: #333;
      margin-bottom: 30rpx;
      .group-name{
        padding: 10rpx 20rpx 40rpx 0 ;
        text{
          font-size: 32rpx;
          font-weight: 600;
        }
      }
      .specs-content{
        .spec{
          margin: 0 5rpx 10rpx;
          min-width: 130rpx;
          padding: 10rpx 30rpx;
          transition: .5s;
          &.active{
            background: #030303;
            color: #fff;
          }
        }
      }
    }
  }
  .float-btn{
    position: fixed;
    bottom: 120rpx;
    right: 10rpx;
  }
  .float-view{
    position: fixed;
    width: 220rpx;
    height: 260rpx;
    background: #fff;
    bottom: 220rpx;
    right: 30rpx;
    box-shadow: 0 0 20rpx rgba(0,0,0,.1);
    border-radius: 30rpx;
    display: none;
    transition: .5s;
    padding: 10rpx;
    &.show{
      display: flex;
    }
    .icon-close{
      position: absolute;
      right: -10rpx;
      top: -10rpx;
    }
    .view-item{
      position: relative;
      padding: 20rpx 0;
      &:last-child:after{
        content: unset;
      }
      &:after{
        content: "";
        position: absolute;
        width: 68%;
        bottom: 0;
        left: 28%;
        height: 1rpx;
        background: #EFEFEF;
      }
      text{
        margin-left: 16rpx;
        color: #333333;
      }
    }
  }
}
</style>