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

<template>
    <view class="container">
        <view class="no_data" v-if="dataError">
            <image src="/static/no_data.png" class="image" mode="widthFix" />
            <view>没有找到该订单呢……</view>
        </view>
        <view class="orderDetail_box" v-else>
            <view class="sec-wrap">
                <view class="order-status">
                    <view class="icon-box">
                        <image v-if="orderInfo.order_status === 0" class="icon" src="@/static/order/icon-ddfk.png"></image>
                        <image v-else-if="orderInfo.order_status == 1" class="icon" src="@/static/order/icon-ddfh.png"></image>
                        <image v-else-if="orderInfo.order_status == 2" class="icon" src="@/static/order/icon-ddsh.png"></image>
                        <image v-else class="icon" src="@/static/order/icon-ddgb.png"></image>
                    </view>
                    <view class="right-text">
                        <view class="status">{{ tidyStatus([orderInfo.pay_status, orderInfo.order_status]) }}</view>
                    </view>
                </view>
            </view>
            <!-- 配送 -->
            <view class="address-box" v-if="orderInfo.prom_type != 1">
                <view class="show-address" >
                    <view class="name-tel">{{ orderInfo.consignee }} {{ orderInfo.mobile }}</view>
                    <view class="addr-text">{{ orderInfo.address }}</view>
                </view>
            </view>
            <view class="logistics_btn" v-if="[1].includes(orderInfo.order_status)" @tap="goLogistics">
                <view class="l_box">已发货：{{ orderInfo.shipping_name }}，快递单号：{{ orderInfo.shipping_code }}</view>
            </view>

            <view class="goods-list">
                <view class="goods-info_box">
                    <scroll-view class="goods-img-container">
                        <view class="img-box">
                            <image :src="orderInfo.goods.original_img" mode="" class="goods-img"></image>
                        </view>
                        <view class="goodsDetail_info">
                            <view class="goods_name">{{ orderInfo.goods.goods_name }}
                                <view class="goods_num">×{{ orderInfo.goods_num }}</view>
                            </view>
                            <view class="goods_spec">
                                <text class="goods_spec_text" v-if="orderInfo.goodsAttr">{{ orderInfo.goodsAttr.spec_name }}</text>
                                <text v-if="orderInfo.goodsAttribute">{{ orderInfo.goodsAttribute.attr_name }}</text>
                            </view>
                            <view v-if="orderInfo.type == 1">
                                <view class="goods_price r_color" style="bottom:26rpx">{{ orderInfo.teac+"TeaC + "+ orderInfo.cha_bao+"贡献值" }}</view>
                                <view class="good_server">寄卖服务费：￥{{ orderInfo.shipping_price || 0 }}</view>
                            </view>
                            <view class="goods_price r_color" v-else>￥{{ orderInfo.total_amount  }}</view>
                        </view>
                    </scroll-view>
                </view>
            </view>

            <view class="order_info">
                <view class="li_box">订单状态：
                    <view class="info_data">{{ tidyStatus([orderInfo.pay_status, orderInfo.order_status]) }}</view>
                </view>
                <view class="li_box" v-if="orderInfo.order_sn">订单编号：
                    <view class="info_data">{{ orderInfo.order_sn }}</view>
                </view>
                <view class="li_box" v-if="orderInfo.add_time">订单创建：
                    <view class="info_data">{{ $day(orderInfo.add_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}</view>
                </view>
                <view class="li_box" v-if="orderInfo.pay_name">支付方式：
                    <view class="info_data">{{ orderInfo.pay_name }}</view>
                </view>
                <view class="li_box" v-if="orderInfo.total_amount">商品合计：
                    <view class="info_data" v-if="orderInfo.type == 1">{{ orderInfo.teac+"TeaC + "+ orderInfo.cha_bao+"贡献值 +"+'￥'+(orderInfo.shipping_price || 0)  }}</view>
                    <view class="info_data" v-else>{{ orderInfo.total_amount }}</view>
                </view>
                <!-- <view class="li_box" v-if="orderInfo.orderTypes == 2">批发券：
                    <view class="info_data">{{ orderInfo.totalPfInt }}</view>
                </view> -->
                <!-- <view class="li_box" v-if="orderInfo.orderTypes == 2">贡献值：
                    <view class="info_data">{{ orderInfo.totalTeaInt }}</view>
                </view> -->
            </view>

            <view class="detail_btn-row-box">
                <view class="detail_btn-row">
                    <template v-if="orderInfo.order_status != 5">
                        <view class="btn cancel-btn" @tap="toCancel" v-if="[0,1].includes(orderInfo.order_status)">取消订单</view>
                        <view class="btn topay-btn" @tap="toPay(orderInfo.order_id)" v-if="[0,2].includes(orderInfo.pay_status)">立即支付</view>
                        <view class="btn topay-btn" @tap="toTake" v-if="[0,1,7].includes(orderInfo.order_status)&&[1].includes(orderInfo.pay_status)">确认收货</view>
                        <view class="btn topay-btn" @tap="toCode(orderInfo)" v-if="[8].includes(orderInfo.order_status)">待自提</view>
                    </template>
                    <template v-else>
                        <view class="btn cancel-btn" @tap="removeItem">删除</view>
                    </template>
                    <view class="btn cancel-btn" @tap="goBack">返回</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
var utils = require("@/utils/utils.js");
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
export default {
    data() {
        return {
            currentTpye: false,
            dataError: false,
            orderInfo: {},
            isTuanIng: false, // 是否为拼团中订单
            isweixin: "",
            goodsNum: "",
            goodsTotalPrice: "",
            pt: "",

            order_id: '', //当前订单id
        };
    },
    onLoad: function(e) {
        if (!e.id) {
            uni.showToast({
                title: "参数错误",
                image: "/static/static/images/toast_nothing.png",
                duration: 1200,
            });
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1,
                });
            }, 1200);
            return;
        }
        this.order_id = e.id;
        uni.showLoading({
            title: "加载中…",
            mask: true,
        });
        this.loadData();
    },
    methods: {
        loadData() {
            post("v1/my/orderDetail", {
              order_id: this.order_id,
            }).then(res => {
                uni.hideLoading();
                if (res.code === 0) {
                    this.orderInfo = res.data.data;
                }
            });
        },
        // 取消订单
        toCancel() {
            let that = this;
            uni.showModal({
                title: "温馨提示",
                content: "发起拼单24小时后，若未拼单成功将自动取消订单并退款哦~",
                showCancel: false,
                confirmText: "知道了",
                confirmColor: "#f02f2f",
                success(res) {
                    if (res.confirm) {
                        post("v1/my/orderCancel",{
                            order_id: that.order_id
                        }).then(res => {
                            if(res.code === 0){
                                that.$toast(res.msg);
                                that.loadData();
                            }
                        })
                    }
                },
            });
        },
        // 立即支付
        toPay(id) {
            let type = "jsapi";
            // #ifdef  H5
            type = "H5";
            // #endif
            // #ifdef  APP
            type = "app";
            // #endif
            // #ifdef  MP-WEIXIN
            type = "jsapi";
            // #endif
            post("v1/goods/payOrder", {
                id, trade_type: type,
            }).then((res) => {
                if(res.data && res.data != 200){
                    let data = JSON.parse(res.data)
                    data.prepayid = data.package?data.package.split('prepay_id=')[1]:''
                    if (res.code === 0 && data.prepayid) {
                        toPayOpre.toPay(data, (da) => {
                            if (!da) {
                                // 支付成功
                                this.$toast("支付成功");
                            } else {
                                // 支付失败
                                this.$toast("支付已取消");
                            }
                            // this.$toast('支付成功');
                            this.loadData();
                        });
                    }
                }
            });
        },
        toCode(e){
            this.goto("/pagesB/order/verificationCode", { id: e.order_id });
        },
        // 确认收货
        toTake() {
            let that = this;
            uni.showModal({
                content: "亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。",
                confirmText: "确认收货",
                confirmColor: "#fa2f2e",
                cancelText: "取消",
                cancelColor: "#bbb",
                success(res) {
                    if (res.confirm) {
                        post("v1/goods/confirmOrder",{
                            order_id: that.order_id
                        }).then(res => {
                            if(res.code === 0){
                                that.$toast(res.msg);
                                that.loadData();
                            }
                        })
                    }
                },
            });
        },
        //计时
        timeChange: function(statusType, finsTime) {
            var nowTime = utils.unxiNum();
            finsTime = utils.unxiNum(finsTime);
            var timeDiffNum = finsTime - nowTime;
            var that = this,
                text = "";
            if (timeDiffNum > 0) {
                var timer = setInterval(function() {
                    --timeDiffNum;
                    var back_text = utils.changeTimeStamp(timeDiffNum);
                    if (timeDiffNum <= 0 || !back_text) {
                        clearInterval(timer);
                        if (statusType == 0) {
                            text = "订单未在规定时间内付款已自动关闭";
                            that.currentTpye = 7;
                            that.onShow();
                        }
                    } else {
                        if (statusType == 0) {
                            text = "请于" + back_text + "内付款，超时订单将自动关闭";
                        }
                    }
                    that.timeOver = false; //时间是否已结束
                    that.changeTimeTexttext;
                }, 1000);
            } else {
                if (statusType == 0) {
                    text = "订单未在规定时间内付款已自动关闭";
                }
                that.timeOver = true; //时间是否已结束
                that.changeTimeText = text;
            }
        },
        goBack: function() {
            uni.navigateBack();
        },
        // 跳转商品详情
        toGoodsDetails(e) {
          
        },

        // 跳转物流详情
        goLogistics() {},

        removeItem(){
            let that = this;
            uni.showModal({
                content: "亲，确认删除本订单吗？",
                confirmText: "确认删除",
                confirmColor: "#fa2f2e",
                cancelText: "取消",
                cancelColor: "#bbb",
                success(res) {
                    if (res.confirm) {
                        post("v1/my/orderDel", {
                            order_id: that.order_id,
                        }).then(res => {
                            if (res.code === 0) {
                                that.$toast(res.msg);
                                that.goBack();
                            }
                        });
                    }
                },
            });
        }
    },
    computed: {
        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
            };
        },
    },
};
</script>
<style lang="scss" scoped>
page {
    background-color: #f3f5f7;
}

.r_color {
    color: #fa2f2e;
}

.sec-wrap {
    background-color: #21c792;
    margin: 2rpx 0 20rpx;
}

.bottom-fiexd {
    position: fixed;
    bottom: 0;
    left: 0;
}

.flex_hvcc {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.address-box {
    width: 100%;
    margin: -20rpx 0 20rpx;
    background: #fff url(http://xcx.soowin.com/images/addr-line.png) no-repeat center top;
    background-size: 100% 4rpx;
    overflow: hidden;
}

.show-address {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx 0 80rpx;
    background: url(http://xcx.soowin.com/images/ico-addr.png) no-repeat 25rpx 30rpx;
    background-size: 40rpx auto;
}

.show-address .name-tel {
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0 20rpx 0;
}

.show-address .name-tel-phone {
    padding: 30rpx 0;
}

.show-address .addr-text {
    font-size: 24rpx;
    color: #888;
    padding-bottom: 34rpx;
    line-height: 36rpx;
}

.show-address .addr-text_lit {
    padding-bottom: 10rpx;
}

.sec-wrap .order-status {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
}

.order-status .icon-box {
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    margin-right: 26rpx;
}

.order-status .icon-box .icon {
    width: 100%;
    height: 100%;
}

.order-status .right-text {
    width: calc(100% - 116rpx);
    overflow: hidden;
}

.order-status .right-text .status {
    font-size: 36rpx;
    color: #fff;
    padding: 2rpx 0 4rpx;
    font-weight: 500;
}

.order-status .right-text .red {
    color: #fa2f2e;
}

.order-status .right-text .des {
    font-size: 24rpx;
    color: #fff;
    padding: 4rpx 0;
}

.address-sec {
    width: 720rpx;
    margin-left: 30rpx;
    display: flex;
    align-items: center;
    padding: 30rpx 0;
}

.address-sec .icon-box {
    width: 30rpx;
    align-self: flex-start;
    overflow: hidden;
    margin-right: 35rpx;
}

.address-sec .icon-box .icon {
    width: 30rpx;
    height: 30rpx;
}

.address-sec .right-box {
    width: 620rpx;
}

.address-sec .right-box .name-tel {
    font-size: 28rpx;
    color: #000;
    margin-bottom: 20rpx;
}

.address-sec .right-box .text {
    font-size: 24rpx;
    color: #888;
    line-height: 36rpx;
    height: 72rpx;
    overflow: hidden;
}

.wuliu-box {
    width: 720rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    align-items: center;
    padding: 30rpx 0;
}

.wuliu-box .icon-box {
    width: 40rpx;
    height: 40rpx;
    overflow: hidden;
    margin-right: 31rpx;
    align-self: flex-start;
}

.wuliu-box .icon-box .icon {
    width: 40rpx;
    height: 40rpx;
}

.wuliu-box .arrow-right {
    width: 15rpx;
    height: 24rpx;
}

.wuliu-box .arrow-right .arrow {
    width: 15rpx;
    height: 24rpx;
}

.wuliu-box .right-text {
    width: 575rpx;
    margin-right: 30rpx;
}

.wuliu-box .right-text .order-number {
    font-size: 28rpx;
    color: #000;
    margin-bottom: 14rpx;
}

.wuliu-box .right-text .wuliu-text,
.wuliu-box .right-text .wuliu-date {
    font-size: 24rpx;
    color: #888;
    line-height: 36rpx;
}

.goods-list {
    width: 100%;
    background-color: #fff;
    margin-bottom: 24rpx;
}

.goods-list .list-title {
    font-size: 28rpx;
    color: #000;
    padding: 16rpx 24rpx;
}

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

.goods-info_box {
    width: 100%;
    overflow: hidden;
    border-top: 2rpx solid #eee;
}

.goods-img-container {
    overflow: hidden;
    padding: 30rpx;
    margin-bottom: 2rpx;
    box-sizing: border-box;
}

.goods-info .goods-des {
    width: 540rpx;
    height: 78rpx;
    line-height: 39rpx;
    font-size: 26rpx;
    color: #000;
    overflow: hidden;
}

.goods-img-container .img-box {
    width: 170rpx;
    height: 183.6rpx;
    background-color: #f7f7f7;
    overflow: hidden;
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}

.goodsDetail_info {
    overflow: hidden;
    float: right;
    width: calc(100% - 194rpx);
    line-height: 1.5;
    position: relative;
    height:190rpx;
}

.goodsDetail_info .goods_name {
    padding-right: 66rpx;
    position: relative;
    font-size: 26rpx;
    margin-bottom: 6rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.goodsDetail_info .goods_name .goods_num {
    font-size: 24rpx;
    color: #666;
    position: absolute;
    top: 0;
    right: 0;
}

.goodsDetail_info .unimport {
    font-size: 24rpx;
    color: #999;
}

.goodsDetail_info .goods_price {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 28rpx;
    line-height: 1.2;
    font-weight: 600;
}
.goodsDetail_info .good_server{
    font-size: 20rpx;
    color: rgb(245, 8, 8);
    position: absolute;
    bottom: 0rpx;
    left: 0;
}
.goods-img-container .img-box .goods-img {
    width: 100%;
    display: block;
    height: 100%;
}

.peisong-way {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.peisong-way .row-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 30rpx;
    font-size: 26rpx;
    line-height: 1.6;
}

.goods-info {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.goods-info .row-box {
    width: calc(100% - 30rpx);
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    box-sizing: border-box;
    padding: 30rpx 30rpx 30rpx 0;
    margin-left: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    font-size: 26rpx;
    color: #000;
}

.goods-info .row-box .row-label {
    width: calc(100% - 140rpx);
}

.goods-info .row-box .right-text {
    text-align: right;
}

.goods-info .row-box .right-text.r_color {
    font-weight: 600;
}

.order_info {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 16rpx 30rpx;
    margin-bottom: 20rpx;
}

.order_info .li_box {
    line-height: 1.6;
    padding: 10rpx 0;
    font-size: 26rpx;
    color: #999;
}

.order_info .li_box .info_data {
    display: inline-block;
    color: #000;
}

.jiesuan-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.jiesuan-box .to-pay-btn {
    width: 250rpx;
    text-align: center;
    height: 100%;
    line-height: 100rpx;
    background-color: #fa2f2e;
    font-size: 32rpx;
    color: #fff;
    border-radius: 0;
}

.jiesuan-box .left-price {
    display: flex;
    width: 500rpx;
    justify-content: flex-start;
    line-height: 100rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    box-sizing: border-box;
}

.jiesuan-box .total {
    text-align: right;
}

.jiesuan-box .total .total_price {
    color: #fa2f2e;
    font-weight: 600;
    display: inline-flex;
}

.logistics_btn {
    padding: 24rpx 24rpx 24rpx 30rpx;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 26rpx;
    line-height: 1.6;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.l_box {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 28rpx 0 64rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left top, url(http://xcx.soowin.com/images/arrow-right.png) no-repeat right center;
  background-size: 46rpx auto, 16rpx auto; */
    background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left top;
    background-size: 46rpx auto;
}

.detail_btn-row-box {
    height: 104rpx;
}

.detail_btn-row {
    width: 100%;
    height: 104rpx;
    padding: 18rpx 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    align-items: center;
    box-shadow: 0rpx -2rpx 16rpx rgba(0, 0, 0, 0.04);
}

.detail_btn-row .btn {
    box-sizing: border-box;
    text-align: center;
    border-radius: 6rpx;
    margin-left: 20rpx;
    border: 1rpx solid #ccc;
    padding: 16rpx 24rpx;
}

.detail_btn-row .topay-btn {
    border-color: #e05f0b;
    background-color: #e05f0b;
    color: #fff;
}

.footerMargin {
    margin-bottom: 104rpx;
}

// 备注
.remark {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 3rpx;
}

// 备注-end

// 商品规格-start
.goods_spec{
    font-size: 24rpx;
    color: #868686;
    padding-top: 20rpx;
    text{
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin-right: 12rpx;
        background-color: #f5f5f5;
        
    }
    &_text{
        padding-right: 8rpx;
    }
}
// 商品规格-end
</style>