feat(seller): 营销页面体验优化与列表页样式统一

- 拼团:去除拼团规则字段、编辑页商品表补SKU编码/规格/图片、提交按钮失败卡死修复
- 秒杀:活动详情改描述列表、场次商品数徽标、当前场次提示、页签标题动态显示活动名称
- 满额:卡片分区布局、查看模式只读描述视图、去除活动描述、新建默认近七天时间
- 优惠券:查看模式只读描述视图、去除店铺承担比例与范围描述、指定商品表加SKU/规格/图片
- 商品选择器:首列改SKU编码、弹层z-index修复
- 分销订单:商品信息列重构、卡片间距、状态筛选Tab
- 库存管理:筛选与列表分区、行高压缩、SPU/SKU编码列
- 全局:所有列表操作列统一右对齐
This commit is contained in:
pikachu1995@126.com
2026-10-28 17:40:50 +08:00
parent 21abd26b1f
commit f4fd1c1acd
46 changed files with 994 additions and 324 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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'"

View File

@@ -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"

View File

@@ -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;
}
}

View File

@@ -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'"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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" ? "详情" : "处理" }}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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

View File

@@ -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'">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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'">

View File

@@ -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>

View File

@@ -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;

View File

@@ -132,7 +132,7 @@
v-if="showActionColumn"
label="操作"
width="250"
align="center"
align="right"
fixed="right"
>
<template #default="{ row }">

View File

@@ -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>

View File

@@ -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;

View File

@@ -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)">

View File

@@ -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'">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -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'">

View File

@@ -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 {

View File

@@ -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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>