tlfb/pages/set/userinfo.vue

<template>
	<view class="content">
		<view class="tit">
			上传微信收款码
		</view>
		<view class="up-wrap" @click="imgsub('upimg')">
			<image :src="upimg" mode="" v-if="upimg"></image>
			<image v-else src="../../static/img/upimg.png" mode=""></image>
		</view>
		<view class="tit">
			基本信息
		</view>
		<view class="base-info">
			<view class="base-item" style="padding-bottom: 20rpx;">
				<view class="item-name">头像</view>
				<view class="avatar" @click="imgsub('avatar')">
					<image :src="avatar || '../../static/error/missing-face.png'" mode="" ></image>
				</view>
			</view>
			<view class="base-item flex">
				<view class="item-name">昵称</view>
				<input type="text" value="" class="item-val" placeholder="输入您的昵称" v-model="nickname" />
			</view>
			<view class="base-item flex">
				<view class="item-name">ID</view>
				<input type="text" value="" class="item-val" placeholder="输入您的昵称" v-model="uid" disabled/>
			</view>
			<view class="base-item flex">
				<view class="item-name">手机号</view>
				<input type="text" value="" class="item-val" placeholder="输入您的手机号" v-model="phone" />
			</view>
			<view class="base-item flex">
				<view class="item-name">姓名</view>
				<input type="text" value="" class="item-val" placeholder="输入您的姓名" v-model="real_name" />
			</view>
			<view class="base-item flex">
				<view class="item-name">微信号</view>
				<input type="text" value="" class="item-val" placeholder="输入您的微信号" v-model="wx_no" />
			</view>
			<view class="base-item flex">
				<view class="item-name">支付宝姓名</view>
				<input type="text" value="" class="item-val" placeholder="输入您的支付宝姓名" v-model="alipay_name" />
			</view>
			<view class="base-item flex">
				<view class="item-name">支付宝账号</view>
				<input type="text" value="" class="item-val" placeholder="输入您的支付宝账号" v-model="alipay_no" />
			</view>
			<view class="base-item flex">
				<view class="item-name">开户行</view>
				<input type="text" value="" class="item-val" placeholder="输入您的开户行" v-model="account_Bank" />
			</view>
			<view class="base-item flex">
				<view class="item-name">所属支行</view>
				<input type="text" value="" class="item-val" placeholder="输入所属支行" v-model="bank_branch" />
			</view>
			<view class="base-item flex">
				<view class="item-name">开户行姓名</view>
				<input type="text" value="" class="item-val" placeholder="输入您的开户行姓名" v-model="bank_name" />
			</view>
			<view class="base-item flex">
				<view class="item-name">银行卡账号</view>
				<input type="text" value="" class="item-val" placeholder="输入您的银行卡账号" v-model="bank_card" />
			</view>
		</view>
		<view class="btn" @click="subInfo">提交保存</view>
		<view class="btn1" @click="toLogout">退出登录</view>
		<view class="jg" style="height: 70rpx;">

		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { getUserInfo } from '@/api/user.js';
	import { edit } from '@/api/user.js';
	import { upload } from '@/api/order.js';
	  import { logout } from '@/api/set.js';
	export default {
		computed: {
			...mapState('user',['userInfo'])
		},
		data() {
			return {
				avatar: '',
				upimg: '',
				real_name: '',
				nickname: '',
				phone: '',
				wx_no: '',
				alipay_name: '',
				alipay_no: '',
				account_Bank: '',
				bank_branch: '',
				bank_card: '',
				bank_name: '',
				// birthday: '',
				city: '',
				card_id: '',//身份证
				uid: '',
				vip_name: ''
			}
		},
		onLoad() {
			let obj = this
			obj.avatar = obj.userInfo.avatar || ''
			obj.alipay_name = obj.userInfo.alipay_name || ''
			obj.alipay_no = obj.userInfo.alipay_no || '',
			obj.bank_branch = obj.userInfo.bank_branch || ''
			obj.account_Bank = obj.userInfo.account_Bank || ''
			obj.bank_card = obj.userInfo.bank_card || ''
			obj.uid = obj.userInfo.uid
			obj.bank_name = obj.userInfo.bank_name || ''
			// obj.birthday = obj.userInfo.birthday || ''
			// obj.card_id: obj.userInfo.card_id  || ''
			obj.upimg = obj.userInfo.wx_qr || ''
			obj.wx_no = obj.userInfo.wx_no || ''
			obj.phone = obj.userInfo.phone || ''
			obj.real_name = obj.userInfo.real_name || ''
			obj.nickname = obj.userInfo.nickname || ''
			console.log(obj.userInfo.vip_name,'obj.userInfo.vip_name')
			// obj.vip_name = obj.userInfo.vip_name || '暂无'
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo','logout']),
			//退出登录
			toLogout() {
				let obj = this;
				uni.showModal({
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							logout({}).then(e => {
								obj.logout();
								uni.navigateTo({
									url:'/pages/public/login'
								})
							})
							.catch(e => {
								console.log(e);
							});
						}
					}
				});
			},
			imgsub(text) {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					// this.upimg = data[0].url;
					this.$set(this,text,data[0].url)
				});
			},
			getUserInfo() {
				getUserInfo({})
					.then(({ data }) => {
						this.setUserInfo(data);
					})
					.catch(e => {
						console.log(e);
					});
			},
			bindDateChange(e) {
				this.birthday = e.detail.value
			},
			subInfo() {
				let obj = this
				if(obj.upimg == '') {
					obj.$api.msg('请上传收款码')
					return
				}
				if(obj.avatar == '') {
					obj.$api.msg('请上传头像')
					return
				}
				if(obj.nickname == '') {
					obj.$api.msg('请输入昵称')
					return
				}
				if(obj.phone == '') {
					obj.$api.msg('请输入手机号')
					return
				}
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.phone)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if(obj.real_name == '') {
					obj.$api.msg('请输入姓名')
					return
				}
				if(obj.wx_no == '') {
					obj.$api.msg('请输入微信号')
					return
				}
				if(obj.alipay_name == '') {
					obj.$api.msg('请输入支付宝姓名')
					return
				}
				if(obj.alipay_no == '') {
					obj.$api.msg('请输入支付宝账号')
					return
				}
				if(obj.account_Bank == '') {
					obj.$api.msg('请输入开户行')
					return
				}
				if(obj.bank_branch == '') {
					obj.$api.msg('请输入所属支行')
					return
				}
				if(obj.bank_name == '') {
					obj.$api.msg('请输入开户姓名')
					return
				}
				if(obj.bank_card == '') {
					obj.$api.msg('请输入银行卡账号')
					return
				}
				// if(obj.birthday == '') {
				// 	obj.$api.msg('请输入出生日期')
				// 	return
				// }
				
				uni.showLoading({
					title: '提交中...',
					mask:true
				})
				edit({
					avatar: obj.avatar,
					alipay_name: obj.alipay_name,
					alipay_no: obj.alipay_no,
					account_Bank: obj.account_Bank,
					bank_branch: obj.bank_branch,
					bank_card: obj.bank_card,
					bank_name: obj.bank_name,
					// birthday: obj.birthday,
					// card_id: obj.card_id,
					wx_no: obj.wx_no,
					phone: obj.phone,
					real_name: obj.real_name,
					nickname: obj.nickname,
					wx_qr: obj.upimg
					
				}).then( res => {
					obj.getUserInfo()
					
					obj.$api.msg('修改成功');
					setTimeout(()=> {
						uni.switchTab({
							url:'/pages/user/user'
						});
					}, 1000);
					
				}).catch( err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tit {
		padding: 30rpx 25rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #101010;
	}

	.up-wrap {
		margin-left: 30rpx;
		width: 225rpx;
		height: 225rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		image {
			width: 225rpx;
			height: 225rpx;
			border-radius: 10rpx;
		}
	}

	.base-info {
		margin: auto;
		width: 702rpx;
		// height: 1106px;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;

		.base-item {
			border: 1px solid #eee;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-left: 25rpx;
			
			.avatar {
				margin: auto;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				// background-color: #aaa;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}
			}
			.item-name {
				font-weight: bold;
			}
			.item-val {
				display: block;
				line-height: 100rpx;
				height: 100rpx;
				width: 478rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
			}
		}

	}

	.btn {
		margin: 70rpx auto 0;
		width: 702rpx;
		line-height: 84rpx;
		background: linear-gradient(30deg, #FF4C4C, #FE6238);
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.btn1 {
		margin: 30rpx auto 0;
		width: 702rpx;
		line-height: 84rpx;
		color: #FF4C4C;
		border: 1px solid #FF4C4C;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
	}
</style>