Quellcode durchsuchen

feat: 活动分类管理支持图标与蒙层背景配置

新增分类图标(iconUrl)与蒙层背景图(bgImageUrl)字段,在分类管理弹窗提供上传入口,
表格列表新增图标预览列;为后续小程序端活动分类网格化展示做准备。
Developer vor 5 Tagen
Ursprung
Commit
9b320ee79e
2 geänderte Dateien mit 109 neuen und 2 gelöschten Zeilen
  1. BIN
      dist.zip
  2. 109 2
      src/views/modules/activity/classify.vue

BIN
dist.zip


+ 109 - 2
src/views/modules/activity/classify.vue

@@ -17,6 +17,16 @@
           </div>
           <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无活动分类" style="margin-top: 12px;">
             <el-table-column prop="categoryName" label="分类名称"></el-table-column>
+            <el-table-column label="图标预览" width="140">
+              <template #default="scope">
+                <div class="adfac" style="height: 64px;">
+                  <div class="classify-icon-preview" :style="scope.row.bgImageUrl?{backgroundImage:`url(${scope.row.bgImageUrl})`,backgroundSize:'100% 100%'}:{}">
+                    <img v-if="scope.row.iconUrl" :src="scope.row.iconUrl" style="width:32px;height:32px;">
+                    <span v-else style="font-size:12px;color:#999;">无</span>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="activityCount" label="关联活动数">
               <template #default="scope">
                 <div>{{ scope.row.activityCount||0 }}</div>
@@ -43,6 +53,26 @@
           <el-form-item label="分类名称" prop="categoryName">
             <el-input v-model="form.categoryName" placeholder="请输入分类名称"></el-input>
           </el-form-item>
+          <el-form-item label="分类图标" prop="iconUrl">
+            <el-upload :action="url" :show-file-list="false" :on-success="successHandleIcon" :before-upload="beforeUploadIcon" accept="image/*" class="classify-uploader">
+              <div v-if="fileListIcon.length" class="classify-upload-preview">
+                <img :src="fileListIcon[0].url" style="width:60px;height:60px;display:block;">
+              </div>
+              <i v-else class="el-icon-plus classify-uploader-icon"></i>
+              <div slot="tip" class="el-upload__tip">建议尺寸 120×120,PNG 透明底</div>
+            </el-upload>
+            <el-button v-if="fileListIcon.length" type="text" size="mini" style="margin-left:8px;color:#f56c6c;" @click="removeIcon">删除</el-button>
+          </el-form-item>
+          <el-form-item label="蒙层背景" prop="bgImageUrl">
+            <el-upload :action="url" :show-file-list="false" :on-success="successHandleBg" :before-upload="beforeUploadBg" accept="image/*" class="classify-uploader">
+              <div v-if="fileListBg.length" class="classify-upload-preview">
+                <img :src="fileListBg[0].url" style="width:120px;height:120px;display:block;border-radius:50%;">
+              </div>
+              <i v-else class="el-icon-plus classify-uploader-icon"></i>
+              <div slot="tip" class="el-upload__tip">建议尺寸 240×240 圆形蒙层素材</div>
+            </el-upload>
+            <el-button v-if="fileListBg.length" type="text" size="mini" style="margin-left:8px;color:#f56c6c;" @click="removeBg">删除</el-button>
+          </el-form-item>
           <!-- <el-form-item label="分类编码" prop="categoryNo">
             <el-input v-model="form.categoryNo" placeholder="请输入分类编码"></el-input>
           </el-form-item> -->
@@ -60,9 +90,11 @@
 </template>
 
 <script>
+import Cookies from 'js-cookie'
 export default {
   data () {
     return {
+      url: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`,
       queryParams: {
         page: 1,
         limit: 10,
@@ -73,11 +105,15 @@ export default {
       show: false,
       buttonLoading: false,
       title: '新增活动分类',
+      fileListIcon: [],
+      fileListBg: [],
       form: {
         id: '',
         categoryName: '',
         categoryNo: '',
-        enable: 1
+        enable: 1,
+        iconUrl: '',
+        bgImageUrl: ''
       },
       rules: {
         categoryName: [
@@ -107,12 +143,16 @@ export default {
     handleAdd () {
       this.title = '新增活动分类'
       this.show = true
+      this.fileListIcon = []
+      this.fileListBg = []
       this.form.categoryNo = 'HDFL' + (this.dataList.length + 1).toString().padStart(2, '0')
     },
     handleEdit (row) {
       this.$http.get('/core/activity/category/' + row.id).then(res => {
         if (res.data.code !== 0) return this.$message.error(res.data.msg)
         this.form = { ...this.form, ...res.data.data }
+        this.fileListIcon = this.form.iconUrl ? [{ name: '', url: this.form.iconUrl }] : []
+        this.fileListBg = this.form.bgImageUrl ? [{ name: '', url: this.form.bgImageUrl }] : []
         this.$nextTick(() => {
           this.title = '编辑活动分类'
           this.show = true
@@ -122,14 +162,38 @@ export default {
     },
     cancel () {
       this.show = false
+      this.fileListIcon = []
+      this.fileListBg = []
       this.form = {
         id: '',
         categoryName: '',
         categoryNo: '',
-        enable: 1
+        enable: 1,
+        iconUrl: '',
+        bgImageUrl: ''
       }
       this.$refs.typeRef.resetFields()
     },
+    beforeUploadIcon (file) {},
+    beforeUploadBg (file) {},
+    successHandleIcon (res) {
+      if (!res || !res.data) return this.$message.error('图标上传失败')
+      this.form.iconUrl = res.data
+      this.fileListIcon = [{ name: '', url: res.data }]
+    },
+    successHandleBg (res) {
+      if (!res || !res.data) return this.$message.error('背景图上传失败')
+      this.form.bgImageUrl = res.data
+      this.fileListBg = [{ name: '', url: res.data }]
+    },
+    removeIcon () {
+      this.form.iconUrl = ''
+      this.fileListIcon = []
+    },
+    removeBg () {
+      this.form.bgImageUrl = ''
+      this.fileListBg = []
+    },
     getList () {
       this.loading = true
       this.$http.get('/core/activity/category/page', { params: this.queryParams }).then(res => {
@@ -212,4 +276,47 @@ export default {
 .add{
   margin-top: 24px;
 }
+
+.classify-uploader{
+  display: inline-block;
+  vertical-align: top;
+}
+.classify-uploader ::v-deep .el-upload{
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+}
+.classify-uploader ::v-deep .el-upload:hover{
+  border-color: #409EFF;
+}
+.classify-uploader-icon{
+  font-size: 28px;
+  color: #8c939d;
+}
+.classify-upload-preview{
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.classify-icon-preview{
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-repeat: no-repeat;
+  background-position: center;
+}
 </style>