jpcj-xcx/pages/userset/index.vue

<template>
	<view class="">
		<van-cell center title="我的昵称" :value="userData.nickName"/>
		<van-cell title="我的头像" center>
		  <image class="image-ava" slot="right-icon" :src="userData.headImage">
		</van-cell>
		<van-popup :show="idCardShow" round>
			<view class="idCard">
				<van-divider contentPosition="center">绑定身份证信息</van-divider>
				<van-cell-group>
					<van-field :value="idCard" @change='idCardput' label="身份证" maxlength='18' placeholder="请输入身份证号" />
					<van-field :value="password" @change='passwordput' type="password" label="密码" placeholder="请输入密码" />
					<van-cell title="归属驾校地区" :value="area" @click='popup=!popup' />
				</van-cell-group>
				<view class="btn-box">
					<van-button @click='idCardShow=!idCardShow' type="default">取消绑定</van-button>
					<van-button @click='submitBinding' type="info" :loading='loading' loading-text="绑定中..">确认绑定</van-button>
				</view>
			</view>
		</van-popup>
		<van-popup :show="popup" position="bottom">
			<van-area :columns-placeholder="['请选择', '请选择']" value="35" @cancel='popup=!popup' @confirm='popup=!popup' :area-list="areaList"
			 @change='regionSelection' columns-num='2' />
		</van-popup>
	</view>
</template>

<script>
	import md5 from 'crypto-js/md5'
	import {
		login,
		getInfo,
		bindUserCard
	} from '@/api/login.js'
	export default {
		data() {
			return {
				loading: false,
				idCardShow: false,
				popup: false,
				idCard: null,
				password: null,
				areaCode: null,
				area: "请点击选择地区",
				areaList: {
					province_list: {
						35: '福建省',
					},
					city_list: {
						3501: '福州市',
						3502: '厦门市',
						3503: '莆田市',
						3504: '三明市',
						3505: '泉州市',
						3506: '漳州市',
						3507: '南平市',
						3508: '龙岩市',
						3509: '宁德市',
					}
				}
			}
		},
		computed: {
			userData() {
				return this.$store.getters.userInfo;
			}
		},
		methods: {
			regionSelection(e) {
				console.log(e)
				this.area = `${e.detail.values[0].name}  ${e.detail.values[1].name}`
				this.areaCode = e.detail.values[1].code
			},
			idCardput(e) {
				this.idCard = e.detail
			},
			passwordput(e) {
				this.password = e.detail
			},
			submitBinding() {
				console.log(this.areaCode, this.idCard, this.password)
				this.loading = true
				bindUserCard({
					city: this.areaCode,
					logincode: this.idCard,
					password: md5(this.password).toString()
				}).then((res) => {
					if (res.code == 200) {
						Toast.success('绑定成功');
						this.idCardShow = false
					} else if (res.code == 502) {
						Toast.fail(res.msg);
					} else {
						Toast.fail('系统内部错误');
					}
					this.loading = false
				})
			},
		}
	}
</script>

<style>
	.idCard {
		width: 600rpx;
		padding: 30rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.image-ava{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>