Client-Teapay/src/pages/szw-order-list/index.vue

<template>
    <view class="container">
        <view class="status-box">
            <view class="status_tap_box" style="position: relative">
                <view @tap="statusTap" class="status-label" v-for="(item, index) in statusType" :key="index" :class="item[0] == currentType ? 'active' : ''" :data-index="item[0]">{{ item[1] }}</view>
            </view>
        </view>
        <not-goods v-if="haveGoods" textStr="抱歉！暂无相关订单" />
        <view class="order-list" v-if="orderList && orderList.length > 0">
            <view v-for="(li, index) in orderList" :key="index">
                <view class="a-order">
                    <view class="overflow" :data-id="li.id">
                        <view class="list-title flex_r flex_ac flex_jb">
                            <view :class="['fz_text', 'typetag', 'tagcolor' + li.type]">{{ tidyTpye(li.type) }}</view>
                            <view class="fz_text">{{ tidyStatus([li.pay_status, li.order_status]) }}</view>
                        </view>
                        <view class="goods-info flex_r flex_jb" :data-type="li.type" @tap="toDetails(li)">
                            <image :src="li.original_img" mode="cover" class="goods-img" />
                            <view class="goodsDetail_info">
                                <view class="good_name ellipsis2">{{ li.goods_name || "" }}</view>
                                <view class="good_text flex_r flex_ac flex_jb">
                                    <view class="unimport dinB">x {{ li.goods_num }}</view>
                                    <view class="goods_price r_color">￥<text class="r_color">{{ li.total_amount }}</text></view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="price-box flex_r flex_ac">
                        <template v-if="li.order_status != 5">
                            <view class="btn cancel-btn" v-if="[0].includes(li.order_status)" @tap="toCancel(li)">取消订单</view>
                            <view class="btn topay-btn" v-if="[0,2].includes(li.pay_status)" @tap="toPay(li)">立即支付</view>
                            <view class="btn topay-btn" @tap="toTake(li)" v-if="[0,1,7].includes(li.order_status) && [1].includes(li.pay_status)">确认收货</view>
                            <view class="btn topay-btn" @tap="toCode(li)" v-if="[8].includes(li.order_status)">待自提</view>
                        </template>
                        <template v-else>
                            <view class="btn cancel-btn" @tap="removeItem(li.order_id)">删除</view>
                        </template>
                        <view class="btn cancel-btn" @click="toDetails(li)">查看订单</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="loading-indicator opacity">{{ loadingTip }}</view>
        <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" />
    </view>
