TBtools-商品评论页

htmldev/TBTools/src/element-ui/index.js

@@ -75,7 +75,8 @@ import {
   Loading,
   MessageBox,
   Message,
-  Notification
+  Notification,
+  Image
 } from 'element-ui'
 
 Vue.use(Pagination)
@@ -141,6 +142,7 @@ Vue.use(Header)
 Vue.use(Aside)
 Vue.use(Main)
 Vue.use(Footer)
+Vue.use(Image)
 
 Vue.use(Loading.directive)
 

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

@@ -1,13 +1,204 @@
 <template>
-  <div>tools-feedback</div>
+  <el-row v-loading="dataListLoading">
+    <el-col :span="10" :offset="7">
+      <el-form :model="dataForm" :rules="rules" @keyup.enter.native="getDataList()" ref="dataForm">
+        <el-form-item prop="productId">
+          <el-input v-model="dataForm.productId" placeholder="请输入商品ID" clearable></el-input>
+          <el-button type="primary" @click="getDataList()">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <template v-if="dataList.length">
+      <el-col>
+        <ul class="TT-feedback-main">
+          <li v-for="(item, index) in dataList" :key="index">
+            <!--评价信息-->
+            <div class="left">
+              <p>{{ item.feedback }}</p>
+              <div class="img-wrap">
+                <el-image :src="img"
+                          :preview-src-list="item.feedPicList"
+                          v-for="(img, idx) in item.feedPicList"
+                          :key="idx">
+                </el-image>
+              </div>
+              <div class="video-wrap mt-20">
+                <video :src="item.video.cloudVideoUrl" controls :poster="item.video.coverUrl"></video>
+              </div>
+              <p class="mt-20"><span>评论时间：</span>{{ item.feedbackDate }}</p>
+              <p class="mt-20"><span>评价浏览量：</span>{{ item.readCount }}</p>
+            </div>
+            <!--商品信息-->
+            <div class="middle">
+              <p v-for="(sku, idx) in Object.keys(item.skuMap)" :key="idx">{{ sku + '：' + item.skuMap[sku]}}</p>
+            </div>
+            <!--评价人信息-->
+            <div class="right">
+              <p>{{ item.userNick }}</p>
+            </div>
+          </li>
+        </ul>
+      </el-col>
+      <el-col>
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 50]"
+          :page-size="pageSize"
+          :total="totalPage"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </el-col>
+    </template>
+  </el-row>
 </template>
 
 <script>
 export default {
-  name: 'tools-feedback'
+  name: 'tools-feedback',
+  data () {
+    return {
+      dataForm: {
+        productId: '' // 602950702411
+      },
+      rules: {
+        productId: [
+          { required: true, message: '请输入商品ID', trigger: 'blur' }
+        ]
+      },
+      dataList: [], // 评价列表
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false
+    }
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/tb/getProductAskInfo'),
+          method: 'POST',
+          data: this.$http.adornData({
+            'page': this.pageIndex,
+            'size': this.pageSize,
+            'productId': this.dataForm.productId
+          })
+        }).then(({ data }) => {
+          if (data.status) {
+            const { list, total } = data.data
+            this.dataList = list
+            this.totalPage = total * 1
+          } else {
+            this.$message.error(data.msg)
+          }
+          this.dataListLoading = false
+        })
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+$--color-primary: #3E8EF7;
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-40 {
+  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-feedback-main {
+  li {
+    display: flex;
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+
+    &:nth-of-type(1) {
+      border-top: 1px solid #eee;
+    }
+  }
 
+  .left {
+    width: 53%;
+
+    p {
+      word-break: break-all;
+    }
+
+    .img-wrap {
+      display: flex;
+      flex-flow: row wrap;
+      margin-top: 10px;
+
+      /deep/ .el-image {
+        margin-top: 10px;
+        margin-right: 10px;
+
+        img {
+          width: 100px;
+          height: 100px;
+        }
+      }
+    }
+
+    .video-wrap {
+      width: 50%;
+      height: 200px;
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .middle {
+    width: 29%;
+    margin-left: 2%;
+  }
+
+  .right {
+    width: 15%;
+    margin-left: 1%;
+  }
+}
 </style>

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

@@ -185,14 +185,6 @@ export default {
 
 <style lang="scss" scoped>
 $--color-primary: #3E8EF7;
-.mt-20 {
-  margin-top: 20px;
-}
-
-.mt-40 {
-  margin-top: 40px;
-}
-
 /deep/ .el-form-item {
   .el-form-item__content {
     display: flex;