sailun-tbr-web/pages/login/register.vue

<template>
	<view>
		<u-card :border="false" padding="30" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false">
			<view slot="head">
				<view class="u-flex">
					<view style="width: 8rpx;height: 34rpx;background: #0292FD;margin-right:20rpx;"></view>
					请按照要求上传您的营业执照和门店照
				</view>
			</view>
			<view slot="body">
				<u-upload :custom-btn="true" max-count="1" :action="action" class="u-flex u-row-center">
					<view slot="addBtn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-image width="475rpx" height="303rpx" src="../../static/sailun/upload_preview.png"></u-image>
					</view>
				</u-upload>
				<view class="u-flex u-row-center" style="color: #787878;margin: 20rpx 0 60rpx 0;">
					点击上传营业执照
				</view>
				<u-upload :custom-btn="true" max-count="1" :action="action" class="u-flex u-row-center">
					<view slot="addBtn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-image width="475rpx" height="303rpx" src="../../static/sailun/upload_preview.png"></u-image>
					</view>
				</u-upload>
				<view class="u-flex u-row-center" style="color: #787878;margin: 20rpx 0;">
					点击上传门头照
				</view>
			</view>
		</u-card>
		<view style="color: #787878;margin-left: 40rpx;">
			注：上传完营业执照请确认和营业执照一致。
		</view>
		<view style="margin: 30rpx;">
			<u-button type="primary" :ripple="true" ripple-bg-color="#99d4ff" @click="nextStep">下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com', // 演示地址
			};
		},
		methods: {
			nextStep() {
				this.$u.route({
					url: 'pages/login/register_2',
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>