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 class="wifItem">
                <text>硬件版本</text>
                <text>{{ devInfo.hardware }}</text>
            </view>

            <view class="menu-item">
                <view class="meanLeft">设备升级</view>
                <view class="meanRight" v-if="otaList.length > 0">
                    <picker
                        @change="bindPickerChangeTwo"
                        :value="otaIndex"
                        :range="otaListName"
                    >
                        <view class="uni-input">{{ otaListName[0] }}</view>
                    </picker>
                    <image
                        src="../../static/rightArrow.png"
                        alt=""
                        @click="showPicker"
                    ></image>
                </view>
                <view class="meanRight" v-else> 已是最新版本，无需升级 </view>
            </view>
        </view>
        <view class="clientInfo" style="margin-top: 40rpx">
            <view class="wifItem" @click="goShareCount">
                <text>分享记录</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 30rpx; height: 30rpx"
                ></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="showRemoveDevice">
                <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" v-if="settingFlag">
                <view class="btn1" @click="goMoreSetting">更多设置</view>
            </view>
            <view class="handle-noflage" v-else>
                <view class="btn1" @click="goNoSetting">更多设置</view>
            </view>
        </view>
        <tenMinutes v-if="isIniTenMinutes" />
        <view class="modal-mask" v-if="removeDeviceModle">
            <view class="modal-container">
                <view class="modal-header">
                    <text class="title">设备转移</text>
                    <image
                        src="../../static/closePng.png"
                        @click="removeDeviceModle = false"
                        class="close-btn"
                    >
                    </image>
                </view>

                <view class="modal-content">
                    <input
                        class="input"
                        placeholder="请输入要转移的手机号"
                        type="number"
                        v-model="sharedPhone"
                    />
                </view>

                <view class="modal-buttons">
                    <button
                        class="btn phone-btn"
                        @click="handlePhoneAnalysis()"
                    >
                        <text>确认转移</text>
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: "",
            devName: "",
            position: "",
            isIniTenMinutes: "",
            sharedPhone: "",
            removeDeviceModle: false,
            // ota部分
            otaList: [],
            otaListName: [],
            otaIndex: 0,
            settingFlag: false,
        };
    },
    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 = " 卧室";
            }
            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),
            });
        },
        goNoSetting() {
            uni.showToast({
                title: "您没有设置权限",
                icon: "none",
            });
        },
        goFailDetail() {
            uni.navigateTo({
                url:
                    "/pagesA/failDetail/failDetail?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },

        goShareCount() {
            uni.navigateTo({
                url:
                    "/pagesA/shareCountList/shareCountList?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },
        showRemoveDevice() {
            this.removeDeviceModle = true;
        },
        handlePhoneAnalysis() {
            if (!this.sharedPhone) {
                uni.showToast({
                    title: "请输入手机号",
                    icon: "none",
                    duration: 1500,
                });
                return;
            }

            let reg_tel =
                /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
            if (!reg_tel.test(this.sharedPhone)) {
                uni.showModal({
                    content: "请填写正确手机号!",
                    showCancel: false,
                });
                return;
            }
            this.$http
                .post(
                    "wap/device/transfer",
                    {
                        userId: uni.getStorageSync("userId"),
                        devId: this.devInfo.devId,
                        phone: this.sharedPhone,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "转移成功",
                            icon: "success",
                            duration: 1500,
                        });
                        this.removeDeviceModle = false;
                        this.sharedPhone = "";
                    } else {
                        uni.showToast({
                            title: "转移失败",
                            icon: "none",
                            duration: 1500,
                        });
                        this.removeDeviceModle = false;
                        this.sharedPhone = "";
                    }
                });
        },
        queryOtaList() {
            this.$http.get("wap/device/OTA/query", {}).then((res) => {
                this.otaList = this.filterFilesByVersion(
                    res.data.data,
                    "2.2.4"
                );
                this.otaListName = this.otaList.map((ele) => ele.fileName);
            });
        },
        bindPickerChangeTwo(e) {
            this.otaIndex = e.detail.value;
            this.freshOTA();
        },

        freshOTA() {
            let clientIds = [];
            clientIds.push(this.devInfo.clientId);
            let ossUrl = this.otaList[this.otaIndex].ossUrl;
            this.$http
                .post(
                    "wap/device/OTA/update",
                    { clientIds: clientIds, ossUrl: ossUrl },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "设备升级成功",
                            icon: "success",
                            duration: 1500,
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },

        parseVersion(fileName) {
            const match = fileName.match(/V(\d+\.\d+\.\d+)/);
            return match ? match[1].split(".").map(Number) : [0, 0, 0];
        },
        compareVersion(v1, v2) {
            for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
                const num1 = v1[i] || 0;
                const num2 = v2[i] || 0;
                if (num1 > num2) return 1;
                if (num1 < num2) return -1;
            }
            return 0;
        },
        filterFilesByVersion(files, minVersionStr) {
            const minVersion = minVersionStr.split(".").map(Number);
            return files.filter((file) => {
                const version = this.parseVersion(file.fileName);
                return this.compareVersion(version, minVersion) > 0;
            });
        },
    },
    onLoad(options) {
        this.isIniTenMinutes = true;
        this.devInfo = JSON.parse(options.devInfo);
    },
    onShow() {
        this.isIniTenMinutes = true;
        this.getPosition(this.devInfo.installPosition);
        this.queryOtaList();
        let userId = uni.getStorageSync("userId");
        this.settingFlag = this.devInfo.userId == userId ? true : false;
    },
    onUnload() {
        this.isIniTenMinutes = false;
    },
    onHide() {
        this.isIniTenMinutes = 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;
            }
        }

        .menu-item {
            width: 640rpx;
            display: flex;
            align-content: center;
            justify-content: space-between;
            border-bottom: 2rpx solid #ebeff5;
            padding-top: 30rpx;
            padding-bottom: 20rpx;

            &:last-child {
                border-bottom: none;
            }

            .meanLeft {
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 38rpx;
                    height: 38rpx;
                }

                text {
                    margin-left: 10rpx;
                    color: #111111;
                    font-size: 32rpx;
                }
            }
            .meanRight {
                display: flex;
                align-items: center;
            }

            .meanRight image {
                margin-left: 4rpx;
                width: 16rpx;
                height: 26rpx;
            }
        }
    }
    .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;
            }
        }
        .handle-noflage {
            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;
                border-radius: 28rpx;
                font-weight: 500;
                background: #f0f0f0;
                color: #999999;
                font-size: 32rpx;
                text-align: center;
            }
        }
    }
    .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 333;

        .modal-container {
            width: 80%;
            background: #fff;
            border-radius: 16rpx;
            // overflow: hidden;
            animation: fadeIn 0.3s;

            .modal-header {
                padding: 30rpx;
                text-align: center;
                border-bottom: 1rpx solid #f5f5f5;
                position: relative;
                .title {
                    font-size: 36rpx;
                    display: block;
                    margin-bottom: 10rpx;
                }

                .close-btn {
                    position: absolute;
                    width: 40rpx;
                    height: 40rpx;
                    top: 20rpx;
                    right: 20rpx;
                }
            }

            .modal-content {
                padding: 20rpx 20rpx;

                .input {
                    text-align: right;
                    flex: 1;
                    border: none;
                    background: transparent;
                    font-size: 28rpx;
                    color: #333;
                }
            }

            .modal-buttons {
                display: flex;
                flex-direction: column;
                padding: 20rpx;

                .btn {
                    flex: 1;
                    height: 90rpx;
                    margin: 15rpx 0;
                    border-radius: 45rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 32rpx;
                    border: none;
                    background: none;
                    position: relative;
                }

                .btn-icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 15rpx;
                }

                .phone-btn {
                    background: linear-gradient(
                        105.95deg,
                        #ba978a 0%,
                        #a27867 100%
                    );
                    color: white;
                }

                .link-btn {
                    background: linear-gradient(
                        105.95deg,
                        #a27867 0%,
                        #74483d 100%
                    );
                    color: white;
                }
            }
        }
    }
}
</style>