|
@@ -12,6 +12,7 @@ import {
|
|
|
import { distributeCoupons, getCouponDistributeRecords } from "@/api/marketing";
|
|
import { distributeCoupons, getCouponDistributeRecords } from "@/api/marketing";
|
|
|
import ShopSelector from "../../components/ShopSelector.vue";
|
|
import ShopSelector from "../../components/ShopSelector.vue";
|
|
|
import ProductSelector from "../../components/ProductSelector.vue";
|
|
import ProductSelector from "../../components/ProductSelector.vue";
|
|
|
|
|
+import DeviceSelector from "../../components/DeviceSelector.vue";
|
|
|
import type { PaginationProps, TableColumnList } from "@pureadmin/table";
|
|
import type { PaginationProps, TableColumnList } from "@pureadmin/table";
|
|
|
import { deviceDetection } from "@pureadmin/utils";
|
|
import { deviceDetection } from "@pureadmin/utils";
|
|
|
import { onMounted, reactive, ref, toRaw } from "vue";
|
|
import { onMounted, reactive, ref, toRaw } from "vue";
|
|
@@ -49,6 +50,7 @@ interface CouponFormData {
|
|
|
value: number | null;
|
|
value: number | null;
|
|
|
totalCount: number | null;
|
|
totalCount: number | null;
|
|
|
shopIds: number[];
|
|
shopIds: number[];
|
|
|
|
|
+ deviceIds: number[];
|
|
|
productIds: number[];
|
|
productIds: number[];
|
|
|
validPeriod: string[];
|
|
validPeriod: string[];
|
|
|
description: string;
|
|
description: string;
|
|
@@ -263,33 +265,39 @@ export function useCoupon() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.form-block {
|
|
.form-block {
|
|
|
- margin-bottom: 18px;
|
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.block-title {
|
|
.block-title {
|
|
|
- font-size: 15px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #374151;
|
|
color: #374151;
|
|
|
- margin-bottom: 12px;
|
|
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
padding-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
|
- border-bottom: 1px solid #f3f4f6;
|
|
|
|
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.form-grid-2 {
|
|
.form-grid-2 {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 16px;
|
|
|
|
|
|
|
+ gap: 20px 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .form-grid-3 {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
+ gap: 20px 24px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.type-selector {
|
|
.type-selector {
|
|
|
- display: flex;
|
|
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
margin-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.type-btn {
|
|
.type-btn {
|
|
|
- flex: 1;
|
|
|
|
|
- padding: 14px 16px;
|
|
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
border: 1px solid #e5e7eb;
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -300,6 +308,7 @@ export function useCoupon() {
|
|
|
|
|
|
|
|
.type-btn:hover {
|
|
.type-btn:hover {
|
|
|
border-color: #3b82f6;
|
|
border-color: #3b82f6;
|
|
|
|
|
+ background: #f8fafc;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.type-btn.active {
|
|
.type-btn.active {
|
|
@@ -308,14 +317,14 @@ export function useCoupon() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.type-btn .name {
|
|
.type-btn .name {
|
|
|
- font-size: 15px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #374151;
|
|
color: #374151;
|
|
|
margin-bottom: 4px;
|
|
margin-bottom: 4px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.type-btn .hint {
|
|
.type-btn .hint {
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ font-size: 12px;
|
|
|
color: #9ca3af;
|
|
color: #9ca3af;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -326,44 +335,55 @@ export function useCoupon() {
|
|
|
.scope-grid {
|
|
.scope-grid {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 20px;
|
|
|
|
|
|
|
+ gap: 16px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.scope-card {
|
|
.scope-card {
|
|
|
background: #f9fafb;
|
|
background: #f9fafb;
|
|
|
- border-radius: 6px;
|
|
|
|
|
- padding: 14px;
|
|
|
|
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 14px 16px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.scope-card .card-header {
|
|
.scope-card .card-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.scope-card .card-label {
|
|
.scope-card .card-label {
|
|
|
- font-size: 14px;
|
|
|
|
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
color: #374151;
|
|
color: #374151;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.scope-card .card-body {
|
|
.scope-card .card-body {
|
|
|
- min-height: 40px;
|
|
|
|
|
|
|
+ min-height: 32px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.coupon-form .el-form-item {
|
|
.coupon-form .el-form-item {
|
|
|
- margin-bottom: 14px;
|
|
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ align-items: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.coupon-form .el-form-item__label {
|
|
.coupon-form .el-form-item__label {
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #6b7280;
|
|
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ padding-right: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.coupon-form .el-input__wrapper,
|
|
.coupon-form .el-input__wrapper,
|
|
|
.coupon-form .el-textarea__inner {
|
|
.coupon-form .el-textarea__inner {
|
|
|
- font-size: 14px;
|
|
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .coupon-form .form-label-90 .el-form-item__label {
|
|
|
|
|
+ width: 90px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .coupon-form .form-label-100 .el-form-item__label {
|
|
|
|
|
+ width: 100px !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.preview-box {
|
|
.preview-box {
|
|
@@ -375,7 +395,7 @@ export function useCoupon() {
|
|
|
background: #f9fafb;
|
|
background: #f9fafb;
|
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
margin-top: 12px;
|
|
margin-top: 12px;
|
|
|
- font-size: 15px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: #374151;
|
|
color: #374151;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -383,13 +403,24 @@ export function useCoupon() {
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ @media (max-width: 1200px) {
|
|
|
|
|
+ .form-grid-3,
|
|
|
|
|
+ .scope-grid {
|
|
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
+ }
|
|
|
|
|
+ .type-selector {
|
|
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
@media (max-width: 768px) {
|
|
@media (max-width: 768px) {
|
|
|
.form-grid-2,
|
|
.form-grid-2,
|
|
|
|
|
+ .form-grid-3,
|
|
|
.scope-grid {
|
|
.scope-grid {
|
|
|
grid-template-columns: 1fr;
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
}
|
|
|
.type-selector {
|
|
.type-selector {
|
|
|
- flex-direction: column;
|
|
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
`;
|
|
`;
|
|
@@ -401,18 +432,20 @@ export function useCoupon() {
|
|
|
|
|
|
|
|
<div class="form-block">
|
|
<div class="form-block">
|
|
|
<div class="block-title">基本信息</div>
|
|
<div class="block-title">基本信息</div>
|
|
|
- <ElForm label-width="80px" size="default">
|
|
|
|
|
- <ElFormItem label="优惠券名称" required>
|
|
|
|
|
- <ElInput v-model={formData.name} placeholder="请输入优惠券名称" clearable maxlength={50} showWordLimit />
|
|
|
|
|
- </ElFormItem>
|
|
|
|
|
- <ElFormItem label="关联活动">
|
|
|
|
|
- <ElSelect v-model={formData.activityId} placeholder="请选择关联的营销活动(可选)" class="w-full" clearable>
|
|
|
|
|
- <ElOption label="春节大促活动" value="1" />
|
|
|
|
|
- <ElOption label="新品上市活动" value="2" />
|
|
|
|
|
- <ElOption label="会员专享活动" value="3" />
|
|
|
|
|
- <ElOption label="不关联活动" value="" />
|
|
|
|
|
- </ElSelect>
|
|
|
|
|
- </ElFormItem>
|
|
|
|
|
|
|
+ <ElForm label-width="90px" size="default">
|
|
|
|
|
+ <div class="form-grid-2">
|
|
|
|
|
+ <ElFormItem label="优惠券名称" required>
|
|
|
|
|
+ <ElInput v-model={formData.name} placeholder="请输入优惠券名称" clearable maxlength={50} showWordLimit />
|
|
|
|
|
+ </ElFormItem>
|
|
|
|
|
+ <ElFormItem label="关联活动">
|
|
|
|
|
+ <ElSelect v-model={formData.activityId} placeholder="请选择关联的营销活动(可选)" class="w-full" clearable filterable>
|
|
|
|
|
+ <ElOption label="春节大促活动" value="1" />
|
|
|
|
|
+ <ElOption label="新品上市活动" value="2" />
|
|
|
|
|
+ <ElOption label="会员专享活动" value="3" />
|
|
|
|
|
+ <ElOption label="不关联活动" value="" />
|
|
|
|
|
+ </ElSelect>
|
|
|
|
|
+ </ElFormItem>
|
|
|
|
|
+ </div>
|
|
|
</ElForm>
|
|
</ElForm>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -436,35 +469,41 @@ export function useCoupon() {
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
{formData.type && (
|
|
{formData.type && (
|
|
|
- <ElForm label-width="80px" size="default">
|
|
|
|
|
- <div class="form-grid-2">
|
|
|
|
|
|
|
+ <ElForm label-width="90px" size="default">
|
|
|
|
|
+ <div class="form-grid-3">
|
|
|
<ElFormItem label="优惠值" required>
|
|
<ElFormItem label="优惠值" required>
|
|
|
- <ElInputNumber v-model={formData.value} min={0} precision={2} class="w-full" placeholder={formData.type === 2 ? "折扣值如8表示8折" : "优惠金额"} prefix={formData.type !== 2 ? "¥" : ""} />
|
|
|
|
|
|
|
+ <ElInputNumber
|
|
|
|
|
+ v-model={formData.value}
|
|
|
|
|
+ min={0}
|
|
|
|
|
+ precision={2}
|
|
|
|
|
+ class="w-full!"
|
|
|
|
|
+ placeholder={formData.type === 2 ? "折扣值如8表示8折" : "优惠金额"}
|
|
|
|
|
+ prefix={formData.type !== 2 ? "¥" : ""}
|
|
|
|
|
+ />
|
|
|
</ElFormItem>
|
|
</ElFormItem>
|
|
|
<ElFormItem label="发放总量" required>
|
|
<ElFormItem label="发放总量" required>
|
|
|
- <ElInputNumber v-model={formData.totalCount} min={1} class="w-full" placeholder="发放总数量" />
|
|
|
|
|
|
|
+ <ElInputNumber
|
|
|
|
|
+ v-model={formData.totalCount}
|
|
|
|
|
+ min={1}
|
|
|
|
|
+ class="w-full!"
|
|
|
|
|
+ placeholder="发放总数量"
|
|
|
|
|
+ />
|
|
|
|
|
+ </ElFormItem>
|
|
|
|
|
+ <ElFormItem label="有效期" required>
|
|
|
|
|
+ <ElDatePicker
|
|
|
|
|
+ v-model={formData.validPeriod}
|
|
|
|
|
+ type="daterange"
|
|
|
|
|
+ range-separator="至"
|
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
|
+ class="w-full!"
|
|
|
|
|
+ />
|
|
|
</ElFormItem>
|
|
</ElFormItem>
|
|
|
</div>
|
|
</div>
|
|
|
</ElForm>
|
|
</ElForm>
|
|
|
)}
|
|
)}
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="form-block">
|
|
|
|
|
- <div class="block-title">有效期</div>
|
|
|
|
|
- <ElForm label-width="80px" size="default">
|
|
|
|
|
- <ElFormItem label="有效期" required>
|
|
|
|
|
- <ElDatePicker
|
|
|
|
|
- v-model={formData.validPeriod}
|
|
|
|
|
- type="daterange"
|
|
|
|
|
- range-separator="至"
|
|
|
|
|
- start-placeholder="开始日期"
|
|
|
|
|
- end-placeholder="结束日期"
|
|
|
|
|
- class="w-full"
|
|
|
|
|
- />
|
|
|
|
|
- </ElFormItem>
|
|
|
|
|
- </ElForm>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
<div class="form-block">
|
|
<div class="form-block">
|
|
|
<div class="block-title">适用范围</div>
|
|
<div class="block-title">适用范围</div>
|
|
|
<div class="scope-grid">
|
|
<div class="scope-grid">
|
|
@@ -489,7 +528,7 @@ export function useCoupon() {
|
|
|
</ElRadioGroup>
|
|
</ElRadioGroup>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
|
- {formData.deviceScope === 2 && <span style="color: #9ca3af; font-size: 13px;">选择设备</span>}
|
|
|
|
|
|
|
+ {formData.deviceScope === 2 && <DeviceSelector v-model={formData.deviceIds} />}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="scope-card">
|
|
<div class="scope-card">
|
|
@@ -547,6 +586,7 @@ export function useCoupon() {
|
|
|
value: null,
|
|
value: null,
|
|
|
totalCount: null,
|
|
totalCount: null,
|
|
|
shopIds: [],
|
|
shopIds: [],
|
|
|
|
|
+ deviceIds: [],
|
|
|
productIds: [],
|
|
productIds: [],
|
|
|
validPeriod: [],
|
|
validPeriod: [],
|
|
|
description: "",
|
|
description: "",
|