hqshop/pages/user/gzsq.vue

<template>
	<view class="content">
		<view class="tab-wrapper">
			<view class="itemx">
				<view class="item-tit">公司名称：</view>
				<input type="text" v-model="name" placeholder="请输入您的姓名" />
			</view>
			<view class="itemx">
				<view class="item-tit">负责人姓名：</view>
				<input type="text" v-model="phone" placeholder="请输入您的手机号" />
			</view>
			<view class="itemx">
				<view class="item-tit">联系方式：</view>
				<input type="text" v-model="phone" placeholder="请输入您的手机号" />
			</view>
			<view class="itemx">
				<view class="item-tit">身份证号：</view>
				<input type="text" v-model="area" placeholder="请输入店长区域" />
			</view>
		</view>
		<view class="scsfz-wrap">
			<image src="../../static/img/sfzzm.png" mode=""></image>
			<view class="" style="padding-bottom: 33rpx;">
				添加身份证正面
			</view>
			<image src="../../static/img/sfzzm.png" mode=""></image>
			<view class="">
				添加身份证反面
			</view>
		</view>
		<view class="tab-wrapper" style="padding-top: 0;">
			<view class="itemx">
				<view class="item-tit">店铺地址：</view>
				<input type="text" v-model="name" placeholder="请输入您的姓名" />
			</view>
			<view class="itemx"  style="height: 250rpx;">
				<view class="item-tit">营业执照：</view>
				<!-- <input type="text" v-model="name" placeholder="请输入您的姓名" /> -->
				<image src="../../static/img/add.png" mode=""></image>
			</view>
		</view>
		<view class="tab-wrapper" style="padding-top: 0;">
			<view class="itemx"  style="height: 250rpx;">
				<view class="item-tit">门店照片：</view>
				<!-- <input type="text" v-model="name" placeholder="请输入您的姓名" /> -->
				<image src="../../static/img/add.png" mode=""></image>
			</view>
		</view>
		<view class="sq-xz" @click="dagou = !dagou">
			<text class="sq-gou"  v-if="!dagou"></text>
			<image src="../../static/icon/gou.png" mode="" class="sq-gou-g" v-else></image>
			<text>我已阅读并同意</text><text @click.stop="lookXz" style="color: #375AFE;">《馆长申请须知》</text>
		</view>
		<view class="sq-btn" @click="subSq()">
			提交申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dagou: false,
			}
		},
		methods: {
			lookXz() {
				this.$api.msg('瞅啥瞅！')
			},
			subSq() {
				let obj = this
				if(!obj.dagou) {
					return this.$api.msg('打勾去啊，愣着干啥')
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.tab-wrapper {
		padding: 20rpx 30rpx;
		// background-color: #f2f3f5;

	}

	.itemx {
		margin: 0 auto;
		width: 100%;
		background-color: #fff !important;
		height: 100rpx;
		display: flex;
		// width: 690px;
		border: 1px #f4f4f4 solid;
		image {
			margin-top: 63rpx;
			margin-left: 55rpx;
			width: 160rpx;
			height: 160rpx;
		}
		.code {
			width: 150rpx;
			flex-shrink: 0;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF4C4C;
			line-height: 100rpx;
		}

		.item-tit {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			width: 220rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
		}

		input {
			width: 530rpx;
			padding-right: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.scsfz-wrap {
		width: 690rpx;
		height: 673rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 0 auto 20rpx;
		font-size: 29rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #B2B2B2;
		text-align: center;
		padding-top: 33rpx;
		image {
			display: block;
			width: 354rpx;
			height: 240rpx;
			margin: auto;
		}
	}
	.sq-btn {
		width: 750rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: linear-gradient(0deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.sq-xz {
		height: 32rpx;
		line-height: 32rpx;
		display: flex;
		margin: 21rpx 0 75rpx 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0C1732;
		.sq-gou {
			display: inline-block;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 1px solid #999;
			margin-right: 15rpx;
		}
		.sq-gou-g {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}
</style>