diancan_uni/pages/shopRole/order/index.vue

<template>
    <!-- pages/shopOrder/index.wxml -->
    <view class="container">
        <van-tabs :active="active" class="custom_tabs" line-width="20" line-height="2" :swipe-threshold="6" :border="false" @click="onClickTab">
            <van-tab title="全部" :name="-1"></van-tab>
            <van-tab title="未支付" :name="0"></van-tab>
            <van-tab title="待发货" :name="1"></van-tab>
            <van-tab title="待自提" :name="2"></van-tab>
            <van-tab title="已完成" :name="3"></van-tab>
        </van-tabs>
        <view class="orderList">
			<!-- 
				<view class="order" v-for="(order,order.id) in (orderList)" :key="order.id">
				
				    <view class="user_info">
				        <image class="thumb" :src="order.user.thumb"></image>
				        <view class="nickname">{{ order.user.nickname }}</view>
				    </view>
				
				
				    <view class="order_t">
				        <view class="order_t_l">
				            <view :class="order.fare_type == 1 ? 'order_type ziti' : 'order_type waimai'">{{ order.fare_type == 1 ? '自提' : '外卖' }}</view>
				            <view class="order_time">{{ order.created_at }}</view>
				        </view>
				        <view class="order_status">{{ order.statusTitle }}</view>
				    </view>
				
				
				    <view class="order_goods" v-for="(order_goods,order_goods.id) in (order.order_good)" :key="order_goods.id">
				        <view class="order_goods_l">
				            <image class="goods_thumb" :src="imgUrl + order_goods.good_thumb"></image>
				            <view class="goods_info">
				                <view class="goods_title">{{ order_goods.good_title }}</view>
				                <view class="goods_labels" v-if="order_goods.good_specs">
				                    <view class="label">{{ order_goods.good_specs.title }}</view>
				                </view>
				                <view class="goods_num">x{{ order_goods.nums }}</view>
				            </view>
				        </view>
				
				        <view class="order_goods_r">
				            <view class="goods_price">
				                <text class="cash_tag">¥</text>
				                <text class="cash_num">{{ order_goods.add_good_rule_id ? order_goods.add_price : order_goods.price }}</text>
				            </view>
				            <view class="goods_vip_price" v-if="!order_goods.add_good_rule_id">
				                <text class="cash_tag">¥</text>
				                <text class="cash_num">{{ order_goods.member_price }}</text>
				                <text class="vip_tag">会员价</text>
				            </view>
				            <view class="goods_def_price" v-if="order_goods.add_good_rule_id">
				                原价
				                <text class="price">¥20.00</text>
				            </view>
				        </view>
				    </view>
				
				
				    <view class="order_address" v-if="order.address">
				        <view class="icon_wrap">
				            <image class="icon_address" src="/static/statics/img/address.png"></image>
				        </view>
				        <view class="order_user_info">
				            <view class="address">{{ order.address }}</view>
				            <view class="address">
				                <text class="info">{{ order.person }}</text>
				                <text class="info">{{ order.phone }}</text>
				            </view>
				        </view>
				    </view>
				
				    <view class="yunfei" v-if="order.delivery_fee != 0">
				        <view class="f-l">配送费</view>
				        <view class="f-r price">¥{{ order.delivery_fee }}</view>
				    </view>
				
				    <view class="order_pay">
				        <view class="order_pay_l">
				            <view class="heji">
				                <text class="sum">共{{ order.goods_total_nums }}件商品</text>
				                <text class="sum_txt">合计</text>
				            </view>
				            <view class="heji_price">
				                <view class="price">¥{{ order.pay_price }}</view>
				            </view>
				        </view>
				        <view class="order_pay_r">
				            <view
				                :class="order.fare_type == 1 ? 'btn_pay ziti' : 'btn_pay waimai'"
				                v-if="order.order_status == 1 && order.pay_status == 1 && order.ship_status == 0"
				                :data-order="order"
				                @tap="toHandle"
				            >
				                {{ order.fare_type == 1 ? '自提' : '发货' }}
				            </view>
				            <view class="btn_pay cancle" v-if="order.ship_status == 0 && order.order_status == 1" :data-order="order" @tap="cancleOrder">取消订单</view>
				        </view>
				    </view>
				</view>
			 -->
            
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

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

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

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            active: null,

            // null全部 0未支付 1待发货 2待自提 3已完成
            orderList: [],

            page: 1,
            size: 10,
            finished: false,

            // 全局loading
            loading: false,

            order: {
                id: '',

                user: {
                    thumb: '',
                    nickname: ''
                },

                fare_type: 0,
                created_at: '',
                statusTitle: '',
                order_good: [],
                address: '',
                person: '',
                phone: '',
                delivery_fee: 0,
                goods_total_nums: '',
                pay_price: '',
                order_status: 0,
                pay_status: 0,
                ship_status: 0
            },

            order_goods: {
                id: '',
                good_thumb: '',
                good_title: '',

                good_specs: {
                    title: ''
                },

                nums: '',
                add_good_rule_id: false,
                add_price: '',
                price: '',
                member_price: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;

        if (options.status != null) {
            that.setData({
                active: parseInt(options.status)
            });
        }

        that.getOrderList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // console.log('上拉触底事件')
        let that = this;

        if (!that.finished) {
            that.getOrderList();
        }
    },
    methods: {
        // 获取商家订单列表
        getOrderList() {
            let that = this;
            let params = {
                page: that.page,
                size: that.size
            };

            if (that.active != -1) {
                params.status = that.active;
            }

            myPro
                .wxRequest('store/order/list', 'GET', params)
                .then((res) => {
                    let tempList = res.result;
                    let list = that.orderList; // 无数据

                    if (tempList.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            finished: true
                        });
                    } else {
                        // 有数据
                        for (let i in tempList) {
                            // 订单状态
                            if (tempList[i].order_status == 0) {
                                tempList[i].statusTitle = '已关闭';
                            } else if (tempList[i].order_status == 2) {
                                tempList[i].statusTitle = '已完成';
                            } else if (tempList[i].order_status == 1) {
                                // 正常订单
                                if (tempList[i].pay_status == 0) {
                                    tempList[i].statusTitle = '待支付';
                                } else if (tempList[i].pay_status == 1) {
                                    if (tempList[i].ship_status == 0) {
                                        // fare_type 0邮寄 1自提
                                        if (tempList[i].fare_type == 0) {
                                            tempList[i].statusTitle = '待发货';
                                        } else if (tempList[i].fare_type == 1) {
                                            tempList[i].statusTitle = '待自提';
                                        }
                                    }
                                } else if (tempList[i].pay_status == 2) {
                                    // fare_type 0邮寄 1自提
                                    if (tempList[i].fare_type == 0) {
                                        tempList[i].statusTitle = '已发货';
                                    } else if (tempList[i].fare_type == 1) {
                                        tempList[i].statusTitle = '已自提';
                                    }
                                }
                            } // 订单的商品总数

                            let order_goods = tempList[i].order_good;
                            let nums = 0;

                            for (let j in order_goods) {
                                nums = nums + parseInt(order_goods[j].nums);
                            }

                            tempList[i].goods_total_nums = nums; // 商品总数,也应该接口返回(现在没有,就先自己总)
                        }

                        list = list.concat(tempList); // 计算总价 (不计算了,直接拿pay_price,这里还有优惠券)
                        // for(let i in list){
                        // 	list[i].totalPrice = parseFloat(list[i].price) + parseFloat(list[i].delivery_fee);
                        // 	list[i].totalMemberPrice = parseFloat(list[i].member_price) + parseFloat(list[i].delivery_fee)
                        // };

                        that.setData({
                            orderList: list,
                            page: that.page + 1
                        });
                    }
                })
                .catch((err) => {
                    // that.setData({
                    // 	loading: false
                    // });
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 切换列表
        onClickTab(event) {
            // console.log('event=====',event);
            let that = this;
            that.setData({
                active: event.detail.name,
                page: 1,
                orderList: []
            });
            that.getOrderList();
        },

        // 处理订单(发货)
        toHandle(event) {
            let that = this; // console.log(event)

            let order = event.currentTarget.dataset.order;
            let params = {
                order_id: order.id
            };
            myPro
                .wxRequest('store/order/ship', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        page: 1,
                        orderList: [],
                        finished: false
                    });
                    that.getOrderList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 处理订单(取消)
        cancleOrder(event) {
            let that = this;
            let order = event.currentTarget.dataset.order;
            let params = {
                order_id: order.id
            };
            myPro
                .wxRequest('store/tx/cancelOrder', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        page: 1,
                        orderList: [],
                        finished: false
                    });
                    that.getOrderList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/* pages/shopOrder/index.wxss */
/* tab */
.van-tabs__scroll--line {
    height: auto !important;
}
.van-tabs {
    border-bottom: 1rpx solid rgba(243, 244, 249, 1);
}
.van-tabs__line {
    width: 40rpx !important;
    height: 4rpx;
    background: rgba(211, 68, 68, 1);
    border-radius: 2rpx !important;
}
.van-tab,
.van-tab .van-ellipsis {
    padding: 0 !important;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 1);
}
.van-tab--active,
.van-tab--active .van-ellipsis {
    color: rgba(211, 68, 68, 1);
}
/* 订单列表 */
.orderList {
    padding: 90rpx 30rpx 0;
}
.orderList .order {
    margin-top: 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 10rpx;
    padding: 0 30rpx;
}
.orderList .order:last-child {
    margin-bottom: 30rpx;
}
.order .order_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.order .order_t_l {
    display: flex;
    align-items: center;
}
.order .order_type {
    width: 75rpx;
    height: 31rpx;
    border-radius: 5rpx;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 31rpx;
    background: #295c56;
}
/* .order .order_type.ziti{
	background:rgba(85,141,255,1);
}
.order .order_type.waimai{
	background:rgba(213,76,67,1);
} */
.order .order_time {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.45);
    padding-left: 20rpx;
}
.order .order_status {
    font-size: 30rpx;
    color: rgba(255, 109, 29, 1);
}
.order .order_goods {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.order .order_goods_l {
    display: flex;
}
.order .goods_thumb {
    width: 127rpx;
    height: 127rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
.order .goods_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 18rpx;
}
.order .goods_title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 1);
}
.order .goods_num {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.54);
}
.order .order_goods_r {
    color: rgba(211, 68, 68, 1);
}
.order .cash_tag {
    font-size: 26rpx;
}
.order .cash_num {
    font-size: 42rpx;
    padding-left: 10rpx;
}
.order .goods_vip_price .cash_num {
    font-size: 26rpx;
    padding-left: 0;
}
.order .order_address {
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}
.order .icon_wrap {
    width: 29rpx;
    height: 35rpx;
}
.order .icon_address {
    width: 29rpx;
    height: 35rpx;
}
.order .address {
    padding-left: 15rpx;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 1);
}
.order .order_pay {
    padding: 30rpx 0;
    font-size: 26rpx;
    display: flex;
    justify-content: space-between;
}
.order .order_pay_l {
    display: flex;
}
.order .order_pay .heji {
    color: rgba(0, 0, 0, 1);
}
.order .sum_txt {
    padding-left: 10rpx;
}
.order .order_pay .heji_price {
    color: rgba(211, 68, 68, 1);
    display: flex;
    flex-direction: column;
    padding-left: 10rpx;
}

