339 lines
10 KiB
Vue
339 lines
10 KiB
Vue
<script setup>
|
||
import { ref, watch } from "vue";
|
||
import {
|
||
saleOrderListApi,
|
||
cashierinfoDetailsApi,
|
||
cashierinfoWriteoffListApi,
|
||
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 payRef = ref(null);
|
||
|
||
const props = defineProps({
|
||
type: {
|
||
type: Number,
|
||
default: 2
|
||
}
|
||
})
|
||
|
||
const where = ref({
|
||
verify_code: '',
|
||
page_no: 1,
|
||
page_size: 15
|
||
});
|
||
|
||
|
||
|
||
const loading = ref(false);
|
||
const total = ref(0);
|
||
const activeStore = ref(0);
|
||
|
||
const loadEnd = ref(false);
|
||
const orderList = ref([]);
|
||
const getOrderList = (reload = false) => {
|
||
// return console.log('加载');
|
||
if(loading.value) return;
|
||
loading.value = true;
|
||
if (where.value.verify_code) {
|
||
where.value.verify_code = where.value.verify_code.replace('—', '-');
|
||
where.value.verify_code = where.value.verify_code.replace(/\uFF0D/, '-');
|
||
where.value.verify_code = where.value.verify_code.replace(' ', '');
|
||
|
||
cashierinfoDetailsApi({
|
||
verify_code: where.value.verify_code
|
||
})
|
||
.then((res) => {
|
||
orderList.value = [res.data];
|
||
activeStore.value = 0;
|
||
mitt.emit("set-sale-order-detail", orderList.value[0]);
|
||
total.value = res.data.count;
|
||
loading.value = false;
|
||
if (orderList.value[0].is_writeoff) {
|
||
ElMessage.warning('订单已核销过')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
loading.value = false;
|
||
});
|
||
} else {
|
||
cashierinfoWriteoffListApi(where.value)
|
||
.then((res) => {
|
||
orderList.value = res.data.lists;
|
||
mitt.emit("set-sale-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-sale-order-detail", item);
|
||
}
|
||
|
||
const setCode = (code) => {
|
||
where.value.verify_code = code;
|
||
activeStore.value = 0;
|
||
getOrderList(true);
|
||
}
|
||
|
||
const emit = defineEmits(["backOne"]);
|
||
|
||
const backOne = () => {
|
||
mitt.emit("set-sale-order-detail", {});
|
||
orderList.value = [];
|
||
emit("backOne");
|
||
}
|
||
|
||
defineExpose({
|
||
setCode,
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="my-order">
|
||
<div class="header-nav">
|
||
<div class="nav-item">{{ type == 2 ? '核销订单' : '核销记录' }}</div>
|
||
<div class="nav-item-clear">
|
||
<el-button type="primary" size="small" @click="backOne">返回上一页</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="header-input">
|
||
<el-input v-model="where.verify_code" placeholder="请输入核销码" @keydown.enter="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" :infinite-scroll-immediate="false" 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.order_id }}</div>
|
||
<div class="create-time">{{ item.pay_time }}</div>
|
||
</div>
|
||
<div class="shop">
|
||
<div class="left" v-if="item.product">
|
||
<el-image v-for="(shop, imgkey) in item.product.slice(0, 5)" :key="imgkey"
|
||
:src="shop.cart_info.image" class="shop-img"></el-image>
|
||
<div v-if="item.product.length == 1" class="shop-name">
|
||
{{ item.product[0].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">
|
||
{{ item.paid_name }}
|
||
<spna v-if="item.pay_type_name">({{ item.pay_type_name }})</spna>
|
||
<span v-else-if="item.pay_type == 9">(微信收款)</span>
|
||
<span v-else-if="item.pay_type == 17">(现金支付)</span>
|
||
<span v-else-if="item.pay_type == 13">(支付宝收款)</span>
|
||
<span v-else-if="item.pay_type == 3">(余额支付)</span>
|
||
<span v-else-if="item.pay_type == 1">(微信支付)</span>
|
||
</div>
|
||
<div v-else style="color: #ff4a00">{{ item.paid_name }}</div>
|
||
</div>
|
||
<!-- <div class="cashier" v-if="item.service_info">
|
||
收银员: {{ item.service_info.nickname }}
|
||
</div> -->
|
||
<div class="cashier" v-if="item.is_writeoff == 0">核销码：{{ item.verify_code }}</div>
|
||
<div class="cashier" v-else style="color: #ff4a00">已核销：{{ item.verify_code }}</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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.header-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1rem;
|
||
height: 1.5rem;
|
||
|
||
.nav-item {
|
||
font-weight: bold;
|
||
}
|
||
|
||
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-lists {
|
||
flex: 1;
|
||
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>, watch
|