241 lines
8.0 KiB
Vue
241 lines
8.0 KiB
Vue
<template>
|
||
<BasePage>
|
||
<div class="merchanttrade">
|
||
<div class="top">
|
||
<div class="date" @click="showDate = true">
|
||
<div>
|
||
<span>
|
||
{{ date[0] }}-
|
||
</span>
|
||
<span>
|
||
{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }} </span>
|
||
</div>
|
||
<img src="/img/down.png">
|
||
</div>
|
||
|
||
<div class="filter" @click="showRight = true">
|
||
<span>筛选</span>
|
||
<img src="/img/down.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<BaseList ref="listRef" url="/v1/client/DShopsClient/order" class="list" :params="searchParams"
|
||
:parse-data="parseData" @load="onLoad">
|
||
<template #default="{ item }">
|
||
<div class="item" v-if="item.orders && item.orders.length">
|
||
<div class="top_line">
|
||
<span class="date">
|
||
{{ item.day }}
|
||
</span>
|
||
<div class="right_box">
|
||
<div>
|
||
<p>{{ item.orderCount }}</p>
|
||
<p>订单数</p>
|
||
</div>
|
||
<div>
|
||
<p>¥{{ item.ordermoney }}</p>
|
||
<p>营业额</p>
|
||
</div>
|
||
<div>
|
||
<p>¥{{ item.income }}</p>
|
||
<p>应收</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item_detail" v-for="order in item.orders" :key="order.ordernum">
|
||
<div class="line">
|
||
<span class="ordernum">
|
||
订单号：{{ order.ordernum }}
|
||
</span>
|
||
<button @click="$navigate(`MerchantTradeDetail?id=${order.ordernum}`)">
|
||
{{ order.statename }} <van-icon name="arrow"></van-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="userinfo">
|
||
<img :src="$file(order.userimg)" class="icon" alt="">
|
||
<div class="info">
|
||
<span>{{ order.usercellphone }}</span>
|
||
<p>{{ $formatGMT(order.addtime, 'yyyy-MM-dd HH:mm:ss') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="count">
|
||
<div>
|
||
<b>￥{{ order.ordermoney }}</b>
|
||
<span>商品总额</span>
|
||
</div>
|
||
<div>
|
||
<b>￥{{ order.discount }}</b>
|
||
<span>让利金额</span>
|
||
</div>
|
||
<div class="red">
|
||
<b>￥{{ order.income }}</b>
|
||
<span>应收金额</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</BaseList>
|
||
|
||
<van-popup v-model:show="showDate" position="bottom">
|
||
<van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
|
||
@cancel="showDate = false" />
|
||
</van-popup>
|
||
|
||
<van-popup v-model:show="showRight" position="right" :style="{ width: '80%', height: '100%' }">
|
||
<div class="filter-popup">
|
||
<div class="filter-header">
|
||
<span @click="showRight = false">取消</span>
|
||
<span>筛选</span>
|
||
<span @click="resetFilter">重置</span>
|
||
</div>
|
||
|
||
<div class="filter-content">
|
||
<div class="filter-section">
|
||
<div class="section-title">用户手机号</div>
|
||
<van-field v-model="filterForm.cellphone" placeholder="输入手机号筛选" clearable />
|
||
</div>
|
||
|
||
<div class="filter-section">
|
||
<div class="section-title">订单号</div>
|
||
<van-field v-model="filterForm.ordernum" placeholder="输入订单号筛选" clearable />
|
||
</div>
|
||
|
||
<div class="filter-section">
|
||
<div class="section-title">买单时间</div>
|
||
<div class="date-range" @click="showDateRange = true">
|
||
<span v-if="filterForm.starttime">{{ filterForm.starttime }}</span>
|
||
<span v-else class="placeholder">开始日期</span>
|
||
<span class="to">至</span>
|
||
<span v-if="filterForm.endtime">{{ filterForm.endtime }}</span>
|
||
<span v-else class="placeholder">结束日期</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="filter-section">
|
||
<div class="section-title">订单状态</div>
|
||
<van-radio-group v-model="filterForm.status" direction="horizontal">
|
||
<van-radio name="-1">全部</van-radio>
|
||
<van-radio name="0">待付款</van-radio>
|
||
<van-radio name="1">待处理</van-radio>
|
||
<van-radio name="3">已完成</van-radio>
|
||
</van-radio-group>
|
||
</div> -->
|
||
</div>
|
||
|
||
<van-action-bar>
|
||
<van-action-bar-button type="warning" text="重置" @click="resetFilter" />
|
||
<van-action-bar-button type="danger" text="确认" @click="confirmFilter" />
|
||
</van-action-bar>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- <van-popup v-model:show="showDateRange" position="bottom" :style="{ height: '75%' }"> -->
|
||
<van-calendar v-model:show="showDateRange" type="range" :min-date="new Date(2026, 0, 1)" @confirm="onDateRangeConfirm" />
|
||
|
||
<!-- <van-calendar type="range" v-model="selectedDateRange" :min-date="new Date(new Date().getFullYear() - 1, 0, 1)"
|
||
title="选择日期区间" show-title show-subtitle @confirm="onDateRangeConfirm" /> -->
|
||
<!-- </van-popup> -->
|
||
</div>
|
||
</BasePage>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'MerchantTrade',
|
||
data() {
|
||
return {
|
||
date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||
currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||
showDate: false,
|
||
showRight: false,
|
||
showDateRange: false,
|
||
filterForm: {
|
||
cellphone: '',
|
||
ordernum: '',
|
||
starttime: '',
|
||
endtime: '',
|
||
status: '-1'
|
||
},
|
||
GiftName: { 0: '待付款', 1: '待处理', 2: '待处理', 3: '已完成', 4: '已完成' },
|
||
searchParams: {
|
||
year: new Date().getFullYear(),
|
||
month: new Date().getMonth() + 1,
|
||
cellphone: '',
|
||
ordernum: '',
|
||
starttime: '',
|
||
endtime: ''
|
||
},
|
||
data: {
|
||
img: ''
|
||
},
|
||
searchKey: '',
|
||
selectedDateRange: [new Date(), new Date()]
|
||
}
|
||
},
|
||
methods: {
|
||
parseData(res) {
|
||
return res.data || []
|
||
},
|
||
onLoad(list) {
|
||
console.log('list loaded:', list);
|
||
},
|
||
onconfirm(value) {
|
||
this.date = this.currentDate;
|
||
this.searchParams.year = parseInt(this.currentDate[0])
|
||
this.searchParams.month = parseInt(this.currentDate[1])
|
||
this.showDate = false;
|
||
this.$refs.listRef?.refresh();
|
||
},
|
||
onDateRangeConfirm(date) {
|
||
if (Array.isArray(date) && date.length >= 2) {
|
||
this.filterForm.starttime = this.formatDate(date[0]);
|
||
this.filterForm.endtime = this.formatDate(date[date.length - 1]);
|
||
}
|
||
this.showDateRange = false;
|
||
},
|
||
formatDate(date) {
|
||
const d = new Date(date);
|
||
const year = d.getFullYear();
|
||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
resetFilter() {
|
||
this.filterForm = {
|
||
cellphone: '',
|
||
ordernum: '',
|
||
starttime: '',
|
||
endtime: '',
|
||
status: '-1'
|
||
};
|
||
},
|
||
confirmFilter() {
|
||
this.searchParams.cellphone = this.filterForm.cellphone;
|
||
this.searchParams.ordernum = this.filterForm.ordernum;
|
||
this.searchParams.starttime = this.filterForm.starttime;
|
||
this.searchParams.endtime = this.filterForm.endtime;
|
||
this.showRight = false;
|
||
this.$refs.listRef?.refresh();
|
||
},
|
||
getStateClass(state) {
|
||
switch (state) {
|
||
case 4:
|
||
case 3:
|
||
return 'green';
|
||
case 2:
|
||
case 1:
|
||
return 'yellow';
|
||
case 0:
|
||
return 'red';
|
||
default:
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
}
|
||
</script>
|