code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-13 04:18:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

manager 升级到vue3

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-05-25 10:49:09 +08:00
parent e7350899bf
commit 615ee91511
239 changed files with 22907 additions and 30841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
manager/src/views/promotions/coupon-activity/coupon-info.vue
View File

@@ -1,56 +1,75 @@
<template>
<div>
<div class="content-goods-publish">
<Form ref="form" :label-width="70">
<el-form ref="form" label-width="70px">
<div class="base-info-item">
<h4>优惠券活动详情</h4>
<div class="form-item-view">
<FormItem label="活动名称">
<el-form-item label="活动名称">
<span>{{ couponActivity.promotionName }}</span>
</FormItem>
<FormItem label="活动类型">
<span v-if="couponActivity.couponActivityType === 'REGISTERED'"
>新人发券</span
>
</el-form-item>
<el-form-item label="活动类型">
<span v-if="couponActivity.couponActivityType === 'REGISTERED'">新人发券</span>
<span v-else-if="couponActivity.couponActivityType === 'AUTO_COUPON'">自动发券</span>
<spin v-else>精确发券</spin>
</FormItem>
<FormItem label="领取频率" v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined">
<span v-if="couponActivity.couponFrequencyEnum === 'DAY'"
>每日</span
>
<span v-else>精确发券</span>
</el-form-item>
<el-form-item
v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined"
label="领取频率"
>
<span v-if="couponActivity.couponFrequencyEnum === 'DAY'">每日</span>
<span v-else-if="couponActivity.couponFrequencyEnum === 'WEEK'">每周一次</span>
<span v-else>每月一次</span>
</FormItem>
<FormItem
label="活动范围"
</el-form-item>
<el-form-item
v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'"
label="活动范围"
>
<span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
<spin v-else>指定会员</spin>
</FormItem>
<FormItem label="活动时间">
<span v-else>指定会员</span>
</el-form-item>
<el-form-item label="活动时间">
<span>{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</span>
</FormItem>
<FormItem label="活动状态">
</el-form-item>
<el-form-item label="活动状态">
<span v-if="couponActivity.promotionStatus === 'NEW'">未开始</span>
<span v-if="couponActivity.promotionStatus === 'START'">已开始</span>
<span v-if="couponActivity.promotionStatus === 'END'">已结束</span>
<span v-if="couponActivity.promotionStatus === 'CLOSE'">已关闭</span>
</FormItem>
</el-form-item>
</div>
<h4>优惠券列表</h4>
<Table :columns="couponColumn" :data="couponData" ref="table"> </Table>
<el-table :data="couponData" style="width: 100%">
<el-table-column prop="couponName" label="优惠券名称" />
<el-table-column label="优惠券金额">
<template #default="{ row }">
<template v-if="row">
<span v-if="row.couponType === 'DISCOUNT'">{{ row.couponDiscount }}折</span>
<priceColorScheme v-else-if="row.couponType === 'PRICE'" :value="row.price" :color="$mainColor" />
<span v-else>未知</span>
</template>
</template>
</el-table-column>
<el-table-column label="优惠券类型">
<template #default="{ row }">
<span v-if="row">{{ couponTypeText(row.couponType) }}</span>
</template>
</el-table-column>
<el-table-column prop="num" label="赠送数量" />
</el-table>
<template v-if="couponActivity.activityScopeInfo && memberData.length > 0">
<h4 class="mt_10">会员列表列表</h4>
<Table :columns="memberColumn" :data="memberData"></Table>
<el-table :data="memberData" style="width: 100%">
<el-table-column prop="id" label="会员id" />
<el-table-column prop="nickName" label="昵称" />
</el-table>
</template>
</div>
</Form>
</el-form>
</div>
<div class="footer">
<Button type="primary" @click="back">返回活动列表</Button>
<el-button type="primary" @click="back">返回活动列表</el-button>
</div>
</div>
</template>
@@ -62,61 +81,9 @@ export default {
name: "coupon-activity-info",
data() {
return {
id: this.$route.query.id, //表单id
couponActivity: {}, //券活动
couponColumn: [
{
title: "优惠券名称",
key: "couponName",
},
{
title: "优惠券金额",
key: "price",
render: (h, params) => {
let text = "未知";
if (params.row.couponType === "DISCOUNT") {
text = params.row.couponDiscount + "折";
return h("div", [text]);
} else if (params.row.couponType === "PRICE") {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
}else{
return h("div", [text]);
}
},
},
{
title: "优惠券类型",
key: "couponType",
render: (h, params) => {
let text = "未知";
if (params.row.couponType == "DISCOUNT") {
text = "打折";
} else if (params.row.couponType == "PRICE") {
text = "减免现金";
}
return h("div", [text]);
},
},
{
title: "赠送数量",
key: "num",
},
],
id: this.$route.query.id,
couponActivity: {},
couponData: [],
memberColumn: [
{
title: "会员id",
key: "id",
},
{
title: "昵称",
key: "nickName",
},
],
memberData: [],
};
},
@@ -124,7 +91,11 @@ export default {
this.getCouponActivity();
},
methods: {
//获取优惠券活动
couponTypeText(v) {
if (v === "DISCOUNT") return "打折";
if (v === "PRICE") return "减免现金";
return "未知";
},
getCouponActivity() {
getCouponActivity(this.id).then((res) => {
this.couponActivity = res.result;
@@ -141,7 +112,6 @@ export default {
</script>
<style lang="scss" scoped>
/*选择商品品类*/
.content-goods-publish {
padding: 15px;
margin: 0 auto;
@@ -171,13 +141,8 @@ div.base-info-item {
align-items: flex-start;
justify-content: space-between;
padding-left: 40px;
.shop-category-text {
font-size: 12px;
}
}
}
/** 底部步骤 */
.footer {
width: 88.7%;
padding: 10px;

417
manager/src/views/promotions/coupon-activity/coupon-publish.vue
View File

@@ -1,68 +1,59 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<h4>活动信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input
type="text"
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="form.promotionName"
placeholder="请填写活动名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动时间">
<DatePicker
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
type="datetimerange"
:options="options"
:disabled-date="options.disabledDate"
v-model="rangeTime"
format="yyyy-MM-dd HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择活动时间"
style="width: 260px"
>
</DatePicker>
</FormItem>
/>
</el-form-item>
<FormItem label="优惠券活动类型" prop="couponActivityType">
<RadioGroup
type="button"
button-style="solid"
v-model="form.couponActivityType"
>
<Radio label="REGISTERED">新人发券</Radio>
<Radio label="SPECIFY">精确发券</Radio>
<!-- <Radio label="INVITE_NEW">邀新赠券</Radio>-->
<Radio label="AUTO_COUPON">自动赠券</Radio>
</RadioGroup>
</FormItem>
<FormItem
<el-form-item label="优惠券活动类型" prop="couponActivityType">
<el-radio-group v-model="form.couponActivityType">
<el-radio-button value="REGISTERED">新人发券</el-radio-button>
<el-radio-button value="SPECIFY">精确发券</el-radio-button>
<el-radio-button value="AUTO_COUPON">自动赠券</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
label="领取频率"
v-if="form.couponActivityType === 'AUTO_COUPON'"
>
<RadioGroup
type="button"
button-style="solid"
v-model="form.couponFrequencyEnum"
>
<Radio label="DAY">每日一次</Radio>
<Radio label="WEEK">每周一次</Radio>
<Radio label="MONTH">每月一次</Radio>
</RadioGroup>
</FormItem>
<FormItem
<el-radio-group v-model="form.couponFrequencyEnum">
<el-radio-button value="DAY">每日一次</el-radio-button>
<el-radio-button value="WEEK">每周一次</el-radio-button>
<el-radio-button value="MONTH">每月一次</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
label="活动范围"
prop="activityScope"
v-if="form.couponActivityType === 'SPECIFY'"
>
<RadioGroup type="button" button-style="solid" v-model="form.activityScope">
<Radio label="ALL">全部会员</Radio>
<Radio label="DESIGNATED">指定会员</Radio>
</RadioGroup>
</FormItem>
<FormItem
<el-radio-group v-model="form.activityScope">
<el-radio-button value="ALL">全部会员</el-radio-button>
<el-radio-button value="DESIGNATED">指定会员</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
label="选择会员"
prop="scopeType"
v-if="
@@ -70,62 +61,79 @@
form.activityScope === 'DESIGNATED'
"
>
<Button type="primary" icon="ios-add" @click="addVip" ghost
>选择会员</Button
>
<el-button type="primary" @click="addVip" plain>选择会员</el-button>
<div style="margin-top: 24px" v-if="form.activityScope == 'DESIGNATED'">
<Table border :columns="userColumns" :data="this.selectedMember"> </Table>
<el-table border :data="selectedMember" style="width: 100%">
<el-table-column prop="nickName" label="用户名称" min-width="120" />
<el-table-column label="手机号" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ row.mobile || "暂未填写" }}</span>
</template>
</el-table-column>
<el-table-column prop="lastLoginDate" label="最后登录时间" min-width="160" />
<el-table-column label="操作" width="100" align="center">
<template #default="{ $index }">
<a class="link-text" @click="delUser($index)">删除</a>
</template>
</el-table-column>
</el-table>
</div>
</FormItem>
</el-form-item>
</div>
<h4>配置优惠券</h4>
<div class="form-item-view">
<FormItem label="选择优惠券" prop="scopeType">
<Button type="primary" :loading="submitLoading" @click="showSelector"
>选择优惠券</Button
>
</FormItem>
<FormItem label="赠送配置" prop="scopeType">
<Table border :columns="columns" :data="this.selectCouponList">
<template slot="sendNum" slot-scope="scope">
<Input
type="text"
v-model="form.couponActivityItems[scope.index].num"
placeholder="赠送数量"
/>
<Input
type="text"
v-model="form.couponActivityItems[scope.index].couponId"
v-show="false"
/>
</template>
</Table>
</FormItem>
<el-form-item label="选择优惠券" prop="scopeType">
<el-button type="primary" :loading="submitLoading" @click="showSelector">选择优惠券</el-button>
</el-form-item>
<el-form-item label="赠送配置" prop="scopeType">
<el-table border :data="selectCouponList" style="width: 100%">
<el-table-column prop="couponName" label="优惠券名称" min-width="120" show-overflow-tooltip />
<el-table-column label="品类描述" width="120">
<template #default="{ row }">
<el-tag v-if="row" :type="scopeTypeTagType(row.scopeType)">
{{ scopeTypeText(row.scopeType) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="面额/折扣" min-width="120">
<template #default="{ row }">
<template v-if="row">
<span v-if="row.price" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
<span v-else>{{ row.couponDiscount }}折</span>
</template>
</template>
</el-table-column>
<el-table-column label="赠送数量" min-width="120">
<template #default="{ $index }">
<el-input
v-model="form.couponActivityItems[$index].num"
placeholder="赠送数量"
/>
<el-input
v-model="form.couponActivityItems[$index].couponId"
v-show="false"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="{ $index }">
<el-button type="danger" size="small" plain @click="delCoupon($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交</Button
>
<el-button link @click="closeCurrentPage">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</div>
</div>
</Form>
</Card>
<Modal
@on-ok="
() => {
this.showCouponSelect = false;
}
"
@on-cancel="
() => {
this.showCouponSelect = false;
}
"
v-model="showCouponSelect"
width="80%"
>
</el-form>
</el-card>
<el-dialog v-model="showCouponSelect" width="80%" title="选择优惠券" destroy-on-close>
<couponTemplate
:checked="true"
:selectedList="selectCouponList"
@@ -133,16 +141,16 @@
promotionStatus="START"
@selected="selectedCoupon"
/>
</Modal>
</el-dialog>
<Modal width="1200" v-model="checkUserList">
<el-dialog v-model="checkUserList" width="1200px" title="选择会员" destroy-on-close>
<userList
v-if="checkUserList"
@callback="callbackSelectUser"
:selectedList="selectedMember"
ref="memberLayout"
/>
</Modal>
</el-dialog>
</div>
</template>
@@ -150,7 +158,6 @@
import couponTemplate from "@/views/promotions/coupon/coupon";
import userList from "@/views/member/list/index";
import { saveActivityCoupon } from "@/api/promotion";
import { promotionsScopeTypeRender } from "@/utils/promotions";
export default {
name: "add-coupon-activity",
@@ -165,144 +172,55 @@ export default {
return date && date.valueOf() < Date.now() - 86400000;
},
},
showCouponSelect: false, //显示优惠券选择框
rangeTime: "", //时间区间
checkUserList: false, //会员选择器
selectedMember: [], //选择的会员
showCouponSelect: false,
rangeTime: "",
checkUserList: false,
selectedMember: [],
form: {
promotionName: "", //活动名称
activityScope: "ALL", //活动范围 ，默认全体发券
couponActivityType: "REGISTERED", //触发活动方式 默认新人赠券
startTime: "", //开始时间
endTime: "", //结束时间
memberDTOS: [], //指定会员范围
couponActivityItems: [], //优惠券列表
couponFrequencyEnum:"", //选择周期
promotionName: "",
activityScope: "ALL",
couponActivityType: "REGISTERED",
startTime: "",
endTime: "",
memberDTOS: [],
couponActivityItems: [],
couponFrequencyEnum: "",
},
submitLoading: false, // 添加或编辑提交状态
selectCouponList: [], //选择的优惠券列表
submitLoading: false,
selectCouponList: [],
formRule: {
promotionName: [{ required: true, message: "活动名称不能为空" }],
rangeTime: [{ required: true, message: "请选择活动有效期" }],
description: [{ required: true, message: "请输入范围描述" }],
},
// 用户表格
userColumns: [
{
title: "用户名称",
key: "nickName",
minWidth: 120,
},
{
title: "手机号",
key: "mobile",
render: (h, params) => {
return h("div", params.row.mobile || "暂未填写");
},
},
{
title: "最后登录时间",
key: "lastLoginDate",
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none"
},
on: {
click: () => {
this.delUser(params.index);
},
},
},
"删除"
);
},
},
],
//优惠券表格
columns: [
{
title: "优惠券名称",
key: "couponName",
minWidth: 120,
},
{
title: "品类描述",
key: "scopeType",
width: 120,
render: (h, params) => {
return promotionsScopeTypeRender(h, params);
},
},
{
title: "面额/折扣",
key: "couponName",
minWidth: 120,
render: (h, params) => {
if (params.row.price) {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
} else {
return h("div", params.row.couponDiscount + "折");
}
},
},
{
title: "赠送数量",
type: "template",
slot: "sendNum",
minWidth: 120,
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delCoupon(params.index);
},
},
},
"删除"
);
},
},
],
};
},
methods: {
// 返回已选择的用户
scopeTypeText(type) {
const map = {
ALL: "全品类",
PORTION_GOODS_CATEGORY: "商品分类",
PORTION_SHOP_CATEGORY: "店铺分类",
PORTION_GOODS: "指定商品",
};
return map[type] || "未知";
},
scopeTypeTagType(type) {
const map = {
ALL: "info",
PORTION_GOODS_CATEGORY: "warning",
PORTION_SHOP_CATEGORY: "warning",
PORTION_GOODS: "primary",
};
return map[type] || "danger";
},
callbackSelectUser(val) {
// 每次将返回的数据回调判断
let findUser = this.selectedMember.find((item) => {
return item.id === val.id;
});
// 如果没有则添加
if (!findUser) {
this.selectedMember.push(val);
} else {
// 有重复数据就删除
this.selectedMember.map((item, index) => {
if (item.id === findUser.id) {
this.selectedMember.splice(index, 1);
@@ -311,13 +229,10 @@ export default {
}
this.reSelectMember();
},
// 删除选择的会员
delUser(index) {
this.selectedMember.splice(index, 1);
this.reSelectMember();
},
//更新选择的会员
reSelectMember() {
this.form.memberDTOS = this.selectedMember.map((item) => {
return {
@@ -326,19 +241,15 @@ export default {
};
});
},
/**
* 返回优惠券*/
selectedCoupon(val) {
this.selectCouponList = val;
this.reSelectCoupon();
},
// 删除选择的优惠券
delCoupon(index) {
this.selectCouponList.splice(index, 1);
this.reSelectCoupon();
},
reSelectCoupon() {
// 清空原有数据
this.form.couponActivityItems = this.selectCouponList.map((item) => {
return {
num: 1,
@@ -346,30 +257,25 @@ export default {
};
});
},
// 添加指定用户
addVip() {
this.checkUserList = true;
this.$nextTick(() => {
this.$refs.memberLayout.selectedMember = true;
});
},
//显示优惠券选择框
showSelector() {
this.showCouponSelect = true;
},
/** 保存平台优惠券 */
handleSubmit() {
if(this.form.couponFrequencyEnum !== ''){
console.log(this.activityScope)
if(this.form.activityScope == 'ALL'){
this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
if (this.form.couponFrequencyEnum !== "") {
if (this.form.activityScope == "ALL") {
this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
this.submitLoading = true;
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
saveActivityCoupon(params).then((res) => {
this.submitLoading = false;
@@ -380,34 +286,31 @@ export default {
});
}
});
}else {
this.$Message.info('自动发券只能全用户发送')
this.form.couponActivityType = 'SPECIFY'
this.form.activityScope = 'ALL'
} else {
this.$Message.info("自动发券只能全用户发送");
this.form.couponActivityType = "SPECIFY";
this.form.activityScope = "ALL";
}
}else{
this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
} else {
this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
this.submitLoading = true;
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
saveActivityCoupon(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券活动创建成功");
this.closeCurrentPage();
}
});
}
});
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
this.submitLoading = true;
delete params.id;
saveActivityCoupon(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券活动创建成功");
this.closeCurrentPage();
}
});
}
});
}
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-platform-coupon");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
@@ -444,4 +347,10 @@ h4 {
margin: 0 4px;
}
}
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
</style>

336
manager/src/views/promotions/coupon-activity/coupon.vue
View File

