mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-06 17:09:08 +08:00
feat(seller): 营销页面体验优化与列表页样式统一
- 拼团:去除拼团规则字段、编辑页商品表补SKU编码/规格/图片、提交按钮失败卡死修复 - 秒杀:活动详情改描述列表、场次商品数徽标、当前场次提示、页签标题动态显示活动名称 - 满额:卡片分区布局、查看模式只读描述视图、去除活动描述、新建默认近七天时间 - 优惠券:查看模式只读描述视图、去除店铺承担比例与范围描述、指定商品表加SKU/规格/图片 - 商品选择器:首列改SKU编码、弹层z-index修复 - 分销订单:商品信息列重构、卡片间距、状态筛选Tab - 库存管理:筛选与列表分区、行高压缩、SPU/SKU编码列 - 全局:所有列表操作列统一右对齐
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
<el-table v-loading="loading" :data="monthDays" border style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="140" />
|
||||
<el-table-column prop="headcount" label="预约人数" width="120" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<el-table-column align="right" label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openDay(row.date)">查看明细</el-button>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="170" />
|
||||
<el-table-column label="操作" width="140" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="140" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="openEdit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<template #default="{ row }">{{ fieldCount(row.formSchema) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间" min-width="170" />
|
||||
<el-table-column label="操作" width="160" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="160" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="goDesigner(row.id)">编辑</el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<el-table-column label="服务状态" width="110" align="center">
|
||||
<template #default="{ row }">{{ statusText(row.serviceStatus) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<el-table-column align="right" label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.serviceStatus === 'PENDING_CLAIM'"
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="添加时间" min-width="160" />
|
||||
<el-table-column label="操作" min-width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" min-width="120" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
@@ -176,7 +176,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" align="center">
|
||||
<el-table-column label="操作" width="80" align="right">
|
||||
<template #default="{ $index }">
|
||||
<a
|
||||
v-if="selectedGoodsList.length > 1"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="distribution-order">
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
@@ -43,6 +43,12 @@
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-tabs v-model="activeStatus" class="status-tabs" @tab-change="handleStatusChange">
|
||||
<el-tab-pane label="全部" name="" />
|
||||
<el-tab-pane label="未完成" name="NO_COMPLETED" />
|
||||
<el-tab-pane label="完成" name="COMPLETE" />
|
||||
<el-tab-pane label="退款" name="REFUND" />
|
||||
</el-tabs>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@@ -61,30 +67,30 @@
|
||||
<el-table-column label="商品信息" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-msg">
|
||||
<img :src="row.image" width="60" height="60" alt="" />
|
||||
<div>
|
||||
<div class="div-zoom">
|
||||
<img :src="row.image" class="goods-thumb" alt="" />
|
||||
<div class="goods-detail">
|
||||
<div class="goods-name-line">
|
||||
<a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
</div>
|
||||
<div style="color: #999; font-size: 10px">数量:x{{ row.num }}</div>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../assets/qrcode.svg"
|
||||
class="hover-pointer"
|
||||
width="20"
|
||||
height="20"
|
||||
alt="qrcode"
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../assets/qrcode.svg"
|
||||
class="hover-pointer qrcode-icon"
|
||||
width="16"
|
||||
height="16"
|
||||
alt="qrcode"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="goods-num">数量:x{{ row.num }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -135,6 +141,7 @@ defineOptions({ name: "distributionOrder" });
|
||||
const route = useRoute();
|
||||
|
||||
const timeRange = ref([]);
|
||||
const activeStatus = ref("");
|
||||
const distributionId = ref(route.query.id);
|
||||
const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
|
||||
getDistributionOrder,
|
||||
@@ -142,7 +149,7 @@ const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch
|
||||
pageSize: 20,
|
||||
sort: "create_time",
|
||||
order: "desc",
|
||||
form: { orderSn: "", distributionName: "" },
|
||||
form: { orderSn: "", distributionName: "", distributionOrderStatus: "" },
|
||||
beforeRequest: (p) => {
|
||||
const params = { ...p };
|
||||
if (distributionId.value) {
|
||||
@@ -163,6 +170,11 @@ function handleReset() {
|
||||
resetSearch();
|
||||
}
|
||||
|
||||
function handleStatusChange(status) {
|
||||
searchForm.distributionOrderStatus = status;
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
// searchFormRef:模板 ref 改名避免与响应式变量 searchForm 互相覆盖
|
||||
const searchFormRef = ref(null);
|
||||
const table = ref(null);
|
||||
@@ -211,11 +223,43 @@ function filterStatusTagType(status) {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.distribution-order {
|
||||
.el-card + .el-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
|
||||
.goods-thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
margin-left: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-name-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.qrcode-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
<el-table-column prop="createTime" label="导入时间" width="170" />
|
||||
<el-table-column prop="allocatedTime" label="发卡时间" width="170" />
|
||||
<el-table-column prop="orderSn" label="订单号" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="100" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row && row.status === 'UNUSED'"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" label="分类名称" min-width="200" />
|
||||
<el-table-column label="操作" min-width="220" fixed="right">
|
||||
<el-table-column align="right" label="操作" min-width="220" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-card class="search-card">
|
||||
<div @keyup.enter="handleSearch">
|
||||
<el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
|
||||
<el-form-item label="商品名称" prop="goodsName">
|
||||
@@ -33,33 +33,33 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<div>
|
||||
<div class="operation padding-row">
|
||||
<div class="operation">
|
||||
<el-button type="primary" class="export" @click="exportStock">批量导出</el-button>
|
||||
<el-button class="export" @click="openImportStock">批量导入</el-button>
|
||||
</div>
|
||||
<el-table ref="tableRef" v-loading="loading" border :data="stockAllData" class="mt_10" style="width: 100%">
|
||||
<el-table-column label="商品信息" min-width="400">
|
||||
<el-table-column label="商品信息" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div style="margin-top: 5px; height: 90px; display: flex">
|
||||
<img :src="row.thumbnail" style="height: 80px; margin-top: 3px; width: 70px" alt="" />
|
||||
<div style="margin-left: 13px; margin-top: 5px">
|
||||
<div class="div-zoom" style="color: black">{{ row.goodsName }}</div>
|
||||
<div class="div-zoom" style="margin-top: 5px">ID: {{ row.goodsId }}</div>
|
||||
</div>
|
||||
<div class="goods-cell">
|
||||
<img :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<div class="goods-title">{{ row.goodsName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU信息" min-width="400">
|
||||
<template #default="{ row }">
|
||||
<div style="margin-top: 5px">
|
||||
<div class="div-zoom" style="color: black">{{ row.simpleSpecs }}</div>
|
||||
<div class="div-zoom" style="margin-top: 5px">ID: {{ row.id }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table-column label="SPU编码" min-width="170" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.goodsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" min-width="120">
|
||||
<el-table-column label="SKU信息" min-width="160" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.simpleSpecs || "-" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.sn || row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" width="100" align="right">
|
||||
<template #default="{ row }">{{ row.quantity || 0 }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -220,4 +220,34 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/table-common.scss";
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.operation {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<el-table-column label="预警值" min-width="120">
|
||||
<template #default="{ row }">{{ row.alertQuantity || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="120" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="openUpdataStockModal(row)">库存</a>
|
||||
</template>
|
||||
@@ -116,7 +116,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<el-table-column label="操作" width="200" align="right">
|
||||
<template #default="{ row }">
|
||||
<el-input-number v-model="row.quantity" :min="0" />
|
||||
</template>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="120" />
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<el-table-column label="操作" align="right" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="editGoods(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -25,7 +25,13 @@
|
||||
</div>
|
||||
<div class="filter-row-field">
|
||||
<span class="filter-row-label">商品类型</span>
|
||||
<el-select v-model="filterForm.goodsType" placeholder="请选择" clearable class="filter-control">
|
||||
<el-select
|
||||
v-model="filterForm.goodsType"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="filter-control"
|
||||
popper-class="goods-dialog-select-popper"
|
||||
>
|
||||
<el-option label="实物商品" value="PHYSICAL_GOODS" />
|
||||
<el-option label="虚拟商品" value="VIRTUAL_GOODS" />
|
||||
<el-option label="电子卡券" value="E_COUPON" />
|
||||
@@ -43,6 +49,7 @@
|
||||
clearable
|
||||
filterable
|
||||
class="filter-control"
|
||||
popper-class="goods-dialog-select-popper"
|
||||
>
|
||||
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
@@ -54,6 +61,7 @@
|
||||
:options="shopCategoryList"
|
||||
:props="shopCategoryProps"
|
||||
placeholder="请选择店铺分类"
|
||||
popper-class="goods-dialog-cascader-popper"
|
||||
clearable
|
||||
filterable
|
||||
class="filter-control"
|
||||
@@ -129,7 +137,7 @@
|
||||
align="center"
|
||||
:reserve-selection="true"
|
||||
/>
|
||||
<el-table-column prop="id" label="ID" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="sn" label="SKU编码" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="商品图片" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<img v-if="row" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
@@ -647,7 +655,8 @@ defineExpose({ type });
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.goods-dialog-cascader-popper {
|
||||
.goods-dialog-cascader-popper,
|
||||
.goods-dialog-select-popper {
|
||||
z-index: 10001 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" width="170" />
|
||||
<el-table-column label="操作" align="center" fixed="right" width="100">
|
||||
<el-table-column label="操作" align="right" fixed="right" width="100">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="detail(row)">{{ row.replyStatus ? "查看" : "回复" }}</a>
|
||||
</template>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="120" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">
|
||||
{{ row.complainStatus === "COMPLETE" ? "详情" : "处理" }}
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="申请时间" width="180" />
|
||||
<el-table-column label="操作" fixed="right" align="center" width="100">
|
||||
<el-table-column label="操作" fixed="right" align="right" width="100">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="申请时间" width="180" />
|
||||
<el-table-column label="操作" fixed="right" align="center" width="100">
|
||||
<el-table-column label="操作" fixed="right" align="right" width="100">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<el-table-column label="操作" width="200" align="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<el-tag :type="orderStatusTagType(row.orderStatus)">{{ orderStatusText(row.orderStatus) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="200" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" style="margin-right: 12px" @click="openReceiptModal(row, 'detail')">详情</a>
|
||||
<a
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column label="操作" width="260" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="260" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goDetail(row)">查看</a>
|
||||
<template v-if="row.status === 'DRAFT'">
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
<el-table-column label="金额" width="100" align="right">
|
||||
<template #default="{ row }">¥{{ formatMoney(row.amount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="!readonly" label="操作" width="70" align="center" fixed="right">
|
||||
<el-table-column v-if="!readonly" label="操作" width="70" align="right" fixed="right">
|
||||
<template #default="{ $index }">
|
||||
<a class="link-text" @click="removeItem($index)">删除</a>
|
||||
</template>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="operatorName" label="操作人" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="inboundTime" label="入库时间" width="170" />
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="100" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goDetail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<el-table-column prop="makerName" label="制单人" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="countTime" label="盘点时间" width="170" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="100" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goDetail(row)">查看明细</a>
|
||||
</template>
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column prop="auditTime" label="审核时间" width="170" />
|
||||
<el-table-column prop="auditorName" label="审核人" width="120" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="220" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="220" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goDetail(row)">查看</a>
|
||||
<template v-if="row.status === 'DRAFT'">
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
<el-table-column v-if="orderDetail.id" label="已入库" width="80" align="center">
|
||||
<template #default="{ row }">{{ row.receivedQuantity || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="!readonly" label="操作" width="70" align="center" fixed="right">
|
||||
<el-table-column v-if="!readonly" label="操作" width="70" align="right" fixed="right">
|
||||
<template #default="{ $index }">
|
||||
<a class="link-text" @click="removeItem($index)">删除</a>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-card v-if="disabled">
|
||||
<h4>基本信息</h4>
|
||||
<el-descriptions border :column="2" class="desc-block">
|
||||
<el-descriptions-item label="活动名称">{{ form.promotionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优惠券名称">{{ form.couponName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优惠券类型">
|
||||
{{ form.couponType === "DISCOUNT" ? "打折" : "减免现金" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="form.couponType === 'DISCOUNT'" label="折扣">
|
||||
{{ form.couponDiscount }} 折
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-else label="面额">
|
||||
{{ $filters.unitPrice(form.price, "¥") }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="活动类型">
|
||||
{{ form.getType === "FREE" ? "免费领取" : "活动赠送" }}
|
||||
</el-descriptions-item>
|
||||
<template v-if="form.getType === 'FREE'">
|
||||
<el-descriptions-item label="发放数量">
|
||||
{{ form.publishNum ? form.publishNum : "不限" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="领取数量限制">
|
||||
{{ form.couponLimitNum ? form.couponLimitNum : "不限" }}
|
||||
</el-descriptions-item>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
|
||||
<h4>使用限制</h4>
|
||||
<el-descriptions border :column="2" class="desc-block">
|
||||
<el-descriptions-item label="消费门槛">
|
||||
{{ $filters.unitPrice(form.consumeThreshold, "¥") }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="有效期">
|
||||
<span v-if="rangeTimeType === 1 && form.rangeTime && form.rangeTime.length === 2">
|
||||
{{ formatTime(form.rangeTime[0]) }} ~ {{ formatTime(form.rangeTime[1]) }}
|
||||
</span>
|
||||
<span v-else>领取当天开始 {{ form.effectiveDays }} 天内有效</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="使用范围">{{ scopeTypeText }}</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="form.scopeType === 'PORTION_GOODS_CATEGORY'"
|
||||
label="商品分类"
|
||||
:span="2"
|
||||
>
|
||||
{{ scopeCategoryText }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<template v-if="form.scopeType === 'PORTION_GOODS'">
|
||||
<h4>指定商品</h4>
|
||||
<el-table border :data="form.promotionGoodsList" style="width: 100%">
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<span class="goods-name">{{ row.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<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" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<div class="foot-btn">
|
||||
<el-button @click="closeCurrentPage">返回</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-else>
|
||||
<el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
|
||||
<div class="base-info-item">
|
||||
<h4>基本信息</h4>
|
||||
@@ -62,19 +149,6 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="店铺承担比例" prop="storeCommission">
|
||||
<div class="form-field-block">
|
||||
<el-input
|
||||
:disabled="disabled"
|
||||
v-model="form.storeCommission"
|
||||
placeholder="店铺承担比例"
|
||||
style="width: 260px"
|
||||
>
|
||||
<template #append>%</template>
|
||||
</el-input>
|
||||
<div class="form-tip">店铺承担比例,输入0-100之间数值</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
|
||||
<div class="form-field-block">
|
||||
<el-input
|
||||
@@ -102,18 +176,6 @@
|
||||
<div class="form-tip">如果领取数量为0时,则代表不限制领取数量</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围描述" prop="description">
|
||||
<el-input
|
||||
:disabled="disabled"
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<h4>使用限制</h4>
|
||||
<div class="form-item-view">
|
||||
@@ -185,19 +247,36 @@
|
||||
@selection-change="changeSelect"
|
||||
>
|
||||
<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">
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<span class="goods-name">{{ row.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<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">
|
||||
<el-table-column label="库存" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<el-table-column label="操作" width="100" align="right">
|
||||
<template #default="{ $index }">
|
||||
<el-button
|
||||
:disabled="disabled"
|
||||
@@ -237,7 +316,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { saveShopCoupon, getShopCoupon, editShopCoupon } from "@/api/promotion";
|
||||
import { getGoodsCategoryAll } from "@/api/goods";
|
||||
@@ -283,7 +362,7 @@ const disabled = ref(route.query.onlyView);
|
||||
const rangeTimeType = ref(1);
|
||||
const modalType = ref(0);
|
||||
const form = ref({
|
||||
storeCommission: 0,
|
||||
storeCommission: 100,
|
||||
publishNum: 0,
|
||||
scopeType: "ALL",
|
||||
couponLimitNum: 1,
|
||||
@@ -316,10 +395,6 @@ const formRule = reactive({
|
||||
message: "请输入0-10的数字,可有一位小数",
|
||||
},
|
||||
],
|
||||
storeCommission: [
|
||||
{ required: true, message: "请输入店铺承担比例" },
|
||||
{ pattern: regular.rate, message: "请输入0-100的正整数" },
|
||||
],
|
||||
publishNum: [
|
||||
{ required: true, message: "请输入发放数量" },
|
||||
{ pattern: regular.Integer, message: "请输入正整数" },
|
||||
@@ -328,7 +403,6 @@ const formRule = reactive({
|
||||
{ required: true, message: "领取限制不能为空" },
|
||||
{ pattern: regular.Integer, message: "请输入正整数" },
|
||||
],
|
||||
description: [{ required: true, message: "请输入范围描述" }],
|
||||
});
|
||||
const options = {
|
||||
disabledDate(date) {
|
||||
@@ -336,6 +410,39 @@ const options = {
|
||||
},
|
||||
};
|
||||
|
||||
const scopeTypeText = computed(() => {
|
||||
const map = {
|
||||
ALL: "全品类",
|
||||
PORTION_GOODS: "指定商品",
|
||||
PORTION_GOODS_CATEGORY: "部分商品分类",
|
||||
};
|
||||
return map[form.value.scopeType] || form.value.scopeType;
|
||||
});
|
||||
const scopeCategoryText = computed(() => {
|
||||
const findLabel = (list, value) => {
|
||||
for (const item of list) {
|
||||
if (item.value === value) return item.label;
|
||||
if (item.children) {
|
||||
const hit = findLabel(item.children, value);
|
||||
if (hit) return hit;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return (form.value.scopeIdGoods || [])
|
||||
.map((path) => {
|
||||
const ids = Array.isArray(path) ? path : [path];
|
||||
return ids.map((i) => findLabel(goodsCategoryList.value, i)).filter(Boolean).join(" / ");
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(";");
|
||||
});
|
||||
function formatTime(val) {
|
||||
if (!val) return "-";
|
||||
const d = val instanceof Date ? val : new Date(val);
|
||||
return unixToDate(d.getTime() / 1000);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => form.value.getType,
|
||||
(val) => {
|
||||
@@ -541,6 +648,8 @@ function selectedGoodsData(item) {
|
||||
goodsType: e.goodsType,
|
||||
goodsId: e.goodsId,
|
||||
originPrice: e.price,
|
||||
sn: e.sn,
|
||||
simpleSpecs: e.simpleSpecs,
|
||||
});
|
||||
});
|
||||
form.value.promotionGoodsList = list;
|
||||
@@ -605,6 +714,35 @@ h4 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.desc-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.foot-btn {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.form-field-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
v-if="showActionColumn"
|
||||
label="操作"
|
||||
width="250"
|
||||
align="center"
|
||||
align="right"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<el-tag :type="statusType(row.promotionStatus)">{{ statusText(row.promotionStatus) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<el-table-column align="right" label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goEdit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -1,46 +1,142 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
|
||||
<div class="base-info-item">
|
||||
<h4>基本信息</h4>
|
||||
<div class="form-item-view">
|
||||
<el-form-item label="活动名称" prop="promotionName">
|
||||
<el-input
|
||||
v-model="form.promotionName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="活动名称"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间" prop="rangeTime">
|
||||
<el-date-picker
|
||||
class="full-discount-range-picker"
|
||||
type="datetimerange"
|
||||
v-model="form.rangeTime"
|
||||
:disabled="fieldDisabled"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="请选择"
|
||||
:disabled-date="options.disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动描述" prop="description">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
:disabled="fieldDisabled"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="full-discount-add">
|
||||
<template v-if="fieldDisabled">
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="section-title">基本信息</span>
|
||||
</template>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="活动名称">{{ form.promotionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动时间">
|
||||
{{ form.startTime }} ~ {{ form.endTime }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<h4>优惠设置</h4>
|
||||
<div class="form-item-view">
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="section-title">优惠设置</span>
|
||||
</template>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="优惠门槛">满 {{ form.fullMoney }} 元</el-descriptions-item>
|
||||
<el-descriptions-item label="优惠方式">
|
||||
{{ form.discountType === "fullMinusFlag" ? "减现金" : "打折" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="form.discountType === 'fullMinusFlag'" label="优惠金额">
|
||||
减 {{ form.fullMinus }} 元
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-else label="优惠折扣">{{ form.fullRate }} 折</el-descriptions-item>
|
||||
<el-descriptions-item label="使用范围">
|
||||
{{ form.scopeType === "ALL" ? "全品类" : "指定商品" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="额外赠送" :span="2">
|
||||
<template v-if="extraGifts.length">
|
||||
<el-tag v-for="gift in extraGifts" :key="gift" class="gift-tag" size="small">
|
||||
{{ gift }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<span v-else>无</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-table
|
||||
v-if="form.scopeType == 'PORTION_GOODS'"
|
||||
border
|
||||
:data="form.promotionGoodsList"
|
||||
style="width: 100%; margin-top: 16px"
|
||||
>
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<a class="link-text mr_10 goods-name" @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>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<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" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<div class="foot-btn">
|
||||
<el-button @click="closeCurrentPage">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form v-else ref="formRef" :model="form" label-width="120px" :rules="formRule">
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="section-title">基本信息</span>
|
||||
</template>
|
||||
<el-form-item label="活动名称" prop="promotionName">
|
||||
<el-input
|
||||
v-model="form.promotionName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="活动名称"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间" prop="rangeTime">
|
||||
<el-date-picker
|
||||
class="full-discount-range-picker"
|
||||
type="datetimerange"
|
||||
v-model="form.rangeTime"
|
||||
:disabled="fieldDisabled"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="请选择"
|
||||
:disabled-date="options.disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="section-title">优惠设置</span>
|
||||
</template>
|
||||
<div>
|
||||
<el-form-item label="优惠门槛" prop="fullMoney">
|
||||
<el-input
|
||||
v-model="form.fullMoney"
|
||||
@@ -168,10 +264,11 @@
|
||||
width="60"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="商品名称" min-width="120" show-overflow-tooltip>
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<a class="link-text mr_10 goods-name" @click="linkTo(row.goodsId, row.skuId)">{{
|
||||
row.goodsName
|
||||
}}</a>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
@@ -193,21 +290,31 @@
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110">
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<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">
|
||||
<el-table-column label="库存" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="!fieldDisabled" label="操作" width="100" align="center">
|
||||
<el-table-column v-if="!fieldDisabled" label="操作" width="100" align="right">
|
||||
<template #default="{ $index }">
|
||||
<a class="link-text" @click="delGoods($index)">删除</a>
|
||||
</template>
|
||||
@@ -215,21 +322,21 @@
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<div>
|
||||
<el-button @click="closeCurrentPage">返回</el-button>
|
||||
<el-button
|
||||
v-if="!fieldDisabled"
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-card>
|
||||
|
||||
<div class="foot-btn">
|
||||
<el-button @click="closeCurrentPage">返回</el-button>
|
||||
<el-button
|
||||
v-if="!fieldDisabled"
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -291,7 +398,6 @@ const couponLoading = ref(false);
|
||||
const formRule = {
|
||||
promotionName: [{ required: true, message: "活动名称不能为空" }],
|
||||
rangeTime: [{ required: true, message: "请选择活动时间" }],
|
||||
description: [{ required: true, message: "请填写活动描述" }],
|
||||
fullMoney: [{ required: true, validator: checkWeight }],
|
||||
fullMinus: [
|
||||
{ required: true, message: "请填写优惠金额" },
|
||||
@@ -313,9 +419,31 @@ const fieldDisabled = computed(() => {
|
||||
return !!id.value && form.value.promotionStatus !== "NEW";
|
||||
});
|
||||
|
||||
const extraGifts = computed(() => {
|
||||
const list = [];
|
||||
if (form.value.freeFreightFlag) {
|
||||
list.push("免邮费");
|
||||
}
|
||||
if (form.value.couponFlag) {
|
||||
const coupon = couponList.value.find((item) => item.id === form.value.couponId);
|
||||
list.push(`送优惠券${coupon ? `(${coupon.couponName})` : ""}`);
|
||||
}
|
||||
if (form.value.giftFlag) {
|
||||
const gift = giftList.value.find((item) => item.id === form.value.giftId);
|
||||
list.push(`送赠品${gift ? `(${gift.goodsName})` : ""}`);
|
||||
}
|
||||
if (form.value.pointFlag) {
|
||||
list.push(`送积分(${form.value.point})`);
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (id.value) {
|
||||
getDetail();
|
||||
} else {
|
||||
const now = new Date();
|
||||
form.value.rangeTime = [now, new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)];
|
||||
}
|
||||
getCouponList();
|
||||
getGiftList();
|
||||
@@ -462,6 +590,8 @@ function selectedGoodsData(item) {
|
||||
skuId: e.id,
|
||||
goodsId: e.goodsId,
|
||||
goodsType: e.goodsType,
|
||||
sn: e.sn,
|
||||
simpleSpecs: e.simpleSpecs,
|
||||
});
|
||||
});
|
||||
form.value.promotionGoodsList = list;
|
||||
@@ -502,17 +632,37 @@ function getGiftList(query) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
.section-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.describe {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
@@ -535,6 +685,15 @@ h4 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.foot-btn {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gift-tag {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
:deep(.full-discount-range-picker.el-date-editor--datetimerange) {
|
||||
width: 380px;
|
||||
max-width: 380px;
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160" fixed="right">
|
||||
<el-table-column label="操作" align="right" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="goDetail(row)">
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
<el-table-column label="库存" width="100">
|
||||
<template #default="{ row }">{{ row.quantity }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250">
|
||||
<el-table-column align="right" label="操作" width="250">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="action">
|
||||
<template v-if="liveStatus == 'NEW'">
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column align="right" label="操作">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="getLiveDetail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<el-tag :type="statusType(row.promotionStatus)">{{ statusText(row.promotionStatus) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<el-table-column align="right" label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="goEdit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -57,18 +57,70 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="拼团规则" prop="pintuanRule">
|
||||
<el-form-item label="拼团商品">
|
||||
<div class="form-field-block">
|
||||
<el-input
|
||||
v-model="form.pintuanRule"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
clearable
|
||||
maxlength="255"
|
||||
style="width: 260px"
|
||||
placeholder="请输入拼团规则"
|
||||
/>
|
||||
<div class="form-tip">拼团规则字数不能超过255字,将在WAP拼团详情页中显示</div>
|
||||
<div class="operation">
|
||||
<el-button type="primary" @click="openSkuList">选择商品</el-button>
|
||||
</div>
|
||||
<el-table v-if="goodsData.length" border :data="goodsData" style="width: 100%">
|
||||
<el-table-column label="商品名称" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="goods-cell">
|
||||
<img v-if="row?.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<span class="goods-name">{{ row?.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原价" width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ $filters.unitPrice(row.originalPrice, "¥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="拼团价" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="row"
|
||||
v-model="row.price"
|
||||
:min="promotionPriceMin(row.goodsType)"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="拼团库存" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="row"
|
||||
v-model="row.quantity"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" align="right">
|
||||
<template #default="{ $index }">
|
||||
<a class="link-text" @click="delGoods($index)">删除</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="form-tip">
|
||||
可不添加商品直接创建活动,后续通过拼团活动列表的「管理」入口添加商品
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@@ -77,6 +129,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -84,6 +138,8 @@
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { savePintuan, editPintuan, getPintuanDetail } from "@/api/promotion";
|
||||
import liliDialog from "@/views/lili-dialog";
|
||||
import { promotionPriceMin } from "@/constants/goodsType";
|
||||
import { Message } from "@/utils/message";
|
||||
import { unixToDate } from "@/utils/filters";
|
||||
|
||||
@@ -94,7 +150,6 @@ const id = ref(route.query.id);
|
||||
const form = ref({
|
||||
promotionName: "",
|
||||
promotionTitle: "",
|
||||
pintuanRule: "",
|
||||
requiredNum: "",
|
||||
fictitious: 0,
|
||||
limitNum: "",
|
||||
@@ -130,16 +185,85 @@ const options = ref({
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const liliDialogRef = ref(null);
|
||||
const goodsData = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
if (id.value) {
|
||||
getDetail();
|
||||
} else {
|
||||
const now = new Date();
|
||||
form.value.rangeTime = [now, new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)];
|
||||
}
|
||||
});
|
||||
|
||||
function closeCurrentPage() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
function openSkuList() {
|
||||
const data = JSON.parse(JSON.stringify(goodsData.value));
|
||||
data.forEach((e) => {
|
||||
e.id = e.skuId;
|
||||
});
|
||||
liliDialogRef.value.goodsData = data;
|
||||
liliDialogRef.value.open("goods");
|
||||
}
|
||||
|
||||
function selectedGoodsData(selected) {
|
||||
const existingMap = new Map(goodsData.value.map((item) => [item.skuId, item]));
|
||||
goodsData.value = selected.map((item) => {
|
||||
const existed = existingMap.get(item.id);
|
||||
if (existed) {
|
||||
return existed;
|
||||
}
|
||||
return {
|
||||
goodsName: item.goodsName,
|
||||
sn: item.sn,
|
||||
simpleSpecs: item.simpleSpecs,
|
||||
price: item.price,
|
||||
originalPrice: item.price,
|
||||
quantity: item.quantity,
|
||||
storeId: item.storeId,
|
||||
sellerName: item.sellerName,
|
||||
thumbnail: item.thumbnail,
|
||||
skuId: item.id,
|
||||
categoryPath: item.categoryPath,
|
||||
goodsId: item.goodsId,
|
||||
goodsType: item.goodsType,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function delGoods(index) {
|
||||
goodsData.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function buildGoodsParams(params) {
|
||||
if (!goodsData.value.length) {
|
||||
delete params.promotionGoodsList;
|
||||
return true;
|
||||
}
|
||||
for (const item of goodsData.value) {
|
||||
if (item.price === "" || item.price === null || item.price === undefined) {
|
||||
Message.warning(`请填写【${item.goodsName}】的拼团价`);
|
||||
return false;
|
||||
}
|
||||
if (!item.quantity || item.quantity <= 0) {
|
||||
Message.warning(`请填写【${item.goodsName}】的拼团库存`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
params.promotionGoodsList = goodsData.value.map((item) => ({
|
||||
...item,
|
||||
promotionId: id.value,
|
||||
startTime: params.startTime,
|
||||
endTime: params.endTime,
|
||||
}));
|
||||
params.scopeId = goodsData.value.map((item) => item.skuId).join(",");
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
@@ -154,31 +278,37 @@ function handleSubmit() {
|
||||
submitLoading.value = false;
|
||||
return;
|
||||
}
|
||||
if (new Date(params.startTime).getTime() < Date.now()) {
|
||||
Message.error("拼团活动开始时间不能小于当前时间");
|
||||
|
||||
delete params.rangeTime;
|
||||
if (!buildGoodsParams(params)) {
|
||||
submitLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
delete params.rangeTime;
|
||||
if (!id.value) {
|
||||
delete params.id;
|
||||
savePintuan(params).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("拼团活动添加成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
});
|
||||
savePintuan(params)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
Message.success("拼团活动添加成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
submitLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
if (params.promotionGoodsList === "") delete params.promotionGoodsList;
|
||||
editPintuan(params).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("编辑成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
});
|
||||
editPintuan(params)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
Message.success("编辑成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
submitLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -186,6 +316,8 @@ function getDetail() {
|
||||
getPintuanDetail(id.value).then((res) => {
|
||||
if (res.success) {
|
||||
const data = res.result;
|
||||
goodsData.value = data.promotionGoodsList || [];
|
||||
delete data.promotionGoodsList;
|
||||
data.rangeTime = [new Date(data.startTime), new Date(data.endTime)];
|
||||
form.value = data;
|
||||
form.value.fictitious = data.fictitious ? 1 : 0;
|
||||
@@ -222,4 +354,37 @@ function getDetail() {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.operation {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,20 +2,21 @@
|
||||
<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="160" />
|
||||
<el-table-column prop="endTime" label="活动结束时间" min-width="160" />
|
||||
<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>
|
||||
<el-descriptions v-if="data.length" border :column="3" class="activity-desc">
|
||||
<el-descriptions-item label="活动名称">{{ data[0].promotionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动时间" :span="2">
|
||||
{{ data[0].startTime }} ~ {{ data[0].endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="成团人数">{{ data[0].requiredNum }} 人</el-descriptions-item>
|
||||
<el-descriptions-item label="限购数量">
|
||||
{{ data[0].limitNum ? `${data[0].limitNum} 件/人` : "不限购" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="promotionStatusTagType(data[0].promotionStatus)">
|
||||
{{ promotionStatusText(data[0].promotionStatus) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4>活动商品</h4>
|
||||
<template v-if="!readonly">
|
||||
@@ -52,7 +53,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" align="center">
|
||||
<el-table-column label="操作" width="90" align="right">
|
||||
<template #default="{ $index }">
|
||||
<a class="link-text" @click="delGoods($index)">删除</a>
|
||||
</template>
|
||||
@@ -68,33 +69,51 @@
|
||||
:data="goodsData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="商品名称" min-width="140">
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../../assets/qrcode.svg"
|
||||
class="hover-pointer qrcode-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
alt="qrcode"
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<div class="goods-info">
|
||||
<a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../../assets/qrcode.svg"
|
||||
class="hover-pointer qrcode-icon"
|
||||
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"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="库存" width="90" />
|
||||
<el-table-column label="拼团价格" width="120">
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原价" width="110" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ $filters.unitPrice(row.originalPrice, "¥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="库存" width="90" align="right" />
|
||||
<el-table-column label="拼团价格" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">
|
||||
{{ $filters.unitPrice(row.price, "¥") }}
|
||||
@@ -380,6 +399,30 @@ h4 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mr_10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<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="220" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="220" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<template v-if="row.promotionStatus === 'NEW'">
|
||||
|
||||
@@ -1,49 +1,65 @@
|
||||
<template>
|
||||
<div class="seckill-goods">
|
||||
<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>
|
||||
<h4>活动详情</h4>
|
||||
<el-descriptions v-if="data.length" border :column="3" class="activity-desc">
|
||||
<el-descriptions-item label="活动名称">{{ data[0].promotionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动开始时间">{{ data[0].startTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="报名截止时间">{{ unixDate(data[0].applyEndTime) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="时间场次" :span="2">
|
||||
<el-tag v-for="item in unixHours(data[0].hours)" :key="item" class="hour-tag">{{ item }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="活动状态">
|
||||
<el-tag :type="seckillStatusTagType(data[0].promotionStatus)">
|
||||
{{ seckillStatusText(data[0].promotionStatus) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4>活动商品</h4>
|
||||
|
||||
<template v-if="!readonly">
|
||||
<div class="operation">
|
||||
<el-button type="primary" @click="openSkuList">选择商品</el-button>
|
||||
<span v-if="goodsList.length" class="current-slot-tip">
|
||||
当前场次:{{ goodsList[tabIndex]?.hour }}(选择商品将添加到该场次)
|
||||
</span>
|
||||
</div>
|
||||
<el-tabs v-model="tabCurrent" type="card" class="operation">
|
||||
<el-tab-pane
|
||||
v-for="(tab, tabIndex) in goodsList"
|
||||
:key="tabIndex"
|
||||
:label="tab.hour"
|
||||
:name="String(tabIndex)"
|
||||
>
|
||||
<template #label>
|
||||
{{ tab.hour }}
|
||||
<span v-if="tab.list.length" class="tab-count">{{ tab.list.length }}</span>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="tab.list"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="商品价格" width="110">
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<span class="goods-name">{{ row.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">
|
||||
{{ $filters.unitPrice(row.originalPrice, "¥") }}
|
||||
@@ -57,8 +73,9 @@
|
||||
v-model="row.quantity"
|
||||
:min="1"
|
||||
:disabled="row.promotionApplyStatus === 'PASS'"
|
||||
controls-position="right"
|
||||
:controls="false"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
@change="(val) => updateGoodsField(tabIndex, $index, 'quantity', val)"
|
||||
/>
|
||||
</template>
|
||||
@@ -71,29 +88,14 @@
|
||||
:min="promotionPriceMin(row.goodsType)"
|
||||
:precision="2"
|
||||
:disabled="row.promotionApplyStatus === 'PASS'"
|
||||
controls-position="right"
|
||||
:controls="false"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
@change="(val) => updateGoodsField(tabIndex, $index, 'price', val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<el-tag :type="applyStatusTagType(row.promotionApplyStatus)" size="small">
|
||||
{{ applyStatusText(row.promotionApplyStatus) }}
|
||||
</el-tag>
|
||||
<a
|
||||
v-if="row.promotionApplyStatus === 'REFUSE' && row.failReason"
|
||||
class="reason link-text"
|
||||
@click="showReason(row.failReason)"
|
||||
>
|
||||
拒绝原因
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" align="center">
|
||||
<el-table-column label="操作" width="90" align="right">
|
||||
<template #default="{ row, $index }">
|
||||
<a v-if="row" class="link-text" @click="delGoods(tabIndex, $index, row)">删除</a>
|
||||
</template>
|
||||
@@ -112,20 +114,37 @@
|
||||
:data="readonlyGoodsList"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="商品价格" width="110">
|
||||
<el-table-column label="商品名称" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-cell">
|
||||
<img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
||||
<span class="goods-name">{{ row.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.sn || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row?.simpleSpecs || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" width="110" align="right">
|
||||
<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">
|
||||
<el-table-column label="库存" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">{{ row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动价格" width="100">
|
||||
<el-table-column label="活动价格" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">
|
||||
{{ $filters.unitPrice(row.price, "¥") }}
|
||||
@@ -137,13 +156,6 @@
|
||||
<el-tag v-if="row">{{ row.timeLine }}:00</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row" :type="applyStatusTagType(row.promotionApplyStatus)" size="small">
|
||||
{{ applyStatusText(row.promotionApplyStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
@@ -190,9 +202,11 @@ import liliDialog from "@/views/lili-dialog";
|
||||
import { promotionPriceMin } from "@/constants/goodsType";
|
||||
import { Message, Modal } from "@/utils/message";
|
||||
import { unixToDate } from "@/utils/filters";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
|
||||
const tabCurrent = ref("0");
|
||||
const promotionStatus = ref("");
|
||||
@@ -273,6 +287,11 @@ function getSeckillMsg() {
|
||||
if (res.success && res.result) {
|
||||
data.value = [res.result];
|
||||
promotionStatus.value = res.result.promotionStatus;
|
||||
const tag = appStore.storeOpenedList.find((item) => item.name === "seckill-goods");
|
||||
if (tag && res.result.promotionName) {
|
||||
tag.title = `${res.result.promotionName}商品`;
|
||||
localStorage.storeOpenedList = JSON.stringify(appStore.storeOpenedList);
|
||||
}
|
||||
if (readonly.value) {
|
||||
getReadonlyGoodsList();
|
||||
} else {
|
||||
@@ -346,6 +365,9 @@ function selectedGoodsData(selected) {
|
||||
}
|
||||
return {
|
||||
goodsName: item.goodsName,
|
||||
sn: item.sn,
|
||||
simpleSpecs: item.simpleSpecs,
|
||||
thumbnail: item.thumbnail,
|
||||
price: item.price,
|
||||
originalPrice: item.price,
|
||||
promotionApplyStatus: item.promotionApplyStatus || "",
|
||||
@@ -402,13 +424,17 @@ function save() {
|
||||
setSeckillGoods({
|
||||
seckillId: route.query.id,
|
||||
applyVos,
|
||||
}).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res?.success) {
|
||||
Message.success("提交活动商品成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.success) {
|
||||
Message.success("提交活动商品成功");
|
||||
closeCurrentPage();
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
submitLoading.value = false;
|
||||
});
|
||||
}
|
||||
function showReason(reason) {
|
||||
Modal.info({
|
||||
@@ -428,8 +454,64 @@ function unixHours(item) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
border-left: 3px solid red;
|
||||
}
|
||||
|
||||
.activity-desc {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.goods-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.operation {
|
||||
margin: 16px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.current-slot-tip {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
display: inline-block;
|
||||
min-width: 18px;
|
||||
padding: 0 5px;
|
||||
margin-left: 4px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background: #f0f2f5;
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hour-tag {
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="120" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="120" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="detail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
<el-tag v-else type="success">已付款</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="100">
|
||||
<el-table-column label="操作" align="right" fixed="right" width="100">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="detail(row)">查看</a>
|
||||
</template>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="200" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="Template(row)">编辑</a>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-tag v-else type="success">开启</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<el-table-column label="操作" align="right" width="200">
|
||||
<template #default="{ row }">
|
||||
<template v-if="!row.selected">
|
||||
<a class="link-text" @click="open(row)">开启</a>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<el-table-column prop="address" label="详细地址" min-width="280" />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="120" sortable />
|
||||
<el-table-column prop="updateTime" label="修改时间" min-width="120" sortable />
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<el-table-column label="操作" width="200" align="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="edit(row)">修改</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" sortable="custom" />
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="200" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<el-table-column prop="sortOrder" label="排序值" width="90" align="center" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" align="center" />
|
||||
<el-table-column prop="updateTime" label="修改时间" width="170" align="center" />
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="200" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="openAdd(row.id)">添加子级</a>
|
||||
<span class="op-split">|</span>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="updateTime" label="更新时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="createBy" label="最后操作人" width="150" />
|
||||
<el-table-column label="操作" width="230" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="230" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="editPerm(row)">菜单权限</a>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="150" align="right" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a class="link-text" @click="handleEdit(row)">修改</a>
|
||||
|
||||
Reference in New Issue
Block a user