.order .btn_pay {
    width: 179rpx;
    height: 59rpx;
    border-radius: 30rpx;
    font-size: 32rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 59rpx;
}
.order .btn_pay.ziti {
    background: rgba(100, 200, 133, 1);
}
.order .btn_pay.waimai {
    background: rgba(100, 150, 252, 1);
}
/* 会员价 */
.vip_tag {
    width: 57rpx;
    height: 20rpx;
    line-height: 20rpx;
    background: rgba(213, 76, 67, 1);
    color: #fff;
    font-size: 16rpx;
    text-align: center;
    display: inline-block;
    margin-left: 12rpx;
    position: relative;
}
.vip_tag::before {
    content: '';
    position: absolute;
    left: -6rpx;
    top: 0;
    width: 0;
    height: 0;
    border-left: 6rpx solid transparent;
    border-right: 6rpx solid transparent;
    border-top: 6rpx solid rgba(213, 76, 67, 1);
    display: block;
}
/* 运费 */
.yunfei {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    padding: 30rpx 0;
    font-size: 26rpx;
}
.yunfei .price {
    color: rgba(211, 68, 68, 1);
}
/* 顾客信息 */
.address .info {
    padding-left: 10rpx;
}
.address .info:first-child {
    padding-left: 0;
}
.user_info {
    display: flex;
    align-items: center;
    padding: 30rpx 0 10rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.user_info .thumb {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}
.user_info .nickname {
    padding-left: 30rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/* 固定tab的位置 */
.custom_tabs {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
/* 规格名 */
.goods_labels {
    display: flex;
    flex-wrap: wrap;
    font-size: 24rpx;
    color: rgba(8, 8, 8, 0.54);
    width: 320rpx;
}
.goods_labels .label {
    padding: 6rpx;
    background: #f6f6f6;
    margin: 10rpx 14rpx 0 0;
}
/* 商品原价 */
.order .goods_def_price {
    font-size: 26rpx;
    color: rgba(8, 8, 8, 0.54);
}
.order .goods_def_price .price {
    text-decoration: line-through;
}
/* 取消订单 */
.order .btn_pay.cancle {
    background: rgba(0, 0, 0, 0.4);
    margin-top: 10rpx;
}
</style>