Browse Source

体质诊断检测表

hanchong 1 năm trước cách đây
mục cha
commit
5c440337c7

+ 728 - 0
subpages/constitutionDiagnosis/constitutionDiagnosis.js

@@ -0,0 +1,728 @@
+const baseUrl = "https://fare.somnisix.top/";
+const authorization = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijk5YzI3MjI2LTdkOWQtNDhiOC1hYjlhLWM4YjVjYWZiZGNkNyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.zITQOINFkHs19_1RAgHS4I9YMaVxVq0Dsn3t6r_K7rv3rXvJy0sMtodejIMi_PNa_m4uQYxnU-6k3wC2LZht_Q";
+const api = "system/sleepEvaluation";
+
+const homeApi = "https://fare.somnisix.top";
+const homeApiTest = "http://localhost:8080";
+const token = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijk5YzI3MjI2LTdkOWQtNDhiOC1hYjlhLWM4YjVjYWZiZGNkNyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.zITQOINFkHs19_1RAgHS4I9YMaVxVq0Dsn3t6r_K7rv3rXvJy0sMtodejIMi_PNa_m4uQYxnU-6k3wC2LZht_Q";
+
+
+Page({
+	data: {
+
+		activeIcon: "/subpages/icons/ic_selected_radio.svg",
+		normalIcon: "/subpages/icons/ic_radio.svg",
+		activeColor: "color:#0BC3AA;",
+		normalColor: "color:#666666;",
+		
+		//一、身体综合
+		bodySynthesisOptions: [
+			{ value: '0',remark: 'A', label: '易疲劳,总感到疲倦' },
+			{ value: '1',remark: 'A', label: '好出汗,一活动就冒汗' },
+			{ value: '2',remark: 'A', label: '易感冒,恢复慢' },
+			{ value: '3',remark: 'A', label: '稍一活动就气喘' },
+			{ value: '4',remark: 'A', label: '疲劳后身体就不舒服' },
+			{ value: '5',remark: 'A', label: '无食欲' },
+			{ value: '6',remark: 'A', label: '手脚发凉' },
+			{ value: '7',remark: 'A', label: '肌肉无力' },
+			{ value: '8',remark: 'B', label: '腹部易滞气' },
+			{ value: '9',remark: 'B', label: '头痛、肩凝、关节痛、胃疼、手脚麻痹' },
+			{ value: '10',remark: 'B', label: '紧张、发怒后身体不舒服' },
+			{ value: '11',remark: 'B', label: '身体有痛感后,疼痛部位游走不定' },
+			{ value: '12',remark: 'C', label: '易眩晕和站起时头晕' },
+			{ value: '13',remark: 'C', label: '常感到心慌' },
+			{ value: '14',remark: 'C', label: '易头晕眼花' },
+			{ value: '15',remark: 'D', label: '有受伤和手术后的旧伤痛' },
+			{ value: '16',remark: 'D', label: '感到肩和腰、头有针扎样痛' },
+			{ value: '17',remark: 'D', label: '入夜后容易出现肩、腰、头疼痛' },
+			{ value: '18',remark: 'E', label: '喉咙易渴,常想喝水' },
+			{ value: '19',remark: 'E', label: '感冒愈后常干咳' },
+			{ value: '20',remark: 'E', label: '易便秘,大便呈球状' },
+			{ value: '21',remark: 'E', label: '尿量少、色浓' },
+			{ value: '22',remark: 'E', label: '身体总是发热' },
+			{ value: '23',remark: 'E', label: '持续低烧' },
+			{ value: '24',remark: 'F', label: '常感到身体和手脚沉重,易浮肿' },
+			{ value: '25',remark: 'F', label: '胃部不适、恶心' },
+			{ value: '26',remark: 'F', label: '雨天和湿度高时身体状况就很糟糕' },
+			{ value: '27',remark: 'F', label: '有时眩晕' },
+			{ value: '28',remark: 'F', label: '大便偏软' },
+			{ value: '29',remark: 'F', label: '易恶心、呕吐、晕车' },
+		],
+		
+		bodySynthesis: [],// 一、身体综合
+		
+		//二、面部五官
+		facialFeaturesOptions: [
+			{ value: '0',remark: 'B', label: '喉头部有异物感' },
+			{ value: '1',remark: 'C', label: '脸色不好' },
+			{ value: '2',remark: 'D', label: '眼圈发黑' },
+			{ value: '3',remark: 'E', label: '眼睛经常模糊不清' },
+			{ value: '4',remark: 'E', label: '多呈现消极、羸弱的面孔' },
+			{ value: '5',remark: 'F', label: '唾液和痰较多,中发黏' },
+			{ value: '6',remark: 'F', label: '易犯花粉症和鼻炎,容易淌鼻涕' },			
+		],
+		
+		facialFeatures: [],// 二、面部五官
+		
+		//三、皮肤毛发
+		skinHairOptions: [
+			{ value: '0',remark: 'C', label: '头发脆弱,脱发' },
+			{ value: '1',remark: 'C', label: '皮肤和指甲无光泽' },
+			{ value: '2',remark: 'D', label: '皮肤干燥易皲裂,色斑、雀斑多' },
+			{ value: '3',remark: 'D', label: '皮肤呈青紫色或黑紫色,不光滑' },
+			{ value: '4',remark: 'D', label: '肤色暗淡' },
+			{ value: '5',remark: 'E', label: '洗浴后皮肤很快干燥,易发痒' },
+			{ value: '6',remark: 'E', label: '皮肤纹理粗糙、毛孔张开' },			
+		],
+		
+		skinHair: [],// 三、皮肤毛发
+		
+		//四、情绪方面
+		emotionOptions: [
+			{ value: '0',remark: 'A', label: '经常情绪低落,容易受伤害' },
+			{ value: '1',remark: 'B', label: '焦虑、易怒' },
+			{ value: '2',remark: 'B', label: '常长吁短叹、嗳气' },	
+		],
+		
+		emotion: [],// 四、情绪方面
+		
+		//五、月经方面
+		menstruationOptions: [
+			{ value: '0',remark: 'B', label: '月经前身体不适' },
+			{ value: '1',remark: 'C', label: '经血量少或月经周期过长' },
+			{ value: '2',remark: 'D', label: '月经痛加重、经血中有动物肝脏血块' },	
+		],
+		
+		menstruation: [],// 五、月经方面
+		
+		//六、性格方面
+		characterOptions: [
+			{ value: '0',remark: 'A', label: '过度依赖人际关系' },
+			{ value: '1',remark: 'B', label: '具有攻击性,不善于体谅别人' },
+			{ value: '2',remark: 'C', label: '属冷静、认真型' },	
+			{ value: '3',remark: 'C', label: '善于制造一个自我世界并沉溺其中' },	
+			{ value: '4',remark: 'D', label: '忍耐性较强的性格,容易积聚压力' },	
+			{ value: '5',remark: 'D', label: '接人待物中规中矩,严守礼节' },	
+			{ value: '6',remark: 'F', label: '以自我为中心,争强好胜,嫉妒心强,爱慕虚荣' },	
+			{ value: '7',remark: 'F', label: '喜欢奢华、热闹的氛围' },	
+		],
+		
+		character: [],// 六、性格方面
+		
+		//七、睡眠
+		sleepOptions: [
+			{ value: '0',remark: 'A', label: '过度依赖人际关系' },
+			{ value: '1',remark: 'B', label: '具有攻击性,不善于体谅别人' },
+			{ value: '2',remark: 'C', label: '属冷静、认真型' },	
+			{ value: '3',remark: 'C', label: '善于制造一个自我世界并沉溺其中' },	
+			{ value: '4',remark: 'D', label: '忍耐性较强的性格,容易积聚压力' },	
+			{ value: '5',remark: 'D', label: '接人待物中规中矩,严守礼节' },	
+			{ value: '6',remark: 'F', label: '以自我为中心,争强好胜,嫉妒心强,爱慕虚荣' },	
+			{ value: '7',remark: 'F', label: '喜欢奢华、热闹的氛围' },	
+		],
+		
+		sleep: [],// 七、睡眠
+		
+		comScore: 0,
+		comScoreStatus: '',
+		comScoreIndex: 0,
+		comScoreDesc: "",
+		ratingResultsList: [{
+			index: 0,
+			title: "气虚型",
+			icon: "/subpages/icons/ic_triangle_down_1.svg",
+			color: "#70B3FE",
+			opacity: "0"
+		}, {
+			index: 1,
+			title: "气滞型",
+			icon: "/subpages/icons/ic_triangle_down_2.svg",
+			color: "#68D89E",
+			opacity: "0"
+		}, {
+			index: 2,
+			title: "血虚型",
+			icon: "/subpages/icons/ic_triangle_down_3.svg",
+			color: "#FFA95A",
+			opacity: "0"
+		}, {
+			index: 3,
+			title: "淤血型",
+			icon: "/subpages/icons/ic_triangle_down_4.svg",
+			color: "#cffc6d",
+			opacity: "0"
+		}, {
+			index: 4,
+			title: "水虚型",
+			icon: "/subpages/icons/ic_triangle_down_1.svg",
+			color: "#80f5ff",
+			opacity: "0"
+		}, {
+			index: 5,
+			title: "痰湿型",
+			icon: "/subpages/icons/ic_triangle_down_2.svg",
+			color: "#ef00b3",
+			opacity: "0"
+		}],
+		
+		hotel: '',//酒店
+		room: '',//房间
+		mInputId: '',//自动滚动用的
+		intervalId1: null,
+		intervalId2: null,//授权解除定时任务
+	},
+
+
+	// 一、身体综合
+	bindBodySynthesis: function (e) {
+		console.log(e)
+		this.setData({
+			bodySynthesis: e.detail
+		});
+	},
+
+	// 二、面部五官
+	bindFacialFeatures: function (e) {
+		console.log(e)
+		this.setData({
+			facialFeatures: e.detail
+		});
+	},
+
+	// 三、皮肤毛发
+	bindSkinHair: function (e) {
+		console.log(e)
+		this.setData({
+			skinHair: e.detail
+		});
+	},
+	
+	// 四、情绪方面
+	bindEmotion: function (e) {
+		console.log(e)
+		this.setData({
+			emotion: e.detail
+		});
+	},
+	
+	// 五、月经方面
+	bindMenstruation: function (e) {
+		console.log(e)
+		this.setData({
+			menstruation: e.detail
+		});
+	},
+	
+	// 六、性格方面
+	bindCharacter: function (e) {
+		console.log(e)
+		this.setData({
+			character: e.detail
+		});
+	},
+	
+	// 七、睡眠
+	bindSleep: function (e) {
+		console.log(e)
+		this.setData({
+			sleep: e.detail
+		});
+	},
+	//统计这6个数组,总共包含A,B,C,D,E,F的个数,返回最多的一项:
+	//如果一样多,返回最多的几个,如果都是0或者空,返回空
+	findMostFrequentLetters: function(arr1, arr2, arr3, arr4, arr5, arr6, arr7) {  
+		
+		console.log('arr1='+arr1);
+		console.log('arr2='+arr2);
+		console.log('arr3='+arr3);
+		console.log('arr4='+arr4);
+		console.log('arr5='+arr5);
+		console.log('arr6='+arr6);
+		console.log('arr7='+arr7);
+		//判断6个数组是否都为空
+		if(this.areAllArraysEmpty(arr1, arr2, arr3, arr4, arr5, arr6, arr7))
+		return '';
+	    // 初始化一个对象来存储每个字母的计数  
+	        const letterCounts = {  
+	            A: 0,  
+	            B: 0,  
+	            C: 0,  
+	            D: 0,  
+	            E: 0,  
+	            F: 0  
+	        };  
+	      
+	        // 定义一个辅助函数来更新计数  
+	        function updateCounts(arr) {  
+	            if (Array.isArray(arr)) {  
+	                arr.forEach(item => {  
+	                    if (typeof item === 'string' && ['A', 'B', 'C', 'D', 'E', 'F'].includes(item)) {  
+	                        letterCounts[item]++;  
+	                    }  
+	                });  
+	            }  
+	        }  
+	      
+	        // 对每个数组调用辅助函数  
+	        updateCounts(arr1);  
+	        updateCounts(arr2);  
+	        updateCounts(arr3);  
+	        updateCounts(arr4);  
+	        updateCounts(arr5);  
+	        updateCounts(arr6);  
+			updateCounts(arr7);
+	      
+	        // 找出出现次数最多的字母及其计数  
+	        let maxCount = 0;  
+	        let mostFrequentLetters = [];  
+	      
+	        for (let letter in letterCounts) {  
+	            if (letterCounts[letter] > maxCount) {  
+	                maxCount = letterCounts[letter];  
+	                mostFrequentLetters = [letter]; // 重置为当前最多的字母  
+	            } else if (letterCounts[letter] === maxCount) {  
+	                mostFrequentLetters.push(letter); // 如果计数相同,则添加到列表中  
+	            }  
+	        }  
+	      
+	        // 如果所有字母的计数都是0或数组为空,则返回空  
+	        if (mostFrequentLetters.length === 0) {  
+	            return '';  
+	        }  
+	      
+	        // 返回出现次数最多的字母或字母集合  
+	        return mostFrequentLetters;   
+	},
+	// 提交问卷的函数  
+	submitSurvey: function () {
+		var that = this;
+		// 清空表单:
+		this.setData({  
+			ratingResultsList: [{
+				index: 0,
+				title: "气虚型",
+				icon: "/subpages/icons/ic_triangle_down_1.svg",
+				color: "#70B3FE",
+				opacity: "0"
+			}, {
+				index: 1,
+				title: "气滞型",
+				icon: "/subpages/icons/ic_triangle_down_2.svg",
+				color: "#68D89E",
+				opacity: "0"
+			}, {
+				index: 2,
+				title: "血虚型",
+				icon: "/subpages/icons/ic_triangle_down_3.svg",
+				color: "#FFA95A",
+				opacity: "0"
+			}, {
+				index: 3,
+				title: "淤血型",
+				icon: "/subpages/icons/ic_triangle_down_4.svg",
+				color: "#cffc6d",
+				opacity: "0"
+			}, {
+				index: 4,
+				title: "水虚型",
+				icon: "/subpages/icons/ic_triangle_down_1.svg",
+				color: "#80f5ff",
+				opacity: "0"
+			}, {
+				index: 5,
+				title: "痰湿型",
+				icon: "/subpages/icons/ic_triangle_down_2.svg",
+				color: "#ef00b3",
+				opacity: "0"
+			}],
+		});  
+		const { nickName } = wx.getStorageSync('userInfo');
+		const unionid = wx.getStorageSync('unionid');
+		console.log('nickName==' + nickName);
+		console.log('unionid==' + unionid);
+		let resultMostFrequentLetters = this.findMostFrequentLetters(
+												  this.getRemarkValues(this.data.bodySynthesisOptions,this.data.bodySynthesis),
+												  this.getRemarkValues(this.data.facialFeaturesOptions,this.data.facialFeatures),
+												  this.getRemarkValues(this.data.skinHairOptions,this.data.skinHair),
+												  this.getRemarkValues(this.data.emotionOptions,this.data.emotion),
+												  this.getRemarkValues(this.data.menstruationOptions,this.data.menstruation),
+												  this.getRemarkValues(this.data.characterOptions,this.data.character),
+												  this.getRemarkValues(this.data.sleepOptions,this.data.sleep)
+										);
+		let comScoreIndex = [];
+		let _comScoreStatus = "";
+		let _comScoreDesc = ""
+		if (!resultMostFrequentLetters || !Array.isArray(resultMostFrequentLetters)) {
+			comScoreIndex = [];
+			_comScoreStatus = "";
+			_comScoreDesc = ""
+		}else{
+			// 遍历输入数组  
+			  resultMostFrequentLetters.forEach(item => {  
+			     
+				 if (item == 'A') {
+					 if(_comScoreStatus){
+						 _comScoreStatus += ",气虚型";
+					 }else{
+						 _comScoreStatus += "气虚型";
+					 }
+					 if(_comScoreDesc){
+						 _comScoreDesc += ",气虚型:填写内容";
+					 }else{
+						 _comScoreDesc += "气虚型:填写内容";
+					 }
+					comScoreIndex.push(0);
+				 } else if (item == 'B') {
+				 	if(_comScoreStatus){
+				 		 _comScoreStatus += ",气滞型";
+				 	 }else{
+				 		 _comScoreStatus += "气滞型";
+				 	 }
+					 if(_comScoreDesc){
+					 	 _comScoreDesc += ",气滞型:填写内容";
+					 }else{
+					 	 _comScoreDesc += "气滞型:填写内容";
+					 }
+				 	comScoreIndex.push(1);
+				 } else if (item == 'C') {
+				 	if(_comScoreStatus){
+				 		 _comScoreStatus += ",血虚型";
+				 	 }else{
+				 		 _comScoreStatus += "血虚型";
+				 	 }
+					 if(_comScoreDesc){
+						 _comScoreDesc += ",血虚型:填写内容";
+					 }else{
+						 _comScoreDesc += "血虚型:填写内容";
+					 }
+				 	comScoreIndex.push(2);
+				 } else if (item == 'D') {
+				 	if(_comScoreStatus){
+				 		 _comScoreStatus += ",淤血型";
+				 	 }else{
+				 		 _comScoreStatus += "淤血型";
+				 	 }
+					 if(_comScoreDesc){
+						 _comScoreDesc += ",淤血型:填写内容";
+					 }else{
+						 _comScoreDesc += "淤血型:填写内容";
+					 }
+				 	comScoreIndex.push(3);
+				 } else if (item == 'E') {
+				 	if(_comScoreStatus){
+				 		 _comScoreStatus += ",水虚型";
+				 	 }else{
+				 		 _comScoreStatus += "水虚型";
+				 	 }
+					 if(_comScoreDesc){
+						 _comScoreDesc += ",水虚型:填写内容";
+					 }else{
+						 _comScoreDesc += "水虚型:填写内容";
+					 }
+				 	comScoreIndex.push(4);
+				 } else if (item == 'F') {
+				 	if(_comScoreStatus){
+				 		 _comScoreStatus += ",痰湿型";
+				 	 }else{
+				 		 _comScoreStatus += "痰湿型";
+				 	 }
+					 if(_comScoreDesc){
+						 _comScoreDesc += ",痰湿型:填写内容";
+					 }else{
+						 _comScoreDesc += "痰湿型:填写内容";
+					 }
+				 	comScoreIndex.push(5);
+				 }
+				 
+			  }); 
+		}
+		console.log('comScoreIndex='+comScoreIndex.join());
+		console.log('_comScoreStatus='+_comScoreStatus);
+		console.log('_comScoreDesc='+_comScoreDesc);
+		this.setData({
+			comScoreStatus: _comScoreStatus,
+			comScoreIndex: comScoreIndex.join(),
+			comScoreDesc: _comScoreDesc,
+			promptTextMessageFlag: true,
+			ratingResultsList:this.updateOpacity(this.data.ratingResultsList,comScoreIndex),
+		})
+		console.log('ratingResultsList='+JSON.stringify(this.data.ratingResultsList));
+		let surveyData = {
+			hotel: this.data.hotel,
+			room: this.data.room,
+			userId: nickName,
+			id2: unionid,
+			bodySynthesis: (!this.data.bodySynthesis || this.data.bodySynthesis.length === 0) ? '' : (Array.isArray(this.data.bodySynthesis) ? this.data.bodySynthesis.map(item => String(item)).join(',') : this.data.bodySynthesis),
+			facialFeatures: (!this.data.facialFeatures || this.data.facialFeatures.length === 0) ? '' : (Array.isArray(this.data.facialFeatures) ? this.data.facialFeatures.map(item => String(item)).join(',') : this.data.facialFeatures),
+			skinHair: (!this.data.skinHair || this.data.skinHair.length === 0) ? '' : (Array.isArray(this.data.skinHair) ? this.data.skinHair.map(item => String(item)).join(',') : this.data.skinHair),
+			emotion: (!this.data.emotion || this.data.emotion.length === 0) ? '' : (Array.isArray(this.data.emotion) ? this.data.emotion.map(item => String(item)).join(',') : this.data.emotion),
+			menstruation: (!this.data.menstruation || this.data.menstruation.length === 0) ? '' : (Array.isArray(this.data.menstruation) ? this.data.menstruation.map(item => String(item)).join(',') : this.data.menstruation),
+			character: (!this.data.character || this.data.character.length === 0) ? '' : (Array.isArray(this.data.character) ? this.data.character.map(item => String(item)).join(',') : this.data.character),
+			sleep: (!this.data.sleep || this.data.sleep.length === 0) ? '' : (Array.isArray(this.data.sleep) ? this.data.sleep.map(item => String(item)).join(',') : this.data.sleep),
+			comScoreStatus: _comScoreStatus,
+			comScoreIndex: comScoreIndex,
+			comScoreDesc: _comScoreDesc,
+		};
+		
+		var isFinish = true;
+		var emptyKey = "";
+
+		// if (!isFinish) {
+		// 	wx.showModal({
+		// 		title: '无法提交',
+		// 		content: '您还有部分题目未完成,请检查后重新提交',
+		// 		showCancel: false,
+		// 		confirmColor: '#0BC3AA',
+		// 		confirmText: "好的",
+		// 		success(res) {
+		// 			console.log(emptyKey.toString());
+		// 			that.setData({
+		// 				mInputId: emptyKey.toString()
+		// 			})
+
+		// 		}
+		// 	})
+		// 	return;
+		// }
+
+		// 将surveyData发送到服务器  
+		console.log('提交的问卷数据:', surveyData);
+		if (!that.data.intervalId1) {
+			that.data.intervalId1 = setInterval(() => {
+				//提交到数据库
+				wx.request({
+					url: `${homeApi}/system/constitutionDiagnosis`, //
+					method: 'POST',
+					header: {
+						'content-type': 'application/json', // 默认值
+						'Authorization': 'Bearer ' + token // 在头部设置认证信息,例如使用Bearer Token
+					},
+					data: surveyData,
+					success(res) {
+						console.log('res===' + JSON.stringify(res));
+						console.log('res.code===' + res.code);
+						if (res && res.data && res.data.code == 200) {
+							if (that.data.intervalId1) {
+								clearInterval(that.data.intervalId1);
+								that.data.intervalId1 = null;
+							}
+							wx.showToast({
+								title: '问卷提交成功',
+								icon: 'success',
+								duration: 2000,
+								// success() {
+								// 	setTimeout(() => {
+								// 		wx.navigateBack()
+								// 	}, 1500);
+								// }
+							});
+				
+						}
+					},
+					fail: function (error) {
+						console.error('error', error);
+					},
+					complete: function (e) {
+					}
+				});
+			}, 1000);
+		}
+
+		// wx.showToast({
+		// 	title: '问卷提交成功',
+		// 	icon: 'success',
+		// 	duration: 2000
+		// });
+	},
+	onCloseResultsDialog() {
+		this.setData({ promptTextMessageFlag: false });
+	},
+	onLoad(option) {
+		var that = this;
+		console.log("sleepEvaluation页面");
+		// wx.clearStorage();
+		/* console.log('option.res=' + JSON.stringify(wx.getStorageSync('res')));
+		if (!wx.getStorageSync('res') || !wx.getStorageSync('res').result) {
+			wx.showModal({
+				title: '提示',
+				content: '请先扫描房间二维码',
+				showCancel: false
+			});
+
+			setTimeout(function () {
+				wx.reLaunch({
+					url: '/subpages/scan/scan',
+				})
+			}, 2000) // 设置延时时间,单位为毫秒
+		} else if (wx.getStorageSync('res').result.split('|').length != 2) {
+			wx.showModal({
+				title: '提示',
+				content: '房间二维码不正确,请重新扫码',
+				showCancel: false
+			});
+
+			setTimeout(function () {
+				wx.reLaunch({
+					url: '/subpages/scan/scan',
+				})
+			}, 2000) // 设置延时时间,单位为毫秒
+		} else {
+			// const expiresAt = wx.getStorageSync('scanResultExpiresAt');
+			// const now = Date.now() 
+			// if (expiresAt || expiresAt < now) {
+			//   // 扫码结果已过期  
+			//   wx.showToast({  
+			//     title: '扫码结果失效或已过期,请重新扫码',  
+			//     icon: 'none'  
+			//   });  
+			//   // 清除过期的扫码结果  
+			//   wx.removeStorageSync('scanResultExpiresAt');  
+			//   setTimeout(function() {
+			//       wx.reLaunch({
+			//       		url: '/pages/scan/scan',
+			//       })
+			//     }, 2000) // 设置延时时间,单位为毫秒
+
+			// }else{
+			// 	//续期
+			// 	wx.setStorageSync('scanResultExpiresAt', Date.now() + 2 * 60 * 60 * 1000)
+			// }
+
+			let hotelTemp = '';
+			let roomTemp = '';
+
+			hotelTemp = wx.getStorageSync('res').result.split('|')[0];
+			roomTemp = wx.getStorageSync('res').result.split('|')[1];
+			this.setData({
+				hotel: hotelTemp,
+				room: roomTemp,
+			});
+		} */
+		
+	},
+	areAllArraysEmpty: function (arr1, arr2, arr3, arr4, arr5, arr6, arr7) {  
+	  // 定义一个数组来包含所有传入的数组  
+	  const arrays = [arr1, arr2, arr3, arr4, arr5, arr6, arr7];  
+	  
+	  // 遍历这个数组,检查每一项(即传入的数组)是否为空  
+	  for (let i = 0; i < arrays.length; i++) {  
+	    // 检查当前数组是否为空(即长度为0)  
+	    if (arrays[i] && arrays[i].length > 0) {  
+	      // 如果发现任何一个数组不为空,则返回false  
+	      return false;  
+	    }  
+	  }  
+	  
+	  // 如果所有数组都检查过了,且都是空的,则返回true  
+	  return true;  
+	},
+	//根据第二个数组对应第一个数组的value列,取第一个数组的remark的值,组成新的数组
+	getRemarkValues: function(options, values) {
+		
+	  if (!options || options.length === 0 || !values || values.length === 0) {  
+	      return [];  
+	    } 
+	  // 初始化一个空数组来存储结果  
+	  let remarkValues = [];  
+	  
+	  // 遍历values数组  
+	  values.forEach(value => {  
+	    // 遍历options数组  
+	    options.forEach(option => {  
+	      // 如果找到了对应的value,则将该option的remark添加到result数组中  
+	      if (option.value == value) {  
+	        remarkValues.push(option.remark);   
+	      }  
+	    });  
+	  });  
+	  console.log('remarkValues='+remarkValues);
+	  // 返回包含所有remark值的数组  
+	  return remarkValues;  
+	},
+	
+	// ratingResultsList里的index和list字段相对应,如果两个值相等,将opacity的值改为'1'
+	  updateOpacity: function(ratingResultsList, list) {
+	    // 如果ratingResultsList为空,则直接返回  
+	    if (!ratingResultsList || ratingResultsList.length === 0) {  
+	      return ratingResultsList;  
+	    }  
+	  
+	    // 如果list为空,则直接返回原ratingResultsList  
+	    if (!list || list.length === 0) {  
+	      return ratingResultsList;  
+	    }  
+	  
+	    // 否则,进行更新操作  
+	    return ratingResultsList.map(item => {  
+	      // 如果item的index在list中,则修改opacity为'1',否则保持原样  
+	      if (list.includes(item.index)) {  
+	        return {  
+	          ...item,  
+	          opacity: '1'  
+	        };  
+	      }  
+	      return item;  
+	    });  
+	  },
+	  
+	submitDB: function () {
+		var that = this;
+		if (!that.data.intervalId1) {
+			that.data.intervalId1 = setInterval(() => {
+				that.submitSurvey();
+			}, 1000);
+		}
+	},
+	onShow: function (options) {
+		// var that = this;
+		// if (!that.data.intervalId2) {
+		// 	that.data.intervalId2 = setInterval(() => {
+		// 		// 这里执行你的代码  
+		// 		console.log('sleepEvaluation页面:'+Date.now());
+		// 	}, 10000);
+		// }
+	},
+	// startInterval: function () {
+	// 	 var that = this;
+	// 	 if (!that.data.intervalId) {
+	// 	 	that.data.intervalId = setInterval(() => {
+	// 	 		that.submitSurvey();
+	// 	 	}, 1000);
+	// 	 }  
+	// },
+	// clearInterval: function () {
+	// 	   var that = this;
+	//   	   if (that.data.intervalId) {
+	//   		 clearInterval(that.data.intervalId);  
+	//   		 that.data.intervalId = null;
+	//   	   }
+	//   },
+	/**
+	 * 生命周期函数--监听页面隐藏
+	 */
+	onHide: function () {
+		var that = this;
+		if (that.data.intervalId1) {
+			clearInterval(that.data.intervalId1);
+			that.data.intervalId1 = null;
+		}
+		// if (this.data.intervalId2) {
+		// 	clearInterval(this.data.intervalId2);
+		// 	this.data.intervalId2 = null; // 可选,但建议清除以避免潜在的错误  
+		// }
+	},
+	/**
+	 * 生命周期函数--监听页面卸载
+	 */
+	onUnload: function () {
+		var that = this;
+		if (that.data.intervalId1) {
+			clearInterval(that.data.intervalId1);
+			that.data.intervalId1 = null;
+		}
+		// if (this.data.intervalId2) {
+		// 	clearInterval(this.data.intervalId2);
+		// 	this.data.intervalId2 = null; // 可选,但建议清除以避免潜在的错误  
+		// }
+	},
+});

