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

<template>
  <view class="page_padding shareUser">
    <view class="shareBody flex flex-col flex-1 overflow-hidden">
      <!-- 搜索 -->
      <view class="search_box">
        <view
          @click="handleClick"
          class="search_view flex-center"
          v-if="!queryParmas.value.trim() && Searching"
        >
          <uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
          <text>请输入关键字进行搜索</text>
        </view>
        <uni-easyinput
          @blur="handleInput"
          @change="handleSearch"
          :focus="true"
          ref="inputRef"
          v-model="queryParmas.value"
          v-else
        />
      </view>
      <!-- srcoll -->
      <scroll-view
        scroll-y="true"
        class="flex-1 overflow-auto"
        lower-threshold="60"
        @scrolltolower="scrolltolower"
      >
        <radio-group @change="radioChange">
          <label v-for="(item, index) in searchlist" :key="index">
            <view
              class="item flex items-center justify-between"
              :class="{
                active: checkoutUserid === item.id
              }"
            >
              <view class="">
                <view class="info">
                  <text>姓名：</text>
                  <text>{{ item.nickName }}</text>
                </view>
                <view class="info">
                  <text>角色：</text>
                  <text>{{ item.roleName }}</text>
                </view>
                <view class="info">
                  <text>手机号码：</text>
                  <text>{{ item.phonenumber }}</text>
                </view>
              </view>
              <radio color="#4d5dfa" :value="item.userId" />
            </view>
          </label>
        </radio-group>
      </scroll-view>

      <!-- submit -->
      <view class="action_btn" @tap="handleSelecthouse">
        <text>确定派单</text>
      </view>
    </view>
  </view>
</template>

<script setup key="Details">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { getSystemUsers_employee } from '@/api/common.js'
import navBar from '@/components/navbar/navbar.vue'

let eventChannel = null
onMounted(() => {
  const instance = getCurrentInstance().proxy
  eventChannel = instance.getOpenerEventChannel()
})

const Searching = ref(true)
/** 点击时切换到input,并聚焦 */
function handleClick() {
  Searching.value = false
}
/** 判断 失去焦点时 切换回 view */
function handleInput() {
  if (queryParmas.value.value.trim()) {
    Searching.value = true
  }
}
function handleSearch() {}
//  -----------------------------------------
/* 选择列表 */
const searchlist = ref([])

const queryParmas = ref({
  pageNum: 1,
  pageSize: 10,
  value: ''
})
const isLoading = ref(false) // 加载锁
const hasMore = ref(true) // 是否还有更多数据
const total = ref(21)
function scrolltolower() {
  // 必须加这两个判断！
  if (isLoading.value || !hasMore.value) {
    return
  }
  queryParmas.value.pageNum += 1
  getlist()
}
function getlist() {
  // 2. 开启锁
  if (isLoading.value) {
    return
  }
  isLoading.value = true
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  getSystemUsers_employee('complainUser', queryParmas.value.value)
    .then(res => {
      searchlist.value = res.data
    })
    .finally(() => {
      isLoading.value = false
      uni.hideLoading()
    })
}
getlist()

//=======================
// 选中的人员id
const checkoutUserid = ref(null)
// 选中的人员信息
const checkoutUserInfo = ref(null)

function radioChange(val) {
  checkoutUserid.value = val.detail.value
  const find = searchlist.value.find(item => item.userId === val.detail.value)
  if (find) {
    checkoutUserInfo.value = find
  }
}

function handleSelecthouse() {
  // 携带你要传递的参数
  const params = {
    userId: checkoutUserid.value,
    userName: checkoutUserInfo.value.nickName
  }
  eventChannel.emit('backData', {
    userId: params.userId,
    userName: encodeURIComponent(params.userName)
  })
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.shareUser {
  height: 100vh;
  background-color: #f9f9f9;

  .shareBody {
    padding: 0 40rpx;

    .search_box {
      height: 80rpx;
      margin-bottom: 20rpx;
      .search_view {
        height: 80rpx;
        line-height: 80rpx;
        background: #f3f3f3;
        border-radius: 8rpx;

        font-weight: 400;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.26);
        line-height: 48rpx;
        text-align: center;
      }
    }

    // 选择人数
    .checkoutedUser_box {
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 36rpx;
      height: 36rpx;
    }
    // 角色列表
    .item {
      height: 170rpx;
      background: #ffffff;
      border: 1rpx solid transparent;
      margin-bottom: 20rpx;
      padding-left: 26rpx;
      padding-right: 32rpx;
      .info {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
        height: 36rpx;
        margin-bottom: 10rpx;
      }
      &:deep(radio) {
        transform: scale(0.68);
      }
      &.active {
        background: #f5faff;
        border: 1rpx solid #4d5dfa;
      }
    }

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