bonus-material-app/src/pages/dateUpdate/index.vue

<template>
    <uni-nav-bar fixed :border="false" background-color="#dcf4ff" color="black" status-bar title="日期更新">
        <template
            v-slot:left>
            <view style="display: flex; align-items: center" @click="back">
                <!-- 图标 -->
                <uni-icons type="left" size="20" color="black"></uni-icons>
            </view>
        </template>
        <template v-slot:right>
            <view style="display: flex; align-items: center" @click="onQrCode">
                <!-- 文本 -->
                <text>二维码</text>
            </view>
        </template>
    </uni-nav-bar>
    <view class="accept">
        <div class="card">
            <div style="display: flex; justify-content: space-between; align-items: center">

                <uni-easyinput v-model="keyWord" placeholder="请输入设备编码"></uni-easyinput>
                <button type="primary" size="mini" class="btn-cont" @click="handleSearch"
                        style="margin-left: 10px;background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
">
                    查询
                </button>
            </div>
        </div>


        <div v-if="typeList.length > 1" class="card">
            <select-one style="width: 100%; height: 90rpx" :options="typeList" placeholder="请选择对应机具"
                        :key="typeList" @change="handleCheck" />

        </div>

        <div class="card" v-if="typeList.length > 0">
            <div style="margin-bottom: 5px">设备类型：{{ formData.maType }}</div>
            <div style="margin-bottom: 5px">规格型号：{{ formData.typeName }}</div>
            <div style="margin-bottom: 5px">设备编码：{{ formData.code }}</div>
            <div style="margin-bottom: 5px">本次检修人员：{{ formData.repairer }}</div>
            <div style="margin-bottom: 5px">本次检修时间：{{ formData.repairTime }}</div>
            <div style="margin-bottom: 5px">下次检修时间：{{ formData.nextRepairTime }}</div>
        </div>

        <div class="btn">
            <button class="btn-cont" v-if="typeList.length > 0" type="primary" @click="handleSubmit"
            >
                确认修改
            </button>
        </div>
    </view>

    <uni-popup ref="popup" class="card">
        <div class="card" v-for="(item, index) in typeList" :key="index" @click.stop="handleCheck(item)">
            <div style="display: flex; justify-content: space-between; align-items: center">
                <uni-data-checkbox v-model="item.isChecked" :localdata="range"
                                   @change="handleCheck(item, $event)"></uni-data-checkbox>
                <div class="card">{{ item.name }}</div>

            </div>

        </div>
    </uni-popup>
    <ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />
</template>

<script setup>
import {
    getWsMaInfoList,
    updateCheckTime,
} from '@/services/wsMaInfo/wsMaInfo.js'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode'
import SelectOne from '../repair/tree-select/select-one.vue'

const keyWord = ref('')
const formData = reactive({
    id: '',
    maType: '', // 设备类型
    typeName: '', // 规格型号
    code: '', // 设备编码
    repairer: '', // 维修人
    repairTime: '', // 维修时间
    nextRepairTime: '', // 下次维修时间
})
const scanQrCodeRef = ref()
const popup = ref()
const typeName = ref('')
const typeList = ref([])
const range = ref([{ value: 0, text: '' }])

onLoad(() => {
    console.log('onLoad')
})

const back = () => {
    uni.navigateBack({
        delta: 1,
    })
}

const onQrCode = () => {
    console.log('🚀 ~ onQrCode ~ 二维码:')
    if (scanQrCodeRef.value) scanQrCodeRef.value.scanQrCode()
}

