czg_team/management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增团购券分类

Browse Source
This commit is contained in:
gyq
2024-05-11 09:04:31 +08:00
parent 2e2205badc
commit 8441022041
9 changed files with 535 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/views/system/resource_manage/components/add.vue
View File

@@ -1,84 +1,104 @@
<template>
<el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
<div class="div_h">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="展示图">
<uploadImg ref="uploadImg2" @success="res => form.coverImg = res[0]" @remove="form.coverImg = ''" />
</el-form-item>
<el-form-item label="描述" prop="name">
<el-input v-model="form.name" placeholder="请输入描述"></el-input>
</el-form-item>
<el-form-item label="值" prop="value">
<el-input v-model="form.value" placeholder="请输入值"></el-input>
</el-form-item>
<el-form-item label="字体色">
<el-color-picker v-model="form.fontColor"></el-color-picker>
</el-form-item>
<el-form-item label="背景色">
<el-color-picker v-model="form.backColor"></el-color-picker>
</el-form-item>
<el-form-item label="资源类型" prop="type">
<el-select v-model="form.type" placeholder="请选择资源类型">
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="跳转类型" prop="jumpType">
<el-select v-model="form.jumpType" placeholder="请选择资源类型">
<el-option v-for="item in jumpTypeList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="相对跳转地址" prop="value">
<el-input v-model="form.relUrl" placeholder="请输入相对跳转地址"></el-input>
</el-form-item>
<el-form-item label="绝对跳转地址" prop="value">
<el-input v-model="form.absUrl" placeholder="请输入绝对跳转地址"></el-input>
</el-form-item>
<el-form-item label="标签前小图标">
<uploadImg ref="uploadImg1" @success="res => form.shareImg = res[0]" @remove="form.shareImg = ''" />
</el-form-item>
<el-form-item label="APP端展示">
<el-radio-group v-model="form.isShowApp">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="收银端展示">
<el-radio-group v-model="form.isShowCash">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="小程序端展示">
<el-radio-group v-model="form.isShowMall">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</el-dialog>
<div>
<el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
<div class="div_h">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="资源类型" prop="type">
<el-select v-model="form.type" placeholder="请选择资源类型" @change="typeChange">
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="团购卷" prop="group" v-if="form.type == 'group'">
<div v-if="!productIds.length">
<el-button type="primary" icon="el-icon-plus" @click="$refs.groupTypeList.show()">
添加团购券
</el-button>
</div>
<div class="shop_list" v-else>
<el-tag closable type="primary" v-for="(item, index) in productIds" :key="item.id"
@close="productIds.splice(index, 1)">
{{ item.name }}
</el-tag>
</div>
</el-form-item>
<el-form-item label="描述" prop="name" v-if="form.type != 'group'">
<el-input v-model="form.name" placeholder="请输入描述"></el-input>
</el-form-item>
<el-form-item label="值" prop="value" v-if="form.type != 'group'">
<el-input v-model="form.value" placeholder="请输入值"></el-input>
</el-form-item>
<el-form-item label="跳转类型" prop="jumpType">
<el-select v-model="form.jumpType" placeholder="请选择资源类型">
<el-option v-for="item in jumpTypeList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="展示图">
<uploadImg ref="uploadImg2" @success="res => form.coverImg = res[0]" @remove="form.coverImg = ''" />
</el-form-item>
<el-form-item label="字体色">
<el-color-picker v-model="form.fontColor"></el-color-picker>
</el-form-item>
<el-form-item label="背景色">
<el-color-picker v-model="form.backColor"></el-color-picker>
</el-form-item>
<el-form-item label="相对跳转地址" prop="value">
<el-input v-model="form.relUrl" placeholder="请输入相对跳转地址"></el-input>
</el-form-item>
<el-form-item label="绝对跳转地址" prop="value">
<el-input v-model="form.absUrl" placeholder="请输入绝对跳转地址"></el-input>
</el-form-item>
<el-form-item label="标签前小图标">
<uploadImg ref="uploadImg1" @success="res => form.shareImg = res[0]" @remove="form.shareImg = ''" />
</el-form-item>
<el-form-item label="APP端展示">
<el-radio-group v-model="form.isShowApp">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="收银端展示">
<el-radio-group v-model="form.isShowCash">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="小程序端展示">
<el-radio-group v-model="form.isShowMall">
<el-radio :label="1">展示</el-radio>
<el-radio :label="0">不展示</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</el-dialog>
<groupTypeList ref="groupTypeList" @success="row => productIds = [row]" />
</div>
</template>
<script>
import { tbPlatformDictPostPut } from "@/api/setting";
import uploadImg from '@/components/uploadImg'
import enumData from '../enumData.js'
import groupTypeList from '@/components/groupTypeList'
export default {
components: {
uploadImg
uploadImg,
groupTypeList
},
data() {
return {
dialogVisible: false,
loading: false,
productIds: [],
form: {
id: "",
shareImg: '',
@@ -128,6 +148,15 @@ export default {
this.resetForm = { ...this.form };
},
methods: {
typeChange(e) {
if (e == 'group') {
} else if (e == 'custom') {
} else {
}
},
// 提交
onSubmitHandle() {
this.$refs.form.validate(async valid => {
@@ -152,7 +181,6 @@ export default {
});
},
show(obj) {
console.log(obj);
this.dialogVisible = true;
if (obj && obj.id) {
this.form = { ...obj };
@@ -191,4 +219,71 @@ export default {
max-height: 50vh;
overflow-y: auto;
}
.shop_list {
display: flex;
flex-wrap: wrap;
.item_wrap {
$size: 80px;
.item {
$radius: 4px;
width: $size;
height: $size;
border-radius: $radius;
overflow: hidden;
position: relative;
margin-right: 10px;
margin-top: 10px;
&:hover {
cursor: pointer;
}
&::after {
content: attr(data-index);
font-size: 12px;
height: 20px;
display: flex;
padding: 0 10px;
border-radius: 0 0 $radius 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
&::before {
content: '删除';
font-size: 12px;
width: 100%;
height: 20px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
transition: all .1s ease-in-out;
}
}
.name {
width: $size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>

8
src/views/system/resource_manage/enumData.js
View File

@@ -46,9 +46,9 @@ export default {
value: "group",
label: "团购卷"
},
{
value: "custom",
label: "自定义"
}
// {
// value: "custom",
// label: "自定义"
// }
]
};

3
src/views/system/resource_manage/index.vue
View File

@@ -122,7 +122,8 @@ export default {
},
filters: {
typeFilter(t) {
return enumData.typeList.find(item => item.value == t).label
let e = enumData.typeList.find(item => item.value == t).label
return e ? e : t
},
jumpFilter(t) {
return t ? enumData.jumpTypeList.find(item => item.value == t).label : ''