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-04-24 09:52:04 +08:00
commit 127202beac
386 changed files with 102573 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/views/coupon_manage/components/addCoupon.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<div>
<el-dialog title="添加优惠券" :visible.sync="dialogVisible" @close="reset">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="优惠卷名称" prop="title">
<el-input v-model="form.title" placeholder="请输入优惠卷名称" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="form.classType">
<el-radio :label="item.value" v-for="item in couponEnum.classType" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择商品" v-if="form.classType == 'product'" prop="classType">
<div>
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
添加商品
</el-button>
</div>
<div class="shop_list">
<div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
@click="productIds.splice(index, 1)">
<div class="item" :data-index="index + 1">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</el-form-item>
<el-form-item label="优惠类型">
<el-radio-group v-model="form.type">
<el-radio :label="item.value" v-for="item in couponEnum.type" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="满减限制" v-if="form.type == '0'">
<el-input-number v-model="form.limitAmount" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="折扣" v-if="form.type == '1'">
<el-input-number v-model="form.ratio" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="优惠券面额">
<el-input-number v-model="form.amount" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="发放数量">
<el-input-number v-model="form.number" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="限领数量">
<el-input-number v-model="form.limitNumber" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="有效期">
<el-radio-group v-model="form.effectType">
<el-radio :label="item.value" v-for="item in couponEnum.effectType" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="有效时间" v-if="form.effectType == 1">
<el-date-picker v-model="selectTime" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
<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>
<shopList ref="shopListRef" @success="slectShop" />
</div>
</template>
<script>
import couponEnum from './../couponEnum'
import shopList from '@/components/shopList'
import { tbMerchantCoupon } from '@/api/shop'
export default {
components: { shopList },
data() {
const validateProduct = (rule, value, callback) => {
if (!this.productIds.length) {
callback(new Error('请选择商品'))
} else {
callback()
}
}
return {
couponEnum,
dialogVisible: false,
loading: false,
selectTime: [],
form: {
id: '',
title: '',
classType: 'product',
type: '0',
limitAmount: '',
ratio: '1',
amount: '',
number: '1',
limitNumber: '1',
effectType: '0',
fromTime: '',
toTime: '',
relationIds: '',
status: 1
},
rules: {
title: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
classType: [
{
required: true,
validator: validateProduct,
trigger: 'change'
}
]
},
resetForm: '',
productIds: []
}
},
mounted() {
this.resetForm = { ...this.form }
},
methods: {
// 选择商品
slectShop(res) {
if (this.productIds.length) {
res.map(async item => {
if (!await this.checkShop(item.id)) {
this.productIds.push({ ...item })
}
})
} else {
this.productIds = res
}
},
// 判断是否存在重复商品
checkShop(id) {
let falg = false
this.productIds.map(item => {
if (item.id == id) {
falg = true
}
})
return falg
},
// 提交
onSubmitHandle() {
console.log(this.form)
this.$refs.form.validate(async valid => {
if (valid) {
try {
this.loading = true
this.form.shopId = localStorage.getItem('shopId')
this.form.fromTime = this.selectTime[0] || ''
this.form.toTime = this.selectTime[1] || ''
let arr = []
if (this.form.classType == 'product') {
arr = this.productIds.map(item => item.id)
}
this.form.relationIds = arr.join(',')
let res = await tbMerchantCoupon(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) {
this.loading = false
console.log(error)
}
}
})
},
show(obj) {
this.dialogVisible = true
if (obj && obj.id) {
this.form = { ...obj }
}
},
close() {
this.dialogVisible = false
},
reset() {
this.form = { ...this.resetForm }
}
}
}
</script>
<style scoped lang="scss">
.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>

32
src/views/coupon_manage/couponEnum.js Normal file
View File

@@ -0,0 +1,32 @@
export default {
classType: [
{
value: 'product',
label: '商品券'
},
{
value: 'common',
label: '通用券'
}
],
type: [
{
value: '0',
label: '满减'
},
{
value: '1',
label: '折扣'
}
],
effectType: [
{
value: '0',
label: '一直有效'
},
{
value: '1',
label: '时限有效'
}
]
}

118
src/views/coupon_manage/coupon_list.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div class="app-container">
<div class="head-container">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
添加优惠券
</el-button>
</div>
<div class="head-container">
<el-table :data="tableData.data" v-loading="tableData.loading">
<el-table-column label="优惠券名称" prop="title"></el-table-column>
<el-table-column label="类型" prop="classType">
<template v-slot="scope">
{{ scope.row.classType | classTypeFilter }}
</template>
</el-table-column>
<el-table-column label="优惠类型" prop="type">
<template v-slot="scope">
{{ scope.row.type | typeFilter }}
</template>
</el-table-column>
<el-table-column label="折扣" prop="ratio"></el-table-column>
<el-table-column label="面额" prop="amount"></el-table-column>
<el-table-column label="满减限制" prop="limitAmount"></el-table-column>
<el-table-column label="发放数量" prop="number"></el-table-column>
<el-table-column label="限领数量" prop="limitNumber"></el-table-column>
<el-table-column label="剩余数量" prop="leftNumber"></el-table-column>
<el-table-column label="有效期" prop="effectType">
<template v-slot="scope">
{{ scope.row.effectType | effectTypeFilter }}
</template>
</el-table-column>
<el-table-column label="开始时间" prop="fromTime"></el-table-column>
<el-table-column label="到期时间" prop="toTime"></el-table-column>
<el-table-column label="商品列表" prop="relationIds" width="200">
<template v-slot="scope">
<div style="display: flex;" v-if="scope.row.classType == 'product'">
<el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;"></el-image>
<span style="margin-left: 10px;">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<addCoupon ref="addCoupon" @success="resetHandle" />
</div>
</template>
<script>
import couponEnum from './couponEnum'
import addCoupon from './components/addCoupon.vue'
import { tbMerchantCouponGet } from '@/api/shop'
export default {
components: { addCoupon },
data() {
return {
tableData: {
data: [],
page: 0,
size: 10,
loading: false,
total: 0
}
}
},
filters: {
classTypeFilter(value) {
return couponEnum.classType.find(item => item.value == value).label
},
typeFilter(value) {
return couponEnum.type.find(item => item.value == value).label
},
effectTypeFilter(value) {
return couponEnum.effectType.find(item => item.value == value).label
}
},
mounted() {
this.getTableData()
},
methods: {
// 重置查询
resetHandle() {
this.page = 0
this.getTableData()
},
// 分页大小改变
sizeChange(e) {
this.tableData.size = e
this.getTableData()
},
// 分页回调
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
// 获取商品列表
async getTableData() {
this.tableData.loading = true
try {
const res = await tbMerchantCouponGet({
page: this.tableData.page,
size: this.tableData.size,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
}
}
</script>