QianNiaoUser/pagesT/selfconfig/selfconfig.vue

<template>
	<view :class="['qn-page-' + theme]">
		<u-alert-tips type="warning" v-if="personnelReview === 5" show-icon title="您的用户信息修改后,账户需要重新审核,请谨慎操作"
			:description="description"></u-alert-tips>
		<view class="box clearfix" style="margin-top: 20rpx;height: 180upx;">
			<text class="auator float_left">头像</text>
			<view class="float_right auator-val">
				<QiniuUpload @uploadSuccess="uploadSuccess" :images="userInfo.avatar" :flag="true">
					<!-- <div slot="cont">
						<view class="user-img-view">
							<img class="imgs" :src="userInfo.avatar" alt="" />
							<text class="ibonfont ibonjinru"></text>
						</view>
					</div> -->
				</QiniuUpload>
			</view>
		</view>
		<view class="box clearfix">
			<span class="auator float_left">用户名</span>
			<view class="float_right">
				<input type="text" class="inputSty" v-model="userInfo.name" />
				<text class="ibonfont ibonjinru"></text>
			</view>
		</view>
		<view class="box clearfix">
			<text class="auator float_left">联系电话</text>
			<view class="float_right">
				<input type="text" class="inputSty" v-model="userInfo.contact.mobile" />
				<text class="ibonfont ibonjinru"></text>
			</view>
		</view>
		<RegionSel @pickerRegionChange="pickerRegionChange">
			<view class="box clearfix">
				<span class="auator float_left">地址</span>
				<view class="region float_right">
					<text v-if="region_name" style="font-size: 28rpx;">{{ region_name }}</text>
					<text v-else style="color: #999;font-size: 28rpx;">请选择</text>
					<text class="ibonfont ibonjinru"></text>
				</view>
			</view>
		</RegionSel>
		<view class="box clearfix">
			<text class="auator float_left">详细地址</text>
			<view class="float_right"><input class="inputSty" @blur="addressBlur" v-model="userInfo.contact.address"
					placeholder="请输入" /></view>
		</view>
		<view class="btn">
			<span class="replaLogin" @click="logOut">退出登录</span>
			<view class="replaConfig primary-bg" @click="replaceConfig">保存修改</view>
		</view>
		<u-modal :show-cancel-button="true" :confirm-color="primaryColor" v-model="modal_show" :content="content"
			@confirm="confirmEdit"></u-modal>
	</view>
</template>

