hfln_miniprogram/src/pagesA/deviceSetting/deviceSetting.vue

<template>
    <view class="setting-warp">
        <view class="clientInfo">
            <view class="wifItem">
                <text>设备序列号</text>
                <text>{{ devInfo.clientId }}</text>
            </view>
            <view class="wifItem">
                <text>设备ID</text>
                <text>{{ devInfo.devId }}</text>
            </view>
            <!-- <view class="wifItem">
                <text>设备分组</text>
                <text>{{}}</text>
            </view> -->
            <view class="wifItem">
                <text>安装位置</text>
                <text>{{ position }}</text>
            </view>
        </view>
        <view class="clientInfo" style="margin-top: 40rpx">
            <view class="wifItem" @click="goShareCount">
                <text>分享账户</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 40rpx; height: 40rpx"
                ></image>
            </view>
            <!-- <view class="wifItem">
                <text>紧急联系人</text>
                <text>{{}}</text>
            </view> -->
            <!-- <view class="wifItem">
                <text>撤销分享</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 40rpx; height: 40rpx"
                ></image>
            </view> -->
            <view class="wifItem" @click="goFailDetail">
                <text>跌倒事件</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 30rpx; height: 30rpx"
                ></image>
            </view>

            <view class="wifItem" @click="unbindDevice">
                <text>解绑设备</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 30rpx; height: 30rpx"
                ></image>
            </view>
        </view>
        <view class="box">
            <view class="handle-btn">
                <view class="btn1" @click="goMoreSetting">更多设置</view>
            </view>
        </view>
        <alarModel v-if="isInitAlarm" />
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: "",
            devName: "",
            position: "",
            isInitAlarm: "",
        };
    },
    methods: {
        getPosition(val) {
            if (val == "Toilet") {
                this.position = "卫生间";
            } else if (val == "LivingRoom") {
                this.position = "客厅";
            } else if (val == "Restaurant") {
                this.position = "餐厅";
            } else if (val == "Bedroom") {
                this.position = " 卧室";
            }
            console.log(this.position, 9999);
            return this.installPosition;
        },
        unbindDevice() {
            uni.showModal({
                title: "提示",
                content: "确定要解绑该设备吗？",
                success: (res) => {
                    if (res.confirm) {
                        this.$http
                            .get("wap/device/deviceUnBind", {
                                userId: uni.getStorageSync("userId"),
                                devId: this.devInfo.devId,
                            })
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: "解绑成功",
                                        icon: "success",
                                        duration: 1500,
                                    });
                                    setTimeout(() => {
                                        uni.reLaunch({
                                            url: "/pagesA/devices/devices",
                                        });
                                    }, 2000);
                                } else {
                                    uni.showToast({
                                        title: "解绑失败",
                                        icon: "none",
                                        duration: 1500,
                                    });
                                }
                            });
                    }
                },
            });
        },
        goMoreSetting() {
            uni.navigateTo({
                url:
                    "/pagesA/adDevice/adDevice?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },
        goFailDetail() {
            uni.navigateTo({
                url:
                    "/pagesA/failDetail/failDetail?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },

        goShareCount() {
            uni.navigateTo({
                url:
                    "/pagesA/shareCountList/shareCountList?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
        this.isInitAlarm = true;
    },
    onShow() {
        this.isInitAlarm = true;
        this.getPosition(this.devInfo.installPosition);
    },
    onUnload() {
        this.isInitAlarm = false;
    },
    onHide() {
        this.isInitAlarm = false;
    },
};
</script>
<style lang="less">
.setting-warp {
    position: relative;
    padding-top: 40rpx;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    .clientInfo {
        width: 700rpx;
        // height: 140px;
        margin: 0 auto 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 0 30rpx 20rpx 30rpx;
        .wifItem {
            width: 640rpx;
            display: flex;
            align-content: center;
            justify-content: space-between;
            border-bottom: 2rpx solid #ebeff5;
            padding-top: 30rpx;
            padding-bottom: 20rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            input {
                margin-left: auto;
                text-align: right;
            }
        }
    }
    .box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 168rpx;
        padding: 0 37rpx;
        background: #ffffff;
        box-sizing: border-box;

        .handle-btn {
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 700rpx;
                height: 94rpx;
                background: #7d5346;
                border-radius: 28rpx;
                font-weight: 500;
                color: #ffffff;
                font-size: 32rpx;
                text-align: center;
            }
        }
    }
}
</style>