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

升级Vue3，iView替换ElementPlus

Browse Source 
- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
2026-06-05 17:49:43 +08:00
parent 615ee91511
commit 832fda813b
322 changed files with 25693 additions and 24453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

519
seller/src/views/promotion/coupon/coupon-publish.vue
View File

@@ -1,166 +1,103 @@
<template>
<div class="wrapper">
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<div>
<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 label="折扣" prop="discount" v-if="form.couponType == 'DISCOUNT'">
<InputNumber
</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'"
>
<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"/>
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="发放数量" v-if="form.getType == 'FREE'" prop="publishNum">
<Input
<el-form-item label="店铺承担比例" prop="storeCommission">
<el-input
:disabled="disabled"
v-model="form.storeCommission"
placeholder="店铺承担比例"
style="width: 260px"
>
<template #append>%</template>
</el-input>
<span class="describe">店铺承担比例，输入0-100之间数值</span>
</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"
/>
<span class="tips ml_10">如果发放数量为0时,则代表不限制发放数量</span>
</FormItem>
</div>
<h4>使用限制</h4>
<div class="form-item-view">
<FormItem label="消费门槛" prop="consumeThreshold">
<Input
:disabled="disabled"
type="text"
v-model="form.consumeThreshold"
placeholder="消费门槛"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem
label="领取限制"
v-if="form.getType == 'FREE'"
<div class="tips">如果发放数量为0时,则代表不限制发放数量</div>
</el-form-item>
<el-form-item
label="领取数量限制"
prop="couponLimitNum"
v-if="form.getType === 'FREE'"
>
<Input
<el-input
:disabled="disabled"
v-model="form.couponLimitNum"
placeholder="领取限制"
clearable
style="width: 260px"
/>
<span class="tips ml_10">如果领取限制为0时,则代表不限制领取数量</span>
</FormItem>
<FormItem label="有效期" prop="rangeTime">
<DatePicker
:disabled="disabled"
type="datetimerange"
v-model="form.rangeTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
style="width: 260px"
>
</DatePicker>
</FormItem>
<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>
<FormItem 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
:disabled="disabled"
type="error"
ghost
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除</Button
>
</div>
<Table
class="mt_10"
:disabled="disabled"
border
:columns="columns"
:data="form.promotionGoodsList"
@on-selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="QRCode">
<img
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template>
</Table>
</FormItem>
<FormItem v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
<Cascader
:disabled="disabled"
@on-change="getGoodsCategory"
:data="goodsCategoryList"
style="width: 300px"
v-model="form.scopeIdGoods"
></Cascader>
</FormItem>
<FormItem label="范围描述" prop="description">
<Input
<div class="tips">如果领取数量为0时,则代表不限制领取数量</div>
</el-form-item>
<el-form-item label="范围描述" prop="description">
<el-input
:disabled="disabled"
v-model="form.description"
type="textarea"
@@ -170,40 +107,168 @@
clearable
style="width: 260px"
/>
</FormItem>
<div>
<Button
</el-form-item>
</div>
<h4>使用限制</h4>
<div class="form-item-view">
<el-form-item label="消费门槛" prop="consumeThreshold">
<el-input
:disabled="disabled"
type="text"
@click="$router.push({ name: 'coupon' })"
>返回</Button
v-model="form.consumeThreshold"
placeholder="消费门槛"
clearable
style="width: 260px"
/>
</el-form-item>
<el-form-item label="有效期" prop="rangeTime">
<div v-if="form.getType == 'ACTIVITY'">
<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">
<el-date-picker
:disabled="disabled"
type="datetimerange"
v-model="form.rangeTime"
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"
/>
</div>
<div class="effectiveDays" v-if="rangeTimeType == 0">
领取当天开始
<el-input-number
:disabled="disabled"
v-model="form.effectiveDays"
:min="1"
style="width: 100px"
:max="365"
/>
天内有效(1-365间的整数)
</div>
</el-form-item>
<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>
<el-form-item style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
<div style="display: flex; margin-bottom: 10px">
<el-button :disabled="disabled" type="primary" @click="openSkuList">选择商品</el-button>
<el-button
:disabled="disabled"
type="danger"
plain
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除</el-button>
</div>
<el-table
border
:data="form.promotionGoodsList"
style="width: 100%"
@selection-change="changeSelect"
>
<Button
<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>
<el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
<el-cascader
:disabled="disabled"
:options="goodsCategoryList"
style="width: 260px"
v-model="form.scopeIdGoods"
/>
</el-form-item>
<div>
<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>
<script>
import { saveShopCoupon, getShopCoupon, editShopCoupon } from "@/api/promotion";
import {
savePlatformCoupon,
getPlatformCoupon,
editPlatformCoupon,
} from "@/api/promotion";
import { getGoodsCategoryAll } from "@/api/goods";
import { regular } from "@/utils";
import skuSelect from "@/views/lili-dialog";
export default {
name: "addCoupon",
name: "edit-platform-coupon",
components: {
skuSelect,
},
watch: {
"form.getType": {
handler(val) {
if (val == "FREE") {
this.rangeTimeType = 1;
} else {
this.rangeTimeType = 0;
}
if (this.rangeTimeType == 0) {
delete this.formRule.rangeTime;
}
},
deep: true,
},
$route(e) {
this.id = e.query.id;
if (this.id) {
this.getCoupon();
} else {
this.$refs.form.resetFields();
}
},
},
data() {
const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) {
@@ -227,41 +292,37 @@ export default {
callback();
}
};
return {
modalType: 0, // 判断是新增还是编辑优惠券 0 新增 1 编辑
disabled: this.$route.query.onlyView,
rangeTimeType: 1,
modalType: 0,
form: {
/** 店铺承担比例 */
sellerCommission: 0,
/** 发行数量 */
publishNum: 1,
/** 运费承担者 */
storeCommission: 0,
publishNum: 0,
scopeType: "ALL",
/** 限领数量 */
couponLimitNum: 1,
/** 活动类型 */
couponType: "PRICE",
/** 优惠券名称 */
couponName: "",
promotionName: "",
getType: "FREE",
promotionGoodsList: [],
scopeIdGoods: [],
rangeDayType: "FIXEDTIME",
rangeDayType: "",
effectiveDays: 1,
},
id: this.$route.query.id,
submitLoading: false, // 添加或编辑提交状态
selectedGoods: [], // 已选商品列表，便于删除
goodsCategoryList: [], // 商品分类列表
submitLoading: false,
selectedGoods: [],
goodsCategoryList: [],
formRule: {
promotionName: [{ required: true, message: "活动名称不能为空" }],
couponName: [{ required: true, message: "优惠券名称不能为空" }],
price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
consumeThreshold: [
{ required: true, message: "请输入消费门槛" },
{ validator: checkWeight },
],
rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
couponDiscount: [
{ required: true, message: "请输入折扣" },
{
@@ -269,7 +330,7 @@ export default {
message: "请输入0-10的数字,可有一位小数",
},
],
sellerCommission: [
storeCommission: [
{ required: true, message: "请输入店铺承担比例" },
{ pattern: regular.rate, message: "请输入0-100的正整数" },
],
@@ -278,65 +339,11 @@ export default {
{ pattern: regular.Integer, message: "请输入正整数" },
],
couponLimitNum: [
{ required: true, message: "请输入领取限制" },
{ required: true, message: "领取限制不能为空" },
{ pattern: regular.Integer, message: "请输入正整数" },
],
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) => {
if (this.disabled) {
return h("div");
}
return h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.delGoods(params.index);
},
},
},
"删除"
);
},
},
],
// 时间选择器可选范围
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
@@ -346,18 +353,17 @@ export default {
},
async mounted() {
await this.getCagetoryList();
// 如果id不为空则查询信息
if (this.id) {
this.getCoupon();
this.modalType = 1;
}
},
methods: {
// 获取回显数据
getCoupon() {
getShopCoupon(this.id).then((res) => {
getPlatformCoupon(this.id).then((res) => {
let data = res.result;
if (!data.promotionGoodsList) data.promotionGoodsList = [];
this.rangeTimeType = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
if (data.scopeType == "PORTION_GOODS_CATEGORY") {
let prevCascader = data.scopeId.split(",");
function next(params, prev) {
@@ -381,6 +387,7 @@ export default {
}
}
}
next(this.goodsCategoryList, []);
data.scopeIdGoods = prevCascader;
}
@@ -391,23 +398,27 @@ export default {
this.form = data;
});
},
/** 保存优惠券 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
params.startTime = this.$options.filters.unixToDate(
this.form.rangeTime[0] / 1000
);
params.endTime = this.$options.filters.unixToDate(
this.form.rangeTime[1] / 1000
);
if (params.getType == "ACTIVITY") {
params.couponLimitNum = 0;
params.publishNum = 0;
params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
if (this.rangeTimeType == 1) {
params.rangeDayType = "FIXEDTIME";
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";
delete params.rangeTime;
}
delete params.rangeTime;
let scopeId = [];
if (
params.scopeType == "PORTION_GOODS" &&
(!params.promotionGoodsList || params.promotionGoodsList.length == 0)
@@ -425,7 +436,6 @@ export default {
}
if (params.scopeType == "PORTION_GOODS") {
//指定商品
params.promotionGoodsList.forEach((item) => {
scopeId.push(item.skuId);
});
@@ -433,7 +443,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;
@@ -442,9 +451,9 @@ export default {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
saveShopCoupon(params).then((res) => {
savePlatformCoupon(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券发送成功");
@@ -452,11 +461,10 @@ export default {
}
});
} else {
// 编辑
delete params.consumeLimit;
delete params.updateTime;
editShopCoupon(params).then((res) => {
editPlatformCoupon(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券修改成功");
@@ -467,18 +475,12 @@ export default {
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-coupon");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.push({
name: "coupon",
});
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) => {
@@ -487,11 +489,9 @@ export default {
this.$refs.skuSelect.goodsData = data;
},
changeSelect(e) {
// 已选商品批量选择
this.selectedGoods = e;
},
delSelectGoods() {
// 多选删除商品
if (this.selectedGoods.length <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
@@ -502,20 +502,19 @@ export default {
onOk: () => {
let ids = [];
this.selectedGoods.forEach(function (e) {
ids.push(e.id);
ids.push(e.skuId);
});
this.form.promotionGoodsList = this.form.promotionGoodsList.filter((item) => {
return !ids.includes(item.id);
return !ids.includes(item.skuId);
});
},
});
},
delGoods(index) {
// 删除商品
this.form.promotionGoodsList.splice(index, 1);
},
selectedGoodsData(item) {
// 回显已选商品
let list = [];
item.forEach((e) => {
list.push({
@@ -524,22 +523,20 @@ export default {
originalPrice: e.price,
quantity: e.quantity,
storeId: e.storeId,
sellerName: e.sellerName,
storeName: e.storeName,
skuId: e.id,
categoryPath: e.categoryPath,
thumbnail: e.small,
goodsType: e.goodsType,
goodsId: e.goodsId,
originPrice: e.price,
});
});
this.form.promotionGoodsList = list;
},
getGoodsCategory(e) {
// 获取级联选择器商品分类id
},
async getCagetoryList() {
// 获取全部商品分类
let data = await getGoodsCategoryAll();
this.goodsCategoryList = this.filterCategory(data.result);
// 过滤出可显示的值
let data = await getCategoryTree();
this.goodsCategoryList = data.result;
this.goodsCategoryList = this.goodsCategoryList.map((item) => {
if (item.children) {
item.children = item.children.map((child) => {
@@ -566,19 +563,7 @@ export default {
return { value: item.id, label: item.name, children: item.children };
});
},
filterCategory(list) {
// 递归删除空children
list.forEach((item) => {
if (item.children.length == 0) {
delete item.children;
} else {
this.filterCategory(item.children);
}
});
return list;
},
filterCategoryId(list, idArr) {
// 递归获取分类id
list.forEach((e) => {
if (e instanceof Array) {
this.filterCategoryId(e, idArr);
@@ -604,16 +589,20 @@ h4 {
line-height: 40px;
text-align: left;
}
.describe {
font-size: 12px;
margin-left: 10px;
color: #999;
}
.ivu-form-item {
margin-bottom: 24px !important;
}
.wrapper {
min-height: 1000px;
.effectiveDays {
font-size: 12px;
color: #999;
> * {
margin: 0 4px;
}
}
.tips {
font-size: 12px;

341
seller/src/views/promotion/coupon/coupon-receive.vue
View File

@@ -1,219 +1,190 @@
<template>
<div class="search">
<Card>
<Button style="margin-bottom: 10px" @click="back()">返回</Button>
<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="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="[10, 20, 50]"
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: 10, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
getType: "", // 默认排序方式
couponId: this.$route.query.couponId, // 优惠券id
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "会员名称",
key: "memberName",
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 100,
tooltip: true,
},
{
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: 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();
}
},
},
@@ -223,40 +194,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 = 10;
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();
@@ -268,13 +228,10 @@ export default {
getCouponReceiveList(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;
},
},
mounted() {

701
seller/src/views/promotion/coupon/coupon.vue
View File

@@ -1,249 +1,330 @@
<template>
<div class="search">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="100"
class="search-form"
>
<Form-item label="优惠券名称">
<Input
type="text"
v-model="searchForm.couponName"
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
>
<Button @click="handleReset" class="search-btn">重置</Button>
</Form>
</Row>
</Card>
<Card>
<Row class="operator padding-row">
<Button @click="add" type="primary">添加</Button>
<Button @click="delAll" class="ml_10">批量关闭</Button>
<Button @click="receivePage()" class="ml_10" type="info">优惠券领取记录</Button>
</Row>
<Table
class="mt_10"
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
@on-selection-change="changeSelect"
<el-card>
<el-form
ref="searchForm"
:model="searchForm"
inline
label-width="90px"
class="search-form mb_10"
@keyup.enter="handleSearch"
>
<template slot-scope="{ row }" slot="action">
<a
v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="see(row)"
>编辑</a>
<a
v-else
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="see(row, 'only')"
>查看</a>
<span 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="remove(row)"
>关闭</a>
<span
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
style="margin: 0 8px; color: #dcdee2"
>|</span>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="receivePage(row.id)"
>领取记录</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
<el-form-item label="优惠券名称" prop="couponName">
<el-input
v-model="searchForm.couponName"
placeholder="请输入优惠券名称"
clearable
style="width: 240px"
/>
</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"
>
<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" 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"
v-loading="loading"
border
:data="data"
class="mt_10"
style="width: 100%"
row-key="id"
@selection-change="changeSelect"
>
<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="[10, 20, 50]"
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 { getShopCouponList, updateCouponStatus } from "@/api/promotion";
import {
promotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
getPlatformCouponList,
updatePlatformCouponStatus,
deletePlatformCoupon,
} from "@/api/promotion";
import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
export default {
name: "coupon",
props: {
getType: {
type: String,
default: "",
},
promotionStatus: {
type: String,
default: "",
},
selectedList: {
type: Array,
default: () => [],
},
},
data() {
return {
selectDate: [],
loading: true, // 表单加载状态
loading: true,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
pageNumber: 1,
pageSize: 20,
sort: "create_time",
order: "desc",
getType: "",
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 60,
align: "center",
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
tooltip: true,
},
{
title: "面额/折扣",
key: "price",
width: 100,
render: (h, params) => {
if (params.row.couponType === "PRICE") {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
} else if(params.row.couponType === "DISCOUNT") {
return h("div", (params.row.couponDiscount || 0) + "折");
}else{
return h("div", "未知");
}
},
},
{
title: "已领取数量/总数量",
key: "publishNum",
render: (h, params) => {
return h(
"div",
params.row.receivedNum +
"/" +
(params.row.publishNum === 0 ? "不限制" : params.row.publishNum)
);
},
},
{
title: "已被使用的数量/已领取数量",
key: "publishNum",
render: (h, params) => {
return h("div", params.row.usedNum + "/" + params.row.receivedNum);
},
},
{
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: "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,
},
});
}
},
},
{
title: "状态",
width: 100,
key: "promotionStatus",
fixed: "right",
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
maxWidth: 240,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectList: [],
selectCount: 0,
data: [],
total: 0,
selectDate: [],
showActionColumn: true,
showStatusColumn: true,
};
},
watch: {
$route(to) {
if (to.fullPath == "/promotions/manager-coupon") {
this.init();
}
},
selectedList: {
handler(val) {
this.$nextTick(() => {
this.syncTableSelection(val);
});
},
deep: true,
},
},
methods: {
init() {
this.getDataList();
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) {
if (id) {
@@ -252,116 +333,121 @@ export default {
this.$router.push({ name: "coupon-receive" });
}
},
init() {
this.getDataList();
},
add() {
this.$router.push({ name: "add-coupon" });
},
/** 跳转至领取详情页面 */
receiveInfo(v) {
this.$router.push({ name: "member-receive-coupon", query: { id: v.id } });
},
info(v) {
this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
this.$router.push({ name: "add-platform-coupon" });
},
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.getDataList();
},
handleReset() {
this.searchForm = {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
};
this.selectDate = "";
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;
}
getShopCouponList(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;
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 });
this.$router.push({ name: "add-coupon", query: data });
const data = only ? { onlyView: true, id: v.id } : { id: v.id };
this.$router.push({ name: "edit-platform-coupon", query: data });
},
// 下架优惠券
remove(v) {
close(v) {
this.$Modal.confirm({
title: "确认下架",
content: "确认要下架此优惠券么?",
title: "确认关闭",
content: "确认要关闭此优惠券么?",
loading: true,
onOk: () => {
this.loading = false;
let params = {
updatePlatformCouponStatus({
couponIds: v.id,
};
updateCouponStatus(params).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("下架成功");
this.clearSelectAll();
this.getDataList();
}
});
effectiveDays: 0,
})
.then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("优惠券已关闭");
this.getDataList();
}
})
.catch(() => {
this.$Modal.remove();
});
},
});
},
remove(v) {
this.$Modal.confirm({
title: "确认删除",
content: "确认要删除此优惠券么?",
loading: true,
onOk: () => {
deletePlatformCoupon(v.id)
.then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("优惠券已删除");
this.getDataList();
}
})
.catch(() => {
this.$Modal.remove();
});
},
});
},
// 批量下架
delAll() {
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要关闭的优惠券");
this.$Message.warning("您还未选择要下架的优惠券");
return;
}
this.$Modal.confirm({
title: "确认关闭",
content: "您确认要关闭所选的 " + this.selectCount + " 条数据?",
title: "确认下架",
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(),
};
updateCouponStatus(params).then((res) => {
promotionStatus: "CLOSE",
}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("下架成功");
@@ -374,13 +460,40 @@ export default {
},
},
mounted() {
if (this.getType) {
this.searchForm.getType = this.getType;
this.showActionColumn = false;
}
if (this.promotionStatus) {
this.searchForm.promotionStatus = this.promotionStatus;
this.showStatusColumn = false;
}
this.init();
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.search-form {
width: 100% !important;
<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>

555
seller/src/views/promotion/full-discount/full-discount-add.vue
View File

@@ -1,276 +1,255 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<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" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称"
clearable style="width: 280px" />
</FormItem>
<FormItem label="活动时间" prop="rangeTime">
<DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'"
format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px">
</DatePicker>
</FormItem>
<FormItem label="活动描述" prop="description">
<Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4"
clearable style="width: 280px" />
</FormItem>
<el-form-item label="活动名称" prop="promotionName">
<el-input
v-model="form.promotionName"
disabled
placeholder="活动名称"
clearable
style="width: 260px"
/>
</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"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择"
:disabled-date="options.disabledDate"
style="width: 320px"
/>
</el-form-item>
<el-form-item label="活动描述" prop="description">
<el-input
v-model="form.description"
disabled
type="textarea"
:rows="4"
clearable
style="width: 260px"
/>
</el-form-item>
</div>
<h4>优惠设置</h4>
<div class="form-item-view">
<FormItem label="优惠门槛" prop="fullMoney">
<Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛"
clearable style="width: 280px" />
<el-form-item label="优惠门槛" prop="fullMoney">
<el-input
v-model="form.fullMoney"
disabled
placeholder="优惠门槛"
clearable
style="width: 260px"
/>
<span class="describe">消费达到当前金额可以参与优惠</span>
</FormItem>
<FormItem label="优惠方式">
<RadioGroup type="button" button-style="solid" v-model="form.discountType">
<Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio>
<Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio>
</RadioGroup>
</FormItem>
<FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus">
<Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额"
clearable style="width: 280px" />
</FormItem>
<FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate">
<InputNumber :disabled="form.promotionStatus != 'NEW'"
</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"
>
<el-input
disabled
v-model="form.fullMinus"
placeholder="优惠金额"
clearable
style="width: 260px"
/>
</el-form-item>
<el-form-item
v-if="form.discountType == 'fullRateFlag'"
label="优惠折扣"
prop="fullRate"
>
<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 :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag">免邮费</Checkbox>
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag">送优惠券</Checkbox>
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag">送赠品</Checkbox>
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') &&
JSON.parse(Cookies.get('userInfoSeller')).selfOperated
" v-model="form.pointFlag">送积分</Checkbox>
</FormItem>
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable
:remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px">
<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 :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable
:remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px">
<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">
<InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number"
style="width: 280px" />
</FormItem>
<FormItem label="使用范围" prop="scopeType">
<RadioGroup type="button" button-style="solid" v-model="form.scopeType">
<Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio>
<Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio>
</RadioGroup>
</FormItem>
</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"
>
<el-option
v-for="item in couponList"
:value="item.id"
:key="item.id"
: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"
>
<el-option
v-for="item in giftList"
:value="item.id"
:key="item.id"
: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"
/>
</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 style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
<div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'">
<Button type="primary" @click="openSkuList">选择商品</Button>
<Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除</Button>
</div>
<Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
<template slot-scope="{ row }" slot="QRCode">
<img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
</template>
<template slot-scope="{ index }" slot="action">
<a
v-if="form.promotionStatus == 'NEW' || !id"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="delGoods(index)"
>删除</a>
</template>
</Table>
</FormItem>
<el-form-item
style="width: 100%"
v-if="form.scopeType == 'PORTION_GOODS'"
>
<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"
color-dark="#000"
color-light="#fff"
:size="150"
/>
</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 type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading"
@click="handleSubmit">提交</Button>
<el-button @click="$router.push({ name: 'promotions/full-discount' })">返回</el-button>
</div>
</div>
</div>
</Form>
</Card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
</el-form>
</el-card>
</div>
</template>
<script>
import {
getShopCouponList,
getFullDiscountById,
newFullDiscount,
editFullDiscount,
} from "@/api/promotion";
import { getPlatformCouponList, getFullDiscountById } from "@/api/promotion";
import { getGoodsSkuListDataSeller } from "@/api/goods";
import { regular } from "@/utils";
import skuSelect from "@/views/lili-dialog";
import Cookies from "js-cookie";
import vueQr from "vue-qr";
export default {
name: "full-discount-add",
name: "add-full-discount",
components: {
skuSelect,
"vue-qr": vueQr,
},
data () {
const checkPrice = (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 checkWeight = (rule, value, callback) => {
if (!value && typeof value !== "number") {
callback(new Error("优惠门槛不能为空"));
} else if (!regular.money.test(value)) {
callback(new Error("请输入正整数或者两位小数"));
} else if (parseFloat(value) > 99999999) {
callback(new Error("优惠门槛设置超过上限值"));
} else {
callback();
}
};
data() {
return {
Cookies,
form: {
// 活动表单
discountType: "fullMinusFlag",
scopeType: "ALL",
promotionGoodsList: [],
promotionStatus: "NEW",
},
id: this.$route.query.id, // 活动id
submitLoading: false, // 添加或编辑提交状态
selectedGoods: [], // 已选商品列表，便于删除
formRule: {
// 验证规则
promotionName: [{ required: true, message: "活动名称不能为空" }],
rangeTime: [{ required: true, message: "请选择活动时间" }],
description: [{ required: true, message: "请填写活动描述" }],
price: [
{ required: true, message: "请输入面额" },
{ validator: checkPrice },
],
consumptionLimit: [{ required: true, validator: checkWeight }],
fullMoney: [{ required: true, validator: checkWeight }],
fullMinus: [
{ required: true, message: "请填写优惠金额" },
{ pattern: regular.money, message: "请输入正确金额" },
],
fullRate: [
{ required: true, message: "请填写优惠折扣" },
{
pattern: regular.discount,
message: "请输入0-10的数字,可有一位小数",
},
],
couponId: [{ required: true, message: "请选择优惠券" }],
giftId: [{ required: true, message: "请选择赠品" }],
point: [{ required: true, message: "请填写积分" }],
},
couponList: [], // 店铺优惠券列表
giftList: [], // 赠品列表
giftLoading: false, // 请求赠品状态
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: "操作",
slot: "action",
minWidth: 50,
},
],
id: this.$route.query.id,
couponList: [],
giftList: [],
giftLoading: false,
couponLoading: false,
options: {
disabledDate (date) {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
};
},
async mounted () {
async mounted() {
if (this.id) {
this.getDetail();
this.columns.shift()
this.columns.pop()
}
await this.getCouponList();
await this.getGiftList();
this.getCouponList();
this.getGiftList();
},
methods: {
// 关闭当前页面
closeCurrentPage () {
this.$store.commit("removeTag", "full-cut-detail");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.go(-1);
},
openSkuList () {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
data.forEach((e) => {
e.id = e.skuId;
});
this.$refs.skuSelect.goodsData = data;
},
getDetail () {
// 获取活动详情
getDetail() {
getFullDiscountById(this.id).then((res) => {
let data = res.result;
if (data.scopeType === "ALL") {
if (!data.scopeType === "ALL") {
data.promotionGoodsList = [];
}
if (data.fullMinusFlag) {
data.discountType = "fullMinusFlag";
delete data.fullMinusFlag;
} else {
data.discountType = "fullRateFlag";
data.discountType = "fullMinusFlag";
delete data.fullRateFlag;
}
data.rangeTime = [];
@@ -279,142 +258,26 @@ export default {
this.form = data;
});
},
/** 保存 */
handleSubmit () {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
const strat = this.$options.filters.unixToDate(
this.form.rangeTime[0] / 1000
);
const end = this.$options.filters.unixToDate(
this.form.rangeTime[1] / 1000
);
params.startTime = strat;
params.endTime = end;
if (
params.scopeType == "PORTION_GOODS" &&
(!params.promotionGoodsList ||
params.promotionGoodsList.length == 0)
) {
this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
return;
}
if (params.scopeType == "ALL") {
delete params.promotionGoodsList;
params.number = -1;
} else {
let scopeId = [];
params.number = 1;
params.promotionGoodsList.forEach((e) => {
e.startTime = params.startTime;
e.endTime = params.endTime;
scopeId.push(e.skuId);
});
params.scopeId = scopeId.toString();
}
if (params.discountType == "fullMinusFlag") {
params.fullMinusFlag = true;
} else {
params.fullRateFlag = true;
}
delete params.rangeTime;
this.submitLoading = true;
if (!this.id) {
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
newFullDiscount(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("添加活动成功");
this.closeCurrentPage();
}
});
} else {
// 编辑
delete params.updateTime;
editFullDiscount(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("编辑活动成功");
this.closeCurrentPage();
}
});
}
}
});
},
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({
goodsName: e.goodsName,
price: e.price,
quantity: e.quantity,
storeId: e.storeId,
goodsId:e.goodsId,
storeName: e.storeName,
thumbnail: e.thumbnail,
skuId: e.id,
});
});
this.form.promotionGoodsList = list;
},
getCouponList (query) {
// 优惠券列表
getCouponList(query) {
let params = {
pageSize: 10,
pageNumber: 0,
pageSize: 20,
pageNumber: 1,
getType: "ACTIVITY",
storeId: "",
couponName: query,
promotionStatus: "START",
};
this.couponLoading = true;
getShopCouponList(params).then((res) => {
getPlatformCouponList(params).then((res) => {
this.couponLoading = false;
if (res.success) {
this.couponList = res.result.records;
}
});
},
getGiftList (query) {
// 赠品列表
getGiftList(query) {
let params = {
pageSize: 10,
pageSize: 20,
pageNumber: 1,
id: query === this.form.giftId ? this.form.giftId : null,
goodsName: query === this.form.giftId ? null : query,
@@ -422,7 +285,7 @@ export default {
authFlag: "PASS"
};
this.giftLoading = true;
getGoodsSkuListDataSeller(params).then((res) => {
getGoodsSkuData(params).then((res) => {
this.giftLoading = false;
if (res.success) {
this.giftList = res.result.records;
@@ -445,14 +308,14 @@ h4 {
line-height: 40px;
text-align: left;
}
.describe {
font-size: 12px;
margin-left: 10px;
color: #999;
}
.ivu-form-item {
margin-bottom: 24px !important;
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
</style>

406
seller/src/views/promotion/full-discount/full-discount.vue
View File

@@ -1,218 +1,154 @@
<template>
<div class="search">
<Card>
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="活动名称">
<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>
<Form-item>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button>
</Form-item>
</Form>
</Card>
<Card>
<Row class="operation">
<Button type="primary" @click="newAct">新增</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table">
<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 v-if="row.promotionStatus == 'NEW'" @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">编辑</a>
<a v-else @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
<span v-if="row.promotionStatus === 'START' || row.promotionStatus === 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="row.promotionStatus === 'START'" @click="openOrClose(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">关闭</a>
<a v-if="row.promotionStatus === 'CLOSE'" @click="openOrClose(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">开启</a>
</div>
</template>
</Table>
<Row type="flex" justify="end" class="page operation">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator
show-sizer></Page>
</Row>
</Card>
<div class="search full-cut">
<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"
>
<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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import {
getFullDiscountList,
delFullDiscount,
updateFullDiscount,
} from "@/api/promotion.js";
import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
export default {
name: "full-cut",
data () {
data() {
return {
total: 0,
selectDate: [],
loading: false, // 表单加载状态
total: 0,
loading: false,
searchForm: {
// 列表请求参数
pageNumber: 1,
pageSize: 20,
sort: "startTime",
sort: "createTime",
order: "desc",
},
columns: [
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "开始时间",
key: "startTime",
minWidth: 60,
},
{
title: "结束时间",
key: "endTime",
minWidth: 60,
},
{
title: "活动类型",
slot: "promotionType",
width: 100,
},
{
title: "活动状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
let text = "未知",
color = "default";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "default";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "blue";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
text
),
]);
},
},
{
title: "操作",
slot: "action",
align: "center",
width: 200,
},
],
data: [], // 表格数据
data: [],
};
},
methods: {
// 改变页码
newAct () {
this.$router.push({ name: "full-discount-detail" });
},
// 初始化数据
init () {
this.getDataList();
},
// 改变页数
changePage (v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 改变页码
changePageSize (v) {
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch () {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
// 重置
handleReset () {
this.selectDate = "";
this.searchForm = {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
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();
},
// 编辑
edit (row) {
this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
},
// 删除
del (row) {
this.$Modal.confirm({
title: "提示",
// 记得确认修改此处
content: "确认删除此活动吗?",
loading: true,
onOk: () => {
// 删除
delFullDiscount(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.getDataList();
}
});
},
});
},
// 开启或关闭活动
openOrClose (row) {
openOrClose(row) {
let name = "开启";
let status = "START";
if (row.promotionStatus === "START") {
if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
name = "关闭";
status = "CLOSE";
this.$Modal.confirm({
title: "提示",
// 记得确认修改此处
content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
loading: true,
onOk: () => {
// 删除
updateFullDiscount(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
@@ -222,57 +158,21 @@ export default {
});
},
});
} else {
let sTime = new Date();
sTime.setMinutes(sTime.getMinutes() + 10);
let eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
this.openStartTime = sTime.getTime();
this.openEndTime = eTime.getTime();
this.$Modal.confirm({
title: "确认开启(默认为当前时间的十分钟之后)",
content: "您确认要开启此拼团活动?",
onOk: () => {
let params = {
startTime: this.openStartTime,
endTime: this.openEndTime,
};
updateFullDiscount(row.id, params).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("开启活动成功");
this.getDataList();
}
});
},
render: (h) => {
return h("div", [
h("DatePicker", {
props: {
type: "datetimerange",
placeholder: "请选择开始时间和结束时间",
value: [sTime, eTime],
},
style: {
width: "350px",
},
on: {
input: (val) => {
if (val[0]) {
this.openStartTime = val[0].getTime();
}
if (val[1]) {
this.openEndTime = val[1].getTime();
}
},
},
}),
]);
},
});
}
},
// 获取列表数据
getDataList () {
changePage() {
this.getDataList();
},
changePageSize() {
this.searchForm.pageNumber = 1;
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();
@@ -289,21 +189,29 @@ export default {
}
});
},
view(row) {
this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
},
},
mounted () {
mounted() {
this.init();
},
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.operation {
margin: 10px 0;
<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>

620
seller/src/views/promotion/live/addLive.vue
View File

@@ -1,194 +1,142 @@
<template>
<div>
<Card style="position: relative">
<Spin size="large" fix v-if="spinShow"></Spin>
<Alert type="warning">
<template slot="desc">
为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
</template>
</Alert>
<el-card v-loading="spinShow" style="position: relative">
<el-alert type="warning" show-icon :closable="false" style="margin-bottom: 16px">
为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
</el-alert>
<Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
<FormItem label="直播标题" prop="name">
<Input
<el-form ref="liveForm" :model="liveForm" :rules="liveRulesForm" label-width="120px">
<el-form-item label="直播标题" prop="name">
<el-input :disabled="liveStatus != 'NEW'" v-model="liveForm.name" style="width: 460px" />
<div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
</el-form-item>
<el-form-item label="主播昵称" prop="anchorName">
<el-input :disabled="liveStatus != 'NEW'" v-model="liveForm.anchorName" style="width: 360px" />
<div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
</el-form-item>
<el-form-item label="直播时间" prop="startTime">
<el-date-picker
:disabled="liveStatus != 'NEW'"
v-model="liveForm.name"
style="width: 460px"
></Input>
<div class="tips">
直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符
</div>
</FormItem>
<FormItem label="主播昵称" prop="anchorName">
<Input
:disabled="liveStatus != 'NEW'"
v-model="liveForm.anchorName"
style="width: 360px"
></Input>
<div class="tips">
主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符
</div>
</FormItem>
<FormItem label="直播时间" prop="startTime">
<DatePicker
:disabled="liveStatus != 'NEW'"
format="yyyy-MM-dd HH:mm"
type="datetimerange"
v-model="times"
@on-change="handleChangeTime"
:options="optionsTime"
placeholder="直播计划开始时间-直播计划结束时间"
style="width: 300px"
>
</DatePicker>
type="datetimerange"
value-format="YYYY-MM-DD HH:mm"
:disabled-date="disabledDate"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 360px"
@change="handleChangeTime"
/>
<div class="tips">
直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
</div>
</FormItem>
<FormItem label="主播微信号" prop="anchorWechat">
<Input
</el-form-item>
<el-form-item label="主播微信号" prop="anchorWechat">
<el-input
:disabled="liveStatus != 'NEW'"
v-model="liveForm.anchorWechat"
style="width: 360px"
placeholder="主播微信号"
></Input>
/>
<div class="tips">
主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a
target="_black"
主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行
<a
target="_blank"
href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh"
>实名验证</a
>
>实名验证</a>
</div>
</FormItem>
<!-- 分享卡片 -->
<FormItem label="分享卡片封面" prop="feedsImg">
<upload-pic-thumb v-model="liveForm.feedsImg" :multiple="false"></upload-pic-thumb>
</el-form-item>
<el-form-item label="分享卡片封面" prop="feedsImg">
<upload-pic-thumb v-model="liveForm.feedsImg" :multiple="false" />
<div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M；</div>
</FormItem>
<!-- 直播间背景墙 -->
<FormItem label="直播间背景墙" prop="coverImg">
<upload-pic-thumb v-model="liveForm.coverImg" :multiple="false"></upload-pic-thumb>
</el-form-item>
<el-form-item label="直播间背景墙" prop="coverImg">
<upload-pic-thumb v-model="liveForm.coverImg" :multiple="false" />
<div class="tips">直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
</FormItem>
<!-- 直播间背景墙 -->
<FormItem label="直播间分享图" prop="shareImg">
<upload-pic-thumb v-model="liveForm.shareImg" :multiple="false"></upload-pic-thumb>
</el-form-item>
<el-form-item label="直播间分享图" prop="shareImg">
<upload-pic-thumb v-model="liveForm.shareImg" :multiple="false" />
<div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
</FormItem>
</el-form-item>
<FormItem label="商品" v-if="$route.query.id">
<Button
type="primary"
ghost
@click="liveGoodsVisible = true"
:disabled="liveStatus != 'NEW'"
icon="md-add"
>添加商品</Button
>
<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>
<el-form-item v-if="$route.query.id" label="商品">
<el-button type="primary" plain :disabled="liveStatus != 'NEW'" @click="liveGoodsVisible = true">
添加商品
</el-button>
<el-table class="goods-table" :data="liveData" style="width: 100%">
<el-table-column label="商品" min-width="200">
<template #default="{ row, $index }">
<div class="flex-goods">
<el-badge v-if="$index === 0 || $index === 1" value=" " type="danger" />
<img class="thumbnail" :src="row.thumbnail || row.goodsImage" alt="" />
{{ row.goodsName || row.name }}
</div>
</template>
</el-table-column>
<el-table-column label="价格" min-width="150">
<template #default="{ row }">
<div v-if="row.priceType == 1">{{ $filters.unitPrice(row.price, "￥") }}</div>
<div v-if="row.priceType == 2">
{{ row.price | unitPrice("￥") }}至{{ row.price2 | unitPrice("￥") }}
{{ $filters.unitPrice(row.price, "￥") }}至{{ $filters.unitPrice(row.price2, "￥") }}
</div>
<div v-if="row.priceType == 3">
{{ row.price2 | unitPrice("￥")
}}<span class="original-price">{{ row.price | unitPrice("￥") }}</span>
{{ $filters.unitPrice(row.price2, "￥") }}
<span class="original-price">{{ $filters.unitPrice(row.price, "￥") }}</span>
</div>
</div>
</template>
<template slot-scope="{ row }" slot="quantity">
<div>{{ row.quantity }}</div>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<a
v-if="liveStatus == 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="deleteGoods(row, index)"
>删除</a>
<span v-if="liveStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
<a
v-if="liveStatus == 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="onMove(row.id, 1)"
>上移</a>
<span v-if="liveStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
<a
v-if="liveStatus == 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="onMove(row.id, 0)"
>下移</a>
</div>
</template>
</Table>
<div class="tips">
直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
</div>
</FormItem>
</template>
</el-table-column>
<el-table-column label="库存" width="100">
<template #default="{ row }">{{ row.quantity }}</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template #default="{ row, $index }">
<div class="action">
<template v-if="liveStatus == 'NEW'">
<a class="link-text" @click="deleteGoods(row, $index)">删除</a>
<span class="op-split">|</span>
<a class="link-text" @click="onMove(row.id, 1)">上移</a>
<span class="op-split">|</span>
<a class="link-text" @click="onMove(row.id, 0)">下移</a>
</template>
</div>
</template>
</el-table-column>
</el-table>
<div class="tips">直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示</div>
</el-form-item>
<FormItem>
<Button type="primary" v-if="liveStatus == 'NEW'" @click="createLives()"
>保存</Button
>
</FormItem>
</Form>
</Card>
<!-- 浏览图片 -->
<Modal title="查看图片" v-model="imageVisible">
<img :src="imageSrc" v-if="imageVisible" style="width: 100%" />
</Modal>
<el-form-item>
<el-button v-if="liveStatus == 'NEW'" type="primary" @click="createLives">保存</el-button>
</el-form-item>
</el-form>
</el-card>
<Modal width="800" v-model="liveGoodsVisible" footer-hide>
<liveGoods @selectedGoods="callBackData" reviewed />
</Modal>
<el-dialog v-model="imageVisible" title="查看图片" width="600px">
<img v-if="imageVisible" :src="imageSrc" style="width: 100%" alt="" />
</el-dialog>
<el-dialog v-model="liveGoodsVisible" width="800px" :show-footer="false">
<liveGoods reviewed @selectedGoods="callBackData" />
</el-dialog>
</div>
</template>
<script>
import { uploadFile } from "@/libs/axios";
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
import {
addLive,
addLiveGoods,
editLive,
getLiveInfo,
delRoomLiveGoods,
} from "@/api/promotion";
import { addLive, addLiveGoods, editLive, getLiveInfo, delRoomLiveGoods } from "@/api/promotion";
import liveGoods from "./liveGoods";
export default {
components: {
liveGoods,
uploadPicThumb,
},
components: { liveGoods, uploadPicThumb },
data() {
return {
spinShow: false, // loading加载
liveGoodsVisible: false, //选择商品
imageVisible: false, //查看图片的dailog
imageSrc: "", //查看图片的路径
action: uploadFile, // 上传地址
accessToken: {}, // 验证token
liveStatus: "NEW", //当前直播状态
// 不能选择今天以前的时间
optionsTime: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
// 直播间数据上传规则
spinShow: false,
liveGoodsVisible: false,
imageVisible: false,
imageSrc: "",
action: uploadFile,
accessToken: {},
liveStatus: "NEW",
liveRulesForm: {
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
@@ -199,129 +147,72 @@ export default {
{ max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
],
anchorWechat: [{ required: true, message: "请输入主播微信号", trigger: "blur" }],
startTime: [
{
required: true,
message: "请正确输入开始时间以及结束时间",
},
],
startTime: [{ required: true, message: "请正确输入开始时间以及结束时间" }],
feedsImg: [{ required: true, message: "分享卡片封面不能为空", trigger: "blur" }],
coverImg: [{ required: true, message: "直播间背景墙不能为空", trigger: "blur" }],
shareImg: [{ required: true, message: "直播间分享图不能为空", trigger: "blur" }],
},
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: [], //直播商品集合
times: [],
liveData: [],
};
},
mounted() {
/**
* 如果query.id有值说明是查看详情
* liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
*/
if (this.$route.query.id) {
// 获取直播间详情
this.getLiveDetail();
}
this.accessToken = {
accessToken: this.getStore("accessToken"),
};
this.accessToken = { accessToken: this.getStore("accessToken") };
},
methods: {
/**
* 删除直播间商品
*/
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
async deleteGoods(val, index) {
this.$Spin.show();
let res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
this.spinShow = true;
const res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
if (res.success) {
this.$Message.success("删除成功!");
this.liveData.splice(index, 1);
this.$Spin.hide();
} else {
this.$Spin.hide();
}
this.spinShow = false;
},
/**
* 获取直播间详情
*/
async getLiveDetail() {
let result = await getLiveInfo(this.$route.query.id);
// 将数据回调到liveform里面
const result = await getLiveInfo(this.$route.query.id);
if (result.success) {
console.log(result);
let data = result.result;
for (let key in data) {
const data = result.result;
for (const key in data) {
this.liveForm[key] = data[key];
}
// 将选择的商品回调给表格
this.liveData = 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;
}
},
/**
* 上下移动功能
* dir 1为上 0为下
*/
onMove(code, dir) {
let moveComm = (curIndex, nextIndex) => {
let arr = this.liveData;
const moveComm = (curIndex, nextIndex) => {
const arr = this.liveData;
arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
return arr;
};
this.liveData.some((val, index) => {
if (val.id === code) {
if (dir === 1 && index === 0) {
this.$message.Warning("已在顶部！");
this.$Message.warning("已在顶部！");
} else if (dir === 0 && index === this.liveData.length - 1) {
this.$message.Warning("已在底部！");
this.$Message.warning("已在底部！");
} else {
let nextIndex = dir === 1 ? index - 1 : index + 1;
const nextIndex = dir === 1 ? index - 1 : index + 1;
this.liveData = moveComm(index, nextIndex);
}
return true;
@@ -329,13 +220,9 @@ export default {
return false;
});
},
/**
* 回调的商品选择数据
*/
callBackData(way) {
console.log(way);
this.liveGoodsVisible = false;
this.$Spin.show();
this.spinShow = true;
addLiveGoods({
roomId: this.$route.query.roomId,
liveGoodsId: way.liveGoodsId,
@@ -343,179 +230,53 @@ export default {
}).then((res) => {
if (res.success) {
this.liveData.push(way);
this.$Spin.hide();
console.log(this.liveData);
} else {
this.$Spin.hide();
}
this.spinShow = false;
});
},
/**
* 上传图片查看图片
*/
handleView(src) {
this.imageVisible = true;
this.imageSrc = src;
},
/**
* 删除上传的图片
*/
handleRemove(type) {
if (this.liveStatus == "NEW") {
this.liveForm[type] = "";
} else {
this.$Message.error("当前状态禁止修改删除!");
}
},
/**
* 直播间背景图上传成功回调
*/
handleCoverImgSuccess(res) {
this.liveForm.coverImg = res.result;
},
/**
* 直播间分享图上传成功回调
*/
handleShareImgSuccess(res) {
console.log(res);
this.liveForm.shareImg = res.result;
},
/**
* 分享卡片封面上传成功回调
*/
handleFeedsImgSuccess(res) {
this.liveForm.feedsImg = res.result;
},
/**
* 直播间背景图
*/
handleCoverImgSuccess(res) {
this.liveForm.coverImg = res.result;
},
tipsDateError() {
this.$Message.error({
content:
"直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）",
duration: 5,
});
this.$Message.error(
"直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）"
);
},
/**
* 选择时间后的回调
*/
handleChangeTime(daterange) {
/**
* 直播开播时间需要在当前时间的10分钟后
* 此处设置默认为15分钟方便调整
*/
let siteTime = new Date().getTime() / 1000;
let selectTime = new Date(daterange[0]).getTime() / 1000;
let currentTime = this.$options.filters.unixToDate(siteTime);
/**
* 开播时间和结束时间间隔不得短于30分钟，不得超过24小时
* 判断用户设置的结束时间
*/
let endTime = new Date(daterange[1]).getTime() / 1000;
if (!daterange || daterange.length !== 2) return;
const siteTime = new Date().getTime() / 1000;
const selectTime = new Date(daterange[0]).getTime() / 1000;
const endTime = new Date(daterange[1]).getTime() / 1000;
if (selectTime <= siteTime + 15 * 60) {
this.tipsDateError();
return false;
} else if (selectTime + 30 * 60 >= endTime) {
// 不能小于30分钟
this.tipsDateError();
return false;
} else if (selectTime + 24 * 60 * 60 <= endTime) {
// 不能超过24小时
this.tipsDateError();
return false;
} else if (
// 不能超过6个月
siteTime >=
new Date().getTime() + 6 * 31 * 24 * 3600 * 1000 + 86400000
) {
this.tipsDateError();
return false;
} else {
this.$set(this.times, [0], currentTime);
this.times[1] = daterange[1];
// this.times = daterange;
this.$set(this.liveForm, "startTime", new Date(daterange[0]).getTime() / 1000);
this.$set(this.liveForm, "endTime", new Date(daterange[1]).getTime() / 1000);
return;
}
},
/**
* 对图片错误进行回调
*/
handleFormatError(file) {
this.$Notice.warning({
title: "请上传正确的图片格式！",
desc: file.name + " 格式不为 jpg or png.",
});
},
/**
* 对图片的大小进行处理回调
*/
handleMaxSize(file) {
this.$Notice.warning({
title: "图片超过限制大小！",
desc: "图片超过规定限制大小，请重新上传",
});
},
/**
* 限制只能上传一张图片
*/
handleBeforeUpload(type) {
const check = this.liveForm[type].length < 1;
if (!check) {
this.$Notice.warning({
title: "最多上传一张图片",
});
if (selectTime + 30 * 60 >= endTime || selectTime + 24 * 60 * 60 <= endTime) {
this.tipsDateError();
return;
}
return check;
this.liveForm.startTime = selectTime;
this.liveForm.endTime = endTime;
},
/**
* 添加直播间 /broadcast/studio/edit
*/
createLives() {
this.$refs["liveForm"].validate((valid) => {
if (valid) {
// 需判断当前是否是添加商品
if (this.$route.query.id) {
this.spinShow = true;
this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
delete this.liveForm.updateTime;
// 将当前直播间修改
editLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("修改成功!");
this.$router.push({ path: "/promotion/live" });
}
this.spinShow = false;
});
} else {
// 此处为创建直播
this.spinShow = true;
addLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("添加成功!");
this.$router.push({ path: "/live" });
}
this.spinShow = false;
});
}
this.$refs.liveForm.validate((valid) => {
if (!valid) return;
this.spinShow = true;
if (this.$route.query.id) {
this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
delete this.liveForm.updateTime;
editLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("修改成功!");
this.$router.push({ path: "/promotion/live" });
}
this.spinShow = false;
});
} else {
addLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("添加成功!");
this.$router.push({ path: "/live" });
}
this.spinShow = false;
});
}
});
},
@@ -526,9 +287,6 @@ export default {
<style lang="scss" scoped>
.action {
display: flex;
::v-deep .ivu-btn {
margin: 0 5px !important;
}
}
.original-price {
margin-left: 10px;
@@ -543,7 +301,6 @@ export default {
.flex-goods {
margin: 10px;
display: flex;
align-items: center;
> img {
margin-right: 10px;
@@ -557,40 +314,13 @@ export default {
width: 1000px;
margin: 10px 0;
}
.upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}
.upload-list img {
width: 100%;
height: 100%;
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.upload-list-cover i {
color: #fff;
font-size: 20px;
.link-text {
color: #409eff;
cursor: pointer;
margin: 0 2px;
text-decoration: none;
}
.op-split {
margin: 0 8px;
color: #dcdee2;
}
</style>

229
seller/src/views/promotion/live/live.vue
View File

@@ -1,38 +1,69 @@
<template>
<div>
<Card>
<Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
<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"
/>
</el-tabs>
<Form-item label="直播状态" prop="promotionStatus">
<Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
<Option value="NEW">未开始</Option>
<Option value="START">直播中</Option>
<Option value="END">已结束</Option>
<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>
</Select>
</Form-item>
<Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
</Form>
</Card>
<Card>
<div class="btns">
<Button @click="createLive()" type="primary">创建直播</Button>
<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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePageNumber"
@size-change="changePageSize"
/>
</div>
<Tabs v-model="searchForm.status">
<!-- 标签栏 -->
<TabPane 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" justify="end" class="mt_10">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePageNumber" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</el-card>
</div>
</template>
@@ -41,108 +72,18 @@ import { getLiveList } 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: "直播状态",
render: (h, params) => {
return h(
"span",
params.row.status == "NEW"
? "未开始"
: params.row.status == "START"
? "直播中"
: "已结束"
);
},
},
{
title: "操作",
key: "action",
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
},
},
[
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.getLiveDetail(params.row);
},
},
},
"查看/添加商品"
),
]
);
},
},
], //table中显示的title
liveData: [], //table中显示的直播数据
liveData: [],
};
},
watch: {
@@ -158,33 +99,17 @@ export default {
this.getStoreLives();
},
methods: {
/**
* 搜索直播间状态
*/
handleSearch() {
async star(val, index) {
let switched = this.liveData[index].recommend;
await whetherStar({ id: val.id, recommend: switched });
this.getStoreLives();
},
/**
* 页面数据大小分页回调
*/
changePageSize(val) {
console.log(val)
this.searchForm.pageSize = val;
changePageSize() {
this.getStoreLives();
},
/**
* 分页回调
*/
changePageNumber(val) {
console.log(val)
this.searchForm.pageNumber = val;
changePageNumber() {
this.getStoreLives();
},
/**
* 获取店铺直播间列表
*/
async getStoreLives() {
let result = await getLiveList(this.searchForm);
if (result.success) {
@@ -192,29 +117,17 @@ export default {
this.total = result.result.total;
}
},
/**
* 获取直播间详情
*/
getLiveDetail(val) {
this.$router.push({
path: "/add-live",
path: "/live-detail",
query: { ...val, liveStatus: this.searchForm.status },
});
},
/**
* 创建直播
*/
createLive() {
this.$router.push({ path: "/add-live" });
},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.btns {
margin-bottom: 10px;
margin-top: 10px;

541
seller/src/views/promotion/live/liveGoods.vue
View File

@@ -1,393 +1,244 @@
<template>
<div class="wrapper">
<Card>
<Form ref="searchForm" :model="params" inline :label-width="100" class="search-form">
<Form-item label="商品名称">
<Input type="text" v-model="params.name" placeholder="请输入商品名称" clearable style="width: 240px" />
</Form-item>
<div>
<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>
</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>
</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>
</el-form-item>
<Button @click="getLiveGoodsMethods('clear')" type="primary" class="search-btn" icon="ios-search">搜索</Button>
</Form>
</Card>
<Card>
<h4 v-if="!reviewed">
由于直播商品需经过小程序直播平台的审核，你需要在此先提审商品，为了不影响直播间选取商品，请提前1天提审商品；
</h4>
<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>
</el-form-item>
<div>
<Tabs v-model="params.auditStatus">
<TabPane v-for="(item,index) in liveTabWay" :key="index" :label="item.label" :name="item.type+''">
</TabPane>
</Tabs>
</div>
<Button v-if="!reviewed" type="primary" style="margin-bottom:10px;" @click="addNewLiveGoods" icon="md-add">选择商品</Button>
<Button type="primary" v-if="params.auditStatus == 0" ghost style="margin:0 0 10px 10px" @click="getLiveGoodsMethods('clear')">更新状态</Button>
<div style="position:relative">
<Spin size="large" fix v-if="tableLoading">
</Spin>
<Table class="mt_10" disabled-hover :columns="liveGoodsColumns" :data="liveGoodsData">
<template slot-scope="{ row }" slot="goodsName">
<div class="flex-goods">
<img class="thumbnail" :src="row.thumbnail || row.goodsImage">
{{ row.goodsName || row.name }}
<el-form-item label="分享卡片封面" prop="feedsImg">
<div class="upload-list" v-if="liveForm.feedsImg">
<img :src="liveForm.feedsImg">
<div class="upload-list-cover" @click="handleView(liveForm.feedsImg)">
<span class="view-icon">查看</span>
</div>
</template>
<template slot-scope="{ row ,index }" class="price" slot="price">
<!-- 如果为新增商品显示 -->
</div>
<div class="tips">
直播间分享图，图片规则：建议像素800*640，大小不超过1M；
</div>
</el-form-item>
<RadioGroup v-if="params.auditStatus == 99" @on-change="changeRadio(row,'priceType')" v-model="row.priceType">
<div class="price-item">
<Radio :label="1">一口价:</Radio>
<InputNumber :min="0.1" v-if="liveGoodsData[index].priceType == 1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>
</div>
<div class="price-item">
<Radio :label="2">区间价:</Radio> <span v-if="liveGoodsData[index].priceType == 2">
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price" />至
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
</span>
</div>
<div class="price-item">
<Radio :label="3">折扣价:</Radio> <span v-if="liveGoodsData[index].priceType == 3">原价<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>现价
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
</span>
</div>
</RadioGroup>
<div v-else>
<div v-if="row.priceType == 1"><priceColorScheme :value="row.price" :color="$mainColor" /></div>
<div class="flex" v-if="row.priceType == 2"><priceColorScheme :value="row.price" :color="$mainColor" />至<priceColorScheme :value="row.price2" :color="$mainColor" /></div>
<div class="flex" v-if="row.priceType == 3"><priceColorScheme :value="row.price2" :color="$mainColor" /><span class="original-price">{{row.price | unitPrice('￥')}}</span></div>
<el-form-item label="直播间背景墙" prop="coverImg">
<div class="upload-list" v-if="liveForm.coverImg">
<img :src="liveForm.coverImg">
<div class="upload-list-cover" @click="handleView(liveForm.coverImg)">
<span class="view-icon">查看</span>
</div>
</div>
<div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
</el-form-item>
</template>
<el-form-item label="直播间分享图" prop="shareImg">
<div class="upload-list" v-if="liveForm.shareImg">
<img :src="liveForm.shareImg">
<div class="upload-list-cover" @click="handleView(liveForm.shareImg)">
<span class="view-icon">查看</span>
</div>
</div>
<div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
</el-form-item>
<template slot-scope="{ row ,index }" slot="action">
<a v-if="params.auditStatus == 99" @click="liveGoodsData.splice(index,1)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
<span v-if="params.auditStatus == 99 || (params.auditStatus != 99 && !reviewed) || reviewed" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="params.auditStatus != 99 && !reviewed" @click="$router.push({path:'/goods-operation-edit',query:{id:row.goodsId}})" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
<span v-if="reviewed" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="reviewed" @click="selectedLiveGoods(row,index)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">{{row.___selected ? '已':''}}选择</a>
</template>
</Table>
<div class="flex">
<Page size="small" :total="goodsTotal" @on-change="changePageNumber" class="pageration" @on-page-size-change="changePageSize" :page-size="params.pageSize" show-total show-elevator
show-sizer>
</Page>
<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>
</el-form-item>
</div>
</div>
</Card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
<div v-if="params.auditStatus == 99" class="submit">
<Button type="primary" :loading="saveGoodsLoading" @click="saveLiveGoods">保存商品</Button>
</div>
<el-form-item>
<el-button type="primary" @click="createLives()">保存</el-button>
</el-form-item>
</el-form>
</el-card>
<el-dialog v-model="imageVisible" title="查看图片" width="600px">
<img :src="imageSrc" v-if="imageVisible" style="width: 100%">
</el-dialog>
</div>
</template>
<script>
import skuSelect from "@/views/lili-dialog"; //选择商品组件
import { addLiveStoreGoods, getLiveGoods } from "@/api/promotion.js";
export default {
components: {
skuSelect,
},
data() {
return {
goodsTotal: 0, //商品总数
saveGoodsLoading: false, //保存商品加载
tableLoading: false, //表格是否加载
params: {
pageNumber: 1,
pageSize: 10,
auditStatus: 2, //商品状态
imageVisible: false,
imageSrc: "",
liveForm: {
name: "",
anchorName: "",
anchorWechat: "",
feedsImg: "",
coverImg: "",
shareImg: "",
startTime: "",
},
// 商品审核状态
liveTabWay: [
{
label: "待提审",
type: 0,
},
{
label: "已审核",
type: 2,
},
{
label: "审核中",
type: 1,
},
{
label: "审核未通过",
type: 3,
},
],
// 商品表格columns
liveGoodsColumns: [
{
title: "商品",
slot: "goodsName",
},
{
title: "价格",
slot: "price",
},
{
title: "库存",
key: "quantity",
width: 100,
},
{
title: "操作",
slot: "action",
width: 100,
},
],
// 表格商品详情
liveGoodsData: [],
// 已选商品
selectedGoods: [],
times: [],
liveData: [],
commodityList: "",
};
},
props: {
// 是否是已审核，此处为组件模式时使用。去除添加等功能 只保留查询以及新增选择回调数据
reviewed: {
type: Boolean,
default: false,
},
// 初始化信息，此处为组件模式时使用。父级将数据传输到此方法上
init: {
type: null,
default: "",
},
},
watch: {
//此处为组件模式时使用 监听此处为开启则需要删除tab上面的数据只显示已审核
reviewed: {
handler(val) {
if (val) {
this.liveTabWay = this.liveTabWay.filter((item) => {
return item.label == "已审核";
});
}
},
immediate: true,
},
//此处为组件模式时使用 监听父级给传值
init: {
handler(val) {
if (val) {
this.$nextTick(() => {
// 将当前父级返回的数据和当前数据进行匹配
this.selectedGoods = val;
this.liveGoodsData.forEach((item, index) => {
val.forEach((callback) => {
if (item.id == callback.id) {
this.$set(this.liveGoodsData[index], "___selected", true);
// this.selectedGoods.push(item);
}
});
});
});
}
},
immediate: true,
},
// 监听如果次数变化说明用户再点击tab
"params.auditStatus": {
handler(val) {
this.liveGoodsData = [];
if (val != 99) {
this.params.pageNumber = 1;
this.getLiveGoodsMethods();
}
},
immediate: true,
},
mounted() {
if (this.$route.query.id) {
this.getLiveDetail();
}
this.accessToken = {
accessToken: this.getStore("accessToken"),
};
},
methods: {
/**
* 回调参数补充
*/
selectedLiveGoods(val, index) {
this.$emit("selectedGoods", val);
handleView(src) {
this.imageVisible = true;
this.imageSrc = src;
},
/**
* 解决radio数据不回显问题
*/
changeRadio(val) {
this.$set(this.liveGoodsData[val._index], "priceType", val.priceType);
},
/**
* 页面数据大小分页回调
*/
changePageSize(val) {
this.params.pageSize = val;
this.getLiveGoodsMethods("clear");
},
/**
* 分页回调
*/
changePageNumber(val) {
this.params.pageNumber = val;
this.getLiveGoodsMethods("clear");
},
/**
* 清除新增的tab
*/
clearNewLiveTab() {
this.liveTabWay.map((item, index) => {
return item.type == 99 && this.liveTabWay.splice(index, 1);
handleMaxSize(file) {
this.$Notice.warning({
title: "文件大小过大",
desc: "所选文件大小过大, 不得超过 1M.",
});
},
async getLiveDetail() {
let result = await getLiveInfo(this.$route.query.id);
/**
* 查询商品
*/
async getLiveGoodsMethods(type) {
this.tableLoading = true;
let result = await getLiveGoods(this.params);
if (result.success) {
// 将表格数据清除
if (type == "clear") {
this.liveGoodsData = [];
let data = result.result;
for (let key in data) {
this.liveForm[key] = data[key];
}
this.liveGoodsData.push(...result.result.records);
this.goodsTotal = result.result.total;
this.liveData = data.commodityList;
this.commodityList = data.commodityList;
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;
}
this.tableLoading = false;
},
/**
* 保存直播商品
*/
async saveLiveGoods() {
this.saveGoodsLoading = true;
let submit = this.liveGoodsData.map((element) => {
return {
goodsId: element.goodsId, //商品id
goodsImage: element.small, //商品图片 最大为 300 * 300
name: element.goodsName, //商品昵称
price: parseInt(element.price), //商品价格
quantity: element.quantity, //库存
price2: element.price2 ? parseInt(element.price2) : "", //商品价格
priceType: element.priceType, // priceType Number 是 价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
skuId: element.id,
url: `pages/product/goods?id=${element.id}&goodsId=${element.goodsId}`, //小程序地址
};
});
let result = await addLiveStoreGoods(submit);
if (result.success) {
this.$Message.success({
content: `添加成功！`,
});
this.params.auditStatus = 0;
}
this.saveGoodsLoading = false;
},
/**
* 商品选择器回调的商品信息
*/
selectedGoodsData(goods) {
goods.map((item) => {
return (item.priceType = 1);
});
this.liveGoodsData.push(...goods);
},
/**
* 新增商品
*/
addNewLiveGoods() {
this.clearNewLiveTab();
this.liveTabWay.push({
type: 99,
label: "新增商品",
});
this.$set(this, "liveGoodsData", []);
this.params.auditStatus = 99;
this.$refs.skuSelect.open("goods");
this.$refs.skuSelect.goodsData = JSON.parse(
JSON.stringify(this.liveGoodsData)
);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.search-form {
margin-bottom: 10px;
}
.flex {
.action {
display: flex;
justify-content: flex-end;
margin: 20px 0;
}
.wrapper {
position: relative;
}
.thumbnail {
width: 100px;
height: 100px;
border-radius: 0.4em;
}
.flex-goods {
margin: 10px;
display: flex;
align-items: center;
> img {
margin-right: 10px;
:deep(.el-button) {
margin: 0 5px !important;
}
}
.price-item {
margin: 15px 5px;
> * {
margin: 5px;
}
}
.submit {
box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.1);
height: 60px;
background: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.original-price {
margin-left: 10px;
color: #999;
text-decoration: line-through;
}
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
color: #333;
font-size: 12px;
line-height: 40px;
text-align: left;
.thumbnail {
width: 50px;
height: 50px;
border-radius: 0.4em;
}
.flex{
.flex-goods {
margin: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
> img {
margin-right: 10px;
}
}
.tips {
color: #999;
font-size: 12px;
}
.goods-table {
width: 1000px;
margin: 10px 0;
}
.upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}
.upload-list img {
width: 100%;
height: 100%;
}
.upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
display: block;
}
.view-icon {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>

316
seller/src/views/promotion/pintuan/pintuan-edit.vue
View File

@@ -1,187 +1,179 @@
<template>
<div class="new-pintuan">
<Card>
<Form ref="form" :model="form" :label-width="130" :rules="formValidate">
<FormItem label="活动名称" prop="promotionName" :label-width="130">
<Input v-model="form.promotionName" clearable style="width: 260px" maxlength="25" />
<div style="color: #cccccc">
活动名称将显示在对人拼团活动列表中，方便商家管理使用，最多输入25个字符
</div>
</FormItem>
<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>
<div class="pintuan-goods">
<el-card>
<h4>活动详情</h4>
<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>
<FormItem label="参团人数" prop="requiredNum" :label-width="130">
<Input v-model="form.requiredNum" style="width: 260px" max="8">
<span slot="append">人</span>
</Input>
<span style="color: #cccccc">参团人数不少于2人，不得超过10人。</span>
</FormItem>
<FormItem label="限购数量" prop="limitNum" :label-width="130">
<Input v-model="form.limitNum" type="number" style="width: 260px">
<span slot="append">件/人</span>
</Input>
<span style="color: #cccccc">如果设置为0则视为不限制购买数量</span>
</FormItem>
<FormItem label="虚拟成团" prop="fictitious">
<RadioGroup type="button" button-style="solid" v-model="form.fictitious">
<Radio title="开启" :label="1">
<span>开启</span>
</Radio>
<Radio title="关闭" :label="0">
<span>关闭</span>
</Radio>
</RadioGroup>
<br />
<span style="color: #cccccc">开启虚拟成团后，24小时人数未满的团，系统将会模拟匿名买家凑满人数，使该团成团；您只需要对已付款参团的真实买家发货；建议合理开启以提高成团率</span>
</FormItem>
<FormItem label="拼团规则" prop="pintuanRule">
<Input v-model="form.pintuanRule" type="textarea" :rows="4" clearable maxlength="255" style="width: 260px" />
<br />
<span style="color: #cccccc">拼团规则描述不能为空且不能大于255个字，会在WAP拼团详情页面显示</span>
</FormItem>
</Form>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
<h4>商品信息</h4>
<el-table
ref="table"
v-loading="loading"
border
class="operation"
:data="goodsData"
style="width: 100%"
>
<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"
color-dark="#000"
color-light="#fff"
:size="150"
/>
</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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</Card>
</el-card>
</div>
</template>
<script>
import { savePintuan, editPintuan, getPintuanDetail } from "@/api/promotion";
import { getPintuanGoodsList, getPintuanDetail } from "@/api/promotion.js";
import vueQr from "vue-qr";
export default {
components: { vueQr },
data() {
return {
id: this.$route.query.id, // 拼团id
form: {
// 添加或编辑表单对象初始化数据
promotionName: "",
promotionTitle: "",
pintuanRule: "",
requiredNum: "",
fictitious: 0,
limitNum: "",
startTime: "",
endTime: "",
},
// 表单验证规则
formValidate: {
promotionName: [{ required: true, message: "活动名称不能为空" }],
requiredNum: [
{ required: true, message: "参团人数不能为空" },
{
pattern: /^([2-9]|10)?$/,
message: "参团人数不合法",
},
],
limitNum: [
{ required: true, message: "限购数不能为空" },
{
pattern: /^(0|[1-9]\d?|100)$/,
message: "限购数不合法",
},
],
rangeTime: [{ required: true, message: "请选择活动时间" }],
},
submitLoading: false, // 添加或编辑提交状态
options: {
// 不可选取时间
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
loading: false,
searchForm: {
pageNumber: 1,
pageSize: 20,
},
data: [],
total: 0,
goodsData: [],
};
},
mounted() {
if (this.id) {
this.getDetail();
}
},
methods: {
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "new-pintuan");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.go(-1);
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
// 提交活动
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
let params = JSON.parse(JSON.stringify(this.form));
params.fictitious
? (params.fictitious = true)
: (params.fictitious = false);
params.startTime = this.$options.filters.unixToDate(
this.form.rangeTime[0] / 1000
);
params.endTime = this.$options.filters.unixToDate(
this.form.rangeTime[1] / 1000
);
if (params.startTime === "" || params.endTime === "") {
this.$Message.error("活动时间不能为空");
this.submitLoading = false;
return;
}
if (params.startTime < new Date()) {
this.$Message.error("拼团活动开始时间不能小于当前时间");
this.submitLoading = false;
return;
}
delete params.rangeTime;
if (!this.id) {
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
savePintuan(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("拼团活动发布成功");
this.closeCurrentPage();
}
});
} else {
// 编辑
if (params.promotionGoodsList == "")
delete params.promotionGoodsList;
editPintuan(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.closeCurrentPage();
}
});
}
promotionStatusTagType(status) {
const map = {
NEW: "info",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
init() {
this.getDataList();
this.getPintuanMsg();
},
changePage() {
this.getDataList();
},
changePageSize() {
this.searchForm.pageNumber = 1;
this.getDataList();
},
getDataList() {
this.loading = true;
this.searchForm.pintuanId = this.$route.query.id;
getPintuanGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.goodsData = res.result.records;
this.total = res.result.total;
}
});
},
// 获取详情
getDetail() {
getPintuanDetail(this.id).then((res) => {
if (res.success) {
const data = res.result;
data.rangeTime = [];
data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
this.form = data;
// 此处将值转换为 1 true ，0 false 不然ivew radio组件会报错
this.form.fictitious ? this.$set(this.form, "fictitious", 1) : this.$set(this.form, "fictitious", 0);
}
getPintuanMsg() {
getPintuanDetail(this.$route.query.id).then((res) => {
if (res.success) this.data.push(res.result);
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-form-item {
padding: 18px 10px !important;
h4 {
margin: 20px 0;
padding: 0 10px;
font-weight: bold;
color: #333;
font-size: 14px;
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>

421
seller/src/views/promotion/pintuan/pintuan-goods.vue
View File

@@ -1,262 +1,133 @@
<template>
<div class="pintuan-goods">
<Card>
<Table style="margin: 10px 0" border :columns="columns" :data="data"></Table>
<el-card>
<h4>活动详情</h4>
<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>
<Row class="operation" v-if="status == 'manager'">
<Button type="primary" @click="openSkuList">选择商品</Button>
<Button @click="delAll">批量删除</Button>
<Button @click="getDataList" icon="md-refresh">刷新</Button>
<Button type="dashed" @click="openTip = !openTip">{{
openTip ? "关闭提示" : "开启提示"
}}</Button>
</Row>
<Row v-show="openTip" v-if="status == 'manager'">
<Alert show-icon>
已选择 <span>{{ selectCount }}</span> 项
<a class="select-clear" @click="clearSelectAll">清空</a>
</Alert>
</Row>
<h3 class="act-goods">活动商品</h3>
<Table
class="mt_10"
:loading="loading"
border
:columns="goodsColumns"
:data="goodsData"
<h4>商品信息</h4>
<el-table
ref="table"
@on-selection-change="changeSelect"
v-loading="loading"
border
class="operation"
:data="goodsData"
style="width: 100%"
>
<template slot-scope="{ row, index }" slot="price">
<Input
v-model="row.price"
:disabled="status === 'view'"
@input="goodsData[index].price = row.price"
/>
</template>
<template slot-scope="{ index }" slot="action">
<a
v-if="status === 'manager'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="delGoods(index)"
>删除</a>
</template>
</Table>
<Row type="flex" justify="end" class="page operation">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
<Row class="operation">
<Button @click="closeCurrentPage">返回</Button>
<Button
v-if="status == 'manager'"
type="primary"
:loading="submitLoading"
@click="save"
>保存</Button
>
</Row>
</Card>
<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"
color-dark="#000"
color-light="#fff"
:size="150"
/>
</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>
<sku-select
ref="skuSelect"
:goodsData="goodsData"
@selectedGoodsData="selectedGoodsData"
></sku-select>
<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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getPintuanGoodsList, getPintuanDetail, editPintuan } from "@/api/promotion.js";
import skuSelect from "@/views/lili-dialog";
import vueQr from "vue-qr";
export default {
components: {
skuSelect,
},
components: { vueQr },
data() {
return {
openTip: true, // 显示提示
loading: false, // 表单加载状态
loading: false,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
pageNumber: 1,
pageSize: 20,
},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
data: [], // 表单数据
total: 0, // 表单数据总数
status: this.$route.query.status, // 查看还是修改
columns: [
// 活动详情表头
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
minWidth: 120,
},
{
title: "活动结束时间",
key: "endTime",
minWidth: 120,
},
{
title: "状态",
key: "promotionStatus",
minWidth: 100,
render: (h, params) => {
let text = "未知",
color = "";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "default";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "blue";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [h("Tag", { props: { color: color } }, text)]);
},
},
],
goodsColumns: [
// 活动商品表头
{ type: "selection", width: 60, align: "center" },
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
},
{
title: "库存",
key: "quantity",
minWidth: 40,
},
{
title: "拼团价格",
key: "price",
slot: "price",
minWidth: 50,
},
{
title: "操作",
slot: "action",
minWidth: 50,
align: "center",
},
],
goodsData: [], // 商品列表
data: [],
total: 0,
goodsData: [],
};
},
methods: {
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "pintuan-goods");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.go(-1);
promotionStatusText(status) {
const map = {
NEW: "未开始",
START: "已开始",
END: "已结束",
CLOSE: "已关闭",
};
return map[status] || "未知";
},
// 保存商品
save() {
if (this.goodsData.length == 0) {
this.$Modal.warning({ title: "提示", content: "请选择活动商品" });
return;
}
for (let i = 0; i < this.goodsData.length; i++) {
let data = this.goodsData[i];
if (!data.price) {
this.$Modal.warning({
title: "提示",
content: `请填写【${data.goodsName}】的价格`,
});
return;
}
}
this.goodsData.forEach((item) => {
item.promotionId = this.data[0].id;
item.startTime = this.data[0].startTime;
item.endTime = this.data[0].endTime;
});
this.data[0].promotionGoodsList = this.goodsData;
this.submitLoading = true;
editPintuan(this.data[0]).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("修改拼团商品成功");
this.closeCurrentPage();
}
});
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;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
// 分页 改变每页数
this.searchForm.pageSize = v;
changePage() {
this.getDataList();
},
handleSearch() {
// 搜索
changePageSize() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
handleReset() {
// 重置
this.searchForm.pageNumber = 1;
this.searchForm.promotionName = "";
this.selectDate = null;
this.getDataList();
},
clearSelectAll() {
// 清空所有已选项
this.$refs.table.selectAll(false);
},
changeSelect(e) {
// 获取选择数据
this.selectList = e;
this.selectCount = e.length;
},
getDataList() {
// 获取商品列表
this.loading = true;
this.searchForm.pintuanId = this.$route.query.id;
getPintuanGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
@@ -266,87 +137,43 @@ export default {
});
},
getPintuanMsg() {
// 获取拼团详情
getPintuanDetail(this.$route.query.id).then((res) => {
if (res.success) this.data.push(res.result);
});
},
delGoods(index) {
// 删除商品
this.goodsData.splice(index, 1);
this.selectCount = 0;
},
delAll() {
// 批量删除商品
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.skuId);
});
this.goodsData = this.goodsData.filter((item) => {
return !ids.includes(item.skuId);
});
this.selectCount = 0;
},
});
},
selectedGoodsData(item) {
// 选择商品
console.log(item);
let list = [];
item.forEach((e) => {
list.push({
goodsName: e.goodsName,
price: e.price,
originalPrice: e.price,
quantity: e.quantity,
storeId: e.storeId,
sellerName: e.sellerName,
thumbnail: e.thumbnail,
skuId: e.id,
categoryPath: e.categoryPath,
goodsId: e.goodsId,
goodsType: e.goodsType,
});
});
this.goodsData = list;
},
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.goodsData));
data.forEach((e) => {
e.id = e.skuId;
});
this.$refs.skuSelect.goodsData = data;
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.operation {
margin-bottom: 10px;
}
.act-goods {
h4 {
margin: 20px 0;
font-size: 15px;
&::before {
content: "|";
color: $theme_color;
display: inline-block;
font-weight: bold;
font-size: 16px;
margin-right: 5px;
}
padding: 0 10px;
font-weight: bold;
color: #333;
font-size: 14px;
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>

408
seller/src/views/promotion/pintuan/pintuan.vue
View File

@@ -1,90 +1,102 @@
<template>
<div class="pintuan">
<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
<div class="search">
<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"
>
<Button @click="handleReset" class="search-btn">重置</Button>
</Form>
</Row>
</Card>
<Card>
<Row class="operation padding-row">
<Button @click="newAct" type="primary">添加</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table">
<template slot-scope="{ row }" slot="action">
<div class="row">
<a v-if="row.promotionStatus == 'NEW'" @click="edit(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">编辑</a>
<span v-if="row.promotionStatus == 'NEW'" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="row.promotionStatus == 'NEW'" @click="manage(row, 'manager')" style="color:#2d8cf0;cursor:pointer;text-decoration:none">管理</a>
<span v-if="row.promotionStatus !== 'NEW' && row.promotionStatus !== 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="row.promotionStatus !== 'NEW' && row.promotionStatus !== 'CLOSE'" @click="manage(row, 'view')" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
<span v-if="row.promotionStatus == 'CLOSE'" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="row.promotionStatus == 'CLOSE'" @click="open(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">开启</a>
<span v-if="row.promotionStatus == 'START'" style="margin:0 8px;color:#dcdee2">|</span>
<a v-if="row.promotionStatus == 'START'" @click="close(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">关闭</a>
</div>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber + 1"
<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="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="[10, 20, 50]"
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>
@@ -94,210 +106,86 @@ export default {
name: "pintuan",
data() {
return {
loading: true, // 表单加载状态
selectDate: [],
loading: true,
searchForm: {
// 搜索框初始化对象
pageNumber: 0, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
promotionName: "",
promotionStatus: "",
},
selectDate: null, // 选择的时间
columns: [
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
},
{
title: "活动结束时间",
key: "endTime",
},
{
title: "状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
let text = "未知",
color = "default";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "default";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "blue";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [h("Tag", { props: { color: color } }, text)]);
},
},
{
title: "操作",
slot: "action",
align: "center",
width: 250,
},
],
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();
},
// 改变页码
changePage(v) {
this.searchForm.pageNumber = v - 1;
this.searchForm.pageNumber = v;
this.getDataList();
},
// 改变页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
this.searchForm.pageNumber = 0;
this.searchForm.pageSize = 10;
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 重置
handleReset() {
this.searchForm = {
// 搜索框初始化对象
pageNumber: 0, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime",
order: "desc", // 默认排序方式
};
this.selectDate = "";
this.getDataList();
},
// 时间段分别赋值
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
// 获取列表数据
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;
});
},
// 新建拼团
newAct() {
this.$router.push({ name: "pintuan-edit" });
view(v) {
this.$router.push({ name: "pintuan-goods", query: { id: v.id } });
},
// 编辑拼团
edit(v) {
this.$router.push({ name: "pintuan-edit", query: { id: v.id } });
},
// 管理拼团商品
manage(v, status) {
this.$options.filters.customRouterPush({name: "pintuan-goods", query: { id: v.id, status: status }} )
},
// 手动开启拼团活动
open(v) {
let sTime = new Date();
sTime.setMinutes(sTime.getMinutes() + 10);
let eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
this.openStartTime = sTime.getTime();
this.openEndTime = eTime.getTime();
this.$Modal.confirm({
title: "确认开启(默认为当前时间的十分钟之后)",
content: "您确认要开启此拼团活动?",
onOk: () => {
let params = {
startTime: this.openStartTime,
endTime: this.openEndTime,
};
editPintuanStatus(v.id, params).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("开启活动成功");
this.getDataList();
}
});
},
render: (h) => {
return h("div", [
h("DatePicker", {
props: {
type: "datetimerange",
placeholder: "请选择开始时间和结束时间",
value: [sTime, eTime],
},
style: {
width: "350px",
},
on: {
input: (val) => {
if (val[0]) {
this.openStartTime = val[0].getTime();
}
if (val[1]) {
this.openEndTime = val[1].getTime();
}
},
},
}),
]);
},
});
},
// 关闭拼团活动
close(v) {
this.$Modal.confirm({
title: "确认关闭",
content: "您确认要关闭此拼团活动?",
loading: true,
onOk: () => {
editPintuanStatus(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("关闭活动成功");
this.getDataList();
}
});
},
});
},
// 删除拼团活动
remove(v) {
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除此拼团活动?",
loading: true,
onOk: () => {
// 删除
deletePintuan(v.id).then((res) => {
updatePintuanStatus(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
@@ -311,17 +199,11 @@ export default {
mounted() {
this.init();
},
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false;
next();
},
};
</script>
<style lang="scss">
@import "@/styles/table-common.scss";
.row Button {
margin-right: 4px;
<style lang="scss" scoped>
.mt_10 {
margin-top: 10px;
}
</style>

488
seller/src/views/promotion/seckill/seckill-goods.vue
View File

@@ -1,298 +1,147 @@
<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>
<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>
<Row class="operation">
<template v-if="promotionStatus == 'NEW'">
<Button type="primary" @click="openSkuList">选择商品</Button>
<!-- <Button @click="delAll">批量删除</Button> -->
</template>
</Row>
<Row class="operation">
<Tabs type="card" v-model="tabCurrent">
<TabPane
v-for="(tab, tabIndex) in goodsList"
:key="tabIndex"
:label="tab.hour"
:name="tabIndex + ''"
>
<Table
:loading="loading"
border
:columns="goodsColumns"
v-if="tabIndex == tabCurrent"
:data="tab.list"
:ref="'table' + tabIndex"
@on-selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="originalPrice">
<div>{{ row.originalPrice | unitPrice("￥") }}</div>
</template>
<el-table
ref="table"
v-loading="loading"
border
class="operation"
:data="goodsList"
style="width: 100%"
>
<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, index }" slot="quantity">
<InputNumber
:min="0"
v-model="row.quantity"
:disabled="row.promotionApplyStatus == 'PASS'"
@input="goodsList[tabIndex].list[index].quantity = row.quantity"
/>
</template>
<template slot-scope="{ row, index }" slot="price">
<InputNumber
:min="0"
style="width: 100%"
v-model="row.price"
:disabled="row.promotionApplyStatus == 'PASS'"
@input="goodsList[tabIndex].list[index].price = row.price"
/>
</template>
<template slot-scope="{ row }" slot="promotionApplyStatus">
<Badge
status="success"
v-if="row.promotionApplyStatus == 'PASS'"
:text="promotionApplyStatus(row.promotionApplyStatus)"
/>
<Badge
status="blue"
v-if="row.promotionApplyStatus == 'APPLY'"
:text="promotionApplyStatus(row.promotionApplyStatus)"
/>
<Badge
status="error"
v-if="row.promotionApplyStatus == 'REFUSE'"
:text="promotionApplyStatus(row.promotionApplyStatus)"
/>
<span
v-if="row.promotionApplyStatus == 'REFUSE'"
@click="showReason(row.failReason)"
class="reason"
>（拒绝原因）</span
>
<Badge
status="error"
v-if="row.promotionApplyStatus == ''"
:text="promotionApplyStatus(row.promotionApplyStatus)"
/>
</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
v-if="promotionStatus === 'NEW'"
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="delGoods(index, row)"
>删除</a>
</template>
</Table>
</TabPane>
</Tabs>
</Row>
<Row class="operation">
<Button @click="closeCurrentPage">返回</Button>
<Button
type="primary"
:loading="submitLoading"
v-if="promotionStatus === 'NEW'"
@click="save"
>提交
</Button>
</Row>
</Card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
<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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@current-change="changePage"
@size-change="changePageSize"
/>
</div>
</el-card>
</div>
</template>
<script>
import {
seckillGoodsList,
seckillDetail,
setSeckillGoods,
delSeckillGoods,
} from "@/api/promotion.js";
import skuSelect from "@/views/lili-dialog";
export default {
components: {
skuSelect,
},
watch: {
tabCurrent(val) {
this.tabIndex = val;
},
},
data() {
return {
tabCurrent: 0,
promotionStatus: "", // 活动状态
loading: false, // 表单加载状态
promotionStatus: "",
loading: false,
searchForm: {
// 搜索框初始化对象
pageNumber: 0, // 当前页数
pageSize: 1000, // 页面大小
pageNumber: 1,
pageSize: 20,
},
tabIndex: 0, // 选择商品的下标
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
data: [{}], // 表单数据
columns: [
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
},
{
title: "报名截止时间",
slot: "applyEndTime",
},
{
title: "时间场次",
slot: "hours",
},
],
goodsColumns: [
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
},
{
title: "商品价格",
slot: "originalPrice",
minWidth: 50,
},
{
title: "库存",
slot: "quantity",
minWidth: 40,
},
{
title: "活动价格",
slot: "price",
minWidth: 50,
},
{
title: "状态",
slot: "promotionApplyStatus",
minWidth: 30,
},
{
title: "操作",
slot: "action",
minWidth: 50,
},
],
goodsList: [], // 商品列表
defaultGoodsList: [], //默认查询秒杀的商品
total: 0,
data: [],
goodsList: [],
};
},
methods: {
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "seckill-goods");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.go(-1);
},
// 提交秒杀商品
save() {
let list = JSON.parse(JSON.stringify(this.goodsList));
let params = {
seckillId: this.$route.query.id,
applyVos: [],
seckillStatusText(status) {
const map = {
NEW: "新建",
START: "开始",
END: "结束",
CLOSE: "废弃",
};
list.forEach((e, index) => {
e.list.forEach((i) => {
// if(e.id) delete e.id
params.applyVos.push(i);
});
});
this.submitLoading = true;
console.log(list);
setSeckillGoods(params).then((res) => {
this.submitLoading = false;
if (res && res.success) {
this.$Message.success("提交活动商品成功");
this.closeCurrentPage();
}
});
return map[status] || status || "-";
},
seckillStatusTagType(status) {
const map = {
NEW: "danger",
START: "success",
END: "danger",
CLOSE: "danger",
};
return map[status] || "danger";
},
// 初始化数据
init() {
this.getSeckillMsg();
},
// 清除选中状态
clearSelectAll() {
this.$refs.table.selectAll(false);
changePage() {
this.getDataList();
},
// 获取选择数据
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
changePageSize() {
this.searchForm.pageNumber = 1;
this.getDataList();
},
getDataList() {
// 获取商品详情
this.loading = true;
this.searchForm.seckillId = this.$route.query.id;
// 处理过的时间 为‘1:00’
let hours = this.unixHours(this.data[0].hours);
hours.forEach((e) => {
this.goodsList.push({
hour: e,
list: [],
});
});
seckillGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success && res.result) {
let data = res.result.records;
// 未处理时间 为'1'
let noFilterhours = this.data[0].hours.split(",");
if (data.length) {
noFilterhours.forEach((e, index) => {
data.forEach((i) => {
if (i.timeLine == e) {
this.goodsList[index].list.push(i);
}
});
});
this.defaultGoodsList = this.goodsList[this.tabIndex].list;
}
this.goodsList = res.result.records;
this.total = res.result.total;
}
});
},
getSeckillMsg() {
// 获取活动详情
seckillDetail(this.$route.query.id).then((res) => {
if (res.success && res.result) {
this.data = [];
@@ -303,116 +152,57 @@ export default {
});
},
delGoods(index, row) {
// 删除商品
if (row.promotionApplyStatus === "PASS") {
const params = {
seckillId: row.seckillId,
id: row.id,
};
delSeckillGoods(params).then((res) => {
if (res.success) {
this.goodsList[this.tabIndex].list.splice(index, 1);
this.$Message.success("删除成功！");
}
});
} else {
this.goodsList[this.tabIndex].list.splice(index, 1);
this.$Message.success("删除成功！");
}
},
selectedGoodsData(callback) {
let way = [];
let data = JSON.parse(JSON.stringify(callback));
data.forEach((e) => {
way.push({
goodsName: e.goodsName,
price: e.price,
originalPrice: e.price,
promotionApplyStatus: e.promotionApplyStatus || "",
quantity: e.quantity,
seckillId: this.$route.query.id,
storeId: e.storeId,
storeName: e.storeName,
skuId: e.id,
timeLine: this.data[0].hours.split(",")[this.tabIndex],
});
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除该商品吗?删除后不可恢复",
onOk: () => {
const params = {
seckillId: row.seckillId,
id: row.id,
};
delSeckillGoods(params).then((res) => {
if (res.success) {
this.goodsList.splice(index, 1);
this.$Message.success("删除成功！");
}
});
},
});
this.$set(this.goodsList[this.tabIndex], "list", [
...way,
// ...this.defaultGoodsList,
]);
// this.$nextTick(() => {
// this.$forceUpdate();
// });
},
openSkuList() {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = this.goodsList[this.tabIndex].list;
data.forEach((e) => {
e.id = e.skuId;
});
this.$refs.skuSelect.goodsData = data;
},
unixDate(time) {
// 处理报名截止时间
return this.$options.filters.unixToDate(new Date(time) / 1000);
return this.$filters.unixToDate(new Date(time) / 1000);
},
unixHours(item) {
if (item) {
// 处理小时场次
let hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
hourArr[i] += ":00";
}
return hourArr;
const hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
hourArr[i] += ":00";
}
return [];
},
// 格式化申请状态
promotionApplyStatus(key) {
switch (key) {
case "APPLY":
return "申请";
case "PASS":
return "通过";
case "REFUSE":
return "拒绝";
default:
return "未申请";
}
},
// 展示审核拒绝原因
showReason(reason) {
this.$Modal.info({
title: "拒绝原因",
content: reason,
});
return hourArr;
},
},
mounted() {
this.init();
},
// 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
beforeRouteLeave(to, from, next) {
if (to.name === "seckill") {
to.meta.keepAlive = true;
}
next();
},
};
</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>

133
seller/src/views/promotion/seckill/seckill-setup.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<div v-if="templateShow">
<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">
<el-button @click="closeCurrentPage">返回</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getSetting, setSetting } from "@/api/index";
export default {
data() {
return {
templateShow: false,
submitLoading: false,
times: [],
form: {
seckillRule: "",
},
};
},
mounted() {
this.init();
},
methods: {
closeCurrentPage() {
this.$store.commit("removeTag", "manager-seckill-add");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
async handleSubmit() {
const hours = this.times
.filter((item) => item.check)
.map((item) => item.time)
.join(",");
const result = await setSetting("SECKILL_SETTING", {
seckillRule: this.form.seckillRule,
hours,
});
if (result.success) {
this.$Message.success("设置成功!");
this.init();
}
},
async init() {
const result = await getSetting("SECKILL_SETTING");
if (result.success) {
this.templateShow = true;
this.form.seckillRule = result.result.seckillRule;
this.times = [];
for (let i = 0; i < 24; i++) {
let matched = false;
if (result.result.hours) {
const way = result.result.hours.split(",");
way.forEach((hours) => {
if (hours == i) {
this.times.push({ time: i, check: true });
matched = true;
}
});
}
if (!matched) {
this.times.push({ time: i, check: false });
}
}
}
},
handleClickTime(val) {
val.check = !val.check;
},
},
};
</script>
<style scoped lang="scss">
.row {
width: 50%;
}
.foot-btn {
margin-left: 10px;
display: flex;
gap: 8px;
}
.active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
color: #fff;
background: $theme_color !important;
}
.time {
width: 100%;
cursor: pointer;
transition: 0.35s;
border-radius: 0.8em;
justify-content: center;
align-items: center;
display: flex;
background: #f3f5f7;
height: 50px;
font-size: 15px;
}
.time-item {
margin: 8px 0;
}
</style>

394
seller/src/views/promotion/seckill/seckill.vue
View File

@@ -1,207 +1,269 @@
<template>
<div class="seckill">
<Card>
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="活动名称" prop="goodsName">
<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">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button>
</Form>
</Card>
<Card>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
<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>
<template slot-scope="{ row }" slot="action">
<a v-if="row.promotionStatus === 'NEW'" @click="manage(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">管理</a>
<a v-else @click="manage(row)" style="color:#2d8cf0;cursor:pointer;text-decoration:none">查看</a>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
show-sizer></Page>
</Row>
</Card>
<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"
>
<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%"
>
<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>
<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"
layout="total, sizes, prev, pager, next, jumper"
size="small"
@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 { seckillList } from "@/api/promotion";
import setupSeckill from "@/views/promotion/seckill/seckill-setup";
export default {
name: "seckill",
components: {},
data () {
components: {
setupSeckill,
},
data() {
return {
activeTab: "list",
selectDate: [],
loading: true, // 表单加载状态
loading: true,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime",
order: "desc", // 默认排序方式
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
},
columns: [
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
},
{
title: "报名截止时间",
slot: "applyEndTime",
},
{
title: "时间场次",
slot: "hours",
},
{
title: "状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
let text = "未知",
color = "default";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "geekblue";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "volcano";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
text
),
]);
},
},
{
title: "操作",
slot: "action",
align: "center",
width: 100,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
data: [],
total: 0,
};
},
methods: {
// 初始化数据
init () {
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) {
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 改变页数
changePageSize (v) {
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch () {
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 重置
handleReset () {
this.searchForm = {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime",
order: "desc", // 默认排序方式
};
this.selectDate = "";
this.getDataList();
edit(v) {
this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
},
// 管理
manage (row) {
this.$router.push({ name: "seckill-goods", query: { id: row.id } });
manage(v) {
this.$router.push({ name: "seckill-goods", query: { id: v.id } });
},
// 获取列表数据
getDataList () {
off(v) {
this.$Modal.confirm({
title: "提示",
content: "您确定要下架该活动吗？",
onOk: () => {
updateSeckillStatus(v.id).then((res) => {
if (res.success) {
this.$Message.success("下架成功");
this.getDataList();
}
});
},
});
},
expire(v) {
this.$Modal.confirm({
title: "提示",
content: "您确定要作废该活动吗？",
onOk: () => {
delSeckill(v.id).then((res) => {
if (res.success) {
this.$Message.success("作废成功");
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;
}
// 带多条件搜索参数获取表单数据
seckillList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
},
unixDate (time) {
// 处理报名截止时间
return this.$options.filters.unixToDate(new Date(time) / 1000);
},
unixHours (item) {
// 处理小时场次
let hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
hourArr[i] += ":00";
}
return hourArr;
getSeckillList(this.searchForm)
.then((res) => {
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
})
.finally(() => {
this.loading = false;
});
},
},
mounted () {
mounted() {
this.init();
},
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false
next()
}
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
<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>