NDAid/pages/index/index.vue

<template>
	<!-- <custom-navigation-bar class="bar">
		{{$t('navigationBarTitleText')}}
	</custom-navigation-bar> -->
	<!-- <page-meta>
		<navigation-bar
		  :title="$t('navigationBarTitleText')"
		  front-color="#fff"
		  background-color="#648EB8"
		  title-align="center"
		/>
	</page-meta> --> 
	<!-- <view class="">
		<navbar :title="$t('show_report')" size="48" :backtext="$t('back')"  background="#648EB8" color="#fff" :backShow="false"></navbar>
	</view> -->
	<view class="app_content">
		<uv-toast ref="toast"></uv-toast>
		<view class="page">
			<view class="bar">
				<uv-text :text="$t('navigationBarTitleText')" align="center" color="#fff" size="20"></uv-text>
			</view>
			<view class="bottomarc"></view>
			<view style="max-width: 810px;margin: 0 auto;">
				<uv-row justify="space-between" customStyle="margin-top: 6%">
					<uv-col span="10" offset="1" class="box1">
						<view class='hometitle'>
						  {{$t('index_text_1')}}
						</view>
						<view class="userlist">
							<uv-row>
								<uv-col span="10" class="scroll_div">
									<uv-scroll-list :indicator="false">
										<view v-for="(item, index) in userlist" :key="index" class="item">	
											<uv-image class="img" :src="item.photourl" mode="aspectFill" 
												shape="circle" :lazy-load="true" width="60" height="60"
												:class="{ memberphoto_select: item.selected }"
												@click="selected(index)">
											</uv-image>
											<uv-text :text="item.membername" align="center" customStyle="margin-top:0.3rem"></uv-text>
										</view>
									</uv-scroll-list>
								</uv-col>
								<uv-col span="2">
									<view class="addmember">
										<uv-image class="img" src="/static/image/fabu1.png" mode="aspectFill"
											shape="circle" :lazy-load="true" width="50" height="50"
											@click="insertmembe">
										</uv-image>
										<uv-text :text="$t('new_member')" align="center" customStyle="margin-top:0.3rem"></uv-text>
									</view>
									
								</uv-col>
							</uv-row>
						</view>
					</uv-col>
				</uv-row>
				<view class="">
					<uv-row justify="space-between" customStyle="margin-top: 2rem">
						<uv-col span="10" offset="1">
							<view class="box2">
								<view class="scalename">
									{{$t('index_text_2')}}
								</view>
								<view class="div1">
									<uv-row>
										<uv-col span="6">
											 <image class="img" src="http://qiniusave.chienxutech.com/sdzyy/img/xgng3.png" ></image>
										</uv-col>
										<uv-col span="6">
											<view class="">
													<uv-text :text="$t('index_text_3')"></uv-text>
													<uv-text :text="$t('index_text_4')" align="center" customStyle="margin-top:30px;margin-bottom:40px"></uv-text>
													<uv-text :text="$t('index_text_5')" align="center" size="12" color="#1a1a1a"></uv-text>
											</view>
										</uv-col>
									</uv-row>
								</view>
								<view class='scalename'>{{$t('index_text_6')}}</view>
								<view v-if="selectuser" class="btns">
									<!-- <view v-show="1!=selectuser.fmemberid"> -->
									<view>
										<uv-row v-show="0==reportinfo.comstatus">
											<uv-col span="6"  offset="3">
												 <view class='mybtn' @click="tostem">
													  {{$t('index_btn_1')}}
												 </view>
											</uv-col>
										</uv-row>
										<uv-row gutter="20" v-show="1==reportinfo.comstatus">
											<uv-col span="6" >
												<view class='mybtn' @click="showreport">
													 {{$t('index_btn_2')}}
												</view>
											</uv-col>
											<uv-col span="6" >
												<view class='mybtn'  @click="restem">
													  {{$t('index_btn_3')}}
												</view>
											</uv-col>
										</uv-row>
									</view>
								</view>
								<view v-else>
									<p>{{$t('not_selected')}}</p>
								</view>
								<!-- mergerscale.comstatus -->
							</view>
						</uv-col>
					</uv-row>
					<!-- <uv-row justify="space-between" customStyle="margin-top: 6%">
						<uv-col span="10" offset="1" >
							<share @dosharewechat="share"></share>
						</uv-col>
					</uv-row> -->
				</view>
			</view>
		</view>
		<view class="">
			<!--@maskClick="maskClick"-->
			<uv-popup ref="popup"  mode="bottom" :closeable="false" :close-on-click-overlay="false">
				<view class="showinfo">
				<!-- 	<h3>เรียนผู้ใช้ ยินดีต้อนรับสู่ NDAID!</h3>
					<br />
					<text>
						ที่นี่ คุณจะได้รับความรู้ด้านสุขภาพเกี่ยวกับหัวใจและหลอดเลือด และเรียนรู้เกี่ยวกับนิสัยการใช้ชีวิตเพื่อสุขภาพที่ดีต่างๆ แต่โปรดทราบว่าแอปนี้มีวัตถุประสงค์เพื่อทำให้วิทยาศาสตร์สุขภาพเป็นที่นิยม และให้คำแนะนำด้านสุขภาพในชีวิตประจำวันแก่คุณ ไม่ใช่การวินิจฉัยทางการแพทย์
					</text>
					<br />
					<text>
						เรามุ่งมั่นที่จะช่วยให้คุณพัฒนาวิถีชีวิตที่ดี เช่น การรับประทานอาหารที่เหมาะสม การออกกำลังกายในระดับปานกลาง งานประจำ และเวลาพักผ่อน เป็นต้น อย่างไรก็ตาม หากคุณมีปัญหาสุขภาพโดยเฉพาะ เราขอแนะนำให้คุณไปที่สถาบันการแพทย์ทั่วไปเพื่อรับการวินิจฉัยและการรักษา
					</text>
					<br />
					<text>
						ให้เราทำงานร่วมกันเพื่อใช้ความรู้ทางวิทยาศาสตร์เพื่อส่งเสริมชีวิตที่มีสุขภาพที่ดี!
					</text> -->
			
					<h4>คุณกำลังจะใช้ฟังก์ชันที่เกี่ยวข้องกับข้อมูลสุขภาพ โปรด lưu ý:</h4>
					<br />
					<ul>
						<li>ผลลัพธ์ขึ้นอยู่ наการวิจัยทางการแพทย์ที่เปิดเผย อาจมีความคลาดเคลื่อน</li>
						<li>เป็นไปไม่ได้ที่จะแทนการวินิจฉัยของแพทย์</li>
						<li>การใช้ต่อไปหมายความว่าคุณตระหนักถึงความเสี่ยงข้างต้นสำรวจสาธารณสุขในประเทศไทยที่จัดทำโดยมหาวิทยาลัยเกลอ</li>
					</ul>
					<br/>
					<h4>The feature you are about to use involves health data. Please note:</h4>
					<br />
					<ul>
						<li>The results are based on publicly available medical research and may contain errors.</li>
						<li>It is strictly prohibited to substitute a doctor's diagnosis.</li>
						<li>Continuing to use this feature indicates that you are aware of the above risks.</li>
					</ul>
					<br />
					<view class="">
						<!-- @change="checkchange" -->
						<uv-checkbox-group v-model="checkvalue" >
							<uv-checkbox :customStyle="{marginBottom: '8px'}" 
							v-for="(item, index) in checkboxrange" :key="index" :label="item.text" :name="item.value"></uv-checkbox>
						</uv-checkbox-group>
						<uv-button type="primary" :text="$t('continue')" v-show="checkvalue==1" @click="close_showinfo"></uv-button>
					</view>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	import {getlist} from "@/common/api/fmember.js"
	import {querymergescalebyuserid} from "@/common/api/scale.js"
	import {tostemlistnext} from "@/common/js/common.js"
	import share from "@/components/share/share.vue"
	import {addlog} from "@/common/api/system.js"
	export default {
		data() {
			return {
				userinfo:{},
				userlist:[], 
				reportinfo:{},
				selectuser:false,
				isshowinfo:0,
				checkvalue:0,
				checkboxrange: [{"value": 1,"text": "ฉันได้อ่านและ đồngยอม/I have read and agree."}]
			}
		},
		components:{
			share
		},
		methods: {
			checkchange(e){
				console.log(this.checkvalue,e)
				this.close_showinfo()
			},
			getlist(){
				let data ={userid:this.userinfo.id}
				getlist(data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
					}
					if(200==res.code){
						let userlist = res.resultData
						let fmemberid = this.selectuser?this.selectuser.fmemberid:this.userinfo.fmemberid
						if(this.selectuser){
							userlist.map((item,index)=>{
								item.selected=0
								if(item.fmemberid==fmemberid){
									item.selected=1
									return 
								}
							})
						}else{
							userlist[0].selected=1
							uni.setStorage({
								key: 'selectuser',
								data: userlist[0],
							});
							this.selectuser = userlist[0]
							uni.setStorage({
								key: 'selectuser',
								data: this.selectuser,
							});
						}
						userlist.map((item,index)=>{
							if(!item.gender){
								item.photourl="/static/image/member.svg"
							}else{
								switch(item.gender){
									case 1:
									case '1':
										item.photourl="/static/image/selecttype/man.png"
									break;
									case 2:
									case '2':
										item.photourl="/static/image/selecttype/woman.png"
									break;
								}
							}
						})
						this.userlist = userlist
						uni.setStorage({
							key: 'memberlist',
							data: this.userlist,
						});
					}
				})
			},
			selected(index){
				let that = this
				this.userlist.map((item,index1)=>{
					if(index1==index){
						item.selected=1
						that.selectuser  = item
					}else{
						item.selected=0
					}
				})
				uni.setStorage({
					key: 'selectuser',
					data: this.selectuser,
				});
				this.querymergescalebyuserid()
			},
			insertmembe(){
				let count = this.userlist.length-1
				if(count>=this.userinfo.fmembercount){
					this.$refs.toast.show({
						type: 'error',
						message: this.$t('member_num_than_max')
					})
				}else{
					uni.navigateTo({
						url: '/pages/member/add'
					});
				}
			},
			querymergescalebyuserid(){
				let userid = this.userinfo.id
				let fmemberid=this.selectuser.fmemberid?this.selectuser.fmemberid:0
				let data={userid:userid,fmemberid:fmemberid}
				querymergescalebyuserid(data).then(res=>{
					res =res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					if(200==res.code){
						this.reportinfo = res.resultData
					}
				})
				
			},
			showreport(){
				uni.navigateTo({
					url: '/pages/report/report'
				});
			},
			init_reload(){
				this.userinfo = uni.getStorageSync("userinfo")
				this.selectuser = uni.getStorageSync("selectuser")
				this.getlist()
				this.querymergescalebyuserid()
			},
			init(){
				this.userinfo = uni.getStorageSync("userinfo")
				this.selectuser = uni.getStorageSync("selectuser")
				this.getlist()
				this.querymergescalebyuserid()
				// uni.$on('dosharewechat',function(data){
				// 	uni.share({
				// 		provider: "weixin",
				// 		scene: "WXSceneSession",
				// 		type: 0,
				// 		href:"testapp://",
				// 		title: "uni-app分享",
				// 		summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				// 		imageUrl: data.shareimg,
				// 		success: function (res) {
				// 			addlog({
				// 				json: JSON.stringify(res),
				// 				type: 'uniapp信息'
				// 			})
				// 			console.log("success:" + JSON.stringify(res));
				// 		},
				// 		fail: function (err) {
				// 			addlog({
				// 				json: JSON.stringify(res),
				// 				type: 'uniapp错误'
				// 			})
				// 			console.log("fail:" + JSON.stringify(err));
				// 		}
				// 	})
				// })
				if(1==this.isshowinfo){
					this.showinfo()
				}
			},
			tostem(){
				if(this.reportinfo.stemlist == undefined){
					return
				}
				uni.setStorage({
					key: 'stemlist',
					data: this.reportinfo.stemlist,
				});
				
				if(this.reportinfo.srid == undefined){
					this.reportinfo.srid =0
				}
				let stemlist = this.reportinfo.stemlist
				let srid =this.reportinfo.srid
				uni.setStorage({
					key: 'srid',
					data: srid,
				});
				let stepprogress = this.reportinfo.stepprogress
				tostemlistnext(stepprogress)
				// let item = stemlist[stepprogress]
				// if(item.stemtype<101){
				// 	//标准答题
				// 	uni.navigateTo({
				// 		url: '/pages/topic/common'
				// 	});
				// }else{
				// 	//特殊答题
				// 	let scaleid=4
				// 	let url = "/pages/topic/"+item.stemdefinepage+"?scaleid="+scaleid + "&srid=" + srid + `&sindex=` + stepprogress
				// 	uni.navigateTo({
				// 		url: url
				// 	});
				// }
			},
			restem(){
				uni.setStorage({
					key: 'stemlist',
					data: this.reportinfo.stemlist,
				});
				if(this.reportinfo.srid == undefined){
					this.reportinfo.srid =0
				}
				let stemlist = this.reportinfo.stemlist
				let srid = 0
				uni.setStorage({
					key: 'srid',
					data: srid,
				});
				//let stepprogress = this.reportinfo.stepprogress
				let stepprogress = 0
				var scaleid = 4
				tostemlistnext(stepprogress,0,scaleid,srid)
			},
			share(data){
				// this.$refs.toast.show({
				// 	type: 'error',
				// 	message: data.shareimg
				// })
				// console.log(data)
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href:"testapp://",
					//title: this.$t('navigationBarTitleText')+"分享",
					title: this.$t('share'),
					summary: this.$t('share_text'),
					imageUrl: data.shareimg,
					success: function (res) {
						addlog({
							json: JSON.stringify(res),
							type: 'uniapp信息'
						})
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						addlog({
							json: JSON.stringify(err),
							type: 'uniapp错误'
						})
						console.log("fail:" + JSON.stringify(err));
					}
				})
			},
			showinfo(){
				console.log(this.$refs);
				this.$refs.popup.open()
			},
			close_showinfo(){
				this.$refs.popup.close()
			},
			maskClick(){
				this.$refs.popup.close();
			}
		},
		mounted() { 
			// uni.setNavigationBarTitle({
			// 	title: this.$t('navigationBarTitleText')
			// });
			this.init()
			uni.setTabBarItem({
			  index: 0,
			  text:  this.$t('review'),
			  iconPath: "/static/image/btns/review/dangeritem-r.png",
			  selectedIconPath: "/static/image/btns/review/dangeritem.png",
			})
			uni.setTabBarItem({
			  index: 1,
			  text:  this.$t('health_center'),
			  iconPath: "/static/image/btns/health_center/videolist.png",
			  selectedIconPath: "/static/image/btns/health_center/videolist_r.png",
			})
		},
		onLoad(option){
			if(1==option.islogin){
				this.isshowinfo=1
			}
		},
		onShow(option){
			this.init_reload()
			// uni.reLaunch()
		},
		onPullDownRefresh(){
			this.init()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style scoped>
	.box1{
		background-color: #fff;
		border-radius:20rpx;
		box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
		display:flex;
		flex-direction:column;
		align-items:center;
		width: 80%;
	}
	.box1 .userlist{
		width: 100%;
	}
	.box1 .userlist .item{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 60px;
	}
	.box1 .userlist .scroll_div{
		max-width: 80%;
	}
	.addmember{
		width: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.addmember{
		padding-bottom: 10px;
	}
	.box2{
		background-color: #fff;
		border-radius:20rpx;
		box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
		display:flex;
		flex-direction:column;
		align-items:center;
		width: 100%;
		padding: 0.5em;
		box-sizing: border-box;
	}
	.box1 .hometitle{
	    height:80rpx;
	    display:flex;
	    align-items:center; 
	    justify-content:center; 
	    font-weight:700;
	    color:#47689D;
	}
	.box1 .userlist .item .memberphoto_select{
	  overflow: hidden;
	  box-shadow:1px 3px 3px 1px rgba(0, 0, 0, 0.3);
	}
	.box1 .userlist{
		padding-left: 10px;
		padding-right: 10px;
	}
	.box2 .scalename{
		font-size:36rpx;
		display:flex;
		justify-content:center;
		align-items:center;
		color:#3f73b3;
		margin-top:5rpx;
		font-weight:700;
	}
	.box2 .img{
		width: 100%; 
		object-fit: contain;
		height: 350rpx;  
	}
	.box2 .div1{
		width: 100%;
	}
	.box2 .btns{
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.app_content{
		margin-top:0px ;
	}
	.showinfo{
		height: 50%;
		padding: 1.5em;
		padding-bottom: 5em;
		text-align: 12rpx;
	}
</style>