dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装提示弹框

Browse Source
This commit is contained in:
fengerli
2025-07-24 10:05:17 +08:00
parent c0a9c0b3f2
commit 51ab4d0bfa
9 changed files with 307 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
pages/6170/allShare/index.vue
View File

@ -14,7 +14,11 @@
<view v-if="deviceList.length>0">
<view v-for="(group, groupIndex) in groupedDevices" :key="groupIndex">
<view class="share-header">
<text>分享给"{{group.sharedTo}}"的设备</text>
<text>{{
tabs[activeTab].name === '我的分享'
? `分享给“${group.sharedTo}”的设备`
: `来自“${group.sharedTo}”分享的设备`
}}</text>
<text class="edit-btn"
@click="toggleEdit(groupIndex)">{{editingGroup === groupIndex ? '完成' : '编辑'}}</text>
</view>
@ -23,7 +27,8 @@
<view class="device-card" v-for="(item, index) in group.devices" :key="index"
:ref="'swipeItem_' + index">
<view class="checkbox" v-if="editingGroup === groupIndex">
<uni-icons @click="handleDelete(item)" type="minus" size="20" color="#FF4D4F"></uni-icons>
<uni-icons @click="handleDelete(item)" type="minus" size="20"
color="#FF4D4F"></uni-icons>
</view>
<view class="device-content" @click.stop="handleFile(item)">
<view class="device-header">
@ -63,8 +68,8 @@
<view class="popup-content">
<image src="/static/images/delel.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定停止分享该设备</view>
<view class="popup-Title">
{{ tabs[activeTab].name === '我的分享' ? '确定停止分享该设备' : '确定移除他人分享给你的这台设备' }}
</view>
</view>
<!-- 按钮组 -->
@ -178,7 +183,7 @@
icon: 'none'
})
}
})
//
},
@ -462,7 +467,7 @@
}
.agreement-popupC {
width: 60%;
width: 65%;
background-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;

50
pages/6170/deviceControl/index.vue
View File

@ -83,7 +83,6 @@
<image src="/static/images/jg.png" class="setIMG"></image>
<view>
<view class="battery-v2">激光模式</view>
<!--<view class="mode-v3">{{currentSecondaryMode}}</view> -->
</view>
</view>
</view>
@ -103,7 +102,6 @@
<view class="form-section" v-if="hasPermission('4')">
<view class="mode-buttons">
<view class="section-title">人员信息登记</view>
<!-- <button class="send-btn">发送</button> -->
<view class="right-icons">
<uni-icons @click="toggleForm" :type="isFormExpanded ? 'arrowup' : 'down'" size="20"
color="rgba(255, 255, 255, 0.87" class="toggle-icon" />
@ -161,7 +159,7 @@
</view>
<!-- 弹框 -->
<view class="agreement-mask" v-if="lightModeA">
<!-- 协议弹窗 -->
<!-- 灯光模式弹窗 -->
<view class="agreement-popup" @click.stop>
<!-- 标题 -->
<view class="popup-title"> {{ popupTitle }}</view>
@ -218,6 +216,10 @@
</view>
</view>
</view>
<!-- 人员信息成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :message="popupMessage"
icon="/static/images/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" />
</view>
</view>
</template>
@ -245,7 +247,6 @@
sliderValue: 50,
lightModeA: false,
currentMainMode: '强光模式',
currentSecondaryMode: '泛光模式',
lightModeB: false,
lightModeC: false, //激光提示框
items: [],
@ -270,7 +271,12 @@
},
activePermissions: [], // 存储当前设备的权限数组
isSharedDevice: false, // 标记是否来自分享
isRightIconVisible: false
isRightIconVisible: false,
showPopupFlag: false, //是否显示弹框
popupMessage: '！',
popupConfirmText: '确认',
showUploadPopup:false
}
},
computed: {
@ -321,16 +327,18 @@
onItemClick(index) {
const selectedItem = this.items[index];
if (selectedItem.text === '激光') {
this.lightModeC = true
this.selectedItemIndex = index; // 记录当前选择的索引
this.lightModeC = true;
} else {
// 更新选中状态
this.items = this.items.map((item, i) => ({
...item,
selected: i === index
}));
// 记录当前选中的 index，但不发送
this.currentMainMode = selectedItem.text;
this.selectedItemIndex = index;
console.log(selectedItem.text, 'selectedItem.text');
// 强制更新视图（如果需要）
this.$forceUpdate();
}
},
// 灯光模式的确认
@ -338,6 +346,9 @@
if (this.selectedItemIndex === null) return;
const selectedItem = this.items[this.selectedItemIndex];
const instruction = this.modeInstructions[selectedItem.text];
console.log(selectedItem, 'selectedItemselectedItem');
this.selectedItemIndex = selectedItem.text;
if (instruction) {
const topic = `B/${this.itemInfo.deviceImei}`;
const message = JSON.stringify(instruction);
@ -456,10 +467,8 @@
registerPersonInfo(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
});
this.showPopupFlag = true
this.popupMessage = '人员信息发送成功'
} else {
uni.showToast({
title: res.msg,
@ -468,6 +477,10 @@
}
})
},
onPopupConfirm() {
this.showPopupFlag = false
console.log('用户点击了确定')
},
// 发送文本消息
sendTextMessage() {
if (!this.messageToSend) {
@ -488,10 +501,8 @@
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
});
this.showPopupFlag = true
this.popupMessage = '发送信息成功'
} else {
uni.showToast({
title: res.msg,
@ -529,7 +540,7 @@
}
this.messageToSend = res.data.sendMsg || ''
// 关闭加载中
uni.hideLoading()
uni.hideLoading()
}
},
// 检查权限的方法
@ -627,6 +638,7 @@
align-items: center;
z-index: 9999;
}
/* 优化权限控制区域的显示 */
.mode-section,
.form-section {
@ -972,7 +984,7 @@
/* 弹窗主体 */
.agreement-popup {
width: 100%;
height: 50%;
height: 40%;
background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx;

19
pages/common/allType/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="alltype">
<!-- 车辆列表 -->
<view class="vehicle-list">
<view class="vehicle-list" v-if="vehicles.length>0">
<view v-for="(item, index) in vehicles" :key="index">
<view class="vehicle-item" @click="alltypeInfo(item)">
<image src="/static/images/bip.6.png" mode="" class="IMG"></image>
@ -9,6 +9,11 @@
<view class="plate-number">{{ item.typeName }}</view>
</view>
</view>
<view v-else class="noDATA" style="display: block;width: wight:100%">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
</view>
暂无数据
</view>
</view>
</template>
@ -30,17 +35,17 @@
}
})
},
alltypeInfo(item){
alltypeInfo(item) {
uni.switchTab({
url: '/pages/common/index/index',
success: (res) => {
res.eventChannel.emit('index', {
res.eventChannel.emit('index', {
data: item
});
}
})
}
},
onLoad() {
this.getTab()
@ -92,4 +97,10 @@
.plate-number {
color: rgba(255, 255, 255, 0.87);
}
.noDATA {
text-align: center;
color: rgba(255, 255, 255, 0.87);
transform: translate(-0%, 100%);
}
</style>

1
pages/common/index/index.vue
View File

@ -21,7 +21,6 @@
<view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend">发送信息</view>
</view>
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
style="height:80vh;">
<view v-if="deviceList.length>0">

42
pages/common/login/index.vue
View File

@ -91,25 +91,33 @@
return false;
}
try {
await resourceSmsCode({
const res = 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)
this.isCounting = false;
this.showView = false;
}
}, 1000)
uni.showToast({
title: '验证码已发送',
icon: 'none'
})
if (res.code == 200) {
// 更新倒计时状态
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'
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
} catch (error) {}
},
// 勾选同意