</template>
<script>
var page = 1;
var app = getApp();
import { ToPayOpre } from "@/utils/reqTools.js";
var toPayOpre = new ToPayOpre();
import notGoods from "@/components/not-goods/index";
import authorizeModule from "@/components/authorize-module/index";
import { post } from "@/request/api.js";
export default {
    components: {
        notGoods,
        authorizeModule
    },
    data() {
        return {
            statusType: [
                ["0", "全部"],
                ["1", "待付款"],
                ["5", "待自提"],
                ["2", "待发货"],
                ["3", "待收货"],
                ["4", "已完成"],
            ],
            orderList: [],
            currentType: "0",
            haveGoods: false,
            loadingMoreHidden: true,
            loadingTip: "没有更多了",
            userId: "",
            isweixin: "",
            pt: {},
            shopInfo: {}, // 商铺信息
            unid: "",
            token: uni.getStorageSync("token"),
        };
    },
    onLoad(options) {
        this.currentType = options.status ? options.status : 0;
    },
    onShow() {
        if (!this.token) this.login()
        else this.loadData();
    },
    methods: {
        login() {
            let that = this;
            // #ifdef  MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        post("v1/appletLogin", {
                            code: res.code,
                            invite: uni.getStorageSync("inviteCode") || "XHCYGNZM",
                        }).then((res) => {
                            if (res.code === 0) {
                                if (res.data.token) {
                                    uni.setStorageSync("token", res.data.token);
                                    that.loadData();
                                } else {
                                    that.unid = res.data.unid;
                                    that.shopInfo = app.globalData.shopInfo;
                                    that.SoHAuth(); //调取授权弹窗
                                }
                            }
                        });
                    }
                },
            });
            // #endif
        },
        // 获取手机号
        onauthGetTelSuccess(da) {
            this.SoHAuth();
            post("v1/getMobile", {
                unid: this.unid,
                ...da.detail,
            }).then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync("token", res.data.token);
                    this.loadData();
                }
            });
        },
        SoHAuth() {
            this.$refs.autho.onSoHAuth();
        },
        
        clearData(isclearCat = true, callBack) {
            page = 1;
            this.orderList = [];
            this.haveGoods = false;
            if (callBack) {
                callBack();
            }
        },
        loadData() {
            if (page == -1) {
                return;
            }
            uni.showLoading({
                title: "加载中…",
                mask: true,
            });
            var data = {
                page,
                type: this.currentType,
            };

            post("v1/my/order", data).then((res) => {
                if (res.code === 0) {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    let da = res.data.data.data;

                    if (page <= 1) {
                        this.orderList = [];
                        if (!da.length) this.haveGoods = true;
                    }
                    this.orderList = [...this.orderList, ...da];
                } else {
                    this.$toast(res.msg || "");
                    this.loadingMoreHidden = false;
                }
            });
        },
        toDetails(da) {
            this.goto("/pages/szw-order-details/index", { id: da.order_id });
        },

        // 立即支付
        toPay(e) {
            let type = "H5";
            // #ifdef  H5
            type = "H5";
            // #endif
            // #ifdef  APP
            type = "app";
            // #endif
            // #ifdef  MP-WEIXIN
            type = "jsapi";
            // #endif
            post("v1/goods/payOrder", {
                id: e.order_id,
                trade_type: type,
            }).then((res) => {
                if (res.code === 0) {
                    toPayOpre.toPay(res.data.data, (da) => {
                        if (!da) {
                            // 支付成功
                            this.$toast("支付成功");
                        } else {
                            // 支付失败
                            this.$toast("支付已取消");
                        }
                        // this.$toast('支付成功');
                        this.loadData();
                    });
                }
            });
        },
        // 取消订单
        toCancel(e) {
            let that = this;
            uni.showModal({
                title: "温馨提示",
                content: "取消订单后，微信支付部分也将退至云宝账户",
                // showCancel: false,
                confirmText: "知道了",
                confirmColor: "#f02f2f",
                cancelText: "取消",
                cancelColor: "#bbb",
                success(res) {
                    if (res.confirm) {
                        post("v1/my/orderCancel", {
                            order_id: e.order_id,
                        }).then((res) => {
                            if (res.code === 0) {
                                that.$toast(res.msg);
                                that.loadData();
                            }
                        });
                    }
                },
            });
        },
        // 确认收货
        toTake(e) {
            let that = this;
            uni.showModal({
                content: "亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。",
                confirmText: "确认收货",
                confirmColor: "#fa2f2e",
                cancelText: "取消",
                cancelColor: "#bbb",
                success(res) {
                    if (res.confirm) {
                        post("v1/goods/confirmOrder", {
                            order_id: e.order_id,
                        }).then((res) => {
                            if (res.code === 0) {
                                that.$toast(res.msg);
                                that.loadData();
                            }
                        });
                    }
                },
            });
        },
        toCode(e) {
            this.goto("/pagesB/order/verificationCode", { id: e.order_id });
        },
        //菜单切换
        statusTap(e) {
            //重置数据
            var curType = e.currentTarget.dataset.index;
            this.currentType = curType;
            this.clearData(false, this.loadData);
        },

        //删除订单
        removeItem(order_id) {
            let that = this;
            uni.showModal({
                content: "亲，确认删除本订单吗？",
                confirmText: "确认删除",
                confirmColor: "#fa2f2e",
                cancelText: "取消",
                cancelColor: "#bbb",
                success(res) {
                    if (res.confirm) {
                        post("v1/my/orderDel", {
                            order_id
                        }).then(res => {
                            if (res.code === 0) {
                                that.$toast(res.msg);
                                that.loadData();
                            }
                        });
                    }
                },
            });
        }
    },
    computed: {
        // 0  支付状态   1 订单状态
        tidyStatus() {
            return (da) => {
                let str;
                if (da[1] === 0) str = "待发货";
                if (da[1] === 1) str = "已发货";
                if (da[1] === 2) str = "已完成";
                if (da[1] === 3) str = "申请退货";
                if (da[1] === 4) str = "确认退货";
                if (da[1] === 5) str = "已作废";
                if (da[1] === 6) str = "转邮寄";
                if (da[1] === 7) str = "待收货";
                if (da[1] === 8) str = "待自提";
                if ([0, 2].includes(da[0]) && da[1] != 5) str = "待支付";
                return str;
            };
        },
    },
    //上拉加载事件
    onReachBottom() {
        if (page != -1) {
            var that = this;
            setTimeout(() => {
                // 为页数迭加1
                ++page;
                that.loadData();
            }, 800);
        }
    },
    // 下拉刷新
    onPullDownRefresh() {
        var that = this;
        that.clearData(false, () => {
            that.loadData();
        });
    },
    // 监听卸载页面  同等于  返回拦截
    onUnload() {
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2]?.route
        if (prevPage == "pages/to-pay-list/index") {
            uni.switchTab({ url: "/pages/my/index" });
        }
    },
};
</script>
<style lang="scss">
page {
    background-color: #f3f5f7;
}

