caimei-distribution-www/src/views/shopping-mall/detail.vue

<template>
  <div class="detail" :style="{ paddingBottom: isLock ? '23vw' : '' }">
    <nav-bar title="商品详情" @click-left="$router.back()" />
    <goods-image :imageList="imageList"/>
    <goods-share :productInfo="productInfo" :userInfo="userInfo" :dataInfo="dataInfo"/>
    <goods-sku :productInfo="productInfo" @handlerSku="handlerSku"/>
    <goods-classification :productInfo="productInfo"/>
    <goods-detail :productInfo="productInfo"/>
    <div class="buy-now" v-if="isLock">
      <div class="foot" @click="$router.push('/shopping-mall')">
        <van-image class="index" width="80%" height="80%" src="https://static.caimei365.com/app/mini-distribution/index.png"></van-image>
        <div>首页</div>
      </div>
      <van-button color="#FF5B00" @click="showSku">立即购买</van-button>
    </div>
    <share-modal :suid="suid" :userInfo="userInfo"/>
  </div>
</template>

<script>
import GoodsClassification from './components/goods-classification'
import GoodsImage from './components/goods-image'
import GoodsShare from './components/goods-share'
import GoodsSku from './components/goods-sku'
import GoodsDetail from './components/goods-detail'
import { productDetail } from '@/api/institutionApi/product'
import { getUserInfo } from '@/api/userApi/login'

export default {
  components: { GoodsClassification, GoodsImage, GoodsShare, GoodsSku, GoodsDetail },
  data () {
    return {
      formData: {
        userId: this.$store.getters.userId,
        productId: 0,
        typeId: 0
      },
      productInfo: {},
      skus: {},
      imageList: [],
      userInfo: {},
      dataInfo: {}
    }
  },
  computed: {
    productId () {
      return this.$route.query.productId
    },
    typeId () {
      return this.$route.query.typeId
    },
    isLock () {
      return this.$route.query.isLock
    },
    suid () {
      return this.$route.query.suid
    },
    cId () {
      return this.$route.query.cId
    }
  },
  async mounted () {
    await this.productDetail()
    await this.getUserInfo()
  },
  methods: {
    async productDetail () {
      const data = await productDetail(Object.assign(this.formData, { productId: this.productId, typeId: this.typeId }))
      this.productInfo = data
      this.imageList = data.imageList.map(i => i.image)
      this.skus = data.skus
      this.dataInfo.productImage = this.imageList[0]
      this.dataInfo.name = this.productInfo.name
    },
    handlerSku ({ selectedNum, selectedSku }) {
      this.$router.push(`/order-create?selectedNum=${selectedNum}&selectedSku=${selectedSku.s1}&typeId=${this.typeId}&productId=${this.productId}&cId=${this.cId}`)
    },
    showSku () {
      this.$children[3].show = true
    },
    async getUserInfo () {
      const data = await getUserInfo({ userId: this.suid ? this.suid : this.$store.getters.userId })
      this.userInfo = data
      // this.dataInfo.productImage = await getImage2Blob(this.dataInfo.productImage)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  box-sizing: border-box;
}
.sku-cell {
  margin: 2.7vw 0;
}
.classification {
  margin-bottom: 2.7vw;
}
.buy-now {
  width: 100%;
  padding: 1vw 3.2vw 1vw 8.4vw;
  box-sizing: border-box;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  @include display-flex-between;
  height: 23vw;
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 2.9vw;
    color: #333;
    height: 11.2vw;
  }
  .index {
    width: 4vw;
    height: 4vw;
  }
  .van-button {
    width: 70vw;
    height: 11.2vw;
    border-radius: 1vw;
  }
}
</style>