feat(礼物管理页面-->编辑组件): 对魔法礼物类型开放"幸运规格"配置

src/views/cnf/gift/setting/edit.vue

@@ -10,8 +10,15 @@
       width="80%"
     >
       <div v-loading="submitLoading">
-        <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="margin-right:50px;">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="110px"
+          style="margin-right:50px;"
+        >
           <el-form-item label-width="0">
+            <!-- 平台 选择 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item label="平台" prop="sysOrigin">
                 <el-select
@@ -28,12 +35,18 @@
                     :label="item.label"
                     :value="item.value"
                   >
-                    <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
+                    <span style="float: left;">
-                    <span style="float: left;margin-left:10px">{{ item.label }}</span>
+                      <sys-origin-icon :icon="item.value" :desc="item.value"
+                    /></span>
+                    <span style="float: left;margin-left:10px">{{
+                      item.label
+                    }}</span>
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
+
+            <!-- 区域 选择 -->
             <el-col :md="12" :sm="24">
               <el-form-item prop="regionList" label="区域">
                 <el-button
@@ -41,7 +54,7 @@
                   style="margin-left: 10px; color: #409EFF;"
                   @click="handleSelectAllRegions"
                 >
-                  {{ isAllRegionsSelected ? '取消全选' : '全选' }}
+                  {{ isAllRegionsSelected ? "取消全选" : "全选" }}
                 </el-button>
                 <el-select
                   v-model="form.regionList"
@@ -62,32 +75,57 @@
           </el-form-item>
 
           <el-form-item label-width="0px">
+            <!-- 名称 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item label="名称" prop="giftName">
-                <el-input v-model.trim="form.giftName" type="text" placeholder="礼物名称" />
+                <el-input
+                  v-model.trim="form.giftName"
+                  type="text"
+                  placeholder="礼物名称"
+                />
               </el-form-item>
             </el-col>
 
+            <!-- 编码 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="Code" prop="giftCode">
-                <el-input v-model.trim="form.giftCode" type="text" placeholder="礼物编码" />
+                <el-input
+                  v-model.trim="form.giftCode"
+                  type="text"
+                  placeholder="礼物编码"
+                />
               </el-form-item>
             </el-col>
           </el-form-item>
+
           <el-form-item v-if="!isTypeFree" label-width="0px">
+            <!-- 金币 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item prop="giftCandy" label="金币">
-                <el-input v-model="form.giftCandy" v-number type="text" placeholder="礼物金币" />
+                <el-input
+                  v-model="form.giftCandy"
+                  v-number
+                  type="text"
+                  placeholder="礼物金币"
+                />
               </el-form-item>
             </el-col>
+
+            <!-- 积分 -->
             <el-col :md="12" :sm="24">
               <el-form-item prop="giftCandy" label="积分">
-                <el-input v-model="form.giftIntegral" v-number type="text" placeholder="礼物积分" />
+                <el-input
+                  v-model="form.giftIntegral"
+                  v-number
+                  type="text"
+                  placeholder="礼物积分"
+                />
               </el-form-item>
             </el-col>
           </el-form-item>
 
           <el-form-item prop="giftTab" label-width="0">
+            <!-- 礼物类型 选择 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item label="礼物类型">
                 <el-select
@@ -96,10 +134,17 @@
                   style="width:100%;"
                   class="filter-item"
                 >
-                  <el-option v-for="(item) in giftConfigTabs" :key="item.value" :label="item.name" :value="item.value" />
+                  <el-option
+                    v-for="item in giftConfigTabs"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
                 </el-select>
               </el-form-item>
             </el-col>
+
+            <!-- 收费类型 选择 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="收费类型">
                 <el-select
@@ -115,12 +160,18 @@
                 </el-select>
               </el-form-item>
             </el-col>
-
           </el-form-item>
+
           <el-form-item label-width="0">
+            <!-- 特效 选择 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="特效" prop="specialList" class="col-margin">
-                <el-select v-model="form.specialList" multiple placeholder="请选择" style="width:100%;">
+                <el-select
+                  v-model="form.specialList"
+                  multiple
+                  placeholder="请选择"
+                  style="width:100%;"
+                >
                   <el-option
                     v-for="item in options"
                     :key="item.value"
@@ -131,18 +182,27 @@
                 </el-select>
               </el-form-item>
             </el-col>
