web-admin/src/views/platmanag/goodsRate/detail.vue

<template>
  <div id="form-1">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24" v-if="total == 0">
          <el-empty description="该商品暂无评价"></el-empty>
        </el-col>
        <el-col :span="24" class="one" v-else-if="!total == 0">
          <el-col :span="24" class="one_2">
            <el-col :span="24" class="cont" v-for="(item, index) in list" :key="index">
              <el-col :span="3" class="name">
                <el-image class="icon" :src="item.customer.icon[0].url"></el-image>
                <el-col>{{ item.customer.name }}</el-col>
              </el-col>
              <el-col :span="21">
                <el-col :span="24">
                  <el-col :span="5">
                    <el-col :span="8">商品评分：</el-col>
                    <el-col :span="15"><el-rate v-model="item.goods_score" disabled score-template="{item.goods_score}" :colors="colors"> </el-rate></el-col>
                  </el-col>
                  <el-col :span="5">
                    <el-col :span="8">店铺评分：</el-col>
                    <el-col :span="15"><el-rate v-model="item.shop_score" disabled score-template="{item.shop_score}" :colors="colors"> </el-rate></el-col>
                  </el-col>
                  <el-col :span="5">
                    <el-col :span="8">快递评分：</el-col>
                    <el-col :span="15">
                      <el-rate v-model="item.transport_score" disabled score-template="{item.transport_score}" :colors="colors"> </el-rate>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col>已购规格：{{ item.goodsSpec.name }}</el-col>
                <el-col v-for="(replys, index) in item.reply" :key="index">
                  <el-col :span="22" class="rate">买家评价： {{ replys.content }}</el-col>
                  <el-col v-for="(file, index) in replys.file" :key="index" :span="3">
                    <el-image :src="file.url" class="image" :preview-src-list="replys.url"></el-image>
                  </el-col>
                  <el-col :span="22" class="rates">商家回复：{{ replys.reply }}</el-col>
                  <el-col style="color: #999">{{ replys.time }}</el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="pag">
            <el-pagination
              @current-change="currentChange"
              :current-page.sync="skip"
              :page-size="limit"
              background
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('goodsRate');

export default {
  name: 'form-1',
  props: {},
  components: {},
  data: function () {
    return {
      list: [],
      goods: {},
      skip: 1,
      total: 0,
      limit: 5,
      // 评分颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF0000'],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search({ skip = 0, limit = 5, ...info } = {}) {
      info.goods = this.id;
      let res;
      res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        for (const p1 of res.data) {
          for (const p2 of p1.reply) {
            let url = [];
            if (p2.file) {
              for (const p3 of p2.file) {
                url.push(p3.url);
              }
              p2.url = url;
            }
          }
        }
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
    },
    // 分页
    currentChange(val) {
      this.search({ skip: (val - 1) * this.limit });
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.el-col {
  margin: 2px 0;
}
.one {
  margin: 20px 0 0 0;
  .one_1 {
    margin: 15px 0;
    padding: 10px;
  }
  .one_2 {
    border: 1px solid #ccc;
    padding: 10px;
    .cont {
      border-bottom: 1px solid rgb(238, 237, 237);
      margin: 10px 0;
      padding: 0 10px 10px 10px;
      .name {
        text-align: center;
        .icon {
          border-radius: 50%;
          width: 100px;
          height: 100px;
        }
      }
      .image {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .rate {
        width: 91%;
        color: red;
        word-break: break-all;
      }
      .rates {
        width: 91%;
        word-break: break-all;
      }
      .btn {
        margin: 8px 15px;
      }
    }
  }
  .pag {
    text-align: right;
    margin: 10px 0;
  }
}
</style>