Просмотр исходного кода

添加广告永久有效,并样式修改

fuwei 6 лет назад
Родитель
Сommit
d717ef18e5
1 измененных файлов с 151 добавлено и 51 удалено
  1. 151 51
      store/src/admin/ad/add.vue

+ 151 - 51
store/src/admin/ad/add.vue

@@ -7,23 +7,37 @@
 					<div class="tui-title required">广告图名称</div>
 					<input v-model="form.adName" placeholder-class="phcolor" class="tui-input" name="adName" placeholder="请输入名称" maxlength="50" type="text" />
 				</tui-list-cell>
-				<tui-list-cell class="line-cell" :arrow="true">
-					<div class="tui-title required">开始时间</div>
-					<picker mode="date" :value="form.startTime" @change="startTimeFn" class="tui-input">
-						<input v-model="form.startTime" name="startTime" type="text" hidden />
-						<div v-if="form.startTime">{{ form.startTime }}</div>
-						<div class="tui-placeholder" v-else>请选择</div>
-					</picker>
-				</tui-list-cell>
-				<tui-list-cell class="line-cell" :arrow="true">
-					<div class="tui-title required">到期时间</div>
-					<picker mode="date" :value="form.endTime" @change="endTimeFn" class="tui-input">
-						<input v-model="form.endTime" name="endTime" type="text" hidden />
-						<div v-if="form.endTime">{{ form.endTime }}</div>
-						<div class="tui-placeholder" v-else>请选择</div>
-					</picker>
+				<tui-list-cell 
+					class="line-cell between switch" 
+					padding="14rpx 30rpx" 
+					:hover="false">
+					<div class="tui-title">永久有效</div>
+					<div>
+						<switch :checked="form.isPerpetual ? true : false" @change="switchChangePerpetual" />
+					</div>
 				</tui-list-cell>
-				<tui-list-cell class="line-cell between switch" padding="14rpx 30rpx" :hover="false">
+				<div v-if="!form.isPerpetual">
+					<tui-list-cell class="line-cell" :arrow="true">
+						<div class="tui-title required">开始时间</div>
+						<picker mode="date" :value="form.startTime" @change="startTimeFn" class="tui-input">
+							<input v-model="form.startTime" name="startTime" type="text" hidden />
+							<div v-if="form.startTime">{{ form.startTime }}</div>
+							<div class="tui-placeholder" v-else>请选择</div>
+						</picker>
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :arrow="true">
+						<div class="tui-title required">到期时间</div>
+						<picker mode="date" :value="form.endTime" @change="endTimeFn" class="tui-input">
+							<input v-model="form.endTime" name="endTime" type="text" hidden />
+							<div v-if="form.endTime">{{ form.endTime }}</div>
+							<div class="tui-placeholder" v-else>请选择</div>
+						</picker>
+					</tui-list-cell>
+				</div>
+				<tui-list-cell 
+					class="line-cell between switch" 
+					padding="14rpx 30rpx" 
+					:hover="false">
 					<div class="tui-title">启用状态</div>
 					<div>
 						<switch :checked="form.status ? true : false" @change="switchChangeFn" />
@@ -32,14 +46,18 @@
 			</div>
 			<!-- 广告图片 -->
 			<div class="module-com input-line-wrap">
-				<tui-list-cell class="line-img-wrap" :hover="false">
-					<div>
-						<span class="ad-name required">广告图片</span>
-						<span class="app-color-3 app-size-24">只能上传jpg/png格式</span>
-					</div>
-					<div class="line-img">
-						<input :value="adImgStr" name="adImgStr" type="text" hidden />
-						<app-uploader :multiple="false" ref="appUploader" :imgList.sync="form.adImg" />
+				<tui-list-cell 
+					class="line-img-wrap" 
+					:hover="false">
+					<div class="app-img-upload">
+						<div>
+							<span class="ad-name required">广告图片</span>
+							<span class="app-color-3 app-size-24">只能上传jpg/png格式</span>
+						</div>
+						<div class="line-img">
+							<input :value="adImgStr" name="adImgStr" type="text" hidden />
+							<app-uploader :multiple="false" ref="appUploader" :imgList.sync="form.adImg" />
+						</div>
 					</div>
 				</tui-list-cell>
 			</div>
@@ -115,10 +133,33 @@
 					url: '',
 					goodsId: '',
 					startTime: 0,
-					endTime: 0
+					endTime: 0,
+					isPerpetual:false
 				},
 				// imgList: [],
