优先级增加 只分享/只广告 地域选择 可不指定 调整UI

src/views/games/details/share/edit.vue

@@ -3,7 +3,7 @@
     <el-form
       ref="shareForm"
       :model="shareForm"
-      :rules="rules"
+      :rules="shareFormRules"
       label-width="120px"
       style="width: 60%"
     >
@@ -30,6 +30,7 @@
 
       <el-form-item label="地域" prop="area">
         <el-select v-model="shareForm.area" placeholder="请选择地域" style="width: 100%">
+          <el-option label="不指定地域" value>不指定地域</el-option>
           <el-option
             v-for="(item,index) in areas"
             :key="index"
@@ -47,9 +48,11 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="优先级" prop="type">
-        <el-radio-group v-model="shareForm.type">
+        <el-radio-group v-model="shareForm.type" @change="changeType">
           <el-radio :label="0">分享优先</el-radio>
           <el-radio :label="1">广告优先</el-radio>
+          <el-radio :label="2">只分享</el-radio>
+          <el-radio :label="3">只广告</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="分享次数" prop="share_count">
@@ -86,6 +89,7 @@
         <el-button v-if="permEdit" size="mini" @click="addShareGroup">添加分享语</el-button>
       </el-form-item>
 
+      <div v-if="!onlyShare">
         <el-form-item label="广告 ID" prop="ad_id">
           <el-input v-model="shareForm.ad_id"/>
         </el-form-item>
@@ -97,6 +101,8 @@
           <el-input v-model.number="shareForm.ad_cd"/>
           <span class="ipt-tip">点击广告的间隔时间, 暂时无用。</span>
         </el-form-item>
+      </div>
+
       <el-form-item label="备注" prop="comment">
         <el-input v-model="shareForm.comment" type="textarea"/>
       </el-form-item>
@@ -108,7 +114,7 @@
     </el-form>
 
     <!-- Modal - 编辑分享类型 -->
-    <el-dialog title="分享类型列表" :visible.sync="modalShareTypeVisible">
+    <el-dialog title="分享类型列表" :visible.sync="modalShareTypeVisible" width="35%">
       <el-button v-if="permEdit" type="primary" @click="addShareType">新增</el-button>
       <el-table
         :data="shareTypes"
@@ -136,6 +142,7 @@
       :visible.sync="modalShareTypeEditVisible"
       append-to-body
       :before-close="closeShareTypeEditModal"
+       width="35%"
     >
       <el-form
         ref="shareTypeForm"
@@ -156,7 +163,7 @@
       </span>
     </el-dialog>
     <!-- Modal - 编辑地域 -->
-    <el-dialog title="地域列表" :visible.sync="modalAreaVisible">
+    <el-dialog title="地域列表" :visible.sync="modalAreaVisible"  width="35%">
       <el-button v-if="permEdit" type="primary" @click="addArea">新增</el-button>
       <el-table
         :data="areas"
@@ -183,6 +190,7 @@
       :visible.sync="modalAreaEditVisible"
       append-to-body
       :before-close="closeModalAreaEdit"
+       width="35%"
     >
       <el-form ref="areaForm" :model="areaForm" :rules="areaFormRules" label-width="50px">
         <el-form-item label="说明" prop="name">
