| | |
| | | <template> |
| | | <view class="contact-select"> |
| | | <!-- 顶部标题栏 --> |
| | | <PageHeader title="选择联系人" @back="goBack"> |
| | | <PageHeader title="选择联系人" |
| | | @back="goBack"> |
| | | <template #right> |
| | | <text class="confirm-btn" @click="confirmSelect">确定</text> |
| | | <text class="confirm-btn" |
| | | @click="confirmSelect">确定</text> |
| | | </template> |
| | | </PageHeader> |
| | | |
| | | <!-- 搜索框 --> |
| | | <!-- <view class="search-section">--> |
| | | <!-- <van-search--> |
| | |
| | | <!-- @input="onSearch"--> |
| | | <!-- />--> |
| | | <!-- </view>--> |
| | | |
| | | <!-- 已选择的联系人 --> |
| | | <view class="selected-section" v-if="selectedContact"> |
| | | <view class="selected-section" |
| | | v-if="selectedContact"> |
| | | <view class="selected-header"> |
| | | <text class="selected-title">已选择</text> |
| | | <text class="clear-btn" @click="clearSelected">清空</text> |
| | | <text class="clear-btn" |
| | | @click="clearSelected">清空</text> |
| | | </view> |
| | | <view class="selected-item"> |
| | | <view class="contact-avatar"> |
| | |
| | | <view class="contact-details"> |
| | | <text class="contact-name">{{ selectedContact.nickName }}</text> |
| | | </view> |
| | | <u-icon name="close" size="16" color="#999" @click="clearSelected" /> |
| | | <u-icon name="close" |
| | | size="16" |
| | | color="#999" |
| | | @click="clearSelected" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 联系人列表 --> |
| | | <view class="contact-list"> |
| | | <view class="list-header"> |
| | | <text class="list-title">全部联系人</text> |
| | | </view> |
| | | |
| | | <u-list |
| | | v-model:loading="loading" |
| | | <u-list v-model:loading="loading" |
| | | :finished="finished" |
| | | finished-text="没有更多了" |
| | | @load="onLoad" |
| | | > |
| | | <view |
| | | v-for="contact in userList" |
| | | @load="onLoading"> |
| | | <view v-for="contact in userList" |
| | | :key="contact.userId" |
| | | class="contact-item" |
| | | :class="{ 'selected': isSelected(contact) }" |
| | | @click="selectContact(contact)" |
| | | > |
| | | @click="selectContact(contact)"> |
| | | <view class="contact-info"> |
| | | <view class="contact-avatar"> |
| | | <text class="avatar-text">{{ contact.nickName.charAt(0) }}</text> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { userListNoPageByTenantId } from "@/api/system/user" |
| | | |
| | | const loading = ref(false) |
| | | const finished = ref(false) |
| | | const selectedContact = ref(null) |
| | | const userList = ref([]) |
| | | import { ref, onMounted } from "vue"; |
| | | import { userListNoPageByTenantId, approveUserList } from "@/api/system/user"; |
| | | import { onLoad } from "@dcloudio/uni-app"; |
| | | const loading = ref(false); |
| | | const finished = ref(false); |
| | | const selectedContact = ref(null); |
| | | const userList = ref([]); |
| | | |
| | | // 接收传递的参数 |
| | | const stepIndex = ref(0) |
| | | const stepIndex = ref(0); |
| | | |
| | | onMounted(() => { |
| | | // 从本地存储获取参数 |
| | | const storedStepIndex = uni.getStorageSync('stepIndex'); |
| | | const storedStepIndex = uni.getStorageSync("stepIndex"); |
| | | if (storedStepIndex !== undefined && storedStepIndex !== null) { |
| | | stepIndex.value = parseInt(storedStepIndex) |
| | | stepIndex.value = parseInt(storedStepIndex); |
| | | } |
| | | |
| | | // 初始化联系人数据 |
| | | initContacts() |
| | | }) |
| | | initContacts(); |
| | | }); |
| | | |
| | | const initContacts = () => { |
| | | userListNoPageByTenantId().then((res) => { |
| | | userList.value = res.data |
| | | }) |
| | | finished.value = true |
| | | if (approveType.value) { |
| | | approveUserList({ approveType: approveType.value }).then(res => { |
| | | userList.value = [...res.data]; |
| | | userList.value.forEach(item => { |
| | | item.nickName = item.nickName || item.userName; |
| | | }); |
| | | }); |
| | | } else { |
| | | userListNoPageByTenantId().then(res => { |
| | | userList.value = res.data; |
| | | }); |
| | | } |
| | | finished.value = true; |
| | | }; |
| | | |
| | | const onLoad = () => { |
| | | const onLoading = () => { |
| | | // 模拟加载更多数据 |
| | | setTimeout(() => { |
| | | loading.value = false |
| | | finished.value = true |
| | | }, 1000) |
| | | } |
| | | loading.value = false; |
| | | finished.value = true; |
| | | }, 1000); |
| | | }; |
| | | |
| | | const isSelected = (contact) => { |
| | | return selectedContact.value && selectedContact.value.userId === contact.userId |
| | | } |
| | | const isSelected = contact => { |
| | | return ( |
| | | selectedContact.value && selectedContact.value.userId === contact.userId |
| | | ); |
| | | }; |
| | | |
| | | const selectContact = (contact) => { |
| | | const selectContact = contact => { |
| | | // 单选模式,直接替换选中的联系人 |
| | | selectedContact.value = contact |
| | | } |
| | | selectedContact.value = contact; |
| | | }; |
| | | |
| | | const clearSelected = () => { |
| | | selectedContact.value = null |
| | | } |
| | | selectedContact.value = null; |
| | | }; |
| | | |
| | | const goBack = () => { |
| | | uni.removeStorageSync('stepIndex'); |
| | | uni.navigateBack() |
| | | } |
| | | uni.removeStorageSync("stepIndex"); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | const confirmSelect = () => { |
| | | if (!selectedContact.value) { |
| | | uni.showToast({ |
| | | title: '请选择一个联系人', |
| | | icon: 'none' |
| | | }) |
| | | return |
| | | title: "请选择一个联系人", |
| | | icon: "none", |
| | | }); |
| | | return; |
| | | } |
| | | // 使用 uni.$emit 发送数据 |
| | | uni.$emit('selectContact', { |
| | | uni.$emit("selectContact", { |
| | | stepIndex: stepIndex.value, |
| | | contact: selectedContact.value |
| | | }) |
| | | uni.navigateBack() |
| | | contact: selectedContact.value, |
| | | }); |
| | | uni.navigateBack(); |
| | | }; |
| | | const approveType = ref(null); |
| | | onLoad(options => { |
| | | if (options.approveType) { |
| | | approveType.value = options.approveType; |
| | | } |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | position: relative; |
| | | |
| | | &::before { |
| | | content: ''; |
| | | content: ""; |
| | | position: absolute; |
| | | top: -2px; |
| | | right: -2px; |
| | |
| | | } |
| | | |
| | | &::after { |
| | | content: '✓'; |
| | | content: "✓"; |
| | | position: absolute; |
| | | top: -1px; |
| | | right: -1px; |
| | |
| | | background-color: #f0f8ff; |
| | | |
| | | &::before { |
| | | content: ''; |
| | | content: ""; |
| | | position: absolute; |
| | | left: 8px; |
| | | top: 50%; |