lilei 4 gadi atpakaļ
vecāks
revīzija
e997fe84c0
1 mainītis faili ar 46 papildinājumiem un 17 dzēšanām
  1. 46 17
      src/views/shop/bannerSetting.vue

+ 46 - 17
src/views/shop/bannerSetting.vue

@@ -2,7 +2,8 @@
   <a-card :bordered="false">
     <div class="add"><a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="bannerSetting-showModal">新增</a-button></div>
     <v-select ref="position" style="display: none;" code="ADVERT_TYPE"></v-select>
-    <v-select ref="jumpType" style="display: none;" code="ADVERT_JUMPTYPE"></v-select>
+    <v-select ref="jumpType" style="display: none;" code="ADVERT_JUMP_TYPE"></v-select>
+    <v-select ref="location" style="display: none;" code="ADVERT_LOCATION"></v-select>
     <!-- table列表 -->
     <s-table
       ref="table"
@@ -15,6 +16,7 @@
       <!-- 广告图位置 -->
       <template slot="position" slot-scope="text">{{ $refs.position.getNameByCode(text) }}</template>
       <template slot="jumpType" slot-scope="text">{{ $refs.jumpType.getNameByCode(text) }}</template>
+      <template slot="location" slot-scope="text">{{ $refs.location.getNameByCode(text) }}</template>
       <!-- 操作 -->
       <template slot="sort" slot-scope="text, record, index">
         <a-icon
@@ -98,20 +100,31 @@
             v-decorator="['formData.type', { initialValue: formData.type, rules: [{ required: true, message: '请选择推广位类型!' }] }]"
           ></v-select>
         </a-form-item>
+        <a-form-item label="显示位置" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+          <v-select
+            code="ADVERT_LOCATION"
+            allowClear
+            id="bannerSetting-location"
+            placeholder="请选择显示位置"
+            :disabled="disabled"
+            v-decorator="['formData.location', { initialValue: formData.location, rules: [{ required: true, message: '请选择显示位置!' }] }]"
+          ></v-select>
+        </a-form-item>
         <a-form-item label="跳转类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
           <v-select
-            code="ADVERT_JUMPTYPE"
+            code="ADVERT_JUMP_TYPE"
             allowClear
             id="bannerSetting-jumpType"
             placeholder="请选择跳转类型"
             :disabled="disabled"
+            @change="jumpTypeChange"
             v-decorator="['formData.jumpType', { initialValue: formData.jumpType, rules: [{ required: true, message: '请选择跳转类型!' }] }]"
           ></v-select>
         </a-form-item>
-        <a-form-item label="跳转链接" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-form-item label="跳转链接" v-if="showJumpUrl" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
           <a-textarea
             :maxLength="300"
-            v-decorator="['formData.jumpUrl', { initialValue: formData.jumpUrl, rules: [{ required: false, message: '请输入跳转链接(最多300字符)!' }] }]"
+            v-decorator="['formData.jumpUrl', { initialValue: formData.jumpUrl, rules: [{ required: true, message: '请输入跳转链接(最多300字符)!' }] }]"
             :disabled="disabled"
             id="bannerSetting-jumpUrl"
             placeholder="请输入跳转链接(最多300字符)"
@@ -180,6 +193,7 @@ export default {
   },
   data () {
     return {
+      showJumpUrl: true,
       // 表头
       columns: [
         {
@@ -188,9 +202,15 @@ export default {
           width: 60,
           align: 'center'
         },
+        {
+          title: '名称',
+          width: 150,
+          dataIndex: 'title',
+          align: 'center'
+        },
         {
           title: '推广位类型',
-          width: 200,
+          width: 100,
           dataIndex: 'type',
           align: 'center',
           scopedSlots: {
@@ -198,18 +218,12 @@ export default {
           }
         },
         {
-          title: '名称',
-          width: 100,
-          dataIndex: 'title',
-          align: 'center'
-        },
-        {
-          title: '排序',
-          width: 100,
-          dataIndex: 'sort',
+          title: '显示位置',
+          width: 120,
+          dataIndex: 'location',
           align: 'center',
           scopedSlots: {
-            customRender: 'sort'
+            customRender: 'location'
           }
         },
         {
@@ -239,10 +253,19 @@ export default {
             customRender: 'status'
           }
         },
+        {
+          title: '排序',
+          width: 100,
+          dataIndex: 'sort',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'sort'
+          }
+        },
         {
           title: '操作',
           align: 'center',
-          width: 200,
+          width: 150,
           scopedSlots: {
             customRender: 'action'
           }
@@ -279,13 +302,13 @@ export default {
         title: '', // 标题
         state: '', // 状态
         type: '', // 广告图类型
+        location: '', // 显示位置
         image: '', // banner地址
         createDate: '', // 创建时间
         jumpType: '', // 跳转类型
         jumpUrl: '', // 跳转路径
         remarks: '' // 备注
       },
-      bannerType: 'app',
       disabled: false,
       value: '',
       id: '',
@@ -299,6 +322,10 @@ export default {
     })
   },
   methods: {
+    jumpTypeChange (e) {
+      console.log(e)
+      this.showJumpUrl = e != 'NONE'
+    },
     showModal () {
       this.disabled = false
       delete this.formData.id
@@ -336,6 +363,7 @@ export default {
       this.formData.jumpUrl = ''
       this.formData.state = ''
       this.formData.type = ''
+      this.formData.location = ''
       this.formData.image = ''
       this.formData.jumpType = '' // 跳转类型
       this.formData.remarks = '' // 备注
@@ -353,6 +381,7 @@ export default {
       this.formData.jumpUrl = row.jumpUrl
       this.formData.state = row.state
       this.formData.type = row.type
+      this.formData.location = row.location
       this.formData.jumpType = row.jumpType
       this.formData.remarks = row.remarks
       this.formData.createDate = row.createDate