-				goodsData: {}
+				goodsData: {},
+				rules:[
+					{
+						name: 'startTime',
+						rule: ['required'],
+						msg: ['请选择开始时间']
+					},
+					{
+						name: 'endTime',
+						rule: ['required'],
+						msg: ['请选择结束时间']
+					},
+					{
+						name: 'adName',
+						rule: ['required'],
+						msg: ['请输入名称']
+					},
+					{
+						name: 'adImgStr',
+						rule: ['required'],
+						msg: ['请先上传图片']
+					}
+				]
 			}
 		},
 		computed: {
@@ -182,10 +223,19 @@
 			// api
 			_getDet() {
 				getDet({ id: this.option.id }).then(res => {
+					console.log(res)
 					if (this.$util.isEmpty(res.data)) return
 					Object.keys(this.form).forEach((i, index) => {
 						if (i == 'adImg') {
 							this.form.adImg = [res.data.adImgUrl]
+						}
+						else if(i==='isPerpetual'){
+							if(res.data.endTime === "4102416000"){
+								this.form.isPerpetual = true
+								this.changeRulePerpetual(true)
+							}else{
+								this.form.isPerpetual = false
+							}
 						} else {
 							this.form[i] = res.data[i]
 						}
@@ -223,12 +273,56 @@
 				})
 			},
 			startTimeFn(e) {
-				console.log(e)
 				this.form.startTime = e.detail.value
 			},
 			endTimeFn(e) {
 				this.form.endTime = e.detail.value
 			},
+			changeRulePerpetual(isPerpetual){
+				if(isPerpetual){	
+					this.form.startTime = 0;
+					this.form.endTime = 0;
+					this.rules=	[
+						{
+							name: 'adName',
+							rule: ['required'],
+							msg: ['请输入名称']
+						},
+						{
+							name: 'adImgStr',
+							rule: ['required'],
+							msg: ['请先上传图片']
+						}
+					]
+				}else{
+					this.rules=	[
+					{
+						name: 'startTime',
+						rule: ['required'],
+						msg: ['请选择开始时间']
+					},
+					{
+						name: 'endTime',
+						rule: ['required'],
+						msg: ['请选择结束时间']
+					},
+					{
+						name: 'adName',
+						rule: ['required'],
+						msg: ['请输入名称']
+					},
+					{
+						name: 'adImgStr',
+						rule: ['required'],
+						msg: ['请先上传图片']
+					}
+				]
+				}
+			},
+			switchChangePerpetual(e){
+				this.form.isPerpetual = e.target.value
+				this.changeRulePerpetual(e.target.value)
+			},
 			switchChangeFn(e) {
 				this.form.status = e.target.value ? 1 : 0
 			},
@@ -238,7 +332,6 @@
 			confirmFn() {
 				let hostFn = this.option.id ? update : add
 				let form = JSON.parse(JSON.stringify(this.form))
-				console.log(form)
 				form.adImg = this.$util.imgSubstr(form.adImg)
 				form.adImg = form.adImg.join()
 				if (this.option.id) {
@@ -258,31 +351,31 @@
 			// 表单验证
 			formSubmit(e) {
 				// 表单规则
-				let rules = [
-					{
-						name: 'adName',
-						rule: ['required'],
-						msg: ['请输入名称']
-					},
-					{
-						name: 'startTime',
-						rule: ['required'],
-						msg: ['请选择开始时间']
-					},
-					{
-						name: 'endTime',
-						rule: ['required'],
-						msg: ['请选择结束时间']
-					},
-					{
-						name: 'adImgStr',
-						rule: ['required'],
-						msg: ['请先上传图片']
-					}
-				]
+				// let rules = [
+				// 	{
+				// 		name: 'adName',
+				// 		rule: ['required'],
+				// 		msg: ['请输入名称']
+				// 	},
+				// 	{
+				// 		name: 'startTime',
+				// 		rule: ['required'],
+				// 		msg: ['请选择开始时间']
+				// 	},
+				// 	{
+				// 		name: 'endTime',
+				// 		rule: ['required'],
+				// 		msg: ['请选择结束时间']
+				// 	},
+				// 	{
+				// 		name: 'adImgStr',
+				// 		rule: ['required'],
+				// 		msg: ['请先上传图片']
+				// 	}
+				// ]
 				// 进行表单检查
 				let formData = e.detail.value
-				let checkRes = form.validation(formData, rules)
+				let checkRes = form.validation(formData, this.rules)
 				// 验证通过!
 				if (!checkRes) {
 					this.confirmFn()
@@ -345,4 +438,11 @@
 			width: 100%;
 		}
 	}
+	.checkbox-text {
+		font-size: 20px;
+	}
+	.app-img-upload {
+		display: flex;
+		flex-direction: column;
+	}
 </style>