odd_job_applet/pages/my/mybank.vue

<template>
	<view>


		<form>
			<view class="cu-list menu margin-top-sm">
				<view class="cu-item arrow" data-title="开户行" data-infobox="input" data-field="openbank" :data-value="bankcard.openbank" @click="showModal">
					<view class="content">
						<text>开户行</text>
					</view>
					<view class="action">
						<text class="text-grey">{{bankcard.openbank}}</text>
					</view>
				</view>
				<view class="cu-item arrow" data-title="帐户名" data-infobox="input" data-field="account" :data-value="bankcard.account" @click="showModal">
					<view class="content">
						<text>帐户名</text>
					</view>
					<view class="action">
						<text class="text-grey">{{bankcard.account}}</text>
					</view>
				</view>
				<view class="cu-item arrow" data-title="银行卡号" data-infobox="input" data-field="number" :data-value="bankcard.number" @click="showModal">
					<view class="content">
						<text>银行卡号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{bankcard.number}}</text>
					</view>
				</view>
			</view>
			
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @tap="setBankcard">提交银行卡信息</button>
			</view>
		</form>
		
			
		<view class="cu-modal" :class="forminfo.isshow">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">输入 {{forminfo.title}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-grey"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left solid-top solid-bottom">
					<input :placeholder="'请输入'+forminfo.title+'...'" @input="bindInput" :value="forminfo.value"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-grey text-grey" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="subModal">确定</button>
					</view>
				</view>
			</view>
		</view>
			
		<view class="padding"></view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				userinfo: {},
				forminfo: {
					isshow: "",
					title: "",
					field: "",
					value: ""
				},
				bankcard: {
					openbank: "",
					account: "",
					number: ""
				}
			}
		},
		onLoad: function() {
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
			_this.bankcard.openbank = _this.userinfo.bankcard.openbank || "";
			_this.bankcard.account = _this.userinfo.bankcard.account || "";
			_this.bankcard.number = _this.userinfo.bankcard.number || "";
		},
		methods: {
			// 填写字段
			hideModal: function() {
				_this.forminfo = {
					isshow: "",
					title: "",
					field: "",
					value: ""
				};
			},
			showModal: function(e) {
				_this.forminfo.title = e.currentTarget.dataset.title;
				_this.forminfo.field = e.currentTarget.dataset.field;
				_this.forminfo.value = e.currentTarget.dataset.value;
				_this.forminfo.isshow = "show";
			},
			bindInput: function(e) {
				_this.forminfo.value = e.detail.value;
			},
			subModal: function() {
				_this.editFiled( _this.forminfo.field, _this.forminfo.value );
			},

			editFiled: function (field, value) {
				_this.bankcard[field] = value;
				_this.hideModal();
			},
			// 提交信息
			setBankcard: function () {
				_this.$req.ajax({
					path: "my/edituserbankinfo",
					data: {
						userid: _this.userinfo.id,
						openbank: _this.bankcard.openbank,
						account: _this.bankcard.account,
						number: _this.bankcard.number
					}
				}).then((data) => {
					_this.userinfo = data;
					uni.setStorageSync('userinfo', data);
					uni.showModal({
						title: '温馨提示',
						content: '银行卡信息提交成功。',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: "/pages/my/my"
								});
							}
						}
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			}
			
		}
	}
</script>

<style>	
</style>