|
|
@@ -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>
|