1171 lines
30 KiB
Vue
1171 lines
30 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
|
||
<view class="card">
|
||
<u-form-item prop="useShops">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">可用门店</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt" v-if="isMainShop()">
|
||
<my-shop-select-w v-model:useType="form.useShopType" v-model:selShops="form.useShops"></my-shop-select-w>
|
||
</view>
|
||
<view class="ipt" v-else>
|
||
<u-radio-group v-model="form.useShopType">
|
||
<u-radio label="仅本店" name="only"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="packageName">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">套餐名称</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input placeholder="请输入" :maxlength="30" v-model="form.packageName"></u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item>
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">套餐描述</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-textarea placeholder="请输入" :maxlength="50" v-model="form.description"></u-textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="images">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">套餐图片</text>
|
||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||
</view>
|
||
<view class="info">
|
||
<my-upload-imgs v-model="form.images"></my-upload-imgs>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="originPrice">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">原价</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input v-model="form.originPrice" placeholder="请输入" @change="originalPriceInput">
|
||
<template #suffix>
|
||
<text>元</text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item prop="price">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">价格</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input v-model="form.price" placeholder="请输入" @change="groupPriceInput">
|
||
<template #suffix>
|
||
<text>元</text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="packageContent">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">选择商品</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="package-wrap">
|
||
<view class="list">
|
||
<view class="item" v-for="(item, index) in form.packageContent" :key="index">
|
||
<view class="header">
|
||
<text class="t">第{{ index + 1 }}组菜品</text>
|
||
<view class="del" @click="form.packageContent.splice(index, 1)">
|
||
<u-icon name="minus-circle-fill" color="red" size="14"></u-icon>
|
||
<text class="t">删除套餐组</text>
|
||
</view>
|
||
</view>
|
||
<view class="input-wrap">
|
||
<view class="ipt">
|
||
<u-input v-model="item.name" :maxlength="20" placeholder="请输入菜品组名"></u-input>
|
||
</view>
|
||
<view class="btn" @click="showGoodsDialogHandle(index)">
|
||
<u-icon name="plus-circle-fill" color="#318AFE"></u-icon>
|
||
<text class="t">导入商品</text>
|
||
</view>
|
||
<view class="btn" @click="addGoodsHandle(item)">
|
||
<u-icon name="plus" color="#318AFE"></u-icon>
|
||
<text class="t">添加商品</text>
|
||
</view>
|
||
</view>
|
||
<view class="table-wrap">
|
||
<view class="tab-head">
|
||
<view class="tr">
|
||
<view class="td">
|
||
<text class="t">名称</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">价格</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">数量</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">操作</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tb-body">
|
||
<view class="tr" v-for="(val, i) in item.packageProducts" :key="i">
|
||
<view class="td">
|
||
<u-input v-model="val.name" placeholder="商品名称"></u-input>
|
||
</view>
|
||
<view class="td">
|
||
<u-input
|
||
v-model="val.price"
|
||
placeholder="价格"
|
||
:maxlength="8"
|
||
@change="
|
||
(e) =>
|
||
mySetTimeout(() => {
|
||
val.price = filterNumberInput(e);
|
||
}, 50)
|
||
"
|
||
></u-input>
|
||
</view>
|
||
<view class="td">
|
||
<u-input
|
||
v-model="val.num"
|
||
placeholder="数量"
|
||
:maxlength="8"
|
||
@change="
|
||
(e) =>
|
||
mySetTimeout(() => {
|
||
val.num = filterNumberInput(e, 1);
|
||
}, 50)
|
||
"
|
||
></u-input>
|
||
</view>
|
||
<view class="td">
|
||
<text class="del" @click="item.packageProducts.splice(i, 1)">删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty" v-if="item.packageProducts.length == 0">
|
||
<text class="t">请添加商品</text>
|
||
</view>
|
||
</view>
|
||
<view class="select_num_wrap">
|
||
<view class="label">
|
||
<text class="t">套餐{{ item.packageProducts.length }}选{{ item.num }}</text>
|
||
</view>
|
||
<view class="ipt">
|
||
<u-input
|
||
v-model="item.num"
|
||
placeholder="请输入"
|
||
:maxlength="8"
|
||
@change="
|
||
(e) =>
|
||
mySetTimeout(() => {
|
||
item.num = filterNumberInput(e, 1);
|
||
}, 50)
|
||
"
|
||
></u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="package-wrap-btn" @click="addGroupHandle">
|
||
<view class="btn">
|
||
<u-icon name="plus" color="#318AFE"></u-icon>
|
||
<text class="t">添加菜品组</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="useWeeks">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">可用周期</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<my-week-sel v-model="form.useWeeks"></my-week-sel>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item prop="useTimes">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">指定时间段</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<my-hour-area :showType="false" v-model:startValue="startValue" v-model:endValue="endValue"></my-hour-area>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item>
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">其他使用说明</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-textarea placeholder="请输入" :maxlength="50" v-model="form.otherDesc"></u-textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="tieredDiscount">
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<view class="two">
|
||
<text class="t">分享优惠阶梯</text>
|
||
<view class="tips">如果没有分享裂变需求可以不设置，最多三级</view>
|
||
</view>
|
||
<view>
|
||
<u-button type="primary" :disabled="!form.price" v-if="form.tieredDiscount.length < 3" @click="addStepHandle">
|
||
{{ form.price ? '添加方案' : '请添加价格' }}
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="step-wrap">
|
||
<view class="table-wrap">
|
||
<view class="tab-head">
|
||
<view class="tr">
|
||
<view class="td">
|
||
<text class="t">分享人数</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">价格（元）</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">操作</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tb-body">
|
||
<view class="tr" v-for="(val, i) in form.tieredDiscount" :key="i">
|
||
<view class="td">
|
||
<text class="t">{{ val.peopleNum }}</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="t">{{ val.price }}</text>
|
||
</view>
|
||
<view class="td">
|
||
<text class="edit" @click="editorStepFormHandle(i)">编辑</text>
|
||
<text class="del" @click="form.tieredDiscount.splice(i, 1)">删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty" v-if="form.tieredDiscount.length == 0">
|
||
<text class="t">请添加阶梯</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item prop="expireHours">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">分享期限（小时）</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input v-model="form.expireHours" placeholder="最小不低于1小时，最大不超过72小时" @change="groupTimeoutHourInput"></u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item>
|
||
<view class="switch-wrap">
|
||
<view class="top">
|
||
<text class="t">上架状态</text>
|
||
<u-switch v-model="form.onlineStatus" :active-value="1" :inactive-value="0"></u-switch>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="card">
|
||
<u-form-item>
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">商品详情</text>
|
||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||
</view>
|
||
<view class="info">
|
||
<my-upload-imgs v-model="form.detailImages"></my-upload-imgs>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
<my-footer-btn showCancel type="horizontal" @confirm="submitHandle" @cancel="backHandle"></my-footer-btn>
|
||
<u-popup :show="showStepDialog" mode="center" closeable :safe-area-inset-bottom="false" @close="stepDialogReset">
|
||
<view class="add-step-wrap">
|
||
<view class="title">
|
||
<text class="t">
|
||
{{ stepFormType == 'add' ? '添加阶梯' : '编辑阶梯' }}
|
||
</text>
|
||
</view>
|
||
<view class="content">
|
||
<u-form ref="stepFormRef" :model="stepForm" :rules="stepFormRules" :label-width="0">
|
||
<u-form-item prop="peopleNum">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">分享人数</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input
|
||
v-model="stepForm.peopleNum"
|
||
placeholder="请输入分享人数"
|
||
:maxlength="8"
|
||
@change="
|
||
(e) =>
|
||
mySetTimeout(() => {
|
||
stepForm.peopleNum = filterNumberInput(e, 1);
|
||
}, 50)
|
||
"
|
||
>
|
||
<template #suffix>
|
||
<text>人</text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item prop="price">
|
||
<view class="switch-wrap">
|
||
<view class="top column">
|
||
<text class="t">价格</text>
|
||
</view>
|
||
<view class="info">
|
||
<view class="ipt">
|
||
<u-input
|
||
v-model="stepForm.price"
|
||
placeholder="请输入价格"
|
||
:maxlength="8"
|
||
@change="
|
||
(e) =>
|
||
mySetTimeout(() => {
|
||
stepForm.price = filterNumberInput(e);
|
||
}, 50)
|
||
"
|
||
>
|
||
<template #suffix>
|
||
<text>元</text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
<view class="footer-btn-wrap">
|
||
<view class="btn">
|
||
<u-button style="width: 100%" @click="showStepDialog = false">取消</u-button>
|
||
</view>
|
||
<view class="btn">
|
||
<u-button type="primary" style="width: 100%" @click="stepFormSubmitHandle">确定</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import _ from 'lodash';
|
||
import { ref } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import { filterNumberInput } from '@/utils/index.js';
|
||
import { packageAddEdit } from '@/http/api/ware.js';
|
||
import { isMainShop } from '@/store/account.js';
|
||
|
||
// 封装全局定时器，适配多端
|
||
const mySetTimeout = (fn, delay) => {
|
||
if (typeof uni !== 'undefined') {
|
||
return setTimeout(fn, delay); // 小程序
|
||
} else {
|
||
return window.setTimeout(fn, delay); // H5
|
||
}
|
||
};
|
||
|
||
const type = ref('add'); // add添加商品 editor编辑商品
|
||
const formRef = ref(null);
|
||
const startValue = ref('');
|
||
const endValue = ref('');
|
||
const form = ref({
|
||
id: '',
|
||
useShopType: 'only', // only-仅本店 all全部 /custom 指定
|
||
useShops: [], // 可用门店（指定门店时存储门店ID，逗号分隔）
|
||
packageName: '', // 套餐名称
|
||
description: '', // 商品描述
|
||
images: [], // 商品图片（多个用逗号分隔）
|
||
originPrice: '', // 原价
|
||
price: '', // 售价
|
||
packageContent: [], // 套餐内容
|
||
useTimes: '', // 可用时段：08:00~21:30
|
||
useWeeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 可用周期： [周一,周二]
|
||
otherDesc: '', // 其他描述
|
||
tieredDiscount: [], // 阶梯优惠
|
||
expireHours: '', // 分享期限（小时）不低于1小时，最大72小时
|
||
onlineStatus: 1, // 上架状态（0下架 1上架）
|
||
detailImages: [] // 商品详情图片（多个用逗号分隔）
|
||
});
|
||
|
||
const rules = ref({
|
||
useShops: [
|
||
{
|
||
trigger: ['change'],
|
||
message: '请选择可用门店',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.useShopType == 'custom' && form.value.useShops.length == 0) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
packageName: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请输入',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.packageName === '') {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
images: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请选择商品图片',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.images.length == 0) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
originPrice: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请输入',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.originPrice === '') {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
price: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请输入',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.price === '') {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
packageContent: [
|
||
{
|
||
required: true,
|
||
message: '请检查',
|
||
trigger: ['blur'],
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.packageContent.length == 0) {
|
||
uni.showToast({
|
||
title: `请添加菜品组`,
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else {
|
||
let checkPass = true;
|
||
let errorMsg = '';
|
||
for (const [groupIndex, item] of form.value.packageContent.entries()) {
|
||
// 1. 校验菜品组名
|
||
if (item.name === '') {
|
||
errorMsg = `请输入第${groupIndex + 1}组的菜品组名`;
|
||
checkPass = false;
|
||
break; // 终止循环，只提示第一个错误
|
||
}
|
||
|
||
// 2. 校验该组是否添加商品
|
||
if (item.packageProducts.length === 0) {
|
||
errorMsg = `请给第${groupIndex + 1}组添加商品`;
|
||
checkPass = false;
|
||
break;
|
||
}
|
||
|
||
// 3. 校验组内商品（嵌套 entries() 获取商品索引）
|
||
let productError = false;
|
||
for (const [productIndex, val] of item.packageProducts.entries()) {
|
||
// 3.1 商品名称为空
|
||
if (val.name === '') {
|
||
errorMsg = `请输入第${groupIndex + 1}组菜品的第${productIndex + 1}项的商品名称`;
|
||
productError = true;
|
||
break;
|
||
}
|
||
// 3.2 商品价格为空
|
||
if (val.price === '') {
|
||
errorMsg = `请输入第${groupIndex + 1}组菜品的第${productIndex + 1}项的商品价格`;
|
||
productError = true;
|
||
break;
|
||
}
|
||
}
|
||
// 商品校验失败，终止整体循环
|
||
if (productError) {
|
||
checkPass = false;
|
||
break;
|
||
}
|
||
|
||
if (item.num === '') {
|
||
errorMsg = `请给第${groupIndex + 1}组输入几选几`;
|
||
checkPass = false;
|
||
break;
|
||
}
|
||
if (item.num > item.packageProducts.length) {
|
||
errorMsg = `第${groupIndex + 1}组几选几输入有误，最大${item.packageProducts.length}`;
|
||
checkPass = false;
|
||
break;
|
||
}
|
||
}
|
||
if (!checkPass) {
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
return checkPass;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
useWeeks: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请选择可用周期',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.useWeeks.length === 0) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
useTimes: [
|
||
{
|
||
required: true,
|
||
trigger: ['blur'],
|
||
message: '请选择指定时间段',
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.useTimes === '') {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
],
|
||
expireHours: [
|
||
{
|
||
trigger: ['blur'],
|
||
validator: (rule, value, callback) => {
|
||
if (form.value.tieredDiscount.length && form.value.expireHours === '') {
|
||
return callback(new Error('请输入分享期限'));
|
||
} else if (form.value.expireHours > 72) {
|
||
return callback(new Error('最大不超过72小时'));
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// 套餐组对象
|
||
const packageContentItem = ref({
|
||
name: '',
|
||
num: 1,
|
||
packageProducts: []
|
||
});
|
||
|
||
// 套餐组商品对象
|
||
const packageProductsItem = ref({
|
||
name: '',
|
||
price: '',
|
||
num: 1
|
||
});
|
||
|
||
// 添加套餐组
|
||
function addGroupHandle() {
|
||
form.value.packageContent.push(_.cloneDeep(packageContentItem.value));
|
||
}
|
||
|
||
// 添加商品
|
||
function addGoodsHandle(item) {
|
||
item.packageProducts.push(_.cloneDeep(packageProductsItem.value));
|
||
}
|
||
|
||
// 显示导入商品弹窗
|
||
const portGoodsIndex = ref(0);
|
||
function showGoodsDialogHandle(index) {
|
||
portGoodsIndex.value = index;
|
||
uni.navigateTo({
|
||
url: '/pageMarket/packagePopularize/selectGoods'
|
||
});
|
||
}
|
||
|
||
// 选择的商品
|
||
function selectProduceHandle() {
|
||
let obj = uni.getStorageSync('packageSelectGoods');
|
||
if (obj && obj.name) {
|
||
let data = _.cloneDeep(packageProductsItem.value);
|
||
data.name = obj.name;
|
||
data.price = obj.price;
|
||
form.value.packageContent[portGoodsIndex.value].packageProducts.push(data);
|
||
}
|
||
}
|
||
|
||
// ============= 添加阶梯 start
|
||
|
||
const addStepIndex = ref(0);
|
||
const showStepDialog = ref(false);
|
||
const stepFormRef = ref(null);
|
||
const stepForm = ref({
|
||
peopleNum: '',
|
||
price: ''
|
||
});
|
||
const stepFormType = ref('add');
|
||
const stepFormRules = ref({
|
||
peopleNum: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
if (addStepIndex.value == 1 && +stepForm.value.peopleNum <= +form.value.tieredDiscount[0].peopleNum) {
|
||
return callback(new Error('二阶段价格分享人数不可小于一阶段分享人数'));
|
||
} else if (addStepIndex.value == 2 && +stepForm.value.peopleNum <= +form.value.tieredDiscount[1].peopleNum) {
|
||
return callback(new Error('三阶段价格分享人数不可小于二阶段分享人数'));
|
||
} else {
|
||
return callback();
|
||
}
|
||
},
|
||
trigger: ['blur']
|
||
}
|
||
],
|
||
price: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
// 1. 空值校验（优先处理）
|
||
if (stepForm.value.price.trim() === '') {
|
||
return callback(new Error('请输入价格'));
|
||
}
|
||
|
||
// 统一转数值（避免字符串比较问题）
|
||
const currentPrice = +stepForm.value.price;
|
||
const originPrice = +form.value.price;
|
||
// 解构阶梯价格（转数值）
|
||
const [firstPrice, secondPrice, thirdPrice] = form.value.tieredDiscount.map((item) => +item.price);
|
||
|
||
// 2. 新增模式（原有逻辑不变）
|
||
if (stepFormType.value === 'add') {
|
||
if (addStepIndex.value === 0 && currentPrice > originPrice) {
|
||
return callback(new Error(`一阶段价格不可大于商品售价￥${originPrice}`));
|
||
} else if (addStepIndex.value === 1 && currentPrice >= firstPrice) {
|
||
return callback(new Error('二阶段价格不可大于等于一阶段价格'));
|
||
} else if (addStepIndex.value === 2 && currentPrice >= secondPrice) {
|
||
return callback(new Error('三阶段价格不可大于等于二阶段价格'));
|
||
} else {
|
||
return callback(); // 校验通过
|
||
}
|
||
}
|
||
// 3. 编辑模式（新增逻辑：瞻前顾后）
|
||
else if (stepFormType.value === 'editor') {
|
||
// 编辑第一阶段
|
||
if (addStepIndex.value === 0) {
|
||
// 规则：不大于原价 + 不小于第二阶段（若第二阶段存在）
|
||
if (currentPrice > originPrice) {
|
||
return callback(new Error(`一阶段价格不可大于商品售价￥${form.value.originPrice}`));
|
||
} else if (secondPrice && currentPrice <= secondPrice) {
|
||
// 第二阶段有值时，第一阶段需大于第二阶段
|
||
return callback(new Error('一阶段价格不可小于等于二阶段价格'));
|
||
} else {
|
||
return callback();
|
||
}
|
||
}
|
||
// 编辑第二阶段
|
||
else if (addStepIndex.value === 1) {
|
||
// 规则：不小于第一阶段 + 不大于第三阶段（若第三阶段存在）
|
||
const errors = [];
|
||
if (currentPrice >= firstPrice) {
|
||
errors.push('二阶段价格不可大于等于一阶段价格');
|
||
}
|
||
if (thirdPrice && currentPrice <= thirdPrice) {
|
||
// 第三阶段有值时，第二阶段需大于第三阶段
|
||
errors.push('二阶段价格不可小于等于三阶段价格');
|
||
}
|
||
if (errors.length > 0) {
|
||
return callback(new Error(errors.join('；')));
|
||
} else {
|
||
return callback();
|
||
}
|
||
}
|
||
// 编辑第三阶段
|
||
else if (addStepIndex.value === 2) {
|
||
// 规则：仅校验不大于等于第二阶段（和新增一致）
|
||
if (currentPrice >= secondPrice) {
|
||
return callback(new Error('三阶段价格不可大于等于二阶段价格'));
|
||
} else {
|
||
return callback();
|
||
}
|
||
}
|
||
}
|
||
// 兜底：无匹配模式时校验通过
|
||
else {
|
||
return callback();
|
||
}
|
||
},
|
||
trigger: ['blur']
|
||
}
|
||
]
|
||
});
|
||
|
||
// 显示添加阶梯
|
||
function addStepHandle() {
|
||
stepFormType.value = 'add';
|
||
showStepDialog.value = true;
|
||
addStepIndex.value = form.value.tieredDiscount.length;
|
||
}
|
||
|
||
// 编辑优惠阶梯
|
||
function editorStepFormHandle(index) {
|
||
stepFormType.value = 'editor';
|
||
showStepDialog.value = true;
|
||
addStepIndex.value = index;
|
||
|
||
stepForm.value.peopleNum = form.value.tieredDiscount[index].peopleNum;
|
||
stepForm.value.price = form.value.tieredDiscount[index].price;
|
||
}
|
||
|
||
// 关闭dialog后初始化stepForm
|
||
function stepDialogReset() {
|
||
stepForm.value.peopleNum = '';
|
||
stepForm.value.price = '';
|
||
stepFormRef.value.resetFields();
|
||
}
|
||
|
||
// 确认添加阶段
|
||
function stepFormSubmitHandle() {
|
||
stepFormRef.value
|
||
.validate()
|
||
.then(() => {
|
||
console.log('stepFormType.value', stepFormType.value);
|
||
console.log('addStepIndex.value', addStepIndex.value);
|
||
if (stepFormType.value == 'add') {
|
||
form.value.tieredDiscount.push(_.cloneDeep(stepForm.value));
|
||
} else {
|
||
form.value.tieredDiscount[addStepIndex.value] = _.cloneDeep(stepForm.value);
|
||
}
|
||
showStepDialog.value = false;
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
|
||
// ============= 添加阶梯end
|
||
|
||
// 原价
|
||
function originalPriceInput(e) {
|
||
setTimeout(() => {
|
||
form.value.originPrice = filterNumberInput(e);
|
||
}, 50);
|
||
}
|
||
|
||
// 拼团价
|
||
function groupPriceInput(e) {
|
||
setTimeout(() => {
|
||
form.value.price = filterNumberInput(e);
|
||
}, 50);
|
||
}
|
||
|
||
// 成团期限
|
||
function groupTimeoutHourInput(e) {
|
||
setTimeout(() => {
|
||
form.value.expireHours = filterNumberInput(e, 1);
|
||
}, 50);
|
||
}
|
||
|
||
// 保存商品
|
||
function submitHandle() {
|
||
if (startValue.value && endValue.value) {
|
||
form.value.useTimes = `${startValue.value}~${endValue.value}`;
|
||
}
|
||
console.log(form.value);
|
||
formRef.value
|
||
.validate()
|
||
.then(async () => {
|
||
try {
|
||
uni.showLoading({
|
||
title: '保存中...',
|
||
mask: true
|
||
});
|
||
const data = { ...form.value };
|
||
if (form.value.useShops.length) {
|
||
data.useShops = form.value.useShops.join(',');
|
||
} else {
|
||
data.useShops = '';
|
||
}
|
||
await packageAddEdit(data);
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none'
|
||
});
|
||
}, 300);
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
uni.hideLoading();
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
|
||
function backHandle() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
// 从本地获取商品信息
|
||
function getLocalGoods() {
|
||
let packageGoods = uni.getStorageSync('packageGoods');
|
||
if (packageGoods && packageGoods.id) {
|
||
form.value = packageGoods;
|
||
|
||
if (form.value.useShops !== '') {
|
||
form.value.useShops = form.value.useShops.split(',');
|
||
} else {
|
||
form.value.useShops = [];
|
||
}
|
||
|
||
if (packageGoods.useTimes !== '') {
|
||
let times = packageGoods.useTimes.split('~');
|
||
startValue.value = times[0];
|
||
endValue.value = times[1];
|
||
}
|
||
}
|
||
}
|
||
|
||
onShow(() => {
|
||
// 从本地获取选择的商品
|
||
selectProduceHandle();
|
||
});
|
||
|
||
onLoad((options) => {
|
||
uni.setStorageSync('packageSelectGoods', '');
|
||
if (options.type && options.type == 'editor') {
|
||
type.value = options.type;
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑商品'
|
||
});
|
||
getLocalGoods();
|
||
} else {
|
||
type.value = 'add';
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f8f8f8;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 28upx;
|
||
}
|
||
.card {
|
||
background-color: #fff;
|
||
border-radius: 20px;
|
||
padding: 28upx;
|
||
&:not(:last-child) {
|
||
margin-bottom: 28upx;
|
||
}
|
||
}
|
||
.switch-wrap {
|
||
flex: 1;
|
||
width: 100%;
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&.column {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
.two {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-right: 28upx;
|
||
}
|
||
.t {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
.tips {
|
||
font-size: 24upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
.info {
|
||
padding-top: 16upx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16upx;
|
||
.i {
|
||
font-size: 28upx;
|
||
color: #666;
|
||
}
|
||
.ipt {
|
||
flex: 1;
|
||
}
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #666;
|
||
}
|
||
.package-wrap {
|
||
flex: 1;
|
||
.list {
|
||
.item {
|
||
border: 1px solid #ececec;
|
||
border-radius: 12upx;
|
||
padding: 20upx;
|
||
&:not(:first-child) {
|
||
margin-top: 28upx;
|
||
}
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 20upx;
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
.del {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12upx;
|
||
}
|
||
}
|
||
.input-wrap {
|
||
display: flex;
|
||
gap: 20upx;
|
||
padding-bottom: 20upx;
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12upx;
|
||
.t {
|
||
color: #318afe;
|
||
}
|
||
}
|
||
}
|
||
.table-wrap {
|
||
padding-bottom: 20upx;
|
||
margin-bottom: 20upx;
|
||
.tab-head {
|
||
background-color: #f8f8f8;
|
||
}
|
||
.tr {
|
||
display: flex;
|
||
gap: 12upx;
|
||
padding: 20upx;
|
||
border-bottom: 1px solid #ececec;
|
||
.td {
|
||
flex: 1;
|
||
&:nth-child(1) {
|
||
flex: 2;
|
||
}
|
||
&:last-child {
|
||
flex: 0.5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
.del {
|
||
color: red;
|
||
font-size: 28upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.select_num_wrap {
|
||
padding-bottom: 28upx;
|
||
.label {
|
||
padding-bottom: 20upx;
|
||
.t {
|
||
color: #333;
|
||
font-size: 32upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.package-wrap-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 28upx;
|
||
.btn {
|
||
display: flex;
|
||
gap: 8upx;
|
||
align-items: center;
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #318afe;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.step-wrap {
|
||
flex: 1;
|
||
.table-wrap {
|
||
padding-bottom: 20upx;
|
||
margin-bottom: 20upx;
|
||
.tab-head {
|
||
background-color: #f8f8f8;
|
||
}
|
||
.tr {
|
||
display: flex;
|
||
gap: 12upx;
|
||
padding: 20upx;
|
||
border-bottom: 1px solid #ececec;
|
||
.td {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 20upx;
|
||
align-items: center;
|
||
&:last-child {
|
||
flex: 0.6;
|
||
}
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
.edit {
|
||
color: #318afe;
|
||
font-size: 28upx;
|
||
}
|
||
.del {
|
||
color: red;
|
||
font-size: 28upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.empty {
|
||
padding: 28upx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.add-step-wrap {
|
||
width: 80vw;
|
||
.title {
|
||
padding: 28upx;
|
||
.t {
|
||
font-size: 32upx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 0 28upx 28upx;
|
||
}
|
||
.footer-btn-wrap {
|
||
display: flex;
|
||
padding: 0 28upx 28upx;
|
||
gap: 28upx;
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|