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

<template>
  <view class="page_padding">
    <view class="Details_handelbox h-full flex-1">
      <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="info.status === 0"> <text>待处理</text> </view>
        <view class="status alwary" v-if="info.status === 1">
          <text>已完成</text>
        </view>
      </view>
      <view class="subDescrition" v-if="info.status === 1">
        <text>已完成处理，已联系工作人员粘贴标语提醒，并派人定时巡视。</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=""> 社区服务 </view>
            <uni-icons type="right" size="14" color="#000000"></uni-icons>
          </view>
        </view>
        <view class="item">
          <view class="label"> 问题描述 </view>
          <view class="value">
            <text
              >投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容
            </text>
          </view>
        </view>
        <view class="item">
          <view class="label"> 投诉人姓名 </view>
          <view class="value">
            <text>匿名 </text>
          </view>
        </view>
        <view class="item">
          <view class="label"> 手机号码 </view>
          <view class="value">
            <text>无 </text>
          </view>
        </view>
        <view class="photobox">
          <view class="lable">
            <text>问题照片</text>
          </view>
          <view class="imgbox">
            <image
              v-for="(item, index) in info.imgs"
              :key="index"
              :src="item"
              class="img"
              mode="scaleToFill"
            ></image>
          </view>
        </view>
      </view>

      <!-- submit -->
      <view v-if="info.status === 0" class="action_btn" @tap="handleSelecthouse">
        <text>确定派单</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const info = ref({
  status: 1, //0待解决 1已完成
  imgs: [
    'https://picsum.photos/61',
    'https://picsum.photos/61',
    'https://picsum.photos/61',
    'https://picsum.photos/61',
    'https://picsum.photos/61'
  ]
})
</script>

<style scoped lang="scss">
.Details_handelbox {
  padding: 30rpx 40rpx;
  padding-bottom: 0;
  position: relative;
  .items {
    height: 100rpx;
    &.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 {
    .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;
        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);
        gap: 20rpx;
        .img {
          width: 132rpx;
          height: 132rpx;
        }
      }
    }
  }

  // 确定派单
  .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>