+
+            <!-- 排序 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="排序" prop="sort">
-                <el-input v-model="form.sort" v-number type="text" placeholder="请输入排序权重" />
+                <el-input
+                  v-model="form.sort"
+                  v-number
+                  type="text"
+                  placeholder="请输入排序权重"
+                />
               </el-form-item>
             </el-col>
           </el-form-item>
+
           <el-form-item label-width="0">
+            <!-- 封面 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item label="封面" prop="giftPhoto">
                 <el-upload
                   :file-list="giftPhotoFileList"
-                  :class="{'upload-but-hide': giftCoverUploadVisible}"
+                  :class="{ 'upload-but-hide': giftCoverUploadVisible }"
                   action=""
                   list-type="picture-card"
                   :http-request="httpRequestGiftCover"
@@ -155,10 +215,12 @@
                 </el-upload>
               </el-form-item>
             </el-col>
+
+            <!-- 资源 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="资源" prop="giftSourceUrl">
                 <el-upload
-                  :class="{'upload-but-hide': form.giftSourceUrl}"
+                  :class="{ 'upload-but-hide': form.giftSourceUrl }"
                   action=""
                   :http-request="httpRequestUploadSourceUrl"
                   :on-remove="handleRemoveSourceUrl"
@@ -168,7 +230,9 @@
                 >
                   <div class="upload-but">
                     <el-button size="small" type="primary">点击上传</el-button>
-                    <div slot="tip" class="el-upload__tip">只能上传svga/pag/mp4文件</div>
+                    <div slot="tip" class="el-upload__tip">
+                      只能上传svga/pag/mp4文件
+                    </div>
                   </div>
                 </el-upload>
                 <div class="flex-l">
@@ -182,24 +246,50 @@
               </el-form-item>
             </el-col>
           </el-form-item>
+
           <el-form-item label-width="0">
+            <!-- 有效期 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="有效期" prop="expiredTime">
-                <el-date-picker v-model="form.expiredTime" :picker-options="pickerOptions" value-format="timestamp" type="date" placeholder="下架日期" style="width: 100%;" />
+                <el-date-picker
+                  v-model="form.expiredTime"
+                  :picker-options="pickerOptions"
+                  value-format="timestamp"
+                  type="date"
+                  placeholder="下架日期"
+                  style="width: 100%;"
+                />
               </el-form-item>
             </el-col>
           </el-form-item>
+
           <el-form-item v-if="form.giftTab === 'EXCLUSIVE'" label-width="0">
+            <!-- 归属人账号 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="归属人账号" prop="account">
-                <el-input v-model="form.account" type="text" placeholder="归属人账号" />
+                <el-input
+                  v-model="form.account"
+                  type="text"
+                  placeholder="归属人账号"
+                />
               </el-form-item>
             </el-col>
           </el-form-item>
-          <el-form-item v-if="form.giftTab === 'LUCKY_GIFT'" label-width="0">
+
+          <!-- 幸运礼物||魔法礼物 -->
+          <el-form-item
+            v-if="form.giftTab === 'LUCKY_GIFT' || form.giftTab === 'MAGIC'"
+            label-width="0"
+          >
+            <!-- 幸运规格 选择 -->
             <el-col :md="12" :sm="24" class="col-margin">
               <el-form-item prop="standardId" label="幸运规格">
-                <el-select v-model="form.standardId" v-loading="loading" placeholder="请选择" style="width:100%;">
+                <el-select
+                  v-model="form.standardId"
+                  v-loading="loading"
+                  placeholder="请选择"
+                  style="width:100%;"
+                >
                   <el-option
                     v-for="(item, index) in mapStandard"
                     :key="index"
@@ -210,7 +300,10 @@
               </el-form-item>
             </el-col>
           </el-form-item>
+
+          <!-- CP -->
           <el-form-item v-if="form.giftTab === 'CP'" label-width="0">
+            <!-- 是否告白礼物 -->
             <el-col :md="12" :sm="24">
               <el-form-item label="是否告白礼物" prop="explanationGift">
                 <el-select
@@ -227,6 +320,8 @@
             </el-col>
           </el-form-item>
         </el-form>
+
+        <!-- 操作按钮 -->
         <div slot="footer" style="text-align: center;">
           <el-button @click="handleClose()">取消</el-button>
           <el-button type="primary" @click="submitForm()">保存</el-button>
@@ -236,21 +331,20 @@
   </div>
 </template>
 <script>
