261 lines
6.9 KiB
Vue
261 lines
6.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 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 where = ref({
|
|
page: 1,
|
|
limit: 20,
|
|
search_info: ''
|
|
});
|
|
|
|
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;
|
|
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=>{
|
|
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">订单列表</div>
|
|
<div class="nav-item-clear">
|
|
<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>
|
|
</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="{'cahier': item.pay_type==11 || item.pay_type==12}">单号: {{ 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">
|
|
<span v-if="item.paid">已支付</span>
|
|
<span v-else style="color: #ff4a00;">未支付</span>
|
|
</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;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
height: 1.5rem;
|
|
|
|
span {
|
|
color: #ff4a00;
|
|
}
|
|
.nav-item-clear {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.header-input {
|
|
padding: 1rem;
|
|
padding-top: 0;
|
|
height: 2.5rem;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.order-list {
|
|
height: calc(100vh - 100px - 8.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;
|
|
}
|
|
}
|
|
.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>
|