From c58665039ce8b7c895ed4f1000ff4cf525a92085 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 27 八月 2025 16:28:21 +0800
Subject: [PATCH] 1.设备保养开发联调
---
src/pages/cooperativeOffice/collaborativeApproval/contactSelect.vue | 391 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 391 insertions(+), 0 deletions(-)
diff --git a/src/pages/cooperativeOffice/collaborativeApproval/contactSelect.vue b/src/pages/cooperativeOffice/collaborativeApproval/contactSelect.vue
new file mode 100644
index 0000000..9259068
--- /dev/null
+++ b/src/pages/cooperativeOffice/collaborativeApproval/contactSelect.vue
@@ -0,0 +1,391 @@
+<template>
+ <view class="contact-select">
+ <!-- 椤堕儴鏍囬鏍� -->
+ <view class="header">
+ <up-icon name="arrow-left" size="20" color="#333" @click="goBack" />
+ <text class="title">閫夋嫨鑱旂郴浜�</text>
+ <text class="confirm-btn" @click="confirmSelect">纭畾</text>
+ </view>
+
+ <!-- 鎼滅储妗� -->
+<!-- <view class="search-section">-->
+<!-- <van-search-->
+<!-- v-model="searchValue"-->
+<!-- placeholder="鎼滅储鑱旂郴浜�"-->
+<!-- @search="onSearch"-->
+<!-- @input="onSearch"-->
+<!-- />-->
+<!-- </view>-->
+
+ <!-- 宸查�夋嫨鐨勮仈绯讳汉 -->
+ <view class="selected-section" v-if="selectedContact">
+ <view class="selected-header">
+ <text class="selected-title">宸查�夋嫨</text>
+ <text class="clear-btn" @click="clearSelected">娓呯┖</text>
+ </view>
+ <view class="selected-item">
+ <view class="contact-avatar">
+ <text class="avatar-text">{{ selectedContact.nickName.charAt(0) }}</text>
+ </view>
+ <view class="contact-details">
+ <text class="contact-name">{{ selectedContact.nickName }}</text>
+ </view>
+ <van-icon name="cross" size="16" color="#999" @click="clearSelected" />
+ </view>
+ </view>
+
+ <!-- 鑱旂郴浜哄垪琛� -->
+ <view class="contact-list">
+ <view class="list-header">
+ <text class="list-title">鍏ㄩ儴鑱旂郴浜�</text>
+ </view>
+
+ <van-list
+ v-model:loading="loading"
+ :finished="finished"
+ finished-text="娌℃湁鏇村浜�"
+ @load="onLoad"
+ >
+ <view
+ v-for="contact in userList"
+ :key="contact.userId"
+ class="contact-item"
+ :class="{ 'selected': isSelected(contact) }"
+ @click="selectContact(contact)"
+ >
+ <view class="contact-info">
+ <view class="contact-avatar">
+ <text class="avatar-text">{{ contact.nickName.charAt(0) }}</text>
+ </view>
+ <view class="contact-details">
+ <text class="contact-name">{{ contact.nickName }}</text>
+<!-- <text class="contact-dept">{{ contact.department }}</text>-->
+ </view>
+ </view>
+ </view>
+ </van-list>
+ </view>
+ </view>
+</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([])
+
+// 鎺ユ敹浼犻�掔殑鍙傛暟
+const stepIndex = ref(0)
+
+onMounted(() => {
+ // 鑾峰彇椤甸潰鍙傛暟
+ const pages = getCurrentPages()
+ const currentPage = pages[pages.length - 1]
+ if (currentPage.options.stepIndex !== undefined) {
+ stepIndex.value = parseInt(currentPage.options.stepIndex)
+ }
+
+ // 鍒濆鍖栬仈绯讳汉鏁版嵁
+ initContacts()
+})
+
+const initContacts = () => {
+ userListNoPageByTenantId().then((res) => {
+ userList.value = res.data
+ })
+ finished.value = true
+}
+
+const onLoad = () => {
+ // 妯℃嫙鍔犺浇鏇村鏁版嵁
+ setTimeout(() => {
+ loading.value = false
+ finished.value = true
+ }, 1000)
+}
+
+const isSelected = (contact) => {
+ return selectedContact.value && selectedContact.value.userId === contact.userId
+}
+
+const selectContact = (contact) => {
+ // 鍗曢�夋ā寮忥紝鐩存帴鏇挎崲閫変腑鐨勮仈绯讳汉
+ selectedContact.value = contact
+}
+
+const clearSelected = () => {
+ selectedContact.value = null
+}
+
+const goBack = () => {
+ uni.navigateBack()
+}
+
+const confirmSelect = () => {
+ if (!selectedContact.value) {
+ uni.showToast({
+ title: '璇烽�夋嫨涓�涓仈绯讳汉',
+ icon: 'none'
+ })
+ return
+ }
+ // 浣跨敤 uni.$emit 鍙戦�佹暟鎹�
+ uni.$emit('selectContact', {
+ stepIndex: stepIndex.value,
+ contact: selectedContact.value
+ })
+ uni.navigateBack()
+}
+</script>
+
+<style scoped lang="scss">
+.contact-select {
+ min-height: 100vh;
+ background: #f8f9fa;
+}
+
+.header {
+ background: #ffffff;
+ padding: 16px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #f0f0f0;
+ position: sticky;
+ /* 鍏煎 iOS 鍒樻捣/鐏靛姩宀涘畨鍏ㄥ尯 */
+ padding-top: calc(env(safe-area-inset-top));
+ top: 0;
+ z-index: 100;
+ position: relative;
+}
+
+.title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+.confirm-btn {
+ color: #006cfb;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.search-section {
+ background: #fff;
+ padding: 12px 16px;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.selected-section {
+ background: #fff;
+ margin-top: 8px;
+ padding: 16px;
+}
+
+.selected-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.selected-title {
+ font-size: 14px;
+ color: #333;
+ font-weight: 500;
+}
+
+.clear-btn {
+ color: #006cfb;
+ font-size: 14px;
+}
+
+.selected-item {
+ display: flex;
+ align-items: center;
+ background: #f0f8ff;
+ border: 1px solid #006cfb;
+ border-radius: 12px;
+ padding: 12px;
+ gap: 12px;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ width: 16px;
+ height: 16px;
+ background: #52c41a;
+ border-radius: 50%;
+ border: 2px solid #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ &::after {
+ content: '鉁�';
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ color: #fff;
+ font-weight: bold;
+ }
+}
+
+.contact-list {
+ background: #fff;
+ margin-top: 8px;
+}
+
+.list-header {
+ padding: 16px;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.list-title {
+ font-size: 14px;
+ color: #666;
+}
+
+.contact-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid #f8f9fa;
+ transition: all 0.2s;
+ position: relative;
+
+ &.selected {
+ background-color: #f0f8ff;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 4px;
+ background: #006cfb;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(0, 108, 251, 0.2);
+ }
+ }
+
+ &:active {
+ background-color: #f5f5f5;
+ }
+}
+
+.contact-info {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ padding-left: 16px;
+}
+
+.contact-avatar {
+ width: 40px;
+ height: 40px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 12px;
+ position: relative;
+}
+
+.avatar-text {
+ color: #fff;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.contact-details {
+ flex: 1;
+}
+
+.contact-name {
+ display: block;
+ font-size: 16px;
+ color: #333;
+}
+
+.contact-dept {
+ font-size: 12px;
+ color: #999;
+}
+
+// 鑷畾涔夊崟閫夋寜閽牱寮�
+:deep(.van-radio) {
+ .van-radio__icon {
+ width: 20px;
+ height: 20px;
+ border: 2px solid #ddd;
+ border-radius: 50%;
+ background: #fff;
+ position: relative;
+ transition: all 0.2s;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0);
+ width: 8px;
+ height: 8px;
+ background: #006cfb;
+ border-radius: 50%;
+ transition: transform 0.2s;
+ }
+ }
+
+ &.van-radio--checked {
+ .van-radio__icon {
+ border-color: #006cfb;
+ background: #fff;
+
+ &::before {
+ transform: translate(-50%, -50%) scale(1);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ border: 2px solid rgba(0, 108, 251, 0.2);
+ border-radius: 50%;
+ animation: ripple 0.6s ease-out;
+ }
+ }
+ }
+}
+
+@keyframes ripple {
+ 0% {
+ transform: scale(0.8);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3