This commit is contained in:
parent
80a9e5b039
commit
2dddedd3a4
|
|
@ -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); //商品总价
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue