优化分组商品编辑

This commit is contained in:
gyq
2025-05-07 17:48:13 +08:00
parent b69b5dbf31
commit d6e1c83f88
10 changed files with 2599 additions and 2527 deletions

View File

@@ -5,5 +5,4 @@ export default {
// 'JEEPAY_BASE_URL': 'https://cashier.sxczgkj.com/', // 请求URL生产环境
// 'JEEPAY_BASE_URL_H5': 'https://cashier.sxczgkj.com/',
// 'JEEPAY_BASE_URL_WSS': 'wss://czgeatws.sxczgkj.com/wss' // sockets
}

View File

@@ -166,18 +166,7 @@
"enable" : true
},
"devServer" : {
"disableHostCheck" : true,
"proxy" : {
"/api" : {
// 需要被代理的后台地址
"target" : "https://tapi.cashier.sxczgkj.cn",
"changeOrigin" : true,
"secure" : true,
"pathRewrite" : {
"/api" : ""
}
}
}
"disableHostCheck" : true
},
"sdkConfigs" : {
"maps" : {

View File

@@ -17,23 +17,23 @@
</view>
</view>
</view>
</view>
</template>
<template v-else>
<view class=" u-flex u-p-l-30 u-p-r-30 u-p-t-16 u-p-b-16" @click="goodsClick">
<my-radio disabled @click.stop="goodsClick" :modelValue="data.checked"></my-radio>
<view class="u-flex u-m-l-32">
<view class="goods-wrap">
<view class="goods-item u-flex" @click="goodsClick">
<my-radio @click="goodsClick" :modelValue="data.checked"></my-radio>
<view class="u-flex u-m-l-10">
<text class="">{{ data.name }}</text>
</view>
</view>
</view>
</template>
</view>
</template>
<script setup>
const emits = defineEmits(['goodsClick', 'del'])
const emits = defineEmits(['goodsClick', 'del']);
const props = defineProps({
isBind: {
@@ -47,24 +47,23 @@
type: Object,
default: () => {
return {
checked:false,
}
checked: false
};
}
},
showDetail: {
type: Boolean,
default: false
}
})
});
function goodsClick() {
emits('goodsClick',props.index)
emits('goodsClick', props.index);
}
function del() {
emits('del', props.index)
emits('del', props.index);
}
</script>
<style lang="scss" scoped>
@@ -93,7 +92,7 @@
font-size: 28rpx;
.skus {
background: #F9F9F9;
background: #f9f9f9;
border-radius: 14rpx 14rpx 14rpx 14rpx;
padding: 20rpx;
@@ -108,5 +107,11 @@
}
}
}
.goods-wrap {
padding: 0 20upx;
.goods-item {
padding: 20upx 0;
border-bottom: 1px solid #ececec;
}
}
</style>

View File