136
pages/common/send/index.vue
View File

@ -31,7 +31,7 @@
</view>
</view>
</view>
<view style="padding:20rpx;">
<view class="editInfmation">
<view class="ql-editor">编辑信息</view>
<view class="ql-input">
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
@ -39,28 +39,15 @@
</view>
<button class="login-btn" @click="sendTextMessage">发送</button>
</view>
</scroll-view>
<!-- 成功提示弹框 -->
<view class="agreement-mask" v-if="personalShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<image src="/static/images/sendSucc.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">信息发送成功</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="btn agreeBtn" @click="handleBtn">确定</button>
</view>
</view>
</view>
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/sendSucc.png"
:confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
</view>
</template>
<script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import {
deviceInfo,
} from '@/api/common/index.js'
@ -68,11 +55,17 @@
deviceSendMessage
} from '@/api/6170/deviceControl.js'
export default {
components: {
CustomPopup
},
data() {
return {
deviceList: [],
messageToSend: '', //发送信息
personalShow: false
showPopupFlag: false,
popupTitle: '',
popupMessage: '信息发送成功！',
popupConfirmText: '确认'
}
},
methods: {
@ -106,6 +99,13 @@
sendTextMessage() {
const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id);
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个设备',
icon: 'none'
});
return;
}
if (!this.messageToSend) {
uni.showToast({
title: '请输入要发送的内容',
@ -119,7 +119,7 @@
}
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
this.personalShow = true
this.showPopupFlag = true
} else {
uni.showToast({
title: res.msg,
@ -128,10 +128,12 @@
}
})
},
handleBtn(){
this.personalShow = false
uni.navigateBack()
}
onPopupConfirm() {
this.showPopupFlag = false
uni.navigateBack()
console.log('用户点击了确定')
// 处理确认逻辑
},
},
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
@ -148,26 +150,17 @@
<style scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgb(18, 18, 18);
}
box-sizing: border-box;
overflow-x: hidden;
.header {
padding: 30rpx;
text-align: center;
}
.title {
font-size: 36rpx;
color: rgba(255, 255, 255, 0.87);
}
.device-list {
flex: 1;
padding: 0 20rpx;
margin-top: 20rpx;
}
.device-card {
@ -330,6 +323,19 @@
.textarea {
color: rgba(255, 255, 255, 0.8);
background: rgba(42, 42, 42, 1);
border-radius: 16rpx;
padding: 10rpx;
height: 150rpx;
}
.editInfmation {
padding: 20rpx;
border-radius: 40rpx 40rpx 0px 0px;
background: rgba(28, 28, 28, 1);
position: fixed;
bottom: 50rpx;
box-sizing: border-box;
}
.login-btn {
@ -338,65 +344,5 @@
color: rgb(35, 35, 35);
border-radius: 50rpx;
width: 90%;
margin-left: 10rpx;
}
/* 遮罩层 */
.agreement-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
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%;
background-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;
text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3);
}
.svg {
width: 58rpx;
height: 62rpx;
}
/* 通用按钮样式 */
.btn {
height: 60rpx;
line-height: 60rpx;
border-radius: 40rpx;
font-size: 24rpx;
margin: 10rpx auto;
text-align: center;
}
/* 同意按钮 */
.agreeBtn {
background: rgba(187, 230, 0, 1);
color: #232323;
border: none;
width: 170rpx !important;
}
</style>