From afcaa0d55ff015699a2e761a7840a45082dd2cbd Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 3 Dec 2025 16:19:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(banner=E7=AE=A1=E7=90=86):=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=BC=B9=E7=AA=97->=E5=B1=95=E7=A4=BA=E4=BD=8D?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E6=96=B0=E5=A2=9E=E2=80=9C=E6=B8=B8=E6=88=8F?=
 =?UTF-8?q?=E2=80=9D=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/banner/form-edit.vue | 396 ++++++++++++++++++-----------
 1 file changed, 247 insertions(+), 149 deletions(-)

diff --git a/src/views/sys/banner/form-edit.vue b/src/views/sys/banner/form-edit.vue
index 7d48772..de41d50 100644
--- a/src/views/sys/banner/form-edit.vue
+++ b/src/views/sys/banner/form-edit.vue
@@ -11,17 +11,16 @@
       custom-class="drawer-auto-layout"
     >
       <div v-loading="submitLoading">
-
         <div class="drawer-form">
           <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+            <!-- 封面 -->
             <el-form-item label="封面" prop="cover">
-
               <el-col :span="8">
                 <el-form-item prop="cover" class="upload-small">
                   <el-upload
                     :disabled="coverUploadLoading"
                     :file-list="coverFileList"
-                    :class="{'upload-but-hide': !isShowCoverUpload}"
+                    :class="{ 'upload-but-hide': !isShowCoverUpload }"
                     action=""
                     list-type="picture-card"
                     :http-request="uploadCover"
@@ -29,7 +28,11 @@
                     :on-remove="handleCoverFileRemove"
                     accept="image/*"
                   >
-                    <i slot="default" v-loading="coverUploadLoading" class="el-icon-plus" />
+                    <i
+                      slot="default"
+                      v-loading="coverUploadLoading"
+                      class="el-icon-plus"
+                    />
                     <div slot="tip" class="el-upload__tip">banner封面</div>
                   </el-upload>
                 </el-form-item>
@@ -39,7 +42,7 @@
                   <el-upload
                     :disabled="smallCoverUploadLoading"
                     :file-list="smallCoverFileList"
-                    :class="{'upload-but-hide': !isShowSmallCoverUpload}"
+                    :class="{ 'upload-but-hide': !isShowSmallCoverUpload }"
                     action=""
                     list-type="picture-card"
                     :http-request="uploadSmallCover"
@@ -47,7 +50,11 @@
                     :on-remove="handleSmallCoverFileRemove"
                     accept="image/*"
                   >
-                    <i slot="default" v-loading="smallCoverUploadLoading" class="el-icon-plus" />
+                    <i
+                      slot="default"
+                      v-loading="smallCoverUploadLoading"
+                      class="el-icon-plus"
+                    />
                     <div slot="tip" class="el-upload__tip">banner小图</div>
                   </el-upload>
                 </el-form-item>
@@ -57,7 +64,7 @@
                   <el-upload
                     :disabled="alertCoverUploadLoading"
                     :file-list="alertCoverFileList"
-                    :class="{'upload-but-hide': !isShowAlertCoverUpload}"
+                    :class="{ 'upload-but-hide': !isShowAlertCoverUpload }"
                     action=""
                     list-type="picture-card"
                     :http-request="uploadAlertCover"
@@ -65,12 +72,18 @@
                     :on-remove="handlealertCoverFileRemove"
                     accept="image/*"
                   >
-                    <i slot="default" v-loading="alertCoverUploadLoading" class="el-icon-plus" />
+                    <i
+                      slot="default"
+                      v-loading="alertCoverUploadLoading"
+                      class="el-icon-plus"
+                    />
                     <div slot="tip" class="el-upload__tip">首页弹出banner</div>
                   </el-upload>
                 </el-form-item>
               </el-col>
             </el-form-item>
+
+            <!-- 状态 -->
             <el-form-item label="状态" prop="showcase">
               <el-select
                 v-model="form.showcase"
@@ -83,6 +96,8 @@
                 <el-option label="上架" :value="true" />
               </el-select>
             </el-form-item>
+
+            <!-- 类型 -->
             <el-form-item label="类型" prop="type">
               <el-select
                 v-model="form.type"
