jpcj-xcx/pages/index/components/user.vue

<template>
	<view class="content">
		<view class="top">
			<view class="avabox">
				<van-image round class='img' width="200rpx" height="200rpx" :src="userData.headImage" />
				<view class="avatitbox">
					<text>{{userData.nickName}}</text>
					<text v-if="userData.gzptUserId">{{studentInfo.logincode}}</text>
					<view class="sync-btn" @tap='getUserProfile'>点击同步用户头像昵称</view>
					<!-- <text v-else @click="idCardShow=!idCardShow">未绑定身份证点击绑定</text> -->
				</view>
			</view>
		</view>

		<view class="serviceBox">
			<view class="tit">
				<text>我的服务</text>
			</view>
			<view class="btnBox">
				<button class="item-box" :plain='true' @click="goPage('/pages/user/order')">
					<van-icon name="/static/imgs/order-icon.png" size="22px" />
					<text class="text">我的订单</text>
				</button>
				<button class="item-box" :plain='true' @click="goPage('/pages/collectionList/index')">
					<van-icon name="/static/imgs/wdsc.png" size="22px" />
					<text class="text">我的收藏</text>
				</button>
				<button class="item-box" :plain='true' @click="goPage('/pages/browserecord/index')">
					<van-icon name="/static/imgs/llzj.png" size="22px" />
					<text class="text">浏览足迹</text>
				</button>
				<button class="item-box" :plain='true' open-type='feedback'>
					<van-icon name="/static/imgs/yjfk.png" size="22px" />
					<text class="text">意见反馈</text>
				</button>
			</view>

		</view>

		<view class="serviceBox">
			<view class="tit">
				<text>我的信息</text>
			</view>
			<van-cell title="我的设置" icon="/static/imgs/wdsz.png" is-link @tap="goPage('/pages/userset/index')" />
			<button class="server" open-type="contact" :plain='true'>
				<van-cell title="联系客服" icon="/static/imgs/lxkf.png" is-link />
			</button>

		</view>
		
		<view class="ad-box serviceBox">
			<ad unit-id="adunit-d8c1548cc9663765"></ad>
		</view>
		
		<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 square from '@/components/square/index.vue'
	import md5 from 'crypto-js/md5'
	import Toast from '@/wxcomponents/vant/toast/toast';
	import {
		login,
		getInfo,
		bindUserCard,
		updateUserInfo
	} from '@/api/login.js'
	import {
		getStudentInfo
	} from '@/api/studytime.js'
	export default {
		components: {
			square
		},
		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.state.user.userInfo;
			}
		},
		mounted() {
			this.initUserInfo()
		},
		methods: {
			async initUserInfo() {
				await this.$store.dispatch('GetInfo')
			},
			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
				})
			},
			regionSelection(e) {
				console.log(e)
				this.area = `${e.detail.values[0].name}  ${e.detail.values[1].name}`
				this.areaCode = e.detail.values[1].code
			},
			async getUserProfile(e) {
				let userInfo = await wx.getUserProfile({
					desc: '业务需要'
				})
				let updateRes = await updateUserInfo({
					headImage: userInfo.userInfo.avatarUrl,
					nickName: userInfo.userInfo.nickName
				})
				if (updateRes.code == 200) {
					// this.$store.dispatch('GetInfo')
					this.$store.state.user.userInfo.headImage=userInfo.userInfo.avatarUrl
					this.$store.state.user.userInfo.nickName=userInfo.userInfo.nickName
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.ad-box{
		margin: 40rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.server {
		border: none;
		background-color: none;
		margin: 0;
		padding: 0;
		text-align: left;
		display: flexbox;
	}

	.idCard {
		width: 600rpx;
		padding: 30rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btn-box {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.content {}

	.top {
		padding-top: 100rpx;
		background-image: url("/static/imgs/bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.avabox {
			display: flex;
			padding: 10%;

			.img {
				border-radius: 50%;
			}

			.sync-btn {
				margin-top: 20rpx;
				height: 40rpx;
			}

			.avatitbox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				color: #FFFFFF;
				height: 100rpx;
			}
		}
	}




	.serviceBox {
		background-color: #fff;
		margin: 30rpx;
		border-radius: 10rpx;

		.tit {
			padding: 26rpx;
			border-bottom: 1rpx solid #E8E8E8;
		}

		.btnBox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 200rpx;
				margin-top: 20rpx;
				padding: 20rpx;
				border: none;

				.text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
</style>