const handleSearch = () => {
    console.log('🚀 ~ handleSearch ~ 查询:', keyWord.value)
    // typeList.value =[];
    reset()
    getWsMaInfoList({ maCode: keyWord.value }).then(res => {
        if (res.code === 200 && res.data && res.data.length > 0) {
            typeList.value = res.data.map(option => {
                return {
                    id: option.id,
                    label: option.maName + '-' + option.maModel + '-' + option.maCode,
                    /* isChecked: 1,*/
                    item: option,

                }
            })
            if (res.data.length === 1) {
                console.log('🚀 ~ getWsMaInfoList ~ res.data.length:', res.data.length)
                formData.id = res.data[0].id
                formData.code = res.data[0].maCode
                formData.maType = res.data[0].maName
                formData.nextRepairTime = res.data[0].nextCheckTime
                formData.repairTime = res.data[0].thisCheckTime
                formData.typeName = res.data[0].maModel
                formData.repairer = res.data[0].repairMan
                console.log('🚀 ~ getWsMaInfoList ~ formData:', formData)
            }
        }
    }).catch(error => {
        console.log(error)
    })
}

const handlePopup = () => {
    console.log('🚀 ~ handlePopup ~ 弹窗:')
    popup.value.open()
}

const handleCheck = (item) => {
    console.log('🚀 ~ handleCheck ~ 单选:', item)
    // 循环 typeList 将当前点击的 item.isChecked 设置为 0 其他设置 1
    typeList.value.forEach((i) => {
        i.isChecked = i.id === item.id ? 0 : 1
    })

    formData.id = item.item.id
    formData.code = item.item.maCode
    formData.maType = item.item.maName
    formData.nextRepairTime = item.item.nextCheckTime
    formData.repairTime = item.item.thisCheckTime
    formData.typeName = item.item.maModel
    formData.repairer = item.item.repairMan
    typeName.value = item.name

    popup.value.close()
}

// 处理扫描成功事件
const handleScanSuccess = (result) => {
    keyWord.value = result?.data?.split('?qrcode=')[1] || result?.data
    if (keyWord.value === '') {
        uni.showToast({ title: '扫码识别失败', icon: 'none' })
    } else {
        handleSearch()
    }
}

// 处理扫描失败事件
const handleScanError = (error) => {
    console.error('扫描出错:', error.message)
    uni.showToast({ title: error.message, icon: 'none' })
}
// 清空表单
const reset = () => {
    Object.keys(formData).forEach(key => {
        formData[key] = ''
    })
    typeName.value = ''
    typeList.value = []
}

// 提交
const handleSubmit = () => {
    updateCheckTime(formData.code).then(res => {
        if (res.code === 200) {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            })

            handleSearch()
        }
    }).catch(error => {
        console.log(error)
    })

}
</script>

<style lang="scss">
.accept {
    padding: 24rpx;
    height: 90vh;
    word-break: break-all;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;

    // 卡片样式
    .card {
        padding: 32rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;
        height: auto;

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                padding: 24rpx 0;
                margin-bottom: 0;
                border-bottom: 2rpx solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .uni-forms-item__label {
                    height: 2.75rem;
                    color: #8c8c8c;
                }

                // 下拉选择框样式
                .uni-data-select {
                    .uni-select {
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 88rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-select__input-box {
                            height: 88rpx;
                            line-height: 88rpx;
                        }

                        .uni-select__input-text {
                            font-size: 28rpx;
                            color: #262626;
                        }
                    }
                }

                // 输入框样式
                .uni-easyinput {
                    .uni-easyinput__content {
                        background-color: #f7f8fa;
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 88rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-easyinput__content-input {
                            font-size: 28rpx;
                            height: 88rpx;
                            line-height: 88rpx;
                            color: #262626;
                        }
                    }
                }
            }
        }
    }

    // 底部按钮
    .btn {
        margin-top: auto;
        padding: 32rpx;
        // background: #fff;
        // box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        gap: 24rpx;

        .btn-cont {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            color: #fff;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }

            // 清空按钮样式
            &:first-child {
                background: #fff;
                color: #3784fb;
                border: 2rpx solid #3784fb;
                box-shadow: none;

                &:active {
                    background: #f7f8fa;
                }
            }
        }
    }
}
</style>