20241218

App.vue

@@ -1,9 +1,17 @@
 <script>
 import md5Libs from '@/uni_modules/uview-ui/libs/function/md5';
 import Vue from 'vue';
-
+let that;
 export default {
+	data() {
+		return {
+			timeout: 30000, // 30s
+			timeoutObj: null
+		};
+	},
 	created() {
+		// .判断是否已连接
+		this.checkOpenSocket();
 		// #ifdef APP-PLUS
 		plus.navigator.closeSplashscreen();
 		// #endif
@@ -53,7 +61,106 @@ export default {
 		console.log('App 关闭');
 	},
 	onLoad: function () {
+		that = this;
 		uni.hideTabBar();
+	},
+	methods: {
+		// 判断是否已连接
+		checkOpenSocket() {
+			uni.sendSocketMessage({
+				data: 'ping',
+				success: (res) => {
+					return;
+				},
+				fail: (err) => {
+					// 未连接打开websocket连接
+					this.openConnection();
+				}
+			});
+		},
+		openConnection() {
+			// 打开连接
+			// uni.closeSocket(); // 确保已经关闭后再重新打开
+			uni.connectSocket({
+				url: 'ws://192.168.10.80:8002',
+				success(res) {
+					console.log('连接成功 connectSocket=', res);
+				},
+				fail(err) {
+					console.log('连接失败 connectSocket=', err);
+				}
+			});
+			uni.onSocketOpen((res) => {
+				console.log('连接成功');
+				this.send();
+			});
+			this.onSocketMessage(); // 打开成功监听服务器返回的消息
+		},
+		send() {
+			uni.sendSocketMessage({
+				data: '{"command":"getshowpage"}',
+				success: (res) => {
+					console.log(res);
+					console.log('发送成功....');
+				},
+				fail: (err) => {
+					console.log(res);
+					console.log('连接失败重新连接....');
+					this.openConnection();
+				}
+			});
+		},
+		onSocketMessage() {
+			// 消息
+			this.timeout = 30000;
+			this.timeoutObj = null;
+			uni.onSocketMessage((res) => {
+				console.log(res);
+				this.getSocketMsg(res.data); // 监听到有新服务器消息
+			});
+		},
+		// 监听到有新服务器消息
+		getSocketMsg(reData) {
+			// 监听到服务器消息
+			console.log('收到服务器消息', reData);
+			if (reData == 'pong') {
+				return;
+			}
+			let data = JSON.parse(reData);
+			if (data.command == 'updatepage') {
+				if (data.id == 0) {
+					uni.navigateTo({
+						url: '/pages/index/startPage'
+					});
+				}
+				if (data.id == 1) {
+					uni.navigateTo({
+						url: '/pages/index/index'
+					});
+				}
+			}
+			this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
+		},
+		// 检测心跳reset
+		reset() {
+			clearInterval(this.timeoutObj);
+			this.start(); // 启动心跳
+		},
+		// 启动心跳 start
+		start() {
+			this.timeoutObj = setInterval(function () {
+				uni.sendSocketMessage({
+					data: 'ping',
+					success: (res) => {
+						console.log('连接中....');
+					},
+					fail: (err) => {
+						console.log('连接失败重新连接....');
+						that.openConnection();
+					}
+				});
+			}, this.timeout);
+		}
 	}
 };
 </script>

components/LeftNav/LeftNav.vue

@@ -51,16 +51,16 @@ export default {
 					img: '/static/img/img_非遗政策@2x.png',
 					path: '/pages/index/feiYiZhengCe/feiYiZhengCe'
 				},
-				{
-					name: '回到首页',
-					img: '/static/img/icon_back@2x.png',
-					path: '/pages/index/index'
-				},
 
 				{
 					name: '回到探索页',
-					img: '/static/img/icon_back@2x.png',
+					img: '/static/img/img_avatar@2x(1).png',
 					path: '/pages/index/startPage'
+				},
+				{
+					name: '回到首页',
+					img: '/static/img/icon_back@2x.png',
+					path: '/pages/index/index'
 				}
 			]
 		};
@@ -85,22 +85,28 @@ export default {
 	background-color: #f8efe1;
 }
 .box2 {
+	margin-top: -100rpx;
+	margin-left: -80rpx;
 }
+
 .banner {
+	width: 800rpx;
+	height: 160rpx;
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-	margin-bottom: 80rpx;
+	margin-bottom: 50rpx;
+	/* background-color: aqua; */
 }
 .nav_tit {
 	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
-	font-size: 40rpx;
+	font-size: 42rpx;
 	letter-spacing: 0.2em;
 	font-weight: NaN;
 	text-align: left;
 	white-space: nowrap;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
-	margin-left: 20rpx;
+	margin-left: 50rpx;
 }
 </style>

config/config.js

@@ -1,9 +1,9 @@
 // // 前端路径
-export const baseUrl = 'https://feicheng.16fw.cn:1443/'
+export const baseUrl = 'https://huli-app.wenlvti.net/'
 // api调用目录
-export const baseApiUrl = 'https://feicheng.16fw.cn:1443/api/'
+export const baseApiUrl = 'https://huli-app.wenlvti.net/api/'
 // cnd域名。没有就填写后端域名
-export const cndUrl = 'https://feicheng.16fw.cn:1443/'
+export const cndUrl = 'https://huli-app.wenlvti.net/'
 
 
 // // // 前端路径

pages/index/feiYiBaiKe/feiYiBaiKe.vue

