TBtools-新增商品详情

htmldev/TBTools/src/views/modules/tools/tools-productinfo.vue

@@ -1,13 +1,213 @@
 <template>
-  <div>tools-productinfo</div>
+  <el-row v-loading="loading">
+    <el-col :span="12" :offset="6">
+      <el-form :rules="rules" :model="dataForm" @keyup.enter.native="getDataList()" ref="dataForm">
+        <el-form-item prop="productId">
+          <el-input placeholder="输入商品ID查询商品信息" clearable v-model="dataForm.productId"></el-input>
+          <el-button type="primary" @click="getDataList">立即查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-col :span="11" :offset="1" v-show="productInfo.title">
+      <h3>商品信息</h3>
+      <ul>
+        <li>
+          <p class="label">名称：</p>
+          <p class="value">{{ productInfo.title }}</p>
+        </li>
+        <li>
+          <p class="label">大类ID：</p>
+          <p class="value">{{ productInfo.categoryId }}</p>
+        </li>
+        <li>
+          <p class="label">销量：</p>
+          <p class="value">{{ productInfo.sellCount }}</p>
+        </li>
+        <li>
+          <p class="label">总量：</p>
+          <p class="value">{{ productInfo.quantity }}</p>
+        </li>
+        <li>
+          <p class="label">原价：</p>
+          <p class="value">{{ productInfo.reservePrice }}</p>
+        </li>
+        <li>
+          <p class="label">折扣价：</p>
+          <p class="value">{{ productInfo.zkFinalPrice }}</p>
+        </li>
+        <li>
+          <p class="label">评价条数：</p>
+          <p class="value">{{productInfo.rate.totalCount }}</p>
+        </li>
+        <li>
+          <p class="label">评价分类：</p>
+          <div class="rate-wrap">
+            <p v-for="(item, index) in productInfo.rate.keywords" :key="index">{{ item.word }}({{ item.count }})</p>
+          </div>
+        </li>
+        <li>
+          <p class="label">商品大图：</p>
+          <div class="main-photo">
+            <img :src="productInfo.productMainPhoto" alt="">
+          </div>
+        </li>
+        <li>
+          <p class="label">商品介绍：</p>
+          <div class="value">
+            <img class="goods-photo" :src="item" alt="" v-for="(item, index) in productInfo.images" :key="index">
+          </div>
+        </li>
+      </ul>
+    </el-col>
+    <el-col :span="11" :offset="1" v-show="productInfo.seller.shopName">
+      <h3>店铺信息</h3>
+      <ul>
+        <li>
+          <p class="label">店铺名：</p>
+          <p class="value">{{ productInfo.seller.shopName }}</p>
+        </li>
+        <li>
+          <p class="label">店铺logo：</p>
+          <img class="value shop-icon" :src="productInfo.seller.shopIcon" alt="">
+        </li>
+        <li>
+          <img :src="productInfo.seller.taoShopUrl" alt="">
+        </li>
+        <li>
+          <p class="label">评价：</p>
+          <div class="rate-wrap">
+            <p v-for="(item, index) in productInfo.seller.evaluates" :key="index">{{ item.title }}({{ item.score }})</p>
+          </div>
+        </li>
+      </ul>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 export default {
-  name: 'tools-productinfo'
+  name: 'tools-productinfo',
+  data () {
+    return {
+      loading: false,
+      dataForm: {
+        productId: '602950702411' // 602950702411
+      },
+      rules: {
+        productId: [{ required: true, message: '输入商品ID', trigger: 'blur' }]
+      },
+      productInfo: {
+        rate: {},
+        seller: {}
+      }
+    }
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.loading = true
+        this.$http({
+          url: this.$http.adornUrl('/tb/getProductductInfo2'),
+          method: 'POST',
+          data: this.$http.adornData({
+            'productId': this.dataForm.productId
+          })
+        }).then(({ data }) => {
+          this.loading = false
+          if (data.status) {
+            this.productInfo = data.data
+          } else {
+            this.$message.error(data.msg)
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      })
+    }
+  }
 }
 </script>
-
 <style lang="scss" scoped>
+$--color-primary: #3E8EF7;
+/deep/ .el-form-item {
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
+
+    input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 1px solid $--color-primary;
+    }
+
+    button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+h3 {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+ul {
+  list-style: none;
+
+  li {
+    display: flex;
+    margin-bottom: 14px;
+  }
+
+  .label {
+    width: 6em;
+    text-align: right;
+    color: #666;
+  }
 
+  .value {
+    float: 1;
+    color: #000;
+    word-break: break-all;
+  }
+
+  .rate-wrap {
+    flex: 1;
+    display: flex;
+    flex-flow: row wrap;
+
+    p {
+      margin-right: 10px;
+
+      &:nth-last-of-type(1) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .main-photo {
+    display: inline-block;
+    width: 300px;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .goods-photo {
+    display: block;
+    width: 400px;
+  }
+
+  .shop-icon {
+    display: inline-block;
+    width: 80px;
+  }
+}
 </style>