advertisementAdd.vue 7.68 KB
<template>
	<view class="page">
		<view class="steps-box">
			<u-steps :list="numList" :current="active"></u-steps>
		</view>
		<view>
			<view v-if="active == 0">
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<view class="add-list">
						<u-form-item label="投放时段" prop="name" borderBottom>
							<u-input v-model="model1.name" type="select" @click="toChangeTime"></u-input>
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="跳转类型" prop="name" borderBottom>
							<u-input v-model="model1.name" ></u-input>
						</u-form-item>
						<u-form-item label="链接" prop="name" borderBottom>
							<u-input v-model="model1.name" ></u-input>
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="封面图片" prop="name" borderBottom labelPosition="top">
							<u-upload :active="active" :file-list="model1.fileList" ></u-upload>
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="广告标题" prop="name" borderBottom labelPosition="top">
							<u-input v-model="model1.name" />
						</u-form-item>
					</view>
					
				</u-form>
			</view>
			<view class="add-list" v-else-if='active == 1'>
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<u-form-item label="主体名称" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="统一社会信用代码" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="类型" prop="type" borderBottom>
						<u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/>
						<u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select>
					</u-form-item>
					<u-form-item label="法定代表人" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="经营范围" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="注册资本" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="成立日期" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="住所" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="邮箱地址" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="经营期限" prop="name" borderBottom>
						<u-input v-model="model1.name" ></u-input>
					</u-form-item>
					<u-form-item label="营业执照" prop="name" borderBottom labelPosition="top">
						<u-upload :active="active" :file-list="model1.fileList" ></u-upload>
					</u-form-item>
				</u-form>
			</view>
			<view v-else>
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<view class="add-list">
						<u-form-item label="经营者姓名" prop="name" borderBottom>
							<u-input v-model="model1.name" ></u-input>
						</u-form-item>
						<u-form-item label="证件类型" prop="type" borderBottom>
							<u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/>
							<u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select>
						</u-form-item>
						<u-form-item label="身份证号码" prop="name" borderBottom>
							<u-input v-model="model1.name" ></u-input>
						</u-form-item>
						<u-form-item label="身份证有效期" prop="name" borderBottom>
							<u-input v-model="model1.name" ></u-input>
						</u-form-item>
					</view>
					<view class="add-list">
						<view class="deom-box">
							<view class="img-deom">
								<u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
										<u-image width="304rpx" height="182rpx" src="/static/images/uploadID1.png"></u-image>
									</view>
								</u-upload>
								<text>点击上传证件人像面</text>
							</view>
							<view class="img-deom">
								<u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
										<u-image width="304rpx" height="182rpx" src="/static/images/uploadID2.png"></u-image>
									</view>
								</u-upload>
								<text>点击上传证件国徽面</text>
							</view>
						</view>
					</view>	
					<view class="add-list">
						<view style="line-height: 60rpx;">上传示例</view>
						<view class="deom-box">
							<view class="img-deom">
								<u-image width="304rpx" height="182rpx" src="/static/images/front-icon.png"></u-image>
								<text>人脸示例图</text>
							</view>
							<view class="img-deom">
								<u-image width="304rpx" height="182rpx" src="/static/images/back-icon.png"></u-image>
								<text>国徽面示例图</text>
							</view>
						</view>
					</view>
					<text style="display: inline-block; font-size: 24rpx; line-height: 30px; margin: 24rpx 30rpx 0;">请拍摄证件原件,保证照片拍摄清晰,取图完整,不反光。</text>
					<view class="add-list" labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
						<u-form-item label="是否为法人" prop="name" borderBottom>
							<u-radio-group v-model="model1.name">
								<u-radio :name="1">是</u-radio>
								<u-radio :name="2">否</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="企业授权书" prop="name" borderBottom labelPosition="top">
							<u-upload :active="active" :file-list="model1.fileList" ></u-upload>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="page-footer">
			<u-button style="background-color: #DFE0E4; flex: 1; margin: 0 10px;" @click="toBefor" v-if="active != 0">上一步</u-button>
			<u-button type="success" style="flex: 1; margin: 0 10px;" @click="toNext" v-if="active != 2">下一步</u-button>
			<u-button type="success" style="flex: 1; margin: 0 10px;" @click="go" v-if="active == 2">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 2,
				numList: [{name: '租赁信息'}, {name: '主体信息'}, {name: '经营者信息'}],
				model1: {
					name: '',
					type: '',
					typeShow: false,
					fileList: [], // 文件列表
				},
				rules: {},
				// 类型
				showType: false,
				activesType: [
					{value: 1, label: '类型1'},
					{value: 2, label: '类型2'},
				],
				// 上传文件
				active: '', // 地址
				
			};
		},
		  onLoad() {
		    // 检查用户是否登录
		    const isLogin = uni.getStorageSync('token') || false;
		    if (!isLogin) {
		      // 如果未登录,跳转到登录页面
		     uni.redirectTo({
		       url: '/pages/login/login'
		     });
		    }
		  },
		methods:{
			typeChange(e) {
				this.model1.type = e[0].label;
			},
			go(){
				uni.navigateTo({
					url: '/pages/record/record'
				})
			},
			toChangeTime(val) {
				uni.navigateTo({
					url: `/pages/advertisementTime/advertisementTime?val=${val}`
				})
			},
			// 上一步
			toBefor() {
				this.active = +this.active - 1;
			},
			// 下一步
			toNext() {
				this.active = +this.active + 1;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'advertisementAdd.scss';
</style>