zx_bms_uni/myPages/pages/deviceInfo/deviceInfo.vue

<template>
    <view class="container">
        <view class="form-group">
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/mingcheng.png"></image>
                    <text>{{$t('设备名称')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <input placeholder="" @blur="inputBatteryName" :value="batteryInfo.name" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/leixing.png"></image>
                    <text>{{$t('设备类型')}}</text>
                </view>
                <view class="form-value">{{ batteryInfo.device_type }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/IMEI.png"></image>
                    <text>IMEI</text>
                </view>
                <view class="form-value">{{ batteryInfo.mac_id }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/zhuangtai.png"></image>
                    <text>{{$t('状态')}}</text>
                </view>
                <view class="form-value">
                    {{
                        batteryInfo.expire == 1
                            ? $t('到期')
                            : batteryInfo.longitude == '0' || batteryInfo.latitude == '0' || batteryInfo.longitude == '' || device.batteryInfo == ''
                            ? $t('未启用')
                            : batteryInfo.online == 0
                            ? $t('离线')
                            : batteryInfo.speed == 0
                            ? $t('静止')
                            : $t('行驶')
                    }}
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/licheng.png"></image>
                    <text>{{$t('当日里程')}}</text>
                </view>
                <view class="form-value">{{ batteryInfo.day_mil ? batteryInfo.day_mil + 'km' : '0km' }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/dingweishijian.png"></image>
                    <text>{{$t('定位时间')}}</text>
                </view>
                <view class="form-value">{{ batteryInfo.gps_time == 0 ? '' : tools.formatTime(batteryInfo.gps_time) }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/tongxishijian.png"></image>
                    <text>{{$t('通信时间')}}</text>
                </view>
                <view class="form-value">{{ batteryInfo.heart_time == 0 ? '' : tools.formatTime(batteryInfo.heart_time) }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/sudu.png"></image>
                    <text>{{$t('速度')}}</text>
                </view>
                <view class="form-value">{{ batteryInfo.speed ? batteryInfo.speed + 'km/h' : '0km/h' }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/daoqishijian.png"></image>
                    <text>{{$t('到期时间')}}</text>
                </view>
                <view class="form-value">{{ tools.formatTime(batteryInfo.expire_time) }}</view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/chepaihao.png"></image>
                    <text>{{$t('车牌号')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <input placeholder="" @blur="inputBatteryCarNumber" :value="batteryInfo.car_number" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/chezhumc.png"></image>
                    <text>{{$t('车主名称')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <input placeholder="" @blur="inputBatteryMasterName" :value="batteryInfo.master_name" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/lxdianhua.png"></image>
                    <text>{{$t('联系电话')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <input placeholder="" @blur="inputBatteryPhone" :value="batteryInfo.phone" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/yanse.png"></image>
                    <text>{{$t('车辆颜色')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <input placeholder="" @blur="inputBatteryCarColor" :value="batteryInfo.car_color" />
                </view>
            </view>
            <view class="form-item">
                <view class="form-label flex-row">
                    <image class="left-icon" src="/static/resource/images/beizhu.png"></image>
                    <text>{{$t('备注')}}</text>
                </view>
                <view class="form-value flex-row flex-end">
                    <textarea value="" :placeholder="$t('备注信息')" auto-height class="remark-info" @blur="inputRemark" :value="batteryInfo.remark"></textarea>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">{{$t('图标')}}</view>
                <view class="form-value">
                    <radio-group class="radio-group" @change="bindSelectIcon">
                        <view class="flex-row flex-around">
                            <view v-for="(item, index) in iconList" :key="index">
                                <radio class="local-icon" :value="index" :checked="index == batteryInfo.icon" />

                                <image class="local-icon" mode="widthFix" :src="item.normal"></image>
                            </view>
                        </view>
                    </radio-group>
                </view>
            </view>
            <view style="margin: 50rpx 0">
                <button class="save-btn" @tap="bindSave">{{$t('保存')}}</button>
            </view>
        </view>
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
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 {
    data() {
        return {
            userBaseInfo: null,
            battery_sn: '',
            batteryInfo: null,
            batteryTypeList: [],
            selectedBatteryTypeIndex: 0,
            thirdDeviceTypeList: [],
            selectedThirdDeviceTypeIndex: -1,
            hireDurationUnitList: ['', this.$t('天'), this.$t('月'), this.$t('年')],
            selectedHireDurationUnitIndex: 2,
            iconList: [],
            selectedIconIndex: 0,
            pledge_money: 0,
            hire_price: 0,
            remark: '',

            device: {
                batteryInfo: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('设备详情')
		});
        const userBaseInfo = storage.getUserInfo();
        const _deviceInfo = options.deviceInfo;
        const deviceInfo = JSON.parse(decodeURIComponent(_deviceInfo));
        this.setData({
            userBaseInfo: userBaseInfo,
            batteryInfo: deviceInfo
        });
        console.log(deviceInfo);
        storage.setSearchClientUserInfo(null);
        const battery_sn = deviceInfo.mac_id;
        this.battery_sn = battery_sn;
        //this.loadBatteryTypeList()
        this.loadIconList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        //this.loadBatteryThirdDeviceTypeList()
        //this.loadBatteryInfo()
    },
    methods: {
        loadBatteryThirdDeviceTypeList: function () {
            const that = this;
            http.postApi(config.API_BATTERY_THIRD_DEVICE_TYPE_LIST, {}, function (resp) {
                if (resp.data.code === 200) {
                    that.setData({
                        thirdDeviceTypeList: resp.data.data.list
                    });
                    if (that.batteryInfo && that.selectedThirdDeviceTypeIndex == -1) {
                        that.setSelectThirdDeviceType();
                    }
                }
            });
        },

        loadBatteryInfo: function () {
            const pData = {
                battery_sn: this.battery_sn
            };
            const that = this;
            http.postApi(config.API_BATTERY_SEARCH, pData, function (resp) {
                if (resp.data.code === 200) {
                    that.setData({
                        batteryInfo: resp.data.data.batteryList[0]
                    });
                    that.setSelecteBatteryType();
                    that.setSelectThirdDeviceType();
                    that.setSelectHireDurationUnit();
                    const clientUserInfo = storage.getSearchClientUserInfo();
                    if (clientUserInfo) {
                        const batteryInfo = that.batteryInfo;
                        batteryInfo.user_id = clientUserInfo.user_id;
                        batteryInfo.user_name = clientUserInfo.user_name;
                        batteryInfo.phone = clientUserInfo.phone;
                        that.setData({
                            batteryInfo: batteryInfo
                        });
                        storage.setSearchClientUserInfo(null);
                    }
                } else {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        },

        loadBatteryTypeList: function () {
            const that = this;
            http.postApi(config.API_BATTERY_BTYPE_LIST, {}, function (resp) {
                if (resp.data.code === 200) {
                    that.setData({
                        batteryTypeList: resp.data.data.typeList
                    });
                } else {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        },

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

        setSelecteBatteryType: function () {
            const batteryInfo = this.batteryInfo;
            let index = 0;
            this.batteryTypeList.some((item, idx) => {
                if (item.battery_type_id == batteryInfo.battery_type_id) {
                    index = idx;
                    return true;
                }
            });
            this.setData({
                selectedBatteryTypeIndex: index
            });
        },

        bindSelectBatteryType: function (e) {
            this.setData({
                selectedBatteryTypeIndex: e.detail.value
            });
        },

        setSelectThirdDeviceType: function () {
            const batteryInfo = this.batteryInfo;
            let index = 0;
            const that = this;
            this.thirdDeviceTypeList.some((item, idx) => {
                if (item == batteryInfo.third_device_type) {
                    index = idx;
                    that.setData({
                        selectedThirdDeviceTypeIndex: index
                    });
                    return true;
                }
            });
        },

        bindSelectThirdDeviceType: function (e) {
            this.setData({
                selectedThirdDeviceTypeIndex: e.detail.value
            });
        },

        setSelectHireDurationUnit: function () {
            const batteryInfo = this.batteryInfo;
            this.setData({
                selectedHireDurationUnitIndex: batteryInfo.hire_duration_unit
            });
        },

        bindSelectHireDurationUnit: function (e) {
            this.setData({
                selectedHireDurationUnitIndex: e.detail.value
            });
        },

        bindSelectIcon: function (e) {
            const icon = e.detail.value;
            this.batteryInfo.icon = icon;
        },

        inputBatteryName: function (e) {
            const name = e.detail.value;
            this.batteryInfo.name = name;
        },

        inputBatteryCarNumber: function (e) {
            const car_number = e.detail.value;
            this.batteryInfo.car_number = car_number;
        },

        inputBatteryMasterName: function (e) {
            const master_name = e.detail.value;
            this.batteryInfo.master_name = master_name;
        },

        inputBatteryPhone: function (e) {
            const phone = e.detail.value;
            this.batteryInfo.phone = phone;
        },

        inputBatteryCarColor: function (e) {
            const car_color = e.detail.value;
            this.batteryInfo.car_color = car_color;
        },

        inputRemark: function (e) {
            const remark = e.detail.value;
            this.batteryInfo.remark = remark;
        },

        bindSearchClientUserInfo: function () {
            uni.navigateTo({
                url: '/myPages/pages/searchUser/searchUser'
            });
        },

        bindProductTime: function (e) {
            let batteryInfo = this.batteryInfo;
            batteryInfo.product_time = e.detail.value;
            this.setData({
                batteryInfo: batteryInfo
            });
        },

        bindHireTime: function (e) {
            let batteryInfo = this.batteryInfo;
            batteryInfo.hire_time = e.detail.value;
            this.setData({
                batteryInfo: batteryInfo
            });
        },

        bindHireExpireTime: function (e) {
            let batteryInfo = this.batteryInfo;
            batteryInfo.hire_expire_time = e.detail.value;
            this.setData({
                batteryInfo: batteryInfo
            });
        },

        bindSave: function () {
			const that = this
            let batteryInfo = this.batteryInfo;
            batteryInfo.macid = batteryInfo.mac_id;
            http.postApi(config.API_BATTERY_SET_INFO, batteryInfo, function (resp) {
                if (resp.data.code === 200) {
                    storage.setRefreshDeviceoPage(true);
                    common.simpleToast(that,that.$t('保存成功'));
                    uni.navigateBack({
                        delta: 1
                    });
                } else {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        },

        bindReleaseUser: function () {
            const pData = {
                battery_sn: this.batteryInfo.battery_sn
            };
            const that = this;
            http.postApi(config.API_BATTERY_RELEASE_USER, pData, function (resp) {
                if (resp.data.code === 200) {
                    storage.setRefreshDeviceoPage(true);
                    common.simpleToast(that,that.$t('解绑成功'));
                    that.loadBatteryInfo();
                } else if (resp.data.code === 10037) {
                    uni.navigateTo({
                        url: '/myPages/pages/deviceUserReturn/deviceUserReturn?battery_sn=' + that.batteryInfo.battery_sn
                    });
                } else {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        },

        bindTurnOn: function () {
            const that = this;
            const msg = that.$t('你确定要通电吗？');
            uni.showModal({
                title: that.$t('提示'),
                content: msg,
                showCancel: true,
                cancelText: that.$t('取消'),
                confirmText: that.$t('确定'),
                success: function (res) {
                    console.log(res);
                    if (res.confirm) {
                        const pData = {
                            macid: that.batteryInfo.mac_id,
                            cmd: 'OPENRELAY'
                        };
                        http.postApi(config.API_BATTERY_SEND_COMMAND, pData, function (resp) {
                            if (resp.data.code === 200) {
                                storage.setRefreshDeviceoPage(true);
                                common.simpleToast(that,that.$t('操作成功'));
                            } else {
                                common.simpleToast(that,resp.data.msg);
                            }
                        });
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindTurnOff: function () {
            const that = this;
            const msg = that.$t('你确定要断电吗？');
            uni.showModal({
                title: that.$t('提示'),
                content: msg,
                showCancel: true,
                cancelText: that.$t('取消'),
                confirmText: that.$t('确定'),
                success: function (res) {
                    console.log(res);
                    if (res.confirm) {
                        const pData = {
                            macid: that.batteryInfo.mac_id,
                            cmd: 'CLOSERELAY'
                        };
                        http.postApi(config.API_BATTERY_SEND_COMMAND, pData, function (resp) {
                            if (resp.data.code === 200) {
                                storage.setRefreshDeviceoPage(true);
                                common.simpleToast(that,that.$t('操作成功'));
                            } else {
                                common.simpleToast(that,resp.data.msg);
                            }
                        });
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindReplaceBattery: function () {
            uni.navigateTo({
                url: '/myPages/pages/deviceReplace/deviceReplace?battery_sn=' + this.batteryInfo.battery_sn
            });
        }
    }
};
</script>
<style>
@import './deviceInfo.css';
</style>