jobslink-user-clent/pageMy/federation/forMembership/perfectXin.vue

<template>
	<view >
		<view class="vip">
			<view class="body">
				<view class="name">
					<view class="">
						姓名：{{authInfo.realName}}
					</view>
					<view class="Gender">
						性别：{{authInfo.sex | sex}}
					</view>
				</view>
				<view class="idcard">
					身份证号：{{authInfo.idNumber}}
				</view>
				<view class="">
					手机号码：{{authInfo.telphone}}
				</view>
			</view>
		</view>
		<view v-if="status" class="informationWrap">
			<view class="informationBox">
				<view class="title">民族</view>
				<view class="btn btnGray">
					<view style="margin-right:23rpx;">{{authInfo.nation}}</view>
				</view>
			</view>
			<view class="informationBox">
				<view class="title">政治面貌</view>
				<view class="btn btnGray">
					<view style="margin-right:23rpx;">{{authInfo.politics}}</view>
				</view>
			</view>
		</view>
		<view v-else class="informationWrap">
			<picker @change="nationPickerChange" :value="nationIndex" :range="nation" range-key="name">
				<view class="informationBox">
					<view class="title">民族</view>
					<view class="btn">
						<view v-if="nationStatus" style="margin-right:23rpx;">{{nation[nationIndex].name}}</view>
						<view v-else style="margin-right:23rpx;">请选择</view>
						<image src="../../../static/img/right.svg" mode=""></image>
					</view>
				</view>
			</picker>
			<picker @change="politicsPickerChange" :value="politicsIndex" :range="politics" range-key="name">
				<view class="informationBox">
					<view class="title">政治面貌</view>
					<view class="btn">
						<view v-if="politicsStatus" style="margin-right:23rpx;">{{politics[politicsIndex].name}}</view>
						<view v-else style="margin-right:23rpx;">请选择</view>
						<image src="../../../static/img/right.svg" mode=""></image>
					</view>
				</view>
			</picker>
		</view>
		<view class="tips">
			注：确定后不可更改
		</view>
		
		<view class="checkbox" :class="{'active': checkedValue}" @click="change">
			<img v-if="checkedValue" src="../../static/img/federation/checkOk.png" alt="" style="width: 30rpx;height:30rpx;margin-right:12rpx;">
			<view v-else class="checkBoxView"></view>
			我申请加入石家庄新业态职工工会联合会
		</view>
		
		<view class="nextBtn" :class="{'nextBtnActive': checkedValue}" @click="submit">
			下一步
		</view>
		
	</view>
</template>

<script>
	import nationPolitics from '@/common/nationPolitics.js'
	import {setInfo} from '@/api/federation.js'
	import {
		mapGetters
	} from 'vuex'
	export default{
		data () {
			return {
				nation: nationPolitics.nation,
				politics: nationPolitics.politics,
				checkedValue: false,
				nationStatus: false,
				politicsStatus: false,
				status: false,
				nationIndex: 0,
				politicsIndex: 0,
			}
		},
		filters:{
			sex(number){
				if (number === 1) {
					return '男'
				} else
				if (number === 2) {
					return '女'
				}
			}
		},
		onShow() {
			var that = this
			this.$store.dispatch('refreshAuthState').then(e => {
				if(that.authInfo.nation && that.authInfo.politics) {
					that.status = true
					that.nationStatus = true
					that.politicsStatus = true
					that.checkedValue = true
				}
			})
		},
		methods:{
			submit(){
				if(!this.checkedValue) {
					uni.showToast({
						title: '请先勾选申请加入石家庄新业态职工工会联合会',
						icon: 'none'
					})
					return
				}
				if (!this.nationStatus || !this.politicsStatus) {
					uni.showToast({
						title: '请先填写完整信息',
						icon: 'none'
					})
					return
				}
				if(this.status) {
					this.go('/pageMy/federation/forMembership/forBook')
					return
				}
				var params = {
					nation: this.nation[this.nationIndex].name,
					politics: this.politics[this.politicsIndex].name
				}
				setInfo(params).then(res =>{
					this.go('/pageMy/federation/forMembership/forBook')
				})
			},
			nationPickerChange(e){
				this.nationStatus = true
				this.nationIndex = e.target.value
			},
			politicsPickerChange(e){
				this.politicsStatus = true
				this.politicsIndex = e.target.value
			},
			change(){
				this.checkedValue = !this.checkedValue
			},
			go(url) {
				uni.navigateTo({
					url
				})
			}
		},
		computed: {
			...mapGetters(['auth', 'authInfo'])
		}
	}
</script>

<style lang="scss">
	.active{
		color: #333333 !important;
	}
	.nextBtnActive{
		opacity: 1 !important;
	}
	.nextBtn{
		margin: 50rpx 30rpx;
		height: 80rpx;
		background: #1B66FF;
		opacity: 0.5;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	.checkbox{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		.checkBoxView{
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			border: 2rpx solid #999999;
			margin-right:12rpx;
		}
	}
	.tips{
		font-size: 26rpx;
		font-weight: 400;
		color: #1B66FF;
		line-height: 46rpx;
		margin: 60rpx 0 20rpx 30rpx;
	}
	
	.informationWrap{
		padding: 0 30rpx;
		.informationBox{
			height: 32rpx;
			background: #FEFEFE;
			padding: 64rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom:1px solid #F2F2F2;
			.title{
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
			.btn{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #1B66FF;
				image {
					width: 19rpx;
					height: 32rpx;
					margin-top: 4rpx;
				}
			}
			.btnGray{
				color: #999999 !important;
			}
			
		}
	}
	
	.vip{
		height: 138px;
		margin: 20rpx;
		background: url('../../static/img/federation/icon.png') no-repeat;
		background-size: cover;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		.body{
			padding: 59rpx 49rpx;
			.name{
				display: flex;
				justify-content: space-between;
			}
			.Gender{
				margin-right: 30px;
			}
			.idcard{
				margin: 20rpx 0;
			}
		}
		
	}
</style>