settle_down_wx/pages/subPackages/reportRepair/repairRecord.vue

<template>
  <div class="repair-record-box">
    <ul class="custom-list-box">
      <li class="customLi" v-for="item in recordList" @tap="toDetail(item)">
          <div class="firstRow">
            <span class="rowTitle">{{ item.description }}</span>
            <span class="rowTags" :class="getStatus(item)==='已评价'?'yclTags':getStatus(item)==='暂存'?'zcTags':getStatus(item)==='待评价'?'dpjTags':''">{{getStatus(item)}}</span>
          </div>
          <div class="secondRow">
            <img src="https://www.idea-co-sf.com/gardenProduct/image/componeyIcon.png" class="componeyIcon">
            {{item.companyName}}
          </div>
          <div class="lastRow">上报时间：{{item.createdAt}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import {repairList,getUserLocalStorageInfo,getByCodes } from "@/js_sdk/http";
import {isImageFile} from "../../../wxcomponents/weapp/lib/uploader/utils";

export default {
    data(){
      return{
        recordList:[
          // {title:'上月水费不太对，怀疑水表异常',type:'已受理'},
          // {title:'空调坏了，不能使用',type:'已受理'},
          // {title:'办公室灯泡坏了2个',type:'已处理'},
          // {title:'厕所水龙头坏了，不出水',type:'暂存'},
        ],
        dc_key: ['REPAIR_STATUS'],
        dic_SelectList:[],
        params: {
          pageNum: 1,
          pageSize: 5,
          userId: getUserLocalStorageInfo().userId
        },
      }
    },
  onPullDownRefresh() {
    this.getByCodes()
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
    onShow(){
      this.getByCodes()
    },
    methods:{
      getStatus(item){
        if (item.userType === '1') {
          if (item.statusName === '已处理') {
            return item.evaluateStatus === 1 ? '待评价' : '已评价';
          }
        }
        // 如果不满足上述条件，则直接返回 item.statusName
        return item.statusName;
      },
      async getByCodes() {
        let data = await getByCodes(JSON.stringify(this.dc_key));
        this.dic_SelectList = this.$common.handleDicList(data);
        this.getList()
      },
      getList(){
        this.recordList = []
        const _this = this
        repairList(this.params).then(res=>{
          // console.log(res.code)
          if (res.code == '409'){
            // console.log(222)
            uni.navigateTo({
              url: "/pages/login2/login",
              success: function (e) {
              },
            });
          }
          if (res.data) {
            res.data.forEach(function(item) {
              const jsonMap = _this.getItemJson(item)
              _this.recordList.push(jsonMap)
            })
          }
        })
      },
      toDetail(item){
        // console.log('item',item)
        if (item.statusName==="暂存"){
          uni.redirectTo({
            url:'/pages/subPackages/reportRepair/index?item=' + JSON.stringify(item)
          })
        }else{
          uni.navigateTo({
            url:'/pages/subPackages/reportRepair/repairDetail?item=' + JSON.stringify(item)
          })
        }

      },
      getItemJson(item) {
        console.log('item',item)
        // if (item.fileUrl){
        //   const fileUrl = item.fileUrl.split(',')
        //   const newFile = []
        //   fileUrl.forEach((e=>{
        //       newFile.push({
        //         imgUrl: "/FileController/download/" + e,
        //         id: e,
        //         url: this.$constant.BASE_URI +
        //             "/FileController/download/" +
        //             e,
        //         isImage: true,
        //       });
        //     })
        //   )
        //   item.fileUrl = newFile
        // }

        // fileUrls.forEach((item) => {
        //   item = item.replace('/server', '/smartParkH5Server')
        //   fileUrl.push(item)
        // })
        item.createdAt = this.$common.transServDate(item.createdAt)
        let transformedObject = this.dic_SelectList.REPAIR_STATUS.reduce((acc, obj) => {
          acc[obj.value] = obj.label;
          return acc;
        }, {});
        item.statusName = transformedObject[item.status]
        return item
      },
    }
}
</script>
<style lang="scss" scoped>
.repair-record-box {
  .custom-list-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 36rpx;
    .customLi{
      background: white;
      width: 686rpx;
      height: 224rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 24rpx 0;
      margin-top: 24rpx;
      .componeyIcon{
        width: 32rpx;
        height: 32rpx;
        margin-right: 5rpx;
      }
      .firstRow{
        display: flex;
        justify-content: space-between;
        padding: 12rpx 32rpx;
        .rowTitle{
          color:#222222;
          font-size: 32rpx;
          font-weight: 600;
        }
        .rowTags{
          display: flex;
          align-items: center;
          justify-content: center;
          color: #0365F9;
          font-size: 28rpx;
          width: 112rpx;
          height: 48rpx;
          background: rgba(3, 101, 249, 0.20);
          border-radius: 4rpx;
        }
        .yclTags{
          color: rgba(34, 181, 101, 1);
          background: rgba(34, 181, 101, 0.20);
        }
        .zcTags{
          color: rgba(255, 107, 24, 1);
          background: rgba(254, 134, 67, 0.20);
        }
        .dpjTags{
          color: rgb(151, 24, 255);
          background: rgba(151, 24, 255, 0.20);
        }
      }
      .secondRow{
        display: flex;
        align-items: center;
        color: rgba(102, 102, 102, 1);
        font-size: 28rpx;
        padding:0 32rpx 24rpx 32rpx;
        border-bottom: 2rpx solid rgba(230, 230, 230, 1);
      }
      .lastRow{
        color: rgba(102, 102, 102, 1);
        font-size: 28rpx;
        padding: 20rpx 32rpx;
      }
    }
  }
}
</style>