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

40
api/6170/share.js Normal file
View File

@ -0,0 +1,40 @@
import request from '@/utils/request'
// 新增设备分享
export function deviceShareAdd(data) {
return request({
url: '/app/deviceShare/deviceShare',
method: 'post',
data: data
})
}
// 获取设备分享详细信息
export function deviceShareId(id) {
return request({
url: `/app/deviceShare/${id}`,
method: 'get',
})
}
// 分享短信验证码
export function deviceShareCode(params) {
return request({
url: '/app/deviceShare/sms/code',
method: 'get',
data:params
})
}
//设备管理列表
export function deviceShareList(params) {
return request({
url: '/app/deviceShare/deviceShareList',
method: 'get',
data: params
})
}
// 移除设备管理
export function deviceShareDelete(ids) {
return request({
url: `/app/deviceShare/${ids}`,
method: 'DELETE',
})
}

View File

@ -8,11 +8,11 @@ export function login(data) {
})
}
// 注册发送验证码
export function sendRegisterSms(data) {
export function resourceSmsCode(params) {
return request({
url: '/api/appUser/sendRegisterSms', //发送验证码注册
method: 'POST',
data: data
url: '/resource/sms/code', //发送验证码注册
method: 'GET',
data: params
})
}
// 退出登录

View File

@ -325,9 +325,17 @@
this.lightModeB = false
},
// 分享
shareUp(){
shareUp() {
uni.navigateTo({
url: '/pages/6170/share/index'
url: '/pages/6170/share/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('share', {
data: this.itemInfo,
});
}
})
},
@ -482,6 +490,7 @@
width: 204rpx;
height: 144rpx;
margin-top: 30rpx;
object-fit: contain;
}
.dlIMG {
@ -646,7 +655,7 @@
.example-body {
position: absolute;
left: 50%;
top: 60%;
top: 70%;
width: 100%;
transform: translate(-10%, -100%);

View File

@ -6,7 +6,6 @@
<view class="section" @click="shareDevice">
<text class="section-title">分享设备</text>
</view>
<!-- 分享管理 -->
<view class="section" @click="shareManagement">
<text class="section-title">分享管理</text>
@ -19,14 +18,22 @@
export default {
data() {
return {
itemInfo:""
}
},
methods: {
// 分享设备
shareDevice(){
uni.navigateTo({
url: '/pages/6170/shareDevices/index'
url: '/pages/6170/shareDevices/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('shareDevice', {
data: this.itemInfo,
});
}
});
},
// 分享管理
@ -35,7 +42,14 @@
url: '/pages/6170/shareManagement/index'
});
}
},
onLoad() {
const eventChannel = this.getOpenerEventChannel();
// 监听 'shareDevice' 事件,获取传过来的数据
eventChannel.on('share', (data) => {
console.log(data,'datat');
this.itemInfo = data.data;
})
}
}
</script>

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);

View File