@@ -96,6 +111,7 @@
               </el-select>
             </el-form-item>
 
+            <!-- 内容 -->
             <el-form-item label="内容">
               <el-autocomplete
                 v-model.trim="form.content"
@@ -110,15 +126,41 @@
                 </template>
               </el-autocomplete>
             </el-form-item>
-            <el-form-item v-if="form.content !== 'ENTER_ROOM' && form.content !== 'ENTER_PERSONAL_CENTER'" label="参数">
+
+            <!-- 参数 -->
+            <el-form-item
+              v-if="
+                form.content !== 'ENTER_ROOM' &&
+                  form.content !== 'ENTER_PERSONAL_CENTER'
+              "
+              label="参数"
+            >
               <el-input v-model.trim="form.params" type="text" />
             </el-form-item>
+
+            <!-- 房间 -->
             <el-form-item v-if="form.content === 'ENTER_ROOM'" label="房间">
-              <search-room-input :room-id="tmpRoomId" @success="searchRoomSuccess" @fail="searchRoomFail" @load="loadSearchRoom" />
+              <search-room-input
+                :room-id="tmpRoomId"
+                @success="searchRoomSuccess"
+                @fail="searchRoomFail"
+                @load="loadSearchRoom"
+              />
             </el-form-item>
-            <el-form-item v-if="form.content === 'ENTER_PERSONAL_CENTER'" label="用户">
-              <account-input v-model="tmpUserId" :sys-origin="sysOrigin" placeholder="用户ID" />
+
+            <!-- 用户 -->
+            <el-form-item
+              v-if="form.content === 'ENTER_PERSONAL_CENTER'"
+              label="用户"
+            >
+              <account-input
+                v-model="tmpUserId"
+                :sys-origin="sysOrigin"
+                placeholder="用户ID"
+              />
             </el-form-item>
+
+            <!-- 展示位 -->
             <el-form-item label="展示位" prop="displayPosition">
               <el-select
                 v-model="form.displayPosition"
@@ -128,9 +170,16 @@
                 style="width:100%;"
                 class="filter-item"
               >
-                <el-option v-for="(item, index) in displayPosition" :key="index" :label="item.name" :value="item.value" />
+                <el-option
+                  v-for="(item, index) in displayPosition"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
+
+            <!-- 开始时间 -->
             <el-form-item label="开始时间" prop="startTime">
               <el-date-picker
                 v-model="form.startTime"
@@ -140,6 +189,8 @@
                 style="width:100%;"
               />
             </el-form-item>
+
+            <!-- 过期时间 -->
             <el-form-item label="过期时间" prop="expiredTime">
               <el-date-picker
                 v-model="form.expiredTime"
@@ -149,11 +200,27 @@
                 style="width:100%;"
               />
             </el-form-item>
+
+            <!-- 排序 -->
             <el-form-item label="排序" prop="depict">
-              <el-input v-model.trim="form.sort" v-number placeholder="降序排列(数字越大越靠前)" />
+              <el-input
+                v-model.trim="form.sort"
+                v-number
+                placeholder="降序排列(数字越大越靠前)"
+              />
             </el-form-item>
+
+            <!-- 区域 -->
             <el-form-item label="区域" prop="regionList">
-              <el-select v-model="form.regionList" v-loading="loading" multiple clearable placeholder="请选择" style="width:100%;" class="filter-item">
+              <el-select
+                v-model="form.regionList"
+                v-loading="loading"
+                multiple
+                clearable
+                placeholder="请选择"
+                style="width:100%;"
+                class="filter-item"
+              >
                 <el-option
                   v-for="(item, index) in regions"
                   :key="index"
@@ -162,8 +229,17 @@
                 />
               </el-select>
             </el-form-item>
+
+            <!-- 描述 -->
             <el-form-item label="描述" prop="depict">
-              <el-input v-model.trim="form.depict" resize="none" show-word-limit type="textarea" :rows="6" maxlength="200" />
+              <el-input
+                v-model.trim="form.depict"
+                resize="none"
+                show-word-limit
+                type="textarea"
+                :rows="6"
+                maxlength="200"
+              />
             </el-form-item>
           </el-form>
         </div>
