webapp / GreenwayWeb

<template>
	<view class="page">
		<view class="steps-box">
			<u-steps :list="numList" :current="active"></u-steps>
		</view>
		<view>
			<view v-show="active == 0">
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<view class="add-list">
						<u-form-item label="投放时段" prop="scheduleTime" borderBottom>
							<!-- <u-input v-model="model1.name" type="select" @click="toChangeTime"></u-input> -->
							<u-input v-model="model1.scheduleTime" type="select" @click="TimeStratshow = true"
								placeholder="请选择" />
							<u-picker mode="time" v-model="TimeStratshow" :params="params"
								@confirm="startTimeChange"></u-picker>
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="跳转类型" prop="advertisementContent" borderBottom>
							<u-input v-model="model1.advertisementContent"></u-input>
						</u-form-item>
						<u-form-item label="链接" prop="redirectUrl" borderBottom>
							<u-input v-model="model1.redirectUrl"></u-input>
						</u-form-item>
						<u-form-item label="投放定价" prop="cpc" borderBottom>
							<u-input v-model="model1.cpc"></u-input>
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="封面图片" prop="coverImage" borderBottom labelPosition="top">
							<u-upload :action="$upload" :auto-upload="false" ref="businessLicense" :max-count="1"
								@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
							<!-- <u-upload :action="$upload" :auto-upload="true" ref="coverImage" :max-count="1"></u-upload> -->
						</u-form-item>
					</view>
					<view class="add-list">
						<u-form-item label="广告标题" prop="adTitle" borderBottom labelPosition="top">
							<u-input v-model="model1.adTitle" />
						</u-form-item>
					</view>

				</u-form>
			</view>




			<view class="add-list" v-show='active == 1'>
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<u-form-item label="主体名称" prop="subjectName" borderBottom>
						<u-input v-model="model1.subjectName"></u-input>
					</u-form-item>
					<u-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" borderBottom>
						<u-input v-model="model1.unifiedSocialCreditCode"></u-input>
					</u-form-item>
					<u-form-item label="类型" prop="type" borderBottom>
						<u-input v-model="model1.type" type="select" @click="typeShow = true" placeholder='请选择类型' />
					</u-form-item>
					<u-form-item label="法定代表人" prop="legalRepresentative" borderBottom>
						<u-input v-model="model1.legalRepresentative"></u-input>
					</u-form-item>
					<u-form-item label="经营范围" prop="businessScope" borderBottom>
						<u-input v-model="model1.businessScope"></u-input>
					</u-form-item>
					<u-form-item label="注册资本" prop="registeredCapital" borderBottom>
						<u-input v-model="model1.registeredCapital"></u-input>
					</u-form-item>
					<u-form-item label="成立日期" prop="establishmentDate" borderBottom>
						<u-input v-model="model1.establishmentDate"></u-input>
					</u-form-item>
					<u-form-item label="住所" prop="address" borderBottom>
						<u-input v-model="model1.address"></u-input>
					</u-form-item>
					<u-form-item label="邮箱地址" prop="emailAddress" borderBottom>
						<u-input v-model="model1.emailAddress"></u-input>
					</u-form-item>
					<u-form-item label="经营开始时间" prop="businessStartDate" borderBottom>
						<u-input v-model="model1.businessStartDate" type="select" @click="busStartshow = true"
							placeholder="请选择" />
						<u-picker mode="time" v-model="busStartshow" :params="params"
							@confirm="busStTimeChange"></u-picker>
					</u-form-item>
					<u-form-item label="经营结束时间" prop="businessEndDate" borderBottom>
						<u-input v-model="model1.businessEndDate" type="select" @click="busEndtshow = true"
							placeholder="请选择" />
						<u-picker mode="time" v-model="busEndtshow" :params="params"
							@confirm="busEndTimeChange"></u-picker>
					</u-form-item>
					<u-form-item label="营业执照" prop="businessLicense" borderBottom labelPosition="top">
						<u-upload :action="$upload" :auto-upload="false" ref="businessLicense" :max-count="1"
							@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'businessLicense')"></u-upload>
						<!-- <u-upload :action="$upload" :auto-upload="true" ref="businessLicense" :max-count="1"></u-upload> -->
					</u-form-item>
				</u-form>
			</view>


			<view v-show="active == 2">
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
					<view class="add-list">
						<u-form-item label="经营者姓名" prop="lesseeName" borderBottom>
							<u-input v-model="model1.lesseeName"></u-input>
						</u-form-item>
						<u-form-item label="证件类型" prop="idCardType" borderBottom>
							<u-input v-model="model1.idCardType" type="select" @click="IdtypeShow = true"
								placeholder='请选择类型' />
						</u-form-item>
						<u-form-item label="身份证号码" prop="idCardNumber" borderBottom>
							<u-input v-model="model1.idCardNumber"></u-input>
						</u-form-item>
						<u-form-item label="有效开始时间" prop="idCardValidStart" borderBottom>
							<u-input v-model="model1.idCardValidStart" type="select" @click="idCardStartshow = true"
								placeholder="请选择" />
							<u-picker mode="time" v-model="idCardStartshow" :params="params1"
								@confirm="idCardStTimeChange"></u-picker>
						</u-form-item>
						<u-form-item label="有效结束时间" prop="idCardValidEnd" borderBottom>
							<u-input v-model="model1.idCardValidEnd" type="select" @click="idCardEndtshow = true"
								placeholder="请选择" />
							<u-picker mode="time" v-model="idCardEndtshow" :params="params1"
								@confirm="idCardEndTimeChange"></u-picker>
						</u-form-item>
					</view>
					<view class="add-list">
						<view class="deom-box">
							<view class="img-deom">
								<u-upload :action="$upload" :custom-btn="true"
									@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'idCardPhotoFront')"
									:auto-upload="false" :max-count="1" ref="idPhotoFront">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150">
										<u-image width="304rpx" height="182rpx"
											:src="$imgUrl('/uploadID1.png')"></u-image>
									</view>
								</u-upload>
								<text>点击上传证件人像面</text>
							</view>
							<view class="img-deom">
								<u-upload :action="$upload" :custom-btn="true"
									@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'idCardPhotoBack')"
									:auto-upload="false" :max-count="1" ref="idPhotoBack">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
										hover-stay-time="150">
										<u-image width="304rpx" height="182rpx"
											:src="$imgUrl('/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="$imgUrl('/front-icon.png')"></u-image>
								<text>人脸示例图</text>
							</view>
							<view class="img-deom">
								<u-image width="304rpx" height="182rpx" :src="$imgUrl('/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="isLegalPerson" borderBottom>
							<u-radio-group v-model="model1.isLegalPerson">
								<u-radio name="1" value="1">是</u-radio>
								<u-radio name="0" value="0">否</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="企业授权书" prop="enterpriseAuthorization" borderBottom labelPosition="top">
							<u-upload :action="$upload" ref="enter" :max-count="1"
								@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'enterpriseAuthorization')"
								:auto-upload="false"></u-upload>
							<!-- <u-upload :action="$upload" :auto-upload="true" ref="enter" :max-count="1"></u-upload> -->
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>

		<u-select v-model="typeShow" :list="activesType" @confirm="typeChange"></u-select>
		<u-select v-model="IdtypeShow" :list="idType" @confirm="IdtypeChange"></u-select>
		<!-- 保存按钮 -->
		<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: 0,
				numList: [{
					name: '租赁信息'
				}, {
					name: '主体信息'
				}, {
					name: '经营者信息'
				}],
				model1: {
					scheduleTime: '',
					advertisementContent: '',
					redirectUrl: '',
					coverImage: '',
					adTitle: '',
					cpc: '',
					subjectName: '',
					unifiedSocialCreditCode: '',
					type: '',
					legalRepresentative: '',
					businessScope: '',
					registeredCapital: '',
					establishmentDate: '',
					address: '',
					emailAddress: '',
					businessStartDate: '',
					businessEndDate: '',
					businessLicense: '',
					lesseeName: '',
					idCardType: '',
					idCardNumber: '',
					idCardValidStart: '',
					idCardValidEnd: '',
					isLegalPerson: '0',
					idCardPhotoFront: '',
					idCardPhotoBack: '',
					enterpriseAuthorization: '',
					auditStatus: '1'
				},
				rules: {},
				// 类型
				showType: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				params1: {
					year: true,
					month: true,
					day: true
				},
				TimeStratshow: false,
				typeShow: false,
				activesType: [{
					value: 1,
					label: '个人'
				}, {
					value: 2,
					label: '企业'
				}],
				idType: [{
					value: 1,
					label: '身份证'
				}, ],
				IdtypeShow: false,
				busStartshow: false,
				busEndtshow: false,
				idCardStartshow: false,
				idCardEndtshow: false,
				params: {
					year: true,
					month: true,
					day: true,
				},
				ziyuanId: '',
				ziyuanType: '',

			}
		},
		onLoad(option) {
			this.ziyuanId = option.ids
			this.ziyuanType = option.type
		},
		onShow() {
			let shopId = {
				shopId: uni.getStorageSync('shopId') || ''
			}
			const isLogin = uni.getStorageSync('token');
			if (isLogin == '') {
				// 如果未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				let page = {
					condition: 2
				}
				this.$http.sendRequest('/shop/getById', 'POST', shopId).then(res => {
					if (res.data.code != "20004") {
						this.shopMsg = res.data.data
						this.Islogin = false
						this.$http.sendRequest('/index/index', 'POST', page).then(res => {
							//成功回调
							this.tongji = res.data.data
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			}

		},
		methods: {
			onsuccess1(e, file, fileList, ziduan) {
				console.error(e, file, fileList, ziduan)
				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[0].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {
						this.model1[ziduan] = this.$img + JSON.parse(uploadFileRes.data).data

						console.log('上传成功', this.model1);
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
			typeChange(e) {
				this.model1.type = e[0].label;
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = ('0' + (now.getMonth() + 1)).slice(-2);
				const day = ('0' + now.getDate()).slice(-2);
				const hours = ('0' + now.getHours()).slice(-2);
				const minutes = ('0' + now.getMinutes()).slice(-2);
				const seconds = ('0' + now.getSeconds()).slice(-2);

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			go() {
				// let coverImg = []
				// let files = []
				// let idCardOne = []
				// let idCardTwo = []
				// let enterS  = []
				// // // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// coverImg = this.$refs.coverImage.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// coverImg.map(item => {
				// 	this.model1.coverImage = item.response.data.url
				// })
				// files = this.$refs.businessLicense.lists.filter(val => {
				// 	return val.progress == 100;
				// })

				// files.map(item => {
				// 	this.model1.businessLicense = item.response.data.url
				// })
				// idCardOne = this.$refs.idCardPhotoFront.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// idCardOne.map(item => {
				// 	this.model1.idCardPhotoFront = item.response.data.url

				// })
				// idCardTwo = this.$refs.idCardPhotoBack.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// idCardTwo.map(item => {
				// 	this.model1.idCardPhotoBack = item.response.data.url
				// })
				// enterS = this.$refs.enter.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// enterS.map(item => {
				// 	this.model1.enterpriseAuthorization = item.response.data.url
				// })
				this.model1.rentalResourcesId = this.ziyuanId
				this.model1.advertisingSpaceType = this.ziyuanType
				this.model1.applicant = uni.getStorageSync('shopId')
				this.model1.applicationTime = this.getCurrentTime()
				console.error({
					...this.model1
				})
				// return
				this.$http.sendRequest('/cereAdvertiserInfo/add', 'POST', this.model1, 1).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			// toChangeTime(val) {
			// 	uni.navigateTo({
			// 		url: `/pages/advertisementTime/advertisementTime?val=${val}`
			// 	})
			// },
			// 上一步
			toBefor() {
				this.active = +this.active - 1;
			},
			// 下一步
			toNext() {
				this.active = +this.active + 1;
			},
			startTimeChange(val) {
				this.model1.scheduleTime = this.timeChange(val)
			},
			timeChange(val) {
				const {
					year,
					month,
					day,
				} = val;
				return `${year}-${month}-${day}`;
			},
			leiXpops(val) {
				this.model1.intentionalBusinessType = val[0].label
			},
			busStTimeChange(val) {
				this.model1.businessStartDate = this.timeChange(val)
				this.model1.businessEndDate = ''
			},
			busEndTimeChange(val) {
				const time = this.timeChange(val);
				if (new Date(time).getTime() > new Date(this.model1.businessStartDate).getTime()) {
					this.model1.businessEndDate = time
				} else {
					this.$refs.uToast.show({
						title: '结束时间不能小于开始时间',
						type: 'error',
					})
				}
			},
			idCardStTimeChange(val) {
				this.model1.idCardValidStart = this.timeChange1(val)
				this.model1.idCardValidEnd = ''
			},
			idCardEndTimeChange(val) {
				const time = this.timeChange1(val);
				if (new Date(time).getTime() > new Date(this.model1.idCardValidStart).getTime()) {
					this.model1.idCardValidEnd = time
				} else {
					this.$refs.uToast.show({
						title: '结束时间不能小于开始时间',
						type: 'error',
					})
				}
			},
			IdtypeChange(e) {
				this.model1.idCardType = e[0].label;
			},
			timeChange1(val) {
				const {
					year,
					month,
					day
				} = val;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

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