card-wechat/src/components/AllorderInfo.vue

<template>
    <div class="box-con">
        <div class="box-con2">
            <div class="box-tit" @click="navigateTo('/pages/store/homePage?id=' + storeId, false)">
                <div>
                    <img :src="all.logo" alt="" />
                    <p>{{ all.storeName }}</p>
                </div>
                <span>{{ name }}</span>
            </div>
            <div class="box-con-Cards" v-for="(item, index) in orderList" :key="index.id" @click="allorder">
                <img :src="item.images" alt="" />
                <div class="box-con-right">
                    <p class="box-con-tit">{{ item.caseName }}</p>
                    <div class="box-con-today">
                        <p>卡盒选号:{{ item.boxName }}</p>
                    </div>
                    <div class="box-con-money">
                        <div class="box-con-num">
                            <p>¥{{ item.money }}</p>
                        </div>
                        <p>×1</p>
                    </div>
                </div>
            </div>
            <div class="box-num" v-if="status !== 'AutoRefund'">
                <span>实际支付</span>
                <span class="num">¥{{ all.total }}</span>
            </div>
            <div class="box-num" v-if="status == 'AutoRefund'">
                <span>退款成功</span>
                <span class="num">¥{{ all.total }}</span>
            </div>
            <div class="box-bor"></div>
            <div class="box-butm">
                <div v-if="status == 'CREATED'" @click="cancel" class="box-but">取消订单</div>
                <div v-if="status == 'CREATED'" @click="pay" class="box-but2">立即支付</div>
                <div v-if="status == 'PAYED'" @click="Apply" class="box-but">申请退款</div>
                <div v-if="status == 'PAYED'" @click="remind" class="box-but3">提醒发货</div>
                <div v-if="status == 'SEND'" @click="logistics" class="box-but">查看物流</div>
                <div v-if="status == 'SEND'" @click="comfrim" class="box-but2">确认收货</div>
                <div v-if="status == 'COMPETED'" @click="sales" class="box-but">申请售后</div>
                <div v-if="status == 'COMPETED'" @click="logistics" class="box-but3">查看物流</div>
                <div v-if="status == 'CANCELED'" @click="deletes" class="box-but">删除订单</div>
                <div v-if="status == 'CANCELED'" @click="again" class="box-but3">重新购买</div>
                <div v-if="status == 'REFUND'" @click="cancelrefund" class="box-but">取消退款</div>
                <div v-if="status == 'REFUND'" @click="sales" class="box-but3">联系卖家</div>
                <div v-if="status == 'REFUNDED'" @click="deletes" class="box-but">删除订单</div>
                <div v-if="status == 'REFUNDED'" @click="applydetails" class="box-but3">退款详情</div>
                <div v-if="status == 'AutoRefund'" @click="deletes" class="box-but">删除订单</div>
                <div v-if="status == 'AutoRefund'" @click="applydetails" class="box-but3">退款详情</div>
            </div>
        </div>
        <van-popup :show="show" custom-style="background:transparent;border-radius: 12px 12px 0 0;" use-slot>
            <div class="popup-con">
                <div class="popup-top">快递详情</div>
                <div>
                    <span>物流快递：{{ logisTics.expName }}</span>
                </div>
                <div>
                    <span>物流单号：{{ logisTics.number }}</span>
                    <span class="dialog-cv" @click="logisticCopy">复制</span>
                </div>
            </div>
            <van-steps :steps="stepsList" direction="vertical">
                <div>{{ stepsList.text }}</div>
                <div>{{ stepsList.desc }}</div>
            </van-steps>
            <img
                @click="logisticShow"
                style="height:40px;width:40px;margin-left:150px;margin-top:30px"
                src="../static/imgs/icon_tanchuang_close@3x.png"
                alt=""
            />
        </van-popup>
    </div>