@@ -1,249 +1,208 @@
<template>
<div class="search">
<Card>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加活动</Button>
</Row>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
<el-card>
<div class="operation padding-row">
<el-button type="primary" @click="add">添加活动</el-button>
</div>
<el-table
ref="table"
sortable="custom"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<template slot-scope="{ row }" slot="action">
<a
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="info(row)"
>查看</a>
<span
v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
style="margin: 0 8px; color: #dcdee2"
>|</span>
<a
v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="remove(row)"
>关闭</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table-column prop="promotionName" label="活动名称" min-width="140" show-overflow-tooltip />
<el-table-column label="活动类型" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ activityTypeText(row.couponActivityType) }}</span>
</template>
</el-table-column>
<el-table-column label="活动范围" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ activityScopeText(row.activityScope) }}</span>
</template>
</el-table-column>
<el-table-column label="领取频率" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ couponFrequencyText(row.couponFrequencyEnum) }}</span>
</template>
</el-table-column>
<el-table-column label="活动时间" min-width="160">
<template #default="{ row }">
<div v-if="row" class="activity-time" v-html="formatActivityTime(row)"></div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="100" fixed="right" align="center">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="120" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a class="link-text" @click="info(row)">查看</a>
<template
v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
>
<span class="op-split">|</span>
<a class="link-text" @click="remove(row)">关闭</a>
</template>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getCouponActivityList, closeActivity } from "@/api/promotion";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
name: "coupon-activity",
components: {},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
},
form: {
// 添加或编辑表单对象初始化数据
promotionName: "",
},
// 表单验证规则
formValidate: {
promotionName: [{ required: true, message: "不能为空", trigger: "blur" }],
},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动类型",
key: "couponActivityType",
minWidth: 120,
render: (h, params) => {
if (params.row.couponActivityType === "REGISTERED") {
return h("div", ["注册赠券"]);
}else if(params.row.couponActivityType === 'AUTO_COUPON'){
return h("div", ["自动发券"]);
}else {
return h("div", ["精确发券"]);
}
},
},
{
title: "活动范围",
key: "activityScope",
minWidth: 120,
render: (h, params) => {
let text = "未知";
if (params.row.activityScope === "DESIGNATED") {
text = "指定会员";
} else {
text = "全部会员";
}
return h("div", [text]);
},
},
{
title: "领取频率",
key: "couponFrequencyEnum",
minWidth: 120,
render: (h, params) => {
console.log(params)
let text = ''
if (params.row.couponFrequencyEnum === "DAY") {
text = "每日";
} else if(params.row.couponFrequencyEnum === "WEEK") {
text = "每周";
} else if(params.row.couponFrequencyEnum === 'MONTH'){
text = '每月'
} else {
text = '/'
}
return h("div", [text]);
},
},
{
title: "活动时间",
minWidth: 150,
render: (h, params) => {
if (params.row.startTime && params.row.endTime) {
return h("div", {
domProps: {
innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
},
});
}else{
return h("div", '/');
}
},
},
{
title: "状态",
minWidth: 80,
key: "promotionStatus",
fixed: "right",
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
minWidth: 100,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
props: {
// 是否为选中模式
checked: {
type: Boolean,
default: false,
},
},
data() {
return {
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
data: [],
total: 0,
selectDate: [],
};
},
methods: {
//获取数据 初始化
activityTypeText(type) {
const map = {
REGISTERED: "注册赠券",
AUTO_COUPON: "自动发券",
};
return map[type] || "精确发券";
},
activityScopeText(scope) {
return scope === "DESIGNATED" ? "指定会员" : "全部会员";
},
couponFrequencyText(freq) {
const map = {
DAY: "每日",
WEEK: "每周",
MONTH: "每月",
};
return map[freq] || "/";
},
formatActivityTime(row) {
if (row.startTime && row.endTime) {
return `${row.startTime}<br/>${row.endTime}`;
}
return "/";
},
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
},
//增加券活动
add() {
this.$router.push({ name: "add-coupon-activity" });
},
//查看详情
info(v) {
this.$router.push({ name: "coupon-activity-info", query: { id: v.id } });
},
// 分页 修改页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 修改页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
//搜索活动
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
//数据获取
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
getCouponActivityList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.loading = false;
getCouponActivityList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
//跳转编辑
edit(v) {
this.$router.push({ name: "edit-platform-coupon", query: { id: v.id } });
},
//停止活动
remove(v) {
this.$Modal.confirm({
title: "确认关闭",
content: "确认要关闭此优惠券活动么?关闭活动只能重新创建",
loading: true,
onOk: () => {
// 删除
closeActivity(v.id)
.then((res) => {
if (res.success) {
this.$Message.success("优惠券活动已关闭");
this.getDataList();
this.$Modal.remove();
}
this.$Modal.remove();
})
.catch(() => {});
.catch(() => {
this.$Modal.remove();
});
},
});
},
@@ -253,3 +212,24 @@ export default {
},
};
</script>
<style scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
.activity-time {
line-height: 1.5;
}
.padding-row {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
</style>

326
manager/src/views/promotions/coupon/coupon-publish.vue
View File

@@ -1,96 +1,93 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<h4>基本信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input
<el-form-item label="活动名称" prop="promotionName">
<el-input
:disabled="disabled"
type="text"
v-model="form.promotionName"
placeholder="活动名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="优惠券名称" prop="couponName">
<Input
</el-form-item>
<el-form-item label="优惠券名称" prop="couponName">
<el-input
:disabled="disabled"
type="text"
v-model="form.couponName"
placeholder="优惠券名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="优惠券类型" prop="couponType">
<Select :disabled="disabled" v-model="form.couponType" style="width: 260px">
<Option value="DISCOUNT">打折</Option>
<Option value="PRICE">减免现金</Option>
</Select>
</FormItem>
<FormItem
</el-form-item>
<el-form-item label="优惠券类型" prop="couponType">
<el-select :disabled="disabled" v-model="form.couponType" style="width: 260px">
<el-option label="打折" value="DISCOUNT" />
<el-option label="减免现金" value="PRICE" />
</el-select>
</el-form-item>
<el-form-item
label="折扣"
prop="couponDiscount"
v-if="form.couponType == 'DISCOUNT'"
>
<InputNumber
<el-input-number
:disabled="disabled"
placeholder="折扣"
:max="9.9"
:min="0.1"
:step="0.1"
precision="1"
:precision="1"
v-model="form.couponDiscount"
style="width: 260px">
</InputNumber>
style="width: 260px"
/>
<span class="describe">请输入0-10的数字,可有一位小数</span>
</FormItem>
<FormItem label="面额" prop="price" v-if="form.couponType == 'PRICE'">
<Input
</el-form-item>
<el-form-item label="面额" prop="price" v-if="form.couponType == 'PRICE'">
<el-input
:disabled="disabled"
type="text"
v-model="form.price"
placeholder="面额"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动类型" prop="getType">
<Select :disabled="disabled" v-model="form.getType" style="width: 260px">
<Option value="FREE">免费领取</Option>
<Option value="ACTIVITY">活动赠送</Option>
</Select>
</FormItem>
</el-form-item>
<el-form-item label="活动类型" prop="getType">
<el-select :disabled="disabled" v-model="form.getType" style="width: 260px">
<el-option label="免费领取" value="FREE" />
<el-option label="活动赠送" value="ACTIVITY" />
</el-select>
</el-form-item>
<FormItem label="店铺承担比例" prop="storeCommission">
<Input
<el-form-item label="店铺承担比例" prop="storeCommission">
<el-input
:disabled="disabled"
v-model="form.storeCommission"
placeholder="店铺承担比例"
style="width: 260px"
>
<span slot="append">%</span>
</Input>
<template #append>%</template>
</el-input>
<span class="describe">店铺承担比例，输入0-100之间数值</span>
</FormItem>
<FormItem label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
<Input
</el-form-item>
<el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
<el-input
:disabled="disabled"
v-model="form.publishNum"
placeholder="发放数量"
style="width: 260px"
/>
<div class="tips">如果发放数量为0时,则代表不限制发放数量</div>
</FormItem>
<FormItem
</el-form-item>
<el-form-item
label="领取数量限制"
prop="couponLimitNum"
v-if="form.getType === 'FREE'"
>
<Input
<el-input
:disabled="disabled"
v-model="form.couponLimitNum"
placeholder="领取限制"
@@ -98,9 +95,9 @@
style="width: 260px"
/>
<div class="tips">如果领取数量为0时,则代表不限制领取数量</div>
</FormItem>
<FormItem label="范围描述" prop="description">
<Input
</el-form-item>
<el-form-item label="范围描述" prop="description">
<el-input
:disabled="disabled"
v-model="form.description"
type="textarea"
@@ -110,42 +107,42 @@
clearable
style="width: 260px"
/>
</FormItem>
</el-form-item>
</div>
<h4>使用限制</h4>
<div class="form-item-view">
<FormItem label="消费门槛" prop="consumeThreshold">
<Input
<el-form-item label="消费门槛" prop="consumeThreshold">
<el-input
:disabled="disabled"
type="text"
v-model="form.consumeThreshold"
placeholder="消费门槛"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="有效期" prop="rangeTime">
</el-form-item>
<el-form-item label="有效期" prop="rangeTime">
<div v-if="form.getType == 'ACTIVITY'">
<RadioGroup v-model="rangeTimeType">
<Radio :disabled="disabled" :label="1" v-if="form.getType !== 'ACTIVITY'">起止时间</Radio>
<Radio :disabled="disabled" :label="0">固定时间</Radio>
</RadioGroup>
<el-radio-group v-model="rangeTimeType">
<el-radio :disabled="disabled" :value="1" v-if="form.getType !== 'ACTIVITY'">起止时间</el-radio>
<el-radio :disabled="disabled" :value="0">固定时间</el-radio>
</el-radio-group>
</div>
<div v-if="rangeTimeType == 1">
<DatePicker
<el-date-picker
:disabled="disabled"
type="datetimerange"
v-model="form.rangeTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="options.disabledDate"
style="width: 260px"
>
</DatePicker>
/>
</div>
<div class="effectiveDays" v-if="rangeTimeType == 0">
领取当天开始
<InputNumber
<el-input-number
:disabled="disabled"
v-model="form.effectiveDays"
:min="1"
@@ -154,73 +151,81 @@
/>
天内有效(1-365间的整数)
</div>
</FormItem>
</el-form-item>
<FormItem label="使用范围" prop="scopeType">
<RadioGroup type="button" button-style="solid" v-model="form.scopeType">
<Radio :disabled="disabled" label="ALL">全品类</Radio>
<Radio :disabled="disabled" label="PORTION_GOODS">指定商品</Radio>
<Radio :disabled="disabled" label="PORTION_GOODS_CATEGORY"
>部分商品分类</Radio
>
</RadioGroup>
</FormItem>
<el-form-item label="使用范围" prop="scopeType">
<el-radio-group v-model="form.scopeType">
<el-radio-button :disabled="disabled" value="ALL">全品类</el-radio-button>
<el-radio-button :disabled="disabled" value="PORTION_GOODS">指定商品</el-radio-button>
<el-radio-button :disabled="disabled" value="PORTION_GOODS_CATEGORY">部分商品分类</el-radio-button>
</el-radio-group>
</el-form-item>
<FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
<el-form-item style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
<div style="display: flex; margin-bottom: 10px">
<Button :disabled="disabled" type="primary" @click="openSkuList"
>选择商品</Button
>
<Button
<el-button :disabled="disabled" type="primary" @click="openSkuList">选择商品</el-button>
<el-button
:disabled="disabled"
type="error"
ghost
type="danger"
plain
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除</Button
>
>批量删除</el-button>
</div>
<Table
<el-table
border
:columns="columns"
:data="form.promotionGoodsList"
@on-selection-change="changeSelect"
style="width: 100%"
@selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="QRCode">
<img
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template>
</Table>
</FormItem>
<el-table-column type="selection" width="60" align="center" />
<el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
<el-table-column label="商品价格" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存" width="90">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="{ $index }">
<el-button
:disabled="disabled"
type="danger"
size="small"
plain
@click="delGoods($index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<FormItem v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
<Cascader
<el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
<el-cascader
:disabled="disabled"
:data="goodsCategoryList"
:options="goodsCategoryList"
style="width: 260px"
v-model="form.scopeIdGoods"
></Cascader>
</FormItem>
/>
</el-form-item>
<div>
<Button :disabled="disabled" type="text" @click="closeCurrentPage"
>返回</Button
>
<Button
<el-button :disabled="disabled" link @click="closeCurrentPage">返回</el-button>
<el-button
:disabled="disabled"
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>提交</Button
>
>提交</el-button>
</div>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
</div>
</template>
@@ -245,17 +250,16 @@ export default {
handler(val) {
if (val == "FREE") {
this.rangeTimeType = 1;
}else{
} else {
this.rangeTimeType = 0;
}
if(this.rangeTimeType == 0){
delete this.formRule.rangeTime
if (this.rangeTimeType == 0) {
delete this.formRule.rangeTime;
}
},
deep: true,
},
$route(e) {
// 监听路由，参数变化调取接口
this.id = e.query.id;
if (this.id) {
this.getCoupon();
@@ -289,32 +293,26 @@ export default {
};
return {
disabled: this.$route.query.onlyView,
rangeTimeType: 1, // 当前时间类型
modalType: 0, // 是否编辑
rangeTimeType: 1,
modalType: 0,
form: {
/** 店铺承担比例 */
storeCommission: 0,
/** 发行数量 */
publishNum: 0,
/** 运费承担者 */
scopeType: "ALL",
/** 限领数量 */
couponLimitNum: 1,
/** 活动类型 */
couponType: "PRICE",
/** 优惠券名称 */
couponName: "",
promotionName: "",
getType: "FREE",
promotionGoodsList: [],
scopeIdGoods: [],
rangeDayType: "",
effectiveDays:1,
effectiveDays: 1,
},
id: this.$route.query.id, // 优惠券id
submitLoading: false, // 添加或编辑提交状态
selectedGoods: [], // 已选商品列表，便于删除
goodsCategoryList: [], // 商品分类列表
id: this.$route.query.id,
submitLoading: false,
selectedGoods: [],
goodsCategoryList: [],
formRule: {
promotionName: [{ required: true, message: "活动名称不能为空" }],
couponName: [{ required: true, message: "优惠券名称不能为空" }],
@@ -345,56 +343,6 @@ export default {
],
description: [{ required: true, message: "请输入范围描述" }],
},
columns: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
},
{
title: "商品价格",
key: "price",
minWidth: 40,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
},
},
{
title: "库存",
key: "quantity",
minWidth: 40,
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delGoods(params.index);
},
},
},
"删除"
);
},
},
],
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
@@ -404,14 +352,12 @@ export default {
},
async mounted() {
await this.getCagetoryList();
// 如果id不为空则查询信息
if (this.id) {
this.getCoupon();
this.modalType = 1;
}
},
methods: {
// 获取优惠券数据
getCoupon() {
getPlatformCoupon(this.id).then((res) => {
let data = res.result;
@@ -429,7 +375,6 @@ export default {
prevCascader = prevCascader.map((key) => {
if (key === item.id) {
let result = prev.map((item) => item.id);
return [...result, item.id];
} else {
return key;
@@ -452,23 +397,19 @@ export default {
this.form = data;
});
},
/** 保存平台优惠券 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
// 判断当前活动类型
params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
//判断当前时间类型
if (this.rangeTimeType == 1) {
params.rangeDayType = "FIXEDTIME";
params.startTime = this.$options.filters.unixToDate(
this.form.rangeTime[0] / 1000
);
params.endTime = this.$options.filters.unixToDate(
this.form.rangeTime[1] / 1000
);
const rangeTime = this.form.rangeTime;
const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
params.startTime = this.$filters.unixToDate(start.getTime() / 1000);
params.endTime = this.$filters.unixToDate(end.getTime() / 1000);
delete params.effectiveDays;
} else {
params.rangeDayType = "DYNAMICTIME";
@@ -494,7 +435,6 @@ export default {
}
if (params.scopeType == "PORTION_GOODS") {
//指定商品
params.promotionGoodsList.forEach((item) => {
scopeId.push(item.skuId);
});
@@ -502,7 +442,6 @@ export default {
} else if (params.scopeType == "ALL") {
delete params.promotionGoodsList;
} else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
//部分商品分类
scopeId = this.filterCategoryId(params.scopeIdGoods, []);
params.scopeId = scopeId.toString();
delete params.promotionGoodsList;
@@ -511,7 +450,6 @@ export default {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
savePlatformCoupon(params).then((res) => {
@@ -522,7 +460,6 @@ export default {
}
});
} else {
// 编辑
delete params.consumeLimit;
delete params.updateTime;
@@ -537,14 +474,12 @@ export default {
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-platform-coupon");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
data.forEach((e) => {
@@ -553,11 +488,9 @@ export default {
this.$refs.skuSelect.goodsData = data;
},
changeSelect(e) {
// 已选商品批量选择
this.selectedGoods = e;
},
delSelectGoods() {
// 多选删除商品
if (this.selectedGoods.length <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
@@ -578,11 +511,9 @@ export default {
});
},
delGoods(index) {
// 删除商品
this.form.promotionGoodsList.splice(index, 1);
},
selectedGoodsData(item) {
// 回显已选商品
let list = [];
item.forEach((e) => {
list.push({
@@ -603,10 +534,8 @@ export default {
this.form.promotionGoodsList = list;
},
async getCagetoryList() {
// 获取全部商品分类
let data = await getCategoryTree();
this.goodsCategoryList = data.result;
// 过滤出可显示的值
this.goodsCategoryList = this.goodsCategoryList.map((item) => {
if (item.children) {
item.children = item.children.map((child) => {
@@ -634,7 +563,6 @@ export default {
});
},
filterCategoryId(list, idArr) {
// 递归获取分类id
list.forEach((e) => {
if (e instanceof Array) {
this.filterCategoryId(e, idArr);

378
manager/src/views/promotions/coupon/coupon-receive.vue
View File

@@ -1,259 +1,191 @@
<template>
<div class="search">
<Button style="margin-bottom: 10px" @click="back()">返回</Button>
<Card>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="75"
class="search-form mb_10"
>
<Form-item label="优惠券名称" prop="couponName">
<Input
type="text"
<el-button style="margin-bottom: 10px" @click="back()">返回</el-button>
<el-card>
<el-form ref="searchForm" :model="searchForm" inline label-width="75px" class="search-form mb_10">
<el-form-item label="优惠券名称" prop="couponName">
<el-input
v-model="searchForm.couponName"
placeholder="请输入优惠券名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
</el-form-item>
<el-form-item label="会员名称" prop="memberName">
<el-input
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="获取方式" prop="getType">
<Select
v-model="searchForm.getType"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="FREE">免费获取</Option>
<Option value="ACTIVITY">活动获取</Option>
</Select>
</Form-item>
<Form-item label="优惠券状态" prop="memberCouponStatus">
<Select
v-model="searchForm.memberCouponStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">已领取</Option>
<Option value="USED">已使用</Option>
<Option value="EXPIRE">已过期</Option>
<Option value="CLOSED">已作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
</el-form-item>
<el-form-item label="获取方式" prop="getType">
<el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
<el-option label="免费获取" value="FREE" />
<el-option label="活动获取" value="ACTIVITY" />
</el-select>
</el-form-item>
<el-form-item label="优惠券状态" prop="memberCouponStatus">
<el-select v-model="searchForm.memberCouponStatus" placeholder="请选择" clearable style="width: 240px">
<el-option label="已领取" value="NEW" />
<el-option label="已使用" value="USED" />
<el-option label="已过期" value="EXPIRE" />
<el-option label="已作废" value="CLOSED" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
start-placeholder="开始日期"
end-placeholder="结束日期"
placeholder="选择起始时间"
style="width: 240px"
></DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Card>
<Card>
<Table
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-table
v-if="refreshTable"
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
@on-selection-change="changeSelect"
style="width: 100%"
@selection-change="changeSelect"
>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table-column prop="memberName" label="会员名称" min-width="130" fixed="left" />
<el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
<el-table-column label="发布店铺" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ (row.storeName === "platform" && "平台") || row.storeName }}</span>
</template>
</el-table-column>
<el-table-column label="面额/折扣" width="100">
<template #default="{ row }">
<priceColorScheme
v-if="row && row.price"
:value="row.price"
:color="$mainColor"
/>
<span v-else-if="row">{{ row.discount }}折</span>
</template>
</el-table-column>
<el-table-column prop="consumeThreshold" label="使用门槛" width="130" />
<el-table-column label="获取方式" width="120">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.getType === 'FREE'" type="danger">免费获取</el-tag>
<el-tag v-else-if="row.getType === 'ACTIVITY'" type="warning">活动获取</el-tag>
<el-tag v-else-if="row.getType === 'INSIDE'" type="success">内购</el-tag>
<el-tag v-else>未知</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="会员优惠券状态" width="130">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.memberCouponStatus == 'NEW'" type="primary">已领取</el-tag>
<el-tag v-else-if="row.memberCouponStatus == 'USED'" type="success">已使用</el-tag>
<el-tag v-else-if="row.memberCouponStatus == 'EXPIRE'" type="danger">已过期</el-tag>
<el-tag v-else-if="row.memberCouponStatus == 'CLOSED'" type="info">已作废</el-tag>
<el-tag v-else type="danger">未知</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="优惠券类型" width="120">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.couponType === 'DISCOUNT'" type="warning">打折</el-tag>
<el-tag v-else-if="row.couponType === 'PRICE'" type="danger">减免现金</el-tag>
<el-tag v-else>未知</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="品类描述" width="120">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.scopeType == 'ALL'">全品类</el-tag>
<el-tag v-else-if="row.scopeType == 'PORTION_GOODS_CATEGORY'" type="warning">商品分类</el-tag>
<el-tag v-else-if="row.scopeType == 'PORTION_SHOP_CATEGORY'" type="danger">店铺分类</el-tag>
<el-tag v-else-if="row.scopeType == 'PORTION_GOODS'" type="danger">指定商品</el-tag>
<el-tag v-else type="danger">未知</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="有效时间" width="150">
<template #default="{ row }">
<template v-if="row">
<span v-if="row.getType === 'ACTIVITY' && row.rangeDayType === 'DYNAMICTIME'">长期有效</span>
<div v-else-if="row.startTime && row.endTime">
{{ row.startTime }}<br />{{ row.endTime }}
</div>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getCouponReceiveList } from "@/api/promotion";
import {
memberPromotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
export default {
name: "coupon-recevie",
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
getType: "", // 默认排序方式
couponId: this.$route.query.couponId, // 优惠券id
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "会员名称",
key: "memberName",
minWidth: 130,
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 100,
tooltip: true,
},
{
title: "发布店铺",
key: "storeName",
minWidth: 100,
render: (h, params) => {
return h("div", (params.row.storeName === 'platform' && "平台") || params.row.storeName);
},
},
{
title: "面额/折扣",
key: "price",
width: 100,
render: (h, params) => {
if (params.row.price) {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
} else {
return h("div", params.row.discount + "折");
}
},
},
{
title: "使用门槛",
key: "consumeThreshold",
width: 130,
},
{
title: "获取方式",
width: 120,
key: "getType",
render: (h, params) => {
if (params.row.getType === "FREE") {
return h("Tag", { props: { color: "red" } }, "免费获取");
} else if (params.row.getType === "ACTIVITY") {
return h("Tag", { props: { color: "volcano" } }, "活动获取");
} else if (params.row.getType === "INSIDE") {
return h("Tag", { props: { color: "lime" } }, "内购");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "会员优惠券状态",
width: 130,
key: "memberCouponStatus",
render: (h, params) => {
return memberPromotionsStatusRender(
h,
params.row.memberCouponStatus
);
},
},
{
title: "优惠券类型",
key: "couponType",
width: 120,
render: (h, params) => {
if (params.row.couponType === "DISCOUNT") {
return h("Tag", { props: { color: "orange" } }, "打折");
} else if (params.row.couponType === "PRICE") {
return h("Tag", { props: { color: "magenta" } }, "减免现金");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "品类描述",
key: "scopeType",
width: 120,
render: (h, params) => {
return promotionsScopeTypeRender(h, params);
},
},
{
title: "有效时间",
width: 150,
render: (h, params) => {
if (
params?.row?.getType === "ACTIVITY" &&
params?.row?.rangeDayType === "DYNAMICTIME"
) {
return h("div", "长期有效");
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
refreshTable: true, // 修改选中状态后刷新表格
selectDate: [], //选中的信息
};
},
props: {
promotionStatus: {
type: String,
default: "",
},
},
data() {
return {
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "create_time",
order: "desc",
getType: "",
couponId: this.$route.query.couponId,
},
selectList: [],
selectCount: 0,
data: [],
total: 0,
refreshTable: true,
selectDate: [],
};
},
watch: {
$route(e) {
// 监听路由，参数变化调取接口
this.searchForm.couponId = e.query.couponId;
if (this.couponId) {
this.getDataList();
} else {
this.$refs.form.resetFields();
this.$refs.searchForm?.resetFields();
}
},
},
@@ -263,40 +195,29 @@ export default {
this.$router.go(-1);
},
check() {
// 选中的优惠券
this.$emit("selected", this.selectList);
},
// 初始化数据
init() {
this.getDataList();
},
changePage(v) {
// 改变页码
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
},
changePageSize(v) {
// 改变页数
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
// 搜索
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
/**
* 选择优惠券
*/
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
if (this.getType === "ACTIVITY") this.check();
},
getDataList() {
// 获取数据
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
@@ -308,13 +229,10 @@ export default {
getCouponReceiveList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
},
mounted() {

623
manager/src/views/promotions/coupon/coupon.vue
View File

@@ -1,273 +1,197 @@
<template>
<div class="search">
<Card>
<Form
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
:label-width="75"
label-width="90px"
class="search-form mb_10"
@keyup.enter="handleSearch"
>
<Form-item label="优惠券名称" prop="couponName">
<Input
type="text"
<el-form-item label="优惠券名称" prop="couponName">
<el-input
v-model="searchForm.couponName"
placeholder="请输入优惠券名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="获取方式" prop="getType">
<Select
v-model="searchForm.getType"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="FREE">免费获取</Option>
<Option value="ACTIVITY">活动获取</Option>
</Select>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
</el-form-item>
<el-form-item label="获取方式" prop="getType">
<el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
<el-option label="免费获取" value="FREE" />
<el-option label="活动获取" value="ACTIVITY" />
</el-select>
</el-form-item>
<el-form-item label="活动状态" prop="promotionStatus">
<el-select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
<el-option label="未开始" value="NEW" />
<el-option label="已开始/上架" value="START" />
<el-option label="已结束/下架" value="END" />
<el-option label="紧急关闭/作废" value="CLOSE" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
></DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Card>
<Card>
<Row class="operation padding-row" v-if="getType !== 'ACTIVITY'">
<Button @click="add" type="primary">添加优惠券</Button>
<Button @click="delAll">批量关闭</Button>
<Button @click="receivePage()" type="info">优惠券领取记录</Button>
</Row>
<Table
v-if="refreshTable"
:loading="loading"
border
:columns="columns"
:data="data"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<div class="operation padding-row" v-if="getType !== 'ACTIVITY'">
<el-button type="primary" @click="add">添加优惠券</el-button>
<el-button @click="delAll">批量关闭</el-button>
<el-button type="info" @click="receivePage()">优惠券领取记录</el-button>
</div>
<el-table
ref="table"
@on-selection-change="changeSelect"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
row-key="id"
@selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="action">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="see(row)"
>编辑</a>
<a
v-else
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="see(row, 'onlyView')"
>查看</a>
<span
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="margin: 0 8px; color: #dcdee2"
>|</span>
<a
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="close(row)"
>关闭</a>
<span style="margin: 0 8px; color: #dcdee2">|</span>
<a
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="receivePage(row.id)"
>领取记录</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table-column type="selection" width="52" align="center" />
<el-table-column prop="couponName" label="优惠券名称" min-width="180" show-overflow-tooltip />
<el-table-column label="面额/折扣" width="150">
<template #default="{ row }">
<span v-if="row">
<span v-if="row.price" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
<span v-else>{{ row.couponDiscount }}折</span>
</span>
</template>
</el-table-column>
<el-table-column label="已领取数量/总数量" width="180">
<template #default="{ row }">
<span v-if="row">
{{ row.receivedNum }}/{{ row.publishNum === 0 ? "不限制" : row.publishNum }}</span>
</template>
</el-table-column>
<el-table-column label="已被使用的数量/已领取数量" width="200">
<template #default="{ row }">
<span v-if="row">{{ row.usedNum }}/{{ row.receivedNum }}</span>
</template>
</el-table-column>
<el-table-column label="获取方式" width="120">
<template #default="{ row }">
<el-tag v-if="row" :type="getTypeTagType(row.getType)">{{ getTypeText(row.getType) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="优惠券类型" width="120">
<template #default="{ row }">
<el-tag v-if="row" :type="couponTypeTagType(row.couponType)">
{{ couponTypeText(row.couponType) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="品类描述" width="120">
<template #default="{ row }">
<el-tag v-if="row" :type="scopeTypeTagType(row.scopeType)">
{{ scopeTypeText(row.scopeType) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="活动时间" width="200">
<template #default="{ row }">
<div v-if="row" class="activity-time" v-html="formatActivityTime(row)"></div>
</template>
</el-table-column>
<el-table-column
v-if="showStatusColumn"
label="状态"
width="100"
align="center"
fixed="right"
>
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
v-if="showActionColumn"
label="操作"
width="250"
align="center"
fixed="right"
>
<template #default="{ row }">
<template v-if="row">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
class="link-text"
@click="see(row)"
>
编辑
</a>
<a v-else class="link-text" @click="see(row, 'onlyView')">查看</a>
<span
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
class="op-split"
>
|
</span>
<a
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
class="link-text"
@click="close(row)"
>
关闭
</a>
<span class="op-split">|</span>
<a class="link-text" @click="receivePage(row.id)">领取记录</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import {
getPlatformCouponList,
updatePlatformCouponStatus,
deletePlatformCoupon,
} from "@/api/promotion";
import {
promotionsStatusRender,
promotionsScopeTypeRender,
promotionsCouponActivityTimeRender,
} from "@/utils/promotions";
import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
export default {
name: "coupon",
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
getType: "", // 默认排序方式
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 52,
align: "center",
/* 不使用 fixed：左侧固定列与主体表格分开渲染，叠加全局 .ivu-table table{width:100%} 易在接缝处留白；勾选列无需横向钉住 */
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 140,
width: 180,
tooltip: true,
},
{
title: "面额/折扣",
key: "price",
width: 150,
render: (h, params) => {
if (params.row.price) {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
} else {
return h("div", params.row.couponDiscount + "折");
}
},
},
{
title: "已领取数量/总数量",
key: "publishNum",
width: 180,
render: (h, params) => {
return h(
"div",
params.row.receivedNum +
"/" +
(params.row.publishNum === 0 ? "不限制" : params.row.publishNum)
);
},
},
{
title: "已被使用的数量/已领取数量",
key: "publishNum",
width: 100,
render: (h, params) => {
return h("div", params.row.usedNum + "/" + params.row.receivedNum);
},
},
{
title: "获取方式",
width: 120,
key: "getType",
render: (h, params) => {
if (params.row.getType === "FREE") {
return h("Tag", { props: { color: "red" } }, "免费获取");
} else if (params.row.getType === "ACTIVITY") {
return h("Tag", { props: { color: "volcano" } }, "活动获取");
} else if (params.row.getType === "INSIDE") {
return h("Tag", { props: { color: "lime" } }, "内购");
} else if (params.row.getType === "IGAME") {
return h("Tag", { props: { color: "lime" } }, "游戏人生");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "优惠券类型",
key: "couponType",
width: 150,
render: (h, params) => {
let text = "";
if (params.row.couponType === "DISCOUNT") {
return h("Tag", { props: { color: "blue" } }, "打折");
} else if (params.row.couponType === "PRICE") {
return h("Tag", { props: { color: "geekblue" } }, "减免现金");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "品类描述",
key: "scopeType",
width: 120,
render: (h, params) => {
return promotionsScopeTypeRender(h, params);
},
},
{
title: "活动时间",
width: 200,
render: promotionsCouponActivityTimeRender,
},
{
title: "状态",
width: 100,
key: "promotionStatus",
align: "center",
fixed: "right",
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
width: 250,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
refreshTable: true, // 修改选中状态后刷新表格
selectDate: [], //选中的信息
};
},
props: {
//优惠券类型 查询参数
getType: {
type: String,
default: "",
@@ -276,52 +200,129 @@ export default {
type: String,
default: "",
},
//已选择优惠券
selectedList: {
type: Array,
default: () => {
return [];
},
default: () => [],
},
},
data() {
return {
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "create_time",
order: "desc",
getType: "",
},
selectList: [],
selectCount: 0,
data: [],
total: 0,
selectDate: [],
showActionColumn: true,
showStatusColumn: true,
};
},
watch: {
$route(to, from) {
$route(to) {
if (to.fullPath == "/promotions/manager-coupon") {
this.init();
}
},
// 选中优惠券 父级传值
selectedList: {
handler(val) {
// 判断是否是父级回调给自己已选择优惠券
if (val.length) {
this.selectList = val;
this.data.forEach((item) => {
item._checked = false;
if (this.selectList.length) {
this.selectList.forEach((child) => {
if (item.id == child.id) {
item._checked = true;
}
});
}
});
} else {
this.data.forEach((item) => {
item._checked = false;
});
}
this.refreshTable = false;
this.$nextTick(() => {
this.refreshTable = true;
this.syncTableSelection(val);
});
},
deep: true,
},
},
methods: {
formatActivityTime(row) {
return formatPromotionCouponValidityHtml(row);
},
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
scopeTypeText(type) {
const map = {
ALL: "全品类",
PORTION_GOODS_CATEGORY: "商品分类",
PORTION_SHOP_CATEGORY: "店铺分类",
PORTION_GOODS: "指定商品",
};
return map[type] || "未知";
},
scopeTypeTagType(type) {
const map = {
ALL: "info",
PORTION_GOODS_CATEGORY: "warning",
PORTION_SHOP_CATEGORY: "warning",
PORTION_GOODS: "primary",
};
return map[type] || "danger";
},
getTypeText(type) {
const map = {
FREE: "免费获取",
ACTIVITY: "活动获取",
INSIDE: "内购",
IGAME: "游戏人生",
};
return map[type] || "未知";
},
getTypeTagType(type) {
const map = {
FREE: "danger",
ACTIVITY: "warning",
INSIDE: "success",
IGAME: "success",
};
return map[type] || "";
},
couponTypeText(type) {
const map = {
DISCOUNT: "打折",
PRICE: "减免现金",
};
return map[type] || "未知";
},
couponTypeTagType(type) {
const map = {
DISCOUNT: "primary",
PRICE: "info",
};
return map[type] || "";
},
syncTableSelection(selected) {
const table = this.$refs.table;
if (!table) return;
table.clearSelection();
if (!selected || !selected.length) return;
this.data.forEach((row) => {
if (selected.some((item) => item.id === row.id)) {
table.toggleRowSelection(row, true);
}
});
},
check() {
// 选中的优惠券
this.$emit("selected", this.selectList);
},
receivePage(id) {
@@ -331,84 +332,69 @@ export default {
this.$router.push({ name: "coupon-receive" });
}
},
// 初始化数据
init() {
this.getDataList();
},
add() {
// 跳转添加页面
this.$router.push({ name: "add-platform-coupon" });
},
info(v) {
// 查看优惠券
this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
},
changePage(v) {
// 改变页码
this.searchForm.pageNumber = v;
this.getDataList();
},
changePageSize(v) {
// 改变页数
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
// 搜索
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
clearSelectAll() {
// 清除选中状态
this.$refs.table.selectAll(false);
this.$refs.table?.clearSelection();
},
/**
* 选择优惠券
*/
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
if (this.getType === "ACTIVITY") this.check();
},
getDataList() {
// 获取数据
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
getPlatformCouponList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
getPlatformCouponList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
this.$nextTick(() => {
if (this.selectedList.length) {
this.syncTableSelection(this.selectedList);
}
});
}
})
.finally(() => {
this.loading = false;
});
},
see(v, only) {
// 跳转编辑页面
let data;
only ? (data = { onlyView: true, id: v.id }) : (data = { id: v.id });
const data = only ? { onlyView: true, id: v.id } : { id: v.id };
this.$router.push({ name: "edit-platform-coupon", query: data });
},
close(v) {
// 下架优惠券
this.$Modal.confirm({
title: "确认关闭",
// 记得确认修改此处
content: "确认要关闭此优惠券么?",
loading: true,
onOk: () => {
// 删除
updatePlatformCouponStatus({
couponIds: v.id,
effectiveDays: 0,
@@ -421,20 +407,17 @@ export default {
}
})
.catch(() => {
this.$Modal;
this.$Modal.remove();
});
},
});
},
remove(v) {
// 下架优惠券
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "确认要删除此优惠券么?",
loading: true,
onOk: () => {
// 删除
deletePlatformCoupon(v.id)
.then((res) => {
this.$Modal.remove();
@@ -444,13 +427,12 @@ export default {
}
})
.catch(() => {
this.$Modal;
this.$Modal.remove();
});
},
});
},
delAll() {
// 批量下架
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要下架的优惠券");
return;
@@ -460,16 +442,11 @@ export default {
content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
let params = {
const ids = this.selectList.map((e) => e.id);
updatePlatformCouponStatus({
couponIds: ids.toString(),
promotionStatus: "CLOSE",
};
// 批量删除
updatePlatformCouponStatus(params).then((res) => {
}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("下架成功");
@@ -482,16 +459,40 @@ export default {
},
},
mounted() {
//如果作为组件方式，传入了类型值，则搜索参数附加类型
if (this.getType) {
this.searchForm.getType = this.getType;
this.columns.pop();
this.showActionColumn = false;
}
if (this.promotionStatus) {
this.searchForm.promotionStatus = this.promotionStatus;
this.columns.pop();
this.showStatusColumn = false;
}
this.init();
},
};
</script>
<style scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
.activity-time {
line-height: 1.5;
word-break: break-all;
}
.mb_10 {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
.padding-row {
margin-bottom: 10px;
}
</style>

257
manager/src/views/promotions/full-discount/full-discount-detail.vue
View File

@@ -1,34 +1,34 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120">
<el-card>
<el-form ref="form" :model="form" label-width="120px">
<div class="base-info-item">
<h4>基本信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input
type="text"
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="form.promotionName"
disabled
placeholder="活动名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动时间" prop="rangeTime">
<DatePicker
</el-form-item>
<el-form-item label="活动时间" prop="rangeTime">
<el-date-picker
type="datetimerange"
v-model="form.rangeTime"
disabled
format="yyyy-MM-dd HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择"
:options="options"
:disabled-date="options.disabledDate"
style="width: 320px"
>
</DatePicker>
</FormItem>
<FormItem label="活动描述" prop="description">
<Input
/>
</el-form-item>
<el-form-item label="活动描述" prop="description">
<el-input
v-model="form.description"
disabled
type="textarea"
@@ -36,14 +36,13 @@
clearable
style="width: 260px"
/>
</FormItem>
</el-form-item>
</div>
<h4>优惠设置</h4>
<div class="form-item-view">
<FormItem label="优惠门槛" prop="fullMoney">
<Input
type="text"
<el-form-item label="优惠门槛" prop="fullMoney">
<el-input
v-model="form.fullMoney"
disabled
placeholder="优惠门槛"
@@ -51,153 +50,156 @@
style="width: 260px"
/>
<span class="describe">消费达到当前金额可以参与优惠</span>
</FormItem>
<FormItem label="赠送优惠券">
<RadioGroup
type="button"
button-style="solid"
v-model="form.discountType"
>
<Radio label="fullMinusFlag" disabled>减现金</Radio>
<Radio label="fullRateFlag" disabled>打折</Radio>
</RadioGroup>
</FormItem>
<FormItem
</el-form-item>
<el-form-item label="赠送优惠券">
<el-radio-group v-model="form.discountType">
<el-radio-button value="fullMinusFlag" disabled>减现金</el-radio-button>
<el-radio-button value="fullRateFlag" disabled>打折</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="form.discountType == 'fullMinusFlag'"
label="优惠金额"
prop="fullMinus"
>
<Input
type="text"
<el-input
disabled
v-model="form.fullMinus"
placeholder="优惠金额"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem
</el-form-item>
<el-form-item
v-if="form.discountType == 'fullRateFlag'"
label="优惠折扣"
prop="fullRate"
>
<InputNumber
<el-input-number
placeholder="优惠折扣"
:max="9.9"
:min="0.1"
:step="0.1"
precision="1"
:precision="1"
v-model="form.fullRate"
style="width: 260px"/>
style="width: 260px"
/>
<span class="describe">优惠折扣为0-10之间数字，可有一位小数</span>
</FormItem>
<FormItem label="额外赠送">
<Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
>&nbsp;
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
>&nbsp;
<Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>&nbsp;
<Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
</FormItem>
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<Select
</el-form-item>
<el-form-item label="额外赠送">
<el-checkbox v-model="form.freeFreightFlag" disabled>免邮费</el-checkbox>
<el-checkbox v-model="form.couponFlag" disabled>送优惠券</el-checkbox>
<el-checkbox v-model="form.giftFlag" disabled>送赠品</el-checkbox>
<el-checkbox v-model="form.pointFlag" disabled>送积分</el-checkbox>
</el-form-item>
<el-form-item v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<el-select
v-model="form.couponId"
:disabled="form.promotionStatus != 'NEW'"
filterable
remote
:remote-method="getCouponList"
placeholder="输入优惠券名称搜索"
:loading="couponLoading"
style="width: 280px"
>
<Option
<el-option
v-for="item in couponList"
:value="item.id"
:key="item.id"
>{{ item.couponName }}</Option
>
</Select>
</FormItem>
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
<Select
:label="item.couponName"
/>
</el-select>
</el-form-item>
<el-form-item v-if="form.giftFlag" label="赠品" prop="giftId">
<el-select
v-model="form.giftId"
filterable
remote
:remote-method="getGiftList"
placeholder="输入赠品名称搜索"
disabled
:loading="giftLoading"
style="width: 260px"
>
<Option
<el-option
v-for="item in giftList"
:value="item.id"
:key="item.id"
>{{ item.goodsName }}</Option
>
</Select>
</FormItem>
<FormItem v-if="form.pointFlag" label="赠积分" prop="point">
<Input
:label="item.goodsName"
/>
</el-select>
</el-form-item>
<el-form-item v-if="form.pointFlag" label="赠积分" prop="point">
<el-input
v-model="form.point"
type="number"
disabled
style="width: 260px"
/>
</FormItem>
<FormItem label="使用范围" prop="scopeType">
<RadioGroup
type="button"
button-style="solid"
v-model="form.scopeType"
>
<Radio label="ALL" disabled>全品类</Radio>
<Radio label="PORTION_GOODS" disabled>指定商品</Radio>
</RadioGroup>
</FormItem>
</el-form-item>
<el-form-item label="使用范围" prop="scopeType">
<el-radio-group v-model="form.scopeType">
<el-radio-button value="ALL" disabled>全品类</el-radio-button>
<el-radio-button value="PORTION_GOODS" disabled>指定商品</el-radio-button>
</el-radio-group>
</el-form-item>
<FormItem
<el-form-item
style="width: 100%"
v-if="form.scopeType == 'PORTION_GOODS'"
>
<Table border :columns="columns" :data="form.promotionGoodsList">
<template slot-scope="{ row }" slot="goodsName">
<div>
<a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
row.goodsName
}}</a>
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
<div slot="content">
<el-table border :data="form.promotionGoodsList" style="width: 100%">
<el-table-column type="selection" width="60" align="center" />
<el-table-column label="商品名称" min-width="120" show-overflow-tooltip>
<template #default="{ row }">
<template v-if="row">
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
row.goodsName
}}</a>
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
<template #reference>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</template>
<vue-qr
:text="wapLinkTo(row.goodsId, row.skuId)"
:margin="0"
colorDark="#000"
colorLight="#fff"
color-dark="#000"
color-light="#fff"
:size="150"
></vue-qr>
</div>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</Poptip>
</div>
</template>
</Table>
</FormItem>
/>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column label="商品价格" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存" width="90">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
</el-table>
</el-form-item>
<div>
<Button
@click="$router.push({ name: 'promotions/full-discount' })"
>返回</Button
>
<el-button @click="$router.push({ name: 'promotions/full-discount' })">返回</el-button>
</div>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
</div>
</template>
@@ -213,40 +215,15 @@ export default {
data() {
return {
form: {
// 表单
discountType: "fullMinusFlag",
scopeType: "ALL",
promotionGoodsList: [],
},
id: this.$route.query.id, // 活动id
couponList: [], // 优惠券列表
giftList: [], // 赠品列表
giftLoading: false, // 赠品加载状态
columns: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "商品名称",
slot: "goodsName",
minWidth: 120,
},
{
title: "商品价格",
key: "price",
minWidth: 40,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
},
},
{
title: "库存",
key: "quantity",
minWidth: 40,
},
],
id: this.$route.query.id,
couponList: [],
giftList: [],
giftLoading: false,
couponLoading: false,
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
@@ -263,7 +240,6 @@ export default {
},
methods: {
getDetail() {
// 获取活动详情
getFullDiscountById(this.id).then((res) => {
let data = res.result;
if (!data.scopeType === "ALL") {
@@ -283,7 +259,6 @@ export default {
});
},
getCouponList(query) {
// 优惠券列表
let params = {
pageSize: 20,
pageNumber: 1,
@@ -301,7 +276,6 @@ export default {
});
},
getGiftList(query) {
// 赠品列表
let params = {
pageSize: 20,
pageNumber: 1,
@@ -339,4 +313,9 @@ h4 {
margin-left: 10px;
color: #999;
}
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
</style>

310
manager/src/views/promotions/full-discount/full-discount.vue
View File

@@ -1,189 +1,154 @@
<template>
<div class="full-cut">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="活动名称" prop="promotionName">
<Input
type="text"
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 240px"
>
</DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
class="search-btn"
icon="ios-search"
>搜索</Button
>
</Form>
</Row>
</Card>
<Card>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
sortable="custom"
<div class="search full-cut">
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }}
</template>
<template slot-scope="{ row }" slot="promotionType">
{{ row.fullMinusFlag ? "满减" : "满折" }}
</template>
<template slot-scope="{ row }" slot="hours">
<Tag v-for="item in unixHours(row.hours)" :key="item">{{ item }}</Tag>
</template>
<template slot-scope="{ row }" slot="action">
<div>
<a
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="view(row)"
>查看</a>
<span
v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
style="margin: 0 8px; color: #dcdee2"
>|</span>
<a
v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
:style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
@click="openOrClose(row)"
>关闭</a>
</div>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="活动状态" prop="promotionStatus">
<el-select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<el-option label="未开始" value="NEW" />
<el-option label="已开始/上架" value="START" />
<el-option label="已结束/下架" value="END" />
<el-option label="紧急关闭/作废" value="CLOSE" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<el-table-column prop="promotionName" label="活动名称" min-width="120" show-overflow-tooltip />
<el-table-column prop="startTime" label="开始时间" width="170" />
<el-table-column prop="endTime" label="结束时间" width="170" />
<el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
<el-table-column label="活动类型" min-width="80">
<template #default="{ row }">
<span v-if="row">{{ row.fullMinusFlag ? "满减" : "满折" }}</span>
</template>
</el-table-column>
<el-table-column label="活动状态" min-width="100">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="140" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a class="link-text" @click="view(row)">查看</a>
<template v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'">
<span class="op-split">|</span>
<a class="link-text" @click="openOrClose(row)">关闭</a>
</template>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
data() {
return {
selectDate: [],
total: 0,
loading: false, // 表单加载状态
searchForm: {
// 请求参数
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
columns: [
// 表头
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "开始时间",
key: "startTime",
width: 170,
},
{
title: "结束时间",
key: "endTime",
width: 170,
},
{
title: "店铺名称",
key: "storeName",
minWidth: 60,
},
{
title: "活动类型",
slot: "promotionType",
minWidth: 60,
},
{
title: "活动状态",
key: "promotionStatus",
minWidth: 60,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "操作",
slot: "action",
align: "center",
width: 140,
},
],
data: [], // 列表数据
loading: false,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
data: [],
};
},
methods: {
// 初始化数据
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
},
// 开启或关闭活动
openOrClose(row) {
let name = "开启";
if (row.promotionStatus === 'NEW' ||row.promotionStatus === "START") {
if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
name = "关闭";
this.$Modal.confirm({
title: "提示",
// 记得确认修改此处
content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
loading: true,
onOk: () => {
// 删除
updateFullDiscount(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -195,24 +160,18 @@ export default {
});
}
},
changePage(v) {
// 改变页数
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
},
changePageSize(v) {
// 改变页码
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
// 搜索
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 获取列表数据
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
@@ -225,14 +184,12 @@ export default {
getFullDiscountList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res)
this.data = res.result.records;
this.total = res.result.total;
}
});
},
view(row) {
// 查看
this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
},
},
@@ -241,3 +198,20 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdfe6;
}
.mt_10 {
margin-top: 10px;
}
</style>

101
manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<Card :loading="detailLoading">
<Form ref="form" :model="form" :label-width="130" :rules="onlyView ? {} : formRule">
<el-card v-loading="detailLoading">
<el-form ref="form" :model="form" label-width="130px" :rules="onlyView ? {} : formRule">
<div class="base-info-item">
<h4>{{ pageTitle }}</h4>
<div class="form-item-view gift-card-activity-form">
<FormItem label="礼品卡名称" prop="giftCardName">
<Input
<el-form-item label="礼品卡名称" prop="giftCardName">
<el-input
v-model="form.giftCardName"
type="text"
placeholder="请输入礼品卡名称"
@@ -16,15 +16,15 @@
style="width: 360px"
:disabled="onlyView"
/>
</FormItem>
<FormItem label="礼品卡类型" prop="cardType" class="gift-card-type-form-item">
<RadioGroup v-model="form.cardType" class="gift-card-type-group">
<Radio label="CASH" :disabled="onlyView">现金卡</Radio>
<Radio label="PICKUP" disabled>提货卡</Radio>
</RadioGroup>
</FormItem>
<FormItem label="面值" prop="faceValue">
<Input
</el-form-item>
<el-form-item label="礼品卡类型" prop="cardType" class="gift-card-type-form-item">
<el-radio-group v-model="form.cardType" class="gift-card-type-group">
<el-radio value="CASH" :disabled="onlyView">现金卡</el-radio>
<el-radio value="PICKUP" disabled>提货卡</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="面值" prop="faceValue">
<el-input
v-model="form.faceValue"
type="text"
placeholder="面值"
@@ -32,9 +32,9 @@
style="width: 200px"
:disabled="onlyView"
/>
</FormItem>
<FormItem label="总库存" prop="stockTotal">
<InputNumber
</el-form-item>
<el-form-item label="总库存" prop="stockTotal">
<el-input-number
v-model="form.stockTotal"
:min="1"
:precision="0"
@@ -42,21 +42,21 @@
style="width: 200px"
:disabled="onlyView"
/>
</FormItem>
<FormItem prop="validityType" :label-width="0" class="gift-card-validity-form-item">
</el-form-item>
<el-form-item prop="validityType" :label-width="0" class="gift-card-validity-form-item">
<div class="gift-card-validity-outer">
<div class="gift-card-validity-label-col">
<span v-if="!onlyView" class="gift-card-validity-required">*</span>
<span>有效期</span>
</div>
<div class="gift-card-validity-radios">
<RadioGroup v-model="form.validityType" vertical class="gift-card-validity-group">
<Radio label="LONG_TERM" class="gift-card-validity-row" :disabled="onlyView"
>长期有效</Radio
<el-radio-group v-model="form.validityType" class="gift-card-validity-group">
<el-radio value="LONG_TERM" class="gift-card-validity-row" :disabled="onlyView"
>长期有效</el-radio
>
<Radio label="AFTER_ACTIVATE_MONTHS" class="gift-card-validity-row" :disabled="onlyView">
<el-radio value="AFTER_ACTIVATE_MONTHS" class="gift-card-validity-row" :disabled="onlyView">
<span>自激活后</span>
<InputNumber
<el-input-number
v-model="form.validMonthsAfterActivate"
:min="1"
:max="99"
@@ -66,39 +66,39 @@
class="gift-card-validity-input-gap"
/>
<span>月内有效</span>
</Radio>
<Radio label="FIXED_UNTIL" class="gift-card-validity-row" :disabled="onlyView">
</el-radio>
<el-radio value="FIXED_UNTIL" class="gift-card-validity-row" :disabled="onlyView">
<span>指定有效期至</span>
<DatePicker
<el-date-picker
v-model="form.validEndTime"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间"
clearable
transfer
:disabled="onlyView || form.validityType !== 'FIXED_UNTIL'"
class="gift-card-validity-date-gap"
style="width: 220px"
/>
</Radio>
</RadioGroup>
</el-radio>
</el-radio-group>
</div>
</div>
</FormItem>
</el-form-item>
</div>
<div class="foot-btn">
<Button style="margin-right: 8px" @click="closeCurrentPage">返回</Button>
<Button
<el-button style="margin-right: 8px" @click="closeCurrentPage">返回</el-button>
<el-button
v-if="!onlyView"
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>提交</Button
>提交</el-button
>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
</div>
</template>
@@ -313,26 +313,22 @@ export default {
</script>
<style scoped>
.gift-card-activity-form >>> .ivu-form-item {
.gift-card-activity-form :deep(.el-form-item) {
margin-bottom: 26px;
}
.gift-card-type-form-item >>> .ivu-form-item-label {
.gift-card-type-form-item :deep(.el-form-item__label) {
line-height: 32px;
padding-top: 1px;
}
.gift-card-type-form-item >>> .ivu-form-item-content {
.gift-card-type-form-item :deep(.el-form-item__content) {
display: flex;
align-items: center;
min-height: 32px;
}
.gift-card-type-group >>> .ivu-radio-wrapper {
margin-right: 32px;
line-height: 32px;
display: inline-flex !important;
align-items: center;
vertical-align: middle;
.gift-card-type-group {
gap: 20px;
}
.gift-card-validity-form-item >>> .ivu-form-item-content {
.gift-card-validity-form-item :deep(.el-form-item__content) {
margin-left: 0 !important;
}
.gift-card-validity-outer {
@@ -367,20 +363,15 @@ export default {
padding-top: 0;
padding-bottom: 0;
}
.gift-card-type-group >>> .ivu-radio {
.gift-card-validity-group :deep(.el-radio) {
display: inline-flex;
align-items: center;
line-height: 1;
}
.gift-card-validity-group >>> .ivu-radio {
display: inline-flex;
align-items: center;
line-height: 1;
}
.gift-card-validity-group >>> .ivu-radio-wrapper:first-child {
.gift-card-validity-group :deep(.el-radio:first-child) {
margin-top: 0;
}
.gift-card-validity-group >>> .ivu-radio-wrapper {
.gift-card-validity-group :deep(.el-radio) {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -388,7 +379,7 @@ export default {
line-height: 32px;
min-height: 32px;
}
.gift-card-validity-group >>> .ivu-radio-wrapper:last-child {
.gift-card-validity-group :deep(.el-radio:last-child) {
margin-bottom: 0;
}
.gift-card-validity-input-gap {

419
manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
View File

@@ -1,90 +1,153 @@
<template>
<div class="search">
<Card>
<Form
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
:label-width="80"
label-width="80px"
class="search-form mb_10"
@keyup.enter="handleSearch"
>
<Form-item label="礼品卡名称" prop="giftCardName">
<Input
<el-form-item label="礼品卡名称" prop="giftCardName">
<el-input
v-model="searchForm.giftCardName"
type="text"
placeholder="模糊搜索礼品卡名称"
clearable
style="width: 260px"
/>
</Form-item>
<Button type="primary" icon="ios-search" class="search-btn" @click="handleSearch"
>搜索</Button
>
</Form>
</Card>
<Card>
<Row class="operation padding-row">
<Button type="primary" @click="addActivity">添加礼品卡</Button>
</Row>
<Table :loading="loading" :columns="columns" :data="data" ref="table">
<template slot-scope="{ row }" slot="action">
<template v-if="canEdit(row)">
<a :style="linkStyle" @click.prevent="goEdit(row)">编辑</a>
<span :style="sepStyle">|</span>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<div class="operation padding-row">
<el-button type="primary" @click="addActivity">添加礼品卡</el-button>
</div>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
style="width: 100%"
>
<el-table-column prop="giftCardName" label="礼品卡名称" min-width="100" show-overflow-tooltip />
<el-table-column label="礼品卡类型" width="120">
<template #default="{ row }">
<span v-if="row">{{ cardTypeText(row.cardType) }}</span>
</template>
<a :style="linkStyle" @click.prevent="goView(row)">查看</a>
<template v-if="canBatchCreate(row)">
<span :style="sepStyle">|</span>
<a :style="linkStyle" @click.prevent="openBatchCreate(row)">批量制卡</a>
</el-table-column>
<el-table-column label="面值" width="120" align="right">
<template #default="{ row }">
<span v-if="row">
<span
v-if="row.faceValue != null && row.faceValue !== ''"
:style="{ color: $mainColor }"
>
{{ $filters.unitPrice(row.faceValue, "￥") }}</span>
<span v-else>-</span>
</span>
</template>
<template v-if="canBatchIssue(row)">
<span :style="sepStyle">|</span>
<a :style="linkStyle" @click.prevent="openBatchIssue(row)">批量发卡</a>
</el-table-column>
<el-table-column label="有效期" width="180">
<template #default="{ row }">
<span v-if="row">{{ formatValidity(row) }}</span>
</template>
<span :style="sepStyle">|</span>
<a :style="linkStyle" @click.prevent="goRecords(row)">查看记录</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
</el-table-column>
<el-table-column label="总库存" width="100" align="center">
<template #default="{ row }">
<span v-if="row">{{ fmtInt(row.stockTotal) }}</span>
</template>
</el-table-column>
<el-table-column label="批量制卡数" width="110" align="center">
<template #default="{ row }">
<span v-if="row">{{ fmtInt(row.producedQuantity) }}</span>
</template>
</el-table-column>
<el-table-column label="批量发卡数" width="110" align="center">
<template #default="{ row }">
<span v-if="row">{{ fmtInt(row.issuedCardQuantity) }}</span>
</template>
</el-table-column>
<el-table-column label="剩余库存" width="100" align="center">
<template #default="{ row }">
<span v-if="row">{{ fmtInt(row.remainingStock) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="isFixedValidityExpired(row)" type="danger">已过期</el-tag>
<el-tag v-else type="success">正常</el-tag>
</template>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="170" />
<el-table-column label="操作" align="right" width="380" fixed="right">
<template #default="{ row }">
<template v-if="row">
<template v-if="canEdit(row)">
<a class="link-text" @click.prevent="goEdit(row)">编辑</a>
<span class="op-split">|</span>
</template>
<a class="link-text" @click.prevent="goView(row)">查看</a>
<template v-if="canBatchCreate(row)">
<span class="op-split">|</span>
<a class="link-text" @click.prevent="openBatchCreate(row)">批量制卡</a>
</template>
<template v-if="canBatchIssue(row)">
<span class="op-split">|</span>
<a class="link-text" @click.prevent="openBatchIssue(row)">批量发卡</a>
</template>
<span class="op-split">|</span>
<a class="link-text" @click.prevent="goRecords(row)">查看记录</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
@on-change="changePage"
@on-page-size-change="changePageSize"
@current-change="changePage"
@size-change="changePageSize"
/>
</Row>
</Card>
<Modal
</div>
</el-card>
<el-dialog
v-model="batchCreateVisible"
title="批量制卡"
:mask-closable="false"
width="520"
@on-visible-change="onBatchCreateVisible"
width="520px"
:close-on-click-modal="false"
destroy-on-close
@closed="onBatchCreateClosed"
>
<Form ref="batchForm" :model="batchForm" :rules="batchFormRule" :label-width="100">
<FormItem label="礼品卡名称">
<el-form ref="batchForm" :model="batchForm" :rules="batchFormRule" label-width="100px">
<el-form-item label="礼品卡名称">
<span>{{ batchCtx.giftCardName || "-" }}</span>
</FormItem>
<FormItem label="面值">
</el-form-item>
<el-form-item label="面值">
<template v-if="batchCtx.faceValue != null && batchCtx.faceValue !== ''">
<priceColorScheme
:value="batchCtx.faceValue"
:color="$mainColor"
></priceColorScheme>
<span :style="{ color: $mainColor }">
{{ $filters.unitPrice(batchCtx.faceValue, "￥") }}</span>
</template>
<span v-else>-</span>
</FormItem>
<FormItem label="当前库存">
</el-form-item>
<el-form-item label="当前库存">
<span>{{ fmtInt(batchCtx.headroom) }}</span>
</FormItem>
<FormItem label="制卡张数" prop="quantity">
<InputNumber
</el-form-item>
<el-form-item label="制卡张数" prop="quantity">
<el-input-number
v-model="batchForm.quantity"
:min="1"
:max="batchQuantityMax"
@@ -92,9 +155,9 @@
placeholder="请输入制卡张数"
style="width: 220px"
/>
</FormItem>
<FormItem label="本批备注" prop="batchRemark">
<Input
</el-form-item>
<el-form-item label="本批备注" prop="batchRemark">
<el-input
v-model="batchForm.batchRemark"
type="textarea"
:rows="2"
@@ -103,61 +166,62 @@
placeholder="选填，最多64字"
style="width: 100%"
/>
</FormItem>
</Form>
<div slot="footer">
<Button @click="batchCreateVisible = false">取消</Button>
<Button type="primary" :loading="batchCreateSubmitting" @click="submitBatchCreate"
>确定</Button
>
</div>
</Modal>
<Modal
</el-form-item>
</el-form>
<template #footer>
<el-button @click="batchCreateVisible = false">取消</el-button>
<el-button type="primary" :loading="batchCreateSubmitting" @click="submitBatchCreate">
确定
</el-button>
</template>
</el-dialog>
<el-dialog
v-model="batchIssueVisible"
title="批量发卡"
:mask-closable="false"
width="560"
@on-visible-change="onBatchIssueVisible"
width="560px"
:close-on-click-modal="false"
destroy-on-close
@closed="onBatchIssueClosed"
>
<div class="gcc-batch-issue-body">
<Form :label-width="100">
<FormItem label="礼品卡名称">
<el-form label-width="100px">
<el-form-item label="礼品卡名称">
<span>{{ issueCtx.giftCardName || "-" }}</span>
</FormItem>
</Form>
<Alert type="info" show-icon class="mb_10">
</el-form-item>
</el-form>
<el-alert type="info" show-icon class="mb_10" :closable="false">
请先下载模板，按列填写<strong>手机号</strong>、<strong>发卡数量</strong>后上传；发卡不区分制卡批次。
</Alert>
</el-alert>
<div class="gcc-batch-issue-actions">
<Button
<el-button
type="primary"
ghost
icon="md-download"
plain
:loading="issueTemplateDownloading"
@click="downloadIssueTemplate"
>
下载 Excel 模板
</Button>
</el-button>
</div>
<div class="gcc-batch-issue-upload">
<span class="gcc-batch-issue-upload-label">上传已填写的 Excel</span>
<Upload
<el-upload
:before-upload="onIssueImportBeforeUpload"
accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:show-upload-list="false"
:show-file-list="false"
>
<Button type="dashed" icon="ios-cloud-upload-outline">选择文件</Button>
</Upload>
<el-button type="default">选择文件</el-button>
</el-upload>
<span v-if="issueFileName" class="gcc-batch-issue-filename">{{ issueFileName }}</span>
</div>
</div>
<div slot="footer">
<Button @click="batchIssueVisible = false">取消</Button>
<Button type="primary" :loading="issueImportSubmitting" @click="submitIssueImport"
>开始发卡</Button
>
</div>
</Modal>
<template #footer>
<el-button @click="batchIssueVisible = false">取消</el-button>
<el-button type="primary" :loading="issueImportSubmitting" @click="submitIssueImport">
开始发卡
</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -181,129 +245,8 @@ export default {
order: "desc",
giftCardName: "",
},
columns: [
{
title: "礼品卡名称",
key: "giftCardName",
minWidth: 100,
tooltip: true,
},
{
title: "礼品卡类型",
key: "cardType",
width: 200,
render: (h, params) => {
const t = params.row.cardType;
const map = { CASH: "现金卡", PICKUP: "提货卡" };
return h("span", map[t] || t || "-");
},
},
{
title: "面值",
key: "faceValue",
width: 200,
align: "right",
render: (h, params) => {
const v = params.row.faceValue;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("priceColorScheme", {
props: { value: v, color: this.$mainColor },
});
},
},
{
title: "有效期",
key: "validityType",
width: 200,
render: (h, params) => {
return h("span", this.formatValidity(params.row));
},
},
{
title: "总库存",
key: "stockTotal",
width: 200,
align: "center",
render: (h, params) =>
h("span", this.fmtInt(params.row.stockTotal)),
},
{
title: "批量制卡数",
key: "producedQuantity",
width: 200,
align: "center",
render: (h, params) =>
h("span", this.fmtInt(params.row.producedQuantity)),
},
{
title: "批量发卡数",
key: "issuedCardQuantity",
width: 200,
align: "center",
render: (h, params) =>
h("span", this.fmtInt(params.row.issuedCardQuantity)),
},
{
title: "剩余库存",
key: "remainingStock",
width: 200,
align: "center",
render: (h, params) =>
h("span", this.fmtInt(params.row.remainingStock)),
},
{
title: "状态",
key: "status",
width: 200,
render: (h, params) => {
if (this.isFixedValidityExpired(params.row)) {
return h("div", [
h(
"Tag",
{
props: { color: "red" },
},
"已过期"
),
]);
}
return h("div", [
h(
"Tag",
{
props: { color: "green" },
},
"正常"
),
]);
},
},
{
title: "创建时间",
key: "createTime",
width: 200,
},
{
title: "操作",
slot: "action",
align: "right",
width: 380,
},
],
data: [],
total: 0,
linkStyle: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
disabledLinkStyle: {
color: "#c5c8ce",
cursor: "not-allowed",
},
sepStyle: { margin: "0 8px", color: "#dcdee2" },
batchCreateVisible: false,
batchCreateSubmitting: false,
batchCtx: {
@@ -349,6 +292,10 @@ export default {
this.getDataList();
},
methods: {
cardTypeText(type) {
const map = { CASH: "现金卡", PICKUP: "提货卡" };
return map[type] || type || "-";
},
validateBatchQuantity(rule, value, callback) {
if (value === null || value === undefined || value === "") {
callback(new Error("请填写制卡张数"));
@@ -376,7 +323,6 @@ export default {
}
return n;
},
/** 固定到期类有效期且到期时间早于当前时间，列表状态展示为「已过期」 */
isFixedValidityExpired(row) {
if (!row || !row.validityType || row.validEndTime == null || row.validEndTime === "") {
return false;
@@ -481,14 +427,12 @@ export default {
canEdit(row) {
return this.hasRemainingStock(row);
},
/** 本次批量制卡允许的最大张数：以剩余库存为准 */
getBatchCreateHeadroom(row) {
return this.getRemainingStock(row);
},
canBatchCreate(row) {
return this.hasRemainingStock(row);
},
/** 可发卡余量：与制卡独立，以剩余库存为准 */
getBatchIssuePool(row) {
return this.getRemainingStock(row);
},
@@ -510,11 +454,9 @@ export default {
this.issueFileName = "";
this.batchIssueVisible = true;
},
onBatchIssueVisible(open) {
if (!open) {
this.issueFile = null;
this.issueFileName = "";
}
onBatchIssueClosed() {
this.issueFile = null;
this.issueFileName = "";
},
downloadIssueTemplate() {
this.issueTemplateDownloading = true;
@@ -616,10 +558,8 @@ export default {
this.batchForm.batchRemark = "";
this.batchCreateVisible = true;
},
onBatchCreateVisible(open) {
if (!open && this.$refs.batchForm && typeof this.$refs.batchForm.resetFields === "function") {
this.$refs.batchForm.resetFields();
}
onBatchCreateClosed() {
this.$refs.batchForm?.resetFields();
},
submitBatchCreate() {
if (!this.$refs.batchForm) {
@@ -652,13 +592,11 @@ export default {
});
});
},
changePage(v) {
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
},
changePageSize(v) {
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
@@ -705,8 +643,17 @@ export default {
font-size: 14px;
}
.gcc-batch-issue-filename {
color: #2d8cf0;
color: #409eff;
font-size: 13px;
word-break: break-all;
}
.mb_10 {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
.padding-row {
margin-bottom: 10px;
}
</style>

277
manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
View File

@@ -1,21 +1,20 @@
<template>
<div class="search gcc-batch-credentials">
<Card>
<el-card>
<div class="gcc-records-toolbar">
<Button type="primary" class="gcc-records-back" @click="closePage">
返回
</Button>
<el-button type="primary" class="gcc-records-back" @click="closePage">返回</el-button>
</div>
<div v-if="giftCardName" class="gcc-records-meta mb_10">
<strong>礼品卡：</strong>{{ giftCardName }}
</div>
<div class="gcc-records-meta mb_10">
<strong>{{ batchTypeLabel }}：</strong>{{ batchIdDisplay || "—" }}
<span v-if="batchRemark" style="margin-left: 12px"><strong>本批备注：</strong>{{ batchRemark }}</span>
<span v-if="batchRemark" style="margin-left: 12px">
<strong>本批备注：</strong>{{ batchRemark }}</span>
</div>
<Alert v-if="!activityId || !hasBatchId" type="warning">
<el-alert v-if="!activityId || !hasBatchId" type="warning" show-icon :closable="false">
缺少活动或批次参数，请从{{ batchSourceLabel }}进入。
</Alert>
</el-alert>
<template v-else>
<div class="gcc-status-tabs">
<span
@@ -23,78 +22,141 @@
:key="t.key"
:class="{ active: lifecycleTab === t.key }"
@click="onLifecycleTab(t.key)"
>{{ t.label }}</span
>
{{ t.label }}</span>
</div>
<Form ref="searchForm" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
<FormItem label="卡号" prop="cardNo" :label-width="60">
<Input v-model="searchForm.cardNo" placeholder="请输入卡号" clearable style="width: 160px" />
</FormItem>
<FormItem :label-width="0" class="gcc-combo-item">
<el-form ref="searchForm" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
<el-form-item label="卡号" prop="cardNo" label-width="60px">
<el-input
v-model="searchForm.cardNo"
placeholder="请输入卡号"
clearable
style="width: 160px"
/>
</el-form-item>
<el-form-item label-width="0" class="gcc-combo-item">
<span class="gcc-combo-label">兑换会员</span>
<Select v-model="searchForm.redeemMemberField" style="width: 130px">
<Option value="nickName">兑换会员昵称</Option>
<Option value="mobile">兑换会员手机</Option>
</Select>
<Input
<el-select v-model="searchForm.redeemMemberField" style="width: 130px">
<el-option label="兑换会员昵称" value="nickName" />
<el-option label="兑换会员手机" value="mobile" />
</el-select>
<el-input
v-model="searchForm.redeemMemberKeyword"
placeholder="请输入"
clearable
style="width: 140px; margin-left: 4px"
/>
</FormItem>
<FormItem label="兑换时间" prop="redeemDateRange" :label-width="72">
<DatePicker
</el-form-item>
<el-form-item label="兑换时间" prop="redeemDateRange" label-width="72px">
<el-date-picker
v-model="redeemDateRange"
type="daterange"
clearable
format="yyyy-MM-dd"
placeholder="开始日期"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
/>
</FormItem>
<FormItem :label-width="0" class="gcc-combo-item">
</el-form-item>
<el-form-item label-width="0" class="gcc-combo-item">
<span class="gcc-combo-label">激活会员</span>
<Select v-model="searchForm.activateMemberField" style="width: 130px">
<Option value="nickName">激活会员昵称</Option>
<Option value="mobile">激活会员手机</Option>
</Select>
<Input
<el-select v-model="searchForm.activateMemberField" style="width: 130px">
<el-option label="激活会员昵称" value="nickName" />
<el-option label="激活会员手机" value="mobile" />
</el-select>
<el-input
v-model="searchForm.activateMemberKeyword"
placeholder="请输入"
clearable
style="width: 140px; margin-left: 4px"
/>
</FormItem>
<FormItem label="激活时间" prop="activateDateRange" :label-width="72">
<DatePicker
</el-form-item>
<el-form-item label="激活时间" prop="activateDateRange" label-width="72px">
<el-date-picker
v-model="activateDateRange"
type="daterange"
clearable
format="yyyy-MM-dd"
placeholder="开始日期"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
/>
</FormItem>
<Button type="primary" icon="ios-search" class="search-btn" @click="handleSearch">搜索</Button>
</Form>
<Table :loading="loading" :columns="tableColumns" :data="data" />
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
</el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form>
<el-table v-if="!isIssueBatchMode" v-loading="loading" :data="data" style="width: 100%">
<el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
<el-table-column prop="cardSecret" label="卡密" min-width="120" show-overflow-tooltip />
<el-table-column label="面额" prop="faceValue" width="90" align="right">
<template #default="{ row }">
<span v-if="row">{{ formatPrice(row.faceValue) }}</span>
</template>
</el-table-column>
<el-table-column label="余额" prop="balance" width="90" align="right">
<template #default="{ row }">
<span v-if="row">{{ formatPrice(row.balance) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" prop="status" width="90" align="center">
<template #default="{ row }">
<span v-if="row">{{ formatStatus(row.status) }}</span>
</template>
</el-table-column>
<el-table-column prop="memberMobile" label="会员手机" width="120" show-overflow-tooltip />
<el-table-column prop="memberNickName" label="会员昵称" min-width="100" show-overflow-tooltip />
<el-table-column prop="bindTime" label="绑定时间" width="165" />
<el-table-column prop="expireTime" label="到期时间" width="165" />
<el-table-column prop="createTime" label="创建时间" width="165" />
</el-table>
<el-table v-else v-loading="loading" :data="data" style="width: 100%">
<el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
<el-table-column label="发卡批次ID" min-width="160" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row">{{ formatIssueBatchId(row) }}</span>
</template>
</el-table-column>
<el-table-column label="发卡会员" min-width="150">
<template #default="{ row }">
<span v-if="row">{{ formatIssueMember(row) }}</span>
</template>
</el-table-column>
<el-table-column label="发卡状态" width="110" align="center">
<template #default="{ row }">
<span v-if="row">{{ formatIssueStatus(row.issueStatus) }}</span>
</template>
</el-table-column>
<el-table-column label="激活会员" min-width="150">
<template #default="{ row }">
<span v-if="row">{{ formatActivationMember(row) }}</span>
</template>
</el-table-column>
<el-table-column label="激活时间" width="165">
<template #default="{ row }">
<span v-if="row">{{ formatActivationTime(row) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="90" align="center">
<template #default="{ row }">
<span v-if="row">{{ formatStatus(row.status) }}</span>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
@on-change="changePage"
@on-page-size-change="changePageSize"
@current-change="changePage"
@size-change="changePageSize"
/>
</Row>
</div>
</template>
</Card>
</el-card>
</div>
</template>
@@ -173,91 +235,6 @@ export default {
batchIdDisplay() {
return this.isIssueBatchMode ? this.issueBatchId : this.createBatchId;
},
createBatchColumns() {
return [
{ title: "卡号", key: "cardNo", minWidth: 140, tooltip: true },
{ title: "卡密", key: "cardSecret", minWidth: 120, tooltip: true },
{ title: "面额", key: "faceValue", width: 90, align: "right" },
{ title: "余额", key: "balance", width: 90, align: "right" },
{
title: "状态",
key: "status",
width: 90,
align: "center",
render: (h, params) => {
const s = params.row.status;
return h("span", STATUS_LABEL[s] || s || "—");
},
},
{ title: "会员手机", key: "memberMobile", width: 120, tooltip: true },
{ title: "会员昵称", key: "memberNickName", minWidth: 100, tooltip: true },
{ title: "绑定时间", key: "bindTime", width: 165 },
{ title: "到期时间", key: "expireTime", width: 165 },
{ title: "创建时间", key: "createTime", width: 165 },
];
},
issueBatchColumns() {
return [
{ title: "卡号", key: "cardNo", minWidth: 140, tooltip: true },
{
title: "发卡批次ID",
key: "issueBatchId",
minWidth: 160,
tooltip: true,
render: (h, params) => {
const id = params.row.issueBatchId ?? this.issueBatchId;
return h("span", id != null && id !== "" ? String(id) : "—");
},
},
{
title: "发卡会员",
key: "issueMember",
minWidth: 150,
render: (h, params) => h("span", this.formatIssueMember(params.row)),
},
{
title: "发卡状态",
key: "issueStatus",
width: 110,
align: "center",
render: (h, params) => {
const s = params.row.issueStatus;
return h("span", ISSUE_STATUS_LABEL[s] || s || "—");
},
},
{
title: "激活会员",
key: "activationMember",
minWidth: 150,
render: (h, params) => h("span", this.formatActivationMember(params.row)),
},
{
title: "激活时间",
key: "activationTime",
width: 165,
render: (h, params) => {
const t =
params.row.activationTime ||
params.row.activateTime ||
params.row.bindTime;
return h("span", t != null && t !== "" ? String(t) : "—");
},
},
{
title: "状态",
key: "status",
width: 90,
align: "center",
render: (h, params) => {
const s = params.row.status;
return h("span", STATUS_LABEL[s] || s || "—");
},
},
];
},
tableColumns() {
return this.isIssueBatchMode ? this.issueBatchColumns : this.createBatchColumns;
},
},
mounted() {
this.initFromRoute();
@@ -277,6 +254,26 @@ export default {
},
},
methods: {
formatPrice(value) {
if (value === null || value === undefined || value === "") {
return "—";
}
return this.$filters.unitPrice(value, "￥");
},
formatStatus(status) {
return STATUS_LABEL[status] || status || "—";
},
formatIssueStatus(status) {
return ISSUE_STATUS_LABEL[status] || status || "—";
},
formatIssueBatchId(row) {
const id = row.issueBatchId ?? this.issueBatchId;
return id != null && id !== "" ? String(id) : "—";
},
formatActivationTime(row) {
const t = row.activationTime || row.activateTime || row.bindTime;
return t != null && t !== "" ? String(t) : "—";
},
onRouteQueryChange() {
this.initFromRoute();
if (this.activityId && this.hasBatchId) {
@@ -382,12 +379,10 @@ export default {
} else {
params.exchangeMemberNickName = kw;
}
} else if (field === "mobile") {
params.activationMemberMobile = kw;
} else {
if (field === "mobile") {
params.activationMemberMobile = kw;
} else {
params.activationMemberNickName = kw;
}
params.activationMemberNickName = kw;
}
},
appendDateRange(params, kind, range) {

836
manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
View File

@@ -1,10 +1,8 @@
<template>
<div class="search">
<Card>
<el-card>
<div class="gcc-records-toolbar">
<Button type="primary" class="gcc-records-back" @click="closePage">
返回
</Button>
<el-button type="primary" class="gcc-records-back" @click="closePage">返回</el-button>
</div>
<div v-if="giftCardName" class="gcc-records-meta mb_10">
<strong>礼品卡：</strong>{{ giftCardName }}
@@ -12,242 +10,343 @@
<div v-else-if="activityId" class="gcc-records-meta mb_10">
<strong>活动ID：</strong>{{ activityId }}
</div>
<Alert v-if="!activityId" type="warning">缺少活动参数，请从礼品卡列表进入。</Alert>
<Tabs v-else v-model="activeTab" @on-click="onTabClick">
<TabPane label="制卡记录" name="createBatch">
<Card :bordered="false" dis-hover>
<Form
<el-alert v-if="!activityId" type="warning" show-icon :closable="false">
缺少活动参数，请从礼品卡列表进入。
</el-alert>
<el-tabs v-else v-model="activeTab" @tab-click="onTabClick">
<el-tab-pane label="制卡记录" name="createBatch">
<el-card shadow="never">
<el-form
ref="createFilterForm"
:model="createSearchForm"
inline
label-position="left"
class="search-form mb_10 gcc-create-batch-search"
:label-width="100"
label-width="100px"
>
<FormItem label="卡号" prop="cardNo">
<Input
v-model="createSearchForm.cardNo"
clearable
style="width: 150px"
/>
</FormItem>
<FormItem label="制卡批次ID" prop="createBatchId">
<Input
v-model="createSearchForm.createBatchId"
clearable
style="width: 170px"
/>
</FormItem>
<FormItem label="卡名称" prop="giftCardName">
<Input
v-model="createSearchForm.giftCardName"
clearable
style="width: 160px"
/>
</FormItem>
<FormItem label="制卡人名称" prop="createUserName">
<Input
v-model="createSearchForm.createUserName"
clearable
style="width: 140px"
/>
</FormItem>
<FormItem label="制卡时间" prop="createTimeRange">
<DatePicker
<el-form-item label="卡号" prop="cardNo">
<el-input v-model="createSearchForm.cardNo" clearable style="width: 150px" />
</el-form-item>
<el-form-item label="制卡批次ID" prop="createBatchId">
<el-input v-model="createSearchForm.createBatchId" clearable style="width: 170px" />
</el-form-item>
<el-form-item label="卡名称" prop="giftCardName">
<el-input v-model="createSearchForm.giftCardName" clearable style="width: 160px" />
</el-form-item>
<el-form-item label="制卡人名称" prop="createUserName">
<el-input v-model="createSearchForm.createUserName" clearable style="width: 140px" />
</el-form-item>
<el-form-item label="制卡时间" prop="createTimeRange">
<el-date-picker
v-model="createSearchForm.createTimeRange"
type="daterange"
clearable
format="yyyy-MM-dd"
value-format="YYYY-MM-DD"
style="width: 220px"
/>
</FormItem>
<FormItem label="过期时间" prop="expireTimeRange">
<DatePicker
</el-form-item>
<el-form-item label="过期时间" prop="expireTimeRange">
<el-date-picker
v-model="createSearchForm.expireTimeRange"
type="daterange"
clearable
format="yyyy-MM-dd"
value-format="YYYY-MM-DD"
style="width: 220px"
/>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" icon="ios-search" class="search-btn" @click="handleCreateSearch">
搜索
</Button>
</FormItem>
</Form>
<Table :loading="createLoading" :columns="createColumns" :data="createData" />
<Row type="flex" justify="end" class="mt_10">
<Page
:current="createSearchForm.pageNumber"
</el-form-item>
<el-form-item label-width="0">
<el-button type="primary" class="search-btn" @click="handleCreateSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-table v-loading="createLoading" :data="createData" style="width: 100%">
<el-table-column label="制卡批次ID" min-width="100" show-overflow-tooltip align="left">
<template #default="{ row }">
<span v-if="row">{{ formatCreateBatchId(row) }}</span>
</template>
</el-table-column>
<el-table-column label="卡号范围" min-width="160" show-overflow-tooltip align="left">
<template #default="{ row }">
<span v-if="row">{{ formatText(row.cardNoRange) }}</span>
</template>
</el-table-column>
<el-table-column label="面值" width="150" align="left">
<template #default="{ row }">
<template v-if="row">
<priceColorScheme
v-if="hasValue(row.faceValue)"
:value="row.faceValue"
:color="$mainColor"
/>
<span v-else>-</span>
</template>
</template>
</el-table-column>
<el-table-column label="礼品卡名称" width="150" show-overflow-tooltip align="left">
<template #default="{ row }">
<span v-if="row">{{ formatGiftCardName(row.giftCardName) }}</span>
</template>
</el-table-column>
<el-table-column prop="createUserName" label="制卡人" width="150" show-overflow-tooltip align="left" />
<el-table-column prop="createTime" label="制卡时间" width="200" align="left" />
<el-table-column label="制卡数量" width="200" align="left">
<template #default="{ row }">
<span v-if="row">{{ formatQuantity(row.quantity) }}</span>
</template>
</el-table-column>
<el-table-column label="过期时间" width="200" align="left">
<template #default="{ row }">
<span v-if="row">{{ formatExpireTime(row.expireTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<a v-if="row" class="link-text" @click="goBatchCredentials(row)">查看
</a>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="createSearchForm.pageNumber"
v-model:page-size="createSearchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="createTotal"
:page-size="createSearchForm.pageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
@on-change="createChangePage"
@on-page-size-change="createChangePageSize"
@current-change="createChangePage"
@size-change="createChangePageSize"
/>
</Row>
</Card>
</TabPane>
<TabPane label="发卡记录" name="issue">
<Card :bordered="false" dis-hover>
<Form
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label="发卡记录" name="issue">
<el-card shadow="never">
<el-form
ref="issueFilterForm"
:model="issueSearchForm"
inline
label-position="left"
class="search-form mb_10 gcc-create-batch-search"
:label-width="100"
label-width="100px"
>
<FormItem label="卡号" prop="cardNo">
<Input
v-model="issueSearchForm.cardNo"
clearable
style="width: 150px"
/>
</FormItem>
<FormItem label="发卡批次ID" prop="issueBatchId">
<Input
v-model="issueSearchForm.issueBatchId"
clearable
style="width: 170px"
/>
</FormItem>
<FormItem label="现金卡名称" prop="giftCardName">
<Input
v-model="issueSearchForm.giftCardName"
clearable
style="width: 160px"
/>
</FormItem>
<FormItem label="发卡人名称" prop="issueUserName">
<Input
v-model="issueSearchForm.issueUserName"
clearable
style="width: 140px"
/>
</FormItem>
<FormItem label="发卡时间" prop="createTimeRange">
<DatePicker
<el-form-item label="卡号" prop="cardNo">
<el-input v-model="issueSearchForm.cardNo" clearable style="width: 150px" />
</el-form-item>
<el-form-item label="发卡批次ID" prop="issueBatchId">
<el-input v-model="issueSearchForm.issueBatchId" clearable style="width: 170px" />
</el-form-item>
<el-form-item label="现金卡名称" prop="giftCardName">
<el-input v-model="issueSearchForm.giftCardName" clearable style="width: 160px" />
</el-form-item>
<el-form-item label="发卡人名称" prop="issueUserName">
<el-input v-model="issueSearchForm.issueUserName" clearable style="width: 140px" />
</el-form-item>
<el-form-item label="发卡时间" prop="createTimeRange">
<el-date-picker
v-model="issueSearchForm.createTimeRange"
type="daterange"
clearable
format="yyyy-MM-dd"
value-format="YYYY-MM-DD"
style="width: 220px"
/>
</FormItem>
<FormItem label="过期时间" prop="expireTimeRange">
<DatePicker
</el-form-item>
<el-form-item label="过期时间" prop="expireTimeRange">
<el-date-picker
v-model="issueSearchForm.expireTimeRange"
type="daterange"
clearable
format="yyyy-MM-dd"
value-format="YYYY-MM-DD"
style="width: 220px"
/>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" icon="ios-search" class="search-btn" @click="handleIssueSearch">
搜索
</Button>
</FormItem>
</Form>
<Table :loading="issueLoading" :columns="issueColumns" :data="issueData" />
<Row type="flex" justify="end" class="mt_10">
<Page
:current="issueSearchForm.pageNumber"
</el-form-item>
<el-form-item label-width="0">
<el-button type="primary" class="search-btn" @click="handleIssueSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-table v-loading="issueLoading" :data="issueData" style="width: 100%">
<el-table-column label="发卡批次ID" min-width="160" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row">{{ formatIssueBatchId(row) }}</span>
</template>
</el-table-column>
<el-table-column label="卡号范围" min-width="160" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row">{{ formatText(row.cardNoRange) }}</span>
</template>
</el-table-column>
<el-table-column label="面值" width="120" align="right">
<template #default="{ row }">
<template v-if="row">
<priceColorScheme
v-if="hasValue(row.faceValue)"
:value="row.faceValue"
:color="$mainColor"
/>
<span v-else>-</span>
</template>
</template>
</el-table-column>
<el-table-column label="卡名称" min-width="120" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row">{{ formatGiftCardName(row.giftCardName) }}</span>
</template>
</el-table-column>
<el-table-column label="发卡人" min-width="100" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row">{{ formatText(row.issueUserName) }}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="发卡时间" width="170" />
<el-table-column label="发卡数量" width="100" align="center">
<template #default="{ row }">
<span v-if="row">{{ formatQuantity(row.totalCards) }}</span>
</template>
</el-table-column>
<el-table-column label="过期时间" width="170">
<template #default="{ row }">
<span v-if="row">{{ formatExpireTime(row.expireTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<a v-if="row" class="link-text" @click="goIssueBatchCredentials(row)">查看
</a>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="issueSearchForm.pageNumber"
v-model:page-size="issueSearchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="issueTotal"
:page-size="issueSearchForm.pageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
@on-change="issueChangePage"
@on-page-size-change="issueChangePageSize"
@current-change="issueChangePage"
@size-change="issueChangePageSize"
/>
</Row>
</Card>
</TabPane>
<TabPane label="使用记录" name="usage">
<Card :bordered="false" dis-hover>
<Form
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label="使用记录" name="usage">
<el-card shadow="never">
<el-form
ref="usageFilterForm"
:model="usageSearchForm"
inline
label-position="left"
class="search-form mb_10 gcc-create-batch-search"
:label-width="90"
label-width="90px"
>
<FormItem label="订单号" prop="orderSn">
<Input
v-model="usageSearchForm.orderSn"
clearable
style="width: 160px"
/>
</FormItem>
<FormItem label="客户名称" prop="memberName">
<Input
v-model="usageSearchForm.memberName"
clearable
style="width: 150px"
/>
</FormItem>
<FormItem label="卡号" prop="cardNo">
<Input
v-model="usageSearchForm.cardNo"
clearable
style="width: 150px"
/>
</FormItem>
<FormItem label="交易时间" prop="transactionTimeRange">
<DatePicker
<el-form-item label="订单号" prop="orderSn">
<el-input v-model="usageSearchForm.orderSn" clearable style="width: 160px" />
</el-form-item>
<el-form-item label="客户名称" prop="memberName">
<el-input v-model="usageSearchForm.memberName" clearable style="width: 150px" />
</el-form-item>
<el-form-item label="卡号" prop="cardNo">
<el-input v-model="usageSearchForm.cardNo" clearable style="width: 150px" />
</el-form-item>
<el-form-item label="交易时间" prop="transactionTimeRange">
<el-date-picker
v-model="usageSearchForm.transactionTimeRange"
type="daterange"
clearable
format="yyyy-MM-dd"
value-format="YYYY-MM-DD"
style="width: 220px"
/>
</FormItem>
<FormItem label="交易类型" prop="transactionType">
<Select
v-model="usageSearchForm.transactionType"
clearable
style="width: 150px"
>
<Option value="ORDER_DEDUCT">订单抵扣</Option>
<Option value="ORDER_REFUND">订单退款</Option>
<Option value="ORDER_CANCEL">订单取消</Option>
</Select>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" icon="ios-search" class="search-btn" @click="handleUsageSearch">
搜索
</Button>
</FormItem>
</Form>
<Table :loading="usageLoading" :columns="usageColumns" :data="usageData" />
<Row type="flex" justify="end" class="mt_10">
<Page
:current="usageSearchForm.pageNumber"
</el-form-item>
<el-form-item label="交易类型" prop="transactionType">
<el-select v-model="usageSearchForm.transactionType" clearable style="width: 150px">
<el-option label="订单抵扣" value="ORDER_DEDUCT" />
<el-option label="订单退款" value="ORDER_REFUND" />
<el-option label="订单取消" value="ORDER_CANCEL" />
</el-select>
</el-form-item>
<el-form-item label-width="0">
<el-button type="primary" class="search-btn" @click="handleUsageSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-table v-loading="usageLoading" :data="usageData" style="width: 100%">
<el-table-column prop="orderSn" label="订单号" min-width="160" show-overflow-tooltip />
<el-table-column label="交易类型" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ formatUsageBizType(row.transactionType || row.bizType) }}</span>
</template>
</el-table-column>
<el-table-column prop="cardNo" label="卡号" min-width="150" show-overflow-tooltip />
<el-table-column label="现金卡信息" min-width="180">
<template #default="{ row }">
<template v-if="row">
<div>{{ formatUsageGiftCardName(row) }}</div>
<div class="gcc-sub-text">面额：{{ formatUsageFaceValue(row) }}</div>
</template>
</template>
</el-table-column>
<el-table-column label="金额" width="130" align="right">
<template #default="{ row }">
<template v-if="row">
<priceColorScheme
v-if="getUsageAmountDisplay(row)"
:value="getUsageAmountDisplay(row).amount"
:color="getUsageAmountDisplay(row).color"
/>
<span v-else>-</span>
</template>
</template>
</el-table-column>
<el-table-column label="余额" width="130" align="right">
<template #default="{ row }">
<template v-if="row">
<priceColorScheme
v-if="hasValue(row.balanceAfter)"
:value="row.balanceAfter"
:color="$mainColor"
/>
<span v-else>-</span>
</template>
</template>
</el-table-column>
<el-table-column label="交易时间" width="170">
<template #default="{ row }">
<span v-if="row">{{ formatTransactionTime(row) }}</span>
</template>
</el-table-column>
<el-table-column label="客户信息" min-width="150">
<template #default="{ row }">
<template v-if="row">
<div>{{ row.memberName || "-" }}</div>
<div class="gcc-sub-text">{{ row.memberMobile || "-" }}</div>
</template>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<span v-if="!row.orderSn" class="gcc-disabled-action">详情</span>
<a v-else class="link-text" @click="goOrderDetail(row.orderSn)">详情</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="usageSearchForm.pageNumber"
v-model:page-size="usageSearchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="usageTotal"
:page-size="usageSearchForm.pageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
@on-change="usageChangePage"
@on-page-size-change="usageChangePageSize"
@current-change="usageChangePage"
@size-change="usageChangePageSize"
/>
</Row>
</Card>
</TabPane>
</Tabs>
</Card>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
@@ -311,303 +410,6 @@ export default {
},
};
},
computed: {
createColumns() {
return [
{
title: "制卡批次ID",
key: "createBatchId",
minWidth: 100,
tooltip: true,
align: "left",
render: (h, p) => {
const id = p.row.createBatchId ?? p.row.id;
return h("span", id != null && id !== "" ? String(id) : "-");
},
},
{
title: "卡号范围",
key: "cardNoRange",
minWidth: 160,
tooltip: true,
align: "left",
render: (h, p) => {
const t = p.row.cardNoRange;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{
title: "面值",
key: "faceValue",
width: 150,
align: "left",
render: (h, p) => {
const v = p.row.faceValue;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("priceColorScheme", {
props: { value: v, color: this.$mainColor },
});
},
},
{
title: "礼品卡名称",
key: "giftCardName",
width: 150,
tooltip: true,
align: "left",
render: (h, p) => {
const t = p.row.giftCardName ?? this.giftCardName;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{ title: "制卡人", key: "createUserName", width: 150, tooltip: true ,align: "left"},
{ title: "制卡时间", key: "createTime", width: 200,align: "left" },
{
title: "制卡数量",
key: "quantity",
width: 200,
align: "left",
render: (h, p) => {
const v = p.row.quantity;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("span", String(v));
},
},
{
title: "过期时间",
key: "expireTime",
width: 200,
align: "left",
render: (h, p) => {
const t = p.row.expireTime;
return h("span", t != null && t !== "" ? String(t) : "长期有效");
},
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
fixed: "right",
render: (h, params) => {
return h(
"Button",
{
props: { type: "primary", size: "small" },
on: { click: () => this.goBatchCredentials(params.row) },
},
"查看"
);
},
},
];
},
issueColumns() {
return [
{
title: "发卡批次ID",
key: "issueBatchId",
minWidth: 160,
tooltip: true,
render: (h, p) => {
const id = p.row.issueBatchId ?? p.row.id;
return h("span", id != null && id !== "" ? String(id) : "-");
},
},
{
title: "卡号范围",
key: "cardNoRange",
minWidth: 160,
tooltip: true,
render: (h, p) => {
const t = p.row.cardNoRange;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{
title: "面值",
key: "faceValue",
width: 120,
align: "right",
render: (h, p) => {
const v = p.row.faceValue;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("priceColorScheme", {
props: { value: v, color: this.$mainColor },
});
},
},
{
title: "卡名称",
key: "giftCardName",
minWidth: 120,
tooltip: true,
render: (h, p) => {
const t = p.row.giftCardName ?? this.giftCardName;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{
title: "发卡人",
key: "issueUserName",
minWidth: 100,
tooltip: true,
render: (h, p) => {
const t = p.row.issueUserName;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{ title: "发卡时间", key: "createTime", width: 170 },
{
title: "发卡数量",
key: "totalCards",
width: 100,
align: "center",
render: (h, p) => {
const v = p.row.totalCards;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("span", String(v));
},
},
{
title: "过期时间",
key: "expireTime",
width: 170,
render: (h, p) => {
const t = p.row.expireTime;
return h("span", t != null && t !== "" ? String(t) : "长期有效");
},
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
fixed: "right",
render: (h, params) => {
return h(
"Button",
{
props: { type: "primary", size: "small" },
on: { click: () => this.goIssueBatchCredentials(params.row) },
},
"查看"
);
},
},
];
},
usageColumns() {
return [
{ title: "订单号", key: "orderSn", minWidth: 160, tooltip: true },
{
title: "交易类型",
key: "transactionType",
minWidth: 120,
render: (h, p) => h("span", this.formatUsageBizType(p.row.transactionType || p.row.bizType)),
},
{ title: "卡号", key: "cardNo", minWidth: 150, tooltip: true },
{
title: "现金卡信息",
key: "giftCardName",
minWidth: 180,
render: (h, p) => {
const name = p.row.giftCardName || this.giftCardName || "-";
const faceValue = p.row.faceValue;
return h("div", [
h("div", String(name)),
h(
"div",
{ style: { color: "#808695", marginTop: "4px" } },
`面额：${faceValue != null && faceValue !== "" ? faceValue : "-"}`
),
]);
},
},
{
title: "金额",
key: "changeAmount",
width: 130,
align: "right",
render: (h, p) => {
const display = this.getUsageAmountDisplay(p.row);
if (!display) {
return h("span", "-");
}
return h("priceColorScheme", {
props: { value: display.amount, color: display.color },
});
},
},
{
title: "余额",
key: "balanceAfter",
width: 130,
align: "right",
render: (h, p) => {
const v = p.row.balanceAfter;
if (v === null || v === undefined || v === "") {
return h("span", "-");
}
return h("priceColorScheme", {
props: { value: v, color: this.$mainColor },
});
},
},
{
title: "交易时间",
key: "transactionTime",
width: 170,
render: (h, p) => {
const t = p.row.transactionTime || p.row.createTime;
return h("span", t != null && t !== "" ? String(t) : "-");
},
},
{
title: "客户信息",
key: "memberName",
minWidth: 150,
render: (h, p) => {
const name = p.row.memberName || "-";
const mobile = p.row.memberMobile || "-";
return h("div", [
h("div", String(name)),
h("div", { style: { color: "#808695", marginTop: "4px" } }, String(mobile)),
]);
},
},
{
title: "操作",
key: "action",
width: 100,
align: "center",
fixed: "right",
render: (h, p) => {
const orderSn = p.row.orderSn;
if (!orderSn) {
return h("span", { style: { color: "#c5c8ce" } }, "详情");
}
return h(
"Button",
{
props: { type: "primary", size: "small" },
on: { click: () => this.goOrderDetail(orderSn) },
},
"详情"
);
},
},
];
},
},
mounted() {
this.initFromRoute();
if (this.activityId) {
@@ -631,6 +433,40 @@ export default {
},
},
methods: {
hasValue(v) {
return v !== null && v !== undefined && v !== "";
},
formatText(v) {
return this.hasValue(v) ? String(v) : "-";
},
formatCreateBatchId(row) {
const id = row.createBatchId ?? row.id;
return this.formatText(id);
},
formatIssueBatchId(row) {
const id = row.issueBatchId ?? row.id;
return this.formatText(id);
},
formatGiftCardName(name) {
return this.formatText(name ?? this.giftCardName);
},
formatQuantity(v) {
return this.hasValue(v) ? String(v) : "-";
},
formatExpireTime(v) {
return this.hasValue(v) ? String(v) : "长期有效";
},
formatUsageGiftCardName(row) {
return row.giftCardName || this.giftCardName || "-";
},
formatUsageFaceValue(row) {
const faceValue = row.faceValue;
return this.hasValue(faceValue) ? String(faceValue) : "-";
},
formatTransactionTime(row) {
const t = row.transactionTime || row.createTime;
return this.formatText(t);
},
initFromRoute() {
this.activityId = (this.$route.query.activityId && String(this.$route.query.activityId)) || "";
this.giftCardName = (this.$route.query.giftCardName && String(this.$route.query.giftCardName)) || "";
@@ -669,7 +505,8 @@ export default {
query: { sn: orderSn },
});
},
onTabClick(name) {
onTabClick(tab) {
const name = tab.paneName;
if (name === "createBatch" && this.activityId) {
this.loadCreateBatchList();
}
@@ -684,7 +521,6 @@ export default {
this.createSearchForm.pageNumber = 1;
this.loadCreateBatchList();
},
/** 日期区间 → yyyy-MM-dd HH:mm:ss，供 Spring 绑定 Date */
toApiDateTimeBoundary(val, endOfDay) {
const dt = val instanceof Date ? val : new Date(val);
if (Number.isNaN(dt.getTime())) {
@@ -800,12 +636,7 @@ export default {
sort: this.issueSearchForm.sort,
order: this.issueSearchForm.order,
};
[
"cardNo",
"issueBatchId",
"giftCardName",
"issueUserName",
].forEach((key) => {
["cardNo", "issueBatchId", "giftCardName", "issueUserName"].forEach((key) => {
this.appendTrimmedParam(params, key, this.issueSearchForm[key]);
});
this.appendDateRangeToParams(
@@ -892,12 +723,7 @@ export default {
sort: this.usageSearchForm.sort,
order: this.usageSearchForm.order,
};
[
"orderSn",
"memberName",
"cardNo",
"transactionType",
].forEach((key) => {
["orderSn", "memberName", "cardNo", "transactionType"].forEach((key) => {
this.appendTrimmedParam(params, key, this.usageSearchForm[key]);
});
this.appendDateRangeToParams(
@@ -942,11 +768,17 @@ export default {
flex-wrap: wrap;
text-align: left;
}
/* 与全局 .search-form > .ivu-form-item 的 margin-left:10px 对齐到表格左缘 */
.gcc-create-batch-search.search-form > .ivu-form-item:first-of-type {
.gcc-create-batch-search.search-form > .el-form-item:first-of-type {
margin-left: 0 !important;
}
.gcc-create-batch-search.search-form ::v-deep .ivu-form-item-label {
.gcc-create-batch-search.search-form :deep(.el-form-item__label) {
text-align: left;
}
.gcc-sub-text {
color: #808695;
margin-top: 4px;
}
.gcc-disabled-action {
color: #c5c8ce;
}
</style>

262
manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
View File

@@ -1,72 +1,98 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<div class="form-item-view">
<h4>商品信息</h4>
<FormItem label="选择商品" prop="scopeType">
<Button type="primary" @click="openSkuList">选择商品</Button>
<!-- <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除
</Button> -->
</FormItem>
<el-form-item label="选择商品" prop="scopeType">
<el-button type="primary" @click="openSkuList">选择商品</el-button>
</el-form-item>
<FormItem astyle="width: 100%">
<Table
<el-form-item style="width: 100%">
<el-table
border
:columns="columns"
:data="form.promotionGoodsList"
@on-selection-change="changeSelect"
style="width: 100%"
@selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="skuId">
<div>{{ row.skuId }}</div>
</template>
<template slot-scope="{ index }" slot="settlementPrice">
<InputNumber
:min="0"
v-model="form.promotionGoodsList[index].settlementPrice"
/>
</template>
<template slot-scope="{ index }" slot="lowestPrice">
<InputNumber
:min="0"
v-model="form.promotionGoodsList[index].lowestPrice"
/>
</template>
<template slot-scope="{ index }" slot="highestPrice">
<InputNumber
:min="0"
v-model="form.promotionGoodsList[index].highestPrice"
/>
</template>
<template slot-scope="{ index }" slot="stock">
<InputNumber :min="0" v-model="form.promotionGoodsList[index].stock" />
</template>
</Table>
</FormItem>
<FormItem label="活动时间" prop="rangeTime">
<DatePicker
<el-table-column type="selection" width="60" align="center" />
<el-table-column prop="goodsName" label="商品名称" min-width="100" show-overflow-tooltip />
<el-table-column label="商品价格" width="120">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存" width="100">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
<el-table-column label="结算价格" width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="form.promotionGoodsList[$index].settlementPrice"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="最低砍" width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="form.promotionGoodsList[$index].lowestPrice"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="最高砍" width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="form.promotionGoodsList[$index].highestPrice"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="活动库存" width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="form.promotionGoodsList[$index].stock"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="{ $index }">
<el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="活动时间" prop="rangeTime">
<el-date-picker
type="datetimerange"
v-model="form.rangeTime"
format="yyyy-MM-dd HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择"
:options="options"
:disabled-date="options.disabledDate"
style="width: 260px"
>
</DatePicker>
</FormItem>
/>
</el-form-item>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交</Button
>
<el-button link @click="closeCurrentPage">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
</div>
</template>
@@ -81,90 +107,19 @@ export default {
components: {
skuSelect,
},
watch: {},
data() {
return {
modalType: 0, // 是否编辑
modalType: 0,
form: {
promotionGoodsList: [], // 活动商品列表
promotionGoodsList: [],
},
id: this.$route.query.id, // 砍价活动id
submitLoading: false, // 添加或编辑提交状态
selectedGoods: [], // 已选商品列表，便于删除
promotionGoodsList: [], // 活动商品列表
id: this.$route.query.id,
submitLoading: false,
selectedGoods: [],
promotionGoodsList: [],
formRule: {
rangeTime: [{ required: true, message: "请选择活动时间" }],
},
columns: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "商品名称",
key: "goodsName",
tooltip: true,
minWidth: 100,
},
{
title: "商品价格",
key: "price",
width: 120,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
},
},
{
title: "库存",
key: "quantity",
width: 100,
},
{
title: "结算价格",
slot: "settlementPrice",
width: 110,
},
{
title: "最低砍",
slot: "lowestPrice",
width: 110,
},
{
title: "最高砍",
slot: "highestPrice",
width: 110,
},
{
title: "活动库存",
slot: "stock",
width: 110,
},
{
title: "操作",
key: "action",
align: "center",
width: 100,
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delGoods(params.index);
},
},
},
"删除"
);
},
},
],
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
@@ -173,24 +128,12 @@ export default {
};
},
async mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getCoupon();
this.modalType = 1;
}
},
methods: {
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
data.forEach((e) => {
e.id = e.skuId;
});
this.$refs.skuSelect.goodsData = data;
},
/** 保存砍价活动 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
@@ -199,37 +142,32 @@ export default {
this.$Message.error("请选择活动时间");
return;
}
params.startTime = this.$options.filters.unixToDate(
params.startTime = this.$filters.unixToDate(
this.form.rangeTime[0] / 1000
);
params.endTime = this.$options.filters.unixToDate(
params.endTime = this.$filters.unixToDate(
this.form.rangeTime[1] / 1000
);
delete params.rangeTime;
let checkResult = true;
//如果添加活动的时候选择了商品 则对选择的商品参数做一些校验
if (this.form.promotionGoodsList.length > 0) {
this.form.promotionGoodsList.forEach((res) => {
//校验库存参数
if (res.stock <= 0 || res.stock > res.quantity) {
checkResult = false;
this.$Message.error("活动库存不能为0且不能超过商品库存");
return;
}
// 结算价格金额格式校验
if (!regular.money.test(res.settlementPrice)) {
checkResult = false;
this.$Message.error("结算价格金额格式不正确");
return;
}
// 结算价格金额格式校验
if (res.settlementPrice < 0 || res.settlementPrice > res.price) {
checkResult = false;
this.$Message.error("结算价格金额不能为0且不能超过商品价格");
return;
}
//最高砍价校验
if (!regular.money.test(res.highestPrice)) {
checkResult = false;
this.$Message.error("最高可砍金额格式错误");
@@ -240,7 +178,6 @@ export default {
this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
return;
}
//最低砍价校验
if (!regular.money.test(res.lowestPrice)) {
checkResult = false;
this.$Message.error("最低可砍金额格式错误");
@@ -251,7 +188,6 @@ export default {
this.$Message.error("最低可砍金额不能为0");
return;
}
//校验最高最低砍价金额
if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
checkResult = false;
this.$Message.error("最低砍价金额不能大于最高砍价金额");
@@ -274,14 +210,12 @@ export default {
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-kan-jia-goods");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
data.forEach((e) => {
@@ -290,37 +224,12 @@ export default {
this.$refs.skuSelect.goodsData = data;
},
changeSelect(e) {
// 已选商品批量选择
this.selectedGoods = e;
},
// delSelectGoods() {
// // 多选删除商品
// if (this.selectedGoods.length <= 0) {
// this.$Message.warning("您还未选择要删除的数据");
// return;
// }
// this.$Modal.confirm({
// title: "确认删除",
// content: "您确认要删除所选商品吗?",
// onOk: () => {
// let ids = [];
// this.selectedGoods.forEach(function (e) {
// ids.push(e.id);
// });
// this.form.promotionGoodsList = this.form.promotionGoodsList.filter(
// (item) => {
// return !ids.includes(item.id);
// }
// );
// },
// });
// },
delGoods(index) {
// 删除商品
this.form.promotionGoodsList.splice(index, 1);
},
selectedGoodsData(item) {
// 回显已选商品
let list = [];
item.forEach((e) => {
list.push({
@@ -338,7 +247,6 @@ export default {
skuId: e.id,
});
});
console.warn(list);
this.form.promotionGoodsList = list;
},
},

454
manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
View File

@@ -1,29 +1,29 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<div class="form-item-view">
<h4>商品信息</h4>
<FormItem label="商品名称">
<el-form-item label="商品名称">
<div>{{ form.goodsName }}</div>
</FormItem>
<FormItem label="SKU编码">
</el-form-item>
<el-form-item label="SKU编码">
<div>{{ form.skuId }}</div>
</FormItem>
<FormItem label="店铺名称">
</el-form-item>
<el-form-item label="店铺名称">
<div>{{ form.goodsSku.storeName }}</div>
</FormItem>
<FormItem label="商品价格">
</el-form-item>
<el-form-item label="商品价格">
<div>
<priceColorScheme :value="form.goodsSku.price" :color="$mainColor"></priceColorScheme>
<priceColorScheme :value="form.goodsSku.price" :color="$mainColor" />
</div>
</FormItem>
<FormItem label="商品库存">
</el-form-item>
<el-form-item label="商品库存">
<div>{{ form.goodsSku.quantity }}</div>
</FormItem>
<FormItem label="结算价格" prop="settlementPrice">
<Input
</el-form-item>
<el-form-item label="结算价格" prop="settlementPrice">
<el-input
:disabled="onlyView"
type="number"
v-model="form.settlementPrice"
@@ -31,10 +31,9 @@
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="最低可砍" prop="lowestPrice">
<Input
</el-form-item>
<el-form-item label="最低可砍" prop="lowestPrice">
<el-input
:disabled="onlyView"
type="number"
v-model="form.lowestPrice"
@@ -42,9 +41,9 @@
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="最高可砍" prop="highestPrice">
<Input
</el-form-item>
<el-form-item label="最高可砍" prop="highestPrice">
<el-input
:disabled="onlyView"
type="number"
v-model="form.highestPrice"
@@ -52,10 +51,9 @@
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动库存" prop="stock">
<Input
</el-form-item>
<el-form-item label="活动库存" prop="stock">
<el-input
:disabled="onlyView"
type="number"
v-model="form.stock"
@@ -63,253 +61,195 @@
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动时间" prop="rangeTime">
<DatePicker
</el-form-item>
<el-form-item label="活动时间" prop="rangeTime">
<el-date-picker
:disabled="onlyView"
type="datetimerange"
v-model="form.rangeTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
style="width: 300px"
>
</DatePicker>
</FormItem>
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDate"
style="width: 360px"
/>
</el-form-item>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" v-if="!onlyView" :loading="submitLoading" @click="handleSubmit">提交</Button>
<el-button link @click="closeCurrentPage">返回</el-button>
<el-button v-if="!onlyView" type="primary" :loading="submitLoading" @click="handleSubmit">
提交
</el-button>
</div>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
</div>
</template>
<script>
import {
getKanJiaActivityGoodsById,
editKanJiaActivityGoods,
} from "@/api/promotion";
import {regular} from "@/utils";
import { getKanJiaActivityGoodsById, editKanJiaActivityGoods } from "@/api/promotion";
import { regular } from "@/utils";
export default {
name: "editKanjiaActivityGoods",
watch: {},
data() {
const checkSettlementPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("结算金额不能为空"));
} else if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("结算金额设置超过上限值"));
} else {
callback();
}
};
const checkPurchasePrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("最低购买金额不能为空"));
} else if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("最低购买金额设置超过上限值"));
} else {
callback();
}
};
const checkLowestPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("最低可砍金额不能为空"));
} else if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("最低可砍金额设置超过上限值"));
} else {
callback();
}
};
const checkHighestPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("最高可砍金额不能为空"));
} else if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("最高可砍金额设置超过上限值"));
} else {
callback();
}
};
return {
modalType: 0, // 是否编辑
form: {
purchasePrice:0,
goodsSku: {},
},
id: this.$route.query.id, // 砍价活动id
onlyView:this.$route.query.onlyView, // 是否为只读
submitLoading: false, // 添加或编辑提交状态
formRule: {
settlementPrice: [
{required: true, message: "请输入结算金额"},
{validator: checkSettlementPrice},
],
lowestPrice: [
{required: true, message: "请输入最低可砍金额"},
{validator: checkLowestPrice},
],
highestPrice: [
{required: true, message: "请输入最高可砍金额"},
{validator: checkHighestPrice},
],
rangeTime: [{required: true, message: "请选择活动时间"}],
stock: [{required: true, message: "请输入活动库存"}],
},
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
};
},
async mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getKanJiaActivityGoods();
this.modalType = 1;
export default {
name: "editKanjiaActivityGoods",
data() {
const checkSettlementPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("结算金额不能为空"));
}
},
methods: {
getKanJiaActivityGoods() {
getKanJiaActivityGoodsById(this.id).then((res) => {
this.form = res.result;
this.form.rangeTime = [];
this.form.rangeTime.push(new Date(this.form.startTime), new Date(this.form.endTime));
});
if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("结算金额设置超过上限值"));
} else {
callback();
}
};
const checkLowestPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("最低可砍金额不能为空"));
}
if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("最低可砍金额设置超过上限值"));
} else {
callback();
}
};
const checkHighestPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("最高可砍金额不能为空"));
}
if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("最高可砍金额设置超过上限值"));
} else {
callback();
}
};
return {
modalType: 0,
form: {
purchasePrice: 0,
goodsSku: {},
rangeTime: [],
},
/** 保存砍价活动 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
if (this.form.rangeTime[0] === '' || this.form.rangeTime[0] === '') {
this.$Message.error("请选择活动时间");
return
}
params.startTime = this.$options.filters.unixToDate(
this.form.rangeTime[0] / 1000
);
params.endTime = this.$options.filters.unixToDate(
this.form.rangeTime[1] / 1000
);
delete params.rangeTime
console.warn(params)
//校验库存参数
if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
this.$Message.error("活动库存不能为0且不能超过商品库存");
return
}
// 结算价格金额格式校验
if (!regular.money.test(params.settlementPrice)) {
this.$Message.error("结算价格金额格式不正确");
return
}
// 结算价格金额格式校验
if (params.settlementPrice < 0 || params.settlementPrice > params.price) {
this.$Message.error("结算价格金额不能为0且不能超过商品价格");
return
}
//最高砍价校验
if (!regular.money.test(params.highestPrice)) {
this.$Message.error("最高可砍金额格式错误");
return
}
if (params.highestPrice <= 0 || params.highestPrice > params.price) {
this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
return
}
//最低砍价校验
if (!regular.money.test(params.lowestPrice)) {
this.$Message.error("最低可砍金额格式错误");
return
}
if (params.lowestPrice <= 0 || params.lowestPrice > params.price) {
this.$Message.error("最低可砍金额不能为0");
return
}
//校验最高最低砍价金额
if (params.lowestPrice > params.highestPrice) {
this.$Message.error("最低砍价金额不能大于最高砍价金额");
return
}
this.submitLoading = true;
// 添加 避免编辑后传入id等数据 记得删除
editKanJiaActivityGoods(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("砍价活动修改成功");
this.closeCurrentPage();
}
});
id: this.$route.query.id,
onlyView: this.$route.query.onlyView,
submitLoading: false,
formRule: {
settlementPrice: [
{ required: true, message: "请输入结算金额" },
{ validator: checkSettlementPrice },
],
lowestPrice: [
{ required: true, message: "请输入最低可砍金额" },
{ validator: checkLowestPrice },
],
highestPrice: [
{ required: true, message: "请输入最高可砍金额" },
{ validator: checkHighestPrice },
],
rangeTime: [{ required: true, message: "请选择活动时间" }],
stock: [{ required: true, message: "请输入活动库存" }],
},
};
},
async mounted() {
if (this.id) {
this.getKanJiaActivityGoods();
this.modalType = 1;
}
},
methods: {
disabledDate(date) {
return date && date.getTime() < Date.now() - 86400000;
},
getKanJiaActivityGoods() {
getKanJiaActivityGoodsById(this.id).then((res) => {
this.form = res.result;
this.form.rangeTime = [res.result.startTime, res.result.endTime];
});
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
this.$Message.error("请选择活动时间");
return;
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-kan-jia-goods");
localStorage.pageOpenedList = JSON.stringify(
this.$store.state.app.pageOpenedList
);
this.$router.go(-1);
},
params.startTime = this.form.rangeTime[0];
params.endTime = this.form.rangeTime[1];
delete params.rangeTime;
if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
this.$Message.error("活动库存不能为0且不能超过商品库存");
return;
}
if (!regular.money.test(params.settlementPrice)) {
this.$Message.error("结算价格金额格式不正确");
return;
}
if (params.settlementPrice < 0 || params.settlementPrice > params.price) {
this.$Message.error("结算价格金额不能为0且不能超过商品价格");
return;
}
if (!regular.money.test(params.highestPrice)) {
this.$Message.error("最高可砍金额格式错误");
return;
}
if (params.highestPrice <= 0 || params.highestPrice > params.price) {
this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
return;
}
if (!regular.money.test(params.lowestPrice)) {
this.$Message.error("最低可砍金额格式错误");
return;
}
if (params.lowestPrice <= 0 || params.lowestPrice > params.price) {
this.$Message.error("最低可砍金额不能为0");
return;
}
if (params.lowestPrice > params.highestPrice) {
this.$Message.error("最低砍价金额不能大于最高砍价金额");
return;
}
this.submitLoading = true;
editKanJiaActivityGoods(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("砍价活动修改成功");
this.closeCurrentPage();
}
});
}
});
},
};
closeCurrentPage() {
this.$store.commit("removeTag", "add-kan-jia-goods");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
},
};
</script>
<style lang="scss" scpoed>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
}
.describe {
font-size: 12px;
margin-left: 10px;
color: #999;
}
.effectiveDays {
font-size: 12px;
color: #999;
> * {
margin: 0 4px;
}
}
.tips {
font-size: 12px;
color: #999;
}
<style lang="scss" scoped>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
}
</style>

476
manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
View File

@@ -1,318 +1,266 @@
<template>
<div class="search">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="商品名称" prop="goodsName">
<Input
type="text"
v-model="searchForm.goodsName"
placeholder="请输入商品名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 240px"
>
</DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Row>
</Card>
<Card>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加砍价</Button>
</Row>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<template slot-scope="{ row }" slot="goodsName">
<div>
<a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
row.goodsName
}}</a>
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
<div slot="content">
<el-form-item label="商品名称" prop="goodsName">
<el-input
v-model="searchForm.goodsName"
placeholder="请输入商品名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="活动状态" prop="promotionStatus">
<el-select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<el-option label="未开始" value="NEW" />
<el-option label="已开始/上架" value="START" />
<el-option label="已结束/下架" value="END" />
<el-option label="紧急关闭/作废" value="CLOSE" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<div class="operation padding-row">
<el-button type="primary" @click="add">添加砍价</el-button>
</div>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
@sort-change="changeSort"
>
<el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
<template v-if="row">
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
<template #reference>
<img
src="../../../assets/qrcode.svg"
class="hover-pointer"
width="20"
height="20"
alt="qrcode"
/>
</template>
<vue-qr
:text="wapLinkTo(row.goodsId, row.skuId)"
:margin="0"
colorDark="#000"
colorLight="#fff"
color-dark="#000"
color-light="#fff"
:size="150"
></vue-qr>
</div>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</Poptip>
</div>
</template>
<template slot-scope="{ row }" slot="startTime">
<div>{{ row.startTime }}</div>
<div>{{ row.endTime }}</div>
</template>
<template slot-scope="{ row }" slot="quantity">
<div>{{ row.stock }}</div>
</template>
<template slot-scope="{ row }" slot="action">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
@click="edit(row)"
>编辑
</a>
<a
v-else
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
@click="edit(row, 'onlyView')"
>查看
</a>
</template>
</Table>
<Row type="flex" justify="end" class="page">
<Page
:current="searchForm.pageNumber"
/>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column label="库存数量" width="100">
<template #default="{ row }">
<span v-if="row">{{ row.stock }}</span>
</template>
</el-table-column>
<el-table-column prop="stock" label="剩余活动库存" width="120" />
<el-table-column label="每人最低砍" min-width="110">
<template #default="{ row }">
<span v-if="row">{{ $filters.unitPrice(row.lowestPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="每人最高砍" min-width="110">
<template #default="{ row }">
<span v-if="row">{{ $filters.unitPrice(row.highestPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="结算价格" min-width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.settlementPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="活动开始时间" min-width="160">
<template #default="{ row }">
<template v-if="row">
<div>{{ row.startTime }}</div>
<div>{{ row.endTime }}</div>
</template>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
class="link-text"
@click="edit(row)"
>
编辑
</a>
<a v-else class="link-text" @click="edit(row, 'onlyView')">查看</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="page mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getKanJiaGoodsList, delKanJiaGoods } from "@/api/promotion";
import { promotionsStatusRender } from "@/utils/promotions";
import vueQr from "vue-qr";
export default {
name: "coupon",
components: {
"vue-qr": vueQr,
},
name: "kanjia-activity-goods",
components: { vueQr },
data() {
return {
selectDate: [], //选中的数据
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
goodsName: "",
},
form: {
// 添加或编辑表单对象初始化数据
selectDate: [],
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
goodsName: "",
promotionStatus: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
{
title: "商品名称",
slot: "goodsName",
minWidth: 150,
tooltip: true,
},
{
title: "库存数量",
slot: "quantity",
width: 100,
},
{
title: "剩余活动库存",
key: "stock",
width: 110,
},
{
title: "每人最低砍",
key: "lowestPrice",
minWidth: 100,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.lowestPrice, "￥")
);
},
},
{
title: "每人最高砍",
key: "highestPrice",
minWidth: 100,
tooltip: true,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.highestPrice, "￥")
);
},
},
{
title: "结算价格",
key: "settlementPrice",
minWidth: 100,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.settlementPrice,color:this.$mainColor}} );
},
},
{
title: "活动开始时间",
slot: "startTime",
minWidth: 150,
},
{
title: "状态",
key: "promotionStatus",
render: (h, params) => {
return promotionsStatusRender(h, params);
},
width: 100,
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
width: 150,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectCoupon: [], //本级选中的优惠券
data: [],
total: 0,
selectList: [],
selectCoupon: [],
};
},
props: {},
watch: {
$route(to, from) {
$route(to) {
if (to.fullPath == "/promotions/manager-coupon") {
this.init();
}
},
},
methods: {
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
check() {
// this.selectCoupon.push(this.selectList)
this.$emit("selected", this.selectCoupon);
},
init() {
this.getDataList();
},
// 添加砍价活动跳转
add() {
this.$router.push({ name: "add-kanJia-activity-goods" });
},
info(v) {
this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
// this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 0;
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
changeSort({ prop, order }) {
if (!order) {
this.searchForm.sort = "createTime";
this.searchForm.order = "desc";
} else {
this.searchForm.sort = prop;
this.searchForm.order = order === "ascending" ? "asc" : "desc";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
// 带多条件搜索参数获取表单数据 请自行修改接口
getKanJiaGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
getKanJiaGoodsList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
edit(v, type) {
let data = {
id: v.id,
};
type ? (data.onlyView = true) : "";
const data = { id: v.id };
if (type) data.onlyView = true;
this.$router.push({
name: "edit-kanJia-activity-goods",
query: data,
@@ -324,11 +272,6 @@ export default {
content: "确认需要删除此砍价商品",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
// 批量删除
delKanJiaGoods(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -345,6 +288,19 @@ export default {
},
};
</script>
<style lang="scss">
@import "@/styles/table-common.scss";
<style lang="scss" scoped>
.mr_10 {
margin-right: 10px;
}
.hover-pointer {
cursor: pointer;
vertical-align: middle;
}
.padding-row {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
</style>

255
manager/src/views/promotions/live/live-detail.vue
View File

@@ -1,181 +1,137 @@
<template>
<div>
<Card>
<Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
<FormItem label="直播标题" prop="name">
<Input disabled v-model="liveForm.name" style="width:460px"></Input>
<el-card>
<el-form :model="liveForm" ref="liveForm" :rules="liveRulesForm" label-width="120px">
<el-form-item label="直播标题" prop="name">
<el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
<div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
</FormItem>
<FormItem label="主播昵称" prop="anchorName">
<Input disabled v-model="liveForm.anchorName" style="width:360px"></Input>
</el-form-item>
<el-form-item label="主播昵称" prop="anchorName">
<el-input disabled v-model="liveForm.anchorName" style="width:360px"></el-input>
<div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
</FormItem>
<FormItem label="直播时间" prop="startTime">
<DatePicker disabled format="yyyy-MM-dd HH:mm" type="datetimerange" v-model="times" @on-change="handleChangeTime" :options="optionsTime" placeholder="直播计划开始时间-直播计划结束时间" style="width: 300px">
</DatePicker>
</el-form-item>
<el-form-item label="直播时间" prop="startTime">
<el-date-picker
disabled
format="YYYY-MM-DD HH:mm"
type="datetimerange"
v-model="times"
@change="handleChangeTime"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="直播计划开始时间-直播计划结束时间"
style="width: 300px"
/>
<div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
</FormItem>
</el-form-item>
<FormItem label="主播微信号" prop="anchorWechat">
<Input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></Input>
<el-form-item label="主播微信号" prop="anchorWechat">
<el-input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></el-input>
<div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
</FormItem>
</el-form-item>
<!-- 分享卡片 -->
<FormItem label="分享卡片封面" prop="feedsImg">
<el-form-item label="分享卡片封面" prop="feedsImg">
<div class="upload-list" v-if="liveForm.feedsImg">
<template>
<img :src="liveForm.feedsImg">
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.feedsImg)"></Icon>
</div>
</template>
</div>
<Upload v-if="liveForm.feedsImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleFeedsImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
:on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
<img :src="liveForm.feedsImg">
<div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
<span class="view-icon">查看</span>
</div>
</Upload>
</div>
<div class="tips">
直播间分享图，图片规则：建议像素800*640，大小不超过1M；
</div>
</FormItem>
<!-- 直播间背景墙 -->
<FormItem label="直播间背景墙" prop="coverImg">
</el-form-item>
<el-form-item label="直播间背景墙" prop="coverImg">
<div class="upload-list" v-if="liveForm.coverImg">
<template>
<img :src="liveForm.coverImg">
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.coverImg)"></Icon>
</div>
</template>
</div>
<Upload v-if="liveForm.coverImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleCoverImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
:on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
<img :src="liveForm.coverImg">
<div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
<span class="view-icon">查看</span>
</div>
</Upload>
</div>
<div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
</FormItem>
<!-- 直播间背景墙 -->
<FormItem label="直播间分享图" prop="shareImg">
</el-form-item>
<el-form-item label="直播间分享图" prop="shareImg">
<div class="upload-list" v-if="liveForm.shareImg">
<template>
<img :src="liveForm.shareImg">
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.shareImg)"></Icon>
</div>
</template>
</div>
<Upload v-if="liveForm.shareImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleShareImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
:on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="ios-camera" size="20"></Icon>
<img :src="liveForm.shareImg">
<div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
<span class="view-icon">查看</span>
</div>
</Upload>
</div>
<div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
</FormItem>
</el-form-item>
<FormItem label="商品" v-if="$route.query.id">
<Table class="goods-table" :columns="liveColumns" :data="liveData">
<template slot-scope="{ row,index }" slot="goodsName">
<div class="flex-goods">
<Badge v-if="index == 0 || index ==1" color="volcano"></Badge>
<img class="thumbnail" :src="row.thumbnail || row.goodsImage">
{{ row.goodsName || row.name }}
</div>
</template>
<template slot-scope="{ row }" class="price" slot="price">
<div>
<div v-if="row.priceType == 1">{{row.price | unitPrice('￥')}}</div>
<div v-if="row.priceType == 2">{{row.price | unitPrice('￥')}}至{{row.price2 | unitPrice('￥')}}</div>
<div v-if="row.priceType == 3">{{row.price | unitPrice('￥')}}<span class="original-price">{{row.price2 | unitPrice('￥')}}</span></div>
</div>
</template>
<template slot-scope="{ row }" slot="quantity">
<div>{{row.quantity}}</div>
</template>
</Table>
<el-form-item label="商品" v-if="$route.query.id">
<el-table class="goods-table" border :data="liveData" style="width: 100%">
<el-table-column label="商品" min-width="200">
<template #default="{ row, $index }">
<div v-if="row" class="flex-goods">
<el-badge v-if="$index == 0 || $index == 1" is-dot type="danger" />
<img class="thumbnail" :src="row.thumbnail || row.goodsImage">
{{ row.goodsName || row.name }}
</div>
</template>
</el-table-column>
<el-table-column label="价格" min-width="160">
<template #default="{ row }">
<div v-if="row">
<div v-if="row.priceType == 1">{{ $filters.unitPrice(row.price, '￥') }}</div>
<div v-if="row.priceType == 2">{{ $filters.unitPrice(row.price, '￥') }}至{{ $filters.unitPrice(row.price2, '￥') }}</div>
<div v-if="row.priceType == 3">
{{ $filters.unitPrice(row.price, '￥') }}
<span class="original-price">{{ $filters.unitPrice(row.price2, '￥') }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="库存" width="100">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
</el-table>
<div class="tips">
直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
</div>
</FormItem>
</el-form-item>
<FormItem>
<Button type="primary" @click="createLives()">保存</Button>
<el-form-item>
<el-button type="primary" @click="createLives()">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</FormItem>
</Form>
</Card>
<!-- 浏览图片 -->
<Modal title="查看图片" v-model="imageVisible">
<el-dialog v-model="imageVisible" title="查看图片" width="600px">
<img :src="imageSrc" v-if="imageVisible" style="width: 100%">
</Modal>
</el-dialog>
</div>
</template>
<script>
import { getLiveInfo } from "@/api/promotion";
export default {
data() {
return {
imageVisible: false, //查看图片的dailog
imageSrc: "", //查看图片的路径
imageVisible: false,
imageSrc: "",
liveForm: {
name: "", //直播标题
anchorName: "", //主播昵称
anchorWechat: "", //主播微信号
feedsImg: "", //分享卡片封面
coverImg: "", //直播间背景墙
shareImg: "", //分享图
name: "",
anchorName: "",
anchorWechat: "",
feedsImg: "",
coverImg: "",
shareImg: "",
startTime: "",
},
times: [], //接收直播时间数据
// 直播商品表格表头
liveColumns: [
{
title: "商品",
slot: "goodsName",
},
{
title: "价格",
slot: "price",
},
{
title: "库存",
slot: "quantity",
width: 100,
},
{
title: "操作",
slot: "action",
width: 250,
},
],
liveData: [], //直播商品集合
commodityList: "", //商品集合
times: [],
liveData: [],
commodityList: "",
};
},
mounted() {
/**
* 如果query.id有值说明是查看详情
* liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
*/
if (this.$route.query.id) {
// 获取直播间详情
this.getLiveDetail();
}
this.accessToken = {
@@ -184,48 +140,32 @@ export default {
},
methods: {
/**
* 上传图片查看图片
*/
handleView(src) {
this.imageVisible = true;
this.imageSrc = src;
},
// 上传文件超过大小限制
handleMaxSize(file) {
this.$Notice.warning({
title: "文件大小过大",
desc: "所选文件大小过大, 不得超过 1M.",
});
},
/**
* 获取直播间详情
*/
async getLiveDetail() {
let result = await getLiveInfo(this.$route.query.id);
// 将数据回调到liveform里面
if (result.success) {
let data = result.result;
for (let key in data) {
this.liveForm[key] = data[key];
}
// 将选择的商品回调给表格
this.liveData = data.commodityList;
this.commodityList = data.commodityList;
// 将时间格式化
this.$set(
this.times,
[0],
this.$options.filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm")
);
this.$set(
this.times,
[1],
this.$options.filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm")
);
this.times = [
this.$filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
this.$filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
];
this.liveStatus = data.status;
}
},
@@ -236,7 +176,7 @@ export default {
<style lang="scss" scoped>
.action {
display: flex;
::v-deep .ivu-btn {
:deep(.el-button) {
margin: 0 5px !important;
}
}
@@ -253,7 +193,6 @@ export default {
.flex-goods {
margin: 10px;
display: flex;
align-items: center;
> img {
margin-right: 10px;
@@ -297,7 +236,7 @@ export default {
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
.view-icon {
color: #fff;
font-size: 20px;
cursor: pointer;

249
manager/src/views/promotions/live/live.vue
View File

@@ -1,181 +1,93 @@
<template>
<div>
<Card>
<Tabs v-model="searchForm.status">
<!-- 标签栏 -->
<TabPane
<el-card>
<el-tabs v-model="searchForm.status">
<el-tab-pane
v-for="(item, index) in tabs"
:key="index"
:name="item.status"
:label="item.title"
>
</TabPane>
</Tabs>
<Table :columns="liveColumns" :data="liveData"></Table>
<Row type="flex" style="margin: 20px" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
/>
</el-tabs>
<el-table :data="liveData" style="width: 100%">
<el-table-column prop="name" label="直播标题" />
<el-table-column prop="anchorName" label="主播昵称" />
<el-table-column label="直播开始时间">
<template #default="{ row }">
<span v-if="row">{{ $filters.unixToDate(row.startTime) }}</span>
</template>
</el-table-column>
<el-table-column label="直播结束时间">
<template #default="{ row }">
<span v-if="row">{{ $filters.unixToDate(row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column label="是否推荐" align="center">
<template #default="{ row, $index }">
<el-switch
v-if="row"
v-model="row.recommend"
inline-prompt
active-text="是"
inactive-text="否"
@change="star(row, $index)"
/>
</template>
</el-table-column>
<el-table-column label="直播状态">
<template #default="{ row }">
<template v-if="row">
<el-tag v-if="row.status == 'NEW'" type="primary">未开始</el-tag>
<el-tag v-else-if="row.status == 'START'" type="success">直播中</el-tag>
<el-tag v-else type="warning">已结束</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<a v-if="row" class="link-text" @click="getLiveDetail(row)">查看</a>
</template>
</el-table-column>
</el-table>
<div class="mt_10 page" style="display: flex; justify-content: flex-end; margin: 20px 0">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePageNumber"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePageNumber"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getLiveList, whetherStar } from "@/api/promotion.js";
export default {
data() {
return {
// 查询数据的总数
total: 0,
// 查询的form
searchForm: {
pageSize: 20,
pageNumber: 1,
status: "NEW",
},
// 直播tab选项栏
tabs: [
{
title: "直播中",
status: "START",
},
{
title: "未开始",
status: "NEW",
},
{
title: "已结束",
status: "END",
},
{ title: "直播中", status: "START" },
{ title: "未开始", status: "NEW" },
{ title: "已结束", status: "END" },
],
liveColumns: [
{
title: "直播标题",
key: "name",
},
{
title: "主播昵称",
key: "anchorName",
},
{
title: "直播开始时间",
key: "createTime",
render: (h, params) => {
return h("span", this.$options.filters.unixToDate(params.row.startTime));
},
},
{
title: "直播结束时间",
key: "endTime",
render: (h, params) => {
return h(
"span",
this.$options.filters.unixToDate(params.row.endTime)
);
},
},
{
title: "是否推荐",
align: "center",
render: (h, params) => {
return h("div", [
h(
"i-switch",
{
// 数据库0 enabled,1 disabled
props: {
type: "primary",
size: "large",
value: params.row.recommend == true,
},
on: {
"on-change": () => {
this.star(params.row, params.index);
},
},
},
[
h("span", {
slot: "open",
domProps: {
innerHTML: "是",
},
}),
h("span", {
slot: "close",
domProps: {
innerHTML: "否",
},
}),
]
),
]);
},
},
{
title: "直播状态",
render: (h, params) => {
if (params.row.status == "NEW") {
return h("div", [h("tag", { props: { color: "blue" } }, "未开始")]);
} else if (params.row.status == "START") {
return h("div", [h("tag", { props: { color: "green" } }, "直播中")]);
} else {
return h("div", [h("tag", { props: { color: "volcano" } }, "已结束")]);
}
},
},
{
title: "操作",
key: "action",
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
},
},
[
h(
"Button",
{
props: {
type: "error",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.getLiveDetail(params.row);
},
},
},
"查看"
),
]
);
},
},
], //table中显示的title
liveData: [], //table中显示的直播数据
liveData: [],
};
},
watch: {
// 直播状态
"searchForm.status": {
handler() {
this.liveData = [];
@@ -188,42 +100,17 @@ export default {
this.getStoreLives();
},
methods: {
/**
* 是否推荐
*/
async star(val, index) {
let switched;
if (this.liveData[index].recommend) {
this.$set(this.liveData[index], "recommend", false);
switched = false;
} else {
this.$set(this.liveData[index], "recommend", true);
switched = true;
}
let switched = this.liveData[index].recommend;
await whetherStar({ id: val.id, recommend: switched });
this.getStoreLives();
},
/**
* 页面数据大小分页回调
*/
changePageSize(val) {
this.searchForm.pageSize = val;
changePageSize() {
this.getStoreLives();
},
/**
* 分页回调
*/
changePageNumber(val) {
this.searchForm.pageNumber = val;
changePageNumber() {
this.getStoreLives();
},
/**
* 获取店铺直播间列表
*/
async getStoreLives() {
let result = await getLiveList(this.searchForm);
if (result.success) {
@@ -231,10 +118,6 @@ export default {
this.total = result.result.total;
}
},
/**
* 获取直播间详情
*/
getLiveDetail(val) {
this.$router.push({
path: "/live-detail",

232
manager/src/views/promotions/pintuan/pintuan-goods.vue
View File

@@ -1,163 +1,133 @@
<template>
<div class="pintuan-goods">
<Card>
<el-card>
<h4>活动详情</h4>
<Table style="margin: 10px 0" border :columns="columns" :data="data"></Table>
<el-table border :data="data" style="width: 100%; margin: 10px 0">
<el-table-column prop="promotionName" label="活动名称" min-width="120" />
<el-table-column prop="startTime" label="活动开始时间" min-width="120" />
<el-table-column prop="endTime" label="活动结束时间" min-width="120" />
<el-table-column prop="requiredNum" label="成团人数" min-width="90" />
<el-table-column prop="limitNum" label="限购数量" min-width="90" />
<el-table-column label="状态" min-width="100">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
</el-table>
<h4>商品信息</h4>
<Table
:loading="loading"
<el-table
ref="table"
v-loading="loading"
border
class="operation"
:columns="goodsColumns"
:data="goodsData"
ref="table"
sortable="custom"
style="width: 100%"
>
<template slot-scope="{ row }" slot="goodsName">
<div>
<a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
row.goodsName
}}</a>
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
<div slot="content">
<el-table-column label="商品名称" min-width="120">
<template #default="{ row }">
<template v-if="row">
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
<template #reference>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt="qrcode"
/>
</template>
<vue-qr
:text="wapLinkTo(row.goodsId, row.skuId)"
:margin="0"
colorDark="#000"
colorLight="#fff"
color-dark="#000"
color-light="#fff"
:size="150"
></vue-qr>
</div>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</Poptip>
</div>
</template>
</Table>
<Row type="flex" justify="end" class="page operation">
<Page
:current="searchForm.pageNumber"
/>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column prop="quantity" label="库存" min-width="80" />
<el-table-column label="拼团价格" min-width="100">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
</el-table>
<div class="page operation mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getPintuanGoodsList, getPintuanDetail } from "@/api/promotion.js";
import vueQr from "vue-qr";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
components: {
"vue-qr": vueQr,
},
components: { vueQr },
data() {
return {
loading: false, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
},
data: [], // 表单数据
total: 0, // 表单数据总数
columns: [
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
minWidth: 120,
},
{
title: "活动结束时间",
key: "endTime",
minWidth: 120,
},
{
title: "成团人数",
key: "requiredNum",
},
{
title: "限购数量",
key: "limitNum",
},
{
title: "状态",
key: "promotionStatus",
minWidth: 100,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
],
goodsColumns: [
{
title: "商品名称",
slot: "goodsName",
minWidth: 120,
},
{
title: "库存",
key: "quantity",
minWidth: 40,
},
{
title: "拼团价格",
key: "price",
minWidth: 50,
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
},
},
],
goodsData: [], // 商品数据
loading: false,
searchForm: {
pageNumber: 1,
pageSize: 20,
},
data: [],
total: 0,
goodsData: [],
};
},
methods: {
// 初始化数据
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
this.getPintuanMsg();
},
// 分页 改变页码
changePage(v) {
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
},
// 分页 改变页数
changePageSize(v) {
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 获取拼团商品列表
getDataList() {
this.loading = true;
this.searchForm.pintuanId = this.$route.query.id;
getPintuanGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
@@ -166,7 +136,6 @@ export default {
}
});
},
// 获取拼团详情
getPintuanMsg() {
getPintuanDetail(this.$route.query.id).then((res) => {
if (res.success) this.data.push(res.result);
@@ -178,6 +147,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
h4 {
margin: 20px 0;
@@ -188,4 +158,22 @@ h4 {
text-align: left;
border-left: 3px solid red;
}
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.mr_10 {
margin-right: 10px;
}
.hover-pointer {
cursor: pointer;
}
.mt_10 {
margin-top: 10px;
}
</style>

261
manager/src/views/promotions/pintuan/pintuan.vue
View File

@@ -1,207 +1,191 @@
<template>
<div class="search">
<Card>
<Form
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<Form-item label="活动名称" prop="promotionName">
<Input
type="text"
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
</el-form-item>
<el-form-item label="活动状态" prop="promotionStatus">
<el-select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
<el-option label="未开始" value="NEW" />
<el-option label="已开始/上架" value="START" />
<el-option label="已结束/下架" value="END" />
<el-option label="紧急关闭/作废" value="CLOSE" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
</Form>
</Card>
<Card>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<template slot-scope="{ row }" slot="action">
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="view(row)"
>查看</a>
<span
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="margin:0 8px;color:#dcdee2"
>|</span>
<a
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="close(row)"
>关闭</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table-column
prop="promotionName"
label="活动名称"
min-width="150"
show-overflow-tooltip
/>
<el-table-column label="状态" width="110">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="storeName" label="所属店铺" min-width="120" show-overflow-tooltip />
<el-table-column prop="startTime" label="活动开始时间" width="180" />
<el-table-column prop="endTime" label="活动结束时间" width="180" />
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a class="link-text" @click="view(row)">查看</a>
<template v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'">
<span class="op-split">|</span>
<a class="link-text" @click="close(row)">关闭</a>
</template>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getPintuanList, updatePintuanStatus } from "@/api/promotion";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
name: "pintuan",
data() {
return {
selectDate: [], //选中的数据
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime",
order: "desc", // 默认排序方式
},
columns: [
// 表头
{
title: "活动名称",
key: "promotionName",
minWidth: 150,
tooltip: true,
},
{
title: "状态",
key: "promotionStatus",
width: 110,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "所属店铺",
key: "storeName",
minWidth: 120,
tooltip: true,
},
{
title: "活动开始时间",
key: "startTime",
width: 180,
},
{
title: "活动结束时间",
key: "endTime",
width: 180,
},
{
fixed: "right",
title: "操作",
slot: "action",
align: "center",
width: 200,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectDate: [],
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
promotionName: "",
promotionStatus: "",
},
data: [],
total: 0,
};
},
methods: {
// 初始化数据
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
},
// 分页 修改页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
// 分页 修改页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 获取拼团列表
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
getPintuanList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
getPintuanList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
// 查看拼团商品
view(v) {
this.$router.push({ name: "pintuan-goods", query: { id: v.id } });
},
// 关闭当前活动
close(v) {
this.$Modal.confirm({
title: "确认关闭",
// 记得确认修改此处
content: "您确认要关闭此拼团活动?",
loading: true,
onOk: () => {
// 删除
updatePintuanStatus(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -218,8 +202,9 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.ivu-form-item {
margin-bottom: 0 !important;
.mt_10 {
margin-top: 10px;
}
</style>

289
manager/src/views/promotions/points-goods-category/points-goods-category.vue
View File

@@ -1,77 +1,70 @@
<template>
<div>
<Card>
<el-card>
<div class="operation mb_10">
<Button @click="addParent" type="primary" icon="md-add">添加积分商品分类</Button>
<Button icon="md-refresh" @click="init">刷新</Button>
<el-button type="primary" @click="addParent">添加积分商品分类</el-button>
<el-button @click="init">刷新</el-button>
</div>
<tree-table
ref="treeTable"
size="default"
:loading="loading"
<el-table
v-loading="loading"
:data="tableData"
:columns="columns"
:border="true"
:show-index="false"
:is-fold="true"
:expand-type="false"
primary-key="id"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children' }"
style="width: 100%"
>
<template slot="action" slot-scope="scope">
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
@click.native="edit(scope.row)"
>编辑</a>
<span style="margin:0 8px;color:#dcdee2">|</span>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click.native="remove(scope.row)"
>删除</a>
</template>
</tree-table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-table-column prop="name" label="分类名称" min-width="200" />
<el-table-column prop="sortOrder" label="排序值" min-width="120" />
<el-table-column label="操作" width="200" align="center">
<template #default="{ row }">
<template v-if="row">
<a class="link-text" @click="edit(row)">编辑</a>
<span class="op-split">|</span>
<a class="link-text" @click="remove(row)">删除</a>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
<Modal
:title="modalTitle"
v-model="modalVisible"
:mask-closable="false"
:width="500"
>
<Form
ref="form"
:model="formAdd"
:label-width="100"
:rules="formValidate"
>
<FormItem label="分类名称" prop="name">
<Input v-model="formAdd.name" clearable style="width: 100%" />
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<InputNumber v-model="formAdd.sortOrder" :min="0" clearable style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="Submit"
>提交</Button
>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</Modal>
</el-card>
<el-dialog
v-model="modalVisible"
:title="modalTitle"
width="500px"
:close-on-click-modal="false"
destroy-on-close
>
<el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
<el-form-item label="分类名称" prop="name">
<el-input v-model="formAdd.name" clearable />
</el-form-item>
<el-form-item label="排序值" prop="sortOrder">
<el-input-number v-model="formAdd.sortOrder" :min="0" style="width: 100%" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="modalVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="Submit">提交</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import {
getPointsGoodsCategoryList,
@@ -79,132 +72,90 @@ import {
updatePointsGoodsCategory,
deletePointsGoodsCategoryById,
} from "@/api/promotion";
import TreeTable from "@/components/tree-table/Table/Table";
export default {
name: "pointsGoodsCategory",
components: {
TreeTable
},
data() {
return {
submitLoading:false,
loading: false, // 加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
showParent: false, // 是否展示上级菜单
parentTitle: "", // 父级菜单名称
submitLoading: false,
loading: false,
modalType: 0,
modalVisible: false,
modalTitle: "",
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "sortOrder",
order: "asc"
order: "asc",
},
formAdd: {
// 添加或编辑表单对象初始化数据
parentId: 0,
name: "",
deleteFlag: 0,
level: 0,
sortOrder:1
sortOrder: 1,
},
// 表单验证规则
formValidate: {
name: [{ required: true, message: "商品分类名称不能为空" }],
name: [{ required: true, message: "商品分类名称不能为空", trigger: "blur" }],
},
columns: [
{
title: "分类名称",
key: "name",
minWidth: "120px",
},
{
title: "排序值",
key: "sortOrder",
minWidth: "120px",
},
{
title: "操作",
key: "action",
align: "center",
headerAlign: "center",
width: "400px",
type: "template",
template: "action",
},
],
tableData: [], // 表格数据
total: 0
tableData: [],
total: 0,
};
},
methods: {
// 初始化数据
init() {
this.getAllList();
},
// 编辑分类
edit(v) {
this.modalType = 1;
this.modalTitle = "编辑";
this.formAdd.id = v.id;
this.formAdd.name = v.name;
this.formAdd.sortOrder = v.sortOrder;
this.showParent = false;
this.modalVisible = true;
},
// 添加顶级分类
addParent() {
this.modalType = 0;
this.modalTitle = "添加积分商品分类";
this.parentTitle = "顶级分类";
this.showParent = true;
this.$refs.form.resetFields();
this.$refs.form?.resetFields();
delete this.formAdd.id;
this.formAdd.parentId = 0;
this.modalVisible = true;
},
// 提交
Submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.formAdd.id;
addPointsGoodsCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("添加成功");
this.getAllList();
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
} else {
// 编辑
updatePointsGoodsCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("修改成功");
this.getAllList();
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
}
if (!valid) return;
this.submitLoading = true;
if (this.modalType === 0) {
delete this.formAdd.id;
addPointsGoodsCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("添加成功");
this.getAllList();
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
} else {
updatePointsGoodsCategory(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("修改成功");
this.getAllList();
this.modalVisible = false;
this.$refs.form.resetFields();
}
});
}
});
},
// 删除
remove(v) {
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除 " + v.name + " ?",
loading: true,
onOk: () => {
// 删除
deletePointsGoodsCategoryById(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -215,27 +166,29 @@ export default {
},
});
},
// 获取所有分类
getAllList() {
this.loading = true;
getPointsGoodsCategoryList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
const records = res.result.records || [];
const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
const sortRecursively = (list = []) => {
list.sort(sortFn);
list.forEach((item) => {
if (Array.isArray(item.children) && item.children.length) {
sortRecursively(item.children);
}
});
return list;
};
this.tableData = sortRecursively(records);
this.total = res.result.total || 0;
}
});
getPointsGoodsCategoryList(this.searchForm)
.then((res) => {
if (res.success) {
const records = res.result.records || [];
const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
const sortRecursively = (list = []) => {
list.sort(sortFn);
list.forEach((item) => {
if (Array.isArray(item.children) && item.children.length) {
sortRecursively(item.children);
}
});
return list;
};
this.tableData = sortRecursively(records);
this.total = res.result.total || 0;
}
})
.finally(() => {
this.loading = false;
});
},
changePage(v) {
this.searchForm.pageNumber = v;
@@ -245,14 +198,28 @@ export default {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getAllList();
}
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
<style scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
.mb_10 {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
</style>

299
manager/src/views/promotions/points-goods/points-goods-add.vue
View File

@@ -1,100 +1,122 @@
<template>
<div class="wrapper">
<Card>
<Form ref="form" :model="form" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" :rules="formRule" label-width="120px">
<div class="base-info-item">
<div class="form-item-view">
<FormItem astyle="width: 100%">
<el-form-item style="width: 100%">
<div style="display: flex; margin-bottom: 10px">
<Button type="primary" @click="openSkuList">选择商品</Button>
<Button
type="error"
ghost
<el-button type="primary" @click="openSkuList">选择商品</el-button>
<el-button
type="danger"
plain
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除
</Button
>
>批量删除</el-button>
</div>
<Table
<el-table
border
v-if="showTable"
:columns="columns"
:data="promotionGoodsList"
@on-selection-change="changeSelect"
style="width: 100%"
@selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="skuId">
<div>{{ row.skuId }}</div>
</template>
<template slot-scope="{ index }" slot="settlementPrice">
<InputNumber
:min="0"
type="number"
v-model="promotionGoodsList[index].settlementPrice"
/>
</template>
<template slot-scope="{ row, index }" slot="pointsGoodsCategory">
<Select
v-model="promotionGoodsList[index].pointsGoodsCategoryId"
:transfer="true"
:label-in-value="true"
@on-change="
(val) => {
changeCategory(val, index);
}
"
>
<Option
v-for="item in categoryList"
:value="item.id"
:key="item.id"
>{{ item.name }}
</Option
<el-table-column type="selection" width="60" align="center" />
<el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
<el-table-column label="SKU编码" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ row.skuId }}</span>
</template>
</el-table-column>
<el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
<el-table-column label="商品价格" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存" width="90">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
<el-table-column label="结算价格" min-width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="promotionGoodsList[$index].settlementPrice"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="分类" min-width="160">
<template #default="{ $index }">
<el-select
v-model="promotionGoodsList[$index].pointsGoodsCategoryId"
@change="(val) => changeCategory(val, $index)"
style="width: 140px"
>
</Select>
</template>
<template slot-scope="{ index }" slot="activeStock">
<InputNumber
:min="0"
type="number"
v-model="promotionGoodsList[index].activeStock"
/>
</template>
<template slot-scope="{ index }" slot="points">
<InputNumber
:min="0"
type="number"
v-model="promotionGoodsList[index].points"
/>
</template>
</Table>
</FormItem>
<el-option
v-for="item in categoryList"
:value="item.id"
:key="item.id"
:label="item.name"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="活动库存" min-width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="promotionGoodsList[$index].activeStock"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="兑换积分" min-width="130">
<template #default="{ $index }">
<el-input-number
:min="0"
v-model="promotionGoodsList[$index].points"
style="width: 110px"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="{ $index }">
<el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<FormItem label="活动时间" prop="rangeTime">
<DatePicker type="datetimerange" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择" :options="options" style="width: 260px">
</DatePicker>
</FormItem>
<el-form-item label="活动时间" prop="rangeTime">
<el-date-picker
type="datetimerange"
v-model="form.rangeTime"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择"
:disabled-date="options.disabledDate"
style="width: 260px"
/>
</el-form-item>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交
</Button
>
<el-button link @click="closeCurrentPage">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
</div>
</template>
<script>
import {addPointsGoods, getPointsGoodsCategoryList} from "@/api/promotion";
import {regular} from "@/utils";
import { addPointsGoods, getPointsGoodsCategoryList } from "@/api/promotion";
import skuSelect from "@/components/lili-dialog";
export default {
@@ -105,105 +127,17 @@ export default {
data() {
return {
form: {
rangeTime: ["",""],
promotionGoodsList: [], // 活动商品列表
rangeTime: ["", ""],
promotionGoodsList: [],
},
showTable: true,
promotionGoodsList: [], // 活动商品列表
categoryList: [], // 分类列表
submitLoading: false, // 添加或编辑提交状态
selectedGoods: [], // 已选商品列表，便于删除
promotionGoodsList: [],
categoryList: [],
submitLoading: false,
selectedGoods: [],
formRule: {
rangeTime: [{required: true, message: "请选择活动时间"}],
rangeTime: [{ required: true, message: "请选择活动时间" }],
},
columns: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
render: (h, params) => {
return h("div", params.row.goodsName);
},
},
{
title: "SKU编码",
slot: "skuId",
minWidth: 120,
},
{
title: "店铺名称",
key: "storeName",
minWidth: 60,
render: (h, params) => {
return h("div", params.row.storeName);
},
},
{
title: "商品价格",
key: "price",
minWidth: 40,
render: (h, params) => {
return h("priceColorScheme", {props: {value: params.row.price, color: this.$mainColor}});
},
},
{
title: "库存",
key: "quantity",
minWidth: 20,
render: (h, params) => {
return h("div", params.row.quantity);
},
},
{
title: "结算价格",
slot: "settlementPrice",
minWidth: 40,
},
{
title: "分类",
slot: "pointsGoodsCategory",
minWidth: 60,
},
{
title: "活动库存",
slot: "activeStock",
minWidth: 40,
},
{
title: "兑换积分",
slot: "points",
minWidth: 40,
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delGoods(params.index);
},
},
},
"删除"
);
},
},
],
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
@@ -215,23 +149,21 @@ export default {
await this.getCategory();
},
methods: {
// 获取商品分类
async getCategory() {
let res = await getPointsGoodsCategoryList();
this.categoryList = res.result.records;
},
/** 保存积分商品 */
handleSubmit() {
this.form.startTime=this.form.rangeTime[0]
this.form.endTime=this.form.rangeTime[1]
this.form.startTime = this.form.rangeTime[0];
this.form.endTime = this.form.rangeTime[1];
this.$refs.form.validate((valid) => {
if (valid) {
let params = this.promotionGoodsList;
const start = this.$options.filters.unixToDate(this.form.startTime / 1000);
const end = this.$options.filters.unixToDate(this.form.endTime / 1000);
const start = this.$filters.unixToDate(this.form.startTime / 1000);
const end = this.$filters.unixToDate(this.form.endTime / 1000);
if (!params || params.length === 0) {
this.$Modal.warning({title: "提示", content: "请选择指定商品"});
this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
return;
}
@@ -251,23 +183,19 @@ export default {
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-points-goods");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
// 选择分类
changeCategory(val, index) {
this.promotionGoodsList[index].pointsGoodsCategoryName = val.label;
changeCategory(categoryId, index) {
const item = this.categoryList.find((c) => c.id === categoryId);
this.promotionGoodsList[index].pointsGoodsCategoryName = item ? item.name : "";
},
// 变更选中状态
changeSelect(e) {
// 已选商品批量选择
this.selectedGoods = e;
},
delSelectGoods() {
// 多选删除商品
if (this.selectedGoods.length <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
@@ -287,11 +215,9 @@ export default {
});
},
delGoods(index) {
// 删除商品
this.promotionGoodsList.splice(index, 1);
},
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
data.forEach((e) => {
@@ -300,7 +226,6 @@ export default {
this.$refs.skuSelect.goodsData = data;
},
selectedGoodsData(item) {
// 回显已选商品
let list = [];
item.forEach((e) => {
const obj = {
@@ -316,7 +241,7 @@ export default {
goodsName: e.goodsName || "",
quantity: e.quantity || "",
storeName: e.storeName || "",
price: e.price || ""
price: e.price || "",
};
list.push(obj);
});

278
manager/src/views/promotions/points-goods/points-goods-edit.vue
View File

@@ -1,86 +1,84 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<h4>积分商品信息</h4>
<div class="form-item-view">
<FormItem label="商品名称">
<el-form-item label="商品名称">
<div>{{ form.goodsSku.goodsName }}</div>
</FormItem>
<FormItem label="SKU编码">
</el-form-item>
<el-form-item label="SKU编码">
<div>{{ form.goodsSku.id }}</div>
</FormItem>
<FormItem label="店铺名称">
</el-form-item>
<el-form-item label="店铺名称">
<div>{{ form.goodsSku.storeName }}</div>
</FormItem>
<FormItem label="商品价格">
</el-form-item>
<el-form-item label="商品价格">
<div>
<priceColorScheme :value="form.goodsSku.price" :color="$mainColor"></priceColorScheme>
<priceColorScheme :value="form.goodsSku.price" :color="$mainColor" />
</div>
</FormItem>
<FormItem label="库存">
</el-form-item>
<el-form-item label="库存">
<div>{{ form.goodsSku.quantity }}</div>
</FormItem>
<FormItem label="结算价格" prop="settlementPrice">
<Input
</el-form-item>
<el-form-item label="结算价格" prop="settlementPrice">
<el-input
type="number"
v-model="form.settlementPrice"
placeholder="请填写结算价格"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="分类" prop="pointsGoodsCategoryId">
<Select
</el-form-item>
<el-form-item label="分类" prop="pointsGoodsCategoryId">
<el-select
v-model="form.pointsGoodsCategoryId"
:label-in-value="true"
@on-change="changeCategory"
placeholder="请选择分类"
style="width: 260px"
@change="changeCategory"
>
<Option v-for="item in categoryList" :value="item.id" :key="item.id">{{
item.name
}}</Option>
</Select>
</FormItem>
<FormItem label="活动库存" prop="activeStock">
<Input
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="活动库存" prop="activeStock">
<el-input
type="number"
v-model="form.activeStock"
placeholder="请填写活动库存"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="兑换积分" prop="points">
<Input
</el-form-item>
<el-form-item label="兑换积分" prop="points">
<el-input
type="number"
v-model="form.points"
placeholder="请填写兑换积分"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="活动开始时间">
<DatePicker
type="datetimerange"
</el-form-item>
<el-form-item label="活动开始时间">
<el-date-picker
v-model="form.rangeTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
style="width: 260px"
>
</DatePicker>
</FormItem>
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDate"
style="width: 360px"
/>
</el-form-item>
</div>
<div class="footer">
<Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>保存</Button
>
<el-button @click="closeCurrentPage" style="margin-right: 5px">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
</div>
</template>
@@ -95,92 +93,84 @@ export default {
name: "editPointsGoods",
data() {
return {
pointsGoodsCategoryId:'',
pointsGoodsCategoryName:'',
pointsGoodsCategoryId: "",
pointsGoodsCategoryName: "",
form: {
/** 活动名称 */
promotionName: "",
/** 报名截止时间 */
applyEndTime: "",
/** 活动开始时间 */
startTime: "",
/** 抢购时间段 */
seckillPeriod: [],
/** 申请规则 */
seckillRule: "",
goodsSku: {},
promotionStatus: "NEW",
rangeTime: [],
},
categoryList: [], // 分类列表
id: this.$route.query.id, // 活动id
submitLoading: false, // 添加或编辑提交状态
categoryList: [],
id: this.$route.query.id,
submitLoading: false,
formRule: {
settlementPrice: [{ required: true, message: "请填写结算价格" }],
pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
points: [{ required: true, message: "请填写兑换积分" }],
activeStock: [{ required: true, message: "请填写库存" }],
},
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
};
},
async mounted() {
await this.getCategory();
// 如果id不为空则查询信息
if (this.id) {
this.getData();
}
},
methods: {
// 分类
changeCategory(v){
console.log(v);
this.pointsGoodsCategoryId=v.value
this.pointsGoodsCategoryName=v.label
disabledDate(date) {
return date && date.getTime() < Date.now() - 86400000;
},
changeCategory(id) {
const item = this.categoryList.find((c) => c.id === id);
this.pointsGoodsCategoryId = id;
this.pointsGoodsCategoryName = item ? item.name : "";
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "edit-points-goods");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
// 获取商品数据
getData() {
getPointsGoodsById(this.id).then((res) => {
if (res.success) {
let data = res.result;
const data = res.result;
this.form = data;
data.rangeTime = [];
if (data.startTime && data.endTime) {
data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
data.rangeTime = [data.startTime, data.endTime];
}
if (data.pointsGoodsCategoryId) {
this.changeCategory(data.pointsGoodsCategoryId);
}
}
});
},
// 获取分类
async getCategory() {
let res = await getPointsGoodsCategoryList();
const res = await getPointsGoodsCategoryList();
this.categoryList = res.result.records;
},
/** 保存 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
const start = this.$options.filters.unixToDate(this.form.rangeTime[0] / 1000);
const end = this.$options.filters.unixToDate(this.form.rangeTime[1] / 1000);
this.form.startTime = start;
this.form.endTime = end;
this.submitLoading = true;
let params={
...this.form,
pointsGoodsCategoryId: this.pointsGoodsCategoryId,
pointsGoodsCategoryName:this.pointsGoodsCategoryName
if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
this.$Message.error("请选择活动时间");
return;
}
this.form.startTime = this.form.rangeTime[0];
this.form.endTime = this.form.rangeTime[1];
this.submitLoading = true;
const params = {
...this.form,
pointsGoodsCategoryId: this.pointsGoodsCategoryId || this.form.pointsGoodsCategoryId,
pointsGoodsCategoryName:
this.pointsGoodsCategoryName || this.form.pointsGoodsCategoryName,
};
updatePointsGoods(params).then((res) => {
this.submitLoading = false;
if (res.success) {
@@ -196,7 +186,6 @@ export default {
</script>
<style lang="scss" scoped>
/*编辑基本信息*/
.el-form {
padding-bottom: 80px;
@@ -207,7 +196,6 @@ export default {
}
}
/*平铺*/
div.base-info-item > div {
margin-left: 5%;
}
@@ -233,129 +221,17 @@ div.base-info-item {
align-items: flex-start;
justify-content: space-between;
padding-left: 80px;
.shop-category-text {
font-size: 12px;
}
}
.item-goods-properts-row {
display: flex;
flex-direction: row;
word-break: break-all;
white-space: normal;
width: 300px;
height: 100px;
}
.item-goods-properts {
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.form-item {
display: flex;
align-items: center;
}
/** 审核信息-拒绝原因 */
.auth-info {
color: red;
}
.el-form-item {
width: 30%;
min-width: 300px;
}
.goods-name-width {
width: 50%;
min-width: 300px;
}
.el-form-item__content {
margin-left: 120px;
text-align: left;
}
p.goods-group-manager {
padding-left: 7.5%;
text-align: left;
color: #999;
font-size: 13px;
}
/*teatarea*/
::v-deep .el-textarea {
width: 150%;
}
.seo-text {
width: 150%;
}
}
/*商品描述*/
.goods-intro {
line-height: 40;
}
/** 底部步骤 */
.footer {
width: 100%;
padding: 10px;
background-color: #ffc;
position: fixed;
bottom: 0px;
bottom: 0;
right: 0;
text-align: center;
z-index: 9999;
}
/*图片上传组件第一张图设置封面*/
.goods-images {
::v-deep li.el-upload-list__item:first-child {
position: relative;
}
::v-deep li.el-upload-list__item:first-child:after {
content: "封";
color: #fff;
font-weight: bold;
font-size: 12px;
position: absolute;
left: -15px;
top: -6px;
width: 40px;
height: 24px;
padding-top: 6px;
background: #13ce66;
text-align: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
}
.el-form-item__label {
word-break: break-all;
}
.step-view {
width: 33%;
height: 40px;
font-size: 19px;
text-align: center;
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
}
.page {
margin-top: 2vh;
margin-bottom: 5vh;
}
</style>

476
manager/src/views/promotions/points-goods/points-goods.vue
View File

@@ -1,146 +1,167 @@
<template>
<div class="search">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="商品名称">
<Input
type="text"
v-model="searchForm.goodsName"
placeholder="请输入商品名称"
clearable
style="width: 240px"
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<el-form-item label="商品名称">
<el-input
v-model="searchForm.goodsName"
placeholder="请输入商品名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="积分区间">
<el-input
v-model="searchForm.pointsS"
placeholder="请输入开始区间"
clearable
style="width: 110px"
/>
<span style="margin: 0 6px">-</span>
<el-input
v-model="searchForm.pointsE"
placeholder="请输入结束区间"
clearable
style="width: 110px"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.promotionStatus" clearable style="width: 240px">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</Form-item>
<Form-item label="积分区间">
<Input
type="text"
v-model="searchForm.pointsS"
placeholder="请输入开始区间"
clearable
style="width: 240px"
/>
-
<Input
type="text"
v-model="searchForm.pointsE"
placeholder="请输入结束区间"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="状态">
<Select v-model="searchForm.promotionStatus" style="width: 240px">
<Option v-for="item in statusList" :value="item.value" :key="item.value">{{
item.label
}}</Option>
</Select>
</Form-item>
<Form-item label="SKU编码">
<Input
type="text"
v-model="searchForm.skuId"
placeholder="请输入SKU编码"
clearable
style="width: 240px"
/>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Row>
</Card>
<Card>
<Row class="operation padding-row">
<Button @click="addPointsGoods" type="primary">添加积分商品</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table">
<template slot-scope="{ row }" slot="goodsName">
<div>
<a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
row.goodsName
}}</a>
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
<div slot="content">
</el-select>
</el-form-item>
<el-form-item label="SKU编码">
<el-input
v-model="searchForm.skuId"
placeholder="请输入SKU编码"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<div class="operation padding-row">
<el-button type="primary" @click="addPointsGoods">添加积分商品</el-button>
</div>
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<el-table-column label="商品名称" min-width="200" fixed="left" show-overflow-tooltip>
<template #default="{ row }">
<template v-if="row">
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
<template #reference>
<img
src="../../../assets/qrcode.svg"
class="hover-pointer"
width="20"
height="20"
alt="qrcode"
/>
</template>
<vue-qr
:text="wapLinkTo(row.goodsId, row.skuId)"
:margin="0"
colorDark="#000"
colorLight="#fff"
color-dark="#000"
color-light="#fff"
:size="150"
></vue-qr>
</div>
<img
src="../../../assets/qrcode.svg"
style="vertical-align: middle"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</Poptip>
</div>
</template>
<template slot-scope="{ row }" slot="price">
<div>
<priceColorScheme :value="row.originalPrice" :color="$mainColor"></priceColorScheme>
</div>
</template>
<template slot-scope="{ row }" slot="settlementPrice">
<div>
<priceColorScheme :value="row.settlementPrice" :color="$mainColor"></priceColorScheme>
</div>
</template>
<template slot-scope="{ row }" slot="quantity">
<div>{{ row.activeStock }}</div>
</template>
<template slot-scope="{ row }" slot="startTime">
<div>{{ row.startTime }}</div>
<div>{{ row.endTime }}</div>
</template>
<template slot-scope="{ row }" slot="action">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="edit(row.id)"
>编辑</a>
<span
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="margin:0 8px;color:#dcdee2"
>|</span>
<a
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="statusChanged(row.id, 'CLOSE')"
>关闭</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
/>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column label="市场价" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.originalPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="结算价" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.settlementPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存数量" width="100">
<template #default="{ row }">
<span v-if="row">{{ row.activeStock }}</span>
</template>
</el-table-column>
<el-table-column prop="activeStock" label="活动剩余库存" width="130" />
<el-table-column prop="points" label="兑换积分" width="100" />
<el-table-column prop="storeName" label="所属店铺" width="120" show-overflow-tooltip />
<el-table-column label="活动开始时间" min-width="160">
<template #default="{ row }">
<template v-if="row">
<div>{{ row.startTime }}</div>
<div>{{ row.endTime }}</div>
</template>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="pointsGoodsCategoryName" label="分类" width="100" show-overflow-tooltip />
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
class="link-text"
@click="edit(row.id)"
>
编辑
</a>
<template v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'">
<span class="op-split">|</span>
<a class="link-text" @click="statusChanged(row.id, 'CLOSE')">关闭</a>
</template>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
@@ -151,156 +172,94 @@ import {
deletePointsGoodsStatus,
} from "@/api/promotion";
import vueQr from "vue-qr";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
name: "pointsGoods",
components: {
"vue-qr": vueQr,
},
components: { vueQr },
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime",
order: "desc", // 默认排序方式
},
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
statusList: [
// 活动状态
{ label: "未开始", value: "NEW" },
{ label: "已开始", value: "START" },
{ label: "已结束", value: "END" },
{ label: "已关闭", value: "CLOSE" },
],
columns: [
// 表头
{
title: "商品名称",
slot: "goodsName",
minWidth: 150,
fixed: "left",
tooltip: true,
},
{
title: "市场价",
slot: "price",
width: 100,
},
{
title: "结算价",
slot: "settlementPrice",
width: 100,
},
{
title: "库存数量",
slot: "quantity",
width: 100,
},
{
title: "活动剩余库存",
key: "activeStock",
width: 150,
},
{
title: "兑换积分",
key: "points",
width: 100,
},
{
title: "所属店铺",
key: "storeName",
width: 100,
},
{
title: "活动开始时间",
slot: "startTime",
minWidth: 150,
},
{
title: "状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "分类",
key: "pointsGoodsCategoryName",
width: 100,
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
width: 150,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
data: [],
total: 0,
};
},
methods: {
// 初始化数据
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
},
// 跳转添加商品页面
addPointsGoods() {
this.$router.push({ name: "add-points-goods" });
},
// 分页 修改页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 修改页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
if (this.searchForm.pointsS) {
this.searchForm.points =
this.searchForm.pointsS +
"_" +
(this.searchForm.pointsE ? this.searchForm.pointsE : "");
}
this.getDataList();
},
// 获取列表数据
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
if (this.searchForm.pointsS) {
this.searchForm.points =
this.searchForm.pointsS + "_" + (this.searchForm.pointsE ? this.searchForm.pointsE : "");
}
this.getDataList();
},
getDataList() {
this.loading = true;
getPointsGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
getPointsGoodsList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
// 编辑
edit(id) {
this.$router.push({ name: "edit-points-goods", query: { id: id } });
this.$router.push({ name: "edit-points-goods", query: { id } });
},
// 启用 停用积分商品
statusChanged(id, status, startTime, endTime) {
let text = "";
let params = {};
if (status == "START") {
text = "开启";
params = {
startTime: startTime,
endTime: endTime,
};
params = { startTime, endTime };
} else if (status == "CLOSE") {
text = "关闭";
}
@@ -319,14 +278,12 @@ export default {
},
});
},
// 删除积分商品
close(id) {
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除此积分商品?",
loading: true,
onOk: () => {
// 删除
deletePointsGoodsStatus(id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -343,3 +300,28 @@ export default {
},
};
</script>
<style scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.mr_10 {
margin-right: 10px;
}
.hover-pointer {
cursor: pointer;
vertical-align: middle;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
.padding-row {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
</style>

143
manager/src/views/promotions/seckill/seckill-add.vue
View File

@@ -1,79 +1,75 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<el-card>
<el-form ref="form" :model="form" label-width="120px" :rules="formRule">
<div class="base-info-item">
<h4>基本信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input
type="text"
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="form.promotionName"
placeholder="请填写活动名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="报名截止时间" prop="applyEndTime">
<DatePicker
type="datetime"
</el-form-item>
<el-form-item label="报名截止时间" prop="applyEndTime">
<el-date-picker
v-model="form.applyEndTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
clearable
style="width: 200px"
>
</DatePicker>
</FormItem>
<FormItem label="活动开始时间" prop="startTime">
<DatePicker
type="datetime"
v-model="form.startTime"
format="yyyy-MM-dd"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择"
clearable
style="width: 200px"
>
</DatePicker>
</FormItem>
<FormItem label="抢购时间段" prop="seckillPeriod">
<Tag
/>
</el-form-item>
<el-form-item label="活动开始时间" prop="startTime">
<el-date-picker
v-model="form.startTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="抢购时间段" prop="seckillPeriod">
<el-tag
v-for="item in form.seckillPeriod"
:key="item"
:name="item"
closable
style="marrgin-left: 10px"
@on-close="removePeriodTime"
>{{ item >= 10 ? item : "0" + item }}:00</Tag
class="period-tag"
@close="removePeriodTime(item)"
>
<InputNumber
{{ item >= 10 ? item : "0" + item }}:00
</el-tag>
<el-input-number
v-if="showAddPeriod"
:max="23"
:min="0"
v-model="periodTime"
v-show="showAddPeriod"
@on-blur="addPeriodTime"
></InputNumber>
<Button type="default" @click="addPeriod">添加时间段</Button>
</FormItem>
<FormItem label="申请规则" prop="seckillRule">
<Input
type="text"
@blur="addPeriodTime"
/>
<el-button @click="addPeriod">添加时间段</el-button>
</el-form-item>
<el-form-item label="申请规则" prop="seckillRule">
<el-input
v-model="form.seckillRule"
placeholder="申请规则"
clearable
style="width: 260px"
/>
</FormItem>
</el-form-item>
</div>
<div class="foot-btn">
<Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交</Button
>
<el-button @click="closeCurrentPage" style="margin-right: 5px">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</div>
</Form>
</Card>
</el-form>
</el-card>
</div>
</template>
@@ -85,23 +81,17 @@ export default {
data() {
return {
form: {
/** 活动名称 */
promotionName: "",
/** 报名截止时间 */
applyEndTime: "",
/** 活动开始时间 */
startTime: "",
/** 抢购时间段 */
seckillPeriod: [],
/** 申请规则 */
seckillRule: "",
promotionStatus: "NEW",
},
id: this.$route.query.id, // 活动id
periodTime: null, // 抢购时间段
showAddPeriod: false, // input显隐
submitLoading: false, // 添加或编辑提交状态
id: this.$route.query.id,
periodTime: null,
showAddPeriod: false,
submitLoading: false,
formRule: {
promotionName: [{ required: true, message: "请填写活动名称" }],
applyEndTime: [{ required: true, message: "请填写报名截止时间" }],
@@ -112,57 +102,38 @@ export default {
};
},
mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getData();
}
},
methods: {
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "manager-seckill-add");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
// 获取详情数据
getData() {
seckillDetail(this.id).then((res) => {
if (res.success) {
let data = res.result;
const data = res.result;
data.seckillPeriod = res.result.hours.split(",");
this.form = data;
}
});
},
addPeriod() {
// 添加时间段显示input
this.addPeriodTime();
this.showAddPeriod = true;
},
addPeriodTime() {
// 添加秒杀时间段
this.showAddPeriod = false;
if (
this.periodTime !== null &&
!this.form.seckillPeriod.includes(this.periodTime)
) {
if (this.periodTime !== null && !this.form.seckillPeriod.includes(this.periodTime)) {
this.form.seckillPeriod.push(this.periodTime);
}
},
removePeriodTime(event, name) {
// 移除秒杀时间段
removePeriodTime(name) {
this.form.seckillPeriod = this.form.seckillPeriod.filter((i) => i !== name);
},
// // 申请截止时间格式化
// applyTimeChange (time) {
// console.log(time);
// this.form.applyEndTime = time
// },
// // 开始时间格式化
// startTimeChange (time) {
// this.form.startTime = time
// },
/** 添加秒杀活动 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
@@ -172,12 +143,11 @@ export default {
delete this.form.updateTime;
delete this.form.endTime;
delete this.form.seckillApplyList;
let params = this.form;
params.startTime = this.$options.filters.unixToDate(this.form.startTime / 1000);
params.applyEndTime = this.$options.filters.unixToDate(
this.form.applyEndTime / 1000
);
// 编辑
const params = { ...this.form };
const startTs = new Date(this.form.startTime).getTime();
const applyTs = new Date(this.form.applyEndTime).getTime();
params.startTime = this.$filters.unixToDate(startTs / 1000);
params.applyEndTime = this.$filters.unixToDate(applyTs / 1000);
updateSeckill(params).then((res) => {
this.submitLoading = false;
if (res && res.success) {
@@ -204,7 +174,12 @@ h4 {
line-height: 40px;
text-align: left;
}
.ivu-form-item {
.period-tag {
margin-right: 10px;
}
:deep(.el-form-item) {
margin-bottom: 30px;
}
</style>

333
manager/src/views/promotions/seckill/seckill-goods.vue
View File

@@ -1,246 +1,136 @@
<template>
<div class="seckill-goods">
<Card>
<Table border :columns="columns" :data="data">
<template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }}
</template>
<template slot-scope="{ row }" slot="hours">
<Tag v-for="item in unixHours(row.hours)" :key="item">{{ item }}</Tag>
</template>
</Table>
<Table
:loading="loading"
<el-card>
<el-table border :data="data" style="width: 100%">
<el-table-column prop="promotionName" label="活动名称" min-width="120" />
<el-table-column prop="startTime" label="活动开始时间" min-width="160" />
<el-table-column label="报名截止时间" min-width="160">
<template #default="{ row }">
<span v-if="row">{{ unixDate(row.applyEndTime) }}</span>
</template>
</el-table-column>
<el-table-column label="时间场次" min-width="160">
<template #default="{ row }">
<template v-if="row">
<el-tag v-for="item in unixHours(row.hours)" :key="item" class="hour-tag">{{ item }}</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="活动状态" min-width="100">
<template #default="{ row }">
<el-tag v-if="row" :type="seckillStatusTagType(row.promotionStatus)">
{{ seckillStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
</el-table>
<el-table
ref="table"
v-loading="loading"
border
class="operation"
:columns="goodsColumns"
:data="goodsList"
ref="table"
style="width: 100%"
>
<template slot-scope="{ row }" slot="originalPrice">
<div>
<priceColorScheme :value="row.originalPrice" :color="$mainColor"></priceColorScheme>
</div>
</template>
<el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
<el-table-column label="商品价格" width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.originalPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="库存" width="90">
<template #default="{ row }">
<span v-if="row">{{ row.quantity }}</span>
</template>
</el-table-column>
<el-table-column label="活动价格" width="100">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.price, "￥") }}</span>
</template>
</el-table-column>
<el-table-column prop="storeName" label="商家名称" min-width="100" show-overflow-tooltip />
<el-table-column label="活动场次" width="100">
<template #default="{ row }">
<el-tag v-if="row">{{ row.timeLine + ":00" }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center">
<template #default="{ row, $index }">
<a v-if="row" class="link-text" @click="delGoods($index, row)">删除</a>
</template>
</el-table-column>
</el-table>
<template slot-scope="{ row }" slot="quantity">
<div>{{ row.quantity }}</div>
</template>
<template slot-scope="{ row }" slot="price">
<div>
<priceColorScheme :value="row.price" :color="$mainColor"></priceColorScheme>
</div>
</template>
<template slot-scope="{ row }" slot="time">
<Tag>{{ row.timeLine + ":00" }}</Tag>
</template>
<template slot-scope="{ row }" slot="QRCode">
<img
v-if="row.QRCode"
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template>
<template slot-scope="{ row, index }" slot="action">
<a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="delGoods(index, row)">删除</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import {
seckillGoodsList,
seckillDetail,
auditApplySeckill,
delSeckillGoods,
} from "@/api/promotion.js";
export default {
data() {
return {
promotionStatus: "", // 活动状态
showModal: false, // modal显隐
openTip: true, // 显示提示
loading: false, // 表单加载状态
submitLoading: false, // 加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
},
total: 0, // 总数
selectList: [], // 多选数据
selectCount: 0, // 多选计数
data: [], // 表单数据
columns: [
// 表头
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
},
{
title: "报名截止时间",
slot: "applyEndTime",
},
{
title: "时间场次",
slot: "hours",
},
{
title: "活动状态",
key: "promotionStatus",
minWidth: 80,
sortable: false,
render: (h, params) => {
if (params.row.promotionStatus == "NEW") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "新建",
},
}),
]);
} else if (params.row.promotionStatus == "START") {
return h("div", [
h("Badge", {
props: {
status: "success",
text: "开始",
},
}),
]);
} else if (params.row.promotionStatus == "END") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "结束",
},
}),
]);
} else if (params.row.promotionStatus == "CLOSE") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "废弃",
},
}),
]);
}
},
},
],
goodsColumns: [
// 商品表单
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
tooltip: true,
},
{
title: "商品价格",
slot: "originalPrice",
width: 110,
},
{
title: "库存",
slot: "quantity",
minWidth: 30,
width: 90,
},
{
title: "活动价格",
slot: "price",
width: 100,
},
{
title: "商家名称",
key: "storeName",
minWidth: 100,
tooltip: true,
},
{
title: "活动场次",
width: 100,
slot: "time",
},
// {
// title: "状态",
// slot: "promotionApplyStatus",
// width: 90,
// },
{
title: "操作",
slot: "action",
width: 150,
align: "center",
},
],
goodsList: [], // 商品列表
params: {
// 请求参数
seckillId: this.$route.query.id,
applyStatus: "PASS",
failReason: "",
ids: "",
},
rules: {
// 验证规则
failReason: [{ required: true, message: "请输入拒绝原因" }],
promotionStatus: "",
loading: false,
searchForm: {
pageNumber: 1,
pageSize: 20,
},
total: 0,
data: [],
goodsList: [],
};
},
methods: {
// 初始化数据
seckillStatusText(status) {
const map = {
NEW: "新建",
START: "开始",
END: "结束",
CLOSE: "废弃",
};
return map[status] || status || "-";
},
seckillStatusTagType(status) {
const map = {
NEW: "danger",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getSeckillMsg();
},
// 分页 改变页码
changePage(v) {
this.searchForm.pageNumber = v;
changePage() {
this.getDataList();
this.clearSelectAll();
},
// 分页 改变页数
changePageSize(v) {
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 清除选中状态
clearSelectAll() {
this.$refs.table.selectAll(false);
},
getDataList() {
// 获取商品详情
this.loading = true;
this.searchForm.seckillId = this.$route.query.id;
seckillGoodsList(this.searchForm).then((res) => {
@@ -251,9 +141,7 @@ export default {
}
});
},
getSeckillMsg() {
// 获取活动详情
seckillDetail(this.$route.query.id).then((res) => {
if (res.success && res.result) {
this.data = [];
@@ -264,7 +152,6 @@ export default {
});
},
delGoods(index, row) {
// 删除商品
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除该商品吗?删除后不可恢复",
@@ -283,12 +170,10 @@ export default {
});
},
unixDate(time) {
// 处理报名截止时间
return this.$options.filters.unixToDate(new Date(time) / 1000);
return this.$filters.unixToDate(new Date(time) / 1000);
},
unixHours(item) {
// 处理小时场次
let hourArr = item.split(",");
const hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
hourArr[i] += ":00";
}
@@ -300,14 +185,24 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.operation {
margin: 10px 0;
}
.reason {
.hour-tag {
margin-right: 4px;
margin-bottom: 4px;
}
.link-text {
color: #409eff;
cursor: pointer;
color: #2d8cf0;
font-size: 12px;
text-decoration: none;
}
.mt_10 {
margin-top: 10px;
}
</style>

119
manager/src/views/promotions/seckill/seckill-setup.vue
View File

@@ -1,23 +1,37 @@
<template>
<div v-if="templateShow">
<Form :model="form" :label-width="120">
<FormItem label="每日场次设置">
<Row :gutter="16" class="row">
<Col class="time-item" @click.native="handleClickTime(item,index)" v-for="(item,index) in this.times" :key="index" span="3">
<div class="time" :class="{'active':item.check}">{{item.time}}:00</div>
</Col>
</Row>
</FormItem>
<FormItem label="秒杀规则">
<Input type="textarea" :autosize="{minRows: 4,}" v-model="form.seckillRule" placeholder="申请规则" clearable style="width: 360px; margin-left:10px" />
</FormItem>
<FormItem>
<el-form :model="form" label-width="120px">
<el-form-item label="每日场次设置">
<el-row :gutter="16" class="row">
<el-col
v-for="(item, index) in times"
:key="index"
:span="3"
class="time-item"
>
<div class="time" :class="{ active: item.check }" @click="handleClickTime(item, index)">
{{ item.time }}:00
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="秒杀规则">
<el-input
v-model="form.seckillRule"
type="textarea"
:autosize="{ minRows: 4 }"
placeholder="申请规则"
clearable
style="width: 360px"
/>
</el-form-item>
<el-form-item>
<div class="foot-btn">
<Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
<el-button @click="closeCurrentPage">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</FormItem>
</Form>
</el-form-item>
</el-form>
</div>
</template>
@@ -26,45 +40,29 @@ import { getSetting, setSetting } from "@/api/index";
export default {
data() {
return {
templateShow:false, // 设置是否显示
templateShow: false,
submitLoading: false,
times: [], //时间集合 1-24点
times: [],
form: {
seckillRule: "",
},
};
},
mounted() {
/**
* 初始化
*/
this.init();
},
methods: {
/**
* 关闭当前页面
*/
closeCurrentPage() {
this.$store.commit("removeTag", "manager-seckill-add");
localStorage.pageOpenedList = JSON.stringify(
this.$store.state.app.pageOpenedList
);
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
/**
* 提交秒杀信息
*/
async handleSubmit() {
let hours = this.times
.filter((item) => {
return item.check;
})
.map((item) => {
return item.time;
})
const hours = this.times
.filter((item) => item.check)
.map((item) => item.time)
.join(",");
let result = await setSetting("SECKILL_SETTING", {
const result = await setSetting("SECKILL_SETTING", {
seckillRule: this.form.seckillRule,
hours,
});
@@ -73,42 +71,30 @@ export default {
this.init();
}
},
/**
* 初始化当前信息
*/
async init() {
let result = await getSetting("SECKILL_SETTING");
const result = await getSetting("SECKILL_SETTING");
if (result.success) {
this.templateShow = true
this.templateShow = true;
this.form.seckillRule = result.result.seckillRule;
this.times=[]
this.times = [];
for (let i = 0; i < 24; i++) {
// 将数据拆出
let matched = false;
if (result.result.hours) {
let way = result.result.hours.split(",");
const way = result.result.hours.split(",");
way.forEach((hours) => {
if (hours == i) {
this.times.push({
time: i,
check: true,
});
this.times.push({ time: i, check: true });
matched = true;
}
});
}
if (!this.times[i]) {
this.times.push({
time: i,
check: false,
});
if (!matched) {
this.times.push({ time: i, check: false });
}
}
}
},
/**
* 选中时间
*/
handleClickTime(val, index) {
handleClickTime(val) {
val.check = !val.check;
},
},
@@ -121,10 +107,8 @@ export default {
}
.foot-btn {
margin-left: 10px;
}
.time-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
@@ -140,11 +124,10 @@ export default {
align-items: center;
display: flex;
background: #f3f5f7;
height: 100%;
}
.time-item {
height: 50px;
margin: 8px 0;
font-size: 15px;
}
.time-item {
margin: 8px 0;
}
</style>

379
manager/src/views/promotions/seckill/seckill.vue
View File

@@ -1,128 +1,139 @@
<template>
<div class="seckill">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="活动名称" prop="promotionName">
<Input
type="text"
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 240px"
/>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 240px"
>
</DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
<div class="search seckill">
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="70px"
class="search-form"
@keyup.enter="handleSearch"
>
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item label="活动状态" prop="promotionStatus">
<el-select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 240px"
>
</Form>
</Row>
</Card>
<Card>
<Tabs value="list" class="mt_10" @on-click="clickTabPane">
<TabPane label="秒杀活动列表" name="list">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
<el-option label="未开始" value="NEW" />
<el-option label="已开始/上架" value="START" />
<el-option label="已结束/下架" value="END" />
<el-option label="紧急关闭/作废" value="CLOSE" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="selectDate"
type="daterange"
clearable
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-tabs v-model="activeTab" class="mt_10">
<el-tab-pane label="秒杀活动列表" name="list">
<el-table
ref="table"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
>
<template slot-scope="{ row }" slot="action">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="edit(row)"
>编辑</a>
<a
v-else
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="manage(row)"
>查看</a>
<span
v-if="row.promotionStatus"
style="margin:0 8px;color:#dcdee2"
>|</span>
<a
v-if="row.promotionStatus == 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
@click="manage(row)"
>管理</a>
<span
v-if="row.promotionStatus == 'NEW'"
style="margin:0 8px;color:#dcdee2"
>|</span>
<a
v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="off(row)"
>关闭</a>
</template>
</Table>
<el-table-column
prop="promotionName"
label="活动名称"
min-width="140"
show-overflow-tooltip
/>
<el-table-column prop="startTime" label="开始时间" width="180" />
<el-table-column prop="applyEndTime" label="申请截止时间" width="180" />
<el-table-column label="活动状态" width="110">
<template #default="{ row }">
<el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
{{ promotionStatusText(row.promotionStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="seckillRule"
label="申请规则"
min-width="120"
show-overflow-tooltip
/>
<el-table-column label="操作" width="250" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
class="link-text"
@click="edit(row)"
>
编辑
</a>
<a v-else class="link-text" @click="manage(row)">查看</a>
<span v-if="row.promotionStatus" class="op-split">|</span>
<a
v-if="row.promotionStatus == 'NEW'"
class="link-text"
@click="manage(row)"
>
管理
</a>
<span v-if="row.promotionStatus == 'NEW'" class="op-split">|</span>
<a
v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
class="link-text"
@click="off(row)"
>
关闭
</a>
</template>
</template>
</el-table-column>
</el-table>
<Row type="flex" justify="end" class="mt_10">
<Page
style="margin: 20px 0"
:current="searchForm.pageNumber"
<div class="mt_10" style="display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
:page-sizes="[20, 50, 100]"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</TabPane>
<TabPane label="秒杀活动设置" name="setup">
<setupSeckill v-if="setupFlag"></setupSeckill>
</TabPane>
</Tabs>
</Card>
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-tab-pane>
<el-tab-pane label="秒杀活动设置" name="setup" lazy>
<setupSeckill />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
import { getSeckillList, delSeckill, updateSeckillStatus } from "@/api/promotion";
import setupSeckill from "@/views/promotions/seckill/seckill-setup";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
name: "seckill",
@@ -131,103 +142,62 @@ export default {
},
data() {
return {
activeTab: "list",
selectDate: [],
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime",
order: "desc", // 默认排序方式
},
setupFlag: false, //默认不请求设置
columns: [
// 表单
{
title: "活动名称",
key: "promotionName",
minWidth: 130,
tooltip: true,
},
{
title: "开始时间",
key: "startTime",
width: 180,
},
{
title: "申请截止时间",
key: "applyEndTime",
width: 180,
},
{
title: "活动状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "申请规则",
key: "seckillRule",
minWidth: 120,
tooltip: true,
},
{
title: "操作",
slot: "action",
align: "center",
width: 250,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
loading: true,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
data: [],
total: 0,
};
},
methods: {
// tab栏点击切换列表和设置
clickTabPane(name) {
if (name == "setup") {
this.setupFlag = true;
} else {
this.setupFlag = false;
}
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
// 初始化信息
init() {
this.getDataList();
},
// 分页 改变页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 改变页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
edit(v) {
// 编辑
this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
},
manage(v) {
// 管理
this.$router.push({ name: "seckill-goods", query: { id: v.id } });
},
off(v) {
// 下架
this.$Modal.confirm({
title: "提示",
content: "您确定要下架该活动吗？",
@@ -242,7 +212,6 @@ export default {
});
},
expire(v) {
// 作废
this.$Modal.confirm({
title: "提示",
content: "您确定要作废该活动吗？",
@@ -256,24 +225,25 @@ export default {
},
});
},
// 获取数据集合
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
// 带多条件搜索参数获取表单数据
getSeckillList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
getSeckillList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
},
mounted() {
@@ -281,8 +251,19 @@ export default {
},
};
</script>
<style lang="scss">
.mr_5 {
margin: 0 5px;
<style lang="scss" scoped>
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
margin-right: 5px;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
.mt_10 {
margin-top: 10px;
}
</style>