封装提示弹框

2025-07-24 10:05:17 +08:00
parent c0a9c0b3f2
commit 51ab4d0bfa
9 changed files with 307 additions and 144 deletions
--- a/components/CustomPopup/CustomPopup.vue
+++ b/components/CustomPopup/CustomPopup.vue
@ -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>
--- a/config/index.js
+++ b/config/index.js
@ -12,7 +12,7 @@ const config = {
 	},
 	// 生产环境
 	production: {
-		BASE_URL: 'https://fuyuanshen.com/backend',
+		BASE_URL: 'http://47.120.79.150/backend', // https://fuyuanshen.com/backend
 		API_PREFIX: '',
 		// MQTT 配置
 		MQTT_HOST: '47.120.79.150',
--- a/pages/6170/allShare/index.vue
+++ b/pages/6170/allShare/index.vue
@ -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;
--- a/pages/6170/deviceControl/index.vue
+++ b/pages/6170/deviceControl/index.vue
@ -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;
--- a/pages/common/allType/index.vue
+++ b/pages/common/allType/index.vue
@ -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>
--- a/pages/common/index/index.vue
+++ b/pages/common/index/index.vue
@ -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">
--- a/pages/common/login/index.vue
+++ b/pages/common/login/index.vue
@ -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) {}
 			},
 			// 勾选同意
--- a/pages/common/send/index.vue
+++ b/pages/common/send/index.vue
@ -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>
--- a/utils/request.js
+++ b/utils/request.js
@ -1,5 +1,5 @@
 import config from '../config/index.js';
-const env = 'development';//production  //开发of线上 改这里就行
+const env = 'development'; //production development  //开发of线上 改这里就行
 const BASE = config[env];
 const request = (options) => {
 	console.log("options"+JSON.stringify(options),BASE.BASE_URL)