From 612938f3ea8a7945f36f253b70530731c487c41c Mon Sep 17 00:00:00 2001
From: yulixing <yulixing@kingsome.cn>
Date: Mon, 15 Jul 2019 20:11:17 +0800
Subject: [PATCH] red-envelope

---
 src/router/modules/games.js              |   6 +
 src/views/games/details/index.vue        |   4 +
 src/views/games/details/invitation.vue   |   4 +-
 src/views/games/details/red-envelope.vue | 501 +++++++++++++++++++++++
 4 files changed, 513 insertions(+), 2 deletions(-)
 create mode 100644 src/views/games/details/red-envelope.vue

diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 3d69c55..59d9d09 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -86,6 +86,12 @@ const gamesRouter = {
           name: 'GameDetailsInvitation',
           meta: { title: '邀请' }
         },
+        {
+          path: 'red-envelope',
+          component: () => import('@/views/games/details/red-envelope'),
+          name: 'GameDetailsRedPackage',
+          meta: { title: '红包' }
+        },
         {
           path: 'share/edit',
           component: () => import('@/views/games/details/share/edit'),
diff --git a/src/views/games/details/index.vue b/src/views/games/details/index.vue
index 478b844..efe64fe 100644
--- a/src/views/games/details/index.vue
+++ b/src/views/games/details/index.vue
@@ -22,6 +22,10 @@
           v-if="uid !== 'new'"
           :index="`/games/details/${uid}/invitation`"
         >邀请</el-menu-item>
+        <el-menu-item
+          v-if="uid !== 'new'"
+          :index="`/games/details/${uid}/red-envelope`"
+        >红包</el-menu-item>
       </el-submenu>
       <!-- <el-menu-item
         v-if="uid !== 'new'"
diff --git a/src/views/games/details/invitation.vue b/src/views/games/details/invitation.vue
index 50c65b7..cd7ff74 100644
--- a/src/views/games/details/invitation.vue
+++ b/src/views/games/details/invitation.vue
@@ -313,7 +313,7 @@ export default {
       this.allIV.push(defaultSetting)
     },
     delIV(index) {
-      this.$confirm('是否要删除该项成就配置?', '提示', {
+      this.$confirm('是否要删除该项邀请配置?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -346,7 +346,7 @@ export default {
 
     saveAllIV() {
       if (this.allIV.length === 0) {
-        this.$confirm('当前无成就项，是否清空?', '提示', {
+        this.$confirm('当前无邀请项，是否清空?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
diff --git a/src/views/games/details/red-envelope.vue b/src/views/games/details/red-envelope.vue
new file mode 100644
index 0000000..1c43c48
--- /dev/null
+++ b/src/views/games/details/red-envelope.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%">
+      <el-alert
+        title="邀请-配置提示"
+        type="info"
+        description="该页为配置子项，保存后请前往配置页进行发布！(确保配置列表中有红包配置（red_envelope）一项)"
+        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-form
+        label-width="120px"
+        :model="cashForm"
+      >
+        <p>红包金额配置</p>
+        <el-form-item
+          label="[1]红包金额"
+          prop="Cash_1"
+          :rules="cashRules"
+        >
+          <el-input v-model="cashForm.Cash_1" />
+        </el-form-item>
+        <el-form-item
+          label="[2]红包金额"
+          prop="Cash_2"
+          :rules="cashRules"
+        >
+          <el-input v-model="cashForm.Cash_2" />
+        </el-form-item>
+        <el-form-item
+          label="[3]红包金额"
+          prop="Cash_3"
+          :rules="cashRules"
+        >
+          <el-input v-model="cashForm.Cash_3" />
+        </el-form-item>
+        <el-form-item
+          label="[4]红包金额"
+          prop="Cash_4"
+          :rules="cashRules"
+        >
+          <el-input v-model="cashForm.Cash_4" />
+        </el-form-item>
+        <el-form-item
+          label="[5]红包金额"
+          prop="Cash_5"
+          :rules="cashRules"
+        >
+          <el-input v-model="cashForm.Cash_5" />
+        </el-form-item>
+      </el-form>
+      <!-- 红包金额表  end-->
+
+      <!-- 概率表 -->
+      <el-collapse
+        v-model="activeNames"
+        v-if="allIV.length > 0"
+      >
+        <el-collapse-item
+          :name="index"
+          v-for="(item, index) in allIV"
+          :key="index"
+        >
+          <template slot="title">
+            <svg-icon
+              style="margin-right: 20px;"
+              icon-class="del"
+              @click.stop="delIV(index)"
+            />
+            {{ `配置：${item.id}` || '未命名'}}
+          </template>
+
+          <el-form
+            :ref="`invitationForm${index}`"
+            :model="item"
+            :rules="invitationFormRules"
+            style="width: 100%"
+            label-width="100px"
+            class="mgt-20 mgb-20"
+          >
+
+            <el-form-item
+              label="id"
+              prop="id"
+            >
+              <el-input
+                v-model.number="item.id"
+                style="width: 70%"
+              />
+            </el-form-item>
+            <el-form-item
+              label="奖励类型"
+              prop="reward_type"
+            >
+              <el-radio
+                v-model.number="item.reward_type"
+                :label="3"
+              >红包</el-radio>
+              <el-radio
+                v-model.number="item.reward_type"
+                :label="2"
+              >代币</el-radio>
+              <el-radio
+                v-model.number="item.reward_type"
+                :label="0"
+              >其他</el-radio>
+            </el-form-item>
+            <el-form-item
+              label="奖励数量"
+              prop="reward_count"
+            >
+              <el-input
+                v-model.number="item.reward_count"
+                style="width: 70%"
+              />
+            </el-form-item>
+            <el-form-item
+              label="领取条件"
+              prop="need_type"
+            >
+              <el-select
+                v-model.number="item.need_type"
+                placeholder="领取条件"
+                style="width: 70%"
+              >
+                <el-option
+                  label="分享"
+                  :value="1"
+                />
+                <el-option
+                  label="视频"
+                  :value="2"
+                />
+                <el-option
+                  label="正常"
+                  :value="0"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="达成数量"
+              prop="need_count"
+            >
+              <el-input
+                v-model.number="item.need_count"
+                style="width: 70%"
+              />
+            </el-form-item>
+            <el-form-item
+              label="正常领取"
+              prop="normal"
+            >
+              <el-radio
+                v-model.number="item.normal"
+                :label="1"
+              >是</el-radio>
+              <el-radio
+                v-model.number="item.normal"
+                :label="0"
+              >否</el-radio>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+      </el-collapse>
+
+      <!-- 概率表 end-->
+
+      <div class="btn-group">
+        <el-button
+          class="mgt-20"
+          type="primary"
+          @click="saveAllIV"
+          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 { reject, Promise } from 'q'
+
+export default {
+  name: 'GameDetailsInvitation',
+  data() {
+    return {
+      // common
+      uid: '',
+      type: 'normal',
+      platform_id: '',
+      platformsArr: [],
+      gameInfo: {},
+      cfgs: [],
+      permEdit: false,
+      permPublish: false,
+      hasList: false,
+
+      // form
+      cashForm: {
+        Cash_1: '0.00',
+        Cash_2: '0.00',
+        Cash_3: '0.00',
+        Cash_4: '0.00',
+        Cash_5: '0.00'
+      },
+      cashRules: [
+        { required: true, message: '请填写红包金额', trigger: 'blur' },
+        { pattern: /\d+.\d{2}/, message: '红包金额格式：6.66', trigger: 'blur' }
+      ],
+      PRList: [],
+      invitationForm: {},
+      invitationFormRules: {
+        id: [{ required: true, message: '请填写 id', trigger: 'blur' }],
+        reward_type: [
+          { required: true, message: '请选择奖励类型', trigger: 'blur' }
+        ],
+        reward_count: [
+          { required: true, message: '请填写奖励数量', trigger: 'blur' }
+        ],
+        need_type: [
+          { required: true, message: '请选择达成条件', trigger: 'blur' }
+        ],
+        need_count: [
+          { required: true, message: '请填写达成数量', trigger: 'blur' }
+        ],
+        normal: [
+          { required: true, message: '请选择是否默认获得', trigger: 'blur' }
+        ]
+      },
+      activeNames: [],
+      defaultSetting: {
+        id: '',
+        reward_type: 0,
+        reward_count: 1,
+        need_type: 1,
+        need_count: 1,
+        normal: 0
+      },
+      allIV: []
+    }
+  },
+  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)
+  },
+  watch: {
+    cashForm: {
+      handler: function(nVal) {
+        // TODO: 保留两位数
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    // common
+    // TODO: 生成红包概率表
+    generatePRList() {},
+    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.resolveIV(this.cfgs)
+      })
+    },
+    resolveIV(settings) {
+      for (let i = 0; i < settings.length; i++) {
+        const setting = settings[i]
+        if (setting.key === 'invite_list') {
+          this.allIV = JSON.parse(setting.value)
+          this.hasList = true
+          break
+        }
+      }
+
+      if (!this.hasList) this.allIV = []
+    },
+    changePlatform() {
+      this.getGameSettings()
+    },
+    changeType() {
+      this.getGameSettings()
+    },
+    addIV() {
+      const defaultSetting = JSON.parse(JSON.stringify(this.defaultSetting))
+      this.activeNames.push(this.allIV.length)
+      this.allIV.push(defaultSetting)
+    },
+    delIV(index) {
+      this.$confirm('是否要删除该项邀请配置?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.allIV.splice(index, 1)
+          this.$message.success('删除成功！')
+        })
+        .catch(() => {
+          this.$message.info('已取消删除！')
+        })
+    },
+    updateACList() {
+      if (!this.hasList) {
+        this.cfgs.push({
+          key: 'invite_list',
+          title: '邀请奖励',
+          type: 'string',
+          value: JSON.stringify(this.allIV)
+        })
+        return
+      }
+      for (let i = 0; i < this.cfgs.length; i++) {
+        if (this.cfgs[i].key === 'invite_list') {
+          this.cfgs[i].value = JSON.stringify(this.allIV)
+          break
+        }
+      }
+    },
+
+    saveAllIV() {
+      if (this.allIV.length === 0) {
+        this.$confirm('当前无邀请项，是否清空?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.updateACList()
+            this.saveSettings()
+          })
+          .catch(() => {
+            this.$message.info('已取消保存！')
+          })
+        return
+      }
+
+      const validArr = []
+      for (let i = 0; i < this.allIV.length; i++) {
+        validArr.push(this.validForm(`invitationForm${i}`))
+      }
+      Promise.all(validArr)
+        .then(() => {
+          this.updateACList()
+          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?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>
+
+