NDAid/pages/member/add.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="titlearea">
		<view class="firsttitle">{{$t('member_add_text_1')}}</view>
		<view class="title_2">{{$t('member_add_text_2')}}</view>
	</view>
	<view class="memberarea2">
		<uv-row class="item">
			<uv-col span="7">
				<uv-text :text="$t('add_member_text1')"></uv-text>
				<uv-text :text="$t('add_member_text2')"></uv-text>
				<uv-text :text="$t('add_member_text3')"></uv-text>
			</uv-col>
			<uv-col span="5">
					<uv-row justify="around">
						<uv-col span="6" align="center">
							<uv-image src="/static/image/selecttype/man.png" shape="circle" width="60" height="60"></uv-image>
							<view :class="{paretareabutton_select:selectuser_list[0].selected,addbtn:!selectuser_list[0].selected}"  @click="itemselect(1)">
								{{ $t('father') }}
							</view>
						</uv-col>
						<uv-col span="6" align="center">
							<uv-image src="/static/image/selecttype/woman.png" shape="circle" width="60" height="60"></uv-image>
							<view :class="{paretareabutton_select:selectuser_list[1].selected,addbtn:!selectuser_list[1].selected}" @click="itemselect(2)">
								{{ $t('mother') }}
							</view>
						</uv-col>
					</uv-row>
			</uv-col>
		</uv-row>
		<uv-line length="80%"></uv-line>
		<uv-row  class="item">
			<uv-col span="7">
				<uv-text :text="$t('add_member_text4')"></uv-text>
				<uv-text :text="$t('add_member_text5')"></uv-text>
				<uv-text :text="$t('add_member_text6')"></uv-text>
			</uv-col>
			<uv-col span="5">
					<uv-row justify="around">
						<uv-col span="6" align="center">
							<uv-image src="/static/image/selecttype/man.png" shape="circle" width="60" height="60"></uv-image>
							<view :class="{paretareabutton_select:selectuser_list[2].selected,addbtn:!selectuser_list[2].selected}"  @click="itemselect(3)">
								{{ $t('husband') }}
							</view>
						</uv-col>
						<uv-col span="6" align="center">
							<uv-image src="/static/image/selecttype/woman.png" shape="circle" width="60" height="60"></uv-image>
							<view :class="{paretareabutton_select:selectuser_list[3].selected,addbtn:!selectuser_list[3].selected}" @click="itemselect(4)">
								{{ $t('wife') }}
							</view>
						</uv-col>
					</uv-row>
			</uv-col>
		</uv-row>
	</view>
	<!-- <view class="memberarea">	
		<view class="parentarea">
			<uv-row>
				<uv-col span="7">
					<uv-text text="父母有没有"></uv-text>
					<uv-text text="心梗脑梗的风险?"></uv-text>
					<uv-text text="帮他们评测!"></uv-text>
				</uv-col>
				<uv-col span="5">
						<uv-row justify="around">
							<uv-col span="6" align="center">
								<uv-image src="/static/image/selecttype/man.png" shape="circle" width="60" height="60"></uv-image>
								<view :class="{paretareabutton_select:selectuser_list[0].selected,addbtn:!selectuser_list[0].selected}"  @click="itemselect(1)">
									{{ $t('father') }}
								</view>
							</uv-col>
							<uv-col span="6" align="center">
								<uv-image src="/static/image/selecttype/woman.png" shape="circle" width="60" height="60"></uv-image>
								<view :class="{paretareabutton_select:selectuser_list[1].selected,addbtn:!selectuser_list[1].selected}" @click="itemselect(2)">
									{{ $t('mother') }}
								</view>
							</uv-col>
						</uv-row>
				</uv-col>
			</uv-row>
		</view>
		<view class="parentarea">
			<uv-row>
				<uv-col span="7">
					<uv-text text="爱人工作繁忙"></uv-text>
					<uv-text text="应酬多，压力大，常喝酒"></uv-text>
					<uv-text text="有没有心脑血管的隐患？"></uv-text>
				</uv-col>
				<uv-col span="5">
						<uv-row justify="around">
							<uv-col span="6" align="center">
								<uv-image src="/static/image/selecttype/man.png" shape="circle" width="60" height="60"></uv-image>
								<view :class="{paretareabutton_select:selectuser_list[2].selected,addbtn:!selectuser_list[2].selected}"  @click="itemselect(3)">
									{{ $t('husband') }}
								</view>
							</uv-col>
							<uv-col span="6" align="center">
								<uv-image src="/static/image/selecttype/woman.png" shape="circle" width="60" height="60"></uv-image>
								<view :class="{paretareabutton_select:selectuser_list[3].selected,addbtn:!selectuser_list[3].selected}" @click="itemselect(4)">
									{{ $t('wife') }}
								</view>
							</uv-col>
						</uv-row>
				</uv-col>
			</uv-row>
		</view>
	</view> -->
	<view class='othermember'>
		<view class="show_view" @click="setshowdiv">
			{{ $t('other_member') }}
		</view>
	</view>
	<view class="selectarea" v-show="showdiv">
		<uv-row justify="around">
			<uv-col span="6" align="center">
				<uv-image src="/static/image/selecttype/man.png" shape="circle" width="100" height="100"></uv-image>
				<uv-text :text="$t('add_member_text7')" align="center"></uv-text>
				<uv-input :placeholder="$t('add_member_text9')" border="bottom" v-model="other_member_1" customStyle="width:80px"></uv-input>
				<view class="paretareabutton_select" @click="addother(1)">
					<uv-icon name="plus" color="#fff" size="10"></uv-icon>
				</view>
			</uv-col>
			<uv-col span="6" align="center">
				<uv-image src="/static/image/selecttype/woman.png" shape="circle" width="100" height="100"></uv-image>
				<uv-text :text="$t('add_member_text8')" align="center"></uv-text>
				<uv-input :placeholder="$t('add_member_text9')" border="bottom" v-model="other_member_2" customStyle="width:80px"></uv-input>
				<view class="paretareabutton_select" @click="addother(2)">
					<uv-icon name="plus" color="#fff" size="10"></uv-icon>
				</view>
			</uv-col>
		</uv-row>
	</view>
	<view class='buttonarea'>
		<uv-button type="primary" shape="square" :text="$t('submit')" customStyle="background:#648EB8;width:80%" @click="addmemberbylist"></uv-button>
	</view>
	<br />
