product_wx/pages/subPackages/minePages/feedback_detail.vue

<template>
    <div class="feedbackDetail">
      <div class="myRecord">
        <div class="detailTitle">我的反馈</div>
        <div class="infoBox">
          <span class="info">{{form.feedbackContent}}</span>
          <span class="infoImgBox">
            <img :src="item.url" class="infoImg" v-for="item in imgArr" @click="clickImg(item.url)" />
          </span>
        </div>
      </div>
      <div class="myRecord" v-if="form.status == '2'">
        <div class="detailTitle">回复内容</div>
        <div class="infoBox">
          <span class="info">{{form.replyContent}}</span>
        </div>
        <div class="handleBox">
          <div class="handleItem">
            <span class="handleTitle">受理企业</span>：
            <span class="handleInfo">{{form.receiveCompanyName}}</span>
          </div>
          <div class="handleItem">
            <span class="handleTitle">受理人</span>：
            <span class="handleInfo">{{form.receiver}}-{{form.receivePhone}}</span>
            <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
          </div>
          <div class="handleItem">
            <span class="handleTitle">受理时间</span>：
            <span class="handleInfo">{{form.receiveTime}}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { parkFeedbackInfoGetById } from "@/js_sdk/http.js";
export default {
  name: "feedbackDetail",
  data() {
    return{
       form:{

       },
       imgArr:[]
    }
  },
  onLoad(e){
    // console.log(e)
    try {
      parkFeedbackInfoGetById({id:e.id}).then(res=>{
        this.form = res
        let imgArr = res.feedbackPicture.split(',')
        console.log(imgArr)
        this.getImage(imgArr)
      })
    }catch (e){
      console.log(e)
    }

  },
  methods:{
      getImage(e){
        e.forEach(item=>{
          this.imgArr.push({url:this.$constant.BASE_URI + "/FileController/download/" + item})
        })
      },
    clickImg(url) {
      wx.previewImage({
        urls: [url], //接受的是一个数组，默认展示第一张
        current: "",
        success: function (res) {
        },
        fail: function (res) {
        },
        complete: function (res) {
        },
      })
    }
  }
}
</script>

<style lang="scss">
    .feedbackDetail{
      .myRecord{
        margin: 24rpx 0 34rpx 0;
        padding: 32rpx 32rpx;
        box-sizing: border-box;
        background: white;
        .detailTitle{
          color: #18172A;
          font-size: 32rpx;
          font-weight: 600;
        }
        .infoBox{
          width: 686rpx;
          padding: 24rpx;
          background: #F5F7FA;
          border-radius: 8rpx;
          box-sizing: border-box;
          margin-top: 16rpx;
          display: flex;
          flex-direction: column;
          .info{
            color: #666666;
            font-size: 28rpx;
            line-height: 44rpx;
          }
          .infoImgBox{
            display: flex;
            flex-wrap: wrap;
          }
          .infoImg{
            width: 180rpx;
            height: 180rpx;
            margin: 16rpx;
          }
        }
        .handleBox{
          margin-top: 32rpx;
          display: flex;
          flex-direction: column;
          padding: 24rpx 0;
          border-top: 1px solid #E8EDF5;;
          .handleItem{
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;
            .handleTitle{
              display: inline-block;
              width: 140rpx;
              color: #18172A;
              font-size: 28rpx;
              text-align: justify;
              text-align-last: justify;
            }
            .handleInfo{
              color: #666666;
              font-size: 28rpx;
            }
            .phoneIcon{
              width: 48rpx;
              height: 48rpx;
              margin-left: 48rpx;
            }
          }
        }
      }
    }
</style>