CarRental/pages_store/Operator/device_set.vue

<template>
	<view class="page">
		<u-navbar title="车辆设置" :border-bottom="false" :background="background" title-color='#000' title-size='36'
			height='45' back-icon-color='#000'></u-navbar>

		<view class="share_box">
			<view class="qrcode-container">
				<canvas style="width: 338rpx; height: 338rpx; background-color: #fff;" canvas-id="qrcode" id="qrcode"
					v-if="!showPlateModal">
				</canvas>
			</view>
			<view class="tips">分享二维码，邀请朋友使用车辆</view>
			<view class="btn_box">
				<view class="btn" @click="saveQRCode">保存</view>
				<button class="btn1" open-type="share" @click="shareQRCode">分享</button>
			</view>
		</view>
		<view class="device_info">
			<view class="device_info_item">
				<view class="device_info_item_title">车辆编号</view>
				<view class="device_info_item_value">{{ deviceInfos.sn }}</view>
			</view>
			<view class="device_info_item" @click="openPlateModal('remark', '备注')">
				<view class="device_info_item_title">备注</view>
				<view class="device_info_item_value">
					{{ deviceInfos.remark || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="device_info_item" @click="openPlateModal('fullVoltage', '满电电压')">
				<view class="device_info_item_title">满电电压</view>
				<view class="device_info_item_value">
					{{ deviceInfos.fullVoltage || '未设置' }} V<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="device_info_item" @click="openPlateModal('lowVoltage', '亏电电压')">
				<view class="device_info_item_title">亏电电压</view>
				<view class="device_info_item_value">
					{{ deviceInfos.lowVoltage || '未设置' }} V<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="device_info_item" @click="openPlateModal('fullEndurance', '满电续航')">
				<view class="device_info_item_title">满电续航</view>
				<view class="device_info_item_value">
					{{ deviceInfos.fullEndurance || '未设置' }} KM<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="device_info_item" @click="changeModel()">
				<view class="device_info_item_title">车辆型号</view>
				<view class="device_info_item_value">
					{{ deviceInfos.model || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="device_info_item" @click="openPlateModal('vehicleNum', '车牌号')">
				<view class="device_info_item_title">车牌号</view>
				<view class="device_info_item_value">
					{{ deviceInfos.vehicleNum || '未设置' }} <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</view>
		<view class="unBind" @click="unBind">车辆解绑</view>
		<view class="mask" v-if="showPlateModal" @click="closePlateModal"></view>
		<view class="plate-modal" v-if="showPlateModal">
			<view class="modal-title">
				<image :src="logoUrl" mode="aspectFit" class="logo"></image>
				<text>小鹿出行</text>
				<text class="sub-title">XIAOLIUCHUXING</text>
			</view>

			<view class="modal-content">
				<text class="label">{{currentEditTitle}}</text>
				<input v-model="tempValue" :placeholder="'请输入' + currentEditTitle" placeholder-class="input-placeholder"
					class="plate-input" />
			</view>

			<view class="modal-footer">
				<view class="btn cancel" @click="closePlateModal">取消</view>
				<view class="btn confirm" @click="confirmEdit">确认</view>
			</view>
		</view>
		<u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select>
	</view>
</template>

<script>
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'

export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn: '',
			deviceInfos: {},
			qrSize: 220,
			logoUrl: 'https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF',
			tempFilePath: '',
			showadd: false,
			list: [],
			showPlateModal: false,
			currentEditField: '', // 当前编辑的字段
			currentEditTitle: '', // 当前编辑项的标题
			tempValue: '', // 临时存储修改的值
		}
	},
	onLoad(e) {
		console.log(e.sn);
		this.sn = e.sn;
		this.deviceInfo();
		this.generateQRCode();
		this.getModelList();
	},
	methods: {
    confirm(e) {
        this.showadd = false;
        this.putDeviceModel(e[0].value);
    },

    // 打开编辑弹窗
    openPlateModal(field, title) {
        this.currentEditField = field;
        this.currentEditTitle = title;
        this.tempValue = this.deviceInfos[field] || '';
        this.showPlateModal = true;
        
        // 根据字段类型设置输入框类型
        const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
        if (numericFields.includes(field)) {
            // 找到输入框并设置为数字类型
            // this.$nextTick(() => {
            //     const input = document.querySelector('.plate-input');
            //     if (input) {
            //         input.type = 'number';
            //         input.step = '0.1'; // 允许输入小数
            //     }
            // });
        }
    },

    // 关闭弹窗
    closePlateModal() {
        this.showPlateModal = false;
        // 重新生成二维码
        this.generateQRCode();
    },

    // 确认编辑
    confirmEdit() {
        if (!this.tempValue) {
            uni.showToast({
                title: '请输入' + this.currentEditTitle,
                icon: 'none'
            });
            return;
        }

        // 数字类型字段的验证
        const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
        if (numericFields.includes(this.currentEditField)) {
            const value = parseFloat(this.tempValue);
            
            // 验证是否为有效数字
            if (isNaN(value)) {
                uni.showToast({
                    title: '请输入有效的数字',
                    icon: 'none'
                });
                return;
            }

            // 验证范围
            switch (this.currentEditField) {
                case 'fullVoltage':
                case 'lowVoltage':
                    if (value < 0 || value > 100) {
                        uni.showToast({
                            title: '电压值应在0-100之间',
                            icon: 'none'
                        });
                        return;
                    }
                    break;
                case 'fullEndurance':
                    if (value < 0 || value > 1000) {
                        uni.showToast({
                            title: '续航里程应在0-1000之间',
                            icon: 'none'
                        });
                        return;
                    }
                    break;
            }

            // 转换为数字类型
            this.tempValue = value;
        }

        this.updateDeviceField();
        this.closePlateModal();
    },

    // 统一的设备字段更新方法
    updateDeviceField() {
        const params = {
            sn: this.sn,
            [this.currentEditField]: this.tempValue
        };

        // 对数字类型字段进行特殊处理
        const numericFields = ['fullVoltage', 'lowVoltage', 'fullEndurance'];
        if (numericFields.includes(this.currentEditField)) {
            params[this.currentEditField] = parseFloat(this.tempValue);
        }

        this.$u.put('/appVerify/device/edit', params).then((res) => {
            if (res.code === 200) {
                this.deviceInfo();
                uni.showToast({
                    title: '修改成功',
                    icon: 'success'
                });
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        });
    },

    unBind() {
        this.$u.post('/appVerify/untie/' + this.deviceInfos.deviceId).then((res) => {
            if (res.code === 200) {
                uni.redirectTo({
                    url: '/pages_store/merchant'
                });
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        })
    },

    putDeviceModel(modelId) {
        const params = {
            sn: this.sn,
            modelId: modelId
        };
        
        this.$u.put('/appVerify/device/edit', params).then((res) => {
            if (res.code === 200) {
                this.deviceInfo();
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        })
    },

    changeModel() {
        this.showadd = true;
    },

    deviceInfo() {
        this.$u.get('app/getDeviceBySn?sn=' + this.sn).then((res) => {
            if (res.code === 200) {
                this.deviceInfos = res.data
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        })
    },

    getModelList() {
        this.$u.get('/appVerify/model/getModelByToken').then((res) => {
            if (res.code === 200) {
                this.list = res.data.map(item => ({
                    label: item.model,
                    value: item.modelId
                }));
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        })
    },

    generateQRCode() {
        try {
            const qrUrl = `https://testlu.chuangtewl.com?sn=${this.sn}`;
            const context = uni.createCanvasContext('qrcode', this);

            context.setFillStyle('#ffffff');
            context.fillRect(0, 0, this.qrSize, this.qrSize);
            context.draw(true);

            const qr = new UQRCode();
            qr.data = qrUrl;
            qr.size = this.qrSize;
            qr.margin = 10;
            qr.backgroundColor = '#ffffff';
            qr.foregroundColor = '#000000';
            qr.canvasContext = context;

            qr.make();
            qr.drawCanvas();

            const logoSize = this.qrSize / 4;
            const logoX = (this.qrSize - logoSize) / 2;
            const logoY = (this.qrSize - logoSize) / 2;

            uni.getImageInfo({
                src: this.logoUrl,
                success: (res) => {
                    context.setFillStyle('#ffffff');
                    context.fillRect(logoX - 2, logoY - 2, logoSize + 4, logoSize + 4);
                    context.drawImage(res.path, logoX, logoY, logoSize, logoSize);
                    context.draw(true);
                },
                fail: (err) => {
                    console.error('Logo加载失败:', err);
                }
            });

        } catch (error) {
            console.error('生成二维码失败:', error);
            uni.showToast({
                title: '生成二维码失败',
                icon: 'none'
            });
        }
    },

    saveQRCode() {
        uni.canvasToTempFilePath({
            canvasId: 'qrcode',
            success: (res) => {
                this.tempFilePath = res.tempFilePath;
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: () => {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success'
                        });
                    },
                    fail: (err) => {
                        if (err.errMsg.indexOf('auth deny') !== -1) {
                            uni.showModal({
                                title: '提示',
                                content: '需要您授权保存到相册',
                                success: (res) => {
                                    if (res.confirm) {
                                        uni.openSetting();
                                    }
                                }
                            });
                        } else {
                            uni.showToast({
                                title: '保存失败',
                                icon: 'none'
                            });
                        }
                    }
                });
            },
            fail: (err) => {
                console.error('转换失败:', err);
                uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                });
            }
        }, this);
    },

    shareQRCode() {
        uni.canvasToTempFilePath({
            canvasId: 'qrcode',
            success: (res) => {
                this.tempFilePath = res.tempFilePath;
                console.log('二维码图片已生成:', this.tempFilePath);
            },
            fail: (err) => {
                console.error('生成分享图片失败:', err);
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                });
            }
        }, this);
    }
},
	onShareAppMessage() {
		return {
			title: '设备分享',
			imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
			path: `/pages/index/index?sn=${this.sn}`
		}
	},
	onShareTimeline() {
		return {
			title: '设备分享',
			imageUrl: 'https://lxnapi.ccttiot.com/bike/img/static/uNRujJOme6J0bIxiN1TF',
			query: `sn=${this.sn}`
		}
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
}