</template>
	
<script>
	import {subfmemberlistbyuserid,submembergenderbyuserid} from "@/common/api/fmember.js"
	export default {
		data() {
			return {
				userinfo:{},
				selectuser_list:[
					{
						title:this.$t('father'),
						gender:'1',
						selected:false,
					},
					{
						title:this.$t('mother'),
						gender:'2',
						selected:false,
					},
					{
						title:this.$t('husband'),
						gender:'1',
						selected:false,
					},
					{
						title:this.$t('wife'),
						gender:'2',
						selected:false,
					},
					{
						title:'',
						gender:'1',
						selected:false,
					},
					{
						title:'',
						gender:'2',
						selected:false,
					},
				],
				other_member_1:"",
				other_member_2:"",
				showdiv:false,
				memberlist:[],
				letcount:0
			}
		},
		methods:{
			adduser(){
				
			},
			itemselect(index){
				this.selectuser_list[index-1].selected =!this.selectuser_list[index-1].selected; 
				if(index==5){
					this.selectuser_list[index-1].title = other_member_1;
				}
				if(index==6){
					this.selectuser_list[index-1].title = other_member_2;
				}
			},
			addother(gender){
				let title="";
				let fmemberid=this.memberlist.length+1
				let subanswerinfo={
				  userid: this.userinfo.id,
				  fmemberid:fmemberid,
				  stemid: 3,
				  answertype: 1,
				}
				if(1==gender){
					if(this.other_member_1.length<=0){
						this.$refs.toast.show({
							type: 'error',
							message: this.$t('member_title_null')
						})
						return false
					}
					title = this.other_member_1
					subanswerinfo.answeroption=this.$t('man')
					subanswerinfo.answeroptionid=64
				}
				if(2==gender){
					console.log(this.other_member_2,this.other_member_2.length)
					if(this.other_member_2.length<=0){
						this.$refs.toast.show({
							type: 'error',
							message: this.$t('member_title_null')
						})
						return false
					}
					title = this.other_member_2
					subanswerinfo.answeroption=this.$t('female')
					subanswerinfo.answeroptionid=65     
				}
				let subanswerlist=[]
				subanswerlist.push(subanswerinfo)
				var subinfo={        
				  answer: JSON.stringify(subanswerlist),
				  userid: this.userinfo.id,
				  fmemberid:this.memberlist.length,
				  srid: 0,
				  scaleid: 1, 
				  membername:title,
				  gender:gender  
				}
				submembergenderbyuserid(subinfo).then(res=>{
					res =res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
					}
					if(200==res.code){
						this.$refs.toast.show({
							type: 'success',
							message: this.$t('do_success')
						})
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
			  }); 
			},
			setshowdiv(){
				this.showdiv = !this.showdiv;
			},
			addmemberbylist(){
				let selectlist=[]
				this.selectuser_list.map(item=>{        
					if(item.selected){
					  selectlist.push(item)
					}
				})
				this.letcount = this.memberlist.length-2 +selectlist.length;
				if(this.letcount>this.userinfo.fmembercount){
					this.$refs.toast.show({
						type: 'error',
						message: this.$t('member_num_than_max')
					})
					return false
				}
				
				selectlist.map((item,index)=>{
					item.fmemberid=this.selectuser_list.length+index
					var answerinfo={
					  userid: this.userinfo.id,
					  fmemberid:item.fmemberid,
					  stemid: 3,
					  answertype: 1,
					}
					if(item.gender==1){
					  answerinfo.answeroption=this.$t('man')    
					  answerinfo.answeroptionid=64
					}else{
					  answerinfo.answeroption=this.$t('female') 
					  answerinfo.answeroptionid=65         
					}
					item.answer=JSON.stringify([answerinfo]);
				})
				let data ={
					memberlist:selectlist,
					mcount:selectlist.length,
					userid: this.userinfo.id,
				}
				subfmemberlistbyuserid(data).then(res=>{
					res =res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
					}
					if(200==res.code){
						this.$refs.toast.show({
							type: 'success',
							message: this.$t('do_success')
						})
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
				});
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('add_member')
			});
			this.userinfo = uni.getStorageSync("userinfo");
			this.memberlist=uni.getStorageSync('memberlist');
			
		}
	}
