zx_bms_uni/myPages/pages/deviceReplace/deviceReplace.vue

<template>
    <view class="container">
        <van-cell-group>
            <van-field :value="battery_sn" :label="$t('设备编号')" disabled :border="false" />
            <van-cell :title="$t('类型')" title-width="90px">
                <picker @change="bindSelectType" :value="type" :range="typeList">
                    {{ typeList[type] }}
                </picker>
            </van-cell>
            <van-cell v-if="replaceStatusList.length != 0" :title="$t('设备状态')" title-width="90px">
                <view class="return-status-view">
                    <van-button
                        class="return-status-button"
                        :plain="!useReplaceStatusList[index]"
                        size="small"
                        type="info"
                        :data-index="index"
                        @click="changeReturnStatus($event, { index })"
                        v-for="(item, index) in replaceStatusList"
                        :key="index"
                    >
                        {{ item }}
                    </van-button>
                </view>
            </van-cell>
            <van-cell v-if="type == 1" :title="$t('换货型号')" title-width="90px">
                <view class="input-bats">
                    <view class="input-bat-item">
                        <input class="input-bat-type" type="number" :value="exchange_type_v" @blur="inputExchangeTypeV" />
                        V
                    </view>
                    <view class="input-bat-item">
                        <input class="input-bat-type" type="number" :value="exchange_type_a" @blur="inputExchangeTypeA" />
                        AH
                    </view>
                </view>
            </van-cell>
            <van-field :value="description" :label="$t('补充描述')" type="textarea" :placeholder="$t('请输入补充描述')" autosize :border="false" @change="inputDescription" />
        </van-cell-group>

        <view class="return-uptitle">{{$t('上传图片')}}</view>
        <van-uploader class="return-upimage" :file-list="image_list" @after-read="upImage" @delete="delImage" />

        <view class="save-op flex-row flex-around">
            <button type="warn" size="mini" plain @tap="bindCancel">{{ $t('取消') }}</button>
            <button type="primary" size="mini" plain @tap="bindSave">{{ $t('确定') }}</button>
        </view>
    </view>
</template>

<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: '',
            type: 0,
            typeList: [this.$t('退货'), this.$t('换货')],
            exchange_type_v: 1,
            exchange_type_a: 1,
            replaceStatusList: [],
            useReplaceStatusList: [],
            description: '',
            image_list: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('退换货申请')
		});
        const userBaseInfo = storage.getUserInfo();
        this.setData({
            userBaseInfo: userBaseInfo,
            battery_sn: options.battery_sn
        });
        this.loadReplaceStatusList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    methods: {
        loadReplaceStatusList: function () {
            const that = this;
            http.postApi(config.API_USER_REPLACE_STATUS_LIST, {}, function (resp) {
                if (resp.data.code === 200) {
                    that.setData({
                        replaceStatusList: resp.data.data.list,
                        useReplaceStatusList: new Array(resp.data.data.list.length).fill(false)
                    });
                } else {
                    common.simpleToast(that,resp.data.msg);
                    uni.navigateBack({
                        delta: 1
                    });
                }
            });
        },

        bindSelectType: function (event) {
            this.setData({
                type: event.detail.value
            });
        },

        inputDescription: function (event) {
            this.description = event.detail;
        },

        changeReturnStatus: function (event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            const useReplaceStatusList = this.useReplaceStatusList;
            useReplaceStatusList[event.currentTarget.dataset.index] = !useReplaceStatusList[event.currentTarget.dataset.index];
            this.setData({
                useReplaceStatusList: useReplaceStatusList
            });
        },

        inputExchangeTypeV(e) {
            this.exchange_type_v = e.detail.value;
        },

        inputExchangeTypeA(e) {
            this.exchange_type_a = e.detail.value;
        },

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

        upImage: function (event) {
            const { file } = event.detail;
            common.loading(this);
            const that = this;
            http.getApi(config.API_QINIU_UP_IMG_TOKEN, {}, (response) => {
                if (response.data.code === 200) {
                    const token = response.data.data.token;
                    uni.uploadFile({
                        url: config.QINIU_UPLOAD_SITE,
                        filePath: file.path,
                        name: 'file',
                        formData: {
                            token: token
                        },
                        success(res) {
                            uni.hideLoading();
                            var rtDataObj = JSON.parse(res.data);
                            const key = rtDataObj.key;
                            const { image_list = [] } = that;
                            image_list.push({
                                ...file,
                                url: config.QINIU_SITE + key
                            });
                            that.setData({
                                image_list
                            });
                        },
                        fail(res) {
                            common.simpleToast(that,that.$t('上传失败'));
                            uni.hideLoading();
                        }
                    });
                } else {
                    common.simpleToast(that,response.data.msg);
                    uni.hideLoading();
                }
            });
        },

        delImage: function (event) {
            const { image_list = [] } = this;
            image_list.splice(event.detail.index, 1);
            this.setData({
                image_list
            });
        },

        bindSave: function () {
            common.loading(this);
            const that = this;
            const pData = {
                battery_sn: this.battery_sn,
                journal: JSON.stringify({
                    type: parseInt(this.type) + 1,
                    exchange_type_v: this.exchange_type_v,
                    exchange_type_a: this.exchange_type_a,
                    return_status: this.replaceStatusList.filter((item, index) => {
                        return this.useReplaceStatusList[index];
                    }),
                    description: this.description,
                    image_list: this.image_list.map((item) => item.url)
                })
            };
            http.postApi(config.API_BATTERY_REPLACE, pData, function (resp) {
                uni.hideLoading();
                if (resp.data.code === 200) {
                    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 {
                    common.simpleToast(that,resp.data.msg);
                }
            });
        }
    }
};
</script>
<style>
@import './deviceReplace.css';
</style>