diff --git a/src/api/ad.js b/src/api/ad.js
index 576356a..4103d2d 100644
--- a/src/api/ad.js
+++ b/src/api/ad.js
@@ -31,3 +31,34 @@ export function delAdPos(data) {
     data,
   })
 }
+
+export function getAdAreaList() {
+  return request({
+    url: '/games/ad/get-area',
+    method: 'get',
+  })
+}
+
+export function saveAdArea(data) {
+  return request({
+    url: '/games/ad/save-area',
+    method: 'post',
+    data,
+  })
+}
+
+export function editAdArea(data) {
+  return request({
+    url: '/games/ad/edit-area',
+    method: 'post',
+    data,
+  })
+}
+
+export function delAdArea(data) {
+  return request({
+    url: '/games/ad/del-area',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 9cda686..e955638 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -9,32 +9,38 @@ const gamesRouter = {
   name: 'Games',
   meta: {
     title: '游戏管理',
-    icon: 'games'
+    icon: 'games',
   },
   children: [
     {
       path: 'list',
       component: () => import('@/views/games/list'), // Parent router-view
       name: 'GameList',
-      meta: { title: '游戏列表' }
+      meta: {title: '游戏列表'},
     },
     {
       path: 'settings',
       component: () => import('@/views/games/settings'), // Parent router-view
       name: 'GameSettings',
-      meta: { title: '配置项管理' }
+      meta: {title: '配置项管理'},
     },
     {
       path: 'platforms',
       component: () => import('@/views/games/platforms'), // Parent router-view
       name: 'GamePlatforms',
-      meta: { title: '平台管理' }
+      meta: {title: '平台管理'},
+    },
+    {
+      path: 'ad-area',
+      component: () => import('@/views/games/ad-area'), // Parent router-view
+      name: 'GameAdArea',
+      meta: {title: '广告区域管理'},
     },
     {
       path: 'lib',
       component: () => import('@/views/games/lib'), // Parent router-view
       name: 'GameLib',
-      meta: { title: '素材管理' }
+      meta: {title: '素材管理'},
     },
     {
       path: 'details/:uid?',
@@ -44,256 +50,263 @@ const gamesRouter = {
       hidden: true,
       // meta: { title: '游戏信息' },
       children: [
-        {
-          path: 'profile',
-          component: () => import('@/views/games/details/profile'),
-          name: 'GameDetailsProfile',
-          meta: { title: '游戏简介' }
-        },
+        // {
+        //   path: 'profile',
+        //   component: () => import('@/views/games/details/profile'),
+        //   name: 'GameDetailsProfile',
+        //   meta: { title: '游戏简介' }
+        // },
         {
           path: 'info',
           component: () => import('@/views/games/details/info'),
           name: 'GameDetailsInfo',
-          meta: { title: '详细信息' }
+          meta: {title: '详细信息'},
         },
         {
           path: 'data',
           component: () => import('@/views/games/details/data'),
           name: 'GameDetailsData',
-          meta: { title: '数据' }
+          meta: {title: '数据'},
         },
         {
           path: 'settings/index',
           component: () => import('@/views/games/details/settings/index'),
           name: 'GameDetailsSettings',
-          meta: { title: '配置' }
+          meta: {title: '配置'},
         },
 
         {
           path: 'settings/achievement',
           component: () => import('@/views/games/details/settings/achievement'),
           name: 'GameDetailsAchievement',
-          meta: { title: '成就' }
+          meta: {title: '成就'},
         },
         {
           path: 'settings/invitation',
           component: () => import('@/views/games/details/settings/invitation'),
           name: 'GameDetailsInvitation',
-          meta: { title: '邀请' }
+          meta: {title: '邀请'},
         },
         {
           path: 'settings/red-envelope',
-          component: () => import('@/views/games/details/settings/red-envelope'),
+          component: () =>
+            import('@/views/games/details/settings/red-envelope'),
           name: 'GameDetailsRedEnvelope',
-          meta: { title: '红包' }
+          meta: {title: '红包'},
         },
         {
           path: 'settings/sign',
           component: () => import('@/views/games/details/settings/sign'),
           name: 'GameDetailsSign',
-          meta: { title: '签到' }
+          meta: {title: '签到'},
         },
         {
           path: 'settings/online',
           component: () => import('@/views/games/details/settings/online'),
           name: 'GameDetailsOnline',
-          meta: { title: '在线时长奖励' }
+          meta: {title: '在线时长奖励'},
+        },
+        {
+          path: 'settings/banner',
+          component: () => import('@/views/games/details/settings/banner'),
+          name: 'GameDetailsBanner',
+          meta: {title: 'Banner广告配置'},
         },
         {
           path: 'recommendation',
           component: () => import('@/views/games/details/recommendation'),
           name: 'GameDetailsRecommendation',
-          meta: { title: '关联推荐' }
+          meta: {title: '关联推荐'},
         },
         {
           path: 'share',
           component: () => import('@/views/games/details/share/index'),
           name: 'GameDetailsShare',
-          meta: { title: '分享图' }
+          meta: {title: '分享图'},
         },
         {
           path: 'share/edit',
           component: () => import('@/views/games/details/share/edit'),
           name: 'GameDetailsShareEdit',
-          meta: { title: '编辑分享图' }
+          meta: {title: '编辑分享图'},
         },
         {
           path: 'reward',
           component: () => import('@/views/games/details/reward'),
           name: 'GameDetailsReward',
-          meta: { title: '客服奖励' }
+          meta: {title: '客服奖励'},
         },
         {
           path: 'ad-pos',
           component: () => import('@/views/games/details/adPos'),
           name: 'GameDetailsAdPos',
-          meta: { title: '广告位置' }
-        },
-        {
-          path: 'gm/servers',
-          component: () => import('@/views/games/details/gm/servers'),
-          name: 'GameDetailsGMServers',
-          meta: { title: '服务器管理' }
-        },
-        {
-          path: 'gm/announces',
-          component: () => import('@/views/games/details/gm/announces'),
-          name: 'GameDetailsGMAnnounces',
-          meta: { title: '公告' }
-        },
-        {
-          path: 'gm/scroll',
-          component: () => import('@/views/games/details/gm/scroll'),
-          name: 'GameDetailsGMScroll',
-          meta: { title: '跑马灯' }
-        },
-        {
-          path: 'gm/mails',
-          component: () => import('@/views/games/details/gm/mails'),
-          name: 'GameDetailsGMMails',
-          meta: { title: '邮件' }
-        },
-        {
-          path: 'gm/activities',
-          component: () => import('@/views/games/details/gm/activities'),
-          name: 'GameDetailsGMActivities',
-          meta: { title: '活动' }
-        },
-        {
-          path: 'gm/codes',
-          component: () => import('@/views/games/details/gm/codes'),
-          name: 'GameDetailsGMCodes',
-          meta: { title: '兑换码' }
-        },
-        {
-          path: 'gm/gifts',
-          component: () => import('@/views/games/details/gm/gifts'),
-          name: 'GameDetailsGMGifts',
-          meta: { title: '礼包' }
-        },
-        {
-          path: 'gm/recharge-record',
-          component: () => import('@/views/games/details/gm/recharge-record'),
-          name: 'GameDetailsGMRechargeRecord',
-          meta: { title: '充值记录' }
-        },
-        {
-          path: 'gm/recharge-request',
-          component: () => import('@/views/games/details/gm/recharge-request'),
-          name: 'GameDetailsGMRechargeRequest',
-          meta: { title: '充值请求' }
-        },
-        {
-          path: 'gm/users',
-          component: () => import('@/views/games/details/gm/users'),
-          name: 'GameDetailsGMUsers',
-          meta: { title: '用户管理' }
-        },
-        {
-          path: 'gm/forbid-account',
-          component: () => import('@/views/games/details/gm/forbid-account'),
-          name: 'GameDetailsGMForbidAccount',
-          meta: { title: '封禁记录' }
-        },
-        {
-          path: 'gm/forbid-speak',
-          component: () => import('@/views/games/details/gm/forbid-speak'),
-          name: 'GameDetailsGMForbidSpeak',
-          meta: { title: '禁言记录' }
-        },
-        {
-          path: 'gm/chat-logs',
-          component: () => import('@/views/games/details/gm/chat-logs'),
-          name: 'GameDetailsGMChatLogs',
-          meta: { title: '聊天记录' }
-        },
-        {
-          path: 'gm/op-logs',
-          component: () => import('@/views/games/details/gm/op-logs'),
-          name: 'GameDetailsGMOpLogs',
-          meta: { title: '操作记录' }
-        },
-        {
-          path: 'doll/dolls/index',
-          component: () => import('@/views/games/details/doll/dolls/index'),
-          name: 'GameDetailsDollDollsIndex',
-          meta: { title: '公仔列表' }
-        },
-        {
-          path: 'doll/dolls/edit',
-          component: () => import('@/views/games/details/doll/dolls/edit'),
-          name: 'GameDetailsDollDollsEdit',
-          meta: { title: '编辑公仔' }
-        },
-        {
-          path: 'doll/cards/index',
-          component: () => import('@/views/games/details/doll/cards/index'),
-          name: 'GameDetailsDollCardsIndex',
-          meta: { title: '卡片列表' }
-        },
-        {
-          path: 'doll/cards/edit',
-          component: () => import('@/views/games/details/doll/cards/edit'),
-          name: 'GameDetailsDollCardsEdit',
-          meta: { title: '编辑卡片' }
-        },
-        {
-          path: 'doll/exchange',
-          component: () => import('@/views/games/details/doll/exchange'),
-          name: 'GameDetailsDollExchange',
-          meta: { title: '兑换记录' }
-        },
-        {
-          path: 'doll/points',
-          component: () => import('@/views/games/details/doll/points'),
-          name: 'GameDetailsDollPoints',
-          meta: { title: '积分墙' }
-        },
-        {
-          path: 'puzzle/questions',
-          component: () => import('@/views/games/details/puzzle/questions'),
-          name: 'GameDetailsPuzzleQuestions',
-          meta: { title: '题库管理' }
-        },
-        {
-          path: 'puzzle/levels',
-          component: () => import('@/views/games/details/puzzle/levels'),
-          name: 'GameDetailsPuzzleLevels',
-          meta: { title: '关卡' }
-        },
-        {
-          path: 'emulate/games/index',
-          component: () => import('@/views/games/details/emulate/games/index'),
-          name: 'GameDetailsEmulateGames',
-          meta: { title: '模拟器游戏列表' }
-        },
-        {
-          path: 'emulate/games/edit',
-          component: () => import('@/views/games/details/emulate/games/edit'),
-          name: 'GameDetailsEmulateGames',
-          meta: { title: '编辑模拟器游戏' }
-        },
-        {
-          path: 'emulate/recommend',
-          component: () => import('@/views/games/details/emulate/recommend'),
-          name: 'GameDetailsEmulateRecommend',
-          meta: { title: '游戏推荐' }
+          meta: {title: '广告位置'},
         },
+        // {
+        //   path: 'gm/servers',
+        //   component: () => import('@/views/games/details/gm/servers'),
+        //   name: 'GameDetailsGMServers',
+        //   meta: { title: '服务器管理' }
+        // },
+        // {
+        //   path: 'gm/announces',
+        //   component: () => import('@/views/games/details/gm/announces'),
+        //   name: 'GameDetailsGMAnnounces',
+        //   meta: { title: '公告' }
+        // },
+        // {
+        //   path: 'gm/scroll',
+        //   component: () => import('@/views/games/details/gm/scroll'),
+        //   name: 'GameDetailsGMScroll',
+        //   meta: { title: '跑马灯' }
+        // },
+        // {
+        //   path: 'gm/mails',
+        //   component: () => import('@/views/games/details/gm/mails'),
+        //   name: 'GameDetailsGMMails',
+        //   meta: { title: '邮件' }
+        // },
+        // {
+        //   path: 'gm/activities',
+        //   component: () => import('@/views/games/details/gm/activities'),
+        //   name: 'GameDetailsGMActivities',
+        //   meta: { title: '活动' }
+        // },
+        // {
+        //   path: 'gm/codes',
+        //   component: () => import('@/views/games/details/gm/codes'),
+        //   name: 'GameDetailsGMCodes',
+        //   meta: { title: '兑换码' }
+        // },
+        // {
+        //   path: 'gm/gifts',
+        //   component: () => import('@/views/games/details/gm/gifts'),
+        //   name: 'GameDetailsGMGifts',
+        //   meta: { title: '礼包' }
+        // },
+        // {
+        //   path: 'gm/recharge-record',
+        //   component: () => import('@/views/games/details/gm/recharge-record'),
+        //   name: 'GameDetailsGMRechargeRecord',
+        //   meta: { title: '充值记录' }
+        // },
+        // {
+        //   path: 'gm/recharge-request',
+        //   component: () => import('@/views/games/details/gm/recharge-request'),
+        //   name: 'GameDetailsGMRechargeRequest',
+        //   meta: { title: '充值请求' }
+        // },
+        // {
+        //   path: 'gm/users',
+        //   component: () => import('@/views/games/details/gm/users'),
+        //   name: 'GameDetailsGMUsers',
+        //   meta: { title: '用户管理' }
+        // },
+        // {
+        //   path: 'gm/forbid-account',
+        //   component: () => import('@/views/games/details/gm/forbid-account'),
+        //   name: 'GameDetailsGMForbidAccount',
+        //   meta: { title: '封禁记录' }
+        // },
+        // {
+        //   path: 'gm/forbid-speak',
+        //   component: () => import('@/views/games/details/gm/forbid-speak'),
+        //   name: 'GameDetailsGMForbidSpeak',
+        //   meta: { title: '禁言记录' }
+        // },
+        // {
+        //   path: 'gm/chat-logs',
+        //   component: () => import('@/views/games/details/gm/chat-logs'),
+        //   name: 'GameDetailsGMChatLogs',
+        //   meta: { title: '聊天记录' }
+        // },
+        // {
+        //   path: 'gm/op-logs',
+        //   component: () => import('@/views/games/details/gm/op-logs'),
+        //   name: 'GameDetailsGMOpLogs',
+        //   meta: { title: '操作记录' }
+        // },
+        // {
+        //   path: 'doll/dolls/index',
+        //   component: () => import('@/views/games/details/doll/dolls/index'),
+        //   name: 'GameDetailsDollDollsIndex',
+        //   meta: { title: '公仔列表' }
+        // },
+        // {
+        //   path: 'doll/dolls/edit',
+        //   component: () => import('@/views/games/details/doll/dolls/edit'),
+        //   name: 'GameDetailsDollDollsEdit',
+        //   meta: { title: '编辑公仔' }
+        // },
+        // {
+        //   path: 'doll/cards/index',
+        //   component: () => import('@/views/games/details/doll/cards/index'),
+        //   name: 'GameDetailsDollCardsIndex',
+        //   meta: { title: '卡片列表' }
+        // },
+        // {
+        //   path: 'doll/cards/edit',
+        //   component: () => import('@/views/games/details/doll/cards/edit'),
+        //   name: 'GameDetailsDollCardsEdit',
+        //   meta: { title: '编辑卡片' }
+        // },
+        // {
+        //   path: 'doll/exchange',
+        //   component: () => import('@/views/games/details/doll/exchange'),
+        //   name: 'GameDetailsDollExchange',
+        //   meta: { title: '兑换记录' }
+        // },
+        // {
+        //   path: 'doll/points',
+        //   component: () => import('@/views/games/details/doll/points'),
+        //   name: 'GameDetailsDollPoints',
+        //   meta: { title: '积分墙' }
+        // },
+        // {
+        //   path: 'puzzle/questions',
+        //   component: () => import('@/views/games/details/puzzle/questions'),
+        //   name: 'GameDetailsPuzzleQuestions',
+        //   meta: { title: '题库管理' }
+        // },
+        // {
+        //   path: 'puzzle/levels',
+        //   component: () => import('@/views/games/details/puzzle/levels'),
+        //   name: 'GameDetailsPuzzleLevels',
+        //   meta: { title: '关卡' }
+        // },
+        // {
+        //   path: 'emulate/games/index',
+        //   component: () => import('@/views/games/details/emulate/games/index'),
+        //   name: 'GameDetailsEmulateGames',
+        //   meta: { title: '模拟器游戏列表' }
+        // },
+        // {
+        //   path: 'emulate/games/edit',
+        //   component: () => import('@/views/games/details/emulate/games/edit'),
+        //   name: 'GameDetailsEmulateGames',
+        //   meta: { title: '编辑模拟器游戏' }
+        // },
+        // {
+        //   path: 'emulate/recommend',
+        //   component: () => import('@/views/games/details/emulate/recommend'),
+        //   name: 'GameDetailsEmulateRecommend',
+        //   meta: { title: '游戏推荐' }
+        // },
         {
           path: 'mp/edit',
           component: () => import('@/views/games/details/mp/edit'),
           name: 'GameDetailsMpEdit',
-          meta: { title: '分享小程序模板编辑' }
+          meta: {title: '分享小程序模板编辑'},
         },
         {
           path: 'mp/index',
           component: () => import('@/views/games/details/mp/index'),
           name: 'GameDetailsMp',
-          meta: { title: '分享小程序模板列表' }
+          meta: {title: '分享小程序模板列表'},
         },
-      ]
-    }
-  ]
+      ],
+    },
+  ],
 }
 
 export default gamesRouter
diff --git a/src/views/games/ad-area.vue b/src/views/games/ad-area.vue
new file mode 100644
index 0000000..c00495e
--- /dev/null
+++ b/src/views/games/ad-area.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <!-- toolbar -->
+    <div class="toolbar clearfix">
+      <div class="l fl">
+        <el-button
+          v-if="permWriteable"
+          type="primary"
+          @click="addAdArea"
+        >新增</el-button>
+      </div>
+      <div class="r fr">
+        <el-button
+          type="primary"
+          @click="refreshData"
+        >刷新</el-button>
+      </div>
+    </div>
+    <!-- table -->
+    <el-table
+      v-loading="isLoaded"
+      :data="tableData"
+      style="width: 100%"
+      class="table mgt-20 mgb-20"
+      @row-click="rowClick"
+    >
+      <el-table-column
+        prop="name"
+        label="区域名称"
+        show-overflow-tooltip
+        sortable
+      />
+      <el-table-column
+        prop="key"
+        label="key"
+        show-overflow-tooltip
+        sortable
+      />
+      <el-table-column
+        prop="area_id"
+        label="ID"
+        show-overflow-tooltip
+        sortable
+      />
+      <el-table-column
+        prop="comment"
+        label="备注"
+        show-overflow-tooltip
+        sortable
+      />
+      <el-table-column
+        v-if="permWriteable"
+        prop="name"
+        label="操作"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.stop="editAdArea(scope.row)"
+          >编辑</el-button>
+          <el-button
+            type="text"
+            size="small"
+            @click.stop="delAdArea(scope.row)"
+          >删除</el-button>
+
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- modal -->
+    <el-dialog
+      title="区域编辑"
+      :visible.sync="modalVisible"
+      :before-close="closeModal"
+    >
+      <el-form
+        ref="modalForm"
+        :model="modalForm"
+        :rules="modalRules"
+        label-width="80px"
+      >
+        <el-form-item
+          label="名称"
+          prop="name"
+        >
+          <el-input
+            v-model="modalForm.name"
+          />
+        </el-form-item>
+        <el-form-item
+          label="Key"
+          prop="key"
+        >
+          <el-input
+            v-model="modalForm.key"
+          />
+        </el-form-item>
+        <el-form-item
+          label="ID"
+          prop="area_id"
+        >
+          <el-input
+            v-model.number="modalForm.area_id"
+          />
+        </el-form-item>
+        <el-form-item
+          label="备注"
+          prop="comment"
+        >
+          <el-input
+            v-model="modalForm.comment"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="saveEdit"
+        >确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getAdAreaList, saveAdArea, editAdArea, delAdArea } from '@/api/ad'
+
+export default {
+  name: 'GameAdAreas',
+  data() {
+    return {
+      // common
+      permWriteable: false,
+      // table
+      isLoaded: false,
+      tableData: [],
+      // modal
+      isNew: false,
+      modalVisible: false,
+      modalForm: {
+        name: '',
+        key: '',
+        area_id: '',
+        comment: ''
+      },
+      modalRules: {
+        name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
+        key: [{ required: true, message: '请输入区域key值', trigger: 'blur' }],
+        area_id: [
+          { required: true, message: '请输入区域 ID', trigger: 'blur' },
+          { type: 'number', message: '区域 ID 必须是数字', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  mounted() {
+    this.getData()
+    this.permWriteable = this.userInfo.permissions.includes(`ad-area-writeable`)
+  },
+  methods: {
+    // toolbar
+    addAdArea() {
+      this.openModal(true)
+    },
+    async refreshData() {
+      this.getData()
+    },
+    // table
+    getData() {
+      this.isLoaded = true
+      getAdAreaList()
+        .then(res => {
+          const { data } = res
+          this.tableData = data.AdAreaList
+          this.isLoaded = false
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    editAdArea(row) {
+      this.openModal(false, row)
+    },
+    rowClick(row, column, event) {
+      this.openModal(false, row)
+    },
+    // modal
+    openModal(isNew, data) {
+      if (isNew) {
+        this.isNew = true
+        this.modalForm = {
+          name: '',
+          key: '',
+          area_id: '',
+          comment: ''
+        }
+      } else {
+        this.isNew = false
+        this.modalForm = JSON.parse(JSON.stringify(data))
+      }
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.$refs['modalForm'].clearValidate()
+      this.modalVisible = false
+    },
+    saveEdit() {
+      this.$refs['modalForm'].validate(valid => {
+        if (valid) {
+          if (this.isNew) {
+            saveAdArea(this.modalForm)
+              .then(res => {
+                const { data } = res
+                if (data.errcode === 0) {
+                  this.$message.success('新增区域成功！')
+                  this.closeModal()
+                  this.refreshData()
+                }
+              })
+              .catch(err => {
+                console.log(err)
+              })
+          } else {
+            editAdArea(this.modalForm)
+              .then(res => {
+                const { data } = res
+                if (data.errcode === 0) {
+                  this.$message.success('区域信息修改成功！')
+                  this.closeModal()
+                  this.refreshData()
+                }
+              })
+              .catch(err => {
+                console.log(err)
+              })
+          }
+        } else {
+          this.$message.error('请按要求填写区域信息！')
+          return false
+        }
+      })
+    },
+    delAdArea(row) {
+      this.$confirm(`是否要删除区域:${row.name}?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          delAdArea({ area_id: row.area_id }).then(res => {
+            const data = res.data
+            if (data.errcode === 0) {
+              this.$message.success('删除成功!')
+              this.getData()
+            }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    }
+  }
+}
+</script>
diff --git a/src/views/games/details/index.vue b/src/views/games/details/index.vue
index 4c8e540..9ab051b 100644
--- a/src/views/games/details/index.vue
+++ b/src/views/games/details/index.vue
@@ -36,6 +36,10 @@
           v-if="uid !== 'new'"
           :index="`/games/details/${uid}/settings/online`"
         >在线</el-menu-item>
+        <el-menu-item
+          v-if="uid !== 'new'"
+          :index="`/games/details/${uid}/settings/banner`"
+        >banner</el-menu-item>
       </el-submenu>
       <el-menu-item
         v-if="uid !== 'new'"
diff --git a/src/views/games/details/settings/banner.vue b/src/views/games/details/settings/banner.vue
new file mode 100644
index 0000000..b59b9e0
--- /dev/null
+++ b/src/views/games/details/settings/banner.vue
@@ -0,0 +1,451 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%">
+      <el-alert
+        title="Banner广告配置-配置提示"
+        type="info"
+        description="该页为配置子项，保存后请前往配置页进行发布！(确保配置列表中有Banner广告配置（banner_cfg）一项)"
+        show-icon
+        class="mgb-20"
+      >
+      </el-alert>
+      <el-select
+        v-model="type"
+        @change="changeType"
+        class="w100 mgb-20"
+      >
+        <el-option
+          label="普通配置"
+          value="normal"
+        />
+        <el-option
+          label="私有配置"
+          value="private"
+        />
+      </el-select>
+      <el-select
+        v-model="platform_id"
+        @change="changePlatform"
+        class="w100 mgb-20"
+      >
+        <el-option
+          v-for="item in platformsArr"
+          :key="item.platform.platform_id"
+          :label="item.platform.name"
+          :value="item.platform.platform_id"
+        />
+      </el-select>
+      <el-collapse
+        v-model="activeNames"
+        v-if="allBanner.length > 0"
+      >
+        <el-collapse-item
+          :name="index"
+          v-for="(item, index) in allBanner"
+          :key="index"
+        >
+          <template slot="title">
+            <svg-icon
+              style="margin-right: 20px;"
+              icon-class="del"
+              @click.stop="delBanner(index)"
+            />
+            {{ `区域：${areaList[item.id]&& areaList[item.id].label || '待定' }`}}
+          </template>
+          <el-form
+            :ref="`bannerForm${index}`"
+            :model="item"
+            :rules="bannerFormRules"
+            style="width: 100%"
+            label-width="120px"
+            class="mgt-20 mgb-20"
+          >
+            <el-form-item
+              label="区域"
+              prop="id"
+            >
+              <el-select
+                v-model="item.id"
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请选择banner所在区域"
+                style="width: 70%"
+                @change="changeArea(index)"
+              >
+                <el-option
+                  v-for="(val, key) in areaList"
+                  :key="key"
+                  :label="val.label"
+                  :value="val.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="广告ID"
+              prop="fixedID"
+            >
+              <el-select
+                v-model="item.fixedID"
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请填写广告ID"
+                style="width: 70%"
+              >
+                <el-option
+                  label="随机 ID"
+                  :value="''"
+                >
+                </el-option>
+              </el-select>
+              <span class="ipt-tip">可填写广告 ID，或选择随机 ID</span>
+            </el-form-item>
+            <el-form-item
+              label="是否允许显示"
+              prop="enabled"
+            >
+              <el-switch v-model="item.needRefresh"></el-switch>
+            </el-form-item>
+            <el-form-item
+              label="刷新时间间隔"
+              prop="refreshSeconds"
+            >
+              <el-input
+                v-model.number="item.refreshSeconds"
+                style="width: 70%"
+              />
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+      </el-collapse>
+
+      <div
+        class="tip"
+        v-else
+      >
+        <placeholder />
+      </div>
+
+      <div
+        class="btn-group"
+        v-if="platform_id"
+      >
+        <el-button
+          class="mgt-20"
+          type="success"
+          @click="addBanner"
+          v-if="permEdit"
+        >新增</el-button>
+        <el-button
+          class="mgt-20"
+          type="primary"
+          @click="saveAllBanner"
+          v-if="permEdit"
+        >保存</el-button>
+        <el-button
+          class="mgt-20"
+          type="warning"
+          @click="goPublish"
+          v-if="permPublish"
+        >跳转发布</el-button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+
+<script>
+import { mapGetters } from 'vuex'
+import { getGame } from '@/api/games'
+import getPageTitle from '@/utils/get-page-title'
+import { getGameSettings, saveGameSettings } from '@/api/settings'
+import { getAdAreaList } from '@/api/ad'
+import Placeholder from '@/components/Placeholder'
+import { reject, Promise } from 'q'
+
+export default {
+  name: 'GameDetailsBanner',
+  data() {
+    return {
+      // common
+      uid: '',
+      type: 'normal',
+      platform_id: '',
+      platformsArr: [],
+      gameInfo: {},
+      cfgs: [],
+      permEdit: false,
+      permPublish: false,
+      hasList: false,
+      areaList: {},
+      // form
+      bannerForm: {},
+      bannerFormRules: {
+        id: [
+          { required: true, message: '请选择banner所在区域', trigger: 'blur' }
+        ],
+        enabled: [
+          {
+            required: true,
+            message: '请选择是否允许显示banner',
+            trigger: 'blur'
+          }
+        ],
+        needRefresh: [
+          { required: true, message: '请选择是否允许刷新', trigger: 'blur' }
+        ],
+        refreshSeconds: [
+          { required: true, message: '请填写刷新间隔时间', trigger: 'blur' }
+        ]
+      },
+      activeNames: [],
+      defaultSetting: {
+        id: '',
+        enabled: true,
+        needRefresh: false,
+        refreshSeconds: 0,
+        fixedID: ''
+      },
+      allBanner: []
+    }
+  },
+  components: {
+    Placeholder
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  mounted() {
+    this.uid = this.$route.params.uid
+    this.type = this.$route.query.type ? this.$route.query.type : 'normal'
+    this.permEdit =
+      this.userInfo.permissions.includes(`${this.uid}-edit`) ||
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.permPublish =
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.getGameInfo(this.getGameSettings)
+    this.getAdAreaList()
+  },
+  methods: {
+    getGameInfo(cb) {
+      getGame({ uid: this.uid })
+        .then(res => {
+          const { data } = res
+          if (data.errcode === 0) {
+            this.gameInfo = data.gameInfo
+            this.platformsArr = data.gameInfo.platforms
+            this.$route.meta.title = this.gameInfo.game_name
+            document.title = getPageTitle(this.gameInfo.game_name)
+            if (this.$route.query.platform_id) {
+              this.platform_id = this.$route.query.platform_id
+            } else {
+              this.platform_id = this.platformsArr[0]
+                ? this.platformsArr[0].platform.platform_id
+                : ''
+            }
+            if (cb && cb instanceof Function) cb()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    getGameSettings() {
+      getGameSettings({
+        uid: this.uid,
+        type: this.type === 'normal' ? 0 : 1,
+        id: this.gameInfo.game_id,
+        pid: this.platform_id
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        this.cfgs = data.records
+        this.hasList = false
+        this.resolveBanner(this.cfgs)
+      })
+    },
+    getAdAreaList() {
+      getAdAreaList()
+        .then(res => {
+          const { data } = res
+          if (data.errcode === 0) {
+            data.AdAreaList.map(item => {
+              this.areaList[item.area_id] = {
+                id: item.area_id,
+                label: `${item.name}(${item.key})`
+              }
+            })
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    resolveBanner(settings) {
+      for (let i = 0; i < settings.length; i++) {
+        const setting = settings[i]
+        if (setting.key === 'banner_cfg') {
+          this.allBanner = JSON.parse(setting.value)
+          this.hasList = true
+          break
+        }
+      }
+
+      if (!this.hasList) this.allBanner = []
+    },
+    changePlatform() {
+      this.getGameSettings()
+    },
+    changeType() {
+      this.getGameSettings()
+    },
+    changeArea(index) {
+      const curArea = this.allBanner[index].id
+      for (let i = 0; i < this.allBanner.length; i++) {
+        console.log('id', this.allBanner[i].id)
+        if (this.allBanner[i].id === curArea && i !== index) {
+          this.$message.error('区域已存在！')
+          this.allBanner[index].id = ''
+        }
+      }
+    },
+    addBanner() {
+      const defaultSetting = JSON.parse(JSON.stringify(this.defaultSetting))
+      this.activeNames.push(this.allBanner.length)
+      this.allBanner.push(defaultSetting)
+    },
+    delBanner(index) {
+      this.$confirm('是否要删除该项配置?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.allBanner.splice(index, 1)
+          this.$message.success('删除成功！')
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    updateBannerList() {
+      if (!this.hasList) {
+        this.cfgs.push({
+          key: 'banner_cfg',
+          title: 'Banner广告配置',
+          type: 'string',
+          value: JSON.stringify(this.allBanner)
+        })
+        return
+      }
+      for (let i = 0; i < this.cfgs.length; i++) {
+        if (this.cfgs[i].key === 'banner_cfg') {
+          this.cfgs[i].value = JSON.stringify(this.allBanner)
+          break
+        }
+      }
+    },
+    saveAllBanner() {
+      if (this.allBanner.length === 0) {
+        this.$confirm('当前无配置，是否清空?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.updateBannerList()
+            this.saveSettings()
+          })
+          .catch(() => {
+            this.$message.info('已取消保存！')
+          })
+        return
+      }
+
+      const validArr = []
+      for (let i = 0; i < this.allBanner.length; i++) {
+        validArr.push(this.validForm(`bannerForm${i}`))
+      }
+      Promise.all(validArr)
+        .then(() => {
+          this.updateBannerList()
+          this.saveSettings()
+        })
+        .catch(err => {
+          console.log(err)
+          this.$message.error('请按要求填写表单')
+        })
+    },
+    validForm(formName) {
+      return new Promise((resolve, reject) => {
+        this.$refs[formName][0].validate(valid => {
+          valid ? resolve() : reject()
+        })
+      })
+    },
+    saveSettings() {
+      return new Promise((resolve, reject) => {
+        saveGameSettings({
+          uid: this.uid,
+          cfgs: this.cfgs,
+          gameId: this.gameInfo.game_id,
+          platform: this.platform_id,
+          type: this.type === 'normal' ? 0 : 1
+        })
+          .then(res => {
+            const { data } = res
+            if (data.errcode !== 0) {
+              this.$notify.error({
+                title: '错误',
+                message: data.errmsg
+              })
+              reject(data.errmsg)
+              return
+            }
+            this.$message.success('配置保存成功！')
+            resolve()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    goPublish() {
+      this.$confirm('配置子项需前往配置页发布，是否跳转?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.$router.push(
+            `/games/details/${this.uid}/settings/index?platform_id=${this.platform_id}&type=${this.type}`
+          )
+        })
+        .catch(() => {
+          this.$message.info('已取消发布！')
+        })
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.btn-group >>> .el-button + .el-button {
+  margin-left: 0;
+}
+</style>
+
+
diff --git a/src/views/games/details/settings/online.vue b/src/views/games/details/settings/online.vue
index 67be8a3..50fde12 100644
--- a/src/views/games/details/settings/online.vue
+++ b/src/views/games/details/settings/online.vue
@@ -76,9 +76,9 @@
             {{ `${item.name}` || '未命名'}}
           </template>
           <el-form
-            :ref="`signForm${index}`"
+            :ref="`olForm${index}`"
             :model="item"
-            :rules="signFormRules"
+            :rules="olFormRules"
             style="width: 100%"
             label-width="100px"
             class="mgt-20 mgb-20"
@@ -239,7 +239,7 @@ import { reject, Promise } from 'q'
 import { isString } from 'util'
 
 export default {
-  name: 'GameDetailsInvitation',
+  name: 'GameDetailsOnline',
   data() {
     return {
       // common
@@ -262,8 +262,8 @@ export default {
           { required: true, message: '请填写重置时间', trigger: 'blur' }
         ]
       },
-      signForm: {},
-      signFormRules: {
+      olForm: {},
+      olFormRules: {
         name: [{ required: true, message: '请填写标题', trigger: 'blur' }],
         reward_type: [
           { required: true, message: '请选择奖励类型', trigger: 'blur' }
@@ -450,7 +450,7 @@ export default {
 
       const validArr = []
       for (let i = 0; i < this.allOL.length; i++) {
-        validArr.push(this.validForm(`signForm${i}`))
+        validArr.push(this.validForm(`olForm${i}`))
       }
       validArr.push(this.validForm(`resetForm`, true))
       Promise.all(validArr)
diff --git a/src/views/sys/permission.vue b/src/views/sys/permission.vue
index ca044e6..a20200f 100644
--- a/src/views/sys/permission.vue
+++ b/src/views/sys/permission.vue
@@ -156,6 +156,11 @@ export default {
           label: '平台管理',
           permission: 'readable'
         },
+        'ad-area': {
+          name: 'ad-area',
+          label: '广告区域管理',
+          permission: 'readable'
+        },
         users: {
           name: 'users',
           label: '用户列表',