czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增商品增加套餐、称重

This commit is contained in:
gyq 2024-11-22 09:34:14 +08:00
parent db7c64fa8b
commit df9a29359f
5 changed files with 432 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/shop.js
View File

@ -6,7 +6,7 @@ import request from "@/utils/request";
*/
export function tbProduct(params) {
return request({
url: "/api/tbProduct",
url: "/api/tbProduct/list",
method: "get",
params
});

4
src/components/shopList/index.vue
View File

@ -54,7 +54,7 @@
</template>
</el-table-column>
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" v-if="radio">
<template v-slot="scope">
<el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
</template>
@ -146,6 +146,8 @@ export default {
categoryId: this.searhForm.category,
shopId: localStorage.getItem('shopId'),
sort: 'id',
createdAt: [],
sort: 'createdAt,desc'
})
this.tableData.list = res.content
this.tableData.total = res.totalElements

48
src/views/coupon_manage/couponEnum.js
View File

@ -1,51 +1,51 @@
export default {
classType: [
{
value: 'product',
label: '商品券'
value: "product",
label: "商品券"
},
{
value: 'common',
label: '通用券'
value: "common",
label: "通用券"
}
],
type: [
{
value: '0',
label: '满减'
value: "0",
label: "满减"
},
{
value: '1',
label: '折扣'
value: "1",
label: "折扣"
}
],
cycle: [
{ label: '周一' },
{ label: '周二' },
{ label: '周三' },
{ label: '周四' },
{ label: '周五' },
{ label: '周六' },
{ label: '周七' }
{ label: "周一", value: "Monday" },
{ label: "周二", value: "Tuesday" },
{ label: "周三", value: "Wednesday" },
{ label: "周四", value: "Thursday" },
{ label: "周五", value: "Friday" },
{ label: "周六", value: "Saturday" },
{ label: "周七", value: "Sunday" }
],
validityType: [
{
value: 'fixed',
label: '领券后有效期内可用'
value: "fixed",
label: "领券后有效期内可用"
},
{
value: 'custom',
label: '固定有效期范围内可用'
value: "custom",
label: "固定有效期范围内可用"
}
],
useTimeType: [
{
value: 'all',
label: '全时段可用'
value: "all",
label: "全时段可用"
},
{
value: 'custom',
label: '指定时间段'
value: "custom",
label: "指定时间段"
}
]
}
};

410
src/views/product/add_shop.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="app-container">
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="left">
<el-form-item label="商品类型" prop="typeEnum">
<!-- <el-form-item label="商品类型" prop="typeEnum">
<div class="shop_type_box" :class="{}">
<!-- <div class="shop_type_box" :class="{ disabled: form.id }"> -->
<div class="item" v-for="(item, index) in shopTypes" :key="index"
:class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
<div class="s_title">{{ item.label }}</div>
@ -13,7 +12,7 @@
</div>
</div>
</div>
</el-form-item>
</el-form-item> -->
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px"></el-input>
</el-form-item>
@ -58,46 +57,110 @@
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
<!-- <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addImg.show()">选择图片</el-button> -->
</el-form-item>
<el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
<el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
<el-table-column label="标题" prop="title">
<el-form-item label="显示/隐藏" prop="showType">
<el-checkbox-group v-model="form.showType">
<el-checkbox label="table">堂食</el-checkbox>
<el-checkbox label="dine">自取</el-checkbox>
<el-checkbox label="delivery">配送</el-checkbox>
<el-checkbox label="express">快递</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="商品类型">
<el-radio-group v-model="form.type" @change="typeChange">
<el-radio label="normal">普通商品</el-radio>
<el-radio label="package">套餐类型</el-radio>
<el-radio label="weigh">称重</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="规格类型" v-if="form.type == 'normal'">
<el-radio-group v-model="form.typeEnum" @change="changeTypeEnum">
<el-radio label="normal">单规格</el-radio>
<el-radio label="sku">多规格</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="套餐商品" v-if="form.type == 'package'">
<div class="head-container">
<el-radio-group v-model="form.groupType" @change="typeChange">
<el-radio-button label="0">固定套餐</el-radio-button>
<el-radio-button label="1">可选套餐</el-radio-button>
</el-radio-group>
</div>
<div v-if="form.groupType == 0">
<el-table border :data="item.goods" v-for="(item, index) in form.proGroupVo" :key="index">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName">
<!-- <template slot-scope="scope">
<template v-if="scope.row.typeEnum == '多规格'">
<template v-if="scope.row.skuName">
{{ scope.row.skuName }}
</template>
<span class="tips" v-else>请设置规格</span>
</template>
<template v-else>
单规格
</template>
</template> -->
</el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input v-model="scope.row.title" placeholder="请输入标题：自选小吃"></el-input>
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="shop_list">
<div class="item" v-for="(item, index) in scope.row.goods" :key="item.id">
<span class="dot"></span>
<div class="name">
<div class="t">{{ item.name }}</div>
<div class="t" v-if="!form.id">x{{ item.groupNum }}</div>
<el-input-number v-model="item.groupNum" :step="1" step-strictly :min="1" size="mini"
v-else></el-input-number>
</div>
<i class="del el-icon-delete" @click="delGoods(scope.row.goods, index, scope.$index)"></i>
</div>
</div>
<el-table-column width="150">
<template slot="header" slot-scope="scope">
<el-button type="primary"
@click="$refs.shopListRef.show([...form.proGroupVo[index].goods])">添加商品</el-button>
</template>
</el-table-column>
<el-table-column label="几选几">
<template v-slot="scope">
<span>{{ scope.row.goods.length }}选</span>
<el-input-number v-model="scope.row.number" controls-position="right" :min="1"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" width="160">
<template v-slot="scope">
<el-button type="text" @click="tableAddShop(scope.$index, scope.row.goods)">添加商品</el-button>
<el-button type="text" @click="form.groupSnap.splice(scope.$index, 1)">删除分组</el-button>
<template slot-scope="scope">
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" @click="$refs.shopListRef.show()">添加分组</el-button>
<shopList ref="shopListRef" @success="selectShopRes" />
</div>
<div v-if="form.groupType == 1">
<div class="group_wrap" v-for="(item, index) in form.proGroupVo" :key="index">
<el-form inline :model="item">
<el-form-item label="规格组名">
<el-input v-model="item.title" />
</el-form-item>
<el-form-item label="规格属性" v-if="shopTypes[shopTypesActive].typeEnum != 'sku'">
<el-form-item :label="`本组菜品${item.goods.length}选`">
<el-input v-model="item.number" />
</el-form-item>
<el-form-item>
<el-button @click="form.proGroupVo.splice(index, 1)">删除</el-button>
</el-form-item>
</el-form>
<div>
<el-table border :data="item.goods">
<el-table-column label="名称" prop="proName"></el-table-column>
<el-table-column label="规格" prop="skuName"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="数量" prop="number">
<template v-slot="scope">
<el-input-number v-model="scope.row.number" :min="0" />
</template>
</el-table-column>
<el-table-column width="150">
<template slot="header" slot-scope="scope">
<el-button type="primary"
@click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
<el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
</div>
</el-form-item>
<el-form-item label="规格属性" v-if="form.typeEnum != 'sku'">
<el-table :data="form.skuList" border>
<el-table-column label="售价" prop="salePrice">
<template v-slot="scope">
@ -207,7 +270,7 @@
<Editor :minHeight="200" :value="form.notices.usageRules" v-model="form.notices.usageRules" />
</el-form-item>
</template>
<el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
<el-form-item label="选择规格" v-if="form.type == 'normal' && form.typeEnum == 'sku'">
<el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle">
<el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
</el-select>
@ -217,7 +280,7 @@
<el-checkbox :label="item" v-for="(item, index) in item.value" :key="index"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="selectSpecResult && shopTypes[shopTypesActive].typeEnum == 'sku'">
<el-form-item v-if="selectSpecResult && form.typeEnum == 'sku'">
<el-table :data="form.skuList" border>
<el-table-column :label="item.label" :prop="item.value" v-for="(item, index) in specTableHeaders"
:key="index">
@ -331,6 +394,36 @@
注：小程序商城必须设置库存数量大于0
</div> -->
</el-form-item>
<el-form-item label="重量">
<el-input v-model="form.weight" style="width: 250px;">
<template slot="append">千克</template>
</el-input>
<div class="tips">用于快递或配送运费计重</div>
</el-form-item>
<el-form-item label="是否允许临时改价">
<el-radio-group v-model="form.isTempPrice">
<el-radio label="1">允许</el-radio>
<el-radio label="0">不允许</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="每日销量上限">
<el-input-number v-model="form.dayLimit" :min="0" />
</el-form-item>
<el-form-item label="每单限购">
<el-input-number v-model="form.singleOrderLimit" :min="0" />
</el-form-item>
<el-form-item label="每人限购">
<el-input-number v-model="form.singlePeopleLimit" :min="0" />
</el-form-item>
<el-form-item label="定时上下架" style="width: 100%;">
<el-checkbox-group v-model="form.days">
<el-checkbox v-for="(item, index) in couponEnum.cycle" :key="item.value" :label="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<el-time-picker v-model="useTime" is-range range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" value-format="HH:mm" format="HH:mm" @change="useTimeChange" />
</el-form-item>
<template v-if="form.typeEnum != 'group'">
<!-- <el-form-item label="上架区域">
<div class="shop_type_box">
@ -403,6 +496,29 @@
<!-- <groupTypeList ref="groupTypeList" @success="(res) => (form.groupCategoryId = res)" /> -->
<!-- 选择图片 -->
<addImg ref="addImg" @successEvent="successEvent"></addImg>
<!-- 选择商品 -->
<shopList ref="shopListRef" @success="selectShopRes" />
<el-dialog :title="selectSkuItem.proName" :visible.sync="showSelectSku">
<div class="pro_sku">
<div class="item">
<!-- <div class="row">
<div class="title">规格</div>
<div class="tag no">温度</div>
</div> -->
<div class="row">
<div class="title">选项值</div>
<div class="tag" :class="{ active: item.active }" v-for="(item, index) in selectSkuItem.skuList"
:key="item.id" @click="selectSkuHandle(item, index)">
{{ item.specSnap }}
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="showSelectSku = false">取 消</el-button>
<el-button type="primary" :disabled="selectSkuConfirmDisabled" @click="showSelectSkuConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
@ -426,6 +542,7 @@ import settings from "@/settings";
import dayjs from "dayjs";
import { RandomNumBoth } from "@/utils";
import { formatPrice } from "@/utils/format";
import couponEnum from '@/views/coupon_manage/couponEnum.js'
export default {
components: {
@ -455,6 +572,7 @@ export default {
}
}
return {
couponEnum,
shopTypesActive: 0,
shopTypes: settings.typeEnum,
specTableHeaders: [],
@ -480,9 +598,19 @@ export default {
isEditor: false,
loading: false,
originSkuList: [],
showSelectSku: false,
selectSkuItem: {
skuList: []
},
selectSkuTableIndex: 0,
selectSkuConfirmIndex: 0,
selectSkuConfirmDisabled: true,
addGroupIndex: false,
form: {
id: "",
type: 'normal',
typeEnum: "normal",
groupType: '0',
name: "",
shortTitle: "", //商品介绍
unitId: "",
@ -491,6 +619,7 @@ export default {
coverImg: "",
images: [],
shopId: localStorage.getItem("shopId"),
showType: ['table'],
lowPrice: "",
skuList: [],
isShowMall: 1,
@ -500,6 +629,14 @@ export default {
specId: "",
baseSalesNumber: 0,
sort: 0,
proGroupVo: [
{
title: '',
count: '',
number: '',
goods: []
}
],
groupSnap: [],
specInfo: [],
selectSpec: [],
@ -520,8 +657,17 @@ export default {
},
stockNumber: 0,
isHot: 1,
isGrounding: 1
isGrounding: 1,
isTempPrice: '1',
dayLimit: 0,
singleOrderLimit: 0,
singlePeopleLimit: 0,
weight: '',
days: [],
startTime: '',
endTime: ''
},
useTime: ['', ''],
imgList: [],
rules: {
typeEnum: [
@ -529,6 +675,13 @@ export default {
required: true,
},
],
showType: [
{
required: true,
trigger: "change",
message: "至少选择一项",
}
],
name: [
{
required: true,
@ -602,7 +755,7 @@ export default {
batchNumberForm: {
batchNumber: 0,
},
routequery:''
routequery: ''
};
},
mounted() {
@ -628,6 +781,74 @@ export default {
}
},
methods: {
useTimeChange(e) {
this.form.startTime = e[0]
this.form.endTime = e[1]
},
// 套餐类型切换
typeChange() {
this.form.typeEnum = 'normal'
if (this.form.groupType == 0) {
this.$set(this.form.proGroupVo, 0, {
title: '',
count: '',
number: 1,
goods: []
})
} else {
this.form.proGroupVo = []
}
this.changeTypeEnum()
},
// 确认套餐商品设置规格
showSelectSkuConfirm() {
let item = this.selectSkuItem.skuList.filter(item => item.active)
this.$set(this.form.proGroupVo[this.selectSkuTableIndex].goods, this.selectSkuConfirmIndex, { ...this.form.proGroupVo[this.selectSkuTableIndex].goods[this.selectSkuConfirmIndex], skuId: item[0].id })
this.$set(this.form.proGroupVo[this.selectSkuTableIndex].goods, this.selectSkuConfirmIndex, { ...this.form.proGroupVo[this.selectSkuTableIndex].goods[this.selectSkuConfirmIndex], skuName: item[0].specSnap })
this.showSelectSku = false
// console.log(this.form.proGroupVo.goods[this.selectSkuConfirmIndex]
},
// 选择套餐商品sku
selectSkuHandle(item, index) {
// 把所有的设置为false
this.selectSkuItem.skuList.map((item, index) => {
let nitem = { ...item }
nitem.active = false
this.$set(this.selectSkuItem.skuList, index, nitem)
})
if (item.active) {
item.active = false
this.$set(this.selectSkuItem.skuList, index, { ...item })
} else {
item.active = true
this.$set(this.selectSkuItem.skuList, index, { ...item })
}
let arr = this.selectSkuItem.skuList.filter(item => item.active)
if (arr.length) {
this.selectSkuConfirmDisabled = false
} else {
this.selectSkuConfirmDisabled = true
}
},
// 显示套餐商品设置规格
showSelectSkuHandle(row, index, tabIndex) {
this.selectSkuTableIndex = tabIndex
this.selectSkuConfirmIndex = index
this.showSelectSku = true
let obj = { ...row }
obj.skuList.map(item => {
item.active = false
})
this.selectSkuItem = obj
},
uploadImgSucess(res, item) {
console.log(res);
console.log(item);
@ -735,7 +956,15 @@ export default {
url: item,
};
});
res.days = res.days.split(',')
res.showType = res.showType.split(',')
res.isTempPrice = JSON.stringify(res.isTempPrice)
this.form = res;
this.useTime = [res.startTime, res.endTime]
if (res.typeEnum == "sku") {
let skuList = [...res.skuList];
let specInfo = JSON.parse(res.specInfo);
@ -767,10 +996,13 @@ export default {
// 提交
submitHandle() {
console.log(this.form);
// return
if (this.form.type == 'normal') {
// 如果找到undefined，立即停止搜索并返回true
const hasUndefined = this.form.skuList.some(obj => {
for (const key in obj) {
if (this.shopTypesActive == 0) {//单规格判断
if (this.form.typeEnum == 'normal') {//单规格判断
if (obj['salePrice'] == undefined || obj['memberPrice'] == undefined) {
return true;
}
@ -789,6 +1021,7 @@ export default {
});
return false;
}
}
let arr = [];
this.imgList.forEach((ele) => {
@ -807,6 +1040,10 @@ export default {
this.form.specInfo = JSON.stringify(this.form.skuList);
// this.form.skuList[0].costPrice = 0
this.form.skuList[0].originPrice = this.form.skuList[0].salePrice
this.form.showType = this.form.showType.join(',')
this.form.days = this.form.days.join(',')
if (this.form.id) {
await tbProductPut(this.form);
} else {
@ -833,30 +1070,45 @@ export default {
},
// 分组选择商品
selectShopRes(res) {
let arr = res.map((item) => {
item.groupNum = 1;
return item;
});
if (this.tableAddShopIndex != null) {
this.form.groupSnap[this.tableAddShopIndex].goods = [...arr];
this.tableAddShopIndex = null;
} else {
this.form.groupSnap.push({
title: "",
goods: [...arr],
number: 1,
});
let newres = res.map(item => {
item.proId = item.id
item.proName = item.name
item.price = item.lowPrice
item.skuId = ''
item.skuName = ''
item.number = 1
return item
})
if (this.form.groupType == 0) {
let obj = {
title: '',
count: newres.length,
number: '',
goods: newres
}
this.form.proGroupVo = [{ ...obj }]
} else {
if (this.addGroupIndex !== false) {
this.form.proGroupVo[this.addGroupIndex].goods = newres
} else {
let arr = [...this.form.proGroupVo]
arr.push({
title: '',
count: newres.length,
number: '',
goods: newres
})
this.form.proGroupVo = [...arr]
}
}
console.log(this.form.groupSnap);
},
// 切换类型
changeTypeEnum(index) {
// if (this.form.id) return;
this.shopTypesActive = index;
const typeEnum = this.shopTypes[index].typeEnum;
this.form.typeEnum = typeEnum;
if (typeEnum == "sku") {
// this.shopTypesActive = index;
// const typeEnum = this.shopTypes[index].typeEnum;
// this.form.typeEnum = typeEnum;
if (this.form.typeEnum == "sku") {
this.form.skuList = [];
this.tbProductSpecGet();
} else {
@ -1149,4 +1401,44 @@ export default {
.showStyle:hover>.buttonstyle {
display: block;
}
.pro_sku {
.item {
.row {
display: flex;
align-items: center;
&:not(:first-child) {
margin-top: 20px;
}
.title {
width: 80px;
}
.tag {
background-color: #F7F7FA;
padding: 6px 12px;
margin-right: 10px;
border-radius: 4px;
&.no {
background: none;
padding: 6px 0;
}
&.active {
background-color: #46A6FF;
color: #fff;
}
}
}
}
}
.group_wrap {
padding: 20px;
background-color: #F7F7FA;
margin-bottom: 20px;
}
</style>

30
src/views/shop/components/addShop.vue
View File

@ -5,6 +5,9 @@
<el-form-item label="店铺名称" prop="shopName">
<el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
</el-form-item>
<el-form-item label="主店账号" prop="mainId">
<el-input v-model="form.mainId" placeholder="请输入主店账号"></el-input>
</el-form-item>
<el-form-item label="连锁店扩展店名">
<el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
</el-form-item>
@ -16,13 +19,28 @@
<el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 2"></el-image>
</el-form-item>
<el-form-item label="店铺类型">
<el-form-item label="经营模式">
<el-radio-group v-model="form.registerType">
<el-radio-button label="munchies">快餐版</el-radio-button>
<el-radio-button label="restaurant">餐饮版</el-radio-button>
</el-radio-group>
<div class="tips">请谨慎修改！！！</div>
</el-form-item>
<el-form-item label="店铺类型">
<el-radio-group v-model="form.type">
<el-radio-button label="only">单店</el-radio-button>
<el-radio-button label="chain">连锁店</el-radio-button>
<el-radio-button label="join">加盟店</el-radio-button>
</el-radio-group>
<div class="tips">请谨慎修改！！！</div>
</el-form-item>
<el-form-item label="管理方式" v-if="form.type != 'only'">
<el-radio-group v-model="form.tube_type">
<el-radio-button label="0">不可直接管理</el-radio-button>
<el-radio-button label="1">直接管理</el-radio-button>
</el-radio-group>
<div class="tips">请谨慎修改！！！</div>
</el-form-item>
<el-form-item label="试用/正式">
<el-radio-group v-model="form.profiles">
<el-radio-button label="probation">试用</el-radio-button>
@ -161,6 +179,9 @@ export default {
form: {
id: '',
shopName: '',
mainId: '',
type: 'only',
tube_type: '0',
registerType: 'restaurant',
profiles: 'release',
registerCode: '',
@ -189,6 +210,13 @@ export default {
trigger: 'blur'
}
],
mainId: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
provinces: [
{
required: true,