zx_bms_uni/pages/willExpire/willExpireDevice.vue

<template>
    <view class="container">
        <view class="batterylist-container">
            <view v-if="search_type != 4" class="battery-item" v-for="(item, index) in deviceList" :key="index">
                <view class="batter-info-group flex-row" @tap="bindCredit" :data-index="index">
                    <view style="width: calc(100% - 145rpx); padding-left: 23rpx">
                        <view class="battery-text">{{ $t('编号')+'：'+item.mac_id }}</view>
                        <view class="battery-text red-text">{{ $t('过期时间')+'：'+tools.formatTime(item.expire_time) }}</view>
                    </view>
                </view>

                <view class="battery-text battery-credit flex-row" @tap="bindCredit" :data-index="index">{{$t('')}}续费</view>
            </view>
        </view>

        <i-load-more :tip="isLoading ? $t('正在加载...') : $t('没有更多信息啦~')" :loading="isLoading" />
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
import noMore from '@/component/nomore/nomore';
import iDrawer from '@/component/iview/drawer/index';
import iCollapse from '@/component/iview/collapse/index';
import iCollapseItem from '@/component/iview/collapse-item/index';
import iLoadMore from '@/component/iview/load-more/index';
import comEleQuantity from '@/component/comEleQuantity/comEleQuantity';
// pages/willExpire/willExpireDevice.js
// pages/device/device.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');
const LIMT_PAGE = 10;
export default {
    components: {
        noMore,
        iDrawer,
        iCollapse,
        iCollapseItem,
        iLoadMore,
        comEleQuantity
    },
    data() {
        return {
            isLoading: false,
            isShowShopContainer: false,
            iconList: [],
            userInfo: {},
            selectedShopInfo: {},
            deviceList: [],
            start_page: 1,
            limit_page: LIMT_PAGE,
            search_type: 0,
            showSelectBtn: false,
            selectedAll: false,
            selectedNum: 0,
            all_count: 0,
            online_count: 0,
            offline_count: 0,
            expire_count: 0,
            groupTreeList: [],
            groupList: [],
            seach_value: '',
            search: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('即将到期')
		});
        const selectedShopInfo = storage.getSelectedShopInfo();
        if (selectedShopInfo) {
            this.setData({
                selectedShopInfo: selectedShopInfo
            });
        }
        this.loadIconList();
        this.loadUserInfo();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
		uni.setNavigationBarTitle({
			title: this.$t('即将到期')
		});
        const is_fresh = storage.getRefreshDeviceoPage();
        if (is_fresh) {
            this.loadUserInfo();
            storage.setRefreshDeviceoPage(false);
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        console.log('dd');
        this.refreshLoadDeviceList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.isLoading) {
            return;
        }
        this.setData({
            isLoading: true
        });
        this.start_page++;
        //common.loading()
        this.loadDeviceList();
    },
    methods: {
        handleCloseShopContainer: function () {
            this.setData({
                isShowShopContainer: false
            });
        },

        handleShowShopContainer: function () {
            this.setData({
                isShowShopContainer: true
            });
        },

        bindClickMainShop: function () {
            if (this.selectedShopInfo == {}) {
                return;
            }
            this.setData({
                search: '',
                seach_value: '',
                selectedShopInfo: {}
            });
            this.refreshLoadDeviceList();
        },

        loadIconList: function () {
            this.iconList = storage.getIconList();
            if (!this.iconList) {
                http.postApi(config.API_BATTERY_ICON_LIST, {}, (resp) => {
                    if (resp.data.code === 200) {
                        storage.setIconList(resp.data.data.list);
                        this.setData({
                            iconList: resp.data.data.list
                        });
                    } else {
                        common.simpleToast(this,resp.data.msg);
                    }
                });
            } else {
                this.setData({
                    iconList: this.iconList
                });
            }
        },

        loadUserInfo: function () {
            const userInfo = storage.getUserInfo();
            if (!userInfo) {
                http.postApi(config.API_USER_INFO, {}, (resp) => {
                    if (resp.data.code === 200) {
                        storage.setUserInfo(resp.data.data);
                        this.setData({
                            userInfo: resp.data.data
                        });
                        this.refreshLoadDeviceList();
                        /*this.setData({
              shopList: common.shopListToTree(storage.getTotalStatisList(), me.data.userInfo.shop_id)
            })*/
                    } else {
                        common.simpleToast(this,resp.data.msg);
                    }
                });
            } else {
                this.setData({
                    userInfo: userInfo
                });
                this.refreshLoadDeviceList();
            }
        },

        loadChildrenDevice: function (e) {
            this.setData({
                search: '',
                seach_value: '',
                selectedShopInfo: e.currentTarget.dataset.data
            });
            storage.setSelectedShopInfo(e.currentTarget.dataset.data);
            this.refreshLoadDeviceList();
        },

        refreshLoadDeviceList: function () {
            if (this.isLoading) {
                return;
            }
            this.setData({
                deviceList: [],
                isLoading: true
            });
            common.loading(this);
            this.limit_page = LIMT_PAGE;
            this.start_page = 1;
            this.loadDeviceList();
        },

        loadDeviceList: function () {
            const that = this;
            const pData = {
                size: that.limit_page,
                page: that.start_page
            };
            http.postApi(config.API_RENEW_LIST, pData, (resp) => {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let deviceList = that.deviceList;
                    deviceList.push.apply(deviceList, resp.data.data.list);
                    that.setData({
                        deviceList: deviceList,
                        isLoading: false
                    });
                } else {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        },

        navigatorToPage: function (e) {
            const page = e.currentTarget.dataset.page;
            if (!page) {
                return;
            }
            uni.navigateTo({
                url: page
            });
        },

        handleReturn: function () {
            uni.navigateBack({
                delta: 1
            });
        },

        bindCredit: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            uni.navigateTo({
                url: '/pages/credit/credit?macid=' + deviceInfo.mac_id,
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        }
    }
};
</script>
<style>
@import './willExpireDevice.css';
</style>