广告详情、列表修改

src/utils/ad-data.js

@@ -0,0 +1,19 @@
+const areaList = {
+  '1': '首页',
+  '2': '游戏中',
+  '3': '结算页',
+  '4': '关闭',
+}
+
+const typeList = {
+  '1': 'icon',
+  '2': 'banner',
+  '3': '浮窗',
+}
+
+const modeList = {
+  '1': '单播',
+  '2': '轮播',
+}
+
+export {areaList, typeList, modeList}

src/views/ad/edit.vue

@@ -19,6 +19,25 @@
           :disabled="!writeable"
         />
       </el-form-item>
+      <el-form-item
+        label="平台"
+        prop="channelid"
+      >
+        <el-select
+          v-model="adForm.channelid"
+          placeholder="请选择投放平台"
+          class="w100"
+          :disabled="!writeable"
+          @change="changePlatform"
+        >
+          <el-option
+            :label="item.platform_name"
+            :value="item.platform_id"
+            v-for="(item, index) in platformList"
+            :key="index"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item
         label="投放游戏"
         prop="gameid"
@@ -28,6 +47,7 @@
           placeholder="请选择投放游戏"
           class="w100"
           :disabled="!writeable"
+          @change="changeGame"
         >
           <el-option
             :label="item.game"
@@ -201,6 +221,7 @@
 <script>
 import { getAdPos, getAd, addAd, updateAd } from '@/api/ad'
 import { getGameList } from '@/api/game'
