lishang/pages/collection/bank.vue

<template>
	<view class="content">
		<view class="box">
			<view class="item ">
				<text>姓名</text>
				<input type="text" value="" v-model="name" placeholder="请输入真实姓名" />
			</view>
			<view class="item top">
				<text>银行卡号</text>
				<input type="text" value="" v-model="id" placeholder="请输入银行卡账号" />
			</view>
			<view class="item">
				<text>所属银行</text>
				<input type="text" value="" v-model="idName" placeholder="请输入银行" />
			</view>
		</view>
		<button class="button"  @click="confirm()">确认</button>
		
	</view>
</template>

<script>
	import { userEdit } from '@/api/set.js';
	import { orderData,getUserInfo } from '@/api/user.js';
	import { mapState, mapMutations } from 'vuex';
	export default {
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		},
		data() {
			return {
				name:'',
				id:'',
				idName:''
			};
		},
		onLoad() {
			console.log(this.userInfo,'1111')
			if(this.userInfo.bank_code != null){
				this.id = this.userInfo.bank_code
			}
			if(this.userInfo.bank_name != null){
				this.idName = this.userInfo.bank_name
			}
			if(this.userInfo.bank_user_name != null){
				this.name = this.userInfo.bank_user_name
			}
		},
		methods:{
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			confirm(){
				let obj = this;
				console.log(obj,'112');
				if(!obj.name){
					return this.$api.msg('请输入提款人姓名');
				}
				if(!obj.id){
					return  this.$api.msg('请输入银行卡号')
				}
				if(!obj.idName){
					return this.$api.msg('请输入所属银行')
				}
				userEdit({
					bank_user_name:obj.name,
					bank_name:obj.idName,
					bank_code:obj.id
				}).then(e=>{
					return this.$api.msg('修改成功')
					obj.getUserInfo();
				})
				
			},
			// 更新用户信息
			getUserInfo() {
				getUserInfo({})
					.then(({ data }) => {
						console.log(data)
						this.setUserInfo(data);
						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
						orderData({})
							.then(({ data }) => {
								this.setOrderInfo(data);
								uni.navigateBack({
									delta: 1
								});
							})
							.catch(e => {
								this.setOrderInfo({
									complete_count: 0, //完成
									received_count: 0, //待收货
									unshipped_count: 0, //待发货
									order_count: 0, //订单总数
									unpaid_count: 0 //待付款
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss">
page , .content{
	height: 100%;
	padding: 0;
	margin: 0;
}
.top{
		border-top: 1rpx solid #F3F3F3;
		border-bottom: 1rpx solid #F3F3F3;
}
.box{
	background: #FFFFFF;
	margin: 20rpx 0 70rpx 0;
	.item{
		
		display: flex;
		align-items: center;
		text{
			margin: 0 40rpx 0 25rpx;
			width: 150rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 100rpx;
		}
		input{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 100rpx;
		}
	}

}
	.button{
		text-align: center;
		width: 560rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #44BFEC, #438BED);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
	}

</style>