@@ -280,6 +288,7 @@ export default {
       regions: [],
       areas: [],
       token: '',
+      onlyShare: false,
       // main
       shareForm: {
         default_share: false,
@@ -298,7 +307,7 @@ export default {
         comment: '',
         ad_id: ''
       },
-      rules: {
+      shareFormRules: {
         default_share: [
           { required: true, message: '请选择是否默认分享', trigger: 'blur' }
         ],
@@ -307,13 +316,28 @@ export default {
           { type: 'number', message: '请输入数字', trigger: 'blur' }
         ],
         ad_count: [
-          { required: true, message: '请输入广告次数', trigger: 'blur' },
+          {
+            required: !this.onlyShare,
+            message: this.onlyShare ? '' : '请输入广告次数',
+            trigger: 'blur'
+          },
           { type: 'number', message: '请输入数字', trigger: 'blur' }
         ],
         ad_cd: [
-          { required: true, message: '请输入广告播放间隔', trigger: 'blur' },
+          {
+            required: !this.onlyShare,
+            message: this.onlyShare ? '' : '请输入广告播放间隔',
+            trigger: 'blur'
+          },
           { type: 'number', message: '请输入数字', trigger: 'blur' }
         ],
+        ad_id: [
+          {
+            required: !this.onlyShare,
+            message: this.onlyShare ? '' : '请输入广告ID',
+            trigger: 'blur'
+          }
+        ],
         type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
         share_type: [
           { required: true, message: '请选择分享类型', trigger: 'blur' }
@@ -321,9 +345,7 @@ export default {
         share_word: [
           { required: true, message: '请至少添加一个分享组', trigger: 'blur' }
         ],
-        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
-        area: [{ required: true, message: '请输入地域', trigger: 'blur' }],
-        ad_id: [{ required: true, message: '请输入广告ID', trigger: 'blur' }]
+        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
       },
       imageUrl: '',
       // modal - shareType
@@ -454,12 +476,16 @@ export default {
                 share_image: this.shareForm.share_images[i]
               })
             }
+            if (this.shareForm.type === 2) this.onlyShare = true
           }
         })
         .catch(err => {
           console.log(err)
         })
     },
+    changeType(val) {
+      val === 2 ? (this.onlyShare = true) : (this.onlyShare = false)
+    },
     submitForm(formName) {
       if (this.shareGroups.length > 0) {
         this.shareForm.share_word = this.shareGroups[0].share_word

src/views/games/details/share/index.vue

@@ -14,8 +14,10 @@
       </el-form-item>
       <el-form-item label="类型" prop="type">
         <el-select v-model="filterForm.type" placeholder="请选择类型">
-          <el-option label="分享图" :value="0"/>
-          <el-option label="广告" :value="1"/>
+          <el-option label="分享优先" :value="0"/>
+          <el-option label="广告优先" :value="1"/>
+          <el-option label="只分享" :value="2"/>
+          <el-option label="只广告" :value="3"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -66,7 +68,13 @@
         sortable
         :formatter="formatDefault"
       />
-      <el-table-column prop="areaName" label="地域" show-overflow-tooltip sortable/>
+      <el-table-column
+        prop="areaName"
+        label="地域"
+        show-overflow-tooltip
+        sortable
+        :formatter="formatArea"
+      />
       <el-table-column prop="sex" label="性别" show-overflow-tooltip sortable :formatter="formatSex"/>
       <el-table-column prop="name" label="操作" fixed="right" width="126">
         <template slot-scope="scope">
@@ -138,12 +146,12 @@ export default {
     }
     this.permEdit =
       this.userInfo.permissions.includes(`${this.uid}-edit`) ||
-      this.userInfo.permissions.includes(`${this.uid}-publish`)||
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
       this.userInfo.permissions.includes(`games-writeable`)
     this.permView =
       this.userInfo.permissions.includes(`${this.uid}-readable`) ||
       this.userInfo.permissions.includes(`${this.uid}-edit`) ||
-      this.userInfo.permissions.includes(`${this.uid}-publish`)||
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
       this.userInfo.permissions.includes(`games-writeable`)
   },
   methods: {
@@ -253,7 +261,15 @@ export default {
       return cellValue ? '是' : '否'
     },
     formatType(row, column, cellValue, index) {
-      return cellValue === 0 ? '分享图' : '广告'
+      if (cellValue === 0) {
+        return '分享优先'
+      } else if (cellValue === 1) {
+        return '广告优先'
+      } else if (cellValue === 2) {
+        return '只分享'
+      } else if (cellValue === 3) {
+        return '只广告'
+      }
     },
     formatSex(row, column, cellValue, index) {
       if (cellValue === '0') {
@@ -264,6 +280,9 @@ export default {
         return '女'
       }
     },
+    formatArea(row, column, cellValue, index) {
+      return cellValue ? cellValue : '不指定'
+    },
     delShare(row) {
       this.$confirm('是否删除该分享图?', '提示', {
         confirmButtonText: '确定',