This commit is contained in:
parent
80a9e5b039
commit
2dddedd3a4
|
|
@ -1,4 +1,4 @@
|
|||
VITE_NOW_TYPE = 'build'
|
||||
|
||||
VITE_PUSH_URL ='wss://multi-store.lihaink.cn/pull'
|
||||
VITE_PUSH_URL = 'wss://multi-store.lihaink.cn/pull'
|
||||
VITE_BASE_URL = 'https://multi-store.lihaink.cn'
|
||||
|
|
@ -145,6 +145,7 @@ const changeActive = (index = -1, type = 1) => {
|
|||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
margin-right: 1rem;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import price from "./price.vue";
|
|||
import mitt from "@/utils/mitt.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import userList from "@/components/userList.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const list = ref([]);
|
||||
const allPrice = ref(0); //商品总价
|
||||
|
|
@ -15,367 +16,380 @@ const userStore = useUserStore();
|
|||
const userListRef = ref(null);
|
||||
|
||||
const clearAll = () => {
|
||||
let id = [];
|
||||
list.value.map((item) => {
|
||||
id.push(item.id);
|
||||
});
|
||||
if (id.length == 0) return;
|
||||
deleteShop(id);
|
||||
let id = [];
|
||||
list.value.map((item) => {
|
||||
id.push(item.id);
|
||||
});
|
||||
if (id.length == 0) return;
|
||||
deleteShop(id);
|
||||
};
|
||||
|
||||
const deleteOne = (id) => {
|
||||
list.value = list.value.filter((item) => item.id != id);
|
||||
deleteShop([id]);
|
||||
list.value = list.value.filter((item) => item.id != id);
|
||||
deleteShop([id]);
|
||||
};
|
||||
|
||||
const deleteShop = (arr) => {
|
||||
cartDeleteApi({
|
||||
id: arr,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
getList();
|
||||
});
|
||||
cartDeleteApi({
|
||||
id: arr,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
getList();
|
||||
});
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
allPrice.value = 0;
|
||||
costPrice.value = 0;
|
||||
discounts.value = 0;
|
||||
cartListApi().then((res) => {
|
||||
if (res.data?.lists?.length > 0) {
|
||||
list.value = res.data.lists;
|
||||
allPrice.value = res.data?.lists.reduce((previous, current) => {
|
||||
return previous + Number(current.total_price);
|
||||
}, 0)
|
||||
costPrice.value = allPrice.value;
|
||||
} else list.value = [];
|
||||
});
|
||||
allPrice.value = 0;
|
||||
costPrice.value = 0;
|
||||
discounts.value = 0;
|
||||
cartListApi().then((res) => {
|
||||
if (res.data?.lists?.length > 0) {
|
||||
list.value = res.data.lists;
|
||||
allPrice.value = res.data?.lists.reduce((previous, current) => {
|
||||
return previous + Number(current.total_price);
|
||||
}, 0)
|
||||
costPrice.value = allPrice.value;
|
||||
} else list.value = [];
|
||||
});
|
||||
};
|
||||
getList();
|
||||
|
||||
const emit = defineEmits(["goPay", "editAttr"]);
|
||||
|
||||
const goPay = () => {
|
||||
emit("goPay");
|
||||
emit("goPay");
|
||||
};
|
||||
|
||||
const changeCartNum = (val, old) => {
|
||||
cartCreateApi({
|
||||
product_id: val.product_id,
|
||||
cart_num: val.cart_num
|
||||
}).then((res) => {
|
||||
allPrice.value = 0;
|
||||
list.value.forEach((item) => {
|
||||
allPrice.value += item.price*item.cart_num;
|
||||
cartCreateApi({
|
||||
product_id: val.product_id,
|
||||
cart_num: val.cart_num
|
||||
}).then((res) => {
|
||||
allPrice.value = 0;
|
||||
list.value.forEach((item) => {
|
||||
allPrice.value += item.price * item.cart_num;
|
||||
});
|
||||
costPrice.value = allPrice.value;
|
||||
}).catch((err)=>{
|
||||
val.cart_num = err?.msg?.match(/\d+\.\d+/) || 1;
|
||||
});
|
||||
costPrice.value = allPrice.value;
|
||||
});
|
||||
};
|
||||
|
||||
const editAttr = (data) => {
|
||||
emit("editPupop", data);
|
||||
emit("editPupop", data);
|
||||
};
|
||||
|
||||
|
||||
const changeAllPrice = (price) => {
|
||||
discounts.value = costPrice.value - price;
|
||||
allPrice.value = +price;
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
showPrice(false);
|
||||
}, 150);
|
||||
});
|
||||
discounts.value = costPrice.value - price;
|
||||
allPrice.value = +price;
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
showPrice(false);
|
||||
}, 150);
|
||||
});
|
||||
};
|
||||
|
||||
const nowPrice = ref(0);
|
||||
const priceRef = ref(null);
|
||||
const showPrice = (type = true) => {
|
||||
priceRef.value.show(type, costPrice.value);
|
||||
priceRef.value.show(type, costPrice.value);
|
||||
};
|
||||
|
||||
const userInfo = ref({
|
||||
uid: ''
|
||||
})
|
||||
const setUser = (row)=>{
|
||||
const setUser = (row) => {
|
||||
userInfo.value = row;
|
||||
userInfo.value.uid = row.id;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getList,
|
||||
list,
|
||||
discounts,
|
||||
allPrice,
|
||||
userInfo
|
||||
getList,
|
||||
list,
|
||||
discounts,
|
||||
allPrice,
|
||||
userInfo
|
||||
});
|
||||
|
||||
// 键盘事件
|
||||
const ainsert = () => {
|
||||
if (priceRef.value.dialogVisible) priceRef.value.dialogVisible = false;
|
||||
else showPrice();
|
||||
if (priceRef.value.dialogVisible) priceRef.value.dialogVisible = false;
|
||||
else showPrice();
|
||||
};
|
||||
const adelete = () => {
|
||||
if (list.value.length > 0) clearAll();
|
||||
if (list.value.length > 0) clearAll();
|
||||
};
|
||||
onMounted(() => {
|
||||
mitt.on("insert", ainsert);
|
||||
mitt.on("delete", adelete);
|
||||
mitt.on("insert", ainsert);
|
||||
mitt.on("delete", adelete);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
mitt.off("insert", ainsert);
|
||||
mitt.off("delete", adelete);
|
||||
mitt.off("insert", ainsert);
|
||||
mitt.off("delete", adelete);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="user-nav">
|
||||
<div class="user-info">
|
||||
<el-avatar class="avatar" :src="userInfo.avatar" />
|
||||
<div class="info" v-if="userInfo.uid">
|
||||
<div class="flex-bewteen">
|
||||
<div>手机号: {{ userInfo.mobile || userInfo.account }}</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon><ArrowRight /></el-icon></el-button>
|
||||
<div class="my-order">
|
||||
<div class="user-nav">
|
||||
<div class="user-info">
|
||||
<el-avatar class="avatar" :src="userInfo.avatar" />
|
||||
<div class="info" v-if="userInfo.uid">
|
||||
<div class="flex-bewteen">
|
||||
<div>手机号: {{ userInfo.mobile || userInfo.account }}</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon>
|
||||
<ArrowRight />
|
||||
</el-icon></el-button>
|
||||
</div>
|
||||
<div class="flex-bewteen" style="align-items: flex-end;">
|
||||
<div>采购款: {{ userInfo.purchase_funds }}</div>
|
||||
<el-button link @click="userInfo.uid = ''">重置<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-bewteen" style="align-items: flex-end;">
|
||||
<div>采购款: {{ userInfo.purchase_funds }}</div>
|
||||
<el-button link @click="userInfo.uid=''">重置<el-icon><RefreshLeft /></el-icon></el-button>
|
||||
<div class="info" v-else style="align-items: center;display:flex;justify-content: space-between;">
|
||||
<div class="flex-bewteen" style="width:100%;">
|
||||
<div style="font-size: 1.2rem;">游客</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon>
|
||||
<ArrowRight />
|
||||
</el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info" v-else style="align-items: center;display:flex;justify-content: space-between;">
|
||||
<div class="flex-bewteen" style="width:100%;">
|
||||
<div style="font-size: 1.2rem;">游客</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon><ArrowRight /></el-icon></el-button>
|
||||
<userList ref="userListRef" @setUser="setUser" />
|
||||
</div>
|
||||
<div class="header-nav">
|
||||
<div class="nav-item">
|
||||
已选购 <span>{{ list.length }}</span> 款
|
||||
</div>
|
||||
<div class="nav-item-clear" @click="clearAll">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>清空 (Delete)
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-list">
|
||||
<el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
|
||||
<div v-else class="order-item" v-for="(item, index) in list" :key="index">
|
||||
<el-image loading="lazy" class="order-item-img" :src="item.image"></el-image>
|
||||
<div class="order-item-info">
|
||||
<div class="order-item-title">
|
||||
<div class="title">{{ item.store_name }}</div>
|
||||
<div class="delete" @click="deleteOne(item.id)">删除</div>
|
||||
</div>
|
||||
<div class="order-item-sku">
|
||||
<span>{{ item.unit_name }}</span>
|
||||
</div>
|
||||
<div class="order-item-price">
|
||||
<div>
|
||||
¥<span>{{ item.price }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input-number v-model="item.cart_num" :precision="2" :min="+item.batch > 0 ? +item.batch : 1" :step="1"
|
||||
@change="changeCartNum(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<userList ref="userListRef" @setUser="setUser" />
|
||||
</div>
|
||||
<div class="header-nav">
|
||||
<div class="nav-item">
|
||||
已选购 <span>{{ list.length }}</span> 款
|
||||
</div>
|
||||
<div class="nav-item-clear" @click="clearAll">
|
||||
<el-icon><Delete /></el-icon>清空 (Delete)
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-list">
|
||||
<el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
|
||||
<div v-else class="order-item" v-for="(item, index) in list" :key="index">
|
||||
<el-image
|
||||
loading="lazy"
|
||||
class="order-item-img"
|
||||
:src="item.image"
|
||||
></el-image>
|
||||
<div class="order-item-info">
|
||||
<div class="order-item-title">
|
||||
<div class="title">{{ item.store_name }}</div>
|
||||
<div class="delete" @click="deleteOne(item.id)">删除</div>
|
||||
</div>
|
||||
<div class="order-item-sku">
|
||||
<span>{{ item.unit_name }}</span>
|
||||
</div>
|
||||
<div class="order-item-price">
|
||||
<div>
|
||||
¥<span>{{ item.price }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="item.cart_num"
|
||||
step-strictly
|
||||
:min="1"
|
||||
:step="1"
|
||||
@change="changeCartNum(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-footer">
|
||||
<div class="order-total">
|
||||
<div class="price">
|
||||
<div class="total-item">
|
||||
合计:
|
||||
<span
|
||||
>¥<span style="font-size: 1.4rem">{{
|
||||
allPrice.toFixed(2)
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="total-item">
|
||||
<div class="order-footer">
|
||||
<div class="order-total">
|
||||
<div class="price">
|
||||
<div class="total-item">
|
||||
合计:
|
||||
<span>¥<span style="font-size: 1.4rem">{{
|
||||
allPrice.toFixed(2)
|
||||
}}</span></span>
|
||||
</div>
|
||||
<!-- <div class="total-item">
|
||||
优惠:
|
||||
<span
|
||||
>¥<span>{{ discounts.toFixed(2) }}</span></span
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="update-price">
|
||||
</div>
|
||||
<!-- <div class="update-price">
|
||||
<el-button class="btn" type="primary" @click="showPrice"
|
||||
>改价 (Insert)</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="order-btn">
|
||||
<el-button
|
||||
class="btn"
|
||||
type="primary"
|
||||
@click="goPay"
|
||||
:disabled="list.length == 0"
|
||||
>立即结账 (F9)</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-btn">
|
||||
<el-button class="btn" type="primary" @click="goPay" :disabled="list.length == 0 || allPrice < 500">{{
|
||||
allPrice < 500 ? "¥500起订" : "立即结账 (F9)" }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<price ref="priceRef" @changeAllPrice="changeAllPrice"></price>
|
||||
</div>
|
||||
<price ref="priceRef" @changeAllPrice="changeAllPrice"></price>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-order {
|
||||
border-radius: 1.2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
width: 30rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.user-nav{
|
||||
.user-info{
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid #f70;
|
||||
background-color: rgba($color: #f70, $alpha: 0.1);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
color: #666;
|
||||
.flex-bewteen{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.change-user{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
height: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
span {
|
||||
color: #ff4a00;
|
||||
}
|
||||
.nav-item-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.order-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 10rem;
|
||||
.order-item {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.order-item-img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.order-item-info {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.order-item-title {
|
||||
.title {
|
||||
width: 18rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.delete {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.order-item-sku {
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
box-shadow: 0 -1px 0.625rem #eee;
|
||||
border-radius: 1.2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
width: 30rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.order-total {
|
||||
height: 2.5rem;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
.price {
|
||||
.user-nav {
|
||||
.user-info {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid #f70;
|
||||
background-color: rgba($color: #f70, $alpha: 0.1);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
color: #666;
|
||||
|
||||
.flex-bewteen {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.change-user {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.total-item {
|
||||
padding-right: 1.5rem;
|
||||
span {
|
||||
color: #f5222d;
|
||||
}
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
height: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
span {
|
||||
color: #ff4a00;
|
||||
}
|
||||
}
|
||||
.update-price {
|
||||
.btn {
|
||||
border-radius: 3rem;
|
||||
|
||||
.nav-item-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-btn {
|
||||
height: 3.2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
.btn {
|
||||
|
||||
.order-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 10rem;
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.order-item-img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.order-item-info {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.order-item-title {
|
||||
.title {
|
||||
width: 18rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-sku {
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
box-shadow: 0 -1px 0.625rem #eee;
|
||||
background-color: #fff;
|
||||
|
||||
.order-total {
|
||||
height: 2.5rem;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.total-item {
|
||||
padding-right: 1.5rem;
|
||||
|
||||
span {
|
||||
color: #f5222d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.update-price {
|
||||
.btn {
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
height: 3.2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const setForm = (data, type = "add") => {
|
|||
const emit = defineEmits(["changeItem"]);
|
||||
|
||||
const changeItem = () => {
|
||||
if(!form.value.cart_num) form.value.cart_num = 1;
|
||||
if(!form.value.cart_num) form.value.cart_num = form.value.batch > 0 ? form.value.batch : 1;
|
||||
emit("changeItem", form.value);
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
|
@ -71,10 +71,10 @@ const close = () => {
|
|||
<div class="sku">
|
||||
<el-input-number
|
||||
ref="inputRef"
|
||||
:precision="2"
|
||||
v-model="form.cart_num"
|
||||
step-strictly
|
||||
placeholder="请输入数量(默认为1)"
|
||||
:min="0"
|
||||
:placeholder="`请输入数量(默认为${+form.batch > 0 ? form.batch : '1.00'})`"
|
||||
:min="+form.batch > 0 ? +form.batch : 1"
|
||||
:step="1"
|
||||
style="width: 20rem"
|
||||
size="large"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { useRoute } from "vue-router";
|
|||
import mitt from "@/utils/mitt.js";
|
||||
import moment from "moment";
|
||||
import { printTicket } from "@/utils/EscPos.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const pupopRef = ref(null);
|
||||
const orderRef = ref(null);
|
||||
|
|
@ -25,215 +26,214 @@ const userStore = useUserStore();
|
|||
const route = useRoute();
|
||||
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 30,
|
||||
page_no: 1,
|
||||
page_size: 30,
|
||||
});
|
||||
const loading = ref(false)
|
||||
const getStoreList = (data = {}, reload = false) => {
|
||||
where.value = {
|
||||
...where.value,
|
||||
...data,
|
||||
};
|
||||
if (reload) {
|
||||
storeList.value = [];
|
||||
where.value.page_no = 1;
|
||||
loadEnd.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
saleStoreListApi(where.value).then((res) => {
|
||||
loading.value = false;
|
||||
if (res.data?.lists?.length < where.value.page_size) loadEnd.value = true;
|
||||
storeList.value = storeList.value.concat(res.data.lists);
|
||||
if (
|
||||
data.code &&
|
||||
storeList.value.length == 1 &&
|
||||
isAllDigits(data.code)
|
||||
) {
|
||||
shopRef.value.code = "";
|
||||
shopRef.value.inputBlur();
|
||||
changeItem(storeList.value[0]);
|
||||
where.value = {
|
||||
...where.value,
|
||||
...data,
|
||||
};
|
||||
if (reload) {
|
||||
storeList.value = [];
|
||||
where.value.page_no = 1;
|
||||
loadEnd.value = false;
|
||||
}
|
||||
where.value.page_no++;
|
||||
});
|
||||
loading.value = true;
|
||||
saleStoreListApi(where.value).then((res) => {
|
||||
loading.value = false;
|
||||
if (res.data?.lists?.length < where.value.page_size) loadEnd.value = true;
|
||||
storeList.value = storeList.value.concat(res.data.lists);
|
||||
if (
|
||||
data.code &&
|
||||
storeList.value.length == 1 &&
|
||||
isAllDigits(data.code)
|
||||
) {
|
||||
shopRef.value.code = "";
|
||||
shopRef.value.inputBlur();
|
||||
changeItem(storeList.value[0]);
|
||||
}
|
||||
where.value.page_no++;
|
||||
});
|
||||
};
|
||||
|
||||
const loadEnd = ref(false);
|
||||
const loadMore = (data) => {
|
||||
if (loadEnd.value) return;
|
||||
getStoreList(data);
|
||||
if (loadEnd.value) return;
|
||||
getStoreList(data);
|
||||
};
|
||||
|
||||
function isAllDigits(str) {
|
||||
return /^\d+$/.test(str);
|
||||
return /^\d+$/.test(str);
|
||||
}
|
||||
|
||||
const cartAddInfo = (item, change = "") => {
|
||||
console.log(item, change);
|
||||
let q = {
|
||||
product_id: item.product_id,
|
||||
cart_num: item.cart_num,
|
||||
};
|
||||
cartCreateApi(q).then((res) => {
|
||||
orderRef.value.getList();
|
||||
});
|
||||
console.log(item, change);
|
||||
let q = {
|
||||
product_id: item.product_id,
|
||||
cart_num: item.cart_num,
|
||||
};
|
||||
cartCreateApi(q).then((res) => {
|
||||
orderRef.value.getList();
|
||||
});
|
||||
};
|
||||
|
||||
const changeItem = (item, change) => {
|
||||
pupopRef.value.setForm(item, "add");
|
||||
pupopRef.value.show(true);
|
||||
pupopRef.value.setForm(item, "add");
|
||||
pupopRef.value.show(true);
|
||||
};
|
||||
|
||||
const editPupop = (item) => {
|
||||
pupopRef.value.setForm(item, "edit");
|
||||
pupopRef.value.show(true);
|
||||
pupopRef.value.setForm(item, "edit");
|
||||
pupopRef.value.show(true);
|
||||
};
|
||||
|
||||
const orderForm = ref({});
|
||||
// 结算
|
||||
const checkOut = () => {
|
||||
let cart_id = orderRef.value.list.map((item) => item.id);
|
||||
let query = {
|
||||
cart_id: cart_id,
|
||||
uid: orderRef.value?.userInfo?.uid || ""
|
||||
};
|
||||
if (orderRef.value.discounts > 0) {
|
||||
query.deduction_price = orderRef.value.discounts.toFixed(2);
|
||||
query.pay_type = "micropay";
|
||||
}
|
||||
orderCheckApi(query).then((res) => {
|
||||
orderForm.value = res.data.order;
|
||||
payRef.value.setForm({
|
||||
data: res.data.order,
|
||||
cart_id: cart_id,
|
||||
uid: orderRef.value?.userInfo?.uid || ""
|
||||
let cart_id = orderRef.value.list.map((item) => item.id);
|
||||
let query = {
|
||||
cart_id: cart_id,
|
||||
uid: orderRef.value?.userInfo?.uid || ""
|
||||
};
|
||||
if (orderRef.value.discounts > 0) {
|
||||
query.deduction_price = orderRef.value.discounts.toFixed(2);
|
||||
query.pay_type = "micropay";
|
||||
}
|
||||
orderCheckApi(query).then((res) => {
|
||||
orderForm.value = res.data.order;
|
||||
payRef.value.setForm({
|
||||
data: res.data.order,
|
||||
cart_id: cart_id,
|
||||
uid: orderRef.value?.userInfo?.uid || ""
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const goPay = () => {
|
||||
checkOut();
|
||||
payRef.value.drawer = true;
|
||||
if (orderRef.value.allPrice < 500) return ElMessage.error('订单金额不能低于500元');
|
||||
checkOut();
|
||||
payRef.value.drawer = true;
|
||||
};
|
||||
|
||||
const paySuccess = (data = null) => {
|
||||
// data = {
|
||||
// out_trade_no: "PF171568087790938356", //单号
|
||||
// create_time: "2024-05-14 17:59:05", //下单时间
|
||||
// trade_type: "MICROPAY", //支付方式
|
||||
// transaction_id: "4200002159202405159003084211", //支付单号
|
||||
// }
|
||||
// if(data) onPrint(data);
|
||||
setTimeout(()=>{
|
||||
orderRef.value.getList();
|
||||
})
|
||||
// data = {
|
||||
// out_trade_no: "PF171568087790938356", //单号
|
||||
// create_time: "2024-05-14 17:59:05", //下单时间
|
||||
// trade_type: "MICROPAY", //支付方式
|
||||
// transaction_id: "4200002159202405159003084211", //支付单号
|
||||
// }
|
||||
// if(data) onPrint(data);
|
||||
setTimeout(() => {
|
||||
orderRef.value.getList();
|
||||
})
|
||||
};
|
||||
|
||||
// 打印小票
|
||||
const onPrint = (data)=>{
|
||||
let goods = [];
|
||||
orderRef.value.list.forEach((item) => {
|
||||
goods.push({
|
||||
name: item.goods_name, //商品名称
|
||||
sell: item.sell, //单价
|
||||
nums: item.cart_num, //数量
|
||||
unit_name: item.unit_name, //单位
|
||||
total: item.goods_total_price, //小计
|
||||
const onPrint = (data) => {
|
||||
let goods = [];
|
||||
orderRef.value.list.forEach((item) => {
|
||||
goods.push({
|
||||
name: item.goods_name, //商品名称
|
||||
sell: item.sell, //单价
|
||||
nums: item.cart_num, //数量
|
||||
unit_name: item.unit_name, //单位
|
||||
total: item.goods_total_price, //小计
|
||||
});
|
||||
});
|
||||
});
|
||||
let paytype = "现金支付";
|
||||
if(data.pay_type==13) paytype = "支付宝支付";
|
||||
if(data.pay_type==9) paytype = "微信支付";
|
||||
let obj = {
|
||||
mer_name: userStore.userInfo.mer_name, //商户名称
|
||||
service_phone: userStore.userInfo.service_phone, //客服电话
|
||||
number: data.out_trade_no, //单号
|
||||
create_time: data.create_time, //下单时间
|
||||
total_price: orderForm.value.total, //总价
|
||||
pay_price: orderForm.value.total, //实付
|
||||
pay_type: paytype, //支付方式
|
||||
pay_number: data.transaction_id, //支付单号
|
||||
goods: goods, //商品列表
|
||||
};
|
||||
if (goods.length > 0 && data.out_trade_no) {
|
||||
let str = printTicket(obj);
|
||||
console.log(str);
|
||||
uni.getEnv((res) => {
|
||||
if (res.app) {
|
||||
APPprint(content);
|
||||
setTimeout(() => {
|
||||
isPrint = false;
|
||||
}, 4000);
|
||||
}
|
||||
});
|
||||
uni.postMessage({
|
||||
data: {
|
||||
type: "print",
|
||||
content: str,
|
||||
},
|
||||
});
|
||||
}
|
||||
let paytype = "现金支付";
|
||||
if (data.pay_type == 13) paytype = "支付宝支付";
|
||||
if (data.pay_type == 9) paytype = "微信支付";
|
||||
let obj = {
|
||||
mer_name: userStore.userInfo.mer_name, //商户名称
|
||||
service_phone: userStore.userInfo.service_phone, //客服电话
|
||||
number: data.out_trade_no, //单号
|
||||
create_time: data.create_time, //下单时间
|
||||
total_price: orderForm.value.total, //总价
|
||||
pay_price: orderForm.value.total, //实付
|
||||
pay_type: paytype, //支付方式
|
||||
pay_number: data.transaction_id, //支付单号
|
||||
goods: goods, //商品列表
|
||||
};
|
||||
if (goods.length > 0 && data.out_trade_no) {
|
||||
let str = printTicket(obj);
|
||||
console.log(str);
|
||||
uni.getEnv((res) => {
|
||||
if (res.app) {
|
||||
APPprint(content);
|
||||
setTimeout(() => {
|
||||
isPrint = false;
|
||||
}, 4000);
|
||||
}
|
||||
});
|
||||
uni.postMessage({
|
||||
data: {
|
||||
type: "print",
|
||||
content: str,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 键盘事件
|
||||
const aF9 = () => {
|
||||
if (route.name != "saleHome") return;
|
||||
if (!payRef.value.drawer && orderRef.value.list.length > 0) goPay();
|
||||
else payRef.value.beforeClose();
|
||||
if (route.name != "saleHome") return;
|
||||
if (!payRef.value.drawer && orderRef.value.list.length > 0) goPay();
|
||||
else payRef.value.beforeClose();
|
||||
};
|
||||
onMounted(() => {
|
||||
getStoreList();
|
||||
mitt.on("F9", aF9);
|
||||
getStoreList();
|
||||
mitt.on("F9", aF9);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
mitt.off("F9", aF9);
|
||||
mitt.off("F9", aF9);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-card">
|
||||
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop" />
|
||||
<padding />
|
||||
<shop
|
||||
ref="shopRef"
|
||||
style="flex: 1"
|
||||
:storeList="storeList"
|
||||
:loading="loading"
|
||||
@getStoreList="getStoreList"
|
||||
@changeItem="changeItem"
|
||||
@loadMore="loadMore"
|
||||
/>
|
||||
<pupop ref="pupopRef" @changeItem="cartAddInfo" />
|
||||
<padding />
|
||||
<classify ref="classifyRef" @getStoreList="getStoreList"/>
|
||||
<pay ref="payRef" @paySuccess="paySuccess" />
|
||||
</div>
|
||||
<div class="my-card">
|
||||
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop" />
|
||||
<padding />
|
||||
<shop ref="shopRef" style="flex: 1" :storeList="storeList" :loading="loading" @getStoreList="getStoreList"
|
||||
@changeItem="changeItem" @loadMore="loadMore" />
|
||||
<pupop ref="pupopRef" @changeItem="cartAddInfo" />
|
||||
<padding />
|
||||
<classify ref="classifyRef" @getStoreList="getStoreList" />
|
||||
<pay ref="payRef" @paySuccess="paySuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-card {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 修改滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 0.315rem; /* 设置滚动条的宽度 */
|
||||
width: 0.315rem;
|
||||
/* 设置滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 设置滚动条的轨道样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||
margin: 1.25rem 0;
|
||||
background-color: #f1f1f1;
|
||||
/* 设置轨道的背景色 */
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
/* 设置滚动条的滑块样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc; /* 设置滑块的背景色 */
|
||||
border-radius: 0.315rem; /* 设置滑块的圆角 */
|
||||
background-color: #ccc;
|
||||
/* 设置滑块的背景色 */
|
||||
border-radius: 0.315rem;
|
||||
/* 设置滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
background-color: #999;
|
||||
/* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue