This commit is contained in:
weipengfei 2024-06-20 18:19:46 +08:00
parent 80a9e5b039
commit 2dddedd3a4
5 changed files with 440 additions and 425 deletions

View File

@ -145,6 +145,7 @@ const changeActive = (index = -1, type = 1) => {
.list {
display: flex;
flex-wrap: wrap;
div {
margin-right: 1rem;

View File

@ -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); //
@ -69,6 +70,8 @@ const changeCartNum = (val, old) => {
allPrice.value += item.price * item.cart_num;
});
costPrice.value = allPrice.value;
}).catch((err)=>{
val.cart_num = err?.msg?.match(/\d+\.\d+/) || 1;
});
};
@ -136,17 +139,23 @@ onUnmounted(() => {
<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>
<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>
<el-button link @click="userInfo.uid = ''">重置<el-icon>
<RefreshLeft />
</el-icon></el-button>
</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>
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon>
<ArrowRight />
</el-icon></el-button>
</div>
</div>
</div>
@ -157,17 +166,15 @@ onUnmounted(() => {
已选购 <span>{{ list.length }}</span>
</div>
<div class="nav-item-clear" @click="clearAll">
<el-icon><Delete /></el-icon> (Delete)
<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>
<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>
@ -181,13 +188,8 @@ onUnmounted(() => {
¥<span>{{ item.price }}</span>
</div>
<div>
<el-input-number
v-model="item.cart_num"
step-strictly
:min="1"
:step="1"
@change="changeCartNum(item)"
/>
<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>
@ -198,11 +200,9 @@ onUnmounted(() => {
<div class="price">
<div class="total-item">
合计:
<span
>¥<span style="font-size: 1.4rem">{{
<span>¥<span style="font-size: 1.4rem">{{
allPrice.toFixed(2)
}}</span></span
>
}}</span></span>
</div>
<!-- <div class="total-item">
优惠:
@ -218,13 +218,8 @@ onUnmounted(() => {
</div> -->
</div>
<div class="order-btn">
<el-button
class="btn"
type="primary"
@click="goPay"
:disabled="list.length == 0"
>立即结账 (F9)</el-button
>
<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>
@ -251,19 +246,23 @@ onUnmounted(() => {
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;
}
@ -281,6 +280,7 @@ onUnmounted(() => {
span {
color: #ff4a00;
}
.nav-item-clear {
display: flex;
align-items: center;
@ -288,10 +288,12 @@ onUnmounted(() => {
cursor: pointer;
}
}
.order-list {
flex: 1;
overflow-y: auto;
padding-bottom: 10rem;
.order-item {
display: flex;
padding: 1rem;
@ -302,6 +304,7 @@ onUnmounted(() => {
height: 5rem;
border-radius: 0.5rem;
}
.order-item-info {
flex: 1;
box-sizing: border-box;
@ -309,11 +312,13 @@ onUnmounted(() => {
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;
@ -321,11 +326,13 @@ onUnmounted(() => {
white-space: nowrap;
text-overflow: ellipsis;
}
.delete {
color: #1890ff;
cursor: pointer;
}
}
.order-item-sku {
cursor: pointer;
font-size: 0.8rem;
@ -334,6 +341,7 @@ onUnmounted(() => {
}
}
}
.order-footer {
position: absolute;
bottom: 0;
@ -350,25 +358,31 @@ onUnmounted(() => {
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%;

View File

@ -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"

View File

@ -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);
@ -111,6 +112,7 @@ const checkOut = () => {
};
const goPay = () => {
if (orderRef.value.allPrice < 500) return ElMessage.error('订单金额不能低于500元');
checkOut();
payRef.value.drawer = true;
};
@ -194,15 +196,8 @@ onUnmounted(() => {
<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"
/>
<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" />
@ -214,26 +209,31 @@ onUnmounted(() => {
.my-card {
display: flex;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
width: 0.315rem; /* 设置滚动条的宽度 */
width: 0.315rem;
/* 设置滚动条的宽度 */
}
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置轨道的背景色 */
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>