+ 7 - 0
subpages/constitutionDiagnosis/constitutionDiagnosis.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+  },
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "体质诊断检测"
+}

+ 178 - 0
subpages/constitutionDiagnosis/constitutionDiagnosis.wxml

@@ -0,0 +1,178 @@
+<view style="width: 100vw;height: 100vh; background: #CCEDF5;">
+  <scroll-view scroll-y="true"
+    style="height: 100vh;background: #CCEDF5;min-height: 100vh;overflow-x: hidden;overflow-y: auto;"
+    scroll-into-view="{{mInputId}}">
+
+    <view class="container">
+      <image src="/subpages/images/testb_banner.png" style="display: block;width: 100vw;" mode="widthFix"></image>
+      <wxs module="jstools" src="/subpages/wxs/includes.wxs"></wxs>
+      <!-- 基本信息 -->
+      <view class="section-top">
+        <image src="/subpages/images/testb_bg.png" style="display: block;width: 100%;" mode="widthFix"></image>
+        <text
+          class="tips">您好!非常感谢您在百忙之中填写这份问卷。为了更好地了解您的入住体验,并根据您的建议进行持续完善。我们特此开展此次调查。请您根据自己的实际情况如实回答,所有数据将严格保密,仅用于研究分析。本问卷大约需要5-10分钟时间,请您耐心完成。您的意见对于我们而言至关重要。</text>
+      </view>
+	  
+	  <view class='title_1'>一、身体综合(多选)</view>
+	  <view class="section" id="bodySynthesis">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ bodySynthesis }}" bind:change="bindBodySynthesis">
+	      <van-checkbox wx:for="{{bodySynthesisOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(bodySynthesis,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(bodySynthesis,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>二、面部五官(多选)</view>
+	  <view class="section" id="facialFeatures">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ facialFeatures }}" bind:change="bindFacialFeatures">
+	      <van-checkbox wx:for="{{facialFeaturesOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(facialFeatures,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(facialFeatures,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>三、皮肤毛发(多选)</view>
+	  <view class="section" id="skinHair">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ skinHair }}" bind:change="bindSkinHair">
+	      <van-checkbox wx:for="{{skinHairOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(skinHair,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(skinHair,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>四、情绪方面(多选)</view>
+	  <view class="section" id="emotion">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ emotion }}" bind:change="bindEmotion">
+	      <van-checkbox wx:for="{{emotionOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(emotion,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(emotion,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>五、月经方面(多选)</view>
+	  <view class="section" id="menstruation">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ menstruation }}" bind:change="bindMenstruation">
+	      <van-checkbox wx:for="{{menstruationOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(menstruation,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(menstruation,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>六、性格方面(多选)</view>
+	  <view class="section" id="character">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ character }}" bind:change="bindCharacter">
+	      <van-checkbox wx:for="{{characterOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(character,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(character,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+	  
+	  <view class='title_1'>七、睡眠(多选)</view>
+	  <view class="section" id="sleep">
+	    <!-- <text>6、入住之后,您觉得哪些方面让您比较满意?(多选)</text> -->
+	    <van-checkbox-group value="{{ sleep }}" bind:change="bindSleep">
+	      <van-checkbox wx:for="{{sleepOptions}}" wx:key="index" shape="square" checked-color="#0ABCA4"
+	        name="{{item.value}}" custom-class="custom-radio-class" use-icon-slot>
+	        <view class="radio-view">
+	          <image class="radio-icon" slot="icon"
+	            src="{{ jstools.includes(sleep,item.value) ? activeIcon : normalIcon }}" />
+	          <text class="radio-title"
+	            style="{{  jstools.includes(sleep,item.value) ? activeColor : normalColor }}">{{item.label}}</text>
+	        </view>
+	      </van-checkbox>
+	    </van-checkbox-group>
+	  </view>
+
+      <!-- 提交按钮 -->
+      <text class="commit-btn" bindtap="submitSurvey">提交问卷</text>
+      <view style="height: 80rpx;"></view>
+      <!-- <view class="bottom-view">
+      <text style="font-weight:600">感谢您的参与和支持!</text>
+      <text
+        style="font-size: 28rpx;margin-top: 30rpx;color: #666666;">通过这份问卷,我们可以更好地了解受访者的睡眠状况及其影响因素,从而为他们提供更有效的改善建议。希望您能如实填写,以便我们为您提供更好的服务。</text>
+    </view> -->
+
+	<van-popup show="{{ promptTextMessageFlag }}" close-on-click-overlay="{{false}}" z-index="10086" overlay
+		bind:close="onCloseResultsDialog" custom-style="background-color: transparent;">
+		<view class="resultsAreShown-view">
+	
+			<view class="resultsAreShown-content">
+				<View class="resultsAreShown-content-top">
+					<image class="resultsAreShown-content-bg" src="/subpages/bg/ic_test_results_bg.png"></image>
+					<text class="resultsAreShown-content-title">体质诊断检测统计</text>
+				</View>
+				<view class="resultsAreShown-content-h">
+					<text class="resultsAreShown-content-desc">诊断结果:</text>
+					<text class="resultsAreShown-content-score">{{comScoreStatus}}</text>
+					<!-- <text class="resultsAreShown-content-units">分</text> -->
+				</view>
+				<text class="resultsAreShown-content-desc">诊断分布:</text>
+	
+				<view class="resultsAreShown-content-score-view">
+					<view wx:for="{{ratingResultsList}}" wx:for-item="item" wx:for-index="index"
+						wx:key="{{index}}" class="resultsAreShown-content-score-item">
+						<image class="resultsAreShown-content-score-icon" src="{{item.icon}}"
+							style="{{'opacity: '+ item.opacity}}">
+						</image>
+						<view class="resultsAreShown-content-score-line"
+							style="{{'background-color:'+item.color}}">
+						</view>
+						<text
+							class=" {{item.opacity == 1 ? 'resultsAreShown-content-score-desc.active' : 'resultsAreShown-content-score-desc'}}">{{item.title}}</text>
+	
+					</view>
+				</view>
+				<text class="resultsAreShown-content-tips">{{comScoreDesc}}</text>
+			</view>
+	
+			<van-icon name="close" size="56rpx" color="#FFFFFF" bindtap="onCloseResultsDialog" />
+		</view>
+	
+	</van-popup>
+	
+    </view>
+  </scroll-view>
+
+</view>

