306 lines
8.7 KiB
Vue
306 lines
8.7 KiB
Vue
<template>
|
|
<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.key" :label="item.name" :value="item.key"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="团购卷" prop="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">
|
|
<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="跳转类型" 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="groupSuccess" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { tbPlatformDictPostPut, tbPlatformDictType } from "@/api/setting";
|
|
import uploadImg from '@/components/uploadImg'
|
|
import enumData from '../enumData.js'
|
|
import groupTypeList from '@/components/groupTypeList'
|
|
|
|
export default {
|
|
components: {
|
|
uploadImg,
|
|
groupTypeList
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
loading: false,
|
|
productIds: [],
|
|
form: {
|
|
id: "",
|
|
shareImg: '',
|
|
name: "",
|
|
value: "",
|
|
fontColor: "",
|
|
backColor: '',
|
|
type: '',
|
|
jumpType: '',
|
|
relUrl: '',
|
|
absUrl: '',
|
|
coverImg: '',
|
|
isShowApp: 0,
|
|
isShowCash: 0,
|
|
isShowMall: 0,
|
|
sort: 0
|
|
},
|
|
rules: {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: " ",
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
type: [
|
|
{
|
|
required: true,
|
|
message: " ",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
jumpType: [
|
|
{
|
|
required: true,
|
|
message: " ",
|
|
trigger: "change"
|
|
}
|
|
]
|
|
},
|
|
jumpTypeList: enumData.jumpTypeList,
|
|
typeList: [],
|
|
resetForm: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.resetForm = { ...this.form };
|
|
this.tbPlatformDictType()
|
|
},
|
|
methods: {
|
|
// 获取资源类别
|
|
async tbPlatformDictType() {
|
|
try {
|
|
const res = await tbPlatformDictType()
|
|
this.typeList = res.content
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
groupSuccess(row) {
|
|
this.productIds = [row]
|
|
this.form.name = row.name
|
|
this.form.value = row.id
|
|
},
|
|
// 选择类型
|
|
typeChange(e) {
|
|
// if (e == 'group') {
|
|
|
|
// } else if (e == 'custom') {
|
|
|
|
// } else {
|
|
|
|
// }
|
|
},
|
|
// 提交
|
|
onSubmitHandle() {
|
|
this.$refs.form.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
this.loading = true
|
|
this.form.shopId = localStorage.getItem("shopId");
|
|
this.form.releId && (this.form.type = '')
|
|
let res = await tbPlatformDictPostPut(this.form, this.form.id ? "put" : "post");
|
|
this.$emit("success", res);
|
|
this.close();
|
|
this.$notify({
|
|
title: "成功",
|
|
message: `${this.form.id ? "编辑" : "添加"}成功`,
|
|
type: "success"
|
|
});
|
|
this.loading = false
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
show(obj) {
|
|
this.dialogVisible = true;
|
|
if (obj && obj.id) {
|
|
this.form = { ...obj };
|
|
if (obj.shareImg) {
|
|
setTimeout(() => {
|
|
this.$refs.uploadImg1.fileList = [
|
|
{
|
|
url: obj.shareImg
|
|
}
|
|
]
|
|
}, 100)
|
|
}
|
|
if (obj.coverImg) {
|
|
setTimeout(() => {
|
|
this.$refs.uploadImg2.fileList = [
|
|
{
|
|
url: obj.coverImg
|
|
}
|
|
]
|
|
}, 100)
|
|
}
|
|
}
|
|
},
|
|
close() {
|
|
this.dialogVisible = false;
|
|
},
|
|
reset() {
|
|
this.form = { ...this.resetForm };
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.div_h {
|
|
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>
|