@@ -172,16 +248,14 @@
           <el-button type="primary" @click="submitForm()">保存</el-button>
         </div>
       </div>
-
     </el-drawer>
   </div>
 </template>
 <script>
-
-import { updateBanner, addBanner } from '@/api/banner'
-import { getElementUiUploadFile } from '@/utils'
-import { mapGetters } from 'vuex'
-import { regionConfigTable } from '@/api/sys'
+import { updateBanner, addBanner } from "@/api/banner";
+import { getElementUiUploadFile } from "@/utils";
+import { mapGetters } from "vuex";
+import { regionConfigTable } from "@/api/sys";
 export default {
   props: {
     row: {
@@ -191,17 +265,20 @@ export default {
     sysOrigin: {
       type: String,
       require: false,
-      default: ''
+      default: ""
     }
   },
   data() {
-    const commonRules = [{ required: true, message: '必填字段', trigger: 'blur' }]
+    const commonRules = [
+      { required: true, message: "必填字段", trigger: "blur" }
+    ];
     return {
       displayPosition: [
-        { name: '房间内', value: 'ROOM' },
-        { name: '发现页', value: 'EXPLORE_PAGE' },
-        { name: '首页弹出层', value: 'HOME_ALERT' },
-        { name: '钱包', value: 'WALLET' },
+        { name: "房间内", value: "ROOM" },
+        { name: "发现页", value: "EXPLORE_PAGE" },
+        { name: "首页弹出层", value: "HOME_ALERT" },
+        { name: "钱包", value: "WALLET" },
+        { name: "游戏", value: "GAME" }
       ],
       searchDisabled: false,
       alertCoverUploadLoading: false,
@@ -210,25 +287,25 @@ export default {
       coverFileList: [],
       smallCoverUploadLoading: false,
       smallCoverFileList: [],
-      tmpRoomId: '',
+      tmpRoomId: "",
       loading: false,
-      tmpUserId: '',
+      tmpUserId: "",
       regions: [],
       form: {
-        id: '',
-        cover: '',
-        smallCover: '',
-        showcase: '',
-        type: '',
-        sysOrigin: '',
-        content: '',
-        params: '',
-        expiredTime: '',
-        startTime: '',
-        depict: '',
-        sort: '',
-        displayPosition: '',
-        alertCover: '',
+        id: "",
+        cover: "",
+        smallCover: "",
+        showcase: "",
+        type: "",
+        sysOrigin: "",
+        content: "",
+        params: "",
+        expiredTime: "",
+        startTime: "",
+        depict: "",
+        sort: "",
+        displayPosition: "",
+        alertCover: "",
         regionList: []
       },
       submitLoading: false,
@@ -241,179 +318,200 @@ export default {
         expiredTime: commonRules
       },
       contentRestaurants: [
-        { value: 'GIFT_PACK_BUY', label: '礼物背包' },
-        { value: 'ENTER_ROOM', label: '进入房间' },
-        { value: 'ENTER_PERSONAL_CENTER', label: '个人中心' },
-        { value: 'RECHARGE_IN_APP', label: '充值-站内' },
-        { value: 'RECHARGE_H5', label: '充值-H5(站外)' },
-        { value: 'PROP_STORE', label: '道具商店' }
+        { value: "GIFT_PACK_BUY", label: "礼物背包" },
+        { value: "ENTER_ROOM", label: "进入房间" },
+        { value: "ENTER_PERSONAL_CENTER", label: "个人中心" },
+        { value: "RECHARGE_IN_APP", label: "充值-站内" },
+        { value: "RECHARGE_H5", label: "充值-H5(站外)" },
+        { value: "PROP_STORE", label: "道具商店" }
       ]
-    }
+    };
   },
   computed: {
     textOptTitle() {
-      return `${(this.row && this.row.id ? '修改' : '新增')}(${this.sysOrigin})`
+      return `${this.row && this.row.id ? "修改" : "新增"}(${this.sysOrigin})`;
     },
     isShowCoverUpload() {
-      return !this.form.cover
+      return !this.form.cover;
     },
     isShowSmallCoverUpload() {
-      return !this.form.smallCover
+      return !this.form.smallCover;
     },
     isShowAlertCoverUpload() {
-      return !this.form.alertCover
+      return !this.form.alertCover;
     },
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   watch: {
     row: {
       handler(val) {
         if (!val) {
-          this.listRegion()
-          return
+          this.listRegion();
+          return;
         }
-        const form = Object.assign({}, val)
-        if (form.params !== '' && form.content === 'ENTER_ROOM') {
-          this.tmpRoomId = form.params
+        const form = Object.assign({}, val);
+        if (form.params !== "" && form.content === "ENTER_ROOM") {
+          this.tmpRoomId = form.params;
         }
-        if (form.params !== '' && form.content === 'ENTER_PERSONAL_CENTER') {
-          this.tmpUserId = form.params
+        if (form.params !== "" && form.content === "ENTER_PERSONAL_CENTER") {
+          this.tmpUserId = form.params;
         }
         if (form.displayPosition) {
-          form.displayPosition = form.displayPosition.split(',')
+          form.displayPosition = form.displayPosition.split(",");
         }
         if (form.regions) {
-          form.regionList = form.regions.split(',')
+          form.regionList = form.regions.split(",");
         }
-        this.coverFileList = getElementUiUploadFile(form.cover)
-        this.smallCoverFileList = getElementUiUploadFile(form.smallCover)
-        this.alertCoverFileList = getElementUiUploadFile(form.alertCover)
-        this.form = Object.assign(this.form, form)
-        this.listRegion()
+        this.coverFileList = getElementUiUploadFile(form.cover);
+        this.smallCoverFileList = getElementUiUploadFile(form.smallCover);
+        this.alertCoverFileList = getElementUiUploadFile(form.alertCover);
+        this.form = Object.assign(this.form, form);
+        this.listRegion();
       },
       immediate: true
     }
   },
   methods: {
     querySearchContentRestaurants(queryString, cb) {
-      var contentRestaurants = this.contentRestaurants
-      var results = queryString ? contentRestaurants.filter(restaurant => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-      }) : contentRestaurants
-      cb(results)
+      var contentRestaurants = this.contentRestaurants;
+      var results = queryString
+        ? contentRestaurants.filter(restaurant => {
+            return (
+              restaurant.value
+                .toLowerCase()
+                .indexOf(queryString.toLowerCase()) === 0
+            );
+          })
+        : contentRestaurants;
+      cb(results);
     },
     uploadAlertCover(file) {
-      const that = this
-      that.alertCoverUploadLoading = true
-      that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
-        that.alertCoverUploadLoading = false
-        that.form.alertCover = that.$getAccessImgUrl(res.name)
-      }).catch(er => {
-        that.alertCoverUploadLoading = false
-      })
+      const that = this;
+      that.alertCoverUploadLoading = true;
+      that
+        .$simpleUploadFlie(file, that.$application.fileBucket.other)
+        .then(res => {
+          that.alertCoverUploadLoading = false;
+          that.form.alertCover = that.$getAccessImgUrl(res.name);
+        })
+        .catch(er => {
+          that.alertCoverUploadLoading = false;
+        });
     },
     uploadSmallCover(file) {
-      const that = this
-      that.smallCoverUploadLoading = true
-      that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
-        that.smallCoverUploadLoading = false
-        that.form.smallCover = that.$getAccessImgUrl(res.name)
-      }).catch(er => {
-        that.smallCoverUploadLoading = false
-      })
+      const that = this;
+      that.smallCoverUploadLoading = true;
+      that
+        .$simpleUploadFlie(file, that.$application.fileBucket.other)
+        .then(res => {
+          that.smallCoverUploadLoading = false;
+          that.form.smallCover = that.$getAccessImgUrl(res.name);
+        })
+        .catch(er => {
+          that.smallCoverUploadLoading = false;
+        });
     },
     handleSmallCoverFileRemove(file, fileList) {
-      this.form.smallCover = ''
-      this.smallCoverUploadLoading = false
+      this.form.smallCover = "";
+      this.smallCoverUploadLoading = false;
     },
     handlealertCoverFileRemove(file, fileList) {
-      this.form.alertCover = ''
-      this.alertCoverUploadLoading = false
+      this.form.alertCover = "";
+      this.alertCoverUploadLoading = false;
     },
     uploadCover(file) {
-      const that = this
-      that.coverUploadLoading = true
-      that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => {
-        that.coverUploadLoading = false
-        that.form.cover = that.$getAccessImgUrl(res.name)
-      }).catch(er => {
-        that.coverUploadLoading = false
-      })
+      const that = this;
+      that.coverUploadLoading = true;
+      that
+        .$simpleUploadFlie(file, that.$application.fileBucket.other)
+        .then(res => {
+          that.coverUploadLoading = false;
+          that.form.cover = that.$getAccessImgUrl(res.name);
+        })
+        .catch(er => {
+          that.coverUploadLoading = false;
+        });
     },
     handleCoverFileRemove(file, fileList) {
-      this.form.cover = ''
-      this.coverUploadLoading = false
+      this.form.cover = "";
+      this.coverUploadLoading = false;
     },
     listRegion() {
-      const that = this
-      that.loading = true
-      regionConfigTable({ 'sysOrigin': that.sysOrigin }).then(res => {
-        that.regions = res.body || []
-        that.loading = false
-      }).catch(er => {
-        that.loading = false
-      })
+      const that = this;
+      that.loading = true;
+      regionConfigTable({ sysOrigin: that.sysOrigin })
+        .then(res => {
+          that.regions = res.body || [];
+          that.loading = false;
+        })
+        .catch(er => {
+          that.loading = false;
+        });
     },
     handleClose() {
-      this.$emit('close')
+      this.$emit("close");
     },
     submitForm() {
-      const that = this
+      const that = this;
       that.$refs.form.validate(valid => {
         if (!valid) {
-          console.error('error submit!!')
-          return
+          console.error("error submit!!");
+          return;
         }
-        const submitForm = Object.assign({}, that.form)
-        submitForm.displayPosition = submitForm.displayPosition.join(',')
-        that.submitLoading = true
+        const submitForm = Object.assign({}, that.form);
+        submitForm.displayPosition = submitForm.displayPosition.join(",");
+        that.submitLoading = true;
 
         if (!submitForm.sysOrigin) {
-          submitForm.sysOrigin = that.sysOrigin
+          submitForm.sysOrigin = that.sysOrigin;
         }
 
         if (!submitForm.sysOrigin) {
-          that.$opsMessage.fail('系统错误, 没有平台信息!')
-          return
+          that.$opsMessage.fail("系统错误, 没有平台信息!");
+          return;
         }
         if (submitForm.id) {
-          updateBanner(submitForm).then(res => {
-            that.submitLoading = false
-            that.$emit('success', res)
-          }).catch(er => {
-            that.submitLoading = false
-            that.$emit('fial', er)
-          })
-          return
+          updateBanner(submitForm)
+            .then(res => {
+              that.submitLoading = false;
+              that.$emit("success", res);
+            })
+            .catch(er => {
+              that.submitLoading = false;
+              that.$emit("fial", er);
+            });
+          return;
         }
-        addBanner(submitForm).then(res => {
-          that.submitLoading = false
-          that.$emit('success', res)
-        }).catch(er => {
-          that.submitLoading = false
-          console.error(er)
-          that.$emit('fial', er)
-        })
-      })
+        addBanner(submitForm)
+          .then(res => {
+            that.submitLoading = false;
+            that.$emit("success", res);
+          })
+          .catch(er => {
+            that.submitLoading = false;
+            console.error(er);
+            that.$emit("fial", er);
+          });
+      });
     },
     loadSearchRoom() {
-      this.searchDisabled = true
+      this.searchDisabled = true;
     },
     searchRoomSuccess(res) {
-      this.searchDisabled = false
+      this.searchDisabled = false;
       if (!res) {
-        return
+        return;
       }
-      this.form.params = res.id
+      this.form.params = res.id;
 
-      if (this.form.content === 'ENTER_ROOM') {
-        this.tmpRoomId = res.roomAccount
+      if (this.form.content === "ENTER_ROOM") {
+        this.tmpRoomId = res.roomAccount;
       }
     },
     searchRoomFail() {
-      this.form.params = ''
-      this.searchDisabled = false
+      this.form.params = "";
+      this.searchDisabled = false;
     }
   }
-}
+};
 </script>