diancan_uni/pages/user/order/detail/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="order_t">
            <!-- order_status //1正常 2已完成 0关闭 -->
            <!-- ship_status // //0待发货/待自提  1已发货/已自提 -->
            <!-- fare_type //0邮寄 1自提 -->
            <view class="order_status" v-if="orderInfo.fare_type == 1">
                {{
                    orderInfo.order_status == 2
                        ? '已完成'
                        : orderInfo.order_status == 0
                        ? '已关闭'
                        : orderInfo.pay_status != 1
                        ? '待支付'
                        : orderInfo.ship_status
                        ? '已自提'
                        : '待自提'
                }}
            </view>
            <view class="order_status" v-if="orderInfo.fare_type == 0">
                {{
                    orderInfo.order_status == 2
                        ? '已完成'
                        : orderInfo.order_status == 0
                        ? '已关闭'
                        : orderInfo.pay_status != 1
                        ? '待支付'
                        : orderInfo.ship_status
                        ? '配送中' + count_time
                        : '待配送'
                }}
            </view>
            <view class="order_tips" v-if="orderInfo.order_status == 1 && orderInfo.fare_type == 1 && orderInfo.ship_status == 0">请您及时取餐，如有问题提前与商家沟通</view>
            <view class="order_tips" v-if="orderInfo.order_status == 0">感谢您对羊汤馆的支持，欢迎再次光临</view>
            <view class="order_btns">
                <!-- <view class="btn cancel">联系商家</view> -->
                <view class="btn cancel" v-if="orderInfo.ship_status == 0 && orderInfo.order_status == 1" @tap="cancleOrder">取消订单</view>
                <view class="btn cancel" v-if="orderInfo.pay_status == 1 && orderInfo.ship_status == 1 && orderInfo.order_status == 1" @tap="receiveOrder">收货</view>
                <view class="btn" @tap="goTopay" v-if="orderInfo.order_status == 1 && orderInfo.pay_status != 1">立即支付</view>
                <view class="btn" @tap="toGoods" v-if="orderInfo.order_status == 0 || orderInfo.order_status == 2 || (orderInfo.order_status == 1 && orderInfo.ship_status == 1)">
                    再来一单
                </view>
            </view>
            <image class="order_tag" :src="orderInfo.fare_type ? '/statics/img/ziqu_order.png' : '/statics/img/waimai_order.png'"></image>
        </view>
        <view class="order_m">
            <view class="shop_info">
                <view class="shop_info_l">
                    <view class="shop_name">{{ orderInfo.store.title }}</view>
                    <view class="shop_adress">{{ orderInfo.store.address }}</view>
                </view>
                <image class="shop_phone" src="/static/statics/img/icon_phone.png" @tap="onMakePhone"></image>
            </view>
            <view class="order_goods">
                <view class="goods_item" v-for="(item, index) in orderInfo.order_good" :key="index">
                    <view class="goods_item_l">
                        <image class="goods_tu" :src="imgUrl + item.good_thumb"></image>
                        <view class="goods_info">
                            <view class="goods_title">{{ item.good_title }}</view>
                            <view class="goods_labels" v-if="item.good_specs">
                                <view class="label">{{ item.good_specs.title }}</view>
                                <!-- <view class="label">甜辣</view>
							<view class="label">鸭翅</view> -->
                            </view>
                        </view>
                    </view>

                    <view class="goods_item_r">
                        <view class="goods_price" v-if="!item.add_good_rule_id">
                            <text class="unit">¥</text>
                            {{ orderInfo.user.is_member ? item.member_price : item.price }}
                        </view>
                        <view class="goods_price" v-if="item.add_good_rule_id">
                            <text class="unit">¥</text>
                            {{ item.add_price }}
                        </view>
                        <view class="goods_num">x{{ item.nums }}</view>
                    </view>
                </view>
            </view>
            <view class="delivery" v-if="orderInfo.fare_type == 0">
                <view class="text">配送费</view>
                <view class="price">
                    <text class="unit">¥</text>
                    {{ orderInfo.delivery_fee }}
                </view>
            </view>
            <view class="quan" v-if="orderInfo.user_coupon">
                <view class="quan_l">
                    <image class="quan_icon" src="/static/statics/img/icon_quan.png"></image>
                    <view class="quan_wenzi">优惠券</view>
                </view>
                <view class="quan_price">
                    <text class="unit">-¥</text>
                    {{ orderInfo.coupon_price }}
                </view>
            </view>
            <view class="total_price">
                <text class="" v-if="orderInfo.user_coupon">已优惠</text>
                <text class="discount" v-if="orderInfo.user_coupon">¥{{ orderInfo.coupon_price }}</text>
                <text class="">小计</text>
                <text class="price">
                    <text class="unit">¥</text>
                    {{ orderInfo.pay_price }}
                </text>
            </view>
        </view>
        <view class="section_wrap">
            <view class="section_name">配送信息</view>
            <view class="section">
                <view class="item">
                    <view class="item_l">取货方式</view>
                    <view class="item_r">{{ orderInfo.fare_type ? '自提订单' : '外卖订单' }}</view>
                </view>
                <view class="item">
                    <view class="item_l">服务门店</view>
                    <view class="item_r">{{ orderInfo.store.title }}</view>
                </view>
                <view class="item" v-if="orderInfo.fare_type == 0">
                    <view class="item_l">配送地址</view>
                    <view class="item_r">{{ orderInfo.address }}</view>
                </view>
                <view class="item" v-if="orderInfo.fare_type == 0">
                    <view class="item_r">{{ orderInfo.person + ' ' + orderInfo.phone }}</view>
                </view>
                <view class="item" v-if="orderInfo.fare_type == 1">
                    <view class="item_l">预留电话</view>
                    <view class="item_r">{{ orderInfo.user.phone }}</view>
                </view>
                <view class="item" v-if="orderInfo.fare_type == 1">
                    <view class="item_l">商家地址</view>
                    <view class="item_r">{{ orderInfo.store.address }}</view>
                </view>
            </view>
        </view>
        <view class="section_wrap">
            <view class="section_name">订单信息</view>
            <view class="section">
                <view class="item">
                    <view class="item_l">订单编号</view>
                    <view class="item_r">{{ orderInfo.order_num }}</view>
                </view>
                <view class="item">
                    <view class="item_l">下单时间</view>
                    <view class="item_r">{{ orderInfo.created_at }}</view>
                </view>
                <view class="item">
                    <view class="item_l">支付方式</view>
                    <view class="item_r">
                        <view class="item_pay">{{ orderInfo.pay_name }}</view>
                        <!-- <view class="item_pay" wx:if="{{ orderInfo.user_coupon }}">优惠券</view> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

<script>
// index.js
let myPro = require('../../../../utils/wxRequest.js');

let util = require('../../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            loading: false,
            orderInfo: null,
            timer: null,

            // 配送倒计时
            count_time: '',

            order_id: '',
            title: '',
            address: '',
            phone: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            order_id: options.order_id
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 获取订单信息

        that.getOrderDetail();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取订单信息
        getOrderDetail() {
            let that = this;
            let params = {
                order_id: that.order_id
            };
            myPro
                .wxRequest('user/v2/order/detail', 'GET', params)
                .then((res) => {
                    that.setData({
                        orderInfo: res.result
                    }); // console.log('订单状态',that.data.orderInfo.order_status)

                    let orderInfo = res.result; // 当前订单为外卖单且正在配送,开启倒计时

                    if (orderInfo.fare_type == 0 && orderInfo.order_status == 1 && orderInfo.ship_status == 1) {
                        clearInterval(that.timer);
                        that.timer = setInterval(function () {
                            let ship_at = orderInfo.ship_at;
                            let shijian = util.daojishi(ship_at, 30);

                            if (shijian['isend']) {
                                clearInterval(that.timer);
                            } else {
                                that.setData({
                                    count_time: shijian['timeStr']
                                });
                            }
                        }, 1000);
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 再来一单
        toGoods() {
            let that = this;
            uni.reLaunch({
                url: '/pages/goods/index'
            });
        },

        // 取消订单
        cancleOrder() {
            let that = this;
            let store = that.orderInfo.store;
            let orderInfo = that.orderInfo; // 未支付的订单可以取消

            if (orderInfo.order_status == 1 && orderInfo.pay_status != 1) {
                // 取消订单
                myPro
                    .wxRequest('user/v2/order/cancelorder', 'POST', {
                        order_id: orderInfo.id
                    })
                    .then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                        that.getOrderDetail();
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            } else {
                uni.showModal({
                    title: '可联系商家取消',
                    content: '商家电话' + store.phone,
                    showCancel: false,
                    confirmText: '我知道了',
                    confirmColor: '#000000'
                });
            }
        },

        // 收货
        receiveOrder() {
            let that = this;
            let params = {
                order_id: that.order_id
            };
            myPro
                .wxRequest('user/order/commit', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.getOrderDetail();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去支付
        goTopay() {
            let that = this;
            uni.navigateTo({
                url: '/pages/pay-order/index?order_id=' + that.order_id
            });
        },

        // 拨打店铺电话
        onMakePhone() {
            let that = this;
            uni.makePhoneCall({
                phoneNumber: that.orderInfo.store.phone
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
    padding: 30rpx;
}
.order_t {
    width: 690rpx;
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 5rpx;
    font-size: 30rpx;
    color: #000000;
    text-align: center;
    position: relative;
}
.order_t .order_status {
    padding-top: 30rpx;
}
.order_t .order_tips {
    padding-top: 28rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.54);
}
.order_t .order_btns {
    padding: 24rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.order_t .order_btns .btn {
    width: 180rpx;
    height: 60rpx;
    background: rgba(41, 92, 86, 0.05);
    border: 1px solid #295c56;
    border-radius: 5rpx;
    font-size: 30rpx;
    color: #295c56;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 18rpx;
}
.order_t .order_btns .btn.cancel {
    border-color: #999999;
    color: #999999;
    background: transparent;
}
.order_t .order_tag {
    width: 119rpx;
    height: 124rpx;
    position: absolute;
    top: -4rpx;
    left: -4rpx;
}
.order_t .line_bg {
    width: 690rpx;
    height: 30rpx;
    border-radius: 0 0 5rpx 5rpx;
    background-repeat: repeat;
    background-size: 18rpx 30rpx;
}
/* 商品 */
.order_m {
    width: 690rpx;
    border-radius: 5rpx;
    background: #ffffff;
    padding: 0 30rpx;
}
.order_m .shop_info {
    padding: 40rpx 0rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shop_info .shop_name {
    font-size: 30rpx;
    color: #080808;
    font-weight: bold;
}
.shop_info .shop_adress {
    padding-top: 16rpx;
    font-size: 24rpx;
    color: rgba(51, 51, 51, 0.54);
}
.shop_info .shop_phone {
    width: 44rpx;
    height: 44rpx;
}
/* 配送费 & 券 */
.order_m .delivery {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: #000000;
    border-bottom: 1rpx dashed rgba(0, 0, 0, 0.12);
}
.order_m .delivery .price {
    font-size: 34rpx;
    color: #080808;
}
.order_m .delivery .price .unit {
    font-size: 22rpx;
}
.order_m .quan {
    padding: 37rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx dashed rgba(0, 0, 0, 0.12);
}
.order_m .quan_l {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #000000;
}
.order_m .quan_icon {
    width: 48rpx;
    height: 41rpx;
    margin-right: 20rpx;
}
.order_m .quan_price {
    color: #d54c43;
    font-size: 34rpx;
}
.order_m .quan_price .unit {
    font-size: 22rpx;
}
.order_m .total_price {
    padding: 30rpx 0;
    font-size: 26rpx;
    color: #000000;
    text-align: right;
}
.order_m .total_price .discount {
    padding: 0 18rpx 0 16rpx;
    font-size: 28rpx;
    color: #333333;
}
.order_m .total_price .price {
    font-size: 44rpx;
    color: #333333;
    font-weight: bold;
    padding-left: 14rpx;
}
.order_m .total_price .price .unit {
    font-size: 22rpx;
}
/* 配送信息&订单信息 */
.section_wrap {
    width: 690rpx;
    background: #ffffff;
    border-radius: 5rpx;
    margin-top: 20rpx;
}
.section_wrap .section_name {
    padding: 30rpx;
}
.section {
    padding-bottom: 30rpx;
}
.section .item {
    padding: 30rpx 30rpx 0;
    display: flex;
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.87);
}
.section .item .item_l {
    color: rgba(0, 0, 0, 0.54);
}
.section .item .item_r {
    flex: 1;
    text-align: right;
    padding-left: 10rpx;
}
.section .item .item_pay:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 2rpx;
    height: 14rpx;
    background: #666666;
    margin: 0 18rpx;
}
</style>