zx_bms_uni/pages/searchDevice/searchDevice.vue

<template>
    <view class="container">
        <view class="head-bar">
            <view class="search-container flex-row flex-between">
                <view class="search-btn flex-row" style="margin-right: 20rpx" @tap="scanCode">
                    <image style="width: 40rpx; height: 40rpx" src="https://qiniu.bms16.com/Fn5mP9lHn-yq1rTxEOzf40sv7pd1"></image>
                </view>
                <view class="search-control flex-row flex-between">
                    <input
                        type="text"
                        class="input-search"
                        :value="seach_value"
                        :confirm-type="$t('搜索')"
                        :placeholder="$t('请输入')"
                        placeholder-style="font-size: 12px;"
                        @input="bindInputSearch"
                    />
                </view>
                <view class="search-btn flex-row">
                    <view class="btn-search" @tap="bindHandleSearch">{{$t('搜索')}}</view>
                    <image v-if="userInfo.type == 'group'" @tap="bindGroupSearch" style="width: 40rpx; height: 40rpx" src="/static/resource/images/youjiantou.png"></image>
                </view>
            </view>
        </view>

        <view style="height: 55px"></view>

        <view class="batterylist-container">
            <view class="battery-item" v-for="(item, index) in deviceList" :key="index">
                <!-- > bindlongpress="bindLongTapBattery" -->

                <view class="batter-info-group flex-row" @tap="bindSelect" :data-index="index">
                    <view class="battery-icon">
                        <image class="battery-icon-img" :src="iconList[item.icon].normal"></image>
                    </view>
                    <view style="width: calc(100% - 145rpx); padding-left: 23rpx">
                        <view class="battery-text flex-row flex-between">
                            <view>{{$t('名称') +'：' + item.name }}</view>
                        </view>
                        <view class="battery-text">{{ $t('编号') +'：' + item.mac_id }}</view>
                        <view class="battery-text">{{ $t('状态') +'：' + item.expire == 1 ? $t('到期') : item.online == 1 ? $t('在线') : $t('离线') }}</view>
                        <view class="battery-text">{{ $t('时间') +'：' + tools.formatTime(item.gps_time) }}</view>
                        <!--view class="battery-info flex-row flex-between">
            <view class="no-class battery-info-left" data-macid="{{item.mac_id}}">
              
              <view class="battery-macid">IMEI:{{item.mac_id}}</view>
              <view class="battery-macid">
                <view class="flex-row flex-between" style="margin-right: 10px;">
                  <view class="flex-row" style="color: #0CC191">{{item.voltage}} V</view>
                  <view class="flex-row" style="margin-left: 8px">里程: {{item.day_mil}} 公里</view>
                  <view class="flex-row" style="margin-left: 8px">{{item.speed}}km/h</view>
                </view>
              </view>
              <view class="battery-macid">{{tools.formatTime(item.gps_time)}}</view>
              <view class="battery-com">
              </view>
            </view>
            <!--view class="no-class battery-info-right" style="text-align: right;">
              <view class="i-status shop-name">{{item.shop_name}}</view>
              <view wx:if="{{item.user_id!=0}}" class="surplus-days">
                <view wx:if="{{item.surplus_days>=0}}" class="b-day">剩余{{item.surplus_days}}天</view>
                <view wx:else class="b-day">已过期{{item.surplus_days*(-1)}}天</view>
              </view>
            </view>
          </view-->
                    </view>
                </view>

                <view class="battery-text battery-info" style="color: #0ec193" @tap.stop.prevent="bindToInfo" :data-index="index">
                    {{$t('详情')}}
                    <image class="battery-info-img" src="/static/resource/images/fanhui.png"></image>
                </view>

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

                <view class="op-group flex-row flex-around">
                    <!-- <picker mode="date" value="{{date}}" end="{{curDate}}" bindchange="bindDateChange" data-macid="{{item.macid}}">
          <view class="op-item flex-row flex-start">
            <view>
              <image class="op-icon" src="https://qiniu.bms16.com/Fi_JnvnBjpW1Hmv_7zsEcc0Ut7qO"></image>
            </view>
            <view class="op-des">轨迹</view>
          </view>
        </picker> -->
                    <view v-if="item.bms == 1" class="op-item" @tap.stop.prevent="bindToBMS" :data-index="index">
                        <image class="op-icon" src="/static/resource/images/BMS.png"></image>
                        <view class="op-des">BMS</view>
                    </view>
                    <view class="op-item" @tap.stop.prevent="bindLocal" :data-index="index" :data-mac="item.mac_id">
                        <image class="op-icon" src="/static/resource/images/dingwei2.png"></image>
                        <view class="op-des">{{$t('定位')}}</view>
                    </view>
                    <view class="op-item" @tap.stop.prevent="bindAlarm" :data-index="index">
                        <image class="op-icon" src="/static/resource/images/baojing.png"></image>
                        <view class="op-des">{{$t('报警')}}</view>
                    </view>
                    <!-- view class="op-item" bindtap="bindToInfo" data-index="{{index}}" -->
                    <view class="op-item" @tap.stop.prevent="bindToSet" :data-index="index">
                        <image class="op-icon" src="/static/resource/images/set.png"></image>
                        <view class="op-des">{{$t('设置')}}</view>
                    </view>
                </view>

                <!--view wx:if="{{showSelectBtn}}" class="battery-select-container" bindtap="bindSelectBattery" data-index="{{index}}">
        <image src="/resource/images/check-{{item.selected?'yes':'no'}}.png" class="check-icon"></image>
      </view-->
            </view>
        </view>

        <!-- <view class="show-shop-btn" bindtap="handleShowShopContainer"> → </view> -->

        <!-- <no-more is-loading="{{isLoading}}" /> -->
        <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 iLoadMore from '@/component/iview/load-more/index';