<script>
	import RegionSel from '../components/region/RegionSel.vue';
	import QiniuUpload from '../components/qiniu/QiniuUpload.vue';
	import webUrl from '@/config.js';
	export default {
		data() {
			return {
				region_name: '',
				content: '请确认是否要提交修改您的用户信息',
				modal_show: false,
				userInfo: {
					name: '',
					avatar: '',
					remark: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					longitude: '',
					latitude: '',
					contact: {
						provinceCode: '',
						cityCode: '',
						districtCode: '',
						address: '',
						name: '',
						mobile: ''
					}
				}
			};
		},
		components: {
			RegionSel,
			QiniuUpload
		},
		computed: {
			// 客户审核
			personnelReview() {
				return this.$store.state.baseSet.personnelReview;
			}
		},
		onLoad() {
			this.getCustomerInfo();
		},
		methods: {
			logOut() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('userStatus');
				uni.removeStorageSync('cartPrice');
				uni.removeStorageSync('cartNum');
				uni.removeStorageSync('loginCode');
				uni.removeTabBarBadge({
					index: 2
				});
				this.$store.commit('commit_hasLogin', false);
				// #ifdef APP-PLUS||H5
				this.goPage('/pagesT/public/wxLogin', 'reLaunch');
				// #endif
				// #ifdef MP
				uni.navigateBack();
				// #endif
			},
			// 重新设置 提交
			confirmEdit() {
				this.$u.api.editCustomerInfo({
					...this.userInfo,
					avatar: this.userInfo.avatar[0]
				}).then(res => {
					this.modal_show = false
					if (this.personnelReview === 5) {
						uni.showToast({
							title: '修改成功,请等待审核'
						});
					} else {
						uni.showToast({
							title: '修改成功'
						});
					}
					setTimeout(async () => {
						await this.goPage('/pages/user/user', 'switchTab');
						await this.getCustomerInfo();
					}, 100);
				}).catch(err => {
					this.modal_show = false
				});
			},
			// 重新设置
			replaceConfig() {
				if (!this.userInfo.name) {
					this.$api.msg('请填写个人名称');
					return;
				} else if (!this.userInfo.contact.mobile) {
					this.$api.msg('请填写联系人电话');
					return;
				} else if (!this.userInfo.contact.districtCode) {
					this.$api.msg('请选择地址');
					return;
				} else if (!this.userInfo.contact.address) {
					this.$api.msg('请填写详细地址');
					return;
				}
				this.modal_show = true
			},
			// 获取省市区
			pickerRegionChange(row) {
				this.userInfo.provinceCode = row[0].value;
				this.userInfo.cityCode = row[1].value;
				this.userInfo.districtCode = row[2].value;
				this.userInfo.contact.provinceCode = row[0].value;
				this.userInfo.contact.cityCode = row[1].value;
				this.userInfo.contact.districtCode = row[2].value;
				this.region_name = row[0].label + '-' + row[1].label + '-' + row[2].label;
			},
			addressBlur() {
				if (!this.region_name) {
					this.$api.msg('请选择所属区域');
					return;
				}
			},
			// 上传图片
			uploadSuccess(res) {
				const uploadPicUrl = `${webUrl.QINIU_URL}/${res.key}`;
				// console.log(res.key, uploadPicUrl);
				this.userInfo.avatar = [uploadPicUrl];
			},
			// 获取用户信息
			async getCustomerInfo() {
				this.$u.api.getCustomerInfo().then(data => {
					uni.stopPullDownRefresh();
					let contact = {};
					if (data.data.contact.length) {
						contact = {
							id: data.data.contact[0].id,
							provinceCode: data.data.contact[0].provinceCode,
							cityCode: data.data.contact[0].cityCode,
							districtCode: data.data.contact[0].districtCode,
							address: data.data.contact[0].address,
							mobile: data.data.contact[0].mobile || data.data.mobile
						};
					} else {
						contact = {
							provinceCode: '',
							cityCode: '',
							districtCode: '',
							address: '',
							mobile: data.data.mobile
						};
					}
					this.userInfo = {
						...data.data,
						avatar: [data.data.avatar],
						contact: contact
					};
					console.log(this.userInfo);
					if (data.data.contact.length) {
						this.region_name = data.data.contact[0].area.provinceName + '-' + data.data.contact[0]
							.area.cityName + '-' + data.data.contact[0].area.districtName;
					} else {
						this.region_name = '';
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f9fc;
	}

	.btn {
		padding: 52upx;
		display: flex;
		justify-content: space-between;

		.replaLogin {
			line-height: 80upx;
			box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
			margin-right: 35upx;
			font-size: 30upx;
			text-align: center;
			color: #666;
			height: 75upx;
			background: rgba(241, 241, 241, 1);
			width: 300upx;
			display: inline-block;
		}

		.replaConfig {
			font-size: 30upx;
			text-align: center;
			color: #fff;
			width: 300upx;
			height: 75upx;
			border-radius: 10upx;
			line-height: 75upx;
		}
	}

	.box {
		background: #fff;
		height: 100upx;
		border-bottom: 1upx solid #f5f5f5;
		line-height: 100upx;
		padding: 0 20upx;
		font-size: 28upx;
	}

	.box .float_right {
		height: 100%;
		line-height: 100%;
	}

	.box .float_right .ibonfont {
		display: inline-block;
		vertical-align: middle;
		color: #999;
		font-size: 36upx;
	}

	.region {
		text-align: right;
		padding-top: 36upx;
	}

	.inputSty {
		display: inline-block;
		text-align: right;
		line-height: 100upx;
		height: 100upx;
		font-size: 28upx;
		vertical-align: middle;
		width: 340upx;
	}

	.auator {
		color: #333;
	}

	.auator-val {
		color: #666;
	}

	.auator-val .imgs {
		height: 80upx;
		width: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}

	.confirm-btn {
		margin-top: 50upx;
		height: 80upx;
		line-height: 80upx;
		font-size: $font-base + 2upx;
		background: $base-btn-bg;
		box-shadow: 0px 2px 14px 0px rgba(116, 190, 66, 0.4);
		border-radius: 60upx;
		display: inline-block;
	}

	.resetBtn {
		margin-top: 100upx;
		line-height: 80upx;
		border-radius: 60upx;
		display: inline-block;
		margin-left: 35upx;
		font-size: 30upx;
		text-align: center;
		color: #ffffff;
		background: $base-btn-bg;
		box-shadow: 0px 2px 14px 0px rgba(116, 190, 66, 0.4);
		width: 600upx;
	}
</style>