zx_bms_uni/pages/smsAlarm/smsAlarm.vue

<template>
    <!-- pages/smsAlarm/smsAlarm.wxml -->

    <view class="container">
        <view style="height: 80rpx"></view>
        <view class="list-group">
            <view v-for="(item, index) in alarmList" :key="index">
                <view class="info-group list-item">
                    <view class="top-group">
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">{{$t('设备名称') + '：'}}</view>
                                <view class="info-text-gray">{{ item.gpsbms_name }}</view>
                            </view>
                            <view class="flex-row">
                                <view class="info-text">{{$t('设备编号') + '：'}}</view>
                                <view class="info-text-gray">{{ item.battery_sn }}</view>
                            </view>
                        </view>
                        <view class="group-view flex-row">
                            <view class="info-text">{{$t('已发生报警短信次数') + '：'}}</view>
                            <view class="red-text">{{ item.number }}次</view>
                        </view>
                        <view class="group-view flex-row">
                            <view class="info-text">{{$t('最近报警类型') + '：'}}</view>
                            <view class="red-text">{{ item.last_alarm_name }}</view>
                        </view>
                        <view class="group-view flex-row">
                            <view class="info-text">{{$t('最近报警时间') + '：'}}</view>
                            <view class="info-text-gray">{{ tools.formatTime(item.ctime) }}</view>
                        </view>
                    </view>
                    <view class="op_view flex-row">
                        <view @tap="bindAlarmConfigDevice" :data-index="index" class="item_alarm">{{$t('报警类型开关')}}</view>
                        <view @tap="bindAlarmRecord" :data-index="index" class="item_record">{{$t('报警记录')}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-more">{{$t('没有更多信息啦~')}}</view>
        <view style="height: 90rpx"></view>
        <view class="top-bar-container flex-row">
            <view style="font-size: 28rpx">{{$t('短信报警通知')}}</view>
            <image :src="!alarmStatus ? '/static/resource/images/kaiqi.png' : '/static/resource/images/guanbi.png'" class="notice-img" @tap="bindSetNotice"></image>
        </view>

        <view class="bottom-bar-container flex-row flex-between">
            <view @tap="bindSetConfigType" class="config_type_view">{{$t('配置全部报警')}}</view>
            <view @tap="bindSetBalance" class="balance_view">{{ $t('余额') + '：' + coin / 100 + $t('币')}}</view>
        </view>

        <view v-if="isShowActivity" class="modal-group flex-row flex-around">
            <view class="pop_bg_view">
                <view class="avatar_view">
                    <image :src="userInfo.type == 'group' && userInfo.info.headimg ? userInfo.info.headimg : '/resource/images/logo.png'" class="avatar_img"></image>
                </view>
                <view class="pop_view">
                    <view class="name_text">{{ userInfo.info.name }}</view>
                    <view class="give_view">
                        <text>{{$t('赠送') + '：'}}</text>
                        <text class="red_view">{{ coupon.send_gift / 100 + $t('币') }}</text>
                    </view>
                    <!-- <rich-text nodes="{{useHtml}}"></rich-text> -->
                    <view class="use_view">
                        <text>{{$t('用途') + '：'}}</text>
                        <text class="use_mark">{{ $t('可用于短信报警通知，每条短信消耗') + coupon.cost / 100 + $t('币') }}</text>
                    </view>
                    <view @tap="clickUseCoupon" class="get_wallet">{{$t('领取到钱包')}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
// pages/smsAlarm/smsAlarm.js
var appConfig = require('../../common/appConfig.js');
const config = require('../../common/config.js');
const http = require('../../common/http.js');
const common = require('../../common/common.js');
var storage = require('../../common/storage.js');
const LIMT_PAGE = 20;
export default {
    data() {
        return {
            isLoading: false,
            alarmList: [],
            start_page: 1,
            limit_page: LIMT_PAGE,
            alarmStatus: false,
            // 0 开启短信报警 1 关闭短信报警
            coin: 0,
            userInfo: {
                type: '',

                info: {
                    headimg: '',
                    name: ''
                }
            },
            isShowActivity: false,
            coupon: {
                send_gift: 0,
                cost: 0
            },
            useHtml: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        const userInfo = storage.getUserInfo();
		uni.setNavigationBarTitle({
			title: this.$t('短信报警')
		});
        this.setData({
            userInfo: userInfo,
            useHtml:
                "<span style='font-size: 13px;'>\u7528\u9014\uFF1A</span><span style='color: rgb(51, 51, 51,0.38);font-size: 13px;'>\u53EF\u7528\u4E8E\u77ED\u4FE1\u62A5\u8B66\u901A\u77E5\uFF0C\u6BCF\u6761\u77ED\u4FE1\u6D88\u80170.1\u5E01</span>"
        });
        this.refreshLoadSmsAlarmList();
        this.loadHasCoupon();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
		uni.setNavigationBarTitle({
			title: this.$t('短信报警')
		});
        this.loadGetCoin();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.refreshLoadSmsAlarmList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.isLoading) {
            return;
        }
        this.setData({
            isLoading: true
        });
        this.start_page++;
        this.loadWarnList();
    },
    methods: {
        refreshLoadSmsAlarmList: function () {
            if (this.isLoading) {
                return;
            }
            this.setData({
                alarmList: [],
                isLoading: true
            });
            common.loading(this);
            this.limit_page = LIMT_PAGE;
            this.start_page = 1;
            this.loadWarnList();
        },

        bindSetConfigType() {
            uni.navigateTo({
                url: '/pages/smsConfig/smsConfig?type=1',
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindSetBalance() {
            uni.navigateTo({
                url: '/myPages/pages/wallet/wallet',
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindAlarmConfigDevice: function (e) {
            const index = e.currentTarget.dataset.index;
            uni.navigateTo({
                url: '/pages/smsConfig/smsConfig?type=0&macid=' + this.alarmList[index].battery_sn,
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindAlarmRecord: function (e) {
            const index = e.currentTarget.dataset.index;
            uni.navigateTo({
                url: '/pages/smsRecord/smsRecord?macid=' + this.alarmList[index].battery_sn,
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        loadHasCoupon() {
            const me = this;
            http.postRequest(config.API_HAS_COUPON, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        coupon: resp.data.data
                    });
                    if (me.coupon.has_coupon) {
                        me.setData({
                            isShowActivity: true
                        });
                    }
                } else {
                    common.simpleToast(me,resp.data.msg);
                }
            });
        },

        clickUseCoupon() {
            const me = this;
            http.postRequest(config.API_USE_COUPON, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        isShowActivity: false
                    });
                    me.loadGetCoin();
                    common.simpleToast(me,me.$t('领取成功'));
                } else {
                    common.simpleToast(me,resp.data.msg);
                }
            });
        },

        loadGetCoin() {
            const me = this;
            http.postApi(config.API_GET_COIN, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        coin: resp.data.data.coin
                    });
                }
            });
        },

        loadWarnList() {
            const me = this;
            common.loading(this);
            const pData = {
                size: me.limit_page,
                page: me.start_page
            };
            http.postRequest(config.API_ALARM_SUMMARY, pData, function (resp) {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let alarmList = me.alarmList;
                    var alarm_list = resp.data.data.list;
                    for (var i = 0; alarm_list.length > i; i++) {
                        var import_alarm_list = alarm_list[i].alarm_setting[0].list;
                        var warn_alarm_list = alarm_list[i].alarm_setting[1].list;
                        var importAlarmList = [];
                        var warnAlarmList = [];
                        for (var j = 0; import_alarm_list.length > j; j++) {
                            importAlarmList.push(import_alarm_list[j].alarmName);
                        }
                        for (var m = 0; warn_alarm_list.length > m; m++) {
                            warnAlarmList.push(warn_alarm_list[m].alarmName);
                        }
                        alarm_list[i].importAlarm = importAlarmList.toString();
                        alarm_list[i].warnAlarm = warnAlarmList.toString();
                    }
                    console.log(alarm_list);
                    alarmList.push.apply(alarmList, alarm_list);
                    me.setData({
                        alarmList: alarmList,
                        alarmStatus: resp.data.data.close_alarm,
                        coin: resp.data.data.coin,
                        isLoading: false
                    });
                } else {
                    common.simpleToast(me,resp.data.msg);
                }
            });
        },

        bindSetNotice() {
            if (!this.alarmStatus) {
                const me = this;
                uni.showModal({
                    title: '',
                    content: me.$t('您正在关闭短信通知，关闭后您将接收不到短信警报提醒，您是否要继续关闭?'),
                    showCancel: true,
                    cancelText: me.$t('取消'),
                    confirmText: me.$t('确定'),
                    success: function (res) {
                        if (res.confirm) {
                            me.loadCloseAlarm();
                        }
                    }
                });
            } else {
                this.loadCloseAlarm();
            }
        },

        loadCloseAlarm() {
            const me = this;
            common.loading(this);
            http.postRequest(
                config.API_CLOSE_ALARM,
                {
                    status: !this.alarmStatus
                },
                function (resp) {
                    uni.hideLoading();
                    if (resp.data.code === 200) {
                        me.setData({
                            alarmStatus: !me.alarmStatus
                        });
                    } else {
                        common.simpleToast(me,resp.data.msg);
                    }
                }
            );
        }
    }
};
</script>
<style>
@import './smsAlarm.css';
</style>