yinchuan-community-all/mini-program/garden-wxapp/pages/device/device.vue

<template>
    <view class="page" style="position: relative;">
        <view class="content">
            <loading isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
            <view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list"
                  :key="index">
                <view class="flex justify-between">
                    <view class="flex" style="width: 80%;">
                        <view class="tag" :class="item.tagColor">
                            <text>{{item.cameraName.substr(0,1)}}</text>
                        </view>
                        <view class="flex justify-center align-center padding-left-20 text-lg">
                            <text>{{item.cameraName}}</text>
                            <!-- <view v-if="defaultDoorValue==item.macAddress" class="margin-left-10 sm cu-tag bg-orange">
                                默认
                            </view> -->
                        </view>
                    </view>

                    <view class="flex justify-center align-center">
                        <u-radio-group size="40" active-color="#5064eb" v-model="door_value">
                            <u-radio
                                    @change.stop="radioChange"
                                    :name="item.macAddress">
                            </u-radio>
                        </u-radio-group>
                    </view>
                </view>

            </view>

            <view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
                <view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center"
                      style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
                    <text>开门</text>
                </view>
            </view>

            <u-action-sheet :list="actionList" v-model="actionShow" @click="actionClick"></u-action-sheet>
        </view>
        <u-tabbar v-model="tabbarCurr"
                  :icon-size="tabbar.iconSize"
                  :active-color="tabbar.activeColor"
                  :mid-button-size="tabbar.MinButtonSize"
                  :list="tabbar.list" :mid-button="true">
        </u-tabbar>
    </view>
</template>

<script>
    var app = getApp()
    var that;
    import loading from "@/components/loading/loading.vue"
    import {tabbar} from "@/assets/js/tabbar.js"

    export default {
        components: {
            loading
        },
        data() {
            return {
                actionList: [{
                    text: '设为默认',
                    subText: '默认选中该门禁'
                }, {
                    text: '选中'
                }, {
                    text: '开门'
                }],
                actionShow: false,
                //操作哪一项
                clickItem: '',

                //默认选中值
                defaultDoorValue: '',
                //选中值
                door_value: '',
                //员工id
                userId: '',

                //tabbar
                tabbarCurr: 1,
                tabbar: tabbar,
                //是否已开门
                isopen: false,
                //是否展示动画
                isloading: false,
                //设备列表
                device_list: [],
            };
        },
        onLoad() {
            that = this
            this.fetchDeviceList()

            let loginType = this.$cache.get('loginType')
            if (loginType == this.$loginType.STAFF) {
                this.getUserId()
            }

        },
        onShow() {
            if (this.canReset) {
                let list = this.$u.deepClone(this.device_list)
                list.forEach(item => {
                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
                })
                this.device_list = list
            }
            this.canReset = true
        },
        methods: {
            radioChange(e) {
                this.door_value = e
            },
            actionClick(index) {
                if (index == 0) {
                    //设为默认
                    this.$cache.put('defaultDoorValue', this.clickItem)
                    this.defaultDoorValue = this.clickItem
                } else if (index == 1) {
                    //选中
                    this.door_value = this.clickItem
                } else if (index == 2) {
                    //开门
                    this.door_value = this.clickItem
                    this.openDoor(this.clickItem)
                }
            },
            showAction(item) {
                this.clickItem = item.macAddress;
                this.actionShow = true
                console.log(this.clickItem);
            },
            itemClick(item) {
                this.door_value = item.macAddress
            },
            /**
             * 获取员工id
             */
            getUserId() {
                if (this.$isEmpty(getApp().globalData.userInfo)) {
                    let phone = this.$cache.get('phone')
                    this.$api.enterprisestaff.page({phone: phone, examine: 1}).then(res => {
                        let userInfo = res.data.records[0]
                        this.userId = userInfo.id
                    })
                } else {
                    let userInfo = getApp().globalData.userInfo
                    this.userId = userInfo.id
                }

            },
            async fetchDeviceList() {
                let res = await this.$api.device.page()
                this.device_list = res.data.records

                //默认选中值
                this.defaultDoorValue = this.$cache.get('defaultDoorValue')
                if (this.defaultDoorValue) {
                    //如果默认选中值不为空，就选中该门禁
                    this.door_value = this.defaultDoorValue
                } else {
                    //如果默认选中值为空，就选中第一个门禁
                    this.door_value = this.device_list[0].macAddress
                }

                this.device_list.forEach(item => {
                    item.tagColor = 'bg-' + this.ColorList[Math.floor(Math.random() * this.ColorList.length)]
                })
            },
            /**
             * 立即开门
             */
            openDoor(macAddress) {
                let params = {
                    userId: this.userId || 123,
                    macAddress: macAddress
                }
                this.isloading = true
                setTimeout(() => {
                    this.$api.device.open(params).then(res => {
                        if (res.success) {
                            this.isloading = false
                            this.isopen = true
                            that.$showModel('开门成功', false)
                        } else {
                            that.$showModel(res.msg, false)
                            this.isloading = false
                            that.isopen = false
                        }
                    }).catch(err => {
                        this.isloading = false
                        that.isopen = false
                    })
                }, 500)
            },
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: #F1F1F1;
    }

    .device {
        position: relative;
        background-color: #FFFFFF;
        padding: 35 rpx;
        margin: 20 rpx;

        .default {
            width: 60 rpx;
            height: 60 rpx;
            position: absolute;
            right: 0;
            top: 0;
        }

        .bg-blue {
            background-color: $base-color;
            color: #FFFFFF;

        }
    }

    .tag {
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80 rpx;
        width: 80 rpx;
        font-size: 32 rpx;
    }

    .btn-open {
        background-image: linear-gradient(#557ffc, #3d4fb6);
        background-color: $base-color;
        box-shadow: 0 rpx 0 rpx 20 rpx rgba(82, 159, 247, 0.8);
        color: #FFFFFF;
    }
</style>