730 lines
19 KiB
Vue
730 lines
19 KiB
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> |