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