@@ -2,18 +2,21 @@
<view class="safe-page min-page">
<up-sticky>
<view class="bg-fff u-p-l-30 u-p-b-24">
<view class="input-wrapper">
<view class="input-main">
<view class="u-flex u-p-r-30 u-font-28" @click="onCategoryShowChange(true)">
<text class="u-m-r-10 u-line-1"
style="max-width: 100rpx;">{{pageData.categoryName||'全部' }}</text>
<text class="u-m-r-10 u-line-1" style="max-width: 100rpx">{{ pageData.categoryName || '全部' }}</text>
<up-icon name="arrow-down" size="16"></up-icon>
</view>
<uni-easyinput clearable class='jeepay-search' :inputBorder="false"
:placeholder="pageData.search.placeholder" v-model="pageData.query.name"
<uni-easyinput
clearable
class="jeepay-search"
:inputBorder="false"
:placeholder="pageData.search.placeholder"
v-model="pageData.query.name"
@clear="searchFunc"
@confirm="searchFunc">
@confirm="searchFunc"
>
<template #prefixIcon>
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
</template>
@@ -24,27 +27,29 @@
</view>
</view>
<view class="u-flex states1 u-row-between u-font-28">
<view class=" u-flex-1 item u-flex u-row-center tranistion u-text-center color-333"
:class="{'active':pageData.stateCurrent==index}" @tap="statesTableClick(index)"
v-for="(item,index) in statesTabsList" :key="index">
<view
class="u-flex-1 item u-flex u-row-center tranistion u-text-center color-333"
:class="{ active: pageData.stateCurrent == index }"
@tap="statesTableClick(index)"
v-for="(item, index) in statesTabsList"
:key="index"
>
<view class="text">{{ item }}</view>
</view>
</view>
</view>
</up-sticky>
<template v-if="pageData.stateCurrent == 0">
<view class="goods-list u-p-30">
<template v-if="pageData.bindGoodsList.length">
<view class="u-m-b-32" v-for="(item, index) in pageData.bindGoodsList" :key="index">
<my-goods isBind :index="index" :data="item" @del="goodsDel"
:showDetail="pageData.showGoodsDetail"></my-goods>
<my-goods isBind :index="index" :data="item" @del="goodsDel" :showDetail="pageData.showGoodsDetail"></my-goods>
</view>
</template>
<template v-if="pageData.hasAjax && !pageData.bindGoodsList.length">
<my-img-empty :tips="isSearch ? '未搜索到相关绑定商品' : '暂无绑定商品'"></my-img-empty>
</template>
<view style="height: 100rpx;"></view>
<view style="height: 100rpx"></view>
</view>
</template>
<template v-else>
@@ -52,8 +57,7 @@
<view class="bg-fff border-r-18 u-p-t-16 u-p-b-16 box-shadow">
<template v-if="pageData.goodsList.length">
<view class="" v-for="(item, index) in pageData.goodsList" :key="index">
<my-goods @goodsClick="goodsClick" :index="index" :data="item"
:showDetail="pageData.showGoodsDetail"></my-goods>
<my-goods @goodsClick="goodsClick" :index="index" :data="item" :showDetail="pageData.showGoodsDetail"></my-goods>
</view>
</template>
<template v-if="pageData.hasAjax && !pageData.goodsList.length">
@@ -63,25 +67,24 @@
<view class="fixed-b">
<my-button shape="circle" @click="save">确定</my-button>
</view>
<view style="height: 100rpx;"></view>
<view style="height: 100rpx"></view>
</view>
</template>
<!-- 分类 -->
<my-category v-model:isShow="pageData.categoryShow" @confirm="setCategory"></my-category>
</view>
</template>
<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref, watch } from 'vue';
import myGoods from './components/goods.vue'
import myCategory from './components/category.vue'
import myGoods from './components/goods.vue';
import myCategory from './components/category.vue';
import { hasPermission } from '@/commons/utils/hasPermission.js';
import { categoryPage } from '@/http/api/cateGory.js'
import { getProductPage,getProdGroupDetail,updateProdGroup } from '@/http/api/product.js'
import { categoryPage } from '@/http/api/cateGory.js';
import { getProductPage, getProdGroupDetail, updateProdGroup } from '@/http/api/product.js';
const pageData = reactive({
stateCurrent: 0,
@@ -97,63 +100,67 @@
size: 999,
categoryId: '',
name: '',
id: "",
id: ''
},
// 原始已绑定的上商品列表
bindOriginGoodsList: [],
category: '',
categoryList: [], //分类列表
categoryShow: false,
categoryName: '',
hasAjax: false
})
});
let isSearch=ref(false)
const statesTabsList = ['已添加', '未添加']
const control = ref(null)
const model = ref(null)
const option = reactive({})
let isSearch = ref(false);
const statesTabsList = ['已添加', '未添加'];
const control = ref(null);
const model = ref(null);
const option = reactive({});
//分类
const category = ref(null)
const category = ref(null);
onLoad((opt) => {
Object.assign(option, opt)
init()
})
onShow(() => {
})
watch(() => pageData.query.categoryId, (newval) => {
Object.assign(option, opt);
init();
});
onShow(() => {});
watch(
() => pageData.query.categoryId,
(newval) => {
if (pageData.stateCurrent == 1) {
getGoodsList()
getGoodsList();
} else {
getGroupBindGoods()
getGroupBindGoods();
}
})
}
);
watch(() => pageData.stateCurrent, (newval) => {
watch(
() => pageData.stateCurrent,
(newval) => {
if (newval == 1) {
getGoodsList()
getGoodsList();
} else {
getGroupBindGoods()
getGroupBindGoods();
}
})
}
);
async function init() {
await getGroupBindGoods()
getGoodsList()
await getGroupBindGoods();
getGoodsList();
}
/**
* 搜索
*/
async function searchFunc() {
isSearch.value=true
isSearch.value = true;
if (pageData.stateCurrent) {
getGoodsList()
getGoodsList();
} else {
const res = await getProdGroupDetail(option.id)
pageData.bindGoodsList = res.productList.filter(v=>{
return v.name.includes(pageData.query.name)&&(pageData.query.categoryId==''?true:v.categoryId==pageData.query.categoryId)
})
const res = await getProdGroupDetail(option.id);
pageData.bindGoodsList = res.productList.filter((v) => {
return v.name.includes(pageData.query.name) && (pageData.query.categoryId == '' ? true : v.categoryId == pageData.query.categoryId);
});
}
}
@@ -161,29 +168,29 @@
* 获取商品列表
*/
function getGoodsList() {
getProductPage(pageData.query).then(res => {
pageData.hasAjax = true
let goodsList = res.records.map(v => {
getProductPage(pageData.query).then((res) => {
pageData.hasAjax = true;
let goodsList = res.records.map((v) => {
return {
...v,
checked: false
}
})
pageData.goodsList = goodsList.filter(v => {
return !pageData.bindGoodsList.find(bindGoods => bindGoods.id == v.id)
})
})
};
});
pageData.goodsList = goodsList.filter((v) => {
return !pageData.bindOriginGoodsList.find((bindGoods) => bindGoods.id == v.id);
});
});
}
/**
* 获取分组详情
*/
async function getGroupBindGoods() {
let res = await getProdGroupDetail(option.id)
pageData.bindGoodsList = res.productList.filter(v=>{
return pageData.query.categoryId === '' ? true : (v.categoryId==pageData.query.categoryId)&&(v.name.includes(pageData.query.name))
})
let res = await getProdGroupDetail(option.id);
pageData.bindOriginGoodsList = res.productList;
pageData.bindGoodsList = res.productList.filter((v) => {
return pageData.query.categoryId === '' ? true : v.categoryId == pageData.query.categoryId && v.name.includes(pageData.query.name);
});
}
/**
@@ -191,7 +198,7 @@
* @param {Object} index
*/
function statesTableClick(index) {
pageData.stateCurrent = index
pageData.stateCurrent = index;
}
/**
@@ -199,7 +206,7 @@
* @param {Object} show
*/
function onCategoryShowChange(show) {
pageData.categoryShow = show
pageData.categoryShow = show;
}
/**
@@ -207,62 +214,59 @@
* @param {Object} category
*/
function setCategory(category) {
pageData.query.categoryId = category.id
pageData.categoryName = category.name
pageData.query.categoryId = category.id;
pageData.categoryName = category.name;
}
/**
* 绑定商品
*/
async function save() {
const res = await hasPermission('允许修改分组')
const res = await hasPermission('允许修改分组');
if (!res) {
return
return;
}
await updateProdGroup({
...option,
productIds: [...pageData.bindGoodsList.map(v => v.id), ...pageData.goodsList.filter(v => v.checked)
.map(v => v.id)
]
})
pageData.stateCurrent = 0
productIds: [...pageData.bindOriginGoodsList.map((v) => v.id), ...pageData.goodsList.filter((v) => v.checked).map((v) => v.id)]
});
pageData.stateCurrent = 0;
}
/**
* 删除商品
* @param {Object} index
*/
async function goodsDel(index) {
const res = await hasPermission('允许修改分组')
const res = await hasPermission('允许修改分组');
if (!res) {
return
return;
}
const goods = pageData.bindGoodsList[index]
const goods = pageData.bindOriginGoodsList[index];
uni.showModal({
title: '提示',
content: '是否确认将' + goods.name + '从该分组中移除',
success: function (res) {
if (res.confirm) {
pageData.bindGoodsList.splice(index, 1)
pageData.bindGoodsList.splice(index, 1);
pageData.bindOriginGoodsList.splice(index, 1);
updateProdGroup({
...option,
productIds: pageData.bindGoodsList.map(v => v.id)
})
} else if (res.cancel) {}
productIds: pageData.bindOriginGoodsList.map((v) => v.id)
});
} else if (res.cancel) {
}
}
});
}
function goodsClick(e) {
pageData.goodsList[e].checked = !pageData.goodsList[e].checked
pageData.goodsList[e].checked = !pageData.goodsList[e].checked;
}
</script>
<style scoped>
page {
background: #F9F9F9;
background: #f9f9f9;
}
</style>
<style lang="scss" scoped>
@@ -274,7 +278,7 @@
}
.safe-page {
background: #F9F9F9;
background: #f9f9f9;
}
.icon-guige {
@@ -376,7 +380,7 @@
content: '';
display: block;
position: absolute;
transition: all .2s ease-in-out;
transition: all 0.2s ease-in-out;
left: 10rpx;
right: 10rpx;
bottom: 0;
@@ -395,12 +399,8 @@
background-color: $my-main-color;
}
}
}
}
}
.fixed-b {

View File

@@ -15,7 +15,7 @@
<up-switch :activeValue="1" :inactiveValue="0" v-model="data.status" @change="isShowChange" :size="18"></up-switch>
</view>
</view>
<view class="u-m-t-24 u-p-l-54 ">
<view class="u-m-t-24">
<view class="u-flex-1 u-flex u-col-top">
<view class="color-666 no-wrap">分组名</view>
<view class="color-333 u-m-l-60">{{ data.name }}</view>
@@ -30,6 +30,9 @@
<text> - </text>
<text>{{ data.saleEndTime }}</text>
</view>
<view class="color-main u-m-l-32" v-else>
<text>00:00:00 - 23:59:59</text>
</view>
</view>
</view>
@@ -37,17 +40,15 @@
<view class="btn-default btn" @click="del">删除</view>
<view class="btn-primary btn u-m-l-38" @click="toEdit">编辑</view>
</view>
</view>
</template>
<script setup>
import { computed, ref, watchEffect } from 'vue';
import mySwitch from '@/components/my-components/my-switch.vue'
import mySwitch from '@/components/my-components/my-switch.vue';
import go from '@/commons/utils/go.js';
const emits = defineEmits(['changeClick','edit', 'editName','editSort', 'del', 'isShowChange'])
const emits = defineEmits(['changeClick', 'edit', 'editName', 'editSort', 'del', 'isShowChange']);
const props = defineProps({
index: {
@@ -58,52 +59,49 @@
default: () => {
return {
status: true
};
}
}
},
})
});
function isShowChange() {
emits('isShowChange', {
...props.data,
})
...props.data
});
}
let isSellNone = ref(true)
isSellNone.value = props.isSellNone
let isSellNone = ref(true);
isSellNone.value = props.isSellNone;
function isSellNoneChange() {
console.log(isSellNone.value);
console.log('isSellNoneChange');
}
let checked = ref(false)
let checked = ref(false);
function changeClick() {
emits('changeClick', props.index)
emits('changeClick', props.index);
}
function del() {
emits('del', props.index)
emits('del', props.index);
}
function editName() {
emits('editName', props.index)
emits('editName', props.index);
}
//携带参数type edit跳转到商品添加页面编辑与添加同一页面根据type值来判断
function editSort() {
emits('editSort', props.index)
emits('editSort', props.index);
}
function toEdit() {
emits('edit', props.index)
emits('edit', props.index);
}
</script>
<style lang="scss" scoped>
$imgSize: 126rpx;
$price-color: #F02C45;
$price-color: #f02c45;
.btn {
padding: 6rpx 28rpx;
@@ -168,7 +166,7 @@
font-size: 28rpx;
.skus {
background: #F9F9F9;
background: #f9f9f9;
border-radius: 14rpx 14rpx 14rpx 14rpx;
padding: 28rpx 42rpx;
@@ -184,7 +182,7 @@
.skd {
padding: 14rpx 40rpx;
background: #F0F2F5;
background: #f0f2f5;
border-radius: 4rpx;
position: relative;
color: #666;
@@ -205,8 +203,6 @@
color: #fff;
}
}
}
}
</style>

