TBtools-商品详情页

htmldev/TBTools/src/router/index.js

@@ -7,7 +7,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { clearLoginInfo } from '@/utils'
-import Crypto from '@/utils/crypto'
 
 Vue.use(Router)
 
@@ -185,11 +184,11 @@ const mallRoutes = [
       isUseCache: false
     },
     props: (route) => ({
-      id: route.query.id ? Crypto.decrypt(route.query.id) : ''
+      id: route.query.id
     })
   },
   {
-    path: '/goods-order/:goodsId',
+    path: '/goods-order',
     component: _import('modules/mall/goods-order'),
     name: 'goodsOrder',
     meta: {
@@ -197,7 +196,7 @@ const mallRoutes = [
       isUseCache: false
     },
     props: (route) => ({
-      id: route.query.id ? Crypto.decrypt(route.query.id) : ''
+      id: route.query.id
     })
   }
 ]

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

@@ -1,19 +1,106 @@
 <template>
-  <div>{{ goodsId }}</div>
+  <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: 'goodsOrder', 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: {
-    goodsId: {
+    id: {
       type: String,
       default: ''
     }
+  },
+  data () {
+    return {
+      dataListLoading: false,
+      info: {}
+    }
+  },
+  created () {
+    this.funInit()
+  },
+  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
+      })
+    }
   }
 }
 </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>