.page {
	padding-bottom: 100rpx;
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 100;
	}

	.plate-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		z-index: 1000;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
		animation: modalFadeIn 0.3s ease-out;

		.modal-title {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 48rpx 0 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.logo {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-bottom: 24rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
			}

			text {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				line-height: 1.4;

				&.sub-title {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
					letter-spacing: 2rpx;
				}
			}
		}

		.modal-content {
			padding: 32rpx 40rpx;

			.label {
				display: block;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
				font-weight: 500;
			}

			.plate-input {
				width: 100%;
				height: 88rpx;
				background: #F8F8F8;
				border-radius: 12rpx;
				padding: 0 24rpx;
				font-size: 30rpx;
				color: #333333;
				box-sizing: border-box;
				border: 2rpx solid #EEEEEE;
				transition: all 0.3s ease;

				&:focus {
					border-color: #4297F3;
					background: #FFFFFF;
				}
			}

			.input-placeholder {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.modal-footer {
			display: flex;
			height: 100rpx;
			border-top: 2rpx solid #F5F5F5;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
				transition: all 0.3s ease;

				&.cancel {
					color: #666666;
					background: #FFFFFF;
					border-radius: 0 0 0 24rpx;

					&:active {
						background: #F5F5F5;
					}
				}

				&.confirm {
					color: #FFFFFF;
					background: #4297F3;
					border-radius: 0 0 24rpx 0;

					&:active {
						background: darken(#4297F3, 5%);
					}
				}
			}
		}
	}

	@keyframes modalFadeIn {
		from {
			opacity: 0;
			transform: translate(-50%, -48%);
		}
		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}

	.device_info {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 660rpx;
		padding: 42rpx 46rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;

		.device_info_item {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0;
			transition: all 0.3s ease;
			border-bottom: 2rpx dashed #dddddd;
			&:active {
				background: #F8F8F8;
			}

			.device_info_item_title {
				font-size: 28rpx;
				color: #666666;
			}

			.device_info_item_value {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				.iconfont {
					margin-left: 8rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}

	.share_box {
		position: relative;
		margin: 0 auto;
		margin-top: 50rpx;
		width: 688rpx;
		height: 898rpx;
		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uvVY5qF63XMV7jqCVlP7');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		.qrcode-container {
			position: absolute;
			top: 246rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx;

			canvas {
				background: #FFFFFF;
				padding: 20rpx;
				border-radius: 16rpx;
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
			}
		}

		.tips {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 678rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}

		.btn_box {
			position: absolute;
			bottom: 60rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			padding: 0 66rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 254rpx;
				height: 82rpx;
				border-radius: 12rpx;
				border: 2rpx solid #808080;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				transition: all 0.3s ease;

				&:active {
					background: #F5F5F5;
				}
			}

			.btn1 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 254rpx;
				height: 82rpx;
				background: #4297F3;
				border-radius: 12rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				padding: 0;
				margin: 0;
				line-height: 82rpx;
				transition: all 0.3s ease;

				&:active {
					background: darken(#4297F3, 5%);
				}

				&::after {
					border: none;
				}
			}
		}
	}

	.unBind {
		margin: 0 auto;
		margin-top: 90rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 660rpx;
		height: 92rpx;
		background: #3D3D3D;
		box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		transition: all 0.3s ease;

		&:active {
			background: darken(#3D3D3D, 5%);
		}
	}
}
</style>