Web_QiCaiYao/pages/order/evaluate_detail.vue

<template>
  <div class="evaluateDetail wrapper_1200">
    <div class="goods_detail_comment_Box" v-for="(item, index) in order_goods" :key="index">
      <div class="goods_detail_comment_head">
        <img :src="item.evaluate_info.member_headimg" alt />
      </div>
      <div class="goods_detail_comment_content">
        <div class="content_name">{{ item.evaluate_info.member_name }}</div>
        <div
          class="content_time"
        >{{ $dayjs(item.evaluate_info.create_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
        <div class="content_txt">{{ item.evaluate_info.content }}</div>
        <div class="content_image">
          <div v-for="(imgV, imgI) in item.commentImg" :key="imgI">
            <img :src="imgV.imgUrl" alt />
          </div>
        </div>
        <div class="content_goods">
          <div v-for="(img_v, img_k) in item.evaluate_info.images_arr" :key="img_k">
            <img :src="img_v" alt />
          </div>
          <div>
            <p class="goods_title">{{item.evaluate_info.sku_name}}</p>
            <p class="goods_Specifications">
              <!-- <span>商品编号：a0001</span>
              <span>规格：10g/袋</span>-->
            </p>
            <p class="goods_Price">
              <span style="color: #ff2828">￥{{item.evaluate_info.sku_price}}</span>
              <!-- <span>/袋</span> -->
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Setting from "~/setting";
export default {
  props: ["order_id"],
  auth: false,
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      goods_detail_commentList: [],
      goodsData: {},
      order_goods: []
    };
  },
  mounted() {
    this.getEvaluateData();
  },
  methods: {
    getEvaluateData() {
      let obj = {
        order_id: this.order_id
      };
      this.$axios
        .post(`order/detail`, obj)
        .then(res => {
          console.log(res, 11111111);
          this.goodsData = res.data;
          this.order_goods = res.data.order_goods;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.evaluateDetail {
  .goods_detail_comment_Box {
    display: flex;
    margin-top: 25px;
    padding: 5px;
    .goods_detail_comment_head {
      margin-right: 20px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .goods_detail_comment_content {
      .content_name {
        height: 14px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 14px;
        margin-bottom: 15px;
      }
      .content_time {
        height: 14px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        margin-bottom: 15px;
      }
      .content_txt {
        width: 1070px;
        height: 40px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
      }
      .content_image {
        display: flex;
        flex-wrap: wrap;
        width: 1070px;
        img {
          width: 100px;
          height: 100px;
          margin: 15px;
          margin-left: 0;
        }
      }
      .content_goods {
        width: 100%;
        height: 110px;
        background: #f0fbff;
        border-radius: 3px;
        display: flex;
        padding: 15px;
        img {
          width: 80px;
          height: 80px;
          margin-right: 20px;
        }
        .goods_title {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #222222;
        }
        .goods_Specifications {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #585858;
          margin: 10px 0;
        }
        .goods_Price {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
      }
    }
  }
}
</style>