flavorOfTimeSz/subPackages/order/trades.vue

<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.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.total_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,
                type: "miniprogram",
                platform: 'miniprogram'
            }, '/api/pay/unify')
               .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: () => {
                                const templateIds = [
                                    // 退款成功通知
                                    'hRZoiEES2BWtKb6Xgsnn8khLQH9un5j_11qu0bwlhfE',
                                    // 出票结果通知
                                    'YyTCUIYBnrj9CyKks8cOjNX_Rk8a4yVdswMP-zXVbhc'
                                ];
                                uni.requestSubscribeMessage({
                                    tmplIds: templateIds,
                                    complete: () => {
                                        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>