zx_bms_uni/pages/orderlist/orderlist.vue

<template>
    <view class="container">
        <view class="main-container">
            <view class="nav-tab flex-row flex-between">
                <view class="order-type-container flex-row flex-start">
                    <view :class="'nav-item ' + (navSelected == 1 ? 'nav-active' : '')" @tap="bindSelectNavTab" data-nav="1">待确认</view>
                    <view :class="'nav-item ' + (navSelected == 2 ? 'nav-active' : '')" @tap="bindSelectNavTab" data-nav="2">支付成功</view>
                    <view :class="'nav-item ' + (navSelected == 3 ? 'nav-active' : '')" @tap="bindSelectNavTab" data-nav="3">全部</view>
                </view>
                <view class="search-btn" style="margin-right: 20px" @tap="navigatorToPage" data-page="/pages/searchOrder/searchOrder">
                    <image style="width: 19px; height: 19px" src="/static/resource/images/search-i.png"></image>
                </view>
            </view>

            <view class="list-group">
                <view class="list-item" v-for="(item, index) in orderList" :key="index">
                    <view class="list-item-head flex-row flex-between">
                        <view class="order-time">{{ item.ctime }}</view>
                        <view class="order-status">
                            <text v-if="item.pay_type == 1 && item.status == 0" class="i-status to-check">线下-待确认</text>
                            <text v-if="item.pay_type == 1 && item.status == 1" class="i-status to-pay-ok">线下 - 支付成功</text>
                            <text v-if="item.pay_type == 0 && item.status == 1" class="i-status to-pay-ok">微信 - 支付成功</text>
                        </view>
                    </view>

                    <view class="list-item-body">
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">门店</view>
                            <view class="form-value">{{ item.shop_name }}</view>
                        </view>
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">电池编号</view>
                            <view class="form-value" @tap="handleClipboard" :data-clipdata="item.battery_sn">
                                {{ item.battery_sn }}
                                <image src="/static/resource/images/clip.png" style="width: 10px; height: 10px; margin-left: 5px"></image>
                            </view>
                        </view>
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">单价</view>
                            <view class="form-value">
                                <text>{{ item.hire_price / 100 }}元/</text>
                                <text v-if="item.hire_duration_unit == 1">天</text>
                                <text v-else-if="item.hire_duration_unit == 2">月</text>
                                <text v-else-if="item.hire_duration_unit == 3">年</text>
                            </view>
                        </view>
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">租赁用户</view>
                            <view class="form-value">{{ item.user_name }} {{ item.phone }}</view>
                        </view>
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">租赁时长</view>
                            <view class="form-value">
                                <text>{{ item.hire_duration }}</text>
                                <text v-if="item.hire_duration_unit == 1">天</text>
                                <text v-else-if="item.hire_duration_unit == 2">月</text>
                                <text v-else-if="item.hire_duration_unit == 3">年</text>
                            </view>
                        </view>
                        <view class="form-item flex-row flex-between">
                            <view class="form-label">应付金额</view>
                            <view class="form-value pay-money">{{ item.money / 100 }}元</view>
                        </view>
                    </view>

                    <view v-if="item.pay_type == 1 && item.status == 0" class="list-item-footer flex-row flex-end">
                        <view class="op-btn" @tap="bindCheckPay" :data-ordersn="item.order_sn" :data-idx="index">确认支付</view>
                    </view>
                </view>
            </view>

            <no-more :is-loading="isLoading" />
        </view>
    </view>
</template>

<script>
import noMore from '@/component/nomore/nomore';
// pages/orderlist/orderlist.js
var config = require('../../common/config.js');
var http = require('../../common/http.js');
var common = require('../../common/common.js');
var storage = require('../../common/storage.js');
export default {
    components: {
        noMore
    },
    data() {
        return {
            navSelected: 1,
            start_page: 1,
            limit_page: 10,
            orderList: [],
            isLoading: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.refreshOrderList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.refreshOrderList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            isLoading: true
        });
        this.start_page++;
        this.loadOrderList();
    },
    methods: {
        bindSelectNavTab: function (e) {
            const navSelected = e.currentTarget.dataset.nav || 1;
            this.setData({
                navSelected: navSelected,
                start_page: 1,
                orderList: []
            });
            this.loadOrderList();
        },

        refreshOrderList() {
            this.setData({
                start_page: 1,
                orderList: []
            });
            this.loadOrderList();
        },

        loadOrderList: function () {
            const pData = {
                page: this.start_page,
                limit: this.limit_page,
                order_status: this.navSelected
            };
            const that = this;
            common.loading();
            http.postApi(config.API_ORDER_CHILDREN_LIST, pData, function (resp) {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let orderList = that.orderList;
                    orderList.push.apply(orderList, resp.data.data.list);
                    that.setData({
                        orderList: orderList,
                        isLoading: false
                    });
                } else {
                    common.simpleToast(resp.data.msg);
                }
            });
        },

        bindCheckPay: function (e) {
            const idx = e.currentTarget.dataset.idx;
            const order_sn = e.currentTarget.dataset.ordersn;
            const orderInfo = this.orderList[idx];
            if (!orderInfo) {
                common.simpleToast('订单错误');
                return;
            }
            if (orderInfo.pay_type != 1 || orderInfo.status != 0) {
                common.simpleToast('该订单不是线下支付订单');
                return;
            }
            const that = this;
            uni.showModal({
                title: '提示',
                content: '请确定该用户已线下支付',
                showCancel: true,
                cancelText: '取消',
                cancelColor: '',
                confirmText: '确定',
                confirmColor: '',
                success: function (res) {
                    if (res.confirm) {
                        const pData = {
                            order_sn: order_sn,
                            idx: idx
                        };
                        http.postApi(config.API_ORDER_PAY_SUCCESS, pData, function (resp) {
                            if (resp.data.code === 200) {
                                that.refreshOrderList();
                            } else {
                                common.simpleToast(resp.data.msg);
                            }
                        });
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        handleClipboard(e) {
            const clipdata = e.currentTarget.dataset.clipdata;
            uni.setClipboardData({
                data: clipdata
            });
        },

        navigatorToPage: function (e) {
            const page = e.currentTarget.dataset.page;
            if (!page) {
                return;
            }
            uni.navigateTo({
                url: page
            });
        }
    }
};
</script>
<style>
@import './orderlist.css';
</style>