xinwang/pages/store/apply.vue

<template>
	<view class="wrapper">
		<template v-if="isStep == 1">
			<view class="" style="height: 135rpx;"></view>
			<view class="top"></view>
			<view class="item"><view class="item-top">特权一</view></view>
			<view class="item"><view class="item-top">特权一</view></view>
			<view class="item"><view class="item-top">特权一</view></view>
			<view class="btn" @click="changeStep">立即申请成为店长</view>
		</template>
		<template v-if="isStep == 2">
			<view class="tab-wrapper">
				<view class="tab-item">
					<view class="itemx">
						<view class="item-tit">姓名：</view>
						<input type="text" v-model="name" />
					</view>
					<view class="itemx">
						<view class="item-tit">推荐人编号：</view>
						<input type="text" v-model="name" />
					</view>
					<view class="itemx">
						<view class="item-tit">联系方式：</view>
						<input type="text" v-model="name" />
					</view>
					<view class="itemx">
						<view class="item-tit">验证码：</view>
						<input type="text" v-model="name" />
					</view>
				</view>
			</view>
			<view class="up-wrapper">
				身份证正反面
				<view class="imgs">
					<view class="imgs-item">
						<image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg(1)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg(1)"></image>
					</view>
					<view class="imgs-item">
						<image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg(2)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg(2)"></image>
					</view>
				</view>
			</view>
			<view class="up-wrapper">
				营业执照
				<view class="imgs">
					<view class="imgs-item">
						<image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg(1)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg(1)"></image>
					</view>
					<view class="imgs-item">
						<image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg(2)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg(2)"></image>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { upload } from '@/api/user.js';
export default {
	data() {
		return {
			isStep: 1,
			name: '',
			speed_id: '',
			phone: '',
			code: '',
			sfzz: '', //身份证正面
			sfzf: '' //身份证反面
		};
	},
	methods: {
		changeStep() {
			this.isStep = 2;
		},
		upImg(index) {
			let obj = this;
			upload({
				filename: ''
			}).then(res => {
				console.log(res[0].url);
				if (index == 1) {
					obj.sfzz = res[0].url;
				}
				if( index == 2) {
					obj.sfzf = res[0].url
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100%;
}
.top {
	margin: 0 auto 49rpx;
	width: 674rpx;
	height: 231rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 10rpx;
}
.item {
	margin: 44rpx auto;
	width: 674rpx;
	height: 176rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	border-radius: 10rpx;
	.item-top {
		width: 85rpx;
		line-height: 36rpx;
		background-color: #fed591;
		border-radius: 10rpx 18rpx 18rpx 0;
		text-align: center;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #975f4a;
	}
}
.btn {
	margin: 0 auto;
	width: 606rpx;
	height: 80rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 40rpx;
	font-size: 35rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #704e1c;
	line-height: 80rpx;
	text-align: center;
}
.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;
		.item-tit {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			width: 250rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
		}
		input {
			width: 440rpx;
			padding-right: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
}
.up-wrapper {
	margin: auto;
	padding: 38rpx 21rpx;
	width: 690rpx;
	// height: 250rpx;
	background: #ffffff;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	.imgs {
		padding: 27rpx 70rpx;
		display: flex;
		justify-content: space-around;
		.imgs-item {
			height: 160rpx;
			width: 160rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>