shangjia1.1/pages/store/card.vue

<template>
	<view class="body">
		<view class="header">
			<view class="container">
				<view class="icon">
					<u-image height="60" width="60"
						src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/credit_card_icon.png"></u-image>
				</view>
				<view class="title">
					结算银行卡设置
				</view>
			</view>
		</view>
		<view class="line"></view>

		<view class="content">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<!--  <u-form-item
          label-width="260"
          :label-position="labelPosition"
          label="自动识别银行卡号:(拍照或上传图片)"
          prop="bank_name"
        >
          <image
            class="u-avatar-demo"
            @click="bankUpImg"
            :src="bankImgUp"
            style="width:120rpx;"
            mode="widthFix"
          ></image>
        </u-form-item> -->
				<u-form-item label-width="200" :label-position="labelPosition" label="收款人姓名:" prop="bank_name">
					<u-input :border="border" placeholder="请输入收款人姓名" v-model="form.bank_name" :disabled='true'></u-input>
				</u-form-item>
				<u-form-item label-width="200" :label-position="labelPosition" label="收款卡号:" prop="bank_no">
					<u-input :border="border" placeholder="请输入收款卡号" v-model="form.bank_no" :disabled='true'></u-input>
				</u-form-item>
				<u-form-item label-width="200" :label-position="labelPosition" label="确认收款卡号:" prop="bank_no">
					<u-input :border="border" placeholder="请再次输入收款卡号" v-model="form.bank_no2" :disabled='true'></u-input>
				</u-form-item>
				<u-form-item label-width="200" :label-position="labelPosition" label="银行:" prop="bank_com">
					<u-input :border="border" placeholder="请输入银行" v-model="form.bank_com" :disabled='true'></u-input>
				</u-form-item>
			</u-form>
		</view>

		<!--   <view style="margin-top: 60rpx;">
      <u-button
        :disabled="false"
        class="button"
        @click="submit"
      >保存设置</u-button>
    </view> -->

	</view>
</template>

<script>
	let that = {}
	export default {
		data() {
			return {
				showInfo: false,
				form: {
					payType: '提现到银行',
					payTypeValue: 2,
				},
				bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png', // 银行卡照片OCR
				openAutoPay: true,
				border: false,
				showPayType: false,
				labelPosition: 'left',
				errorType: ['message'],
				rules: {
					bank_name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							trigger: ['change', 'blur'],
						},
					]
				}
			};
		},
		onLoad: function() {
			that = this
			// that.init();
		},
		methods: {
			init() {
				getApp().globalData.util.request({
					s: 'Merch.Mershop_Bank.getBankCard',
				}).then(res => {
					if (res.data.ret == 200) {
						that.form = res.data.data;
						that.form.bank_no2 = res.data.data.bank_no
					}
				})
			},
			submit() {
				if (that.form.bank_no !== that.form.bank_no2) {
					uni.showModal({
						title: '提示',
						content: '两次输入的卡号不一致'
					});
					return
				}
				getApp().globalData.util.request({
					s: 'Merch.Mershop_Bank.updateBankCard',
					bank_com: that.form.bank_com,
					bank_no: that.form.bank_no,
					bank_name: that.form.bank_name,
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: res.data.data.res_msg,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					})
				})
			},
			selectColor(items) {
				if (items[0].value == 'no') {
					that.openAutoPay = false
				} else {
					that.openAutoPay = true
				}
			},
			bankUpImg() {
				getApp().globalData.util.upload().then(success => {
					that.bankImgUp = success
					that.getBankOCR(that.bankImgUp)
				})
			},
			// 银行卡识别OCR
			getBankOCR: function(fileUrl) {
				uni.showLoading({
					title: '识别中'
				})
				uni.request({
					url: 'https://yld.angyakeji.com/www/src/tools/aliyun/ocr.php',
					data: {
						fileUrl: fileUrl,
						type: 'bankcard'
					},
					complete: (res) => {
						uni.hideLoading()
						if (res.data && res.data.Data) {
							let fres = res.data.Data
							that.$set(that.form, 'bank_com', fres.BankName)
							that.$set(that.form, 'bank_no', fres.CardNumber)
							that.$set(that.form, 'bank_no2', fres.CardNumber)
						}
					},
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.header {
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.container {
			display: flex;
			flex-direction: row;
			justify-content: center;

			.title {
				padding-left: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				letter-spacing: 10rpx;
			}
		}
	}

	.body {
		margin-top: 0rpx;

		.payinfo {
			width: 90%;
			margin: 0 auto;
		}
	}

	.line {
		width: 100%;
		height: 10rpx;
		background: #f0ecec;
	}

	.content {
		margin: 30rpx;
		background: #ffffff;
		box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
		border-radius: 10px;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.button {
		width: 90%;
		font-size: 40rpx;
		background-color: #ed6d00;
		color: #ffffff;
		letter-spacing: 10rpx;
	}
</style>