guosen-ldt-shop/pages/shop-info/shop-info.vue

<template>
	<view>
		<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :background="background" :border-bottom="false"></u-navbar>
		<view class="bg"></view>
		<view class="card">
			<view class="title">店铺资料</view>
			<u-form :model="form" :label-width="labelWidth">
				<view class="border">
					<u-form-item label="用户名" prop="phone">
						<u-input :border="false" placeholder="请输入用户名" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="业务联系人" prop="phone">
						<u-input :border="false" placeholder="请输入业务联系人" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="tips">
					<text>*认证通过后，姓名将不可修改</text>
				</view>
				<view class="border">
					<u-form-item label="身份证号码" prop="phone">
						<u-input :border="false" placeholder="请输入身份证号码" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="photo border">
					<text>请拿出本人有效二代身份证件准备拍摄</text>
					<view class="box">
						<view class="flex flex-direction">
							<upload-img :width="$isEmpty(form.face)?430:430" :height="$isEmpty(form.face)?260:260"
								:currentImage="form.face" bgsrc="/static/icon/photo.png">
							</upload-img>
							<view class="text-center  padding-top-20 btn-color">
								<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								<text v-if="$isEmpty(form.face)">请上传身份证正脸照</text>
								<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
							</view>
						</view>
					</view>
					<view class="box">
						<view class="flex flex-direction">
							<upload-img :width="$isEmpty(form.face)?430:430" :height="$isEmpty(form.face)?260:260"
								:currentImage="form.face" bgsrc="/static/icon/photo.png">
							</upload-img>
							<view class="text-center  padding-top-20 btn-color">
								<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								<text v-if="$isEmpty(form.face)">请上传身份证正脸照</text>
								<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
							</view>
						</view>
					</view>
					<view style="margin: 30rpx 0;">
						<text>拍摄时确保身份证边框完整，字体清晰，亮度均匀</text>
					</view>
				</view>
				<view class="border">
					<u-form-item label="邮箱" prop="phone">
						<u-input :border="false" placeholder="请输入邮箱" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="联系方式" prop="phone">
						<u-input :border="false" placeholder="请输入联系方式" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="门店地址" prop="phone">
						<u-input @click="regionShow=true" :border="false" placeholder="请选择门店地址" v-model="form.address"
							type="select"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="具体地址" prop="phone">
						<u-input :border="false" placeholder="请输入具体地址" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="单位名称" prop="phone">
						<u-input :border="false" placeholder="请输入单位名称" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="公司网址" prop="phone">
						<u-input :border="false" placeholder="请输入公司网址" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="公司法人姓名" prop="phone" label-position="top">
						<u-input :border="false" placeholder="请输入公司法人姓名" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="公司种类" prop="phone">
						<u-input :border="false" placeholder="请添加公司种类" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="统一社会信用代码" prop="phone" label-position="top">
						<u-input :border="false" placeholder="请输入统一社会信用代码" v-model="form.account" type="number"></u-input>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="上传营业执照" prop="phone" label-position="top">
						<view class="flex-direction center margin-top-30">
							<upload-img :width="$isEmpty(form.face)?480:480" :height="$isEmpty(form.face)?300:300"
								:currentImage="form.face" bgsrc="/static/icon/upload.png">
							</upload-img>
							<view class="text-center  padding-top-20 btn-color">
								<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								<text v-if="$isEmpty(form.face)">请上传营业执照</text>
								<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="border">
					<u-form-item label="店铺实况" prop="phone" label-position="top">
						<view class="flex-direction center margin-top-30">
							<upload-img :width="$isEmpty(form.face)?480:480" :height="$isEmpty(form.face)?300:300"
								:currentImage="form.face" bgsrc="/static/icon/upload.png">
							</upload-img>
							<view class="text-center  padding-top-20 btn-color">
								<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								<text v-if="$isEmpty(form.face)">请上传店铺实况</text>
								<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
							</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="center flex-direction " style="margin-top: -100rpx;margin-bottom: 120rpx;">
			<view class="center margin-bottom-20">
				<text style="color: #949494;">确认注册即代表已阅读并同意</text>
				<text style="color: #104DFF;">《软件服务协议》</text>
			</view>
			<view @click="submit" class="btn cu-btn round" style="width:90%;height: 90rpx;font-size: 34rpx;">
				提交资料
			</view>
		</view>
		
		
		<u-picker mode="region" @confirm="regionConfirm" v-model="regionShow"></u-picker>
	</view>
</template>

<script>
	import uploadImg from "@/components/uploadimg/uploadImg.vue"
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				title:'',
				background: {
					backgroundColor: '#D18C42',
				},
				labelWidth: 170,
				form: {},
				regionShow: false,
			}
		},
		onPageScroll(e) {
			if (e.scrollTop>100) {
				this.title='店铺资料'
			}else{
				this.title=''
			}
		},
		methods: {
			regionConfirm(e) {
				this.form.address=e.province.label +'-'+e.city.label+'-'+e.area.label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 220rpx;
		background-image: linear-gradient(#D18C42, #C99864);
		border-radius: 0 0 30% 30%;
	}
	
	.btn{
		background-color: $color;
		color:#FFFFFF;
	}

	.border {
		border-bottom: 1rpx solid #F4F4F4;
	}

	.tips {
		color: $color;
		text-align: right;
		margin-top: 10rpx;
		font-size: 22rpx;
	}

	.card {
		box-shadow: 0 0 20rpx #bebebe;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		top: -180rpx;
		margin: 0 30rpx;
		padding: 40rpx;

		.title {
			margin-bottom: 30rpx;
			font-size: 40rpx;
			color: #000;
			font-weight: 800;
		}

		.photo {
			font-size: 26rpx;
			padding-top: 20rpx;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 50rpx;
			}
		}
	}
</style>