You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
757 lines
21 KiB
757 lines
21 KiB
<template>
|
|
<view class="bg">
|
|
<!-- 顶部搜索和筛选区域 -->
|
|
<view class="top-bg">
|
|
<view class="flex-around" style="margin-bottom: 20rpx;">
|
|
<view class="search-box">
|
|
<view class="left">
|
|
<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" mode="aspectFill"></image>
|
|
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search" />
|
|
</view>
|
|
</view>
|
|
<view class="select-btn" @click="range = []; dateIndex = null; $refs.popup.open()">
|
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/select.png" mode="aspectFill"></image>
|
|
筛选
|
|
</view>
|
|
</view>
|
|
<view class="common-box">
|
|
<view class="common-types com-flex-tao">
|
|
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
|
|
:class="['common-type', typeIndex === index ? 'active' : '']">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 无订单提示 -->
|
|
<view class="list-common-empty" v-if="list.length === 0">
|
|
<img src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/noTrades.png" />
|
|
<p class="list-common-empty-tip">还没有订单，赶快去下单吧~</p>
|
|
</view>
|
|
<!-- 订单列表 -->
|
|
<view class="trade-list" v-if="list.length > 0">
|
|
<view v-for="(item, key) in list" :key="item.order_id" class="trade-items" v-if="showItem(item)"
|
|
@click="() => choseType(item)">
|
|
<view class="trade-item-head">
|
|
<view class="trade-item-head-tid">订单编号:{{ item.order_id }}</view>
|
|
<view class="trade-item-head-state">{{ item.state_text }}</view>
|
|
</view>
|
|
<view class="trade-item-pros">
|
|
<view class="trade-item-pro" v-for="(pro, proIndex) in item.order_product_list" :key="pro.child_id">
|
|
<view class="trade-item-pro-img" v-if="pro.product_img">
|
|
<image :src="showImg(pro.product_img)" mode="aspectFill"></image>
|
|
</view>
|
|
<view style="flex: 1;">
|
|
<view class="trade-item-pro-title">{{ pro.product_title }}</view>
|
|
<view class="trade-item-pro-subtitle">{{ pro.sku_name }}</view>
|
|
</view>
|
|
<view class="trade-item-pro-price">
|
|
<view class="trade-item-pro-price-pri">￥{{ pro.product_price / 100 }}</view>
|
|
<view class="trade-item-pro-num">x{{ pro.product_num }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="trade-item-info">
|
|
合计
|
|
<text>{{ item.paid_money / 100 }}</text>
|
|
</view>
|
|
<view class="trade-item-btns">
|
|
<view @click.stop="() => refund(item.order_id, key)" v-if="['WAIT_POST','WAIT_USE','PAID'].includes(item.state)">
|
|
取消订单
|
|
</view>
|
|
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.state === 'UNPAID'">
|
|
关闭订单
|
|
</view>
|
|
<!-- <view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> -->
|
|
<view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.state === 'UNPAID'">
|
|
立即支付
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选弹框 -->
|
|
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
|
<view class="popup-box">
|
|
<view class="popup-top flex-between">
|
|
<view @click="$refs.popup.close()">取消</view>
|
|
<view>订单筛选</view>
|
|
<view @click="changeDate">确定</view>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="content-top">下单时间</view>
|
|
<view class="content-bottom">
|
|
<view class="flex-between">
|
|
<view :class="['content-item', {'content-active': dateIndex === 0 && range.length === 0}]"
|
|
@click="range = []; dateIndex = 0">近七天</view>
|
|
<view :class="['content-item', {'content-active': dateIndex === 1 && range.length === 0}]"
|
|
@click="range = []; dateIndex = 1">近三十天</view>
|
|
</view>
|
|
<uni-datetime-picker v-model="range" type="daterange" :end="new Date().Format('Y-MM-dd')" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Trades',
|
|
data() {
|
|
return {
|
|
finished: false,
|
|
list: [],
|
|
typeList: [
|
|
{ name: '全部', id: 'ALL' },
|
|
{ name: '待付款', id: 'WAIT_PAYMENT' },
|
|
{ name: '待发货', id: 'WAIT_POST' },
|
|
{ name: '待使用/出行', id: 'WAIT_USE' },
|
|
{ name: '待收货', id: 'WAIT_DELIVERY' },
|
|
{ name: '退款/售后', id: 'NEED_REFUND' }
|
|
],
|
|
typeIndex: 0,
|
|
ajaxFlag: true,
|
|
keywords: '',
|
|
orderId: null,
|
|
dateRange: [],
|
|
type: '',
|
|
range: [],
|
|
dateIndex: null,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
console.log(options);
|
|
if (options.type) {
|
|
this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type);
|
|
}
|
|
uni.$on("updateDataByConnect", this.getDataByConnect);
|
|
},
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
onUnload() {
|
|
uni.$off("updateDataByConnect", this.getDataByConnect);
|
|
},
|
|
onReachBottom() {
|
|
if (this.finished) return false;
|
|
this.getList();
|
|
},
|
|
watch: {
|
|
range(newval) {
|
|
console.log('范围选:', this.range);
|
|
},
|
|
},
|
|
methods: {
|
|
// 获取近n天日期
|
|
getLastNDays(n) {
|
|
const endDate = new Date();
|
|
const startDate = new Date();
|
|
startDate.setDate(endDate.getDate() - n + 1); // 计算开始日期（包含今天）
|
|
|
|
// 格式化日期为 YYYY-MM-DD
|
|
const formatDate = (date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
return [formatDate(startDate), formatDate(endDate)];
|
|
},
|
|
// 处理数据更新事件
|
|
getDataByConnect(data) {
|
|
if (data.msgType === "updateOrderTrades") {
|
|
this.resetList();
|
|
this.getList();
|
|
}
|
|
},
|
|
// 显示订单项的判断逻辑
|
|
showItem(item) {
|
|
let flag = true;
|
|
// if (this.typeIndex === 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false;
|
|
return flag;
|
|
},
|
|
// 重新加载数据
|
|
onReload() {
|
|
this.resetList();
|
|
this.getList();
|
|
},
|
|
// 设置订单类型
|
|
setType(index) {
|
|
this.typeIndex = index;
|
|
this.onReload();
|
|
},
|
|
// 设置订单ID并发起支付
|
|
setOrderId(id) {
|
|
this.orderId = id;
|
|
this.Post({
|
|
order_id: id,
|
|
pay_platform: "miniprogram",
|
|
pay_method: 'abc'
|
|
}, '/api/order/pay')
|
|
.then(res => {
|
|
if (res.data) {
|
|
uni.requestPayment({
|
|
nonceStr: res.data.nonceStr,
|
|
package: res.data.package,
|
|
paySign: res.data.paySign,
|
|
signType: res.data.signType,
|
|
timeStamp: res.data.timeStamp,
|
|
success: () => {
|
|
this.resetList();
|
|
this.getList();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 确认收货
|
|
confirmpost(id, index) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否确认收货？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: id }, '/api/order/confirmPost')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
this.list[index].order_child.forEach(item => {
|
|
item.status = 'WAIT_COMMENT';
|
|
});
|
|
this.list[index].status = 'WAIT_COMMENT';
|
|
this.list[index].postFlag = false;
|
|
this.list = [...this.list];
|
|
uni.showToast({ title: '操作成功' });
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 关闭订单
|
|
closeOrder(id, index) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否关闭订单？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: id }, '/api/order/close')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '关闭成功', icon: 'success' });
|
|
this.resetList();
|
|
this.getList();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 删除订单
|
|
deletOrder(id) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否删除订单？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: id }, '/api/order/delOrder')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '删除成功', icon: 'success' });
|
|
this.resetList();
|
|
this.getList();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 申请退款
|
|
refund(id, index) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否申请退款？',
|
|
success: successRes => {
|
|
if (successRes.confirm) {
|
|
this.Post({ order_id: id }, '/api/order/refund')
|
|
.then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({ title: '申请成功', icon: 'success' });
|
|
this.onReload();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 搜索订单
|
|
search() {
|
|
this.resetList();
|
|
this.getList();
|
|
},
|
|
// 确定日期筛选
|
|
changeDate() {
|
|
if (this.dateIndex === 0) {
|
|
this.range = this.getLastNDays(7);
|
|
} else if (this.dateIndex === 1) {
|
|
this.range = this.getLastNDays(30);
|
|
}
|
|
this.$refs.popup.close();
|
|
this.resetList();
|
|
this.getList();
|
|
},
|
|
// 获取订单列表
|
|
getList() {
|
|
const data = {
|
|
state: this.typeList[this.typeIndex].id === 'ALL' ? '' : this.typeList[this.typeIndex].id,
|
|
offset: this.list.length,
|
|
limit: 5,
|
|
keywords: this.keywords,
|
|
start_date: this.range[0] || '',
|
|
end_date: this.range[1] || ''
|
|
};
|
|
this.Post(data, '/api/order/list')
|
|
.then(res => {
|
|
this.list = [...this.list, ...res.data.list];
|
|
if (res.data.length < 5) {
|
|
this.finished = true;
|
|
}
|
|
});
|
|
},
|
|
// 更新订单信息
|
|
UpdateOrder(id) {
|
|
this.ajaxFlag = false;
|
|
this.Post({ order_id: id }, '/api/order/orderDetail')
|
|
.then(res => {
|
|
this.ajaxFlag = true;
|
|
const newList = this.list.map(item => {
|
|
if (item.order_id === id) {
|
|
return res.data;
|
|
}
|
|
return item;
|
|
});
|
|
this.list = newList;
|
|
});
|
|
},
|
|
// 选择订单进入详情页
|
|
choseType(item) {
|
|
uni.navigateTo({ url: `/subPackages/order/orderDetail?id=${item.order_id}` });
|
|
},
|
|
// 重置订单列表
|
|
resetList() {
|
|
this.list = [];
|
|
this.finished = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 样式部分保持不变
|
|
view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.common-box {
|
|
height: 90rpx;
|
|
}
|
|
|
|
.common-types {
|
|
background: white;
|
|
height: 90rpx;
|
|
font-size: 31rpx;
|
|
z-index: 10;
|
|
margin: auto;
|
|
color: #666;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
padding: 0 27rpx;
|
|
}
|
|
|
|
.common-types::-webkit-scrollbar {
|
|
width: 0rpx;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
.common-type {
|
|
flex-shrink: 0;
|
|
margin: 0 26rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.common-type.active {
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.common-type.active:after {
|
|
display: block;
|
|
width: 60%;
|
|
font-size: 0;
|
|
content: '1';
|
|
margin: auto;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 1rpx;
|
|
height: 4rpx;
|
|
background: #6A8A27;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.bg {
|
|
min-height: 100vh;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.noDate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 200rpx;
|
|
}
|
|
|
|
.noDate img {
|
|
width: 514rpx;
|
|
height: auto;
|
|
}
|
|
|
|
.noDate view {
|
|
font-size: 24rpx;
|
|
color: #777777;
|
|
}
|
|
|
|
.trade-list {
|
|
padding: 28rpx 26rpx;
|
|
}
|
|
|
|
.trade-items {
|
|
background-color: white;
|
|
margin-bottom: 28rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.trade-item-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 28rpx 20rpx;
|
|
border-bottom: 1rpx solid #d8d8d8;
|
|
}
|
|
|
|
.trade-item-head-tid {
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666666;
|
|
}
|
|
|
|
.trade-item-head-state {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #6A8A27;
|
|
}
|
|
|
|
.trade-item-head-name {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
|
|
image {
|
|
width: 33rpx;
|
|
height: 31rpx;
|
|
}
|
|
|
|
view {
|
|
margin-left: 13rpx;
|
|
}
|
|
}
|
|
|
|
.trade-item-pros {
|
|
display: flex;
|
|
/* background-color: #F2F2F2; */
|
|
flex-direction: column;
|
|
}
|
|
|
|
.trade-item-pro {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.trade-item-pro-img {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.trade-item-pro-img image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.trade-item-pro-price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.trade-item-pro-title {
|
|
text-align: left;
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.trade-item-pro-subtitle {
|
|
text-align: left;
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #6A8A27;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.trade-item-pro-price view {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
text-wrap: none;
|
|
white-space: nowrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.trade-item-pro-price-pri {
|
|
font-size: 27rpx;
|
|
color: #6A8A27;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.trade-item-pro-num {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.trade-item-info {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
background-color: white;
|
|
padding: 0rpx 20rpx;
|
|
margin-top: -6rpx;
|
|
/* border-bottom: 1px solid #B6B6B6; */
|
|
}
|
|
|
|
.trade-item-info text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: rgba(195, 40, 46, 1);
|
|
}
|
|
|
|
.trade-item-info text::before {
|
|
font-size: 26rpx;
|
|
content: '￥';
|
|
}
|
|
|
|
.trade-item-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.trade-item-btns view {
|
|
margin-left: 20rpx;
|
|
background: rgba(237, 237, 237, 0);
|
|
border: 1rpx solid #999999;
|
|
border-radius: 27rpx;
|
|
padding: 8rpx 16rpx;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.trade-item-btns .pay-btn {
|
|
color: #FFFFFF;
|
|
background: #6A8A27;
|
|
border: none;
|
|
padding: 10rpx 16rpx;
|
|
}
|
|
|
|
.comment-btn {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #999999;
|
|
color: #333333;
|
|
justify-content: center !important;
|
|
font-size: 24rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.list-common-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.list-common-empty img {
|
|
width: 317.33rpx;
|
|
height: 282rpx;
|
|
}
|
|
|
|
.list-common-empty-tip {
|
|
margin-top: 36rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.com-flex-tao {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box {
|
|
width: 600rpx;
|
|
height: 67rpx;
|
|
background: #f2f2f2;
|
|
border-radius: 33rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8rpx 0 28rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
input {
|
|
margin-left: 20rpx;
|
|
font-size: 31rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
width: 450rpx;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 107rpx;
|
|
height: 53rpx;
|
|
background: #71B580;
|
|
border-radius: 27rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 53rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.top-bg {
|
|
background: #fff;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.select-btn {
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
color: #6A8A27;
|
|
|
|
image {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.popup-box {
|
|
height: 70vh;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
background: #F7F7F7;
|
|
padding: 0 25rpx;
|
|
|
|
.popup-top {
|
|
height: 110rpx;
|
|
font-weight: 400;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
|
|
&>view:nth-child(2) {
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
}
|
|
|
|
&>view:last-child {
|
|
color: #6A8A2D;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
height: calc(70vh - 110rpx);
|
|
padding: 0 28rpx;
|
|
background-color: #fff;
|
|
|
|
.content-top {
|
|
height: 94rpx;
|
|
border-bottom: 1px solid #CCCCCC;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-bottom {
|
|
padding-top: 40rpx;
|
|
|
|
.content-item {
|
|
margin-bottom: 27rpx;
|
|
width: 307rpx;
|
|
line-height: 67rpx;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
border: 1px solid #CCCCCC;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.content-active {
|
|
border: 1px solid #6A8A27;
|
|
color: #6A8A27;
|
|
}
|
|
|
|
::v-deep .uni-date {
|
|
border: 1px solid #CCCCCC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|