6170分享设备页面功能开发

This commit is contained in:
fengerli
2025-07-19 10:22:48 +08:00
parent bc3bea6df0
commit 1663ae75e4
9 changed files with 321 additions and 89 deletions

View File

@ -1,17 +1,16 @@
<template>
<view class="container">
<!-- 设备信息 -->
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-info">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" mode="" class="IMG"></image>
<image :src="itemInfo.devicePic" mode="" class="IMG"></image>
</view>
<view class="device-name">
<view>设备:{{item.deviceName}}</view>
<view>设备:{{itemInfo.deviceName}}</view>
<view class="ID">
<view class="ID">ID:{{item.deviceImei}}
<view class="ID">ID: {{itemInfo.deviceImei}}
</view>
</view>
</view>
</view>
@ -35,10 +34,11 @@
<!-- 被分享人信息 -->
<view class="recipient-info">
<view class="recipient-title">被分享人信息</view>
<input type="number" placeholder="输入手机号" class="phone-input" :maxlength="11" />
<input type="number" v-model="phone" placeholder="输入手机号" class="phone-input" :maxlength="11" />
<view class="verification-code">
<input type="number" placeholder="短信验证码" class="code-input" />
<view class="get-code-btn">获取验证码</view>
<input type="number" v-model="code" placeholder="短信验证码" class="code-input" :maxlength="6" />
<view class="get-code-btn" :class="showView?' get_phone_number blue':'get_phone_number grad'"
@click="getPhoneCode">{{ isCounting ? `${countdown}s后重新获取` : '获取验证码' }}</view>
</view>
</view>
@ -64,48 +64,59 @@
</template>
<script>
import {
deviceShareId,
deviceShareCode,
deviceShareAdd
} from '@/api/6170/share.js'
export default {
data() {
return {
allSelected: false,
shareShow: false,
showView: false,
isCounting: false,
countdown: 0,
permissions: [{
value: "light-mode",
value: "1",
label: "灯光模式",
checked: false
},
{
value: "laser-mode",
value: "2",
label: "激光模式",
checked: false
},
{
value: "startup-image",
value: "3",
label: "开机画面",
checked: false
},
{
value: "person-registration",
value: "4",
label: "人员信息登记",
checked: false
},
{
value: "send-message",
value: "5",
label: "发送信息",
checked: false
},
{
value: "product-info",
value: "6",
label: "产品信息",
checked: false
}
],
deviceList: [{}]
deviceInfo: {},
phone: '13058067817',
code: '123456',
itemInfo: ''
};
},
methods: {
closePopup(){
this.shareShow=false
closePopup() {
this.shareShow = false
},
toggleAllSelection() {
this.allSelected = !this.allSelected;
@ -115,15 +126,118 @@
this.$set(this.permissions[index], 'checked', !this.permissions[index].checked);
this.allSelected = this.permissions.every(permission => permission.checked);
},
shareUp() {
// const selectedPermissions = this.permissions.filter(permission => permission.checked).map(permission =>
// permission.value);
// console.log('Selected Permissions:', selectedPermissions);
this.shareShow=true
// 获取验证码
async getPhoneCode() {
const phoneNumber = this.phone
const myreg = /^1[3456789]\d{9}$/;
if (!phoneNumber) {
uni.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
});
return false;
} else if (!myreg.test(phoneNumber)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1000
});
return false;
}
try {
await deviceShareCode({
phonenumber: this.phone
})
// 更新倒计时状态
this.isCounting = true;
this.showView = true;
this.countdown = 60
const timer = setInterval(() => {
this.countdown--
if (this.countdown <= 0) {
clearInterval(timer)
this.isCounting = false;
this.showView = false;
}
}, 1000)
uni.showToast({
title: '验证码已发送',
icon: 'none'
})
} catch (error) {}
},
handleBtn(){
this.shareShow=false
}
// 分享按钮提交
async shareUp() {
if (this.phone == '') {
uni.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
})
return false
} else if (this.code == '') {
uni.showToast({
title: '验证码不能为空',
icon: 'none',
duration: 1000
})
return false
}else if (!this.permissions.some(permission => permission.checked)) {
uni.showToast({
title: '请选择至少一个功能权限',
icon: 'none',
duration: 1000
});
return false;
}
try {
uni.showLoading({
title: '分享中'
})
const selectedPermissions = this.permissions.filter(permission => permission.checked).map(
permission =>
permission.value);
const res = await deviceShareAdd({
phonenumber: this.phone,
smsCode: this.code,
deviceId: this.itemInfo.id,
permission: selectedPermissions.join(',')
})
if (res.code == 200) {
this.shareShow = true
uni.hideLoading()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
} catch (error) {
uni.showToast({
title: error.msg,
icon: 'none'
});
}
},
handleBtn() {
this.shareShow = false
uni.navigateTo({
url: '/pages/6170/shareManagement/index'
})
},
},
onLoad() {
const eventChannel = this.getOpenerEventChannel();
// 监听 'shareDevice' 事件,获取传过来的数据
eventChannel.on('shareDevice', (data) => {
console.log(data, 'data1t111');
this.itemInfo = data.data;
})
}
};
</script>
@ -290,6 +404,7 @@
border-radius: 91rpx;
background: rgba(187, 230, 0, 1);
}
/* 遮罩层 */
.agreement-mask {
position: fixed;
@ -303,16 +418,18 @@
align-items: center;
z-index: 9999;
}
.popup-Title {
color: rgba(255, 255, 255, 0.86);
text-align: center;
padding: 30rpx 0rpx;
}
.popup-buttons {
display: flex;
text-align: center;
}
/* 弹窗主体 */
.agreement-popup {
width: 60%;
@ -322,11 +439,12 @@
text-align: center;
border: 1px solid rgba(187, 230, 0, 0.3);
}
.svg {
width: 58rpx;
height: 62rpx;
}
/* 通用按钮样式 */
.btn {
height: 60rpx;
@ -335,9 +453,9 @@
font-size: 24rpx;
margin: 10rpx auto;
text-align: center;
}
/* 同意按钮 */
.agreeBtn {
background: rgba(187, 230, 0, 1);