frontend-app/pages/rwa_package/merchant_settlement/merchant_settlement.vue

<template>
	<view class="merchant_settlement_warp">
		<!-- <view class="card_comm">
			<view class="title_">上传店铺LOGO</view>
			<view class="msg_">上传店铺LOGO、品牌标志。</view>
			<view class="upload_comm">
				<view class="upload_msg_">上传LOGO</view>
			</view>
		</view> -->
		<view class="card_comm card_hang_comm">
			<view class="title_">店铺名称</view>
			<up-input placeholder="请输入店铺名称" clearable border="none" v-model="form.storeName"></up-input>
		</view>
		<view class="card_comm card_hang_comm">
			<view class="title_">店铺地址</view>
			<up-input placeholder="请输入店铺地址" clearable border="none" v-model="form.address"></up-input>
		</view>
		<!-- <view class="card_comm">
			<view class="title_">上传店铺环境照片</view>
			<view class="msg_">上传店铺背景图片，用于装修店铺主页。</view>
			<view class="upload_comm">
				<view class="upload_msg_">上传照片</view>
			</view>
		</view>
		<view class="card_comm">
			<view class="title_">营业执照</view>
			<view class="msg_">上传店铺营业执照</view>
			<view class="business_license_upload_comm">
				<view class="upload_msg_">上传营业执照</view>
			</view>
		</view> -->
		<!-- 商户本人信息 -->
		<view class="data_common_warp">
			<view class="data_msg">请填写商户本人的相关信息</view>
			<view :class="item.id < formList.length ? 'add_form_item add_form_item_but' : 'add_form_item'"
				v-for="item in formList" :key="item.id">
				<view class="add_form_title">{{ item.title }}</view>
				<up-input :placeholder="item.placeholder" border="surround" v-model="form[item.formName]"
					:customStyle="inputCss" :type="item.type"></up-input>
			</view>
		</view>
		<!-- 证件照 -->
		<CommonCard @valueFunc="getValue" />
		<!-- 商户银行账户信息 -->
		<view class="data_common_warp">
			<view class="data_msg">商户银行账户信息</view>
			<view :class="item.id < bankList.length ? 'add_form_item add_form_item_but' : 'add_form_item'"
				v-for="item in bankList" :key="item.id">
				<view class="add_form_title">{{ item.title }}</view>
				<up-input :placeholder="item.placeholder" border="surround" v-model="form[item.formName]"
					:customStyle="inputCss" :type="item.type"></up-input>
			</view>
		</view>
		<view class="add_but" @click="addFun">
			提交
		</view>
		<up-toast ref="uToastRef"></up-toast>
		<qiaobao-assistant page-key="pages/rwa_package/merchant_settlement/merchant_settlement" title="商家入驻" />
	</view>
</template>

<script>
import CommonCard from '@/components/common_card.vue'

export default {
	components: { CommonCard },
	data() {
		return {
			form: {
				storeName: '',// 店铺名称
				address: "",// 店铺地址
				name: null,
				mobile: null,
				number: null,
				bankOpening: null,// 开户银行
				bankNumber: null,// 银行卡号
				bankName: null,// 所属银行
				bankMobile: null,// 银行预留手机号码
				certFimg: null,// 正面
				certBimg: null,// 反面
			},
			formList: [
				{
					id: 1,
					title: "真实姓名",
					formName: "name",
					placeholder: "请输入您的真实姓名",
					type: "text",
				}, {
					id: 2,
					title: "手机号",
					formName: "mobile",
					placeholder: "请输入手机号",
					type: "number",
				}, {
					id: 3,
					title: "证件号码",
					formName: "number",
					placeholder: "请输入证件号码",
					type: "text",
				}
			],
			inputCss: {
				"height": '80rpx',
				"border-radius": "30rpx",
				"border": "0rpx",
			},
			bankList: [
				{
					id: 1,
					title: "开户行",
					formName: "bankOpening",
					placeholder: "请输入开户行",
					type: "text",
				}, {
					id: 2,
					title: "银行卡号",
					formName: "bankNumber",
					placeholder: "请输入银行卡号",
					type: "number",
				}, {
					id: 3,
					title: "所属银行",
					formName: "bankName",
					placeholder: "请输入所属银行",
					type: "text",
				}, {
					id: 4,
					title: "预留手机号",
					formName: "bankMobile",
					placeholder: "请输入银行预留手机号",
					type: "number",
				}
			]
		};
	},
	methods: {
		// 确认提交
		addFun() {
			const params = {
				...this.form,
			}
			if (!params.storeName) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入店铺名称",
				});
				return;
			}
			if (!params.address) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入店铺地址",
				});
				return;
			}
			if (!params.name) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入真实姓名",
				});
				return;
			}
			if (!params.mobile) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入手机号码",
				});
				return;
			}
			if (!params.number) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入证件号码",
				});
				return;
			}
			this.$refs.uToastRef.show({
				type: 'success',
				message: "提交成功",
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/other_package/merchant_settlement_ok/merchant_settlement_ok',
				})
			}, 1000)
		},
		getValue(type, value) {
			if (type === "Z") {
				this.form.certFimg = value;
			} else if (type === "F") {
				this.form.certBimg = value;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.merchant_settlement_warp {
	padding: 30rpx;
	background-color: $app-bj;
	height: calc(100vh - 58rpx);
	overflow: auto;

	.card_comm {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.title_ {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-right: 20rpx;
		}

		.msg_ {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
		}
	}

	.card_hang_comm {
		display: flex;
	}

	.upload_comm {
		height: 64rpx;
		width: 180rpx;
		background-image: url("https://static.tbmall.xin/static/merchant_settlement_opt_1.png");
		background-size: 100% 100%;
		background-position: center;
		/* 将图片居中显示 */
		margin-top: 20rpx;
		padding-top: 120rpx;
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #525357;
	}

	.business_license_upload_comm {
		height: 74rpx;
		width: 420rpx;
		background-image: url("https://static.tbmall.xin/static/merchant_settlement_opt_2.png");
		background-size: 100% 100%;
		background-position: center;
		/* 将图片居中显示 */
		margin-top: 20rpx;
		padding-top: 220rpx;
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #525357;
	}
}

.add_but {
	position: inherit;
	width: 100%;
	margin: 40rpx 0 60rpx;
}
</style>