LocalLivingServicesUniapp/pages/adManagement/createFullscreenAd.vue

<template>
	<view class="page">
		<u-sticky :h5-nav-height="0" z-index="9099" :offset-top='0'>
			<uni-NavBar :headerTitle="`${headerTitle}创建`" background="#fff" :isSlot="false"></uni-NavBar>
		</u-sticky>
		<u-form :model="adForm" :rules="adrules" ref="uForm" :label-width="200"
			style="padding: 20rpx 24rpx 135rpx;box-sizing: border-box;">
			<view class="module">
				<text class="module-title ">基本信息</text>
				<u-form-item label="投放计划名称" prop="name" required>
					<u-input v-model="adForm.name" :custom-style="{textAlign:'right'}"
						placeholder="请输入...（最多20个字符）"></u-input>
				</u-form-item>
				<u-form-item label="选择广告位" prop="positionName" required :border-bottom="false">
					<u-input v-model="adForm.positionName" type="select" :select-open="adSlotShow"
						@click="adSlotShow=true" :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
				</u-form-item>
			</view>
			<view class="module">
				<text class="module-title ">投放区域</text>
				<u-form-item label="门店地址" prop="address" required :border-bottom="false">
					<u-input v-model="adForm.address" type="textarea" disabled
						:custom-style="{textAlign:'right'}"></u-input>
				</u-form-item>
				<u-form-item label="投放范围" prop="coverageArea" required :border-bottom="false">
					<u-input v-model="adForm.coverageArea" type="number" :custom-style="{textAlign:'right'}"></u-input>
					<text class="ml-1">公里</text>
				</u-form-item>
			</view>
			<view class="module">
				<text class="module-title ">投放时间</text>
				<u-form-item label="投放开始时间" required prop="startDate">
					<u-input v-model="adForm.startDate" type="select" :select-open="startDateShow"
						@click="startDateShow=true" :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
				</u-form-item>
				<u-form-item label="投放结束时间" required prop="endDate">
					<u-input v-model="adForm.endDate" type="select" :select-open="endDateShow" @click="endDateShow=true"
						:custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
				</u-form-item>
				<view class="dis f-c ">
					<u-form-item label="生效周期" prop="validPeriodType" required
						:border-bottom="adForm.validPeriodType && adForm.validPeriodType!='0'? false:true">
						<view class="dis a-c  j-end" style="width: 100%;">
							<view class="tab-view  dis a-c  j-c"
								:class="{'tab-view-active':adForm.validPeriodType==item.value}"
								v-for="(item,index) in validPeriodTypeList" :key="index"
								@click="validPeriodTypeSelect(item)">
								<text>{{item.label}}</text>
							</view>
						</view>
					</u-form-item>
					<!-- 周期策略选择 -->
					<u-form-item prop="validPeriodValue" :border-bottom='false'
						v-if="adForm.validPeriodType && adForm.validPeriodType!='0'">
						<view class="extendArea dis a-c  f-wrap" style="padding-bottom: 0;">
							<view class="cycleStrategy dis a-c j-c" v-for="(item,index) in cycleStrategylist"
								:key="index" :class="{ 'tcycleStrategy-active': selectedDays.includes(item.value) }"
								@click="toggleDaySelection(item.value)">
								<text>{{item.label}}</text>
							</view>
						</view>
					</u-form-item>

				</view>
				<view class="dis f-c  ">
					<u-form-item label="生效时段" prop="validTimeRangeType" required :border-bottom="false">
						<view class="dis a-c  j-end" style="width: 100%;">
							<view class="tab-view  dis a-c  j-c"
								:class="{'tab-view-active':adForm.validTimeRangeType==item.value}"
								v-for="(item,index) in validTimeRangeTypeList" :key="index"
								@click="timeSegmentSelect(item)">
								<text>{{item.label}}</text>
							</view>
						</view>
					</u-form-item>
					<view class="extendArea mb-3 " style="font-size: 26rpx;" v-if="adForm.validTimeRangeType=='1'">
						<view class=" dis a-c j-s mb-3">
							<text style="color: #333;">开始时间</text>
							<view class="dis a-c" @click="timeSegmentStartShow=true">
								<text style="color: #aaa;" class="mr-1">{{timeSegmentStart|| '请选择'}}</text>
								<u-icon name="arrow-right" color="#979797" size="26"></u-icon>
							</view>
						</view>
						<view class=" dis a-c j-s ">
							<text style="color: #333;">开始时间</text>
							<view class="dis a-c" @click="timeSegmentEndShow=true">
								<text style="color: #aaa;" class="mr-1">{{timeSegmentEnd || "请选择"}}</text>
								<u-icon name="arrow-right" color="#979797" size="26"></u-icon>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="module">
				<text class="module-title ">投放内容</text>
				<!-- 图片上传 -->
				<view class="fileUpload ">
					<view class="tabs dis a-end" v-if="tabList.length>1">
						<view v-for="(item, index) in tabList" :key="index" class="tab dis a-c j-c" :class="{
				  active: fileUploadActiveTab === index,
				  tab1: fileUploadActiveTab !== index,
				  left: fileUploadActiveTab === 0,
				  right: fileUploadActiveTab === 1
				}" @click="handleTab(index,item)">
							<view class="tabtitle">
								<view class="">
									{{ item.label }}
								</view>
							</view>
						</view>
					</view>
					<view class="fileUploadView" v-if="adForm.imageType=='1'">
						<view class="p-2" v-show="imgFileList.length>0">
							<u-upload ref="Upload" :file-list="imgFileList" :action="action"
								@on-list-change="onListChange" @on-success="detailsSuccess" :source-type="['album']"
								width="150" height="150">
							</u-upload>
						</view>
						<view class="default dis f-c a-c j-c " @click="triggerUpload" v-if="!imgFileList.length">
							<image src="/static/ad/ggtp.png" mode=""></image>
							<text class="title">请上传广告图片</text>
							<text>
								尺寸建议：建议图片1125*2436px，支持jpg、png格式，体积小于1Mb。因手机分辨率问题，部分机型可能图片展示不全，重要信息尽量展示在图片中部。
							</text>
						</view>

					</view>
					<view class="fileUploadView" v-if="adForm.imageType=='2'">
						<view class="p-2 dis f-c " v-if="adForm.taskImage">
							<video id="myVideo" :src="adForm.taskImage" :style="{width:'100%',height:'330rpx'}"
								:muted="false" :enable-progress-gesture="true">
							</video>
							<view class="dis a-c j-end mt-2" style="width: 100%;">
								<u-button size="medium" type="primary" plain style="margin-left: auto;"
									@click="videoDel">删除</u-button>
							</view>
						</view>
						<view class="default dis f-c a-c j-c " @click="uploadVideo" v-else>
							<image src="/static/ad/ggsp.png" mode=""></image>
							<text class="title">请上传广告视频</text>
							<text>尺寸建议：画面比例9:16，支持MP4格式，时长小于等于30秒。因手机分辨率问题，部分机型可能画面展示不全，重要信息尽量展示在画面中部。</text>
						</view>

					</view>
				</view>
			</view>
			<view class="module" v-if="adPricingModelList.length>0">
				<text class="module-title">计费方式</text>
				<u-radio-group v-model="adForm.relId" :wrap="true" active-color="#4B9DFF">
					<view class="dis a-c j-c BillingModelView" v-for="(item, index) in adPricingModelList" :key="index">
						<u-radio :name="item.id" label-size="26">
							<text style="margin-right: 60rpx;">{{item.pricingName}}</text>
							<text>{{ item.amount }} {{ item.pricingUnit }}</text>
						</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="module">
				<text class="module-title ">投放频次</text>
				<view class="deliveryFrequency dis a-c ">
					<view class="title">每人每天展示次数</view>
					<u-radio-group v-model="userDailyImpCount" @change="userDailyImpCountChange" active-color="#4B9DFF">
						<u-radio name="1" label-size="26">不限</u-radio>
						<u-radio name="2" label-size="26">限制</u-radio>
					</u-radio-group>
					<view class="dis a-c flex-1" v-if="userDailyImpCount=='2'">
						<u-input v-model="adForm.userDailyDisplayLimit" :custom-style="{width:'100rpx',minHeight:'0'}"
							placeholder="请输入"></u-input>
						<text>次</text>
					</view>

				</view>
				<view class="deliveryFrequency dis a-c ">
					<view class="title">每人展示次数</view>
					<u-radio-group v-model="userImpCount" @change="userImpCountChange" active-color="#4B9DFF">
						<u-radio name="1" label-size="26">不限</u-radio>
						<u-radio name="2" label-size="26">限制</u-radio>
					</u-radio-group>
					<view class="dis a-c flex-1" v-if="userImpCount=='2'">
						<u-input v-model="adForm.userTotalDisplayLimit" :custom-style="{width:'50rpx',minHeight:'0'}"
							placeholder="请输入"></u-input>
						<text>次</text>
					</view>
				</view>
				<view class="deliveryFrequency dis a-c ">
					<view class="title">展示时间间隔</view>
					<u-radio-group v-model="displayTimeInterval" @change="displayTimeIntervalChange"
						active-color="#4B9DFF">
						<u-radio name="1" label-size="26">不限</u-radio>
						<u-radio name="2" label-size="26">限制</u-radio>
					</u-radio-group>
					<view class="dis a-c flex-1" v-if="displayTimeInterval=='2'">
						<u-input v-model="adForm.showInterval" :custom-style="{width:'50rpx',minHeight:'0'}"
							placeholder="请输入"></u-input>
						<text>分钟</text>
					</view>
				</view>
			</view>
			<view class="module">
				<text class="module-title ">广告预算</text>
				<u-form-item label="广告预算" prop="adBudget" required :border-bottom="false">
					<u-input v-model="adForm.adBudget" :custom-style="{textAlign:'right'}"></u-input>
					<text class="ml-1">元</text>
				</u-form-item>
				<text class="mb-3" style="font-size: 22rpx;color: #aaa;">为保证广告正常投放，请保证余额账户有充足余额，余额不足时，广告 将自动暂停投放。</text>
			</view>
		</u-form>
		<view class="footer-view">
			<view class="dis a-c j-c " @click="submit">
				提交审核
			</view>
		</view>
		<!-- 广告位 -->
		<u-select v-model="adSlotShow" mode="single-column" label-name="positionName" value-name="id" :list="adSlotList"
			@confirm="adSlotConfirm"></u-select>
		<!-- 投放日期 -->
		<u-calendar v-model="startDateShow" mode="date" @change="startDateChange" max-date="2050-12-31"></u-calendar>
		<u-calendar v-model="endDateShow" mode="date" @change="endDateChange" max-date="2050-12-31"></u-calendar>
		<!-- 投放时间 -->
		<u-picker v-model="timeSegmentStartShow" mode="time" :params="params"
			@confirm="timeSegmentStartConfirm"></u-picker>
		<u-picker v-model="timeSegmentEndShow" mode="time" :params="params" @confirm="timeSegmentEndConfirm"></u-picker>
		<!-- 自定义加载动画 -->
		<u-mask :show="lodingShow" style="background-color: rgba(255, 255, 255, 0.6);">
			<view class="dis a-c j-c " style="height: 100%;">
				<u-loading mode="circle"></u-loading>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_INFO
	} from '@/common/util/constants.js'
	import {
		getCity,
		findCityCodeByCname
	} from './parseAddress.js' //地址解析函数
	import configService from '@/common/service/config.service'
	export default {
		data() {
			return {
				adSlotPriceList: [], //价格列表
				adPricingModelList: [], //计费模式列表
				queryTreeList: [], //省市区optinos
				adSlotList: [], //广告位options
				queryTreeValue: "", //省市区回显
				lodingShow: false, //loding组件
				startDateShow: false, //开始日期选择
				endDateShow: false, //结束日期选择
				queryTreeShow: false, //省市区选择
				adSlotShow: false, //广告位选择
				timeSegmentStartShow: false, //开始时间
				timeSegmentEndShow: false, //结果时间
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				value: 'orange',
				value1: "",
				adForm: {
					id: "",
					name: '', //投放计划名称
					positionId: null, //广告位id
					positionName: "", //广告位name
					startDate: "", //投放开始时间
					endDate: "", //投放结束时间
					city: "", //市
					validPeriodType: "", //生效周期
					validPeriodValue: "", //周期策略
					validTimeRangeType: "", //生效时段类型
					validTimeRangeValue: "", //生效时段值
					relId: "", //计费方式
					userDailyDisplayLimit: "", //每人每天展示次数
					userTotalDisplayLimit: "", //每人总次数
					showInterval: "", //展示时间间隔
					taskImage: "", //文件路径
					imageType: "1", //文件类型
					type: "", //广告类型
					adBudget: "", //广告预算
					merchantId: "", //商户id
					merchantName: "", //商户name
					address: "",
					longitude: "", //经度
					latitude: "", //维度
					coverageArea: 0, //范围
				},
				timeSegmentStart: "", //生效时段开始
				timeSegmentEnd: "", //生效时段结束
				userDailyImpCount: "1",
				userImpCount: "1",
				displayTimeInterval: "1",
				adrules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: ['change', 'blur'],
					}],
					positionName: [{
						required: true,
						message: '请选择广告位',
						trigger: ['change', 'blur'],
					}],
					district: [{
						required: true,
						message: '请选择投放区域',
						trigger: ['change', 'blur'],
					}],
					startDate: [{
						required: true,
						message: '时间必选',
						trigger: ['change', 'blur'],
					}],
					endDate: [{
						required: true,
						message: '时间必选',
						trigger: ['change', 'blur'],
					}],
					validPeriodType: [{
						required: true,
						message: '生效周期必选',
						trigger: ['blur'],
					}],
					validTimeRangeType: [{
						required: true,
						message: '生效时段必传',
						trigger: ['blur'],
					}],
					adBudget: [{
						required: true,
						message: '广告预算必填',
						trigger: ['blur'],
					}],
					taskImage: [{
						required: true,
						message: '投放内容必传',
						trigger: ['change'],
					}],
					validPeriodValue: [{
						required: true,
						message: '生效周期至少选择一天',
						trigger: ['change'],
					}],
				},
				weekList: [], //周
				monthList: [], //月
				selectedDays: [], //周期策略选中日期
				timeSegment: "", //生效时段
				validTimeRangeTypeList: [{
						label: "全天",
						value: "0",
					},
					{
						label: "指定时间段",
						value: "1",
					},
				],
				//生效周期
				validPeriodTypeList: [{
						label: "每天",
						value: "0",
					},
					{
						label: "每周",
						value: "1",
					},
					{
						label: "每月",
						value: "2",
					}
				],
				tabList: [],
				fileUploadActiveTab: 0,
				//文件回显列表
				imgFileList: [], //图片数组
				action: configService.apiUrl + '/sys/common/upload', //图片上传地址
				token: "",
				userInfo: {},
				headerTitle: "", //页面标题
			}
		},
		onShow() {},
		async onLoad(options) {
			if (options.adType) {
				this.adForm.type = options.adType;
				const map = {
					'0': '全屏广告',
					'1': '弹窗广告',
					'2': '轮播广告',
					'3': '页面嵌入广告',
				}
				this.headerTitle = map[this.adForm.type] || ''
			}
			if (options.id) {
				this.$http.get('advert/localAdvertTask/queryById?id=' + options.id).then(res => {
					if (res.data.code == '200') {
						delete res.data.result.adPositionPriceRel
						delete res.data.result.createBy;
						delete res.data.result.createTime;
						delete res.data.result.isDelete;
						delete res.data.result.updateBy;
						delete res.data.result.updateTime;
						this.adForm = res.data.result
						this.queryTreeValue =
							`${this.adForm.province}-${this.adForm.city}-${this.adForm.district}-${this.adForm.street}`;
						this.getadBillingModel();
						this.selectedDays = this.adForm.validPeriodValue.split(',')
						let list = this.adForm.validTimeRangeValue.split(',');
						this.timeSegmentStart = list[0];
						this.timeSegmentEnd = list[1];
						let imglist = this.adForm.taskImage.split(",")
						this.imgFileList = imglist.map(val => {
							return {
								url: val
							}
						})
						if (this.adForm.userDailyDisplayLimit) {
							this.userDailyImpCount = '2';
						}
						if (this.adForm.userTotalDisplayLimit) {
							this.userImpCount = '2';
						}
						if (this.adForm.showInterval) {
							this.displayTimeInterval = '2';
						}
						this.adForm.validTimeRangeType = this.adForm.validTimeRangeType + '';
						this.adForm.validPeriodType = this.adForm.validPeriodType + '';
						this.adForm.adBudget = this.adForm.adBudget + '';
						console.log(this.adForm);
					}
				})
			}
			this.token = uni.getStorageSync(ACCESS_TOKEN);
			this.userInfo = uni.getStorageSync(USER_INFO);
			this.adForm.merchantId = this.userInfo.merchantId;
			this.adForm.merchantName = this.userInfo.merchantName;
			await this.queryTree(); //获取省市区数据
			await this.queryAdSlot(); // 获取广告位数据
			this.generateWeek();
			this.generatemonth();
			this.storeDetail();
		},
		onReady() {
			this.$refs.uForm.setRules(this.adrules);
		},
		computed: {
			//区分月和周
			cycleStrategylist() {
				return this.adForm.validPeriodType == '1' ? this.weekList : this.monthList;
			}
		},
		methods: {
			// 门店
			async storeDetail() {
				let id = uni.getStorageSync(USER_INFO).merchantId;
				let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + id)
				if (res.data.success) {
					console.log(res);
					this.adForm.address = res.data.result.address;
					this.adForm.longitude = Number(res.data.result.longitude);
					this.adForm.latitude = Number(res.data.result.latitude);
					const addressResult = getCity(this.adForm.address); //截取城市
					const cityCode = findCityCodeByCname(addressResult, this.queryTreeList) // 查找城市code
					this.adForm.city = cityCode;
				}
			},
			submit() {
				if (this.adForm.validTimeRangeType == '1' && this.timeSegmentStart && this.timeSegmentEnd) {
					this.adForm.validTimeRangeValue = this.timeSegmentStart + "," + this.timeSegmentEnd;
				}
				console.log(this.adForm);
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.adForm.taskImage) {
							return uni.showToast({
								title: "素材不能为空",
								icon: 'none'
							})
						}
						if (!this.timeSegmentStart && this.timeSegmentEnd) {
							return uni.showToast({
								title: "生效时间段补充完整",
								icon: 'none'
							})
						}
						if (this.adForm.id) {
							this.$http.post('advert/localAdvertTask/merchantEdit', this.adForm).then(res => {
								if (res.data.code == '200') {
									uni.showToast({
										title: res.data.message,
										icon: "none"
									})
									uni.navigateBack({
										delta: 1
									});
								}
							})
						} else {
							this.$http.post('advert/localAdvertTask/merchantAdd', this.adForm).then(res => {
								if (res.data.code == '200') {
									uni.showToast({
										title: res.data.message,
										icon: "none"
									})
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			videoDel() {
				this.adForm.taskImage = "";
			},
			//视频上传
			async uploadVideo(type, imageIdList, imgurl) {
				let [chooseImageErr, chooseImageRes] = await uni.chooseVideo({
					sourceType: ['album']
				});
				if (chooseImageRes) {
					uni.uploadFile({
						url: configService.apiUrl + '/sys/common/upload',
						name: "file",
						file: chooseImageRes.tempFile,
						header: {
							Authorization: this.token,
						},
						success: async (Res) => {
							let data = JSON.parse(Res.data);
							this.adForm.taskImage = configService.apiUrl + '/' + data.message;
							console.log(this.adForm.taskImage);
						},
					});
				}
			},
			triggerUpload() {
				this.$refs.Upload.selectFile(); // ref调用文件选择*****************************
			},
			//图片上传事件
			detailsSuccess(res, index, lists) {
				const fileList = lists.map((file) => {
					if (file.response) {
						// 拼接地址前缀
						file.url = configService.apiUrl + '/' + file.response.message;
					}
					return file.url;
				});
				this.adForm.taskImage = fileList.join(",") //图片地址逗号拼接
				this.imgFileList = lists;
			},
			//图片多选上传
			onListChange(lists) {

			},
			handleTab(index, item) {
				this.fileUploadActiveTab = index
				this.adForm.imageType = item.value;
				this.adForm.taskImage = "";
				this.imgFileList = [];
			},
			getadBillingModel() {
				this.$http.get('/adPricingPrice/queryPageList', {
					params: {
						adPositionId: this.adForm.positionId,
						city: this.adForm.city,
						pageNo: 1,
						pageSize: 1000,
					}
				}).then(res => {
					if (res.data.result.records.length > 0) {
						this.adSlotPriceList = res.data.result.records[0]?.adPositionPriceRelList;
						this.$http.get('/adPricingModel/queryPageList', {
							params: {
								pageNo: 1,
								pageSize: 1000,
								isDelete: 0,
							}
						}).then(res => {
							const pricingUnitMap = {
								"1": "元/点击",
								"2": "元/天",
								"3": "元/笔销售",
								"4": "元/千次曝光",
							}
							this.adPricingModelList = res.data.result.records.map(val => {
								return {
									adPricingModelId: val.id,
									pricingName: val.pricingName,
									pricingUnit: pricingUnitMap[val.pricingUnit],
									checked: false,
									amount: "",
								}
							})
							const result = this.adPricingModelList.map(model => {
								const matchedPrice = this.adSlotPriceList.find(price => price
									.adPricingModelId === model.adPricingModelId);
								return {
									...model,
									amount: matchedPrice ? matchedPrice.amount : model.amount,
									checked: false,
									id: matchedPrice?.id,
								};
							}).filter(val => val.amount)
							this.adPricingModelList = result;
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "该区域暂无计费模式相关配置"
						})
					}

				})
			},
			queryAdSlot() {
				this.$http.get('/adPosition/queryPageList').then(res => {
					if (res.data.code == 200) {
						if (res.data.code == 200) {
							this.adSlotList = res.data.result.records
							console.log(res.data.result);
						}
					}
				})
			},
			queryTree() {
				this.lodingShow = true;
				this.$http.post('/sys/area/queryTree').then(res => {
					if (res.data.code == 200) {
						console.log(res);
						this.queryTreeList = res.data.result
						this.lodingShow = false;
					}
				})
			},
			//广告位选择后续操作
			adSlotConfirm(value) {
				let info = this.adSlotList.find(val => val.id == value[0].value).supportMaterial.split(','); //获取投放内容类型
				if (info.length > 1) {
					this.tabList = info.map(val => {
						return {
							label: val == 1 ? '图片' : '视频',
							value: val
						}
					})

				} else {
					this.tabList = [];
				}
				this.adForm.imageType = info[0];
				this.adForm.positionId = value[0].value;
				this.adForm.positionName = value[0].label;
				this.getadBillingModel() //获取计费方式
			},
			//日期选择
			startDateChange(e) {
				this.adForm.startDate = e.result + " 00:00:00"
			},
			endDateChange(e) {
				this.adForm.endDate = e.result + " 23:59:59"
			},
			// 时间选择
			timeSegmentStartConfirm(value) {
				this.timeSegmentStart = `${value.hour}:${value.minute}:${value.second}`
			},
			timeSegmentEndConfirm(value) {
				this.timeSegmentEnd = `${value.hour}:${value.minute}:${value.second}`
			},
			userDailyImpCountChange(value) {
				if (value == 1) {
					this.adForm.userDailyDisplayLimit = ' ';
				} else {
					this.adForm.userDailyDisplayLimit = '';
				}
			},
			userImpCountChange(value) {
				if (value == 1) {
					this.adForm.userTotalDisplayLimit = ' ';
				} else {
					this.adForm.userTotalDisplayLimit = '';
				}
			},
			displayTimeIntervalChange(value) {
				if (value == 1) {
					this.adForm.showInterval = ' ';
				} else {
					this.adForm.showInterval = '';
				}
			},
			//周列表
			generateWeek() {
				const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((val, index) => {
					return {
						label: val,
						value: (index + 1).toString()
					}
				})
				this.weekList = weekList;
			},
			// 月列表
			generatemonth() {
				const monthList = Array.from({
					length: 31
				}, (_, index) => {
					const value = (index + 1).toString();
					return {
						label: value,
						value
					};
				});
				this.monthList = monthList;
			},
			// 周期策略选择
			toggleDaySelection(dayValue) {
				const index = this.selectedDays.indexOf(dayValue);
				if (index > -1) {
					// 如果找到，移除该元素
					this.selectedDays.splice(index, 1);
				} else {
					// 如果未找到，添加该元素
					this.selectedDays.push(dayValue);
				}
				this.adForm.validPeriodValue = this.selectedDays.join(',')
			},
			//生效周期选择
			validPeriodTypeSelect(item) {
				this.adForm.validPeriodType = item.value
				this.selectedDays = [];

			},
			timeSegmentSelect(item) {
				this.adForm.validTimeRangeType = item.value
				if (item.value == 0) {
					this.adForm.validTimeRangeValue = "00:00:00,23:59:59"
				} else {
					this.adForm.validTimeRangeValue = "";
					this.timeSegmentStart = "";
					this.timeSegmentEnd = "";
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #F7F8FC;
	}

	.module {
		width: 100%;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;

		.module-title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;

		}

		.tab-view {
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #E5E5E5;
			font-size: 26rpx;
			color: #333;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			margin-left: 20rpx;

			text {
				line-height: 1;
			}
		}

		.tab-view-active {
			background: #E0EDFF;
			color: #006DFF;
			border: 1rpx solid #E0EDFF;
		}

		.extendArea {
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			background: #F6F8FC;
			border-radius: 10rpx;
		}

		.cycleStrategy {
			min-width: 100rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #E5E5E5;
			font-size: 26rpx;
			color: #333;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
			margin-bottom: 20rpx;

			text {
				line-height: 1;
			}
		}

		.tcycleStrategy-active {
			background: #E0EDFF;
			color: #006DFF;
			border: 1rpx solid #E0EDFF;
		}

		//计费模式
		.BillingModelView {
			width: 100%;
			border-bottom: 1rpx solid #eee;
			padding: 32rpx 0;
			box-sizing: border-box;

		}

		.deliveryFrequency {
			padding: 32rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 26rpx;
				color: #333;
				width: 250rpx;
			}
		}

		.deliveryFrequency:last-child {
			border-bottom: none;
		}
	}

	::v-deep {
		.u-radio__label {
			color: #333;
		}

		// 图片上传预览视图层级提升

	}

	.uni-system-preview-image {
		background: #4B9DFF !important;
		z-index: 9999 !important;
	}

	.footer-view {
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 17rpx 24rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(225, 225, 225, 0.3);

		>view {
			width: 100%;
			padding: 26rpx;
			box-sizing: border-box;
			background: #4B9DFF;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	.fileUpload {
		position: relative;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 0px 10rpx 10rpx 10rpx;
		margin: 30rpx 0;

		.tabs {
			display: flex;
			position: relative;
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
		}

		.tab {
			flex: 1;
			height: 70rpx;
			color: #333;
			font-size: 30rpx;
			position: relative;
			border-top-right-radius: 10rpx;
			border-top-left-radius: 10rpx;


			&.active {
				background: #F6F8FC;
				color: #006DFF;
				font-size: 30rpx;
				border-top-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
			}


			&.left.active {
				border-top-right-radius: 0;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: -50px;
					height: 100%;
					width: 50px;
					z-index: 2;
					background-color: #F6F8FC;
					clip-path: path("M0 0 C13.5 0 13.5 25 25 45 L0 50 Z");

				}
			}

			// 右侧标签的曲线
			&.right.active {
				border-top-left-radius: 0;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -49px;
					height: 100%;
					width: 50px;
					z-index: 2;
					background-color: #F6F8FC;
					clip-path: path("M50 0 C37.5 0 37.5 25 25 45 L50 50 Z");
				}
			}
		}

		.tab1 {
			flex: 1;
			height: 70rpx;
			position: relative;
			border-top-right-radius: 10rpx;
			border-top-left-radius: 10rpx;
			background-color: #EBF2FA;
		}

		// 文件区域样式

		.tabtitle {
			position: relative;
			z-index: 1; // 父级降低层级
			font-size: 28rpx;
		}
	}

	.fileUploadView {
		width: 100%;
		background-color: #F6F8FC;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		min-height: 330rpx;

		.default {
			min-height: 330rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			image {
				width: 83rpx;
				height: 74rpx;
			}

			text {
				font-size: 26rpx;
				color: #333;
			}

			.title {
				margin: 15rpx 0 40rpx;
			}

			text:last-child {
				font-size: 22rpx;
				color: #aaa;
			}
		}
	}
</style>