708 lines
16 KiB
Vue
708 lines
16 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 顶部导航栏 -->
|
|
<u-navbar title="订单管理" :border-bottom="false" :background="bgc" :is-back="false" title-color='#fff'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
<!-- 背景图片 -->
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode="widthFix"></image>
|
|
|
|
<!-- 时间选择和搜索区域 -->
|
|
<view class="search-section">
|
|
<!-- <view class="time-range">
|
|
<text class="label">时间范围</text>
|
|
<view class="date-picker">
|
|
<view class="date-box" @click="showStartDatePicker">{{startDate}}</view>
|
|
<text class="divider">--</text>
|
|
<view class="date-box" @click="showEndDatePicker">{{endDate}}</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="time">
|
|
<view class="timewz">
|
|
时间范围
|
|
</view>
|
|
<view class="inptime">
|
|
<view class="" @click="showTimePicker('start')">
|
|
{{kstime}}
|
|
</view>
|
|
--
|
|
<view class="" @click="showTimePicker('end')">
|
|
{{jstime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
|
|
<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
|
|
|
|
<view class="search-box">
|
|
<u-search placeholder="订单编号" v-model="searchText" :show-action="false" bg-color="rgba(17, 17, 17, 0.8)" border-color="rgba(17, 17, 17, 0.8)" placeholder-color="#666" height="70" search-icon-color="#666" @input="searchOrder"></u-search>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单类型切换 -->
|
|
<view class="order-tabs">
|
|
<view class="tab-item" :class="{active: currentType === 1}" @click="switchType(1)">
|
|
<text>爆灯订单</text>
|
|
<view class="active-line" v-if="currentType === 1"></view>
|
|
</view>
|
|
<view class="tab-item" :class="{active: currentType === 2}" @click="switchType(2)">
|
|
<text>赠礼订单</text>
|
|
<view class="active-line" v-if="currentType === 2"></view>
|
|
</view>
|
|
<view class="tab-item" :class="{active: currentType === 3}" @click="switchType(3)">
|
|
<text>免费订单</text>
|
|
<view class="active-line" v-if="currentType === 3"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单列表 refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"-->
|
|
<scroll-view scroll-y class="order-list" @scrolltolower="loadMoreOrders" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white">
|
|
<view>
|
|
<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
|
|
<view class="order-header">
|
|
<text class="order-num">订单编号：{{item.orderNo}}</text>
|
|
<text class="order-status" v-if="item.status == 'CANCELED'" :class="{'canceled': item.status == 'CANCELED'}">已取消</text>
|
|
<text class="order-status" v-if="item.status == 'FINISHED'" :class="{'canceled': item.status == 'CANCELED'}">已完成</text>
|
|
<text class="order-status" v-if="item.status == 'WAIT_PAY'" :class="{'canceled': item.status == 'CANCELED'}">待支付</text>
|
|
<text class="order-status" v-if="item.status == 'REFUNDED'" :class="{'canceled': item.status == 'CANCELED'}">已退款</text>
|
|
</view>
|
|
<view class="order-content">
|
|
<text class="shop-name">店铺名称：{{item.storeName == null ? '--' : item.storeName}}</text>
|
|
<text class="light-times">爆灯次数：{{item.suitNum == null ? '--' : item.suitNum}}次</text>
|
|
<text class="order-time">订单时间：{{item.createTime == null ? '--' : item.createTime}}</text>
|
|
</view>
|
|
<view class="order-footer">
|
|
<text class="shop-name">订单金额：</text>
|
|
<text class="price">¥{{item.payedAmount == null ? '0' : item.payedAmount}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<!-- <view class="loading-more" v-if="hasMoreData">
|
|
<text>加载中...</text>
|
|
</view> -->
|
|
<view class="no-more-data">
|
|
<text>没有更多数据了...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<!-- <view class="empty-state" v-else>
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/empty_orders.png" mode="aspectFit"></image>
|
|
<text>暂无订单数据</text>
|
|
</view> -->
|
|
</scroll-view>
|
|
|
|
<!-- 日期选择器弹窗 -->
|
|
<u-picker mode="date" :show="showDatePicker" :params="datePickerParams" @confirm="confirmDate" @cancel="cancelDatePicker"></u-picker>
|
|
|
|
<!-- 退款确认弹窗 -->
|
|
<u-popup :show="showRefundPopup" mode="center" width="600rpx" height="auto" border-radius="20" @close="closeRefundPopup">
|
|
<view class="refund-popup">
|
|
<view class="refund-title">确认退款</view>
|
|
<view class="refund-content">
|
|
<text>确定要对此订单进行退款操作吗？</text>
|
|
<text class="refund-order-no">订单号：{{currentRefundOrder.orderNo}}</text>
|
|
</view>
|
|
<view class="refund-btns">
|
|
<button class="cancel-btn" @click="closeRefundPopup">取消</button>
|
|
<button class="confirm-btn" @click="confirmRefund">确认退款</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 底部导航栏 -->
|
|
<view class="tab_list">
|
|
<view class="tab_list_item" @click="btntab(1)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uiw8EIRhLgNUXRFEhdVQ" mode=""></image>
|
|
<text>工作台</text>
|
|
</view>
|
|
<view class="tab_list_item" @click="btntab(2)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/ugQrdopAf0yS4YkyKtZG" mode=""></image>
|
|
<text>运营</text>
|
|
</view>
|
|
<view class="tab_list_item" @click="btntab(3)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uGf55UsYl89B2mceXR69" mode=""></image>
|
|
<text style="color: #FF8998;">订单</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "",
|
|
},
|
|
searchText: '',
|
|
currentType: 1, // 1: 爆灯订单, 2: 赠礼订单, 3: 免费订单
|
|
orderList: [],
|
|
// 分页相关
|
|
page: 1,
|
|
pageSize: 10,
|
|
hasMoreData: true,
|
|
isRefreshing: false,
|
|
|
|
// 日期选择相关
|
|
startDate: '2025-03-18',
|
|
endDate: '2025-05-18',
|
|
showDatePicker: false,
|
|
datePickerParams: {},
|
|
currentPickerType: '', // 'start' 或 'end'
|
|
|
|
// 退款相关
|
|
showRefundPopup: false,
|
|
currentRefundOrder: {},
|
|
pageNum:1,
|
|
total:'',
|
|
oneparams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
oneshow: false,
|
|
twoparams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
twoshow: false,
|
|
kstime:'',
|
|
jstime:'',
|
|
isRefreshing:false
|
|
}
|
|
},
|
|
onLoad() {
|
|
const currentDate = new Date()
|
|
const year = currentDate.getFullYear()
|
|
const month = currentDate.getMonth() + 1
|
|
const day = currentDate.getDate()
|
|
const formatDate = (year, month, day) => {
|
|
const formattedMonth = month < 10 ? `0${month}` : month
|
|
const formattedDay = day < 10 ? `0${day}` : day
|
|
return `${year}-${formattedMonth}-${formattedDay}`
|
|
}
|
|
this.kstime = formatDate(year, month, day)
|
|
this.jstime = formatDate(year, month, day)
|
|
this.pageNum = 1
|
|
this.loadOrderData();
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.isRefreshing = true
|
|
this.pageNum = 1
|
|
this.loadOrderData();
|
|
setTimeout(() => {
|
|
this.isRefreshing = false
|
|
}, 1000)
|
|
},
|
|
// 选择开始时间
|
|
confirmone(e){
|
|
this.kstime = e.year + '-' + e.month + '-' + e.day
|
|
this.pageNum = 1
|
|
this.loadOrderData()
|
|
},
|
|
// 选择结束时间
|
|
confirmtwo(e){
|
|
this.jstime = e.year + '-' + e.month + '-' + e.day
|
|
this.pageNum = 1
|
|
this.loadOrderData()
|
|
},
|
|
showTimePicker(type) {
|
|
if(type === 'start') {
|
|
this.oneshow = true
|
|
} else {
|
|
this.twoshow = true
|
|
}
|
|
},
|
|
// 切换订单类型
|
|
switchType(type) {
|
|
this.currentType = type;
|
|
this.orderList = [];
|
|
if(type == 1){
|
|
this.pageNum = 1
|
|
this.loadOrderData();
|
|
}
|
|
},
|
|
// 点击跳转到订单详情
|
|
goOrderDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/page_shanghu/order/orderxq?orderid=' + item.id
|
|
})
|
|
},
|
|
// 加载订单数据
|
|
loadOrderData() {
|
|
// 模拟API请求
|
|
this.$u.get(`/bst/order/list?storeId=${this.$store.state.storeId}&pageNum=${this.pageNum}&pageSize=20&beginTime=${this.kstime}&endTime=${this.jstime}&keyword=${this.searchText}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if (this.pageNum == 1) {
|
|
this.orderList = res.rows
|
|
this.pageNum++
|
|
} else {
|
|
this.orderList = this.orderList.concat(res.rows)
|
|
this.pageNum++
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 加载更多
|
|
loadMoreOrders() {
|
|
if(this.total > this.orderList.length){
|
|
this.loadOrderData();
|
|
}else{
|
|
console.log(111);
|
|
}
|
|
},
|
|
|
|
// // 下拉刷新
|
|
// onRefresh() {
|
|
// this.isRefreshing = true;
|
|
// this.pageNum = 1;
|
|
// this.hasMoreData = true;
|
|
// this.loadOrderData();
|
|
// console.log('1111')
|
|
// },
|
|
|
|
// 搜索订单
|
|
searchOrder() {
|
|
this.pageNum = 1;
|
|
this.loadOrderData();
|
|
},
|
|
|
|
// 底部导航切换
|
|
btntab(num) {
|
|
if(num == 1) {
|
|
uni.reLaunch({
|
|
url:'/page_shanghu/index'
|
|
})
|
|
} else if(num == 2) {
|
|
uni.reLaunch({
|
|
url:'/page_shanghu/yuying'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 日期选择相关
|
|
showStartDatePicker() {
|
|
this.currentPickerType = 'start';
|
|
this.datePickerParams = {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
timestamp: false
|
|
}
|
|
this.showDatePicker = true
|
|
},
|
|
|
|
showEndDatePicker() {
|
|
this.currentPickerType = 'end'
|
|
this.datePickerParams = {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
timestamp: false
|
|
}
|
|
this.showDatePicker = true
|
|
},
|
|
|
|
confirmDate(e) {
|
|
const date = e.year + '-' + this.formatNum(e.month) + '-' + this.formatNum(e.day);
|
|
if (this.currentPickerType === 'start') {
|
|
this.startDate = date;
|
|
} else {
|
|
this.endDate = date;
|
|
}
|
|
this.showDatePicker = false;
|
|
// 重新加载数据
|
|
this.page = 1;
|
|
this.orderList = [];
|
|
this.hasMoreData = true;
|
|
this.loadOrderData();
|
|
},
|
|
|
|
cancelDatePicker() {
|
|
this.showDatePicker = false;
|
|
},
|
|
|
|
formatNum(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
},
|
|
|
|
// 处理退款
|
|
handleRefund(item) {
|
|
this.currentRefundOrder = item;
|
|
this.showRefundPopup = true;
|
|
},
|
|
|
|
closeRefundPopup() {
|
|
this.showRefundPopup = false;
|
|
},
|
|
|
|
confirmRefund() {
|
|
// 这里应该调用退款API
|
|
uni.showLoading({
|
|
title: '处理中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '退款成功',
|
|
icon: 'success'
|
|
})
|
|
// 更新订单状态
|
|
this.orderList = this.orderList.map(item => {
|
|
if (item.orderNo === this.currentRefundOrder.orderNo) {
|
|
return {
|
|
...item,
|
|
status: '已退款',
|
|
canRefund: false
|
|
}
|
|
}
|
|
return item
|
|
})
|
|
this.showRefundPopup = false
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #000;
|
|
}
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
padding-bottom: 176rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bj {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 搜索区域 */
|
|
.search-section {
|
|
padding: 10rpx 20rpx;
|
|
.time{
|
|
width: 696rpx;
|
|
height: 96rpx;
|
|
background: #000000;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 22rpx 34rpx;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
.timewz{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
.inptime{
|
|
display: flex;
|
|
align-items: center;
|
|
color: #979797;
|
|
view{
|
|
margin-left: 10rpx;
|
|
margin-right: 10rpx;
|
|
width: 196rpx;
|
|
height: 52rpx;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
border: 1rpx solid #808080;
|
|
text-align: center;
|
|
line-height: 52rpx;
|
|
font-size: 28rpx;
|
|
color: #979797;
|
|
}
|
|
}
|
|
}
|
|
.time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #888;
|
|
display: block;
|
|
}
|
|
|
|
.date-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.date-box {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
background-color: #222;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 4rpx;
|
|
text-align: center;
|
|
min-width: 180rpx;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
margin: 0 15rpx;
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
margin-top: 30rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
|
|
/* 订单标签 */
|
|
.order-tabs {
|
|
display: flex;
|
|
height: 70rpx;
|
|
border-bottom: 1rpx solid #1a1a1a;
|
|
border-top: 1rpx solid #1a1a1a;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
line-height: 70rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
&.active {
|
|
text {
|
|
color: #FF8998;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background-color: #FF8998;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 订单列表 */
|
|
.order-list {
|
|
// padding: 0 20rpx;
|
|
height: 60vh;
|
|
overflow: scroll;
|
|
.refund-btn {
|
|
background-color: transparent;
|
|
border: 1px solid #FF8998;
|
|
color: #FF8998;
|
|
font-size: 24rpx;
|
|
padding: 3rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
line-height: 1.5;
|
|
height: 100rpx;
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
.order-item {
|
|
background-color: rgba(17, 17, 17, 0.8);
|
|
padding: 20rpx;
|
|
border-bottom: 1px solid #222;
|
|
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10rpx;
|
|
|
|
.order-num {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.order-status {
|
|
font-size: 24rpx;
|
|
color: #FF8998;
|
|
|
|
&.canceled {
|
|
color: #888;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-content {
|
|
.shop-name, .light-times, .order-time {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.order-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
.shop-name, .light-times, .order-time {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: block;
|
|
}
|
|
.price {
|
|
color: #FF8998;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 加载更多 */
|
|
.loading-more, .no-more-data {
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 600rpx;
|
|
|
|
image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 退款弹窗 */
|
|
.refund-popup {
|
|
padding: 30rpx;
|
|
|
|
.refund-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.refund-content {
|
|
margin-bottom: 30rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: block;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.refund-order-no {
|
|
margin-top: 20rpx;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.refund-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
button {
|
|
flex: 1;
|
|
margin: 0 10rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 10rpx;
|
|
|
|
&.cancel-btn {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
&.confirm-btn {
|
|
background-color: #FF8998;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部导航 */
|
|
.tab_list {
|
|
width: 750rpx;
|
|
height: 176rpx;
|
|
background: #0B0B0B;
|
|
box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 100;
|
|
|
|
.tab_list_item {
|
|
width: 33%;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |