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

<template>
  <view class="page_padding">
    <view class="detailsbox flex flex-col overflow-hidden">
      <!-- 状态筛选标签 -->
      <TabsComponents
        :showBottomLine="false"
        :tabslist="statusTabs"
        @update="switchStatus"
      ></TabsComponents>

      <view class="detail_list flex flex-1 overflow-auto">
        <scroll-view scroll-y="true">
          <view class="item" v-for="(item, index) in list" :key="index" @tap="handleComplaint">
            <view class="title flex items-center">
              <text>{{ item.title }}</text>
              <view class="status padding" v-if="item.status === 0"> <text>待处理</text> </view>
              <view class="status compluted" v-else>
                <text>已完成</text>
              </view>
            </view>
            <view class="descrtion">
              <text>{{ item.desction }}</text>
            </view>
            <view class="detailsMan">
              <text>投诉人：</text>
              <text>{{ item.user }}</text>
            </view>
            <view class="detailsMan">
              <text>手机号：</text>
              <text>{{ item.phone }}</text>
            </view>
            <view class="detailsMan flex justify-between">
              <view class="">
                <text>投诉时间：</text>
                <text>{{ item.time }}</text>
              </view>
              <view class="actions" v-if="item.status === 0">
                <text>处理</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import TabsComponents from '@/components/tabs/tabs.vue'
const activeStatus = ref(0)
const statusTabs = [
  {
    name: '全部',
    value: 0
  },
  {
    name: '待处理',
    value: 1
  },
  {
    name: '已完成',
    value: 2
  }
]
// 切换状态（全部/待分配/待解决/已完成）筛选
const switchStatus = value => {
  activeStatus.value = value
}
//
const list = [
  {
    title: '小区环境',
    status: 0, // 0 待处理 1 已完成
    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
    user: '胡小小',
    phone: '19113212388',
    time: '2023-08-01 10:05:46'
  },
  {
    title: '小区环境',
    status: 1, // 0 待处理 1 已完成
    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
    user: '胡小小',
    phone: '19113212388',
    time: '2023-08-01 10:05:46'
  },
  {
    title: '小区环境',
    status: 1, // 0 待处理 1 已完成
    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
    user: '胡小小',
    phone: '19113212388',
    time: '2023-08-01 10:05:46'
  },
  {
    title: '小区环境',
    status: 0, // 0 待处理 1 已完成
    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
    user: '胡小小',
    phone: '19113212388',
    time: '2023-08-01 10:05:46'
  },
  {
    title: '小区环境',
    status: 1, // 0 待处理 1 已完成
    desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
    user: '胡小小',
    phone: '19113212388',
    time: '2023-08-01 10:05:46'
  }
]

function handleComplaint() {
  uni.navigateTo({
    url: '/pageSubPack/complaint/Details_handle'
  })
}
</script>

<style scoped lang="scss">
.page_padding {
  background: #f9f9f9;
}
.detailsbox {
  flex: 1;
  background: #f9f9f9;
  padding: 20rpx 40rpx;
  .detail_list {
    .item {
      height: 390rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 30rpx 36rpx 55rpx 54rpx;
      .title {
        font-weight: 400;
        font-size: 32rpx;
        color: #222222;
        line-height: 40rpx;
        margin-bottom: 10rpx;

        .status {
          width: 82rpx;
          height: 30rpx;
          border-radius: 198rpx 198rpx 198rpx 198rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 30rpx;
          text-align: center;
          margin-left: 20rpx;
          &.padding {
            background: #e34d59;
          }
          &.compluted {
            background: #4d5dfa;
          }
        }
      }
      .descrtion {
        font-weight: 450;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        margin-bottom: 20rpx;
        letter-spacing: 0rpx;
      }
      .detailsMan {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
        margin-bottom: 20rpx;

        .actions {
          width: 127rpx;
          height: 44rpx;
          background: #4d5dfa;
          border-radius: 198rpx 198rpx 198rpx 198rpx;
          text-align: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 44rpx;
        }
      }
    }
  }
}
</style>