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

<template>
  <view class="page_padding">
    <view class="handlebox flex-1">
      <view class="items checkout flex items-center" @tap="handleClick">
        <view class="label">处理人员</view>
        <view class="value ellipsis">
          <view class="username">
            <text>{{ checkoutinfo.userName ? checkoutinfo.userName : '请选择' }}</text>
          </view>
          <view class="arrow"></view>
        </view>
      </view>
      <view class="items">
        <view class="label">处理描述</view>
        <view class="areabox">
          <textarea
            style="width: 100%; height: 100%; overflow: hidden"
            v-model="form.handleContent"
            auto-height
            maxlength="200"
            placeholder="请输入"
            placeholder-style="font-size:28rpx;"
          />
        </view>
      </view>
      <view class="action_btn" @tap="handleSelecthouse">
        <text>确 认</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" key="handle">
import { ref } from 'vue'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
import { putComplainProcess } from '@/api/complain'
import { getSettingInfo } from '../../api/api.js'

const checkoutinfo = ref({
  userName: '',
  userId: ''
})
const form = ref({
  complaintId: '',
  handleContent: ''
})
let userIsAccount = true
/** 获取用户信息 */
function getUserInfo() {
  getSettingInfo().then(res => {
    checkoutinfo.value.userName = res.data.nickName
  })
}

onLoad(options => {
  if (options && options.handleId && options.handleId.trim()) {
    form.value.complaintId = options.handleId
  }
  getUserInfo()
})

// 选择处理人员
function handleClick() {
  uni.navigateTo({
    url: '/pageSubPack/complaint/handleUser',
    events: {
      backData: (data: { userName: string; userId: string }) => {
        checkoutinfo.value.userName = decodeURIComponent(data.userName)
        checkoutinfo.value.userId = data.userId
        userIsAccount = false
      }
    }
  })
}

function handleBlur(e) {
  form.value.handleContent = e.detail.value
}

// 处理投诉 提交
function handleSelecthouse() {
  if (userIsAccount || checkoutinfo.value.userId) {
    uni.showLoading({
      mask: true,
      title: '处理投诉中'
    })
    putComplainProcess({
      id: form.value.complaintId,
      handleContent: form.value.handleContent,
      handleId: checkoutinfo.value.userId
    })
      .then(() => {
        uni.navigateBack()
      })
      .finally(() => {
        uni.hideLoading()
      })
  } else {
    uni.showToast({
      icon: 'error',
      title: '选择处理人员'
    })
  }
}
</script>

<style lang="scss" scoped>
.handlebox {
  padding: 30rpx 40rpx;
  position: relative;

  .items {
    margin-bottom: 30rpx;
    overflow: hidden;
    &.checkout {
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      .ellipsis {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .username {
          flex: 1;
          word-wrap: break-word;
          overflow: auto;
        }

        .arrow {
          margin-right: 10rpx;
          margin-left: 10rpx;
          width: 16rpx;
          height: 16rpx;
          border: 1rpx solid #353535;
          transform: rotate(45deg);
          border-bottom-color: transparent;
          border-left-color: transparent;
        }
      }
    }
    .label {
      width: 128rpx;
      min-width: 128rpx;
      height: 40rpx;
      font-weight: 550;
      font-size: 32rpx;
      color: #333333;
      line-height: 40rpx;
      margin-right: 86rpx;
    }
    .value {
      height: 36rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 36rpx;
      text-align: left;
    }
    .areabox {
      margin-top: 20rpx;
      border-radius: 8rpx;
      border: 2rpx solid #e7e7e7;
      padding: 10rpx;
      box-sizing: border-box;
      min-height: 162rpx;
      max-height: 450rpx;
      overflow: auto;
    }
  }
  .action_btn {
    width: 670rpx;
    height: 80rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    background: #4d5dfa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

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