</template>
<script>
export default {
    props: {
        all: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            show: false,
            stepsList: [],
            logisTics: [],
            userId: '',
            refundId: 0
        };
    },
    computed: {
        orderList() {
            return this.all.orderBoxDTOS || [];
        },
        status() {
            return this.all.status || '';
        },
        id() {
            return this.all.orderInfoId || 0;
        },
        caseId() {
            return this.all.caseId || 0;
        },
        storeId() {
            return this.all.storeId || 0;
        },
        storeName() {
            return this.all.storeName || '';
        },
        name() {
            if (this.all.status === 'CREATED') {
                return '待支付';
            }
            if (this.status === 'CANCELED') {
                return '已取消';
            }
            if (this.status === 'PAYED') {
                return '卖家待发货';
            }
            if (this.status === 'COMPETED') {
                return '已完成';
            }
            if (this.status === 'SEND') {
                return '待收货';
            }
            if (this.status === 'REFUND') {
                return '申请退款中';
            }
            if (this.status === 'REFUNDED') {
                return '退款成功';
            }
            if (this.status === 'AutoRefund') {
                return '拼箱失败/已退款';
            }
            return '';
        }
    },
    methods: {
        logisticShow() {
            this.show = false;
        },
        logistics() {
            this.showLoading();
            // 查看物流
            this.$http
                .get('/orderInfo/checkLogistic', { orderInfoId: this.id })
                .then(res => {
                    this.hideLoading();
                    this.logisTics = res.logistic.result;
                    let steps = [];
                    res.logistic.result.list.forEach(item => {
                        let newStep = {
                            desc: item.status,
                            text: item.time
                        };
                        steps.push(newStep);
                    });
                    this.stepsList = steps;
                    this.show = true;
                })
                .catch(e => {
                    this.hideLoading();
                    wx.showToast({
                        title: '暂无物流信息',
                        icon: 'none'
                    });
                });
        },
        refreash() {
            this.$emit('refreash');
        },
        allorder() {
            if (this.status === 'REFUND' || this.status === 'REFUNDED' || this.status === 'AutoRefund') {
                this.navigateTo('/pages/Applydetails?id=' + this.id);
            } else {
                this.navigateTo('/pages/orderdetails?id=' + this.id);
            }
        },
        again() {
            this.navigateTo('/pages/details?id=' + this.caseId);
        },
        userIds() {
            this.$http.get('/store/get/' + this.storeId).then(res => {
                this.userId = res.userId;
            });
        },
        sales() {
            this.navigateTo('/pages/chat?toUserId=' + this.userId + '&toName=' + this.storeName);
        },
        logisticCopy() {
            wx.setClipboardData({
                data: this.logisTics.number + '',
                success(res) {
                    wx.getClipboardData({
                        success(res) {
                            wx.showToast({
                                title: '物流单号复制成功'
                            });
                        }
                    });
                }
            });
        },
        comfrim() {
            wx.showModal({
                title: '提示',
                content: '确定收货？',
                success: res => {
                    if (res.confirm) {
                        this.$http.post('/orderInfo/finish', { orderInfoId: this.id }).then(res => {
                            wx.showToast({
                                icon: 'none',
                                title: '收货成功'
                            });
                            setTimeout(() => {
                                this.refreash();
                            }, 1000);
                        });
                    }
                }
            });
        },
        pay() {
            wx.showLoading({
                title: '加载中'
            });
            this.$http
                .get('/payDelegation/wxPay', {
                    orderId: this.id
                })
                .then(res => {
                    res.package = res.packageValue;
                    wx.requestPayment({
                        ...res,
                        success: () => {
                            wx.hideLoading();
                            wx.showToast({
                                title: '支付成功'
                            });
                            this.refreash();
                        },
                        fail: e => {
                            console.log(e);
                            wx.hideLoading();
                            wx.showToast({
                                icon: 'none',
                                title: '支付失败'
                            });
                        }
                    });
                })
                .catch(e => {
                    wx.hideLoading();
                    wx.showToast({
                        title: e.error,
                        icon: 'none'
                    });
                });
        },
        cancel() {
            wx.showModal({
                title: '提示',
                content: '确定取消订单？',
                success: res => {
                    if (res.confirm) {
                        this.$http.post('/orderInfo/cancel', { orderInfoId: this.id }).then(res => {
                            wx.showToast({
                                icon: 'none',
                                title: '订单已取消'
                            });
                            setTimeout(() => {
                                this.refreash();
                            }, 1000);
                        });
                    }
                }
            });
        },
        rufundApply() {
            if (this.status === 'REFUND' || this.status === 'REFUNDED') {
                this.$http
                    .get('/orderInfo/get/' + this.id)
                    .then(res => {
                        this.refundId = res.refundId;
                        // console.log(this.refundId);
                        this.hideLoading();
                    })
                    .catch(e => {
                        this.hideLoading();
                        if (e.error) {
                            this.toast(e.rror);
                        }
                    });
            }
        },
        deletes() {
            wx.showModal({
                title: '提示',
                content: '确定删除订单？',
                success: res => {
                    if (res.confirm) {
                        this.$http.post('orderInfo/delete', { orderInfoId: this.id }).then(res => {
                            wx.showToast({
                                icon: 'none',
                                title: '订单已删除'
                            });
                            setTimeout(() => {
                                this.refreash();
                            }, 1000);
                        });
                    }
                }
            });
        },
        cancelrefund() {
            wx.showModal({
                title: '提示',
                content: '确定取消退款？',
                success: res => {
                    if (res.confirm) {
                        this.$http.post('orderRefundApply/cancel', { id: this.refundId }).then(res => {
                            wx.showToast({
                                icon: 'none',
                                title: '退款已取消'
                            });
                            setTimeout(() => {
                                this.refreash();
                            }, 1000);
                        });
                    }
                }
            });
        },
        Apply() {
            this.navigateTo('/pages/Apply?id=' + this.id);
            // if (this.status == 'PAYED') {
            //     this.navigateTo('/pages/Apply?id=' + this.id);
            // } else {
            //     wx.showToast({
            //         icon: 'none',
            //         title: '卡包已开箱，无法申请退款'
            //     });
            // }
        },
        applydetails() {
            this.navigateTo('/pages/Applydetails?id=' + this.id);
        },
        remind() {
            this.$http.post('orderInfo/remindMy', { orderInfoId: this.id, remark: '' }).then(res => {
                wx.showToast({
                    icon: 'none',
                    title: '提醒商家成功'
                });
            });
        }
    },
    created() {
        this.rufundApply();
        // this.userIds();
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-step__circle-container {
    height: 0;
}
/deep/ .van-steps {
    height: 307px;
    width: 334px;
    overflow: auto !important;
    border-radius: 0 0 12px 12px;
}
.box-con {
    background: #ffffff;
    border-radius: 12px;
    margin: 20px 20px;
    .popup-con {
        padding: 12px 0 20px 9px;
        background: #ffffff;
        .popup-top {
            height: 22px;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 22px;
            text-align: center;
            padding: 50px 0 15px 0;
        }
        span {
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #1a1a1a;
            line-height: 20px;
        }
        .dialog-cv {
            width: 40px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid #c8c9cc;
            font-size: 12px;
            font-weight: 400;
            color: #c8c9cc;
            line-height: 20px;
            text-align: center;
            margin-left: 8px;
        }
    }
    .box-con2 {
        margin: 0 16px;
        .box-tit {
            .flex();
            justify-content: space-between;
            padding: 16px 0 9px 0;
            div {
                .flex();
                img {
                    width: 17px;
                    height: 17px;
                }
                p {
                    height: 22px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 22px;
                    margin-left: 9px;
                }
            }
            span {
                height: 22px;
                font-size: 14px;
                font-weight: bold;
                line-height: 22px;
                color: #ff6c00;
            }
        }
        .box-con-Cards {
            margin-bottom: 16px;
            height: 90px;
            display: flex;
            img {
                width: 62px;
                height: 90px;
                border-radius: 6px;
            }
            .box-con-right {
                width: 237px;
                margin-left: 8px;
                .box-con-tit {
                    height: 24px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 24px;
                    overflow: hidden;
                }
            }
            .box-con-today {
                .flex();
                height: 30px;
                background: #f5f7fa;
                border-radius: 6px;
                width: 142px;
                margin: 4px 0 8px 0;
                p {
                    height: 24px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #303133;
                    line-height: 24px;
                }
            }
            .box-con-money {
                .flex();
                justify-content: space-between;
                .box-con-num {
                    .flex();
                    img {
                        width: 16px;
                        height: 16px;
                    }
                    p {
                        height: 22px;
                        font-size: 14px;
                        font-weight: normal;
                        color: #c8c9cc;
                        line-height: 22px;
                    }
                }
                p {
                    height: 24px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #c8c9cc;
                    line-height: 24px;
                }
            }
        }
        .box-num {
            text-align: right;
            padding-top: 20px;
            span {
                font-size: 14px;
                font-weight: bold;
                color: #000000;
            }
            .num {
                font-size: 16px;
                font-weight: bold;
                color: #f42202;
                padding-left: 10px;
            }
        }
        .box-bor {
            width: 303px;
            height: 1px;
            background: #f5f7fa;
            margin: 19px 0 16px 0;
        }
        .box-butm {
            display: flex;
            justify-content: flex-end;
            padding-bottom: 16px;
            .box-but {
                width: 80px;
                height: 36px;
                border-radius: 8px;
                border: 1px solid #c8c9cc;
                font-size: 14px;
                font-weight: 400;
                color: #c8c9cc;
                line-height: 36px;
                text-align: center;
                margin-right: 12px;
            }
            .box-but2 {
                width: 80px;
                height: 36px;
                background: #ff6c00;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
            }
            .box-but3 {
                width: 80px;
                height: 36px;
                border-radius: 8px;
                border: 1px solid #ff6c00;
                font-size: 14px;
                font-weight: 400;
                color: #ff6c00;
                line-height: 36px;
                text-align: center;
            }
        }
    }
}
</style>