View File

@@ -7,17 +7,18 @@
@editName="popupShow($event, 'name', true)"
@editSort="popupShow($event, 'sort', true)"
@edit="actionsShow"
@isShowChange="isSHowChange" :index="index" :data="item"
:showDetail="pageData.showGoodsDetail"></my-category>
@isShowChange="isSHowChange"
:index="index"
:data="item"
:showDetail="pageData.showGoodsDetail"
></my-category>
</view>
<view class="u-m-t-44" v-if="pageData.list.length > 0">
<my-pagination :page="pageData.query.page" :size="pageData.query.size" :totalElements="pageData.totalElements"
@change="pageChange"></my-pagination>
<view style="height: 200rpx;"></view>
<my-pagination :page="pageData.query.page" :size="pageData.query.size" :totalElements="pageData.totalElements" @change="pageChange"></my-pagination>
<view style="height: 200rpx"></view>
</view>
</view>
<view class="fixed-b">
<my-button :height="80" shape="circle" font-weight="700" @tap="toAddGroup">新建分组</my-button>
</view>
@@ -27,40 +28,41 @@
<edit-name @save="updataGroup" :item="popup.selData" v-model:show="popup.name.show"></edit-name>
<edit-time @save="updataGroup" :item="popup.selData" v-model:show="popup.time.show"></edit-time>
<up-action-sheet :round="10" @select="actionSelect" @close="actionsHide" cancelText="取消" :actions="actions.list"
:show="actions.show"></up-action-sheet>
<up-action-sheet :round="10" @select="actionSelect" @close="actionsHide" cancelText="取消" :actions="actions.list" :show="actions.show"></up-action-sheet>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import { onShow } from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js';
import myCategory from './components/category.vue'
import myCategory from './components/category.vue';
import editSort from './components/edit-sort.vue';
import editName from './components/edit-name.vue';
import editTime from './components/edit-time.vue';
import { getProdGroupPage, addProdGroup, updateProdGroup, delProdGroup,editProdGroup } from '@/http/api/product.js'
import { getProdGroupPage, addProdGroup, updateProdGroup, delProdGroup, editProdGroup } from '@/http/api/product.js';
const pageData = reactive({
showGoodsDetail: false,
query: {
page: 1,
size: 10,
size: 10
},
totalElements: 0,
list: [],
selCategory: ''
})
});
/**
* 编辑列表
*/
const actions = reactive({
list: [{
list: [
{
name: '排序',
color: '#333',
fontSize: '16'
}, {
},
{
name: '管理商品',
color: '#333',
fontSize: '16'
@@ -71,9 +73,8 @@
fontSize: '16'
}
],
show: false,
})
show: false
});
/**
* 编辑数据
@@ -92,22 +93,22 @@
time: {
show: false
}
})
});
onShow(() => {
getList()
})
getList();
});
/**
* 获取分组数据
*/
async function getList() {
const res = await getProdGroupPage(pageData.query)
pageData.list = res.records
pageData.totalElements = res.totalRow
const res = await getProdGroupPage(pageData.query);
pageData.list = res.records;
pageData.totalElements = res.totalRow;
if (res.records.length <= 0 && res.totalPage > 1) {
pageData.query.page = res.totalPage
getList()
pageData.query.page = res.totalPage;
getList();
}
}
@@ -116,16 +117,16 @@
* @param {Object} e
*/
function actionsShow(e) {
popup.selData = pageData.list[e]
popup.selIndex = e
actions.show = true
popup.selData = pageData.list[e];
popup.selIndex = e;
actions.show = true;
}
/**
* 编辑列表隐藏
*/
function actionsHide() {
actions.show = false
actions.show = false;
}
/**
@@ -134,16 +135,19 @@
*/
function actionSelect(e) {
if (e.name == '排序') {
return popupShow(popup.selIndex, 'sort', true)
return popupShow(popup.selIndex, 'sort', true);
}
if (e.name == '管理商品') {
const {id,status,name,sort}=popup.selData
const { id, status, name, sort } = popup.selData;
return go.to('PAGES_GOODS_GROUP_EDIT_GOODS', {
id,status,name,sort
})
id,
status,
name,
sort
});
}
if (e.name == '售卖时间') {
return popupShow(popup.selIndex, 'time', true)
return popupShow(popup.selIndex, 'time', true);
}
}
@@ -154,9 +158,9 @@
* @param {Object} show
*/
function popupShow(e, key, show) {
popup[key].show = show
popup.selIndex = e
popup.selData = pageData.list[e]
popup[key].show = show;
popup.selIndex = e;
popup.selData = pageData.list[e];
}
/**
@@ -164,14 +168,14 @@
* @param {Object} e
*/
async function updataGroup(e) {
console.log(e)
const res = await editProdGroup(e)
console.log(e);
const res = await editProdGroup(e);
popup.sort.show = false;
popup.name.show = false;
popup.time.show = false;
pageData.list[popup.selIndex] = e
uni.$utils.showToast('更新成功')
getList()
pageData.list[popup.selIndex] = e;
uni.$utils.showToast('更新成功');
getList();
}
/**
@@ -181,20 +185,19 @@
async function isSHowChange(data) {
const res = await editProdGroup({
...data
})
uni.$utils.showToast('更新成功')
});
uni.$utils.showToast('更新成功');
}
const goodsSortModel = ref(null)
const goodsTypeModel = ref(null)
let sort = ref(0)
const goodsSortModel = ref(null);
const goodsTypeModel = ref(null);
let sort = ref(0);
const goodsTypeModelData = reactive({
selCategory: '',
title: '',
index: null,
useTypes: [{
useTypes: [
{
name: '堂食',
isOpen: true
},
@@ -211,7 +214,7 @@
isOpen: true
}
]
})
});
/**
* 新增分组
@@ -219,7 +222,7 @@
function toAddGroup() {
go.to('PAGES_GOODS_GROUP_EDIT', {
type: 'add'
})
});
}
/**
@@ -230,14 +233,14 @@
uni.showModal({
title: '提示',
content: '请确保此分组下没有任何商品确认删除?',
success: res => {
success: (res) => {
if (res.confirm) {
delProdGroup(pageData.list[index].id).then(res => {
uni.$utils.showToast('删除成功')
delProdGroup(pageData.list[index].id).then((res) => {
uni.$utils.showToast('删除成功');
setTimeout(() => {
getList()
},1500)
})
getList();
}, 1500);
});
}
},
fail: () => {},
@@ -245,17 +248,15 @@
});
}
// 页数改变事件
function pageChange(page) {
pageData.query.page = page
getList()
pageData.query.page = page;
getList();
}
</script>
<style scoped>
page {
background: #F9F9F9;
background: #f1f1f1;
}
</style>
<style lang="scss" scoped>
@@ -267,7 +268,7 @@
}
.safe-page {
background: #F9F9F9;
background: #f1f1f1;
}
.icon-guige {
@@ -360,12 +361,12 @@
font-size: 24rpx;
color: #666;
margin-right: 70rpx;
background: #F4F4F4;
background: #f4f4f4;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.item.active {
background: #E6F0FF;
background: #e6f0ff;
color: $my-main-color;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}

View File

@@ -14,7 +14,8 @@
"style": {
"navigationBarTitleText": "首页(自定义导航)",
"navigationStyle": "custom",
"enablePullDownRefresh": true
"enablePullDownRefresh": true,
"navigationBarTextStyle": "white"
}
},

View File

@@ -1,11 +1,9 @@
<template>
<view>
<view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
<view class="car border-top u-flex u-row-between u-col-bottom u-relative">
<view class="u-absolute goods bg-fff">
<view
class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
@@ -14,8 +12,7 @@
</view>
<scroll-view scroll-y="true" class="tranistion" :style="{ height: switchGoods ? '50vh' : 0 }">
<!-- 占位 -->
<view class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
style="opacity: 0;">
<view class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between" style="opacity: 0">
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
@@ -23,13 +20,12 @@
</view>
</view>
<!-- 占位 -->
<view class="color-333 item border-top u-flex u-row-center u-row-between"
v-for="(item,index) in data" :key="index">
<view class="color-333 item border-top u-flex u-row-center u-row-between" v-for="(item, index) in data" :key="index">
<view>
<view class="up-line-1">{{ item.name }}</view>
<view class="u-m-t-10 u-font-24 color-666 up-line-1">{{ item.specInfo || '' }}</view>
</view>
<view class="u-flex" style="flex-shrink: 0;">
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red u-m-r-32">{{ formatPrice(item.lowPrice * item.number) }}</view>
<view class="u-flex" @tap="updateNumber(false, index, item)">
<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="" />
@@ -38,43 +34,44 @@
{{ item.number.toFixed(2) }}
</view>
<view class="u-flex" @tap="updateNumber(true, index, item)">
<image src="/pagesCreateOrder/static/images/icon-add-black.svg" class="icon " :class="{'grayscale': item.type == 'package'&&item.groupType == 1}" mode="" />
</view>
<image
src="/pagesCreateOrder/static/images/icon-add-black.svg"
class="icon"
:class="{ grayscale: item.type == 'package' && item.groupType == 1 }"
mode=""
/>
</view>
</view>
<view style="margin: 50rpx auto 110rpx auto;" v-if="!data.length">
</view>
<view style="margin: 50rpx auto 110rpx auto" v-if="!data.length">
<my-empty text="暂未有添加商品"></my-empty>
</view>
<!-- 历史订单 -->
<view v-if="historyOrder.length > 0"
class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between">
<view class="color-333" style="font-weight: bold;">历史订单</view>
<view v-if="historyOrder.length > 0" class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between">
<view class="color-333" style="font-weight: bold">历史订单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear', true, 'allHistoryOrder', '清空历史订单')">清空历史订单</text>
</view>
</view>
<view v-for="(item, index) in historyOrder" :key="index">
<view v-if="historyOrder.length > 0"
class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view class="color-333" style="font-size: 30rpx;">{{item.placeNum}}次下单</view>
<view v-if="historyOrder.length > 0" class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view class="color-333" style="font-size: 30rpx">{{ item.placeNum }}次下单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear', true, item.placeNum, '清空第' + item.placeNum + '次下单历史订单')">清空</text>
</view>
</view>
<view class="color-333 item border-top u-flex u-row-center u-row-between"
v-for="(v,i) in item.info" :key="i">
<view style="display: flex;align-items: center;">
<view class="up-line-1" style="margin-right: 10rpx;">{{v.productName}}</view>
<uni-tag v-if="v.returnNum>0" :text="'退菜X'+v.returnNum"
custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;">
</uni-tag>
<view class="color-333 item border-top u-flex u-row-center u-row-between" v-for="(v, i) in item.info" :key="i">
<view style="display: flex; align-items: center">
<view class="up-line-1" style="margin-right: 10rpx">{{ v.productName }}</view>
<uni-tag
v-if="v.returnNum > 0"
:text="'退菜X' + v.returnNum"
custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;"
></uni-tag>
</view>
<view class="u-flex" style="flex-shrink: 0;">
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red u-m-r-32">{{ formatPrice(v.price * (v.num - v.returnNum)) }}</view>
<view class="u-m-l-30 u-m-r-30 color-333">X{{ v.num.toFixed(2) }}</view>
</view>
@@ -93,33 +90,40 @@
<my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
<text class="u-font-32 font-bold">{{ table.type == 'add' ? '确认加菜' : '去下单' }}</text>
</my-button>
</view>
<up-modal title="提示" :content="modal.title" :show="modal.clear" showCancelButton closeOnClickOverlay
@confirm="confirmModelConfirm" @cancel="setModalShow('clear',false)" @close="setModalShow('clear',false)"
width="300px"></up-modal>
<up-modal
title="提示"
:content="modal.title"
:show="modal.clear"
showCancelButton
closeOnClickOverlay
@confirm="confirmModelConfirm"
@cancel="setModalShow('clear', false)"
@close="setModalShow('clear', false)"
width="300px"
></up-modal>
</view>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import myButton from '@/components/my-components/my-button.vue'
import myButton from '@/components/my-components/my-button.vue';
import go from '@/commons/utils/go.js';
import infoBox from '@/commons/utils/infoBox.js';
import { formatPrice } from '@/commons/utils/format.js';
import { $trturnPayAfter } from '../util.js'
const props = defineProps({
data: {
type: Array,
default: () => {
return []
return [];
}
},
historyOrder: {
type: Array,
default: () => {
return []
return [];
}
},
isCreateOrderToDetail: {
@@ -131,7 +135,7 @@
default: () => {
return {
id: ''
}
};
}
},
table: {
@@ -139,53 +143,56 @@
default: () => {
return {
tableId: ''
};
}
}
}
})
});
let allHistoryOrder = ref([]);
const allPrice = computed(() => {
let cartPrice = props.data.reduce((prve, cur) => {
let price = Math.floor((cur.lowPrice * cur.number)*100)/100
return prve + price
}, 0)
let price = Math.floor(cur.lowPrice * cur.number * 100) / 100;
return prve + price;
}, 0);
let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
let price = Math.floor((cur.price * (cur.num-cur.returnNum))*100)/100
return prve + price
}, 0)
let price = Math.floor(cur.price * (cur.num - cur.returnNum) * 100) / 100;
return prve + price;
}, 0);
return (cartPrice + historyOrderPrice).toFixed(2)
})
return (cartPrice + historyOrderPrice).toFixed(2);
});
const goodsNumber = computed(() => {
let result = 0
let result = 0;
let cart = props.data.reduce((prve, cur) => {
return prve + cur.number
}, 0)
return prve + cur.number;
}, 0);
let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
return prve + cur.num
}, 0)
result = cart + historyOrderNum
result = result > 0 ? result.toFixed(2) : 0
return result >= 99 ? 99 : parseFloat(result)
})
watch(() => props.historyOrder, (newval) => {
// let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
// return prve + cur.num;
// }, 0);
result = cart;
result = result > 0 ? result.toFixed(2) : 0;
return result >= 99 ? 99 : parseFloat(result);
});
watch(
() => props.historyOrder,
(newval) => {
allHistoryOrder.value = [];
newval.forEach(item=>{
allHistoryOrder.value = [...allHistoryOrder.value,...item.info]
})
})
newval.forEach((item) => {
allHistoryOrder.value = [...allHistoryOrder.value, ...item.info];
});
}
);
const modal = reactive({
key: '',
title: '',
type: '',
clear: false
})
});
function confirmModelConfirm() {
if (modal.key == 'clear') {
clear()
clear();
}
}
@@ -193,49 +200,56 @@
// if (key == 'clear' && show && props.data.length <= 0) {
// return infoBox.showToast('购物车是空的!')
// }
if( title ){ modal.title = title }
if( type ){ modal.type = type }
modal.key = key
modal[key] = show
if (title) {
modal.title = title;
}
if (type) {
modal.type = type;
}
modal.key = key;
modal[key] = show;
console.log(modal);
}
const edmits = defineEmits(['clear', 'updateNumber'])
const edmits = defineEmits(['clear', 'updateNumber']);
// mask
let switchGoods = ref(false)
let switchGoods = ref(false);
function hideGoods() {
switchGoods.value = false
switchGoods.value = false;
}
function showGoods() {
switchGoods.value = true
switchGoods.value = true;
}
function toggleGoods() {
switchGoods.value = !switchGoods.value
switchGoods.value = !switchGoods.value;
}
function toConfimOrder() {
if (props.data.length <= 0 && allHistoryOrder.value.length <= 0) {
return infoBox.showToast('还没有选择商品')
return infoBox.showToast('还没有选择商品');
}
const { name, status, type } = props.table
const { name, status, type } = props.table;
if (props.data.length <= 0 && allHistoryOrder.value.length > 0) {
go.to('PAGES_ORDER_PAY', {
orderId: props.orderInfo.id,
})
return
orderId: props.orderInfo.id
});
return;
}
if (props.table.id == '' && props.table.tableCode == '') {
go.to('PAGES_CONFIRM_ORDER', {
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
})
return
});
return;
}
let shopInfo = uni.getStorageSync('shopInfo');
console.log($trturnPayAfter(shopInfo));
go.to('PAGES_CONFIRM_ORDER', {
type: type,
tableId: props.table.id,
@@ -243,33 +257,30 @@
name: name,
status: status,
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
})
});
}
function updateNumber(isAdd, index, goods) {
const step = isAdd ? 1 : -1
const newval = goods.number + step
const step = isAdd ? 1 : -1;
const newval = goods.number + step;
if (goods.type == 'package' && goods.groupType == 1 && isAdd) {
return
return;
}
const par = {
num: newval,
index: index,
goods: goods
}
edmits('updateNumber', par)
};
edmits('updateNumber', par);
}
function clear() {
if (modal.type == 'cart') {
hideGoods()
hideGoods();
}
setModalShow('clear', false)
edmits('clear',modal.type)
setModalShow('clear', false);
edmits('clear', modal.type);
}
</script>
<style lang="scss" scoped>
@@ -293,24 +304,22 @@
.icon {
width: 40rpx;
height: 40rpx
height: 40rpx;
}
.grayscale {
filter: opacity(60%)
filter: opacity(60%);
}
.mask {
@include fixedAll;
background: rgba(51, 51, 51, 0.5);
}
.goods {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
transition: all .2s ease-in-out;
transition: all 0.2s ease-in-out;
overflow: hidden;
.item {
@@ -319,15 +328,15 @@
}
.border-bottom {
border-bottom: 1px solid #E5E5E5;
border-bottom: 1px solid #e5e5e5;
}
.border-top {
border-top: 1px solid #E5E5E5;
border-top: 1px solid #e5e5e5;
}
.red {
color: #EB4F4F;
color: #eb4f4f;
}
.car {
@@ -357,19 +366,19 @@
top: 0;
width: 28rpx;
height: 28rpx;
background: #EB4F4F;
background: #eb4f4f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
}
}
.price {
color: #EB4F4F;
color: #eb4f4f;
margin-left: calc(38rpx + $car-size);
transform: translateY(calc($car-top / 2));
}

File diff suppressed because it is too large Load Diff

View File

@@ -8,7 +8,8 @@ export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://tapi.cashier.sxczgkj.cn/api', // 目标服务器地址
target: 'https://cashier.sxczgkj.com', // 目标服务器地址
// target: 'http://192.168.1.31/\', // 目标服务器地址
changeOrigin: true, // 是否更改请求源
rewrite: path => path.replace(/^\/api/, '')
}