343 lines
8.9 KiB
Vue
343 lines
8.9 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
orderListApi,
|
|
orderStatusApi,
|
|
orderLadingApi,
|
|
cartListApi,
|
|
} 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
|
|
}
|
|
})
|
|
|
|
const list = ref([]);
|
|
|
|
const tabPosition = ref(1); // 1-全部, 2-未支付
|
|
const changeTabPosition = (e) => {
|
|
where.value.page = 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 where = ref({
|
|
page: 1,
|
|
limit: 20,
|
|
search_info: "",
|
|
date: "",
|
|
staff_id: 0
|
|
});
|
|
|
|
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 = 1;
|
|
else if (loadEnd.value || loading.value) return;
|
|
if(!props.isSystem) where.value.staff_id = userStore.userInfo.service.service_id;
|
|
loading.value = true;
|
|
if (tabPosition.value == 1) where.value.paid = null;
|
|
if (tabPosition.value == 2) where.value.paid = 0;
|
|
orderListApi(userStore.userInfo.service.mer_id, where.value)
|
|
.then((res) => {
|
|
if (reload) orderList.value = res.data.list;
|
|
else orderList.value = [...orderList.value, ...res.data.list];
|
|
if (res.data.list.length < where.value.limit) loadEnd.value = true;
|
|
else where.value.page++;
|
|
activeStore.value = 0;
|
|
mitt.emit("set-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-order-detail", item);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="my-order">
|
|
<div class="header-nav">
|
|
<div class="nav-item">
|
|
{{ isSystem ? '平台订单' : '收银订单' }}
|
|
</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"
|
|
@change="changeDate"
|
|
style="width: 14rem;margin-left: 1rem;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="header-input">
|
|
<el-input
|
|
v-model="where.search_info"
|
|
placeholder="请输入订单编号"
|
|
@keydown.enter="getOrderList(true)"
|
|
@clear="getOrderList(true)"
|
|
clearable
|
|
>
|
|
<template #append>
|
|
<el-button
|
|
type="primary"
|
|
style="
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
border-radius: 0 5px 5px 0;
|
|
"
|
|
@click="getOrderList(true)"
|
|
>搜索</el-button
|
|
>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
<div
|
|
class="order-list"
|
|
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="
|
|
item.pay_type === 11 ||
|
|
item.pay_type === 12 ||
|
|
item.pay_type === 13
|
|
? 'cahier'
|
|
: 'cahier2'
|
|
"
|
|
>
|
|
单号: {{ item.order_sn }}
|
|
</div>
|
|
<div class="create-time">{{ item.create_time }}</div>
|
|
</div>
|
|
<div class="shop">
|
|
<div class="left" v-if="item.orderProduct">
|
|
<el-image
|
|
v-for="(shop, imgkey) in item.orderProduct.slice(0, 5)"
|
|
:key="imgkey"
|
|
:src="
|
|
shop.cart_info.productAttr.image || shop.cart_info.product.image
|
|
"
|
|
class="shop-img"
|
|
></el-image>
|
|
<div v-if="item.orderProduct.length == 1" class="shop-name">
|
|
{{ item.orderProduct[0].cart_info.product.store_name }}
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="money">¥{{ item.pay_price }}</div>
|
|
<div class="count">共{{ item.total_num }}件商品</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="pay">
|
|
<div v-if="item.paid">
|
|
已支付
|
|
<span v-if="item.pay_type == 13">(支付宝收款)</span>
|
|
<span v-if="item.pay_type == 12">(现金支付)</span>
|
|
<span v-if="item.pay_type == 11">(微信收款)</span>
|
|
<span v-if="item.pay_type == 0">(余额支付)</span>
|
|
<span v-if="item.pay_type == 1">(微信支付)</span>
|
|
<span v-if="item.pay_type == 9">(商户余额支付)</span>
|
|
<span v-if="item.pay_type == 10">(对公转账)</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-list {
|
|
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: 3px;
|
|
}
|
|
}
|
|
.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: 3px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.item-active {
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
.load-end {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
color: #333;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
</style>
|