-
+import { mapLuckyGiftStandard } from "@/api/game-lucky-gift-config";
-import { mapLuckyGiftStandard } from '@/api/game-lucky-gift-config'
+import { updateGift, addGift } from "@/api/gift";
-import { updateGift, addGift } from '@/api/gift'
+import { giftConfigTabs } from "@/constant/type";
-import { giftConfigTabs } from '@/constant/type'
+import { mapGetters } from "vuex";
-import { mapGetters } from 'vuex'
+import { regionConfigTable } from "@/api/sys";
-import { regionConfigTable } from '@/api/sys'
 
 export default {
-  name: 'GiftEdit',
+  name: "GiftEdit",
   props: {
     // ADD or UPDATE
     event: {
       type: String,
       required: true,
-      default: 'ADD'
+      default: "ADD"
     },
     selectParam: {
       type: Object,
@@ -259,74 +353,75 @@ export default {
   },
   data() {
     function commonFormRules() {
-      return [
+      return [{ required: true, message: "必填字段", trigger: "blur" }];
-        { required: true, message: '必填字段', trigger: 'blur' }
-      ]
     }
     return {
       pickerOptions: {
         disabledDate(time) {
-          return time.getTime() < new Date().getTime()
+          return time.getTime() < new Date().getTime();
         }
       },
       giftCoverUploadVisible: false,
       submitLoading: false,
       giftConfigTabs,
       regions: [],
-      options: [{
+      options: [
-        value: 'ANIMATION',
+        {
-        label: '动画',
+          value: "ANIMATION",
-        disabled: false
+          label: "动画",
-      }, {
+          disabled: false
-        value: 'MUSIC',
+        },
-        label: '音乐',
+        {
-        disabled: false
+          value: "MUSIC",
-      }, {
+          label: "音乐",
-        value: 'NOTICE',
+          disabled: false
-        label: '全局通报',
+        },
-        disabled: false
+        {
-      },
+          value: "NOTICE",
-      // {
+          label: "全局通报",
-      //   value: 'LUCKY_GIFT',
+          disabled: false
-      //   label: '幸运礼物',
+        },
-      //   disabled: false
+        // {
-      // },
+        //   value: 'LUCKY_GIFT',
-      {
+        //   label: '幸运礼物',
-        value: 'SVIP_GIFT',
+        //   disabled: false
-        label: 'SVIP礼物',
+        // },
-        disabled: false
+        {
-      },
+          value: "SVIP_GIFT",
-      {
+          label: "SVIP礼物",
-        value: 'STAR',
+          disabled: false
-        label: '周星礼物',
+        },
-        disabled: false
+        {
-      },
+          value: "STAR",
-      {
+          label: "周星礼物",
-        value: 'GLOBAL_GIFT',
+          disabled: false
-        label: '全局广播礼物',
+        },
-        disabled: false
+        {
-      }
+          value: "GLOBAL_GIFT",
+          label: "全局广播礼物",
+          disabled: false
+        }
       ],
       giftPhotoFileList: [],
       sourceUrlFileList: [],
       mapStandard: [],
-      standardIdTmp: '',
+      standardIdTmp: "",
       form: {
-        id: '',
+        id: "",
-        giftPhoto: '',
+        giftPhoto: "",
-        giftSourceUrl: '',
+        giftSourceUrl: "",
-        giftName: '',
+        giftName: "",
-        giftCode: '',
+        giftCode: "",
-        giftCandy: '',
+        giftCandy: "",
-        account: '',
+        account: "",
-        giftIntegral: '',
+        giftIntegral: "",
-        type: 'GOLD',
+        type: "GOLD",
         specialList: [],
-        giftTab: 'ORDINARY',
+        giftTab: "ORDINARY",
-        sort: '',
+        sort: "",
-        expiredTime: '',
+        expiredTime: "",
-        explanationGift: '',
+        explanationGift: "",
-        sysOrigin: 'HALAR',
+        sysOrigin: "HALAR",
         regionList: []
       },
       rules: {
@@ -341,185 +436,217 @@ export default {
         sysOrigin: commonFormRules(),
         regionList: commonFormRules()
       },
-      payerSvgaUrl: ''
+      payerSvgaUrl: ""
-    }
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms']),
+    ...mapGetters(["permissionsSysOriginPlatforms"]),
     eventName() {
-      return this.event === 'ADD' ? '添加' : this.event === 'UPDATE' ? '修改' : 'ERROR'
+      return this.event === "ADD"
+        ? "添加"
+        : this.event === "UPDATE"
+        ? "修改"
+        : "ERROR";
     },
     isUpdate() {
-      return this.event === 'UPDATE'
+      return this.event === "UPDATE";
     },
     isTypeFree() {
-      return this.form.type === 'FREE'
+      return this.form.type === "FREE";
     },
     isAllRegionsSelected() {
-      if (!this.regions || this.regions.length === 0) return false
+      if (!this.regions || this.regions.length === 0) return false;
-      return this.form.regionList.length === this.regions.length
+      return this.form.regionList.length === this.regions.length;
     }
   },
   watch: {
     selectParam: {
       handler(newVal) {
         if (!newVal) {
-          this.loadTmpData()
+          this.loadTmpData();
-          return
+          return;
         }
-        this.standardIdTmp = newVal.standardId
+        this.standardIdTmp = newVal.standardId;
         if (newVal.special) {
-          newVal.specialList = newVal.special.split(',')
+          newVal.specialList = newVal.special.split(",");
         }
         if (newVal.regions) {
-          newVal.regionList = newVal.regions.split(',')
+          newVal.regionList = newVal.regions.split(",");
         }
         if (newVal.giftPhoto) {
-          this.giftCoverUploadVisible = true
+          this.giftCoverUploadVisible = true;
-          this.giftPhotoFileList.push({ url: newVal.giftPhoto })
+          this.giftPhotoFileList.push({ url: newVal.giftPhoto });
         }
         if (newVal.giftSourceUrl) {
-          this.sourceUrlFileList.push({ name: newVal.giftSourceUrl.substring(newVal.giftSourceUrl.lastIndexOf('/')), url: newVal.giftSourceUrl })
+          this.sourceUrlFileList.push({
+            name: newVal.giftSourceUrl.substring(
+              newVal.giftSourceUrl.lastIndexOf("/")
+            ),
+            url: newVal.giftSourceUrl
+          });
         }
 
-        this.form = Object.assign({}, newVal)
+        this.form = Object.assign({}, newVal);
-        this.loadTmpData()
+        this.loadTmpData();
       },
       immediate: true
     }
   },
   methods: {
     loadTmpData() {
-      const that = this
+      const that = this;
       // 加载区域
-      that.listRegion()
+      that.listRegion();
       // 加载幸运礼物规格
-      that.loadMapLuckyGiftStandard()
+      that.loadMapLuckyGiftStandard();
     },
     handleClose() {
-      this.$emit('close')
+      this.$emit("close");
     },
     httpRequestUploadSourceUrl(file) {
-      const that = this
+      const that = this;
-      that.$simpleUploadFlie(file, 'gifts').then(res => {
+      that
-        that.$message.success('上传成功')
+        .$simpleUploadFlie(file, "gifts")
-        that.form.giftSourceUrl = res.name
+        .then(res => {
-        that.payerSvgaUrl = that.$getAccessImgUrl(res.name)
+          that.$message.success("上传成功");
-      }).catch(er => {
+          that.form.giftSourceUrl = res.name;
-        console.error(er)
+          that.payerSvgaUrl = that.$getAccessImgUrl(res.name);
-        that.$message.error('上传失败，请尝试重新上传!')
+        })
-      })
+        .catch(er => {
+          console.error(er);
+          that.$message.error("上传失败，请尝试重新上传!");
+        });
     },
     handleRemoveSourceUrl(file, fileList) {
-      this.form.giftSourceUrl = ''
+      this.form.giftSourceUrl = "";
     },
     httpRequestGiftCover(file) {
-      const that = this
+      const that = this;
-      that.giftCoverUploadVisible = true
+      that.giftCoverUploadVisible = true;
-      this.$simpleUploadFlie(file, 'gifts').then(res => {
+      this.$simpleUploadFlie(file, "gifts")
-        that.form.giftPhoto = res.name
+        .then(res => {
-      }).catch(er => {
+          that.form.giftPhoto = res.name;
-        console.error(er)
+        })
-        that.giftCoverUploadVisible = false
+        .catch(er => {
-        that.$message.error('上传失败，请尝试重新上传!')
+          console.error(er);
-      })
+          that.giftCoverUploadVisible = false;
+          that.$message.error("上传失败，请尝试重新上传!");
+        });
     },
     listRegion() {
-      const that = this
+      const that = this;
-      that.loading = true
+      that.loading = true;
-      regionConfigTable({ 'sysOrigin': that.form.sysOrigin }).then(res => {
+      regionConfigTable({ sysOrigin: that.form.sysOrigin })
-        that.regions = res.body || []
+        .then(res => {
-        that.loading = false
+          that.regions = res.body || [];
-      }).catch(er => {
+          that.loading = false;
-        that.loading = false
+        })
-      })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     loadMapLuckyGiftStandard() {
-      const that = this
+      const that = this;
-      that.loading = true
+      that.loading = true;
-      mapLuckyGiftStandard(that.form.sysOrigin).then(res => {
+      mapLuckyGiftStandard(that.form.sysOrigin)
-        that.mapStandard = res.body || []
+        .then(res => {
-        that.loading = false
+          that.mapStandard = res.body || [];
-      }).catch(er => {
+          that.loading = false;
-        that.loading = false
+        })
-      })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     selectChanged(value) {
-      if (value === 'FREE') {
+      if (value === "FREE") {
-        this.form.giftCandy = ''
+        this.form.giftCandy = "";
-        this.form.giftIntegral = ''
+        this.form.giftIntegral = "";
-        return
+        return;
       }
     },
     removeGiftCover() {
-      this.form.giftPhoto = ''
+      this.form.giftPhoto = "";
-      this.giftCoverUploadVisible = false
+      this.giftCoverUploadVisible = false;
     },
     submitForm() {
-      const that = this
+      const that = this;
       that.$refs.form.validate(valid => {
         if (valid) {
-          that.submitLoading = true
+          that.submitLoading = true;
 
-          if (that.form.giftTab === 'LUCKY_GIFT') {
+          if (that.form.giftTab === "LUCKY_GIFT") {
             if (!that.form.standardId) {
-              that.$message.error('幸运礼物必须选择规格')
+              that.$message.error("幸运礼物必须选择规格");
-              that.submitLoading = false
+              that.submitLoading = false;
-              return
+              return;
             }
 
-            if (that.standardIdTmp && that.standardIdTmp !== that.form.standardId) {
+            if (
-              const that = this
+              that.standardIdTmp &&
-              that.$confirm('修改规格会立刻切换新规格新抽奖数据,是否确定切换?', '提示', {
+              that.standardIdTmp !== that.form.standardId
-                type: 'warning'
+            ) {
-              }).then(() => {
+              const that = this;
-                that.submitData()
+              that
-              }).catch(() => {
+                .$confirm(
-                that.submitLoading = false
+                  "修改规格会立刻切换新规格新抽奖数据,是否确定切换?",
-              })
+                  "提示",
-              return
+                  {
+                    type: "warning"
+                  }
+                )
+                .then(() => {
+                  that.submitData();
+                })
+                .catch(() => {
+                  that.submitLoading = false;
+                });
+              return;
             }
-            that.submitData()
+            that.submitData();
-            return
+            return;
           }
 
-          that.submitData()
+          that.submitData();
         } else {
-          console.error('error submit!!')
+          console.error("error submit!!");
-          return false
+          return false;
         }
-      })
+      });
     },
     submitData() {
-      const that = this
+      const that = this;
       if (that.form.id) {
-        updateGift(that.form).then(res => {
+        updateGift(that.form)
-          that.submitLoading = false
+          .then(res => {
-          that.$emit('success', { result: res, event: that.event })
+            that.submitLoading = false;
-        }).catch(er => {
+            that.$emit("success", { result: res, event: that.event });
-          that.submitLoading = false
+          })
-          that.$emit('fial', { error: er, event: that.event })
+          .catch(er => {
-        })
+            that.submitLoading = false;
-        return
+            that.$emit("fial", { error: er, event: that.event });
+          });
+        return;
       }
-      addGift(that.form).then(res => {
+      addGift(that.form)
-        that.submitLoading = false
+        .then(res => {
-        that.$emit('success', { result: res, event: that.event })
+          that.submitLoading = false;
-      }).catch(er => {
+          that.$emit("success", { result: res, event: that.event });
-        that.submitLoading = false
+        })
-        console.error(er)
+        .catch(er => {
-        that.$emit('fial', { error: er, event: that.event })
+          that.submitLoading = false;
-      })
+          console.error(er);
+          that.$emit("fial", { error: er, event: that.event });
+        });
     },
     handleSelectAllRegions() {
       if (this.isAllRegionsSelected) {
-        this.form.regionList = []
+        this.form.regionList = [];
       } else {
-        this.form.regionList = this.regions.map(item => item.id)
+        this.form.regionList = this.regions.map(item => item.id);
       }
     }
   }
-}
+};
 </script>
 <style scoped>
 .col-margin {