xmt/pages/collection/bank.vue

<template>
	<view class="content">
		<view class="box">
			<view class="item ">
				<text>姓名</text>
				<input type="text" v-model="name" value="" placeholder="请输入真实姓名" />
			</view>
			<view class="item top">
				<text>银行卡号</text>
				<input type="text" v-model="id" value="" placeholder="请输入银行卡账号" />
			</view>
			<view class="item">
				<text>所属银行</text>
				<input type="text" v-model="idName" value="" placeholder="请输入银行" />
			</view>
		</view>
		<view class="button" @click="confirm()">确认</view>
	</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() {
		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;
			if (!obj.name) {
				return this.$api.msg('请输入提款人姓名');
			}
			if (!obj.idName) {
				return this.$api.msg('请输入所属银行');
			}
			if (!obj.id) {
				return this.$api.msg('请输入银行卡号');
			}
			userEdit({
				bank_user_name: obj.name,
				bank_name: obj.idName,
				bank_code: obj.id
			}).then(e => {
				obj.$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: #5dbc7c;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: PingFangSC;
	font-weight: 500;
	color: #ffffff;
	line-height: 80rpx;
	margin: 0 auto;
}
</style>