endo_an_2/pages/set/base.vue

<template>
    <view class="ant-layout page">
		<page-header></page-header>
        <head-title title="基础设置"></head-title>
        <view class="ant-layout-content content">
            <view class="form">
                <uni-row :gutter="gutter">
                    <uni-col :span="labelSpan">
                        <label class="ant-form-item-label">序列号</label>
                    </uni-col>
                    <uni-col :span="wrapSpan">
                        <view class="form-text">
                            {{ deviceSn }}
                        </view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="gutter">
                    <uni-col :span="labelSpan">
                        <label class="ant-form-item-label">设备名称：</label>
                    </uni-col>
                    <uni-col :span="wrapSpan">
                        <input class="ant-input" v-model="name" />
                    </uni-col>
                </uni-row>
                <uni-row :gutter="gutter">
                    <uni-col :span="labelSpan">
                        <label class="ant-form-item-label">锁屏密码：</label>
                    </uni-col>
                    <uni-col :span="wrapSpan">
                        <input type="number" class="ant-input" v-model="screenPw" placeholder="密码为4个数字"/>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="gutter">
                    <uni-col :span="labelSpan">
                        <label class="ant-form-item-label">设置密码：</label>
                    </uni-col>
                    <uni-col :span="wrapSpan">
                        <input type="number" class="ant-input" v-model="settingPw" placeholder="密码为4个数字"/>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="gutter">
                    <uni-col :span="labelSpan">
                        <label class="ant-form-item-label">接口密钥：</label>
                    </uni-col>
                    <uni-col :span="wrapSpan">
                        <input class="ant-input" v-model="apiKey" />
                    </uni-col>
                </uni-row>
                <uni-row :gutter="gutter">
                    <uni-col :span="wrapSpan" :offset="6" style="text-align: left;">
                        <view class="form-btn">
                            <view class="ant-btn" @click="submit">保存</view>
                            
                            <view class="ant-btn" style="margin-left: 20px;" @click="asyncSet">同步</view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>

        </view>

        <notice ref="notice"/>
    </view>  
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import HeadTitle from '@/components/HeadTitle.vue'
import Notice from '@/components/Notice.vue';
import { getMacAddress } from '@/js_sdk/zw-devicemac/devicemac.js'
import storage from '@/utils/storage.js'
import * as Api from '@/api/index.js'
export default {
    components: {
        PageHeader,Notice,HeadTitle
    },
    data() {
        return {
            gutter: 12,
            labelSpan: 6,
            wrapSpan: 16,
            deviceSn: '',

            name: '',
            settingPw: '',
            screenPw: '',
            apiKey: '',
        }
    },
    onLoad() {
        this.deviceSn = getMacAddress()
        let base = this.$store.getters.base
        this.name = base.name
        this.settingPw = base.settingPw
        this.screenPw = base.screenPw
        this.apiKey = base.apiKey
  
    },
    methods: {
        submit() {
            if (this.settingPw != '' && this.settingPw.length != 4 ) {
                this.$refs.notice.open({
                    title: '密码长度4个数字',
                    type: 'error'
                })
                return                
            }
            let form = {
                name: this.name,
                settingPw: this.settingPw,
                screenPw: this.screenPw,
                apiKey: this.apiKey
            }
            storage.set('base', form)
            this.$store.commit('SET_BASE', { ...form })
            this.$refs.notice.open({
                title: '保存成功',
                type: 'success'
            })
        },
        asyncSet() {
            this.$refs.notice.open({
                title: '正在同步数据...',
                content: '请稍候'
            })
            Api.deviceinfo({ 
                // mac: this.deviceSn,
                // name: this.name,
                // setting_password: this.settingPw,
                // screen_pw: this.screenPw,
                // api_key: this.apiKey
            }).then(res => { 
                console.log(res)
            })

        }
    },

}
</script>

<style scoped>
.page{
	background: transparent;
}

.form{
    font-size: 18px;
    margin-top: 20px;
    padding: 40px;
}
.form .uni-row{
    margin-bottom: 20px;
}

.ant-form-item-label{
    color: #747A8D;
    line-height: 40px;
}
.ant-input{
    height: 40px;
    font-size: 18px;
}
.form-text{
    color: #747A8D;
    line-height: 40px;
    text-align: left;
    font-size: 18px;
}

.ant-btn{
    line-height: 38px;
    background: #2F3242;
    border-color: #2F3242;
    height: 46px;
    width: 128px;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
}
.form-btn{
    margin-top: 60px;
}
</style>