my_loan/htmldev/TBTools/src/views/modules/mall/goods-detail.vue

<template>
  <el-row v-loading="dataListLoading">
    <el-col :span="6" :offset="2">
      <div class="TT-photo">
        <img :src="info.productImgUrl" alt="">
      </div>
    </el-col>
    <el-col :span="14">
      <el-form :model="info">
        <el-form-item label="名称：">
          <span class="col_f64f6f">{{ info.productName }}</span>
        </el-form-item>
        <el-form-item label="价格：">
          <span class="col_f64f6f font-w_bold">¥{{ info.productPrice >= 0 ? info.productPrice.toFixed(2) : '' }}</span>
        </el-form-item>
        <el-form-item label="库存：">
          <span>库存{{ info.productStorageNum }}件</span>
        </el-form-item>
        <el-form-item label="商品销量：">
          <span>{{ info.productSaleNum }}</span>
        </el-form-item>
        <el-form-item label="仓库：">
          <span class="col_f64f6f">{{ info.warehouseName }}</span>
        </el-form-item>
        <el-form-item label="快递费：">
          <span class="col_f64f6f">¥{{ info.warehousePrice >= 0 ? info.warehousePrice.toFixed(2) : '' }}</span>
        </el-form-item>
        <el-form-item class="margin-top_30">
          <el-button type="primary" @click="$router.push({name: 'goodsCreateOrder', query: {id: id}})">立即购买</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12" :offset="6">
      <div class="TT-photo">
        <img :src="info.productImgUrl" alt="">
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Crypto from '@/utils/crypto'

export default {
  name: 'goods-detail',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataListLoading: false,
      info: {}
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.info = {}
      this.funInit()
    }
    this.$route.meta.isUseCache = false
  },
  methods: {
    funInit () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/gift/product/detail'),
        method: 'get',
        params: this.$http.adornParams({
          'id': Crypto.decrypt(this.id)
        })
      }).then(({ data }) => {
        if (data.status) {
          this.info = data.data
        } else {
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log(to.name)
    if (['goodsCreateOrder'].includes(to.name)) {
      from.meta.isUseCache = true
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.col_f64f6f {
  color: #f64f6f;
}

.font-w_bold {
  font-weight: bold;
}

.margin-top_30 {
  margin-top: 30px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.TT-photo {
  img {
    display: block;
    width: 100%;
  }
}
</style>