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

<template>
  <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',
  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/getfeedback'),
          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;

      /deep/ .el-image {
        .el-image__inner {
          width: 100px;
          height: 100px;
          margin-right: 10px;
          margin-top: 10px;
        }
      }
    }

    .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>