@@ -8,7 +8,7 @@
 		</view>
 		<view class="" style="position: relative">
 			<view class="fybk_zc">
-				<view class="fybk_tit">
+				<view class="fybk_tit" @click="show = true">
 					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_title@2x.png"></image>
 				</view>
 				<view class="fybk_tab">
@@ -53,7 +53,7 @@
 		</view> -->
 		<view class="details_box" v-if="detailsShow">
 			<view class="details_box2">
-				<view class="details_tit_box">
+				<view class="details_tit_box" @click="detailsShow = false">
 					<view class="back" @click="detailsShow = false">
 						<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
 					</view>
@@ -72,7 +72,11 @@
 			<view class="dh">导航</view>
 		</view>
 		<!-- 菜单弹层 -->
-		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
+		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
+			<view class="box_gb" @click="show = false">
+				<view class="gb">X</view>
+			</view>
+
 			<LeftNav></LeftNav>
 		</u-popup>
 	</view>
@@ -151,9 +155,29 @@ export default {
 </script>
 
 <style>
+.box_gb {
+	position: absolute;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 160rpx;
+}
+.gb {
+	width: 80rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: absolute;
+	right: 100rpx;
+	top: 30rpx;
+	text-align: center;
+	font-size: 52rpx;
+	color: #563530;
+	margin-left: 300rpx;
+	border: #563530 1px solid;
+}
 .body {
 	padding-top: 100rpx;
-	height: 1825rpx;
+	height: 1905rpx;
+	box-sizing: border-box;
 }
 .box1 {
 	width: 2200rpx;
@@ -203,6 +227,7 @@ export default {
 }
 
 .fybk_tit {
+	cursor: pointer;
 	width: 200rpx;
 	height: 530rpx;
 	text-align: center;
@@ -261,19 +286,20 @@ export default {
 }
 .caidan {
 	margin-left: 10%;
-	margin-top: 0;
+	margin-top: -280rpx;
 	display: flex;
-	width: 180rpx;
+	width: 420rpx;
+	height: 600rpx;
 	cursor: pointer;
 	align-items: center;
 }
 .img {
-	width: 80rpx;
-	height: 80rpx;
+	width: 100rpx;
+	height: 100rpx;
 }
 .dh {
 	margin-left: 10rpx;
-	font-size: 36rpx;
+	font-size: 42rpx;
 	color: #563530;
 }
 .details_box {
@@ -305,6 +331,7 @@ export default {
 	height: 200rpx;
 	border-bottom: 1px solid #ddd7d6;
 	display: flex;
+	cursor: pointer;
 	align-items: center;
 }
 .back {

pages/index/feiYiGaiLan/feiYiGaiLan.vue

@@ -8,7 +8,7 @@
 		</view>
 		<view style="position: relative">
 			<view class="fybk_zc">
-				<view class="fybk_tit">
+				<view class="fybk_tit" @click="show = true">
 					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_gl.png"></image>
 				</view>
 				<view class="fy_xm">湖里·非遗项目</view>
@@ -31,8 +31,10 @@
 		<!-- 详情 -->
 		<view class="xq_box" v-if="detailsShow">
 			<view class="xq_box2">
-				<view class="back" @click="detailsShow = false">
-					<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
+				<view class="back_box" @click="detailsShow = false">
+					<view class="back">
+						<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
+					</view>
 				</view>
 				<view class="ccr">传承人</view>
 				<view class="top_tit">
@@ -47,15 +49,15 @@
 			</view>
 		</view>
 		<!-- 切换按钮 -->
-		<!-- 	<view class="anNiu">
-			<view class="anNiu_item">
+		<!-- 		<view class="anNiu">
+			<view class="anNiu_item" @click="leftBtn">
 				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x.png"></image>
 				<view class="dd_1"></view>
 				<view class="dd_2"></view>
 				<view class="dd_3"></view>
 				<view class="dd_4"></view>
 			</view>
-			<view class="anNiu_item">
+			<view class="anNiu_item" @click="righrBtn">
 				<view class="dd_2"></view>
 				<view class="dd_3"></view>
 				<view class="dd_4"></view>
@@ -69,7 +71,10 @@
 			<view class="dh">导航</view>
 		</view>
 		<!-- 菜单弹层 -->
-		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
+		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
+			<view class="box_gb" @click="show = false">
+				<view class="gb">X</view>
+			</view>
 			<LeftNav></LeftNav>
 		</u-popup>
 	</view>
@@ -85,9 +90,11 @@ export default {
 				span: 'font-weight: 700;color: #563530;font-size: 24px !important;font-family: nzgrRuyinZouZhangKai-Regular, nzgrRuyinZouZhangKai;'
 			},
 			id: '',
+			j: 0,
 			show: false,
 			detailsShow: false,
 			projectList: [],
+			list: [],
 			detailsList: []
 		};
 	},
@@ -105,6 +112,12 @@ export default {
 		zhantinglists() {
 			this.$api.zhantinglists({}, function (res) {
 				that.projectList = res.data;
+				// that.list = res.data;
+				// for (let i = 0; i < 6; i++) {
+				// 	that.projectList.push(res.data[that.j]);
+
+				// 	that.j++;
+				// }
 			});
 		},
 		// 非遗概况项目详情
@@ -115,6 +128,32 @@ export default {
 			});
 			this.detailsShow = true;
 		},
+		// leftBtn() {
+		// 	this.j = this.j - 7;
+
+		// 	if (this.j < 0) {
+		// 		uni.showToast({
+		// 			title: '没有更多了',
+		// 			icon: 'error'
+		// 		});
+		// 		this.j = this.j + 7;
+		// 		return;
+		// 	}
+		// 	this.zhantinglists();
+		// 	that.projectList = [];
+		// },
+		// righrBtn() {
+		// 	this.j = this.j - 5;
+		// 	if (this.j == that.list.length - 5) {
+		// 		uni.showToast({
+		// 			title: '没有更多了',
+		// 			icon: 'error'
+		// 		});
+		// 		return;
+		// 	}
+		// 	this.zhantinglists();
+		// 	that.projectList = [];
+		// },
 		close() {
 			this.show = false;
 		}
@@ -125,11 +164,33 @@ export default {
 <style>
 .body {
 	width: 100%;
-	height: 1925rpx;
+	height: 1905rpx;
 	padding-top: 100rpx;
 	box-sizing: border-box;
 }
-
+.box_gb {
+	position: absolute;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 160rpx;
+}
+.gb {
+	width: 80rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: absolute;
+	right: 100rpx;
+	top: 30rpx;
+	text-align: center;
+	font-size: 52rpx;
+	color: #563530;
+	margin-left: 300rpx;
+	border: #563530 1px solid;
+}
+/deep/.u-icon__icon {
+	font-size: 52rpx !important;
+	color: #563530 !important ;
+}
 .header {
 	margin-left: 10%;
 	width: 960rpx;
@@ -204,6 +265,11 @@ export default {
 	border: 1px solid #563530;
 	box-sizing: border-box;
 }
+.back_box {
+	width: 1600rpx;
+	height: 180rpx;
+	cursor: pointer;
+}
 .back {
 	width: 100rpx;
 	height: 100rpx;
@@ -259,6 +325,7 @@ export default {
 	position: absolute;
 }
 .fybk_tit {
+	cursor: pointer;
 	width: 200rpx;
 	height: 530rpx;
 	text-align: center;
@@ -293,18 +360,20 @@ export default {
 }
 .caidan {
 	margin-left: 10%;
-	cursor: pointer;
+	margin-top: -260rpx;
 	display: flex;
-	width: 180rpx;
+	width: 480rpx;
+	height: 550rpx;
+	cursor: pointer;
 	align-items: center;
 }
 .img {
-	width: 80rpx;
-	height: 80rpx;
+	width: 100rpx;
+	height: 100rpx;
 }
 .dh {
 	margin-left: 10rpx;
-	font-size: 36rpx;
+	font-size: 42rpx;
 	color: #563530;
 }
 .anNiu {
@@ -343,4 +412,4 @@ export default {
 	background-color: #8a7d6d;
 	border-radius: 50%;
 }
-</style>
+</style>

pages/index/feiYiShiPin/feiYiShiPin.vue

@@ -9,7 +9,7 @@
 		<!--  -->
 		<view class="" style="position: relative">
 			<view class="fybk_zc">
-				<view class="fybk_tit">
+				<view class="fybk_tit" @click="show = true">
 					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_sp.png"></image>
 				</view>
 				<view class="fybk_tab">科普·系列片</view>
@@ -47,11 +47,11 @@
 
 		<u-popup mode="center" :show="detailsShow">
 			<view class="details_box">
-				<view @click="detailsShow = false" style="cursor: pointer; position: absolute; top: 70rpx; left: 80rpx; z-index: 5" class="">
-					<image style="width: 80rpx; height: 80rpx" src="/static/img/icon_back@2x.png"></image>
+				<view @click="detailsShow = false" style="width: 380rpx; height: 160rpx; cursor: pointer; position: absolute; top: 30rpx; left: 80rpx; z-index: 5" class="">
+					<image style="width: 100rpx; height: 100rpx" src="/static/img/icon_back@2x.png"></image>
 				</view>
 				<view class="details_box2">
-					<view class="details_tit_box">
+					<view class="details_tit_box" @click="detailsShow = false">
 						<view class="details_tit">{{ title }}</view>
 					</view>
 
@@ -64,19 +64,23 @@
 
 		<!-- 切换按钮 -->
 		<view class="anNiu">
-			<view class="anNiu_item" @click="leftBtn">
-				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x.png"></image>
-				<view class="dd_1"></view>
-				<view class="dd_2"></view>
-				<view class="dd_3"></view>
-				<view class="dd_4"></view>
+			<view style="cursor: pointer; width: 400rpx; height: 400rpx" @click="leftBtn">
+				<view class="anNiu_item">
+					<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x.png"></image>
+					<view class="dd_1"></view>
+					<view class="dd_2"></view>
+					<view class="dd_3"></view>
+					<view class="dd_4"></view>
+				</view>
 			</view>
-			<view class="anNiu_item" @click="righrBtn">
-				<view class="dd_2"></view>
-				<view class="dd_3"></view>
-				<view class="dd_4"></view>
-				<view class="dd_1"></view>
-				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x(1).png"></image>
+			<view @click="righrBtn" style="cursor: pointer; width: 400rpx; height: 400rpx">
+				<view class="anNiu_item">
+					<view class="dd_2"></view>
+					<view class="dd_3"></view>
+					<view class="dd_4"></view>
+					<view class="dd_1"></view>
+					<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x(1).png"></image>
+				</view>
 			</view>
 		</view>
 
@@ -86,7 +90,10 @@
 			<view class="dh">导航</view>
 		</view>
 		<!-- 菜单弹层 -->
-		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
+		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
+			<view class="box_gb" @click="show = false">
+				<view class="gb">X</view>
+			</view>
 			<LeftNav></LeftNav>
 		</u-popup>
 	</view>
@@ -209,9 +216,29 @@ export default {
 /deep/.uni-video-cover {
 	background-color: transparent !important;
 }
+.box_gb {
+	position: absolute;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 160rpx;
+}
+.gb {
+	width: 80rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: absolute;
+	right: 100rpx;
+	top: 30rpx;
+	text-align: center;
+	font-size: 52rpx;
+	color: #563530;
+	margin-left: 300rpx;
+	border: #563530 1px solid;
+}
 .body {
 	padding-top: 100rpx;
-	height: 1825rpx;
+	height: 1905rpx;
+	box-sizing: border-box;
 }
 
 .header {
@@ -245,6 +272,7 @@ export default {
 	border-bottom: 1px solid #ddd7d6;
 	display: flex;
 	align-items: center;
+	cursor: pointer;
 }
 .details_tit {
 	width: 100%;
@@ -274,6 +302,7 @@ export default {
 }
 
 .fybk_tit {
+	cursor: pointer;
 	width: 200rpx;
 	height: 530rpx;
 	text-align: center;
@@ -303,19 +332,20 @@ export default {
 }
 .caidan {
 	margin-left: 10%;
-	margin-top: 2%;
+	margin-top: -500rpx;
 	display: flex;
-	width: 180rpx;
-	align-items: center;
+	width: 820rpx;
+	height: 550rpx;
 	cursor: pointer;
+	align-items: center;
 }
 .img {
-	width: 80rpx;
-	height: 80rpx;
+	width: 100rpx;
+	height: 100rpx;
 }
 .dh {
 	margin-left: 10rpx;
-	font-size: 36rpx;
+	font-size: 42rpx;
 	color: #563530;
 }
 .banner {
@@ -460,8 +490,8 @@ export default {
 .anNiu {
 	display: flex;
 	justify-content: space-between;
-	width: 680rpx;
-	margin-left: 42%;
+	width: 1000rpx;
+	margin-left: 40%;
 }
 .anNiu_item {
 	cursor: pointer;

pages/index/feiYiZhengCe/feiYiZhengCe.vue

@@ -8,7 +8,7 @@
 		</view>
 		<view style="position: relative">
 			<view class="fybk_zc">
-				<view class="fybk_tit">
+				<view class="fybk_tit" @click="show = true">
 					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_zce.png"></image>
 				</view>
 				<view class="fy_xm">
@@ -26,7 +26,7 @@
 		<!-- 法规详情容器 -->
 		<view class="details_box" v-if="detailsShow">
 			<view class="details_box2">
-				<view class="details_tit_box">
+				<view class="details_tit_box" @click="detailsShow = false">
 					<view class="back" @click="detailsShow = false">
 						<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
 					</view>
@@ -45,7 +45,10 @@
 			<view class="dh">导航</view>
 		</view>
 		<!-- 菜单弹层 -->
-		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
+		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
+			<view class="box_gb" @click="show = false">
+				<view class="gb">X</view>
+			</view>
 			<LeftNav></LeftNav>
 		</u-popup>
 	</view>
@@ -140,7 +143,7 @@ export default {
 <style>
 .body {
 	width: 100%;
-	height: 1925rpx;
+	height: 1905rpx;
 	padding-top: 100rpx;
 	box-sizing: border-box;
 }
@@ -184,6 +187,26 @@ export default {
 	width: 200rpx;
 	height: 530rpx;
 	text-align: center;
+	cursor: pointer;
+}
+.box_gb {
+	position: absolute;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 160rpx;
+}
+.gb {
+	width: 80rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: absolute;
+	right: 100rpx;
+	top: 30rpx;
+	text-align: center;
+	font-size: 52rpx;
+	color: #563530;
+	margin-left: 300rpx;
+	border: #563530 1px solid;
 }
 .fy_xm {
 	display: flex;
@@ -200,18 +223,20 @@ export default {
 }
 .caidan {
 	margin-left: 10%;
-
+	margin-top: -320rpx;
 	display: flex;
-	width: 180rpx;
+	width: 600rpx;
+	height: 520rpx;
+	cursor: pointer;
 	align-items: center;
 }
 .img {
-	width: 80rpx;
-	height: 80rpx;
+	width: 100rpx;
+	height: 100rpx;
 }
 .dh {
 	margin-left: 10rpx;
-	font-size: 36rpx;
+	font-size: 42rpx;
 	color: #563530;
 }
 .box1 {
@@ -261,6 +286,7 @@ export default {
 	border-bottom: 1px solid #ddd7d6;
 	display: flex;
 	align-items: center;
+	cursor: pointer;
 }
 .muLv {
 	width: 100%;
@@ -324,4 +350,4 @@ export default {
 	letter-spacing: 0.2em;
 	border-bottom: 1px solid #ddd7d6;
 }
-</style>
+</style>

pages/index/huDongWenDa/huDongWenDa.vue

@@ -15,21 +15,25 @@
 				<view class="" style="margin: 0 30rpx 0 30rpx">保护文物</view>
 				<view class="">留下历史</view>
 			</view>
+			<view class="shz">守护者 {{ bhVal }} 欢迎您</view>
 			<!-- 答题按钮 -->
-			<view class="dati">
-				<view class="dt">
-					<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
-				</view>
-				<view class="dt_box" @click="starBtn">开始答题</view>
-				<view class="dt">
-					<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
+			<view class="dati" @click="starBtn">
+				<view style="display: flex; align-items: center; margin-left: 700rpx; margin-top: -1200rpx">
+					<view class="dt">
+						<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
+					</view>
+					<view class="dt_box" style="margin: auto">开始答题</view>
+					<view class="dt">
+						<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
+					</view>
 				</view>
 			</view>
 			<!-- 昵称弹层 -->
 			<view class="nc_box" v-if="starShow">
 				<view class="">
-					<view class="nc">请留下您的昵称</view>
-					<input v-model.trim="iptVal" class="ipt" type="text" placeholder="请输入您的昵称" />
+					<view class="nc">您的守护编号</view>
+					<!-- <input v-model.trim="iptVal" class="ipt" type="text" placeholder="请输入您的昵称" /> -->
+					<view class="bh">{{ bhVal }}</view>
 				</view>
 				<view class="qr" @click="isOk">确认</view>
 			</view>
@@ -37,10 +41,34 @@
 			<view class="ph_box" v-if="rankinglShow">
 				<view class="ph_box2">
 					<view class="phb">排行榜</view>
-					<view class="phb_box" v-for="item in rankingList" :key="item.index">
+					<view class="ph_top">
+						<view class="phb2">您的排名</view>
+						<view class="phb_box">
+							<view class="phb_item">
+								<view class="phb_pm">
+									<!-- <image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image> -->
+									<view class="paiming">
+										{{ myPM }}
+									</view>
+								</view>
+								<view class="phb_tx">
+									<image style="width: 100%; height: 100%" src="/static/img/img_avatar@2x(1).png"></image>
+								</view>
+								<view class="phb_nc">{{ myBh }}</view>
+							</view>
+							<view style="display: flex; align-items: center">
+								<view class="fenshu">{{ myss }}分</view>
+								<view class="shijian">{{ mysj }}</view>
+							</view>
+						</view>
+					</view>
+					<view class="phb_box" v-for="(item, index) in rankingList" :key="item.index">
 						<view class="phb_item">
 							<view class="phb_pm">
-								<image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image>
+								<!-- <image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image> -->
+								<view class="paiming">
+									{{ index + 1 }}
+								</view>
 							</view>
 							<view class="phb_tx">
 								<image style="width: 100%; height: 100%" src="/static/img/img_avatar@2x(1).png"></image>
@@ -62,9 +90,9 @@
 			<view class="star_box2">
 				<!-- 开始答题 -->
 				<view class="" v-if="resultShow">
-					<view class="tm_box">
-						<view @click="answerShow = false" style="cursor: pointer; position: absolute; top: -36rpx; left: 10rpx" class="">
-							<image style="width: 80rpx; height: 80rpx" src="/static/img/icon_back@2x.png"></image>
+					<view class="tm_box" @click="answerShow = false">
+						<view @click="answerShow = false" style="width: 500rpx; cursor: pointer; position: absolute; top: -36rpx; left: 10rpx" class="">
+							<image style="width: 100rpx; height: 100rpx" src="/static/img/icon_back@2x.png"></image>
 						</view>
 						<view class="tihao">{{ i }}</view>
 						<view class="wenti">{{ list.title }}</view>
@@ -98,12 +126,16 @@
 			</view>
 			<!-- 查看排行榜按钮 -->
 			<view class="restart">
-				<view class="dt">
-					<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
-				</view>
-				<view @click="phbBtn" class="dt_box">查看排行榜</view>
-				<view class="dt">
-					<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
+				<view class="ck_box" @click="phbBtn">
+					<view class="" style="margin: auto; display: flex; align-items: center">
+						<view class="dt">
+							<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
+						</view>
+						<view class="dt_ck">查看排行榜</view>
+						<view class="dt">
+							<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -113,7 +145,10 @@
 			<view class="dh">导航</view>
 		</view>
 		<!-- 菜单弹层 -->
-		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
+		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
+			<view class="box_gb" @click="show = false">
+				<view class="gb">X</view>
+			</view>
 			<LeftNav></LeftNav>
 		</u-popup>
 	</view>
@@ -126,11 +161,15 @@ export default {
 	data() {
 		return {
 			i: 0,
+			myPM: '',
+			myBh: '',
+			myss: '',
+			mysj: '',
 			recordNumber: 0 /* 记录对的题数 */,
 			activeTab: '',
 			selectTab: true,
 			selectTab2: null,
-			iptVal: '',
+			bhVal: '001',
 			show: false,
 			starShow: false,
 			answerShow: false,
@@ -145,6 +184,7 @@ export default {
 	},
 	onLoad() {
 		that = this;
+		this.bianHaoBtn();
 	},
 	computed: {
 		abNiu() {
@@ -156,13 +196,18 @@ export default {
 		}
 	},
 	methods: {
+		bianHaoBtn() {
+			this.bhVal = Math.floor(Math.random() * 900) + 100;
+			console.log(this.bhVal, 456545);
+		},
 		navBtn() {
 			this.show = true;
 		},
 		// 开始答题
 		starBtn() {
+			uni.setStorageSync('val', this.bhVal);
 			// this.startTime = new Date().getTime(); // 记录开始时间戳
-
+			console.log(that.bhVal, 'bhVal');
 			this.answerShow = true;
 			this.$api.startChallenge({}, function (res) {
 				that.anNiuList = res.data.question_data;
@@ -218,41 +263,60 @@ export default {
 		},
 		// 完成答题
 		completeBtn() {
-			this.endTime = new Date().getTime(); // 记录结束时间戳
+			console.log(this.bhVal, '5456+46545');
 			if (!this.selectTab) {
 				this.$common.normalToShow('还未选择答案');
 				return false;
 			}
 			this.answerShow = false;
-			this.starShow = true;
+			// this.starShow = true;
 			this.i = 0;
-			if (this.iptVal !== '' && this.iptVal !== undefined) {
-				this.starShow = false;
-			}
+			this.resultShow = true;
+			this.jieGuoShow = true;
 			// 昵称
-			this.$api.complete({ name: this.iptVal }, function (res) {
+			this.$api.complete({ name: this.bhVal }, function (res) {
 				console.log(res, 'name');
 			});
+			// const val = uni.getStorageSync('val');
+			// this.bhVal = Number(val) + 1;
 		},
 		// 昵称确认
 		isOk() {
-			if (this.iptVal == '' && this.iptVal.length <= 0) {
-				this.$common.normalToShow('昵称不能为空');
-			} else {
-				setTimeout(() => {
-					this.$common.successToShow('提交成功');
-				}, 500);
-				this.starShow = false;
-				this.resultShow = true;
-				this.jieGuoShow = true;
-				// this.yongShi = this.startTime - this.endTime;
-			}
+			setTimeout(() => {
+				this.$common.successToShow('提交成功');
+			}, 500);
+			this.starShow = false;
+			this.resultShow = true;
+			this.jieGuoShow = true;
+
+			// if (this.iptVal == '' && this.iptVal.length <= 0) {
+			// 	this.$common.normalToShow('昵称不能为空');
+			// } else {
+			// 	setTimeout(() => {
+			// 		this.$common.successToShow('提交成功');
+			// 	}, 500);
+			// 	this.starShow = false;
+			// 	this.resultShow = true;
+			// 	this.jieGuoShow = true;
+
+			// }
 		},
 		// 排行榜
 		phbBtn() {
 			this.$api.getTopList({}, function (res) {
-				console.log(res, '排行');
 				that.rankingList = res.data;
+				console.log(that.rankingList, '排行');
+
+				that.$nextTick(() => {
+					that.rankingList.forEach((item, index) => {
+						if (item.name == that.bhVal) {
+							that.myPM = index + 1; /* 排名 */
+							that.myBh = item.name; /* 编号 */
+							that.myss = item.score; /* 分数 */
+							that.mysj = item.cost_time; /* 时间 */
+						}
+					});
+				});
 			});
 			this.jieGuoShow = false;
 			this.rankinglShow = true;
@@ -268,10 +332,27 @@ export default {
 
 <style>
 .active {
-	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
+	/* background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
 	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	border: 1px solid #563530;
+	-webkit-text-fill-color: transparent; */
+	background-color: #e78a80 !important;
+}
+.shz {
+	width: 600rpx;
+	margin: auto;
+	margin-top: 50rpx;
+	font-size: 46rpx;
+	color: #563530;
+	letter-spacing: 0.1em;
+}
+.ck_box {
+	display: flex;
+	align-items: center;
+	background-color: #fdd7c8;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 200rpx;
+	margin: auto;
 }
 .active2 {
 	border: 2px solid #5ac725 !important;
@@ -281,7 +362,8 @@ export default {
 }
 .body {
 	padding-top: 100rpx;
-	height: 1825rpx;
+	height: 1905rpx;
+	box-sizing: border-box;
 }
 .header {
 	margin-left: 10%;
@@ -291,11 +373,22 @@ export default {
 	align-items: center;
 	display: flex;
 }
+.bh {
+	font-size: 38rpx;
+	color: #563530;
+	width: 1000rpx;
+	height: 100rpx;
+	line-height: 100rpx;
+	text-indent: 1em;
+
+	background-color: #efe6d8;
+}
 .jieGuo {
 	position: absolute;
 	top: 400rpx;
 	left: 32%;
 	height: 1000rpx;
+	z-index: 2;
 	background-color: #efe6d8;
 }
 .box {
@@ -310,9 +403,9 @@ export default {
 	height: 160rpx;
 }
 .box_tit_2 {
-	width: 700rpx;
+	width: 850rpx;
 	display: flex;
-	font-size: 38rpx;
+	font-size: 46rpx;
 	margin: auto;
 	margin-top: 60rpx;
 	color: #563530;
@@ -321,7 +414,6 @@ export default {
 
 .tit {
 	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
-
 	height: 96rpx;
 	font-size: 48rpx;
 	letter-spacing: 0.3em;
@@ -338,34 +430,55 @@ export default {
 }
 .caidan {
 	margin-left: 10%;
-	margin-top: 2%;
+	margin-top: -300rpx;
 	display: flex;
-	width: 180rpx;
+	width: 420rpx;
+	height: 450rpx;
 	cursor: pointer;
 	align-items: center;
 }
-.img {
+.box_gb {
+	position: absolute;
+	cursor: pointer;
+	width: 1000rpx;
+	height: 160rpx;
+}
+.gb {
 	width: 80rpx;
 	height: 80rpx;
+	line-height: 80rpx;
+	position: absolute;
+	right: 100rpx;
+	top: 30rpx;
+	text-align: center;
+	font-size: 52rpx;
+	color: #563530;
+	margin-left: 300rpx;
+	border: #563530 1px solid;
+}
+.img {
+	width: 100rpx;
+	height: 100rpx;
 }
 .dh {
 	margin-left: 10rpx;
-	font-size: 36rpx;
+	font-size: 42rpx;
 	color: #563530;
 }
 .dati {
 	display: flex;
 	align-items: center;
-	margin: auto;
-	width: 200px;
+	cursor: pointer;
+	margin-left: -100rpx;
+	width: 1400px;
+	height: 1200rpx;
 	line-height: 18rpx;
 	margin-top: 100rpx;
+	/* background-color: #5ac725; */
 }
 .restart {
 	display: flex;
 	align-items: center;
-	margin: auto;
-	width: 200px;
 	line-height: 18rpx;
 	margin-top: 260rpx;
 }
@@ -382,20 +495,35 @@ export default {
 	-webkit-text-fill-color: transparent;
 	border: 1px solid #563530;
 }
+.dt_ck {
+	cursor: pointer;
+	width: 300rpx;
+	height: 80rpx;
+	font-size: 48rpx;
+	text-align: center;
+	line-height: 80rpx;
+	margin: 0 20rpx 0 20rpx;
+	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	border: 1px solid #563530;
+}
 .dt {
 	width: 60rpx;
 	height: 16rpx;
 }
 .ph_box {
-	margin: auto;
-	margin-top: 50rpx;
-	width: 1000rpx;
-	height: 740rpx;
+	position: absolute;
+	top: 800rpx;
+	left: 26%;
+	width: 1600rpx;
+	height: 940rpx;
 	border: 3px solid #563530;
+	background-color: #eeeadd;
 }
 .ph_box2 {
-	width: 980rpx;
-	height: 720rpx;
+	width: 1580rpx;
+	height: 920rpx;
 	margin: auto;
 	margin-top: 10rpx;
 	overflow: scroll;
@@ -405,8 +533,17 @@ export default {
 }
 
 .phb {
-	width: 160rpx;
-	font-size: 48rpx;
+	width: 220rpx;
+	font-size: 52rpx;
+	margin: auto;
+	margin-top: 20rpx;
+	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+.phb2 {
+	width: 220rpx;
+	font-size: 46rpx;
 	margin: auto;
 	margin-top: 20rpx;
 	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
@@ -414,6 +551,7 @@ export default {
 	-webkit-text-fill-color: transparent;
 }
 .phb_box {
+	height: 140rpx;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -451,15 +589,16 @@ export default {
 }
 .star_box {
 	position: absolute;
-	top: 20%;
+	top: 26%;
 	left: 23%;
-	width: 2000rpx;
-	height: 1100rpx;
+	width: 2200rpx;
+	height: 1300rpx;
+	z-index: 3;
 	border: 3px solid #563530;
 }
 .star_box2 {
-	width: 1980rpx;
-	height: 1080rpx;
+	width: 2180rpx;
+	height: 1280rpx;
 	margin: auto;
 	margin-top: 10rpx;
 	border: 1px solid #563530;
@@ -477,6 +616,9 @@ export default {
 	height: 240rpx; */
 }
 .nc {
+	width: 500rpx;
+	height: 60rpx;
+	background-color: palegreen;
 	font-size: 36rpx;
 	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
 	-webkit-background-clip: text;
@@ -516,7 +658,8 @@ export default {
 	align-items: center;
 	width: 100%;
 	margin-top: 60rpx;
-	height: 260rpx;
+	height: 300rpx;
+	cursor: pointer;
 	border-bottom: 1px solid #ddd0c4;
 }
 .tm_box2 {
@@ -547,9 +690,29 @@ export default {
 	margin-left: 160rpx;
 	letter-spacing: 0.2em;
 }
-
+.paiming {
+	text-align: center;
+	line-height: 80rpx;
+	color: #563530;
+	font-size: 36rpx;
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 50%;
+	background-color: #e5c22c;
+}
+.paiming2 {
+	display: flex;
+	text-align: center;
+	line-height: 80rpx;
+	width: 80rpx;
+	height: 80rpx;
+	color: #563530;
+	font-size: 36rpx;
+	border-radius: 50%;
+	background-color: #e5c22c;
+}
 .daAn_box {
-	width: 80%;
+	width: 100%;
 	margin: auto;
 	display: flex;
 	align-items: center;
@@ -557,23 +720,26 @@ export default {
 	justify-content: space-between;
 }
 .daAn_item {
-	width: 520rpx;
-	height: 120rpx;
+	width: 820rpx;
+	height: 220rpx;
 	cursor: pointer;
 	font-size: 36rpx;
 	color: #563530;
 	margin-top: 50rpx;
+	text-align: center;
+	padding-top: 20rpx;
+	box-sizing: border-box;
 	border: 1px solid #563530;
 	background-color: #fff9ec;
 }
 .tjDn2 {
-	width: 280rpx;
-	height: 90rpx;
+	width: 580rpx;
+	height: 190rpx;
 	margin: auto;
 	font-size: 40rpx;
 	text-align: center;
 	cursor: pointer;
-	line-height: 90rpx;
+	line-height: 190rpx;
 	letter-spacing: 0.2em;
 	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
 	-webkit-background-clip: text;
@@ -582,11 +748,12 @@ export default {
 }
 .tjDn {
 	display: flex;
-	width: 1000rpx;
-	height: 110rpx;
+	width: 600rpx;
+	height: 210rpx;
 	margin: auto;
-	margin-top: 160rpx;
+	margin-top: 100rpx;
 	padding-top: 10rpx;
+	background-color: antiquewhite;
 }
 .dt_end {
 	font-size: 52rpx;
@@ -621,4 +788,10 @@ export default {
 	text-align: center;
 	background-color: #efe6d8;
 }
+.ph_top {
+	position: sticky;
+	top: 0;
+	background-color: #f1bd92;
+	z-index: 2;
+}
 </style>

pages/index/index.vue

@@ -134,4 +134,4 @@ export default {
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 }
-</style>
+</style>

pages/index/startPage.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="box">
+	<view class="box" @click="starBtn">
 		<view class="header">
 			<image style="width: 100%; height: 100%" src="/static/img/star_lg.png"></image>
 		</view>
@@ -18,23 +18,116 @@
 
 			<view class="">一场非遗匠艺手作之旅即将优雅启程</view>
 		</view>
-		<view class="star_btn" @click="starBtn">
-			<view class="star_btn2">开始探索</view>
+		<view @click="starBtn" style="cursor: pointer; margin: auto; width: 2200rpx; height: 660rpx">
+			<view class="star_btn">
+				<view class="star_btn2">开始探索</view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+let that;
 export default {
 	data() {
-		return {};
+		return {
+			timeout: 30000, // 30s
+			timeoutObj: null
+		};
+	},
+	onLoad() {
+		that = this;
 	},
 	methods: {
 		starBtn() {
 			uni.navigateTo({
 				url: '/pages/index/index'
 			});
+			// .判断是否已连接
+			// this.checkOpenSocket();
 		}
+		// 判断是否已连接
+		// checkOpenSocket() {
+		// 	uni.sendSocketMessage({
+		// 		data: 'ping',
+		// 		success: (res) => {
+		// 			this.send();
+		// 			return;
+		// 		},
+		// 		fail: (err) => {
+		// 			// 未连接打开websocket连接
+		// 			this.openConnection();
+		// 		}
+		// 	});
+		// },
+		// openConnection() {
+		// 	// 打开连接
+		// 	// uni.closeSocket(); // 确保已经关闭后再重新打开
+		// 	uni.connectSocket({
+		// 		url: 'ws://192.168.10.80:8002',
+		// 		success(res) {
+		// 			console.log('连接成功 connectSocket=', res);
+		// 		},
+		// 		fail(err) {
+		// 			console.log('连接失败 connectSocket=', err);
+		// 		}
+		// 	});
+		// 	uni.onSocketOpen((res) => {
+		// 		console.log('连接成功');
+		// 		this.send();
+		// 	});
+		// 	this.onSocketMessage(); // 打开成功监听服务器返回的消息
+		// },
+		// send() {
+		// 	uni.sendSocketMessage({
+		// 		// 发送的指令
+		// 		data: '{"command":"control","code":"quanxiplay"}',
+		// 		success: (res) => {
+		// 			console.log(res, 88888);
+		// 			console.log('发送成功....');
+		// 		},
+		// 		fail: (err) => {
+		// 			console.log(res);
+		// 			console.log('连接失败重新连接....');
+		// 			this.openConnection();
+		// 		}
+		// 	});
+		// },
+		// onSocketMessage() {
+		// 	// 消息
+		// 	this.timeout = 30000;
+		// 	this.timeoutObj = null;
+		// 	uni.onSocketMessage((res) => {
+		// 		console.log(res);
+		// 		this.getSocketMsg(res.data); // 监听到有新服务器消息
+		// 	});
+		// },
+		// // 监听到有新服务器消息
+		// getSocketMsg(reData) {
+		// 	// 监听到服务器消息
+		// 	console.log('收到服务器消息', reData);
+		// 	this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
+		// },
+		// // 检测心跳reset
+		// reset() {
+		// 	clearInterval(this.timeoutObj);
+		// 	this.start(); // 启动心跳
+		// },
+		// // 启动心跳 start
+		// start() {
+		// 	this.timeoutObj = setInterval(function () {
+		// 		uni.sendSocketMessage({
+		// 			data: 'ping',
+		// 			success: (res) => {
+		// 				console.log('连接中....');
+		// 			},
+		// 			fail: (err) => {
+		// 				console.log('连接失败重新连接....');
+		// 				that.openConnection();
+		// 			}
+		// 		});
+		// 	}, this.timeout);
+		// }
 	}
 };
 </script>
@@ -42,11 +135,12 @@ export default {
 <style>
 .box {
 	width: 100%;
-	height: 1926rpx;
+	height: 1906rpx;
 	background: url('/static/img/stra_bj.png') no-repeat center;
 	background-size: 100% 100%;
 	padding-top: 200rpx;
 	box-sizing: border-box;
+	cursor: pointer;
 }
 .header {
 	width: 522rpx;
@@ -77,7 +171,7 @@ export default {
 }
 .introduce_tit {
 	width: 1600rpx;
-	height: 600rpx;
+	height: 400rpx;
 	margin: auto;
 	letter-spacing: 0.1em;
 	text-align: center;
@@ -92,7 +186,7 @@ export default {
 	padding: 16rpx 0 16rpx 0;
 	margin: auto;
 	cursor: pointer;
-	background-color: #fff9ec;
+	background-color: #fee9d4;
 	box-sizing: border-box;
 }
 .star_btn2 {