TBtools-店铺信息查询

htmldev/TBTools/src/router/index.js

@@ -72,7 +72,7 @@ const mainRoutes = {
     {
       path: '/tools-shopinfo',
       component: _import('modules/tools/tools-shopinfo'),
-      name: 'toolsShopInfo',
+      name: 'toolsShopinfo',
       meta: { title: '店铺信息' }
     },
     // 个人中心

htmldev/TBTools/src/views/main-navbar.vue

@@ -27,6 +27,9 @@
               <el-dropdown-item>
                 <router-link :to="{name: 'toolsStarkeysearch'}">淘宝下拉框选词</router-link>
               </el-dropdown-item>
+              <el-dropdown-item>
+                <router-link :to="{name: 'toolsShopinfo'}">店铺信息查询</router-link>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </li>

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

@@ -1,13 +1,195 @@
 <template>
-  <div>tools-shopinfo</div>
+  <el-row>
+    <el-col :span="12" :offset="6">
+      <el-form :rules="rules" :model="formData" ref="dataForm">
+        <el-form-item prop="productId">
+          <el-input placeholder="输入商品ID" clearable v-model="formData.productId"></el-input>
+          <el-button type="primary" @click="onSubmit">立即查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-col :span="20" :offset="2" class="TT-logo-wrap mt-t0">
+      <p class="TT-label">店铺logo：</p>
+      <div class="TT-avatar">
+        <img :src="shopInfo.picPath" alt="">
+      </div>
+    </el-col>
+    <el-col :span="20" :offset="2" class="mt-t0">
+      <div class="TT-table-wrap">
+        <p class="TT-label">店铺基本信息</p>
+        <table>
+          <tbody>
+          <tr>
+            <td class="key">店铺名：</td>
+            <td class="value">{{ shopInfo.nick }}</td>
+            <td class="key">店铺编号：</td>
+            <td class="value">{{ shopInfo.sid }}</td>
+            <td class="key">店铺创建时间：</td>
+            <td class="value">{{ shopInfo.created }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-col>
+    <el-col :span="20" :offset="2" class="mt-t0">
+      <div class="TT-table-wrap">
+        <p class="TT-label">店铺评分</p>
+        <table>
+          <tbody>
+          <tr>
+            <td class="key">商品描述评分：</td>
+            <td class="value">{{ shopInfo.shopScore.itemScore }}</td>
+            <td class="key">服务态度评分：</td>
+            <td class="value">{{ shopInfo.shopScore.serviceScore }}</td>
+            <td class="key">发货速度评分：</td>
+            <td class="value">{{ shopInfo.shopScore.deliveryScore }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-col>
+    <el-col :span="20" :offset="2" class="mt-t0">
+      <div class="TT-table-wrap">
+        <p class="TT-label">于同行相比</p>
+        <table>
+          <tbody>
+          <tr>
+            <td class="key">商品描述评分：</td>
+            <td class="value">{{ shopInfo.peerShopScore.peerItemScore }}</td>
+            <td class="key">服务态度评分：</td>
+            <td class="value">{{ shopInfo.peerShopScore.peerServiceScore }}</td>
+            <td class="key">发货速度评分：</td>
+            <td class="value">{{ shopInfo.peerShopScore.peerDeliveryScore }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 export default {
-  name: 'tools-shopinfo'
+  name: 'tools-shopinfo',
+  data () {
+    return {
+      formData: {
+        productId: '' // 测试ID：602950702411
+      },
+      isDisabled: false,
+      rules: {
+        productId: [{ required: true, message: '输入商品ID', trigger: 'blur' }]
+      },
+      shopInfo: {
+        shopScore: {},
+        peerShopScore: {}
+      }
+    }
+  },
+  methods: {
+    onSubmit () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return
+        }
+        if (this.isDisabled) {
+          return
+        }
+        this.isDisabled = true
+        this.$http({
+          url: this.$http.adornUrl('/tb/shopMsg'),
+          method: 'post',
+          data: this.$http.adornData({
+            productId: this.formData.productId
+          })
+        }).then(({ data }) => {
+          this.isDisabled = false
+          if (data.status) {
+            this.shopInfo = data.data
+            return
+          }
+          this.$message.error(data.msg)
+        }).catch(() => {
+          this.isDisabled = false
+        })
+      })
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+$--color-primary: #3E8EF7;
+.mt-t0 {
+  margin-top: 40px;
+}
+
+/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;
+    }
+  }
+}
+
+.TT-label {
+  height: 25px;
+  background-color: #0099FF;
+  color: #fff;
+  display: inline-block;
+  padding: 5px 10px;
+  width: fit-content;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  line-height: 16px;
+  font-size: 16px;
+}
+
+.TT-logo-wrap {
+  display: flex;
+}
+
+.TT-avatar {
+  display: flex;
+  width: 120px;
+  height: 120px;
+  margin-left: 10px;
+  overflow: hidden;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
 
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    border: 1px solid #0099FF;
+    height: 42px;
+    width: 120px;
+  }
+
+  .key {
+    background-color: #E6F1F8;
+    text-align: center;
+    width: 80px;
+  }
+
+  .value {
+    text-align: center;
+  }
+}
 </style>