zx_bms_uni/myPages/pages/searchOrder/searchOrder.vue

<template>
    <view class="container">
        <view class="head-bar">
            <view class="search-container flex-row flex-between">
                <view class="search-control flex-row flex-between">
                    <picker @change="bindPickerChange" :value="selectedTypeIndex" :range="searchTypeArr">
                        <view class="picker">
                            {{ searchTypeArr[selectedTypeIndex] }}
                        </view>
                    </picker>
                    <input
                        type="text"
                        :value="seach_value"
                        class="input-search"
                        :confirm-type="$t('搜索')"
                        :placeholder="$t('请输入')"
                        placeholder-style="font-size: 12px;"
                        @input="bindInputSearch"
                    />
                </view>
                <view class="search-btn">
                    <view class="btn-search" @tap="bindHandleSearch">{{$t('搜索')}}</view>
                </view>
            </view>
        </view>

        <view style="height: 55px"></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">{{$t('线下-待确认')}}</text>
                        <text v-if="item.pay_type == 1 && item.status == 1" class="i-status to-pay-ok">{{$t('线下-支付成功')}}</text>
                        <text v-if="item.pay_type == 0 && item.status == 1" class="i-status to-pay-ok">{{$t('微信-支付成功')}}</text>
                    </view>
                </view>

                <view class="list-item-body">
                    <view class="form-item flex-row flex-between">
                        <view class="form-label">{{$t('门店')}}</view>
                        <view class="form-value">{{ item.shop_name }}</view>
                    </view>
                    <view class="form-item flex-row flex-between">
                        <view class="form-label">{{$t('电池编号')}}</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">{{$t('单价')}}</view>
                        <view class="form-value">
                            <text>{{ item.hire_price / 100 + $t('元')}}/</text>
                            <text v-if="item.hire_duration_unit == 1">{{$t('天')}}</text>
                            <text v-else-if="item.hire_duration_unit == 2">{{$t('月')}}</text>
                            <text v-else-if="item.hire_duration_unit == 3">{{$t('年')}}</text>
                        </view>
                    </view>
                    <view class="form-item flex-row flex-between">
                        <view class="form-label">{{$t('租赁用户')}}</view>
                        <view class="form-value">{{ item.user_name }} {{ item.phone }}</view>
                    </view>
                    <view class="form-item flex-row flex-between">
                        <view class="form-label">{{$t('租赁时长')}}</view>
                        <view class="form-value">
                            <text>{{ item.hire_duration }}</text>
                            <text v-if="item.hire_duration_unit == 1">{{$t('天')}}</text>
                            <text v-else-if="item.hire_duration_unit == 2">{{$t('月')}}</text>
                            <text v-else-if="item.hire_duration_unit == 3">{{$t('年')}}</text>
                        </view>
                    </view>
                    <view class="form-item flex-row flex-between">
                        <view class="form-label">{{$t('应付金额')}}</view>
                        <view class="form-value pay-money">{{ item.money / 100 + $t('元')}}</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">{{$t('确认支付')}}</view>
                </view>
            </view>
        </view>

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

<script>
import noMore from '@/component/nomore/nomore';
// myPages/pages/searchOrder/searchOrder.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 {
            searchTypeArr: [this.$t('订单号'), this.$t('设备编号'), this.$t('手机号码')],
            selectedTypeIndex: 0,
            start_page: 1,
            limit_page: 10,
            orderList: [],
            seach_value: '',
            order_sn: '',
            battery_sn: '',
            phone: '',
            isLoading: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('搜索')
		});
        if ('type' in options) {
            this.setData({
                selectedTypeIndex: parseInt(options.type)
            });
        }
        if ('search' in options) {
            this.setData({
                seach_value: options.search
            });
            this.bindHandleSearch();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            isLoading: true
        });
        this.start_page++;
        this.loadOrderList();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindPickerChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
            this.setData({
                selectedTypeIndex: e.detail.value
            });
        },

        bindInputSearch: function (e) {
            this.seach_value = e.detail.value;
        },

        bindHandleSearch: function () {
            if (common.isEmpty(this.seach_value)) {
                common.simpleToast(this,this.$t('请输入搜索的内容'));
                return;
            }
            common.loading(this);
            this.order_sn = '';
            this.battery_sn = '';
            this.phone = '';
            if (this.selectedTypeIndex == 0) {
                this.order_sn = this.seach_value;
            } else if (this.selectedTypeIndex == 1) {
                this.battery_sn = this.seach_value;
            } else if (this.selectedTypeIndex == 2) {
                this.phone = this.seach_value;
            }
            this.refreshOrderList();
        },

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

        loadOrderList: function () {
            const pData = {
                page: this.start_page,
                limit: this.limit_page,
                order_status: 3,
                order_sn: this.order_sn,
                battery_sn: this.battery_sn,
                phone: this.phone
            };
            const that = this;
            common.loading(this);
            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(that,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(this,this.$t('订单错误'));
                return;
            }
            if (orderInfo.pay_type != 1 || orderInfo.status != 0) {
                common.simpleToast(this,this.$t('该订单不是线下支付订单'));
                return;
            }
            const that = this;
            uni.showModal({
                title: this.$t('提示'),
                content: this.$t('请确定该用户已线下支付'),
                showCancel: true,
                cancelText: this.$t('取消'),
                cancelColor: '',
                confirmText: this.$t('确定'),
                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(that,resp.data.msg);
                            }
                        });
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        handleClipboard() {
            console.log('占位：函数 handleClipboard 未声明');
        }
    }
};
</script>
<style>
@import './searchOrder.css';
</style>