shuhi-app/pages/index/detail/components/AuditorSelector.vue

<template>
    <u-popup :show="show" @close="handleClose" mode="bottom" round="10">
        <view class="auditor-selector">
            <view style="flex:1">
                <!-- Title -->
                <view class="header">
                    <text class="title">绑定审核员</text>
                </view>

                <!-- Search Box -->
                <view class="search-box">
                    <u-search :inputStyle="{ 'height': '80rpx', 'font-size': '16px' }"
                        :actionStyle="{ 'font-size': '16px', color: '#22ac38' }" v-model="searchKeyword"
                        placeholder="搜索审核员" :show-action="true" action-text="搜索" @search="handleSearch"
                        @custom="handleSearch" />
                </view>

                <!-- Search Results -->
                <view class="search-result" v-if="searchResults.length > 0">
                    <text class="section-title">搜索结果</text>
                    <view class="tag-group">
                        <u-tag v-for="item in searchResults" :key="item" :text="item.userName"
                            :plain="checkUserId!==item.userId" shape="circle" @click="selectAuditor(item)"
                            size="large" />
                    </view>
                </view>

                <!-- History -->
                <view class="history-section" v-if="historyAuditors.length>0">
                    <text class="section-title">历史绑定</text>
                    <view class="tag-group">
                        <u-tag v-for="item in historyAuditors" :key="item" :text="item.userName"
                            :plain="checkUserId!==item.userId" shape="circle" @click="selectAuditor(item)"
                            size="large" />
                    </view>
                </view>
            </view>
            <!-- Footer Buttons -->
            <view class="footer">
                <u-button @click="handleClose" text="取消" plain shape="circle" />
                <u-button type="primary" @click="handleConfirm" text="确定" shape="circle" />
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:show', 'auditor-selected'])

const searchKeyword = ref('')
const searchResults = ref([])
const historyAuditors = ref(uni.getStorageSync('historyAuditors') || [])
const checkUserId = ref('')

// Auditor search
const auditorSearch = (name) => {
    console.log(name)
    uni.$u.http.get('/app/appUser/getCheckUser?name=' + name).then(res => {
        if (res.code == 200) {
            searchResults.value = res.data
        }
    })
}

const handleSearch = () => {
    auditorSearch(searchKeyword.value)
}

const selectItem = ref({})
const selectAuditor = (item) => {
    checkUserId.value = item.userId
    selectItem.value = item
}

const handleClose = () => {
    emit('update:show', false)
    searchKeyword.value = ''
}

const handleConfirm = () => {
    if (checkUserId.value) {
        emit('auditor-selected', selectItem.value)
        uni.setStorageSync('checkUserInfo', selectItem.value)
        addToHistory(selectItem.value)
        handleClose()
    }
}

const addToHistory = (item) => {
    const existingIndex = historyAuditors.value.findIndex(auditor => auditor.userId === item.userId)
    if (existingIndex !== -1) {
        historyAuditors.value.splice(existingIndex, 1)
    }
    historyAuditors.value.unshift(item)
    if (historyAuditors.value.length > 10) {
        historyAuditors.value.pop()
    }
    uni.setStorageSync('historyAuditors', historyAuditors.value)
}

onMounted(() => {
    const storedHistory = uni.getStorageSync('historyAuditors') || []
    historyAuditors.value = storedHistory
})
</script>

<style lang="scss" scoped>
.auditor-selector {
    padding: 30rpx;
    min-height: 35vh;
    max-height: 80vh;
    overflow: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.header {
    text-align: center;
    margin-bottom: 20px;

    .title {
        font-size: 18px;
        font-weight: 500;
    }
}

.search-box {
    margin-bottom: 30rpx;
}

.section-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    display: block;
}

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.footer {
    position: sticky;
    bottom: 0;
    padding: 20px 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    gap: 30rpx;
}
</style>