// pages/searchDevice/searchDevice.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 = 5;
export default {
    components: {
        iLoadMore
    },
    data() {
        return {
            isLoading: false,
            iconList: [],
            deviceList: [],
            start_page: 1,
            limit_page: LIMT_PAGE,
            seach_value: '',
            search: '',

            userInfo: {
                type: ''
            },

            normal: '',
			locale: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('全局搜索')
		});
        if (options.search) {
            this.setData({
                seach_value: options.search
            });
            this.refreshLoadDeviceList();
        }
        this.loadIconList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
		uni.setNavigationBarTitle({
			title: this.$t('全局搜索')
		});
        const is_fresh = storage.getRefreshDeviceoPage();
        if (is_fresh) {
            this.refreshLoadDeviceList();
            storage.setRefreshDeviceoPage(false);
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.refreshLoadDeviceList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.isLoading) {
            return;
        }
        this.setData({
            isLoading: true
        });
        this.start_page++;
        this.loadDeviceList();
    },
    methods: {
        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
                });
            }
        },

        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,
                search: that.search
            };
            http.postApi(config.API_BATTERY_SEARCH, pData, (resp) => {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let deviceList = this.deviceList;
                    deviceList.push.apply(deviceList, resp.data.data.list);
                    this.setData({
                        deviceList: deviceList,
                        isLoading: false
                    });
                } else {
                    common.simpleToast(this,resp.data.msg);
                }
            });
        },

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

        bindHandleSearch: function () {
            this.search = this.seach_value;
            this.refreshLoadDeviceList();
        },

        bindLocal: function (e) {
            const index = e.currentTarget.dataset.index;
            const mac_id = e.currentTarget.dataset.mac;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            if (
                common.isEmpty(deviceInfo.longitude + '') ||
                deviceInfo.longitude == '-' ||
                common.isEmpty(deviceInfo.latitude + '') ||
                deviceInfo.latitude == '-' ||
                deviceInfo.longitude == 0 ||
                deviceInfo.latitude == 0
            ) {
                common.simpleToast(this,this.$t('该设备暂无位置信息'));
                return;
            }
            storage.setSelectedDeviceInfo(deviceInfo);
			this.locale = uni.getLocale();
			if (this.locale === 'zh-Hans' || this.locale === 'zh') {
			  uni.navigateTo({
			      url: '/pages/deviceLocal/deviceLocal'
			  });
			} else {
			  uni.navigateTo({
			      url: '/pages/deviceLocalWeb/deviceLocal'+ '?macid=' + mac_id
			  });
			}
        },

        bindToBMS: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            if (deviceInfo.bms == 1) {
                uni.navigateTo({
                    url:
                        '/pages/bms/bms?macid=' +
                        deviceInfo.mac_id +
                        '&deviceType=' +
                        deviceInfo.device_type +
                        '&bt_type=' +
                        deviceInfo.bt_type +
                        '&bms=' +
                        deviceInfo.bms +
                        '&btid=' +
                        deviceInfo.btid +
                        '&btkey=' +
                        deviceInfo.btkey,
                    success: function (res) {},
                    fail: function (res) {},
                    complete: function (res) {}
                });
            } else {
                common.alert(this.$t('该设备暂未配置BMS数据'));
                return;
            }
        },

        bindToInfo: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            storage.setSelectedDeviceInfo(deviceInfo);
            const _deviceInfo = encodeURIComponent(JSON.stringify(deviceInfo));
            uni.navigateTo({
                url: '/myPages/pages/deviceInfo/deviceInfo?deviceInfo=' + _deviceInfo
            });
        },

        bindSelect: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            storage.setSelectedDeviceInfo(deviceInfo);
            uni.reLaunch({
                url: '/pages/home/home'
            });
        },

        bindAlarm: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            uni.navigateTo({
                url: '/pages/warnList/warnList?macid=' + deviceInfo.mac_id
            });
        },

        bindToSet: function (e) {
            const index = e.currentTarget.dataset.index;
            const deviceInfo = this.deviceList[index];
            if (deviceInfo.expire == 1) {
                common.simpleToast(this,this.$t('设备到期'));
                return;
            }
            uni.navigateTo({
                url: '/myPages/pages/deviceCommand/deviceCommand?macid=' + deviceInfo.mac_id + '&type=' + deviceInfo.device_type + '&bt_type=' + deviceInfo.bt_type
            });
        },

        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) {}
            });
        },

        scanCode: function (e) {
            uni.scanCode({
                onlyFromCamera: true,
                scanType: [],
                success: (res) => {
                    console.log(res);
                    if (res.result) {
                        this.setData({
                            search: res.result,
                            seach_value: res.result
                        });
                        this.refreshLoadDeviceList();
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

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