354 lines
8.8 KiB
Vue
354 lines
8.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import {
|
|
orderListApi,
|
|
orderStatusApi,
|
|
orderLadingApi,
|
|
cartListApi,
|
|
saleOrderListApi,
|
|
} from "@/api/store.js";
|
|
import { useUserStore } from "@/store/user.js";
|
|
import { ElMessage } from "element-plus";
|
|
import { useRouter } from "vue-router";
|
|
import mitt from "@/utils/mitt.js";
|
|
|
|
const userStore = useUserStore();
|
|
const props = defineProps({
|
|
isSystem: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
source: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
});
|
|
|
|
const lists = ref([]);
|
|
|
|
const tabPosition = ref(1); // 1-全部, 2-未支付
|
|
const changeTabPosition = (e) => {
|
|
where.value.page_no = 1;
|
|
loadEnd.value = false;
|
|
loading.value = false;
|
|
orderList.value = [];
|
|
getOrderList(true);
|
|
};
|
|
|
|
const payRef = ref(null);
|
|
|
|
const date = ref("");
|
|
const changeDate = () => {
|
|
where.value.date = date.value.join("-");
|
|
getOrderList(true);
|
|
};
|
|
|
|
const disabledDate = (time)=>{
|
|
return time.getTime() > Date.now();
|
|
}
|
|
|
|
|
|
const where = ref({
|
|
page_no: 1,
|
|
page_size: 20,
|
|
number: "",
|
|
date: "",
|
|
source: props.source,
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
const activeStore = ref(0);
|
|
|
|
const loadEnd = ref(false);
|
|
const orderList = ref([]);
|
|
const getOrderList = (reload = false) => {
|
|
if (reload) where.value.page_no = 1;
|
|
else if (loadEnd.value || loading.value) return;
|
|
loading.value = true;
|
|
if (tabPosition.value == 1) where.value.paid = null;
|
|
if (tabPosition.value == 2) where.value.paid = 0;
|
|
saleOrderListApi(where.value)
|
|
.then((res) => {
|
|
if (reload) orderList.value = res.data.lists;
|
|
else orderList.value = [...orderList.value, ...res.data.lists];
|
|
if (res.data.lists.length < where.value.page_size) loadEnd.value = true;
|
|
else where.value.page_no++;
|
|
activeStore.value = 0;
|
|
mitt.emit("set-sale-order-detail", orderList.value[0]);
|
|
total.value = res.data.count;
|
|
loading.value = false;
|
|
})
|
|
.catch((err) => {
|
|
loadEnd.value = true;
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
const setForm = (item, index) => {
|
|
activeStore.value = index;
|
|
mitt.emit("set-sale-order-detail", item);
|
|
};
|
|
|
|
onMounted(() => {
|
|
mitt.on("update-sale-order-detail", (item) => {
|
|
console.log("===");
|
|
orderList.value[activeStore.value].paid = 1;
|
|
});
|
|
});
|
|
onUnmounted(()=>{
|
|
mitt.off("update-sale-order-detail");
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="my-order">
|
|
<div class="header-nav">
|
|
<div class="nav-item">
|
|
{{ "收银订单" }}
|
|
</div>
|
|
<div class="nav-item-btn">
|
|
<el-radio-group
|
|
v-model="tabPosition"
|
|
@change="changeTabPosition"
|
|
size="small"
|
|
>
|
|
<el-radio-button :value="1">全部</el-radio-button>
|
|
<el-radio-button :value="2">未支付</el-radio-button>
|
|
</el-radio-group>
|
|
<el-date-picker
|
|
v-model="date"
|
|
type="daterange"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
size="small"
|
|
value-format="YYYY/MM/DD"
|
|
:disabled-date="disabledDate"
|
|
@change="changeDate"
|
|
style="width: 14rem; margin-left: 1rem"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="header-input">
|
|
<el-input
|
|
v-model="where.number"
|
|
placeholder="请输入订单编号"
|
|
@keydown.enter="getOrderList(true)"
|
|
@clear="getOrderList(true)"
|
|
clearable
|
|
>
|
|
<template #append>
|
|
<el-button
|
|
type="primary"
|
|
style="
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
border-radius: 0 0.315rem 0.315rem 0;
|
|
"
|
|
@click="getOrderList(true)"
|
|
>搜索</el-button
|
|
>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
<div
|
|
class="order-lists"
|
|
v-loading="loading"
|
|
v-infinite-scroll="getOrderList"
|
|
infinite-scroll-distance="300"
|
|
infinite-scroll-delay="500"
|
|
style="overflow: auto"
|
|
>
|
|
<div
|
|
class="item"
|
|
:class="{ 'item-active': activeStore == index }"
|
|
v-for="(item, index) in orderList"
|
|
:key="index"
|
|
@click="setForm(item, index)"
|
|
>
|
|
<div class="top">
|
|
<div class="sn" :class="'cahier'">单号: {{ item.number }}</div>
|
|
<div class="create-time">{{ item.create_time }}</div>
|
|
</div>
|
|
<div class="shop">
|
|
<div class="left" v-if="item.goods_list">
|
|
<el-image
|
|
v-for="(shop, imgkey) in item.goods_list.slice(0, 5)"
|
|
:key="imgkey"
|
|
:src="shop.imgs"
|
|
class="shop-img"
|
|
></el-image>
|
|
<div v-if="item.goods_list.length == 1" class="shop-name">
|
|
{{ item.goods_list[0].class_name }}
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="money">¥{{ item.total }}</div>
|
|
<div class="count">共{{ item.goods_count }}款商品</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="pay">
|
|
<div v-if="item.paid">
|
|
已支付
|
|
<span v-if="item.pay_type == 9">(微信收款)</span>
|
|
<span v-if="item.pay_type == 3">(余额支付)</span>
|
|
<span v-if="item.pay_type == 1">(微信支付)</span>
|
|
<!-- <span class="manage-btn">待处理</span> -->
|
|
</div>
|
|
<div v-else style="color: #ff4a00">未支付</div>
|
|
</div>
|
|
<!-- <div class="cashier" v-if="item.service_info">
|
|
收银员: {{ item.service_info.nickname }}
|
|
</div>
|
|
<div class="cashier" v-else>平台订单</div> -->
|
|
</div>
|
|
</div>
|
|
<div v-if="loadEnd" class="load-end">没有更多了</div>
|
|
<div v-if="loading" class="load-end">加载中...</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.my-order {
|
|
border-radius: 1.2rem;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
width: 30rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
height: 3.5rem;
|
|
|
|
span {
|
|
color: #ff4a00;
|
|
}
|
|
.nav-item {
|
|
font-weight: bold;
|
|
}
|
|
.nav-item-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.header-input {
|
|
padding: 1rem;
|
|
padding-top: 0;
|
|
height: 2.5rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.order-lists {
|
|
height: calc(100vh - 100px - 10.2rem);
|
|
overflow-y: auto;
|
|
.item {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #eee;
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
.sn {
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
}
|
|
.cahier {
|
|
&::before {
|
|
content: "收银";
|
|
font-weight: 400;
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.1rem;
|
|
margin-right: 0.2rem;
|
|
border: 1px solid #2ec479;
|
|
color: #2ec479;
|
|
border-radius: 0.187rem;
|
|
}
|
|
}
|
|
.cahier2 {
|
|
&::before {
|
|
content: "平台";
|
|
font-weight: 400;
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.1rem;
|
|
margin-right: 0.2rem;
|
|
border: 1px solid #ff4a00;
|
|
color: #ff4a00;
|
|
border-radius: 0.187rem;
|
|
}
|
|
}
|
|
.create-time {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
.shop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.right {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.money {
|
|
font-size: 1rem;
|
|
color: #ff4a00;
|
|
font-weight: bold;
|
|
}
|
|
.count {
|
|
font-size: 0.7rem;
|
|
color: #999;
|
|
}
|
|
}
|
|
.left {
|
|
height: 4.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
.shop-img {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 0.3rem;
|
|
margin-right: 0.4rem;
|
|
}
|
|
.shop-name {
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
/* 将文本限制为三行 */
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.9rem;
|
|
color: #777;
|
|
.manage-btn {
|
|
color: #fff;
|
|
background-color: #e6a23c;
|
|
border-radius: 0.2rem;
|
|
padding: 0 0.2rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
.item-active {
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
.load-end {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
color: #333;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
</style>
|