Merge branch 'gyq_test' of http://git.bms16.com/liuwei/zx_flk_app into gyq_test

components/toggle-switch/toggle-switch.vue

@@ -0,0 +1,185 @@
+<template>
+	<view class="switch-container" :style="containerStyle" @click="handleClick">
+		<!-- 状态文字 -->
+		<text class="status-text" :style="[statusTextStyle, leftTextStyle]">{{ activeText }}</text>
+		<text class="status-text" :style="[statusTextStyle, rightTextStyle]">{{ inactiveText }}</text>
+		<!-- 图片滑块 -->
+		<image class="switch-thumb" :src="currentThumb" :style="thumbStyle" @touchstart="onTouchStart"
+			@touchmove="onTouchMove" @touchend="onTouchEnd" />
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: Boolean,
+			containerWidth: {
+				type: Number,
+				default: 120
+			},
+			thumbSize: {
+				type: Number,
+				default: 32
+			},
+			// 新增图片相关props
+			activeThumb: {
+				type: String,
+				default: '' // 建议使用绝对路径
+			},
+			inactiveThumb: {
+				type: String,
+				default: ''
+			},
+			// 状态文字配置
+			activeText: {
+				type: String,
+				default: 'ON'
+			},
+			inactiveText: {
+				type: String,
+				default: 'OFF'
+			},
+			activeColor: {
+				type: String,
+				default: 'ffffff'
+			},
+			inactiveColor: {
+				type: String,
+				default: 'ffffff'
+			},
+			textColor: {
+				type: String,
+				default: '#000000'
+			}
+		},
+		data() {
+			return {
+				isDragging: false,
+				startX: 0,
+				currentX: 0,
+				maxOffset: 0
+			};
+		},
+		computed: {
+			currentThumb() {
+				// return this.value ? this.activeThumb : this.inactiveThumb;
+				return 'https://qiniu.bms16.com/Fkovrpq1bexe-Unal_VJREbLUhdu';
+			},
+			containerStyle() {
+				return {
+					width: this.containerWidth + 'px',
+					backgroundColor: this.value ? this.activeColor : this.inactiveColor,
+					height: this.thumbSize + 8 + 'px',
+					borderRadius: (this.thumbSize + 8) / 2 + 'px'
+				}
+			},
+			thumbStyle() {
+				const baseStyle = {
+					width: this.thumbSize + 'px',
+					height: this.thumbSize + 'px',
+					borderRadius: this.thumbSize / 2 + 'px'
+				};
+
+				if (this.isDragging) {
+					return {
+						...baseStyle,
+						transform: `translateX(${this.currentX}px)`,
+						transition: 'none'
+					};
+				}
+
+				return {
+					...baseStyle,
+					transform: `translateX(${this.value ? this.maxOffset : 0}px)`,
+					transition: 'transform 0.3s cubic-bezier(0.3, 1, 0.3, 1)'
+				};
+			},
+			statusTextStyle() {
+				return {
+					color: this.textColor,
+					fontSize: this.thumbSize * 0.5 + 'px',
+					opacity: this.isDragging ? 0.6 : 1
+				}
+			},
+			leftTextStyle() {
+				return {
+					right: (this.thumbSize + 20) + 'px',
+					opacity: this.value ? 1 : 0
+				}
+			},
+			rightTextStyle() {
+				return {
+					left: (this.thumbSize + 20) + 'px',
+					opacity: this.value ? 0 : 1
+				}
+			}
+		},
+		mounted() {
+			//计算滑块（thumb）在滑动轨道（container）上的最大偏移量。
+			this.maxOffset = this.containerWidth - this.thumbSize - 4;
+		},
+		methods: {
+			handleClick() {
+				//点击立即切换状态
+				if (!this.isDragging) {
+					this.toggleState();
+				}
+			},
+			onTouchStart(e) {
+				this.isDragging = true;
+				this.startX = e.touches[0].pageX;
+				this.currentX = this.value ? this.maxOffset : 0;
+			},
+			onTouchMove(e) {
+				if (!this.isDragging) return;
+				const deltaX = e.touches[0].pageX - this.startX;
+				let newX = this.value ? this.maxOffset + deltaX : deltaX;
+
+				// 限制滑动范围
+				newX = Math.max(0, Math.min(newX, this.maxOffset));
+				this.currentX = newX;
+			},
+			toggleState() {
+				this.$emit('input', !this.value);
+				this.$emit('change', !this.value);
+			},
+			onTouchEnd() {
+				this.isDragging = false;
+				// 判断滑动是否超过50%
+				const threshold = this.containerWidth * 0.5;
+				const newState = this.currentX > threshold - this.thumbSize / 2;
+				if (newState !== this.value) {
+					this.toggleState();
+				} else {
+					this.currentX = this.value ? this.maxOffset : 0;
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.switch-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		transition: background-color 0.3s;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+	}
+
+	.switch-thumb {
+		position: absolute;
+		top: 4px;
+		left: 4px;
+		z-index: 2;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+	}
+
+	.status-text {
+		position: absolute;
+		z-index: 1;
+		font-weight: bold;
+		transition: opacity 0.3s;
+		pointer-events: none;
+	}
+</style>

pages.json

@@ -71,17 +71,6 @@
 			"style": {
 			}
 		},
-		{
-			"path": "pages/message/deviceInfo",
-			"style": {
-				
-			}
-		},{
-			"path": "pages/message/systemInfo",
-			"style": {
-				"navigationBarTitleText": "系统详情"
-			}
-		},
 		{
 			"path": "pages/bluetoothUnlock/bluetoothPair",
 			"style": {

pages/message/detail.vue

@@ -3,10 +3,7 @@
 		<navBar name="信息详情"></navBar>
 		<view class="title">{{info.title}}</view>
 		<view >{{info.overview}}</view>
-		<image v-if="info.cover" :src="info.cover" class="img" mode="scaleToFill" />
-		
-		
-		
+		<image v-if="info.cover" :src="info.cover" class="img" mode="aspectFill" />
 		<rich-text :nodes="info.content"></rich-text>
 	</view>
 </template>
@@ -33,7 +30,8 @@
 				http.postApi(config.API_MESSAGE_DTL, req, res => {
 					if (res.succeed) {
 						this.info = res.data.data
-						console.log(this.info)
+						// 正则匹配所有<img>标签并插入自适应属性
+						this.info.content  = (this.info.content || '') .replace(/<img/g, '<img style="max-width: 100%; height: auto;"');
 					}
 				})
 
@@ -46,6 +44,7 @@
 	.container{
 		display: flex;
 		flex-direction: column;
+		padding: 20rpx;
 		
 		.title{
 			font-size: 36rpx;

pages/message/deviceInfo.vue

@@ -1,120 +0,0 @@
-<template>
-    <view class="zx-container deviceInfo-container">
-        <!-- <map style="width: 100%; height: 500px;" :latitude="latitude"
-			:longitude="longitude" :markers="markers" show-location>
-		</map> -->
-        <view v-for="(item, index) in msgList" :key="index" class="list-item">
-            <view class="time">{{ item.ctime }}</view>
-            <view class="msg-wrap">
-                <view v-if="item.latitude" class="map">
-					<!-- #ifdef APP -->
-					<googleMap :keyId="index" width="100%" height='100%'   :mapData='{type:1}' :myLocation='{
-					latitude:item.latitude,	
-					longitude:item.longitude,	
-					}'  ></googleMap>
-					<!-- #endif -->
-				</view>
-                <view class="msg-text">
-                    <view class="title">{{ item.title }}</view>
-                    <view class="dtl-txt">{{ item.overview }}</view>
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-const config = require('@/common/config.js');
-const http = require('@/common/http.js');
-var common = require('../../common/common.js');
-import googleMap from "@/component/googleMap/googleMap";
-export default {
-	components:{
-		googleMap
-	},
-    data() {
-        return {
-            // latitude: 23.090994,
-			// longitude: 113.314004,
-            // markers: [{
-            //     id: 1345,
-            //     latitude: 23.090994,
-            //     longitude: 113.314004,
-            //     iconPath: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
-            //     width: 30,
-            //     height: 30,
-            //     customCallout: {
-            //         anchorY: -45, // Y轴偏移量
-            //         anchorX: -100, // X轴偏移量
-            //         display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
-            //     },
-            // }], // 标记点
-            msgList: [
-                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
-                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
-                // { time: '今天 13:14', title: '车辆推动报警', overview: '车辆正在被人推送，请及时查看' },
-            ]
-        }
-    },
-    onLoad(option) {
-        this.queryList(option.car_id)
-    },
-    methods: {
-        queryList(car_id) {
-            http.postApi(config.API_MESSAGE_LIST, { car_id, msg_type: 'DEVICE' }, res => {
-                if (res.succeed) {
-                    this.msgList = res.body.data.list
-                    this.msgList.map(item => {
-                        item.ctime = common.formatTime(item.ctime)
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/libs/css/layout.scss";
-.deviceInfo-container {
-    padding: 24rpx 24rpx 150rpx;
-    .list-item {
-        width: 100%;
-        .time {
-            font-family: Roboto, Roboto;
-            font-weight: 400;
-            font-size: 28rpx;
-            color: #060809;
-            text-align: center;
-            margin: 40rpx 24rpx;
-        }
-        .msg-wrap {
-            width: 100%;
-            background: #FFFFFF;
-            border-radius: 40rpx;
-            padding: 8rpx;
-            .map {
-                width: 100%;
-                height: 384rpx;
-                background: url('https://qiniu.bms16.com/FufXj_x1qGs3iy7itHZ9oJ3FqG_Q');
-                background-size: 100%;
-            }
-            .msg-text {
-                padding: 32rpx 24rpx 40rpx;
-                .title {
-                    font-family: PingFangSC, PingFang SC;
-                    font-weight: bold;
-                    font-size: 36rpx;
-                    color: #060809;
-                    margin-bottom: 16rpx;
-                }
-                .dtl-tet {
-                    font-family: PingFangSC, PingFang SC;
-                    font-size: 24rpx;
-                    color: #060809;
-                }
-            }
-        }
-    }
-}
-</style>

pages/message/index.vue

@@ -24,84 +24,112 @@
 			style="display: flex;align-items: center;justify-content: center;height: 80vh;">
 			您还没有设备消息
 		</view>
-        
-        <view v-if="isSys==='1' && sysMsgList.length > 0 " style="margin-top: 20rpx;" class="sys-msg-wrap base-wrap" >
-            <view class="title">{{ $t('系统消息') }}</view>
-			
-            <view class="msg-item" v-for="(item, index) in sysMsgList" :key="index" @tap="toSystemMsgPage(item)">
-                <view class="msg">
-                    {{ item.title }}
-                    <view v-if="item.type === 1" class="btn">绑定设备</view>
-                </view>
-                <view class="time">{{ item.ctime }}</view>
-                <view class="dtl">{{ item.overview }}</view>
-            </view>
-        </view>
-		
-		<view v-if="isSys==='1' && sysMsgList.length === 0 " style="display: flex;align-items: center;justify-content: center;height: 80vh;">
+
+		<view v-if="isSys==='1' && sysMsgList.length > 0 " style="margin-top: 20rpx;" class="sys-msg-wrap base-wrap">
+
+			<view class="row">
+				<view class="title" style="display: flex;">
+					<view>{{ $t('系统消息') }}</view>
+					<view v-if="unreadCount > 0" class="bage">{{ unreadCount }}</view>
+				</view>
+			</view>
+			<view @click="gotoDetail(item)" class="msg-item" v-for="(item, index) in sysMsgList" :key="index">
+				<view class="msg">
+					<view class="flex">
+						<view v-if="item.read === '0'" class="dot"></view>
+						{{ item.title }}
+					</view>
+					<view v-if="item.type === 1" class="btn">绑定设备</view>
+				</view>
+				<view class="time">{{ item.ctime }}</view>
+				<view class="dtl">{{ item.overview }}</view>
+			</view>
+		</view>
+
+		<view v-if="isSys==='1' && sysMsgList.length === 0 "
+			style="display: flex;align-items: center;justify-content: center;height: 80vh;">
 			您还没有系统消息
 		</view>
 	</view>
 </template>
 
 <script>
-const config = require('@/common/config.js');
-const http = require('@/common/http.js');
-const request = require('@/common/request.js');
-const common = require('@/common/common.js');
-export default {
-    data() {
-        return {
-            value: 10,
-            sysMsgList: [],
-            deviceList: [],
-            deviceInfo: {},
-			isSys:'1'
-        }
-    },
-	onLoad(options){
-		this.isSys = options.isSys || '0'
-	},
-    created() {
-        this.querySysMsgList()
-        this.queryDeviceMsg()
-		this.readMessage()
-    },
-    methods: {
-		async readMessage(){
-			await request.postApi(config.API_MESSAGE_READ_MESSAGE,{msg_type:2,car_id:0})
+	const config = require('@/common/config.js');
+	const http = require('@/common/http.js');
+	const request = require('@/common/request.js');
+	const common = require('@/common/common.js');
+	export default {
+		data() {
+			return {
+				value: 10,
+				sysMsgList: [],
+				deviceList: [],
+				deviceInfo: {},
+				isSys: '1',
+				unreadCount: 0
+			}
+		},
+		onLoad(options) {
+			this.isSys = options.isSys
+		},
+		created() {
+			this.querySysMsgList()
+			this.queryDeviceMsg()
+			// this.readMessage()
 		},
-        toDeviceMsgPage(itemData) {
-            const { id } = itemData
-            uni.navigateTo({ url: `/pages/message/deviceInfo?car_id=${car_id}` })
-        }, 
-		toSystemMsgPage(itemData) {
-            const { id } = itemData
-            uni.navigateTo({ url: `/pages/message/systemInfo?id=${id}` })
-        },
-        queryDeviceMsg() {
-            http.postApi(config.API_DEVICE_MSG, {}, res => {
-                if (res.succeed) {
-                    this.deviceList = res.body.data
-                    this.deviceList.map(item => {
-                        item.message_date = common.formatTime(item.message_date)
-						item.image = item.image.split(',')[0]
-                    })
-                }
-            })
-        },
-        querySysMsgList() {
-            http.postApi(config.API_MESSAGE_LIST, { msg_type: 'PLAT' }, res => {
-                if (res.succeed) {
-                    this.sysMsgList= res.body.data.list
-                    this.sysMsgList.map(item => {
-                        item.ctime = common.formatTime(item.ctime)
-                    })
-                }
-            })
-        }
-    }
-}
+		methods: {
+			async readMessage() {
+				await request.postApi(config.API_MESSAGE_READ_MESSAGE, {
+					msg_type: 2,
+					car_id: 0
+				})
+			},
+			gotoDetail(item) {
+				request.postApi(config.API_MESSAGE_READ_MESSAGE, {
+					msg_type: 2,
+					msg_id: item.plat_msg_id,
+					car_id: ''
+				})
+
+				uni.navigateTo({
+					url: `/pages/message/detail?id=${item.plat_msg_id}`
+				})
+			},
+			toDeviceMsgPage(item) {
+				request.postApi(config.API_MESSAGE_READ_MESSAGE, {
+					msg_type: 1,
+					car_id: item.car_id
+				})
+
+				uni.navigateTo({
+					url: `/pages/message/detail?id=${item.car_id}`
+				})
+			},
+			queryDeviceMsg() {
+				http.postApi(config.API_DEVICE_MSG, {}, res => {
+					if (res.succeed) {
+						this.deviceList = res.body.data
+						this.deviceList.map(item => {
+							item.message_date = common.formatTime(item.message_date)
+						})
+					}
+				})
+			},
+			querySysMsgList() {
+				http.postApi(config.API_MESSAGE_LIST, {
+					msg_type: 'PLAT'
+				}, res => {
+					if (res.succeed) {
+						this.sysMsgList = res.body.data.list
+						this.sysMsgList.map(item => {
+							item.ctime = common.formatTime(item.ctime)
+						})
+						this.unreadCount = this.sysMsgList.filter(item => item.read === "0").length;
+					}
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>

pages/message/systemInfo.vue

@@ -1,67 +0,0 @@
-<template>
-	<view class="">
-		<navBar name="系统消息"/>
-		<view class="info-title">{{systemInfo.title}}</view>
-		<view class="info-time">{{tools.formatTime(systemInfo.ctime)}}</view>
-		<view class="nodes">
-			<rich-text v-if="systemInfo.content" :nodes="systemInfo.content"></rich-text>
-		</view>
-	</view>
-</template>
-<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
-<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
-<script>
-const config = require('@/common/config.js');
-const http = require('@/common/http.js');
-const request = require('@/common/request.js');
-const common = require('@/common/common.js');
-export default {
-    data() {
-        return {
-            systemInfo:{},
-			id:''
-        }
-    },
-	onLoad(options){
-		this.id = options.id || ''
-		this.querySystemMsg()
-	},
-    methods: {
-        querySystemMsg() {
-			const pData={
-				id:this.id,
-				type:'PLAT'
-			}
-            http.postApi(config.API_MESSAGE_DTL, pData, res => {
-                if (res.succeed) {
-                    this.systemInfo = res.body.data
-                }
-            })
-        },
-    }
-}
-</script>
-
-
-<style>
-	.info-title{
-		font-family: PingFangSC, PingFang SC;
-		font-weight: 600;
-		font-size: 36rpx;
-		color: #060809;
-		padding: 20rpx 32rpx;
-	}
-	.info-time{
-		font-family: Futura, Futura;
-		font-weight: 500;
-		font-size: 24rpx;
-		color: #060809;
-		opacity: 0.4;
-		padding: 20rpx 32rpx;
-	}
-	.nodes{
-		color: #333;
-		font-size: 28rpx;
-		padding: 34rpx 32rpx 32rpx;
-	}
-</style>