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">
        <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.name }}</text>
                </view>
                <view class="info">
                  <text>角色：</text>
                  <text>{{ item.roleName }}</text>
                </view>
                <view class="info">
                  <text>手机号码：</text>
                  <text>{{ item.phone }}</text>
                </view>
              </view>
              <radio color="#4d5dfa" :value="item.id" />
            </view>
          </label>
        </radio-group>
      </scroll-view>

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

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import navBar from '@/components/navbar/navbar.vue'
const Searching = ref(true)
const queryParmas = ref({
  value: ''
})
/** 点击时切换到input,并聚焦 */
function handleClick() {
  Searching.value = false
}
/** 判断 失去焦点时 切换回 view */
function handleInput() {
  if (queryParmas.value.value.trim()) {
    Searching.value = true
  }
}
function handleSearch() {
  console.log('search')
}
//  -----------------------------------------
/* 选择列表 */
const searchlist = ref([
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 1
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 2
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 3
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 4
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 5
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 6
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 7
  },
  {
    name: '张三',
    roleName: '维修人员',
    phone: '19578012123',
    id: 8
  }
])
const checkoutUserid = ref(null)
function radioChange(val) {
  checkoutUserid.value = Number(val.detail.value)
}

let eventChannel = null
// 必须在 onMounted 里获取
onMounted(() => {
  const instance = getCurrentInstance().proxy
  if (instance && instance.getOpenerEventChannel) {
    eventChannel = instance.getOpenerEventChannel()
  }
})

function handleSelecthouse() {
  eventChannel.emit('backData', {
    userid: checkoutUserid.value,
    username: '张三'
  })
  // 3. 返回上一页
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.shareUser {
  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>