|
|
@@ -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>
|