+ 361 - 0
subpages/constitutionDiagnosis/constitutionDiagnosis.wxss

@@ -0,0 +1,361 @@
+/* pages/survey/survey.wxss */
+
+/* 通用样式 */
+.container {
+  width: 100%;
+  display: block;
+  background: #CCEDF5;
+}
+
+.section {
+  width: calc(100%);
+  padding: 30rpx 0;
+  margin-top: 30rpx;
+  background: #FBFDFC;
+  border-radius: 24rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-top {
+  margin: 0 auto;
+  width: 672rpx;
+  position: relative;
+}
+
+.tips {
+  position: absolute;
+  top: 40rpx;
+  left: 40rpx;
+  right: 40rpx;
+  width: 592rpx;
+  line-height: 40rpx;
+  color: #5A5A5A;
+  font-size: 24rpx;
+}
+
+.section text {
+  margin: 0 30rpx;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  color: #333333;
+}
+
+.radio-view {
+  width: 100vw;
+  display: flex;
+  margin-top: 30rpx;
+  flex-direction: row;
+  align-items: center;
+}
+
+.radio-icon {
+  width: 36rpx;
+  margin-left: 10rpx;
+  height: 36rpx;
+}
+
+.radio-title {
+  font-size: 28rpx;
+  margin: 0 20rpx;
+}
+
+.title {
+  text-align: center;
+  font-size: 38rpx;
+  color: #0BC3AA;
+  font-weight: bold;
+  margin: auto;
+  margin-top: 10rpx;
+}
+
+.title_1 {
+  width: 100%;
+  text-align: center;
+  color: #333333;
+  font-size: 32rpx;
+  margin: 60rpx auto auto;
+}
+
+/* 标题样式 */
+/* .title {  
+  font-size: 18px;  
+  font-weight: bold;  
+  margin-bottom: 10px;  
+} */
+
+/* 输入框和选择器的样式 */
+.input-area,
+.picker-area {
+  margin-bottom: 20px;
+}
+
+.input-area input,
+.picker-area picker {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  /* 包括内边距和边框在总宽度内 */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+/* 特别是针对选择器的样式(微信小程序中没有原生的<picker>标签,这里仅作为示例) */
+/* 实际上,您可能会使用微信小程序的picker组件,并通过自定义类来样式化它周围的容器 */
+.picker-container {
+  position: relative;
+}
+
+.picker-container picker {
+  /* 注意:这里的picker是假设的,微信小程序中picker组件的样式需要通过其他方式控制,如自定义模态框 */
+  /* 实际上,您可能不需要直接对picker进行样式化,而是样式化触发picker的按钮或容器 */
+}
+
+/* 提交按钮的样式 */
+.submit-btn {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: #007aff;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.submit-btn:hover {
+  /* 注意:微信小程序中不支持:hover伪类,这里仅作为Web开发的参考 */
+  background-color: #0056b3;
+}
+
+/* 如果有多选问题,可能需要为checkbox或radio列表添加样式 */
+.checkbox-group,
+.radio-group {
+  margin-bottom: 20px;
+}
+
+.checkbox-group label,
+.radio-group label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.full-width-textarea {
+  width: 690rpx;
+  background: #F5F7FB;
+  /* 使textarea宽度占满其父容器的宽度 */
+  border: none;
+  border-radius: 2px;
+  /* 可选:添加轻微的边框圆角 */
+  padding: 10px;
+  margin: auto;
+  font-size: 28rpx;
+  line-height: 48rpx;
+  margin-top: 30rpx;
+  /* 可选:添加内边距,让文本不紧贴边框 */
+  box-sizing: border-box;
+  /* 确保padding不会增加textarea的总宽度 */
+}
+
+.custom-input {
+  width: 100%;
+  /* 使input宽度占满其父容器的宽度 */
+  border: none;
+  /* 移除默认的边框 */
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* 只设置底部边框为半透明细线 */
+  padding: 10px 0;
+  /* 只在垂直方向上添加内边距,避免底部边框被内边距遮挡 */
+  background-color: transparent;
+  /* 移除背景色 */
+  box-shadow: none;
+  /* 移除可能的阴影效果(如果默认有的话) */
+}
+
+input {
+  width: calc(100% - 200rpx);
+  margin: 15rpx auto auto;
+  padding: 0 20rpx;
+  line-height: 70rpx;
+  border-radius: 5rpx;
+  color: #333333;
+  font-size: 28rpx;
+  height: 70rpx;
+  border-bottom: 1rpx solid #666666;
+}
+
+
+.commit-btn {
+  line-height: 90rpx;
+  border-radius: 45rpx;
+  text-align: center;
+  width: calc(100vw - 120rpx);
+  display: block;
+  color: #FFFFFF;
+  font-size: 32rpx;
+  margin: 80rpx auto 80rpx auto;
+  background: linear-gradient(278deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
+}
+
+.custom-radio-class {
+  /* width: calc(100vw - 40rpx) !important; */
+  /* padding: 15rpx 20rpx; */
+  /* display: flex;
+  align-items: flex-start !important;
+  flex-direction: row; */
+}
+
+.van-radio__label,
+.van-checkbox__label {
+  flex: 1;
+  margin-right: 30rpx;
+}
+
+.van-radio-group {
+  /* margin-top: 15rpx; */
+  margin-bottom: 15tpx;
+}
+
+.bottom-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(100% - 60rpx);
+  margin: 60rpx auto 30rpx auto;
+}
+
+.resultsAreShown-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.resultsAreShown-content {
+  width: 640rpx;
+  margin-bottom: 30rpx;
+  min-height: 516rpx;
+  background: #FFFFFF;
+  border-radius: 32rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.resultsAreShown-content-top {
+  background: #23C983;
+  width: 100%;
+  position: relative;
+  height: 186rpx;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.resultsAreShown-content-title {
+  color: #FFFFFF;
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-top: 64rpx;
+  position: absolute;
+  margin-left: 40rpx;
+}
+
+.resultsAreShown-content-icon {
+  width: 96rpx;
+  margin-top: 52rpx;
+  margin-right: 44rpx;
+  height: 108rpx;
+}
+
+.resultsAreShown-content-bg {
+  width: 100%;
+  height: 186rpx;
+}
+
+.resultsAreShown-content-h {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  width: 100%;
+}
+
+.resultsAreShown-content-desc {
+  font-size: 28rpx;
+  margin-left: 40rpx;
+  margin-top: 30rpx;
+  color: #333333;
+}
+
+.resultsAreShown-content-score {
+  font-weight: 700;
+  color: #1AC57D;
+  font-size: 60rpx;
+}
+
+.resultsAreShown-content-units {
+  font-size: 28rpx;
+  color: #1AC57D;
+}
+
+.resultsAreShown-content-score-view {
+  display: flex;
+  flex-direction: row;
+  margin-top: 22rpx;
+  margin-left: 24rpx;
+  align-items: center;
+  width: calc(100% - 48rpx);
+}
+
+.resultsAreShown-content-score-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.resultsAreShown-content-score-icon {
+  width: 24rpx;
+  opacity: 0;
+  height: 16rpx;
+}
+
+.resultsAreShown-content-score-line {
+  width: calc(100% - 32rpx);
+  height: 12rpx;
+  margin-top: 20rpx;
+  border-radius: 12rpx;
+}
+
+.resultsAreShown-content-score-desc {
+  font-size: 24rpx;
+  margin-top: 16rpx;
+  line-height: 32rpx;
+  color: #666666;
+}
+
+.resultsAreShown-content-score-desc.active {
+  color: #333333;
+  margin-top: 16rpx;
+  line-height: 32rpx;
+  font-size: 28rpx;
+}
+
+.tips {
+  margin: 20rpx auto;
+  padding: 20rpx 35rpx;
+  width: 600rpx;
+  font-size: 24rpx;
+  line-height: 40rpx;
+  background: white;
+  color: #5A5A5A;
+  box-shadow: 4rpx 4rpx 0 #BAE2E0;
+}
+
+.resultsAreShown-content-tips {
+  color: #888888;
+  margin: 30rpx;
+  font-size: 20rpx;
+}