zx_bms_uni/pages/deviceBatchAlter/deviceBatchAlter.vue

<template>
    <view class="container">
        <view class="form-group">
            <view class="form-item">
                <view class="form-label">所属门店</view>
                <view class="form-value">{{ devicelist[0].shop_name }}</view>
            </view>
            <view class="form-item">
                <view class="form-label">设备信息</view>
                <navigator class="form-value" url="/pages/deviceBatchList/deviceBatchList">共{{ devicelist.length }}个设备</navigator>
            </view>
            <view class="form-item">
                <view class="form-label">型号</view>
                <view class="form-value">
                    <!-- <picker bindchange="bindSelectBatteryType" value="{{selectedBatteryTypeIndex}}" range="{{batteryTypeList}}" range-key="type_name">
          <view class="picker">
            {{batteryTypeList[selectedBatteryTypeIndex].type_name}}
          </view>
        </picker> -->
                    <view class="input-bats">
                        <view class="input-bat-item">
                            <input class="input-bat-type" type="number" placeholder="" :value="battery_type_v" @blur="inputBatteryTypeV" />
                            V
                        </view>
                        <view class="input-bat-item">
                            <input class="input-bat-type" type="number" placeholder="" :value="battery_type_a" @blur="inputBatteryTypeA" />
                            AH
                        </view>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">设备类型</view>
                <view class="form-value">
                    <picker v-if="userBaseInfo.role == -1" @change="bindSelectThirdDeviceType" :value="selectedThirdDeviceTypeIndex" :range="thirdDeviceTypeList">
                        <view class="picker">
                            {{ thirdDeviceTypeList[selectedThirdDeviceTypeIndex] }}
                        </view>
                    </picker>
                    <text v-else>{{ thirdDeviceTypeList[selectedThirdDeviceTypeIndex] }}</text>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">押金</view>
                <view class="form-value flex-row flex-end">
                    <input type="digit" placeholder="0.00" @blur="inputPledgeMoney" />
                    <text class="u-unit">元</text>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">单价</view>
                <view class="form-value flex-row flex-end">
                    <input type="digit" placeholder="0.00" @blur="inputHirePirce" />
                    <text class="u-unit">元 /</text>
                    <picker @change="bindSelectHireDurationUnit" :value="selectedHireDurationUnitIndex" :range="hireDurationUnitList">
                        <view class="u-unit">
                            {{ hireDurationUnitList[selectedHireDurationUnitIndex] }}
                        </view>
                    </picker>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">备注</view>
                <view class="form-value flex-row flex-end">
                    <textarea value="" placeholder="备注信息" auto-height class="remark-info" @blur="inputRemark"></textarea>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">图标</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 :value="index" :checked="index == 0" />

                                <image class="local-icon" mode="widthFix" :src="item.local"></image>
                            </view>
                        </view>
                    </radio-group>
                </view>
            </view>
        </view>

        <view class="save-op">
            <button type="primary" plain @tap="bindSave">保存</button>
        </view>
    </view>
</template>

<script>
// pages/deviceBatchAlter/deviceBatchAlter.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 {
    data() {
        return {
            userBaseInfo: null,
            devicelist: [],
            batteryTypeList: [],
            selectedBatteryTypeIndex: 0,
            thirdDeviceTypeList: [],
            selectedThirdDeviceTypeIndex: 0,
            hireDurationUnitList: ['', '天', '月', '年'],
            selectedHireDurationUnitIndex: 2,
            iconList: [],
            selectedIconIndex: 0,
            pledge_money: 0,
            hire_price: 0,
            remark: '',
            battery_type_v: 0,
            battery_type_a: 0,
            shop_name: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        const userBaseInfo = storage.getUserInfo();
        this.setData({
            userBaseInfo: userBaseInfo
        });
        this.loadBatteryTypeList();
        this.loadIconList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.loadBatteryThirdDeviceTypeList();
        const devicelist = storage.getBatchSelectedDeviceList();
        this.setData({
            devicelist: devicelist
        });
    },
    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: ['默认'].concat(resp.data.data.list)
                    });
                    if (that.batteryInfo && that.selectedThirdDeviceTypeIndex == -1) {
                        that.setSelectThirdDeviceType();
                    }
                }
            });
        },

        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(resp.data.msg);
                }
            });
        },

        loadIconList: function () {
            const that = this;
            http.postApi(config.API_BATTERY_ICON_LIST, {}, function (resp) {
                if (resp.data.code === 200) {
                    that.setData({
                        iconList: resp.data.data.iconList
                    });
                } else {
                    common.simpleToast(resp.data.msg);
                }
            });
        },

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

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

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

        bindSelectIcon: function (e) {
            this.setData({
                selectedIconIndex: e.detail.value
            });
        },

        inputPledgeMoney: function (e) {
            const pledge_money = e.detail.value;
            this.pledge_money = pledge_money;
        },

        inputHirePirce: function (e) {
            const hire_price = e.detail.value;
            this.hire_price = hire_price;
        },

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

        inputBatteryTypeV(e) {
            const v = e.detail.value;
            this.battery_type_v = v;
        },

        inputBatteryTypeA(e) {
            const a = e.detail.value;
            this.battery_type_a = a;
        },

        bindSave: function () {
            const batteryTypeList = this.batteryTypeList;
            const battery_type_id = batteryTypeList[this.selectedBatteryTypeIndex].battery_type_id;
            const batList = [];
            this.devicelist.forEach((item) => {
                batList.push(item.battery_sn);
            });
            const pData = {
                batList: JSON.stringify(batList),
                battery_type_id: battery_type_id,
                car_icon: this.selectedIconIndex,
                hire_duration_unit: this.selectedHireDurationUnitIndex,
                third_device_type: this.selectedThirdDeviceTypeIndex === 0 ? 0 : this.thirdDeviceTypeList[this.selectedThirdDeviceTypeIndex],
                hire_price: this.hire_price,
                pledge_money: this.pledge_money,
                remark: this.remark,
                battery_type_v: this.battery_type_v,
                battery_type_a: this.battery_type_a
            };
            http.postApi(config.API_BATTERY_BATCH_EDIT, pData, function (resp) {
                if (resp.data.code === 200) {
                    storage.setRefreshDeviceoPage(true);
                    common.simpleToast('保存成功');
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                } else {
                    common.simpleToast(resp.data.msg);
                }
            });
        }
    }
};
</script>
<style>
@import './deviceBatchAlter.css';
</style>