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

182
components/CustomPopup/CustomPopup.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<view class="agreement-mask" v-if="show" @click="closePopup">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<!-- 动态图标 -->
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg"></image>
<view class="text-content">
<!-- 动态标题 -->
<view class="popup-Title" v-if="title">{{ title }}</view>
<!-- 动态消息内容 -->
<view class="popup-Message" v-if="message">{{ message }}</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel">{{ cancelText }}</button>
<button class="btn agreeBtn" @click="handleConfirm">{{ confirmText }}</button>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 控制显示
show: {
type: Boolean,
default: false
},
// 标题内容（可选）
title: {
type: String,
default: ''
},
// 消息内容
message: {
type: String,
default: ''
},
// 确认按钮文本
confirmText: {
type: String,
default: '确定'
},
// 取消按钮文本
cancelText: {
type: String,
default: '取消'
},
// 是否显示取消按钮
showCancel: {
type: Boolean,
default: false
},
// 是否显示图标
showIcon: {
type: Boolean,
default: true
},
// 图标路径（支持网络和本地路径）
icon: {
type: String,
default: ''
},
// 图标样式
iconStyle: {
type: Object,
default: () => ({
width: '58rpx',
height: '62rpx',
marginBottom: '20rpx'
})
}
},
methods: {
handleConfirm() {
this.$emit('confirm')
this.$emit('update:show', false)
},
handleCancel() {
this.$emit('cancel')
this.$emit('update:show', false)
},
closePopup() {
this.$emit('close')
this.$emit('update:show', false)
}
}
}
</script>
<style scoped>
/* 遮罩层 */
.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;
}
/* 弹窗主体 */
.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);
}
.popup-content {
display: flex;
flex-direction: column;
align-items: center;
}
.text-content {
width: 100%;
}
.popup-Title {
color: rgba(255, 255, 255, 0.86);
text-align: center;
padding: 30rpx 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
.popup-Message {
color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 10rpx 20rpx 30rpx;
font-size: 28rpx;
line-height: 1.5;
}
/* 图标样式 */
.svg {
width: 72rpx;
height: 60rpx;
margin-bottom: v-bind('iconStyle.marginBottom');
}
/* 按钮组 */
.popup-buttons {
display: flex;
justify-content: center;
margin-top: 20rpx;
}
/* 按钮基础样式 */
.btn {
height: 60rpx;
line-height: 60rpx;
border-radius: 40rpx;
font-size: 24rpx;
margin: 0 10rpx;
padding: 0 30rpx;
min-width: 170rpx;
}
/* 确认按钮 */
.agreeBtn {
background: rgba(187, 230, 0, 1);
color: #232323;
border: none;
}
/* 取消按钮 */
.cancelBtn {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>

2
config/index.js
View File

@ -12,7 +12,7 @@ const config = {
}, },
// 生产环境 // 生产环境
production: { production: {
BASE_URL: 'https://fuyuanshen.com/backend', BASE_URL: 'http://47.120.79.150/backend', // https://fuyuanshen.com/backend
API_PREFIX: '', API_PREFIX: '',
// MQTT 配置 // MQTT 配置
MQTT_HOST: '47.120.79.150', MQTT_HOST: '47.120.79.150',

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

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

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

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

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

@ -1,7 +1,7 @@
<template> <template>
<view class="alltype"> <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 v-for="(item, index) in vehicles" :key="index">
<view class="vehicle-item" @click="alltypeInfo(item)"> <view class="vehicle-item" @click="alltypeInfo(item)">
<image src="/static/images/bip.6.png" mode="" class="IMG"></image> <image src="/static/images/bip.6.png" mode="" class="IMG"></image>
@ -9,6 +9,11 @@
<view class="plate-number">{{ item.typeName }}</view> <view class="plate-number">{{ item.typeName }}</view>
</view> </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> </view>
</template> </template>
@ -30,7 +35,7 @@
} }
}) })
}, },
alltypeInfo(item){ alltypeInfo(item) {
uni.switchTab({ uni.switchTab({
url: '/pages/common/index/index', url: '/pages/common/index/index',
success: (res) => { success: (res) => {
@ -92,4 +97,10 @@
.plate-number { .plate-number {
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
} }
.noDATA {
text-align: center;
color: rgba(255, 255, 255, 0.87);
transform: translate(-0%, 100%);
}
</style> </style>

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

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

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

@ -91,9 +91,10 @@
return false; return false;
} }
try { try {
await resourceSmsCode({ const res = await resourceSmsCode({
phonenumber: this.phone phonenumber: this.phone
}) })
if (res.code == 200) {
// 更新倒计时状态 // 更新倒计时状态
this.isCounting = true; this.isCounting = true;
this.showView = true; this.showView = true;
@ -110,6 +111,13 @@
title: '验证码已发送', title: '验证码已发送',
icon: 'none' icon: 'none'
}) })
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
} catch (error) {} } catch (error) {}
}, },
// 勾选同意 // 勾选同意

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

@ -31,7 +31,7 @@
</view> </view>
</view> </view>
</view> </view>
<view style="padding:20rpx;"> <view class="editInfmation">
<view class="ql-editor">编辑信息</view> <view class="ql-editor">编辑信息</view>
<view class="ql-input"> <view class="ql-input">
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea" <textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
@ -39,28 +39,15 @@
</view> </view>
<button class="login-btn" @click="sendTextMessage">发送</button> <button class="login-btn" @click="sendTextMessage">发送</button>
</view> </view>
</scroll-view> </scroll-view>
<!-- 成功提示弹框 --> <!-- 成功提示弹框 -->
<view class="agreement-mask" v-if="personalShow" @click="closePopup('delete')"> <CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/sendSucc.png"
<view class="agreement-popup" @click.stop> :confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
<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>
</view> </view>
</template> </template>
<script> <script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import { import {
deviceInfo, deviceInfo,
} from '@/api/common/index.js' } from '@/api/common/index.js'
@ -68,11 +55,17 @@
deviceSendMessage deviceSendMessage
} from '@/api/6170/deviceControl.js' } from '@/api/6170/deviceControl.js'
export default { export default {
components: {
CustomPopup
},
data() { data() {
return { return {
deviceList: [], deviceList: [],
messageToSend: '', //发送信息 messageToSend: '', //发送信息
personalShow: false showPopupFlag: false,
popupTitle: '',
popupMessage: '信息发送成功！',
popupConfirmText: '确认'
} }
}, },
methods: { methods: {
@ -106,6 +99,13 @@
sendTextMessage() { sendTextMessage() {
const selectedDevices = this.deviceList.filter(item => item.checked) const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id); const deviceIds = selectedDevices.map(item => item.id);
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个设备',
icon: 'none'
});
return;
}
if (!this.messageToSend) { if (!this.messageToSend) {
uni.showToast({ uni.showToast({
title: '请输入要发送的内容', title: '请输入要发送的内容',
@ -119,7 +119,7 @@
} }
deviceSendMessage(data).then((res) => { deviceSendMessage(data).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.personalShow = true this.showPopupFlag = true
} else { } else {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
@ -128,10 +128,12 @@
} }
}) })
}, },
handleBtn(){ onPopupConfirm() {
this.personalShow = false this.showPopupFlag = false
uni.navigateBack() uni.navigateBack()
} console.log('用户点击了确定')
// 处理确认逻辑
},
}, },
onLoad(options) { onLoad(options) {
const eventChannel = this.getOpenerEventChannel(); const eventChannel = this.getOpenerEventChannel();
@ -148,26 +150,17 @@
<style scoped> <style scoped>
.container { .container {
display: flex;
flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: rgb(18, 18, 18); 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 { .device-list {
flex: 1; flex: 1;
padding: 0 20rpx; padding: 0 20rpx;
margin-top: 20rpx;
} }
.device-card { .device-card {
@ -330,6 +323,19 @@
.textarea { .textarea {
color: rgba(255, 255, 255, 0.8); 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 { .login-btn {
@ -338,65 +344,5 @@
color: rgb(35, 35, 35); color: rgb(35, 35, 35);
border-radius: 50rpx; border-radius: 50rpx;
width: 90%; 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> </style>

2
utils/request.js
View File

@ -1,5 +1,5 @@
import config from '../config/index.js'; import config from '../config/index.js';
const env = 'development';//production //开发of线上 改这里就行 const env = 'development'; //production development //开发of线上 改这里就行
const BASE = config[env]; const BASE = config[env];
const request = (options) => { const request = (options) => {
console.log("options"+JSON.stringify(options),BASE.BASE_URL) console.log("options"+JSON.stringify(options),BASE.BASE_URL)