pages/sub_index/activateCard.vue

<template>
	<view class="activateCard">
		<view class="activateCard-list">
			<u-field v-model="name" label="姓名" placeholder="请输入真实姓名" clear-size="40"></u-field>
			<u-field v-model="tel" label="电话" placeholder="请填写联系电话" clear-size="40"></u-field>
			<u-field v-model="address" label="地址" placeholder="请填写地址" clear-size="40"></u-field>
		</view>
		<view class="activateCard-getId">
			<text class="activateCard-getId-title">身份证上传</text>
			<view class="activateCard-getId-photo">
				<u-upload ref="uUpload" @on-uploaded="onUploaded" :action="action" :auto-upload="false" max-count="1" :custom-btn="true">
					<view slot="addBtn" class="slot-btn">
						<u-image src="/images/activateCard/photo.png" width="100%" height="100%" mode="aspectFit"></u-image>
					</view>
				</u-upload>
				<u-upload ref="uUpload" @on-uploaded="onUploaded" :action="action" :auto-upload="false" max-count="1" :custom-btn="true">
					<view slot="addBtn" class="slot-btn">
						<u-image src="/images/activateCard/photo1.png" width="100%" height="100%" mode="aspectFit"></u-image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="activateCard-getId">
			<text class="activateCard-getId-title">其他证件上传</text>
			<view class="activateCard-getId-photo">
				<u-upload ref="uUpload" @on-uploaded="onUploaded" :action="action" :auto-upload="false" max-count="1" :custom-btn="true">
					<view slot="addBtn" class="slot-btn">
						<u-image src="/images/activateCard/photo2.png" width="100%" height="100%" mode="aspectFit"></u-image>
					</view>
				</u-upload>
				<u-upload ref="uUpload" @on-uploaded="onUploaded" :action="action" :auto-upload="false" max-count="1" :custom-btn="true">
					<view slot="addBtn" class="slot-btn">
						<u-image src="/images/activateCard/photo2.png" width="100%" height="100%" mode="aspectFit"></u-image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="activateCard-footer">
			<text>规则说明：</text>
			<text>若是外来居民，则需要上传居住证;</text>
			<text>若是申请普通卡，则需要上传身份证;</text>
			<text>若是申请学生卡，则需要上传身份证、学生证、户口本;</text>
			<text>若是申请爱心卡，则需要上传身份证、低保证;</text>
			<text>若是申请老年卡，则需要上传身份证、老年优待证。</text>
		</view>
		<u-button :custom-style="activateCardBtn" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				tel: "",
				address: "",
				filesArr: [],
				action: "http://www.example.com/upload",
				activateCardBtn: {
					width: '600rpx',
					backgroundColor: '#2FA8E1',
				    color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '30rpx',
					padding: '50rpx 0'
				}

			}
		},
		methods: {
			onUploaded(lists) {
				this.filesArr = lists;
			},
			submit() {
				this.$refs.uUpload.upload();
			},
			submit(){
				uni.showToast({
					title:"app开卡功能尚未开启",
					icon:'none',
					duration:1500
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.slot-btn {
		width: 350rpx;
		height: 300rpx;
	}

	.activateCard {
		width: 100vw;
		// height: 100vh;
		background-color: #F3F3F3;
		overflow: hidden;
		padding-bottom: 30rpx;

		&-list {
			margin-top: 30rpx;
			background-color: #FFFFFF;
		}

		&-getId {
			width: 720rpx;
			margin: 30rpx auto 0;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx 10rpx;

			&-title {
				font-family: "PingFang-SC-Medium";
				font-size: 30rpx;
			}

			&-photo {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		&-footer {
			// margin-top: 30rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			font-family: "PingFang-SC-Medium";
			font-size: 26rpx;

			text {
				&:nth-child(1) {
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		&-btn {
			width: 600rpx;
			background-color: #2FA8E1;
			color: #FFFFFF;
			font-family: "PingFang-SC-Medium";
			font-size: 30rpx;
			margin-top: 30rpx;
			padding: 50rpx 0;
		}
	}
</style>