.container {
    width: 100%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.overflow {
    overflow: hidden;
}

.r_color {
    color: #fa2f2e;
}

.loading-indicator {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #666;
    margin: 20rpx 0;
    line-height: 1.5;
}

.opacity {
    opacity: 0;
    display: none;
}

.terraceComp {
    height: 84rpx;
}

.terraceComp_fix {
    position: fixed;
    top: -12rpx;
    left: 0;
    right: 0;
    z-index: 15;
}

.status-box {
    width: 100%;
    height: 94rpx;
}

.status_tap_box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    line-height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    z-index: 300;
    box-shadow: 0rpx 8rpx 8rpx rgba(0, 0, 0, 0.025);
}

.status-box .status-label {
    flex-grow: 1;
    height: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #353535;
    box-sizing: border-box;
    position: relative;
    border-bottom: 6rpx solid transparent;
}

.status-box .status-label.active {
    color: #e05f0b;
    border-bottom-color: #e05f0b;
}

.order-list {
    width: 100%;
    overflow: hidden;
}

.order-list .a-order {
    width: 100%;
    background-color: #fff;
    margin-top: 24rpx;
}

.order-list .a-order .order-date {
    padding: 16rpx 30rpx 20rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    color: #000;
    overflow: hidden;
}

.order-list .a-order .order-date .red {
    font-size: 26rpx;
    color: #fa2f2e;
}

.order-list .a-order .order-date text.r_color {
    font-weight: 600;
}

.a-order .list-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #000;
    padding: 16rpx 30rpx;
}

.avaImgs {
    width: 54rpx;
    height: 54rpx;
    overflow: hidden;
    border-radius: 50%;
    background-color: #f3f5f7;
    margin-right: 20rpx;
}

.order-list .a-order .price-box {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 30rpx;
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
}

.a-order .price-box .btn {
    box-sizing: border-box;
    text-align: center;
    border-radius: 40rpx;
    margin-left: 20rpx;
    border: 1rpx solid #ccc;
    padding: 12rpx 24rpx;
}

.order-list .a-order .price-box .total-price {
    color: #e05f0b;
}

.a-order .price-box .topay-btn {
    border-color: #e05f0b;
    color: #e05f0b;
}

.a-order .price-box .r_topay-btn {
    border-color: #e05f0b;
    background-color: #e05f0b;
    color: #fff;
}

.goods-info{
    padding: 12rpx 30rpx;
    .goods-img{
        width: 160rpx;
        height: 140rpx;
        border-radius: 10rpx;
    }
    .goodsDetail_info{
        width: calc(100% - 160rpx);
        padding-left: 28rpx;
        position: relative;
    }
    .good_name{
        font-size: 30rpx;
        font-weight: 600;
    }
    .good_text{
        width: 100%;
        padding-left: 28rpx;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .goods_price{
        font-weight: 600;
        font-size: 32rpx;
    }
    .unimport{
        font-size: 26rpx;
    }
}

.typetag {
    border: 1px solid #ccc;
    border-radius: 10rpx;
    padding: 2rpx 10rpx;
    font-size: 22rpx;
    font-weight: 500;
}

.tagcolor1 {
    border-color: #007aff;
    color: #007aff;
}

.tagcolor2 {
    border-color: #4cd964;
    color: #4cd964;
}

.tagcolor3 {
    border-color: #f0ad4e;
    color: #f0ad4e;
}

.tagcolor4 {
    border-color: #dd524d;
    color: #dd524d;
}

.tagcolor5 {
    border-color: #4335d6;
    color: #4335d6;
}

.tagcolor6 {
    border-color: rgb(245, 8, 8);
    color: rgb(245, 8, 8);
}
</style>