@ -7,14 +7,14 @@
<image :src="item.devicePic" mode="" class="IMG"></image>
</view>
<view class="device-name">
<view>{{item.deviceName}}rr32r23r23</view>
<view>{{item.deviceName}}</view>
<view class="ID">
<view class="ID">ID:{{item.deviceImei}}ererer
<view class="ID">ID:{{item.id}}
</view>
</view>
</view>
<view class="device-delete" @click="handleDelete">
<text class="delete">移除</text>
<view class="device-delete" >
<text class="delete" @click="handleDelete(item)">移除</text>
</view>
</view>
</view>
@ -38,22 +38,55 @@
</template>
<script>
import {deviceShareList,deviceShareDelete} from '@/api/6170/share.js'
export default {
data() {
return {
deviceList: [{}],
deleteShow:false
deviceList: [],
deleteShow:false,
delelteItemInfo:''
}
},
methods: {
// 删除
handleDelete() {
handleDelete(item) {
console.log(item,'www');
this.deleteShow=true
this.delelteItemInfo=item
},
handleBtn(){
this.deleteShow=false
let allId=this.delelteItemInfo.id
deviceShareDelete(allId).then((res)=>{
if (res.code=200) {
uni.showToast({
title:res.msg,
icon:'none'
})
this.deleteShow=false
this.getData()
} else{
uni.showToast({
title:res.msg,
icon:'none'
})
}
})
//
},
getData(){
let data ={
}
deviceShareList(data).then((res)=>{
if (res.code==200) {
this.deviceList=res.rows
}
})
}
},
onLoad() {
this.getData()
}
}
</script>
@ -74,6 +107,7 @@
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
margin-bottom: 20rpx;
}
.device-header {

View File

@ -21,39 +21,46 @@
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
style="height:80vh;">
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
class="device-card">
<view @click.stop="handleFile(item)">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" class="IMG"></image>
</view>
<view class="device-name">
<view>设备:{{item.deviceName}}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
<view v-if="deviceList.length>0">
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options"
@click="handleSwipeClick($event, item, index)" class="device-card">
<view @click.stop="handleFile(item)">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" class="IMG"></image>
</view>
<view class="device-name">
<view>设备:{{item.deviceName}}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
<view class="onlines" v-if="item.communicationMode==0">在线</view>
<view>电量90%</view>
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
<view class="onlines" v-if="item.communicationMode==0">在线</view>
<view>电量90%</view>
</view>
</view>
<view class="" v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
</view>
</view>
<view class="" v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
</view>
</view>
<image src="/static/images/cires.png" class="circle"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 加载状态提示 -->
<view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
<image src="/static/images/cires.png" class="circle"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 加载状态提示 -->
<view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
</view>
</view>
<view v-else class="noDATA">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
</view>
暂无数据
</view>
</scroll-view>
</view>
@ -420,6 +427,7 @@
// 绑定页面做了监听,新增成功,刷新页面
uni.$on('refreshDeviceList', () => {
this.getTab() // 刷新数据
this.onIntall()
});
},
beforeDestroy() {
@ -592,6 +600,7 @@
width: 68rpx;
height: 50rpx;
margin-left: 17%;
object-fit: contain;
}
.onlines {
@ -625,6 +634,11 @@
padding: 20rpx;
font-size: 22rpx;
}
.noDATA{
text-align: center;
color: rgba(255, 255, 255, 0.87);
transform: translate(-0%,100%);
}
/* 遮罩层 */
.agreement-mask {

View File

@ -55,15 +55,14 @@
<script>
import {
login,
sendRegisterSms
resourceSmsCode
} from '@/api/common/login.js';
export default {
data() {
return {
showView: false,
//codebtn: '获取验证码',
phone: '13058067817', //手机号码
code: "123456", //验证码
code: "", //验证码
agreed: false,
isCounting: false,
countdown: 0,
@ -92,15 +91,20 @@
return false;
}
try {
// 调用发送验证码接口
await sendRegisterSms({
phoneNumber: this.phone
await resourceSmsCode({
phonenumber: this.phone
})
//倒计时
// 更新倒计时状态
this.isCounting = true;
this.showView = true;
this.countdown = 60
const timer = setInterval(() => {
this.countdown--
if (this.countdown <= 0) clearInterval(timer)
if (this.countdown <= 0) {
clearInterval(timer)
this.isCounting = false;
this.showView = false;
}
}, 1000)
uni.showToast({
title: '验证码已发送',
@ -146,7 +150,7 @@
tenantId: '894078' //租户ID
})
if (res.code == 200) {
console.log(res,'ressss');
console.log(res, 'ressss');
uni.hideLoading()
uni.setStorageSync('token', res.data.access_token) // 缓存token
uni.setStorageSync('clientID', res.data.client_id) // 缓存token
@ -257,7 +261,7 @@
}
.blue {
color: rgba(255, 255, 255, 0.6);
color: rgb(187, 230, 0);
}
.agreement {

View File

@ -1,7 +1,6 @@
<template>
<view class="page-section page-section-gap">
<map class="map" :latitude="latitude" :longitude="longitude":show-location="true"
:markers="covers">
<map class="map" :latitude="latitude" :longitude="longitude":show-location="true">
</map>
</view>
</template>