yxt-yythmall-ui-miniprogram/pages/me/base_info.vue

<template>

	<view style="display: flex;flex-direction: column;">

		<NavBar ref="nav" navTitle="个人信息" :showIcon="true" :supportChange="false">
		</NavBar>

		<loading-state ref="pageView" @request="request">

			<view @click="uploadHeadImage()" class="menu-item">
				<text class="text">头像</text>
				<image :src="page.photo" style="width: 70rpx;height: 70rpx;margin-right: 10rpx;"></image>
				<image class="more" src="../../static/more.png"></image>
			</view>
			<view class="line-thin"></view>
			<view @click="remark()" class="menu-item">
				<text class="text">昵称</text>
				<text class="explain">{{page.nick}}</text>
				<image class="more" src="../../static/more.png"></image>
			</view>
			<view class="line-thin"></view>
			<view class="menu-item">
				<text class="text">手机号</text>
				<text class="explain"></text>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">{{page.phone}}</button>
				<image class="more" src="../../static/more.png"></image>
			</view>

			<view class="line-thin"></view>
			<view @click="toRealInfo()" class="menu-item">
				<text class="text">实名信息</text>
				<text class="explain">{{page.realAttestationExplain}}</text>
				<image class="more" src="../../static/more.png"></image>
			</view>

			<view class="line-thin"></view>
			<view @click="bank()" class="menu-item">
				<text class="text">推荐支行</text>

				<zqs-select class="explain2" :multiple="false" :list="options" label-key="bankName" value-key="bankSid"
					title="选择支行" clearable v-model="page.customerBankName" placeholder=" 请选择支行" @search="searchEvent"
					@change="selectChange2"></zqs-select>

			</view>

		</loading-state>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" :value="page.nick" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						label: '沃尔玛（WALMART)',
						value: '0',
					},
					{
						label: '国家电网有限公司（STATE GRID)',
						value: '1',
					},
					{
						label: '中国石油天然气集团有限公司',
						value: '2',
					},
					{
						label: '苹果公司（APPLE)',
						value: '3',
					},
					{
						label: 'CVSHealth公司（CVS HEALTH)',
						value: '4',
					},
					{
						label: '联合健康集团（UNITEDHEALTH GROUP)',
						value: '5',
					},
					{
						label: '丰田汽车公司（TOYOTA MOTOR)',
						value: '6',
					}
				],
				page: {}
			}
		},
		onLoad(options) {
			this.request()
			uni.$on("real-info", (e) => {
				this.$nextTick(() => {
					this.$refs.pageView.setLoadState(0)
				})
				this.request();
			})
		},
		onUnload() {
			uni.$off('real-info');
		},
		methods: {
			// 获取数据
			request() {
				let _this = this
				_this.$api.getBaseInfo(getApp().globalData.sid).then((resp) => {
					_this.page = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
						_this.options = resp.customerBankList
					})

				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			uploadHeadImage() {
				let _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: _this.$api.headerUpload,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'userSid': getApp().globalData.sid
							},
							success: (uploadFileRes) => {
								_this.page.photo = JSON.parse(uploadFileRes.data).data;
							}
						});
					}
				});
			},
			// 修改昵称
			remark() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				let _this = this
				_this.$api.changeNick({
					userSid: getApp().globalData.sid,
					userNickName: val
				}).then((resp) => {
					_this.page.nick = val
				}).catch(e => {
					console.log(e);
				})
			},
			getPhoneNumber(e) {
				let _this = this
				console.log(e.detail.code)
				_this.$api.getPhone({
					userSid: getApp().globalData.sid,
					code: e.detail.code
				}).then((resp) => {
					_this.page.phone = resp
				}).catch(e => {
					console.log(e);
				})
			},
			toRealInfo() {
				uni.navigateTo({
					url: '/pages/me/RealInfo'
				})
			},
			bank() {},
			selectChange2(e) {
				// 此处为点击的事件
				let param = {
					userSid: getApp().globalData.sid,
					customerBankSid: e.bankSid
				}
				let _this = this
				_this.$api.saveTuiJianZhiHang(param).then((resp) => {
					_this.request()
				}).catch(e => {
					_this.request()
				})
			},
			searchEvent(val) {
				console.log('查询事件参数', val)
				// 此处把新的请求值 赋值给options
			},
		}
	}
</script>

<style lang="scss">
	button {
		color: #828282;
		background-color: #fff;
		font-size: 28rpx;
		padding-right: 10rpx;
	}


	button::after {
		border: 0;
	}

	// 修改点击时的样式
	.button-hover {
		color: #F85959;
		background-color: #fff;
	}

	page {
		background-color: #f1f2f3;
	}


	.menu-item {
		height: 112rpx;
		width: auto;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		padding-left: 36rpx;
		padding-right: 36rpx;
	}

	.more {
		width: 35rpx;
		height: 35rpx;
		float: right;
	}

	.menu-item .icon {
		width: 69rpx;
		height: 35rpx;
	}

	.menu-item .text {
		font-size: 32rpx;
		color: #101010;
		flex: 1;
		float: left;
	}

	.menu-item .explain {
		font-size: 28rpx;
		color: #828282;
		margin-right: 10rpx;
	}

	.menu-item .explain2 {
		font-size: 28rpx;
		color: #828282;
	}

	.line-thin {
		height: 1rpx;
		width: 100%;
		background-color: #eee;
	}
</style>