+import { areaList, typeList, modeList } from '@/utils/ad-data'
 import moment from 'moment'
 
 export default {
@@ -218,24 +239,19 @@ export default {
       //common
       writeable: true,
       companyid: 0,
+      allGame: [],
       gameList: [],
+      platformList: [],
       locationList: [],
-      locationArea: {
+      areaList: {},
-        '1': '首页',
+      typeList: {},
-        '2': '游戏中',
+      modeList: {},
-        '3': '结算页',
-        '4': '关闭'
-      },
-      locationType: {
-        '1': 'icon',
-        '2': 'banner',
-        '3': '浮窗'
-      },
       uploadUrl: `${process.env.VUE_APP_UPLOAD}`,
       // form
       adForm: {
         name: '',
         gameid: '',
+        channelid: '',
         locationid: '',
         ad_title: '',
         ad_body: '',
@@ -255,6 +271,9 @@ export default {
         gameid: [
           { required: true, message: '请选择投放游戏', trigger: 'blur' }
         ],
+        channelid: [
+          { required: true, message: '请选择投放平台', trigger: 'blur' }
+        ],
         locationid: [
           { required: true, message: '请选择投放位置', trigger: 'blur' },
           { type: 'number', message: '投放位置必须是数值', trigger: 'blur' }
@@ -272,33 +291,59 @@ export default {
     }
   },
   async mounted() {
-    const gameList = await this.getGameList()
+    // 位置相关数据导入
+    this.areaList = areaList
+    this.modeList = modeList
+    this.typeList = typeList
 
-    this.gameList = gameList.map(item => {
+    // 获取所有可投放游戏
+    const allGame = await this.getGameList()
+    this.allGame = allGame
+
+    // 获取所有平台
+    this.platformList = this.allGame.map(item => {
+      return `${item.platform_id}-${item.platform_name}`
+    })
+    this.platformList = [...new Set(this.platformList)]
+    this.platformList = this.platformList.map(item => {
+      const platform = item.split('-')
       return {
-        game: `${item.game}(${item.platform_name})`,
+        platform_id: parseInt(platform[0]),
-        game_id: `${item.game_id}:${item.platform_id}`
+        platform_name: platform[1]
       }
     })
 
-    const pos = await this.getAdPos()
+    let hasAd = true
-    this.locationList = pos.message.map(item => {
-      item.label = `${this.locationArea[item.area]}-${
-        this.locationType[item.type]
-      }`
-      return item
-    })
-
     const ad_id = this.$route.query.ad_id
     if (ad_id) {
       const ad = await this.getAd({ id: ad_id })
+      if (ad.message.length === 0) {
+        hasAd = false
+        return
+      }
       const adData = JSON.parse(JSON.stringify(ad.message[0]))
       adData.dateRange = [
         this.formDate(adData.begin_time),
         this.formDate(adData.end_time)
       ]
-
       this.adForm = adData
+      const gameid = this.adForm.gameid
+      const locationid = this.adForm.locationid
+      this.changePlatform(this.adForm.channelid)
+      this.adForm.gameid = gameid
+      this.changeGame()
+      this.adForm.locationid = locationid
+    } else {
+      hasAd = false
+    }
+
+    if (!hasAd) {
+      // 默认选择第一个平台
+      this.adForm.channelid = this.platformList[0].platform_id
+      this.changePlatform(this.adForm.channelid)
+      // 默认选择第一个游戏
+      this.adForm.gameid = this.gameList[0] ? this.gameList[0].game_id : ''
+      this.changeGame()
     }
   },
   methods: {
@@ -392,6 +437,34 @@ export default {
         .format('YYYY-MM-DD HH:mm:ss')
     },
     // form
+    changePlatform(val) {
+      this.adForm.gameid = ''
+      this.adForm.locationid = ''
+      this.gameList = this.allGame.filter(item => {
+        return item.platform_id === val
+      })
+    },
+    async changeGame(val) {
+      this.adForm.locationid = ''
+      const location = await this.getAdPos({
+        channelid: this.adForm.channelid,
+        gameid: this.adForm.gameid
+      })
+      if (!location.message || location.message.length === 0) {
+        this.locationList = []
+        return
+      }
+
+      this.locationList = location.message.map(item => {
+        const area = item.area.split(',')
+        return {
+          id: item.id,
+          label: `${this.areaList[area[0]]}-(${area[1]},${area[2]})-${
+            this.modeList[item.mode]
+          }`
+        }
+      })
+    },
     beforeUpload(file) {
       const isLt600k = file.size / 1024 / 1024 < 0.6
 

src/views/ad/list.vue

@@ -16,6 +16,10 @@
             v-model="filterForm.status"
             placeholder="请选择审核状态"
           >
+            <el-option
+              label="所有"
+              :value="''"
+            />
             <el-option
               label="待审核"
               :value="0"
@@ -91,7 +95,13 @@
           show-overflow-tooltip
         />
         <el-table-column
-          prop="locationid"
+          prop="channelid"
+          label="投放平台"
+          :formatter="formPlatform"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="area"
           label="投放位置"
           :formatter="formLocation"
           show-overflow-tooltip
@@ -182,6 +192,7 @@
 <script>
 import { getAd, updateAd, delAd, getAdPos } from '@/api/ad'
 import { getGameList } from '@/api/game'
+import { areaList, typeList, modeList } from '@/utils/ad-data'
 import { Promise, reject } from 'q'
 import moment from 'moment'
 
@@ -191,18 +202,11 @@ export default {
     return {
       // common
       gameList: {},
+      platformList: {},
       locationList: {},
-      locationArea: {
+      areaList: {},
-        '1': '首页',
+      typeList: {},
-        '2': '游戏中',
+      modeList: {},
-        '3': '结算页',
-        '4': '关闭'
-      },
-      locationType: {
-        '1': 'icon',
-        '2': 'banner',
-        '3': '浮窗'
-      },
       sortList: {
         '0': '按固定次数推广',
         '1': '个性化推荐',
@@ -230,17 +234,18 @@ export default {
     }
   },
   async mounted() {
+    // 位置相关数据导入
+    this.areaList = areaList
+    this.modeList = modeList
+    this.typeList = typeList
+
     const gameList = await this.getGameList()
     gameList.map(item => {
-      const key = `${item.game_id}:${item.platform_id}`
+      const gameKey = `${item.game_id}`
-      this.gameList[key] = `${item.game}(${item.platform_name})`
+      this.gameList[gameKey] = `${item.game}`
-    })
 
-    const pos = await this.getAdPos()
+      const platformKey = `${item.platform_id}`
-    pos.message.map(item => {
+      this.platformList[platformKey] = `${item.platform_name}`
-      this.locationList[item.id] = `${this.locationArea[item.area]}-${
-        this.locationType[item.type]
-      }`
     })
 
     this.getData()
@@ -369,8 +374,15 @@ export default {
     formSort(row, column, cellValue, index) {
       return `${this.sortList[cellValue]}`
     },
+    formPlatform(row, column, cellValue, index) {
+      return `${this.platformList[cellValue]}`
+    },
     formLocation(row, column, cellValue, index) {
-      return `${this.locationList[cellValue]}`
+      const area = cellValue.split(',')
+
+      return `${this.areaList[area[0]]}-(${area[1]},${area[2]})-${
+        this.modeList[row.mode]
+      }`
     },
     formJump(row, column, cellValue, index) {
       return cellValue === 1 ? '是' : '否'

src/views/admin/ad-list.vue

@@ -15,6 +15,10 @@
           v-model="filterForm.status"
           placeholder="请选择审核状态"
         >
+          <el-option
+            label="所有"
+            :value="''"
+          />
           <el-option
             label="待审核"
             :value="0"
@@ -95,6 +99,12 @@
         label="广告名称"
         show-overflow-tooltip
       />
+      <el-table-column
+        prop="channelid"
+        label="投放平台"
+        :formatter="formPlatform"
+        show-overflow-tooltip
+      />
       <el-table-column
         prop="gameid"
         label="投放游戏"
@@ -102,7 +112,7 @@
         show-overflow-tooltip
       />
       <el-table-column
-        prop="locationid"
+        prop="area"
         label="投放位置"
         :formatter="formLocation"
         show-overflow-tooltip
@@ -211,6 +221,7 @@
 <script>
 import { getAd, updateAd, delAd, getAdPos } from '@/api/ad'
 import { getGameList } from '@/api/game'
+import { areaList, typeList, modeList } from '@/utils/ad-data'
 import { Promise, reject } from 'q'
 import moment from 'moment'
 
@@ -220,18 +231,11 @@ export default {
     return {
       // common
       gameList: {},
+      platformList: {},
       locationList: {},
-      locationArea: {
+      areaList: {},
-        '1': '首页',
+      typeList: {},
-        '2': '游戏中',
+      modeList: {},
-        '3': '结算页',
-        '4': '关闭'
-      },
-      locationType: {
-        '1': 'icon',
-        '2': 'banner',
-        '3': '浮窗'
-      },
       sortList: {
         '0': '按固定次数推广',
         '1': '个性化推荐',
@@ -259,19 +263,21 @@ export default {
     }
   },
   async mounted() {
+    // 位置相关数据导入
+    this.areaList = areaList
+    this.modeList = modeList
+    this.typeList = typeList
+
     const gameList = await this.getGameList()
 
     gameList.map(item => {
-      const key = `${item.game_id}:${item.platform_id}`
+      const gameKey = `${item.game_id}`
-      this.gameList[key] = `${item.game}(${item.platform_name})`
+      this.gameList[gameKey] = `${item.game}`
+
+      const platformKey = `${item.platform_id}`
+      this.platformList[platformKey] = `${item.platform_name}`
     })
 
-    const pos = await this.getAdPos()
-    pos.message.map(item => {
-      this.locationList[item.id] = `${this.locationArea[item.area]}-${
-        this.locationType[item.type]
-      }`
-    })
     this.getData()
   },
   methods: {
@@ -489,11 +495,19 @@ export default {
     formGame(row, column, cellValue, index) {
       return `${this.gameList[cellValue]}`
     },
+    formPlatform(row, column, cellValue, index) {
+      return `${this.platformList[cellValue]}`
+    },
     formSort(row, column, cellValue, index) {
       return `${this.sortList[cellValue]}`
     },
     formLocation(row, column, cellValue, index) {
-      return `${this.locationList[cellValue]}`
+      const area = cellValue.split(',')
+
+      console.log(this.areaList)
+      return `${this.areaList[area[0]]}-(${area[1]},${area[2]})-${
+        this.modeList[row.mode]
+      }`
     },
     formJump(row, column, cellValue, index) {
       return cellValue === 1 ? '是' : '否'