</script>

<style scoped>
	body{
	}
	.firsttitle{
	    font-size:46rpx;
	    line-height:50rpx;
	    font-weight:700;
	}
	.title_2{
		margin-top:15rpx;
		font-size:36rpx;
		font-weight:400;
		color:#666666 
	}
	.titlearea{
	    height:400rpx;
	    display:flex;
	    flex-direction:column;
	    justify-content: center;  
	    align-items:center;
	}
	.memberarea{
		width:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	.parentarea{
		width:80%;
		border-radius:15rpx;
		margin-top:10rpx;
		margin-bottom:10rpx;
		box-shadow:1px 2px 3px 2px rgba(0, 0, 0, 0.3);
		padding: 0.5em;
	}
	.addbtn{
		width:100rpx;
		height:50rpx;
		border-radius:25rpx;
		margin-top:10rpx;
		margin-bottom:10rpx;
		font-size:25rpx;
		color:#47689D;
		border:1rpx solid #47689d;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.paretareabutton_select{
	    width:100rpx;
	    height:50rpx;
	    border-radius:25rpx;
	    margin-top:10rpx;
	    margin-bottom:10rpx;
	    font-size:25rpx;
	    color:#FFF;
	    border:1rpx solid #47689d;
	    background:#47689D;
	    /*background-color:rgba(245, 154, 35, 1);*/
	    display:flex;
	    justify-content:center;
	    align-items:center;
	}
	.othermember{
	    margin-top:20rpx;
	    width:100%;
	    display:flex;
	    justify-content:center;
	    align-items:center;
	}
	.othermember .show_view{
		width:80%;
		height:50rpx;
		border:2rpx solid rgba(100, 142, 184, 1);
		text-align: center;
		padding: 0.5em;
		color: rgba(100, 142, 184, 1);
	}
	.memberarea2{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	.memberarea2 .item{
		width: 80%;
		padding: 1em;
	}
	.selectarea{
		margin-top: 10rpx;
	}
	.buttonarea{
	    margin-top:50rpx;
		margin-bottom: 5rem;
	    display:flex;
	    justify-content:center;
	    align-items:center;
	}
</style>