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

完成购物车所有功能

This commit is contained in:
gyq 2024-03-01 16:15:22 +08:00
parent d2689b226c
commit e925948dcd
6 changed files with 417 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/api/product.js
View File

@ -78,3 +78,56 @@ export function createCode(params) {
});
}
/**
* 全部打包
* @param {*} params
* @returns
*/
export function packall(data) {
return request({
method: "post",
url: "/order/packall",
data
});
}
/**
* 删除购物车
* @param {*} params
* @returns
*/
export function delCart(params) {
return request({
method: "get",
url: "/order/delCart",
params
});
}
/**
* 挂单/j激活购物车
* @param {*} params
* @returns
*/
export function cartStatus(data) {
return request({
method: "post",
url: "/order/cartStatus",
data
});
}
/**
* 获取挂起购物车列表
* @param {*} params
* @returns
*/
export function getCartList(params) {
return request({
method: "get",
url: "/order/getCartList",
params
});
}

44
src/components/skuModal.vue
View File

@ -40,7 +40,7 @@ import { queryProductSku } from '@/api/product'
const store = useUser();
const emit = defineEmits(['success'])
const type = ref('shop')
const dialogVisible = ref(false)
const goods = ref({})
@ -54,7 +54,16 @@ const loading = ref(false)
// 确认选择规格
function submitSku() {
dialogVisible.value = false
emit('success', goodsInfo.value)
switch (type.value) {
case 'shop':
emit('success', goodsInfo.value)
break;
case 'cart':
emit('success', goods.value)
break;
default:
break;
}
}
// 选择规格
@ -99,10 +108,13 @@ async function queryProductSkuAjax() {
loading.value = true
const res = await queryProductSku({
shopId: store.userInfo.shopId,
productId: goods.value.id,
productId: type.value == 'shop' ? goods.value.id : goods.value.productId,
spec_tag: selectedSkuTag.value
})
goodsInfo.value = res
if (type.value == 'cart') {
goods.value.skuId = res.id
}
setTimeout(() => {
loading.value = false
}, 100)
@ -113,21 +125,37 @@ async function queryProductSkuAjax() {
}
// 显示规格
function show(item) {
function show(item, t = 'shop') {
goodsInfo.value = {}
goods.value = {}
selectedSkuNum.value = 0
dialogVisible.value = true
goods.value = ""
goods.value = item
type.value = t
if (typeof goods.value.tbProductSpec.specList == 'string') {
goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
goods.value.tbProductSpec.specList.map(item => {
let arr = []
item.value.map(val => {
arr.push({
active: false,
name: val
})
switch (type.value) {
case 'shop':
arr.push({
active: false,
name: val
})
break;
case 'cart':
// 如果从购物车选择规格需要做选中效果
arr.push({
active: goods.value.skuName.includes(val),
name: val
})
break;
default:
break;
}
})
item.value = arr
})

51
src/views/home/components/cartOperation.vue
View File

@ -13,31 +13,31 @@
<CloseBold />
</el-icon>
</div>
<div class="item">
<div class="item" :class="{ disabled: !props.item.tbProductSpec }" @click="showSkuModal">
<el-icon class="icon">
<Filter />
</el-icon>
<el-text class="t">规格</el-text>
</div>
<div class="item">
<div class="item" :class="{ disabled: props.item.isGift == 'true' }" @click="giftPackHandle('isGift')">
<el-icon class="icon">
<ShoppingBag />
</el-icon>
<el-text class="t">赠送</el-text>
</div>
<div class="item">
<div class="item" :class="{ disabled: props.item.isPack == 'true' }" @click="giftPackHandle('isPack')">
<el-icon class="icon">
<Box />
</el-icon>
<el-text class="t">打包</el-text>
</div>
<div class="item">
<div class="item" @click="emit('delete', props.item)">
<el-icon class="icon">
<Delete />
</el-icon>
<el-text class="t">删除</el-text>
</div>
<div class="item">
<div class="item" @click="emit('pending', props.item)">
<el-icon class="icon">
<Sell />
</el-icon>
@ -51,25 +51,40 @@
</div>
</div>
<takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
<!-- 购物车选择规格 -->
<skuModal ref="skuModalRef" @success="skuConfirm" />
</template>
<script setup>
import { ref } from 'vue'
import takeFoodCode from '@/components/takeFoodCode.vue'
import skuModal from '@/components/skuModal.vue'
const props = defineProps({
item: {
type: Object,
default: {}
}
})
const emit = defineEmits(['confirm'])
const emit = defineEmits(['confirm', 'delete', 'pending'])
const takeFoodCodeRef = ref(null)
const skuModalRef = ref([])
// 赠送打包操作
function giftPackHandle(key) {
if (props.item[key] == 'true') {
props.item[key] = false
} else {
props.item[key] = true
}
emit('confirm', props.item)
}
// 加减修改数量
function numberChange(t) {
switch (t) {
case 'sub':
if (props.item.number <= 1) return
props.item.number--
break;
case 'add':
@ -86,6 +101,19 @@ function updateNumber(num) {
props.item.number = num
emit('confirm', props.item)
}
// 显示规格
function showSkuModal() {
if (props.item.tbProductSpec && props.item.tbProductSpec.specList) {
skuModalRef.value.show(props.item, 'cart')
}
}
// 修改规格
function skuConfirm(e) {
console.log(e)
emit('confirm', e)
}
</script>
<style scoped lang="scss">
@ -104,6 +132,17 @@ function updateNumber(num) {
background-color: #efefef;
border-radius: 6px;
&.disabled {
.t {
color: #999;
}
.icon {
color: #999;
}
}
&.number {
background-color: transparent;
height: auto;

24
src/views/home/components/goods.vue
View File

@ -35,7 +35,7 @@
<div class="shop_list" :class="{ img: shopListType == 'img' }">
<div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
<div class="item">
<div class="dot">2</div>
<div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
<div class="cover" v-if="shopListType == 'img'">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;" fit="cover"></el-image>
</div>
@ -63,6 +63,14 @@ import skuModal from '@/components/skuModal.vue'
import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
import { useUser } from "@/store/user.js"
const store = useUser()
const props = defineProps({
masterId: {
type: String,
default: ''
}
})
const emit = defineEmits(['success'])
const skuModalRef = ref(null)
@ -164,12 +172,14 @@ async function queryCategoryAjax() {
// 查询商品信息
async function productqueryCommodityInfoAjax() {
try {
console.log(props.masterId)
const res = await productqueryCommodityInfo({
shopId: store.userInfo.shopId,
categoryId: categorys.value[categorysActive.value].id,
commdityName: commdityName.value,
page: 1,
pageSize: 1000
pageSize: 1000,
masterId: props.masterId
})
originalGoods.value = res
goodsList.value = res
@ -178,9 +188,17 @@ async function productqueryCommodityInfoAjax() {
}
}
// 更新商品数据
function updateData() {
productqueryCommodityInfoAjax()
}
defineExpose({
updateData
})
onMounted(async () => {
await queryCategoryAjax()
await productqueryCommodityInfoAjax()
})
</script>

110
src/views/home/components/pendingCartModal.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<el-dialog title="恢复挂起的订单" width="800" v-model="dialogVisible">
<div class="pending_carts">
<div class="item" v-for="(item, index) in cartList" :key="index" @click="select(item)">
<div class="time">
<el-icon class="icon">
<Clock />
</el-icon>
<span>{{ dayjs(item.pendingAt).format('HH:mm') }}</span>
</div>
<div class="info">
<span class="name">{{ item.productName }}</span>
<span class="p">￥{{ item.totalAmount }}</span>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'
import { getCartList } from "@/api/product";
import { useUser } from "@/store/user"
const emit = defineEmits(['select'])
const store = useUser()
const dialogVisible = ref(false)
const loading = ref(false)
const cartList = ref([])
// 恢复挂单
function select(item) {
emit('select', item)
dialogVisible.value = false
}
function show() {
dialogVisible.value = true
getCartListAjax()
}
// 获取挂起购物车列表
async function getCartListAjax() {
try {
loading.value = true
const res = await getCartList({
shopId: store.userInfo.shopId
})
cartList.value = res
loading.value = false
} catch (error) {
console.log(error)
}
}
defineExpose({
show
})
</script>
<style scoped lang="scss">
.pending_carts {
height: 50vh;
overflow-y: auto;
.item {
display: flex;
align-items: center;
background-color: #efefef;
border-radius: 6px;
overflow: hidden;
&:not(:first-child) {
margin-top: 20px;
}
.time {
padding: 20px 20px;
display: flex;
align-items: center;
background-color: var(--el-color-warning);
color: #fff;
.icon {
font-size: calc(var(--el-font-size-base) + 6px);
}
span {
font-size: var(--el-font-size-base);
margin-left: 4px;
}
}
.info {
flex: 1;
padding: 0 20px;
display: flex;
justify-content: space-between;
font-size: var(--el-font-size-base);
.p {
color: var(--el-color-warning);
}
}
}
}
</style>

183
src/views/home/index.vue
View File

@ -2,14 +2,14 @@
<div class="content">
<div class="cart_wrap card">
<div class="menu_top">
<div class="menu">
<div class="menu" @click="pendingCartModalRef.show()">
<el-icon class="icon">
<TakeawayBox />
</el-icon>
<el-text class="t">(1)</el-text>
<el-text class="t">({{ pendingCartNum }})</el-text>
</div>
<div class="number" @click="takeFoodCodeRef.show()">
<el-text class="t">{{ foodCode }}</el-text>
<el-text class="t">{{ masterId }}</el-text>
</div>
<div class="select_user" @click="membershow = true">
<el-icon class="icon">
@ -22,39 +22,53 @@
</div>
</div>
<div class="shop_operation">
<div class="shop_list">
<div class="shop_list" v-loading="cartLoading">
<div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
@click="selectCartItemHandle(item)">
<div class="name_wrap">
<span>{{ item.name }}</span>
<span>￥{{ item.salePrice }}</span>
</div>
<div class="sku_list">
<div class="tag">默认1份</div>
<div class="tag">热</div>
<div class="tag">半糖</div>
<div class="sku_list" v-if="item.skuName">
<div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
</div>
<div class="num">
<el-text>X{{ item.number }}</el-text>
<div class="left">
<div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
<el-icon class="icon">
<ShoppingBag />
</el-icon>
</div>
<div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
<el-icon class="icon" style="color: var(--primary-color);">
<Box />
</el-icon>
</div>
</div>
<el-text class="t">X{{ item.number }}</el-text>
</div>
</div>
<div class="empty">
<el-empty description="请选择商品" v-if="!cartList.length" />
</div>
</div>
<!-- 购物车操作栏 -->
<cartOperation :item="selectCartItem" @confirm="addCart" />
<cartOperation :item="selectCartItem" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
@pending="pendingCart" />
</div>
<div class="footer">
<div class="top">
<div class="left" @click="allSelected = !allSelected">
<div class="left" @click="allSelectedHandle">
<div class="selected">
<div class="selected_round" v-if="!allSelected"></div>
<el-icon class="icon" v-else>
<CircleCheckFilled />
</el-icon>
</div>
<el-text class="t">打包(￥0.00)</el-text>
<el-text class="t">打包(￥{{ cartInfo.packAmount || 0 }})</el-text>
</div>
<div class="num-wrap">
<el-text>共6种商品，7件</el-text>
<el-text>共{{ cartInfo.productNum || 0 }}种商品，{{ cartInfo.productSum || 0 }}件</el-text>
</div>
</div>
<div class="btm">
@ -62,7 +76,7 @@
<div class="button">
<el-button type="primary" style="width: 100%;">
<div class="js">
<el-text class="t">￥3.09</el-text>
<el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
<el-text class="t" style="margin-left: 250px;">结算</el-text>
</div>
</el-button>
@ -72,19 +86,21 @@
</div>
<div class="shop_manage card">
<!-- 分类/商品列表 -->
<goods @success="addCart" />
<goods ref="goodsRef" :masterId="masterId" @success="addCart" />
</div>
</div>
<!-- 备注 -->
<remarkModal ref="remarkRef" />
<!-- 修改取餐号 -->
<takeFoodCode />
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
<member></member>
</el-drawer>
<takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
<!-- 结算订单 -->
<settleAccount />
<!-- 挂起订单 -->
<pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
</template>
<script setup>
@ -94,8 +110,9 @@ import remarkModal from '@/components/remarkModal.vue'
import takeFoodCode from '@/components/takeFoodCode.vue'
import cartOperation from '@/views/home/components/cartOperation.vue'
import settleAccount from '@/components/settleAccount.vue'
import pendingCartModal from '@/views/home/components/pendingCartModal.vue'
import { createCart, queryCart, createCode } from '@/api/product'
import { createCart, queryCart, createCode, packall, delCart, cartStatus } from '@/api/product'
// 商品列表
import goods from '@/views/home/components/goods.vue'
@ -104,17 +121,87 @@ const membershow = ref(false)
const store = useUser()
const remarkRef = ref(null)
const takeFoodCodeRef = ref(null)
const goodsRef = ref(null)
const pendingCartModalRef = ref(null)
const allSelected = ref(false)
const cartLoading = ref(false)
const cartList = ref([])
const cartInfo = ref({})
// 取餐码
const foodCode = ref('#006')
const masterId = ref('')
// 挂单量
const pendingCartNum = ref(0)
// 恢复挂单
async function pendingCartHandle(item) {
masterId.value = item.masterId
await pendingCart(item, false)
await queryCartAjax()
}
// 挂单
async function pendingCart(params, status = true) {
try {
cartLoading.value = true
await cartStatus({
shopId: store.userInfo.shopId,
masterId: params.masterId,
status: status
})
if (status) createCodeAjax()
} catch (error) {
console.log(error)
}
}
// 删除购物车
async function delCartHandle(params) {
try {
cartLoading.value = true
await delCart({
masterId: params.masterId,
cartId: params.id
})
queryCartAjax()
} catch (error) {
console.log(error)
}
}
// 赠送打包操作
function giftPackHandle(key, item) {
item[key] = false
addCart(item, 'edit')
}
// 打包全选
const allSelectedHandle = async () => {
if (allSelected.value) {
allSelected.value = false
cartList.value.map(item => {
item.isPack = false
})
} else {
allSelected.value = true
cartList.value.map(item => {
item.isPack = true
})
}
await packall({
shopId: store.userInfo.shopId,
status: allSelected.value,
masterId: masterId.value
})
queryCartAjax()
}
// 确认取餐号
function takeFoodCodeSuccess(code) {
console.log('取餐号===', code)
masterId.value = `#${code}`
queryCartAjax()
}
const selectCartItem = ref({})
@ -128,16 +215,22 @@ function selectCartItemHandle(item) {
}
// 选择完规格开始添加购物车
async function addCart(params) {
async function addCart(params, type = 'add') {
try {
cartLoading.value = true
const res = await createCart({
productId: params.productId,
maskerId: foodCode.value,
masterId: masterId.value,
shopId: store.userInfo.shopId,
skuId: params.id,
number: params.number || 1
skuId: type == 'add' ? params.id : params.skuId,
number: params.number || 1,
isPack: params.isPack || false,
isGift: params.isGift || false,
cartId: type == 'add' ? '' : params.id
})
foodCode.value = res
masterId.value = res
goodsRef.value.updateData()
queryCartAjax(type)
} catch (error) {
console.log(error)
}
@ -146,10 +239,12 @@ async function addCart(params) {
// 获取购物车商品
async function queryCartAjax() {
try {
cartLoading.value = true
const res = await queryCart({
masterId: foodCode.value,
masterId: masterId.value,
shopId: store.userInfo.shopId
})
selectCartItem.value = {}
cartList.value = res.list.map((item, index) => {
if (index == 0) {
item.active = true
@ -159,7 +254,12 @@ async function queryCartAjax() {
}
return item
})
console.log(cartList.value)
cartInfo.value = res.amount
pendingCartNum.value = res.num
goodsRef.value.updateData()
setTimeout(() => {
cartLoading.value = false
}, 100)
} catch (error) {
console.log('获取购物车商品', error)
}
@ -169,7 +269,7 @@ async function queryCartAjax() {
async function createCodeAjax() {
try {
const res = await createCode({ shopId: store.userInfo.shopId })
foodCode.value = res
masterId.value = res.code
queryCartAjax()
} catch (error) {
console.log(error)
@ -177,8 +277,7 @@ async function createCodeAjax() {
}
onMounted(() => {
// createCodeAjax()
queryCartAjax()
createCodeAjax()
})
</script>
@ -293,9 +392,31 @@ onMounted(() => {
}
.num {
padding-top: 10px;
padding-top: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.icon_item {
$size: 40px;
width: $size;
height: $size;
border-radius: 6px;
background-color: #e2e2e2;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
}
.t {
font-size: var(--el-font-size-base);
}
}
}
}