property-manager-side/wuye-manager-uniapp/pageSubPack/complaint/Details_handle.vue

<template>
  <view class="page_padding">
    <view class="Details_handelbox h-full flex-1 flex flex-col">
      <view class="items top flex items-center justify-between">
        <view class="title flex items-center">
          <view class="line"></view>
          <text>投诉状态</text>
        </view>
        <view class="status" v-if="complainInfo.status === '0'"> <text>待处理</text> </view>
        <view class="status alwary" v-if="complainInfo.status === '2'">
          <text>已完成</text>
        </view>
      </view>
      <view class="subDescrition" v-if="complainInfo.status === '2'">
        <!-- <text>已完成处理，已联系工作人员粘贴标语提醒，并派人定时巡视。</text> -->
        <text>{{ complainInfo.handleContent }}</text>
      </view>
      <view class="items flex items-center justify-between">
        <view class="title flex items-center">
          <view class="line"></view>
          <text>投诉详情</text>
        </view>
      </view>
      <view class="list">
        <view class="item">
          <view class="label"> 投诉类型 </view>
          <view class="value flex items-center justify-between">
            <view class="">
              <text>{{ complainInfo.typeName }}</text>
            </view>
            <uni-icons type="right" size="14" color="#000000"></uni-icons>
          </view>
        </view>
        <view class="item">
          <view class="label"> 问题描述 </view>
          <view class="value" style="word-wrap: break-word; overflow: auto">
            <text>{{ complainInfo.problemDes }} </text>
          </view>
        </view>
        <view class="item">
          <view class="label"> 投诉人姓名 </view>
          <view class="value">
            <text>
              {{ complainInfo.complaintName }}
            </text>
          </view>
        </view>
        <view class="item">
          <view class="label"> 手机号码 </view>
          <view class="value">
            <text> {{ complainInfo.phone }}</text>
          </view>
        </view>
        <view class="photobox">
          <view class="lable">
            <text>问题照片</text>
          </view>
          <view class="imgbox">
            <image
              v-for="(item, index) in showImages"
              :key="index"
              :src="item"
              class="img"
              @tap="handlePrivew(showImages, index)"
              mode="scaleToFill"
            ></image>
          </view>
        </view>
      </view>

      <!-- submit -->
      <view
        v-if="complainInfo.status === '0' || complainInfo.status === '1'"
        class="action_btn"
        @tap="handleSelecthouse"
      >
        <text>处理</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getComplainMain } from '@/api/complain.js'

/** 投诉详情id */
const complainId = ref('')
/** 投诉详情内容 */
const complainInfo = ref({
  id: '',
  typeId: null,
  typeName: '',
  problemDes: '',
  complaintName: '',
  phone: '',
  villageId: null,
  problemImageUrl: '',
  status: '0',
  createTime: null,
  handleId: '',
  handleName: '',
  handleContent: ''
})
const showImages = ref([])
// 接受列表传递过来的id
onLoad(options => {
  if (options && options.id && options.id.trim()) {
    complainId.value = options.id
  }
})

// 查询 投诉详情
function init() {
  if (complainId.value) {
    getComplainMain(complainId.value).then(res => {
      complainInfo.value = res.data
      if (res.data.problemImageUrl) {
        showImages.value = res.data.problemImageUrl
          .split(',')
          .filter(item => item.includes('http'))
          .map(item => item && item.split('?')[0])
      }
    })
  }
}
onShow(() => {
  init()
})

function handleSelecthouse() {
  if (complainId.value) {
    uni.navigateTo({
      url: '/pageSubPack/complaint/handle?handleId=' + complainId.value
    })
  }
}

/** 预览图片 */
function handlePrivew(items, index) {
  if (items.length <= 0) return
  uni.previewImage({
    current: index,
    urls: items
  })
}
</script>

<style scoped lang="scss">
.Details_handelbox {
  padding: 30rpx 40rpx;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  .items {
    height: 80rpx;
    min-height: 80rpx;
    flex-shrink: 0;
    &.top {
      border-bottom: 1rpx solid #ccc;
    }
    .title {
      font-weight: 550;
      font-size: 32rpx;
      color: #333333;
      line-height: 40rpx;
      .line {
        width: 6rpx;
        height: 28rpx;
        background: #4d5dfa;
        margin-right: 10rpx;
      }
    }

    .status {
      font-weight: 400;
      font-size: 28rpx;
      color: #4d5dfa;
      line-height: 36rpx;
      &.alwary {
        color: #999999;
      }
    }
  }

  .subDescrition {
    margin: 30rpx 0;
    font-weight: 500;
    font-size: 28rpx;
    letter-spacing: 1rpx;
    color: #4d5dfa;
    line-height: 36rpx;
  }

  .list {
    flex: 1;
    flex-shrink: 0;

    padding-bottom: 30rpx;
    .item {
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
      min-height: 100rpx;
      .label {
        width: 226rpx;
        min-width: 226rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
      .value {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 36rpx;
        flex: 1;
      }
    }

    .photobox {
      margin-top: 30rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx;

      .lable {
        margin-bottom: 30rpx;
      }
      .imgbox {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        & > .img:not(:last-child) {
          margin-right: 20rpx;
        }

        .img {
          width: 132rpx;
          height: 132rpx;
          border: 1rpx solid #efefef;
        }
      }
    }
  }

  // 确定派单
  .action_btn {
    width: 670rpx;
    height: 80rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    margin-top: 20rpx;
    background: #4d5dfa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    // position: absolute;
    // bottom: 0;
    // left: 50%;
    // transform: translateX(-50%);
  }
}
</style>