juliancheng/pages/mine/info.vue

<template>
	<view class="main">
		<view class="user-img flex justify-center align-center">
			<view class="user-avatar">
				<image @click="ChooseImage" :src="imglist" style="width: 100%;height: 100%;" class="cu-avatar round">
				</image>
			</view>
		</view>
		<view class="input-container">
			<view class="input-border round">
				<text class="label">姓名:</text>
				<input type="text" @click="VerifyPopup(user.realname)" :disabled="user.realname!=''" v-model="realname"
					placeholder="请输入您的姓名" class="input-item" />
			</view>
		</view>
		<view class="input-container">
			<view class="input-border round">
				<text class="label">手机号:</text>
				<input @click="rest(1)" disabled type="text" v-model="phone" placeholder="请输入您的手机号" class="input-item" />
			</view>
		</view>
		<view class="input-container">
			<view class="input-border round">
				<text class="label">所在地区:</text>
				<picker mode="multiSelector" @click="rest(user.city_index)" @change="bindMultiPickerChange"
					:disabled="user.city_index!=-1&&user.province_index!=-1" :value="multiIndex"
					@columnchange="bindMultiPickerColumnChange" :range="multiArray" range-key="name">
					<view class="picker">
						<view class="energy">
							{{areaname}}
						</view>
						<view class="energy-img">
							<uni-icons :size="30" class="uni-icon-wrapper" color="#F5CC57" type="arrowdown"
								style="padding-left:5px" />
						</view>
					</view>
				</picker>
			</view>
		</view>
		<!-- <view class="input-container">
			<view class="input-border round">
				<text class="label">加盟商:</text>
				<picker @change="bindPickerChange" @click="rest(user.partner_index)"
                :disabled="user.partner_index!=-1"
					:value="partner_index" :range="partners" range-key="company_name">
					<view class="picker">
						<view class="energy">
							{{ company_name}}
						</view>
						<view class="energy-img">
							<uni-icons :size="30" class="uni-icon-wrapper" color="#F5CC57" type="arrowdown"
								style="padding-left:5px;" />
						</view>
					</view>
				</picker>
			</view>
		</view> -->
        <view class="input-container">
            <view v-if="user.up_id" class="input-border round">
                <text class="label">推荐人:</text>
                <text class="text-gray">{{user.up_info? user.up_info.realname:'总部'}}</text>
            </view>
			<view v-else class="input-border round" @click="toSearchUp()">
				<text class="label">推荐人:</text>
                <input type="text" value="总部" class="input-item" disabled/>
                <uni-icons :size="30" class="uni-icon-wrapper" color="#F5CC57" type="search"
                    style="padding-left:5px;" />
			</view>
		</view>
		<!-- <view class="foot-btn">
			<view class="sub" @click="sutmit">提交</view>
			<view class="quxiao" @click="cancel">取消</view>
		</view> -->
		<view class="" style="width: 100%;padding: 0 100rpx;">
			<view class="submit" @click="sutmit">立即提交</view>
		</view>

		<view class="footer">
			信息仅用于身份验证，聚联诚集团保障您的安全
		</view>
		<!-- 公告框 -->
		<view class="cu-modal" :class="modalName == 'VerifyModal' ? 'show' : ''">
			<view class="cu-dialog top">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">无法修改，若需修改请联系客服</view>
			</view>
		</view>
		<!-- 提示框 -->
		<view class="cu-modal" :class="modalName == 'promptModal' ? 'show' : ''">
			<view class="cu-dialog top">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改成功</view>
					<view class="action" @tap="toHome">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					请前往首页上传征信报告
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import store from '@/store'
	export default {
		computed: {
			...mapState(['user']),
			...mapGetters({
				hasLogin: 'verifyJwt'
			})
		},
		data() {
			return {
				realname: '',
				card_number: '',
				phone: '',
				multiArray: [
					[],
					[]
				],
				multiIndex: [0, 0],
				tabindex: 0,
				ydindex: 0,
				firstid: '0',
				secondid: '0',
				thirdid: '0',
				dengswitchvalue: '',
				ktswitchvalue: '',
				card_front_img_url: '',
				card_back_img_url: '',
				partners: [],
				partner_index: 0,
				modalName: '',
				isinit: true,
				isshow: false,
				nickname: "",
				imglist: "",
				company_name: "请选择",
				areaname: "请选择"
			};
		},
		async onLoad(options) {
            await this.getUser(true);
            console.log(this.user)
            this.realname = this.user.realname;
            // this.card_number = this.user.card_number;
            this.phone = this.user.phone;
            this.partners = this.user.province_id;
            // this.card_front_img_url = this.user.card_front_img_url;
            // this.card_back_img_url = this.user.card_back_img_url;
            this.nickname = this.user.nickname
            this.imglist = this.user.avatar
            await this.getArea(0);
            if(this.multiArray[1][this.multiIndex[1]]){
                // 通过城市获取已填写的用户加盟商
                // this.gePartners(this.multiArray[1][this.multiIndex[1]].id, 2);
            }
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations({
				setJwt: 'setJwt',
				login: 'login'
			}),
            toSearchUp(){
                uni.navigateTo({
					url: '/pages/login/bindUp'
				});
			},
			rest(index) {
				if (index != -1) {
					this.modalName = 'VerifyModal'
				}
			},
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			VerifyPopup: function(data) {
				if (data) {
					this.modalName = 'VerifyModal'
				}
			},
			hideModal: function(e) {
				this.modalName = null;
			},
			userPhone: function(e) {
				this.phone = uni.getStorageSync('phone')
			},
			sutmit: function() {
				var that = this;
				// uni.login({
				// 	success: function(res) {
				// 		if (!res.code) {
				// 			uni.showModal({
				// 				title: '错误信息',
				// 				content: '修改失败',
				// 				showCancel: false
				// 			});
				// 		}
				// 	},
				// });
				that.requestRegister();
			},
			requestRegister: async function() {
				if (this.$util.isEmpty(this.realname)) {
					uni.showModal({
						title: '错误信息',
						content: '姓名必须填写',
						showCancel: false
					});
					return false;
				}
				// if (this.$util.isEmpty(this.card_number)) {
				// 	uni.showModal({
				// 		title: '错误信息',
				// 		content: '身份证号码必须填写',
				// 		showCancel: false
				// 	});
				// 	return false;
				// }
				if (!this.$util.isPhoneNumber(this.phone)) {
					uni.showModal({
						title: '错误信息',
						content: '请输入正确格式的手机号码',
						showCancel: false
					});
					return false;
				}
				// if (this.company_name == '请选择') {
				// 	uni.showToast({
				// 		title: "请选择合作商",
				// 		icon: "none",
				// 	})
				// 	return false
				// }
				// if (!this.$util.isIdCard(this.card_number)) {
				// 	uni.showModal({
				// 		title: '错误信息',
				// 		content: '请输入正确格式的身份证号',
				// 		showCancel: false
				// 	});
				// 	return false;
				// }
				console.log(this.partner_index)
				let res = await this.$request.post('/api/user/updateUser', {
					avatar: this.imglist,
					// nickname: this.nickname,
					realname: this.realname,
					// card_number: this.card_number,
					phone: this.phone,
					// card_front_img_url: this.card_front_img_url,
					// card_back_img_url: this.card_back_img_url,
					area_id: this.multiArray[1][this.multiIndex[1]].id,
					// partner_id: this.partners[this.partner_index].id
                    // up_id: 0
				}, true);
				if (res.code === 200) {
					console.log(res)
					// uni.showToast({
					// 	title: '修改成功',
					// 	icon: 'success',
					// 	duration: 1000
					// });
					// this.setJwt(res.data.token);
					// this.getUser(true)
					// this.login();
					// this.modalName = 'promptModal'
					// setTimeout(() => {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	});
					// 	this.modalName = ''
					// }, 1000);
					uni.reLaunch({
						url: './editinfo'
					})
				} else {
					uni.showModal({
						title: '错误信息',
						content: res.message,
						showCancel: false
					});
				}
			},
			bindPickerChange: function(e) {
				this.isshow = true
				this.partner_index = e.target.value;
				this.company_name = this.partners[this.partner_index].company_name
			},
			getArea: async function(parent_id) {
				let data = await this.$request.post('/api/common/areaList', {
					parent_id: parent_id
				});
				if (data.code == 200) {
					if (parent_id == 0) {
                        // 默认获取所有省份
						this.$set(this.multiArray, 0, data.data);
                        //console.log('multiArray==',this.multiArray)
						if (this.isinit && this.hasLogin && this.user.province_index > -1) {
                            // 初始化用户省份
							this.$set(this.multiIndex, 0, this.user.province_index);
						}
                        // 获取默认城市
						await this.getArea(this.multiArray[0][this.multiIndex[0]].id); // 获取城区
					} else {
                        // 城区数组
						this.$set(this.multiArray, 1, data.data);
						if (this.isinit && this.hasLogin && this.user.city_index > -1) {
                            // 初始化用户城市
							this.$set(this.multiIndex, 1, this.user.city_index);
						}
					}
					if (this.user.city_index != -1 && this.user.province_index != -1) {
						this.areaname = this.multiArray[0][this.multiIndex[0]].name + '，' +
                        (
                            this.multiArray[1][this.multiIndex[1]] ? this.multiArray[1][this.multiIndex[1]].name : ''
                        )
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			gePartners: async function(area_id, level) {
				let data = await this.$request.post('/api/common/partnerList', {
					area_id: area_id,
					level: 2
				});
				if (data.code == 200) {
					console.log(data)
					this.partners = data.data;
					if (this.isinit && this.hasLogin && this.user.partner_index > -1) {
						this.partner_index = this.user.partner_index;
						this.company_name = this.partners[this.partner_index].company_name
						this.isinit = false;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			cancel() {
				uni.navigateBack()
			},
			bindMultiPickerChange(e) {
                console.log('地区确认==', e)
				this.multiIndex = e.detail.value;
				this.areaname = this.multiArray[0][this.multiIndex[0]].name + '，' + this.multiArray[1][this.multiIndex[1]]
					.name
                this.gePartners(this.multiArray[1][this.multiIndex[1]].id, 2);
			},
			bindMultiPickerColumnChange(e) {
				console.log('地区联动==', e)
                this.partners = [] // 清空加盟商
                this.partner_index = -1 // 改变了地区需要重新选择加盟商
                this.company_name = "请选择"
				if (e.detail.column == 0) { // 0省份
					this.$set(this.multiIndex, 1, 0);
					this.$set(this.multiIndex, e.detail.column, e.detail.value);
					this.getArea(this.multiArray[0][this.multiIndex[0]].id);
				} else { //1城市
					this.$set(this.multiIndex, e.detail.column, e.detail.value);
				}
			},
			ChooseImage() {
				let me = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					// #ifdef MP-WEIXIN
					sizeType: ['original'],
					// #endif
					count: 1,
					success: async function(res) {
						let data = await me.$request.upload('api/common/uploadImg', res.tempFilePaths[0], {});
						if (data.code == 200) {
							me.imglist = data.data.file_url;
						} else {
							uni.showToast({
								icon: 'none',
								title: data.message
							});
						}
					}
				});
			},
			// 正面上传
			BeforeUpload() {
				if (this.card_front_img_url) {
					this.modalName = 'VerifyModal'
					return;
				}
				let me = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					// #ifdef MP-WEIXIN
					sizeType: ['original'],
					// #endif
					count: 1,
					success: async function(res) {
						let data = await me.$request.upload('/api/common/uploadImg', res.tempFilePaths[0], {});
						if (data.code == 200) {
							me.card_front_img_url = data.data.file_url;
						} else {
							uni.showToast({
								icon: 'none',
								title: data.message
							});
						}
					}
				});
			},
			// 反面上传
			AfterUpload() {
				if (this.card_back_img_url) {
					this.modalName = 'VerifyModal'
					return;
				}
				let me = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					// #ifdef MP-WEIXIN
					sizeType: ['original'],
					// #endif
					count: 1,
					success: async function(res) {
						let data = await me.$request.upload('/api/common/uploadImg', res.tempFilePaths[0], {})
						if (data.code == 200) {
							me.card_back_img_url = data.data.file_url;
						} else {
							uni.showToast({
								icon: 'none',
								title: data.message
							});
						}
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.main {
		width: 100vw;
		height: 100vh;
		background: #FFFFFF;
	}

	.user-img {
		height: 300rpx;
	}

	.user-avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.input-container {
		width: 100%;
		padding: 0 30rpx;
		margin: 15px 0;
	}

	.input-border {
		width: 100%;
		height: 90rpx;
		padding: 0 30rpx 0 40rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
		display: flex;
		align-items: center;
	}

	.label {
		width: 25%;
		font-size: 30rpx;
	}

	.submit {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background: #f5cc57;
		color: #fff;
		margin-top: 200rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	/*  */


	.line {
		width: 100vw;
		height: 110rpx;
		line-height: 110rpx;
		padding: 5px 15px;
		border-bottom: 1px solid #eee;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.line .name,
	.IdCardUpload .name {
		width: 27%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
	}

	.line .input {
		width: 72%;
		height: 40px;
		line-height: 40px;
	}

	.line .inputs {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.input-item {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 300;
		color: rgba(143, 143, 144, 1);
	}

	.yellowBtn {
		width: 296rpx;
		color: #FFFFFF !important;
		background: #f5cc57 !important;
	}

	picker {
		width: 80%;
	}

	.picker {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
	}

	.picker .energy {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 300;
		color: rgba(143, 143, 144, 1);
	}

	.quxiao,
	.sub {
		width: auto;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		float: right;
		border-radius: 5px;
	}

	.foot-btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.foot-btn .sub {
		background: #f5cc57;
		color: #fff;
		margin: 10px;
	}

	.foot-btn .quxiao {
		border: 1px solid #979797;
		color: #979797;
		margin: 10px;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	.IdCardUpload {
		width: 100vw;
		height: 180rpx;
		line-height: 180rpx;
		padding: 5px 15px;
		border-bottom: 1px solid #eee;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.IdCardUpload .IdCardImg {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.IdCardUpload .IdCardImg .imgBefore,
	.imgAfter {
		position: relative;
		width: 16.2vh;
		height: 8.2vh;
		line-height: 8.2vh;
		background-color: #f5f5f5;
		border: 1px solid #979797;
		text-align: center;
		font-size: 30px;
		border-radius: 8px;
		color: #f5cc57;
	}

	.imgBefore .imgBefore-btn,
	.imgAfter .imgAfter-btn {
		position: absolute;
		top: 12px;
		left: 44px;
		z-index: 1;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		font-size: 20px;
		font-weight: 600;
		border: 2px solid #f5cc57;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.idCardBefore {
		position: absolute;
		width: 130rpx;
		height: 50rpx;
		top: 14px;
		left: 20px;
	}

	.idCardAfter {
		position: absolute;
		width: 130rpx;
		height: 50rpx;
		top: 14px;
		left: 20px;
		z-index: 0;
	}

	.energy {
		display: flex;
		align-items: center;
	}

	.yellow {
		color: #f5cc57;
	}

	.yellowBg {
		background: #f5cc57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	.maring-top {
		margin-top: 15px;
	}
</style>