hfln_miniprogram/src/pagesA/adDevice/adDevice.vue

<template>
    <view>
        <view class="home-warp" v-if="nextTip == 'one'">
            <view class="header">
                <view class="item">
                    <image src="../../static/activePod.png" alt=""> </image>
                    <text>1</text>
                </view>
                <view class="line"></view>
                <view class="item"
                    ><image src="../../static/inactivePod.png" alt=""></image>
                    <text>2</text>
                </view>
                <view class="line"></view>
                <view class="item"
                    ><image src="../../static/inactivePod.png" alt=""></image>
                    <text>3</text>
                </view>
            </view>
            <view class="bodyContent">
                <view
                    class="deviceInfo"
                    v-if="clientId"
                    @click="scanCode"
                    :class="{ 'fade-in': showDeviceInfo }"
                >
                    <image src="../../static/ln_small.png" alt=""></image>
                    <text>{{ clientId }}</text>
                </view>
                <view class="wifiScan" @click="scanCode" v-if="!clientId">
                    <image src="../../static/wifiScan.png" alt=""></image>
                </view>
                <view class="wifiText" v-if="!clientId"
                    >点击扫一扫识别设备</view
                >
                <view class="wifItem" style="margin-top: 90rpx">
                    <image src="../../static/wifiIcon.png" alt=""></image>
                    <text>无线网账户</text>
                    <input
                        v-model="wifiName"
                        placeholder="请选择wifi"
                        readonly
                        disabled
                        style="width: 50%"
                    />
                    <view class="refresh" @click="refreshWifi">刷新</view>
                </view>
                <view class="wifItem" style="margin-top: 38rpx">
                    <image src="../../static/wifiPs.png" alt=""></image
                    ><text>无线网密码</text>
                    <input
                        v-model="wifiPassword"
                        placeholder="请输入wifi密码"
                        style="width: 60%"
                    />
                </view>
                <view class="btn" @click="startDisNet">开始配网</view>
            </view>
            <view class="clientInfo">
                <view class="wifItem">
                    <text>设备名称</text>
                    <input v-model="devName" placeholder="请输入设备名称" />
                </view>
                <view class="wifItem" style="margin-top: 30rpx">
                    <text>安装位置</text>
                    <picker
                        @change="bindPickerChange"
                        :value="installPositionIndex"
                        :range="selectArray"
                        style="margin-left: auto"
                    >
                        <view class="uni-input">{{
                            selectArray[installPositionIndex]
                        }}</view>
                    </picker>

                    <image
                        src="../../static/rightArrow.png"
                        alt=""
                        @click="showPicker"
                    ></image>
                </view>
            </view>
            <view class="bottom">
                <view class="nextTip" @click="goNextTip">下一步</view>
            </view>
        </view>
        <view class="home-warpTwo" v-if="nextTip == 'two'">
            <view class="header_two">
                <view class="header">
                    <view class="item">
                        <image src="../../static/activePod.png" alt=""> </image>
                        <text>1</text>
                    </view>
                    <view class="line"></view>
                    <view class="item"
                        ><image src="../../static/activePod.png" alt=""></image>
                        <text>2</text>
                    </view>
                    <view class="line"></view>
                    <view class="item"
                        ><image
                            src="../../static/inactivePod.png"
                            alt=""
                        ></image>
                        <text>3</text>
                    </view>
                </view>
                <view class="airCantInfo" v-if="environmentJudge">
                    <text>暂未配置环境数据...</text>
                </view>
                <view class="airbody">
                    <view class="airTitle">环境配置</view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>X轴范围(cm)</text>
                        <view class="inputBox">
                            <input
                                style="width: 30%"
                                v-model="xxStart"
                                placeholder="X开始"
                            /><text>—</text>
                            <input
                                type="number"
                                style="width: 30%"
                                v-model="xxEnd"
                                placeholder="X结束"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>Y轴范围(cm)</text>
                        <view class="inputBox">
                            <input
                                style="width: 30%"
                                v-model="yyStart"
                                placeholder="Y开始"
                            /><text>—</text>
                            <input
                                type="number"
                                style="width: 30%"
                                v-model="yyEnd"
                                placeholder="Y结束"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>Z轴范围(cm)</text>
                        <view class="inputBox">
                            <input
                                style="width: 30%"
                                v-model="zzStart"
                                placeholder="Z开始"
                            /><text>—</text>
                            <input
                                type="number"
                                style="width: 30%"
                                v-model="zzEnd"
                                placeholder="Z结束"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>安装高度(cm)</text>
                        <view class="inputBox">
                            <input
                                type="number"
                                v-model="height"
                                placeholder="请输入安装高度"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>正北向夹角(°)</text>
                        <view class="inputBox">
                            <picker
                                @change="bindPickerChangeTwo"
                                :value="northAngle"
                                :range="angleArray"
                                style="margin-left: auto"
                            >
                                <view class="uni-input">{{
                                    angleArray[northAngleIndex]
                                }}</view>
                            </picker>
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>安装方式</text>
                        <view class="inputBox">
                            <picker
                                @change="bindPickerChangeThree"
                                :value="mountPlainIndex"
                                :range="mountPlainArray"
                                style="margin-left: auto"
                            >
                                <view class="uni-input">{{
                                    mountPlainArray[mountPlainIndex]
                                }}</view>
                            </picker>
                        </view>
                    </view>
                    <!-- <view class="wifItem" style="margin-top: 30rpx">
                        <text>指示灯开关</text>
                        <view class="inputBox">
                            <switch
                                :value="statusLight"
                                @change="onChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8); margin-left: auto"
                            />
                        </view>
                    </view> -->
                </view>
                <view class="bottomTwo">
                    <view class="previousTip" @click="goPrevious">上一步</view>
                    <view class="nextTip" @click="bindDevice">下一步</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
const airkiss = requirePlugin("airkiss");
export default {
    name: "my",
    data() {
        return {
            editFlag: false,
            selectArray: ["卫生间", "客厅", "餐厅", "卧室"],
            angleArray: ["0", "90", "180", "270"],
            mountPlainArray: ["墙装", "顶装"],
            installPositionIndex: 0,
            northAngleIndex: 0,
            mountPlainIndex: 0,
            pickModel: false,
            environmentJudge: true,
            nextTip: "one",
            // 设备信息参数
            clientId: "",
            userId: uni.getStorageSync("userId"),
            devName: "",
            width: "",
            length: "",
            height: "",
            wifiName: "",
            wifiPassword: "",
            northAngle: "0",
            mountPlain: "Wall",
            installPosition: "Toilet",
            xxStart: "",
            xxEnd: "",
            yyStart: "",
            yyEnd: "",
            zzStart: "",
            zzEnd: "",
            // statusLight: 1,
            showDeviceInfo: false,
            devInfo: "",
        };
    },
    watch: {
        clientId(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.showDeviceInfo = true;
                });
            } else {
                this.showDeviceInfo = false;
            }
        },
    },
    computed: {},
    methods: {
        scanCode() {
            wx.scanCode({
                success: (res) => {
                    this.clientId = res.result;
                },
            });
        },
        showPicker() {
            this.pickModel = true;
        },
        bindPickerChange(e) {
            this.installPositionIndex = e.detail.value;
            if (this.installPositionIndex == "0") {
                this.installPosition = "Toilet";
            } else if (this.installPositionIndex == "1") {
                this.installPosition = "LivingRoom";
            } else if (this.installPositionIndex == "2") {
                this.installPosition = "Restaurant";
            } else if (this.installPositionIndex == "3") {
                this.installPosition = "Bedroom";
            }
        },
        bindPickerChangeTwo(e) {
            this.northAngleIndex = e.detail.value;
            this.northAngle = this.angleArray[e.detail.value];
        },
        bindPickerChangeThree(e) {
            this.mountPlainIndex = e.detail.value;
            this.mountPlain = this.mountPlainArray[e.detail.value];
            if (this.mountPlainArray[e.detail.value] == "墙装") {
                this.mountPlain = "Wall";
            } else {
                this.mountPlain = "Ceiling";
            }
        },
        // onChange({ detail }) {
        //     this.statusLight = detail;
        //     if(detail){

        //     }
        //     console.log(this.statusLight, 9999);
        // },
        goNextTip() {
            if (!this.devName.length > 10) {
                uni.showModal({
                    content: "设备名称过长！",
                    showCancel: 1500,
                });
                return;
            }
            if (!this.clientId) {
                uni.showModal({
                    content: "请先开始扫码！",
                    showCancel: 1500,
                });
                return;
            }
            if (!this.wifiPassword) {
                uni.showModal({
                    content: "请先开始配网！",
                    showCancel: 1500,
                });
                return;
            }
            if (!this.devName) {
                uni.showModal({
                    content: "请输入设备名称！",
                    showCancel: 1500,
                });
                return;
            }
            this.nextTip = "two";
        },
        goPrevious() {
            this.nextTip = "one";
        },
        bindDevice() {
            if (this.xxStart > this.xxEnd || this.yyStart > this.yyEnd) {
                uni.showModal({
                    content: "X,Y检测范围有误",
                    showCancel: false,
                });
                return;
            }
            // if (
            //     -200 > this.xxStart ||
            //     this.xxEnd > 200 ||
            //     -200 > this.yyStart ||
            //     this.yyEnd > 200
            // ) {
            //     uni.showModal({
            //         content: "检测范围在-200~200之间",
            //         showCancel: false,
            //     });
            //     return;
            // }
            // if (
            //     5 < this.zzStart ||
            //     this.zzStart < 0 ||
            //     300 < this.zzEnd ||
            //     this.zzEnd < 200
            // ) {
            //     uni.showModal({
            //         content: "Z轴检测范围不正确",
            //         showCancel: false,
            //     });
            //     return;
            // }

            // if (200 > this.height || this.height > 370) {
            //     uni.showModal({
            //         content: "安装高度在200~270之间",
            //         showCancel: false,
            //     });
            //     return;
            // }

            let deviceBandingParams = {
                clientId: this.clientId,
                userId: uni.getStorageSync("userId"),
                devName: this.devName,
                height: parseInt(this.height),
                wifiName: this.wifiName,
                wifiPassword: this.wifiPassword,
                northAngle: this.northAngle,
                mountPlain:
                    this.mountPlain == "" ? "mountPlain" : this.mountPlain,
                installPosition: this.installPosition,
                xxStart: parseInt(this.xxStart),
                xxEnd: parseInt(this.xxEnd),
                yyStart: parseInt(this.yyStart),
                yyEnd: parseInt(this.yyEnd),
                zzStart: parseInt(this.zzStart),
                zzEnd: parseInt(this.zzEnd),
                // statusLight: this.statusLight,
            };

            if (this.editFlag) {
                this.$http
                    .post("wap/device/updateDevice", deviceBandingParams, {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: "绑定成功",
                                icon: "success",
                                duration: 1500,
                            });
                            uni.setStorageSync("devId", res.data.data.devId);
                            uni.reLaunch({
                                url:
                                    "/pagesA/roomSetting/roomSetting?devId=" +
                                    res.data.data.devId,
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none",
                                duration: 1500,
                            });
                        }
                    });
            } else {
                this.$http
                    .post("wap/device/deviceBinding", deviceBandingParams, {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: "绑定成功",
                                icon: "success",
                                duration: 1500,
                            });
                            uni.setStorageSync("devId", res.data.data.devId);
                            uni.reLaunch({
                                url:
                                    "/pagesA/roomSetting/roomSetting?devId=" +
                                    res.data.data.devId,
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none",
                                duration: 1500,
                            });
                        }
                    });
            }
        },
        refreshWifi() {
            const that = this;
            uni.startWifi({
                success(res) {
                    uni.getConnectedWifi({
                        success: (res) => {
                            that.wifiName = res.wifi.SSID;
                        },
                        fail: (res) => {
                            that.wifiName = "";
                            uni.showModal({
                                content: "请先连接家庭无线网络",
                                showCancel: false,
                            });
                        },
                    });
                },
                fail(err) {
                    console.error("启动WIFI模块失败:", err);
                },
            });
        },
        startDisNet() {
            if (!this.clientId) {
                uni.showModal({
                    content: "请先扫描设备二维码",
                    showCancel: false,
                });
                return;
            }
            if (!this.wifiName) {
                uni.showModal({
                    content: "请连接无线网络，连接后点击刷新",
                    showCancel: false,
                });
                return;
            }
            if (this.wifiPassword.length < 8) {
                uni.showModal({
                    content: "请输入不少于8位的密码",
                    showCancel: false,
                });
                return;
            }
            uni.showLoading({
                title: "配网中",
                mask: true,
            });
            airkiss.startAirkiss(this.wifiName, this.wifiPassword, (res) => {
                uni.hideLoading();
                switch (res.code) {
                    case 0:
                        uni.showModal({
                            title: "初始化失败",
                            content: res.result || "未知错误",
                            showCancel: false,
                        });
                        break;

                    case 1:
                        uni.showModal({
                            title: "配网成功",
                            content: `设备IP：${res.ip}\n设备Mac：${res.bssid}`,
                            showCancel: false,
                            success: () => {},
                        });
                        break;

                    case 2:
                        uni.showModal({
                            title: "配网失败",
                            content: "请检查密码是否正确",
                            showCancel: false,
                        });
                        break;

                    default:
                        console.warn("未知响应码:", res.code);
                }
            });
        },
        setDevInfo(devInfo) {
            this.clientId = devInfo.clientId;
            this.devName = devInfo.devName;
            this.height = devInfo.height;
            this.wifiName = devInfo.wifiName;
            this.wifiPassword = devInfo.wifiPassword;
            this.northAngle = devInfo.northAngle;
            if (this.northAngle == 0) {
                this.northAngleIndex = 0;
            } else if (this.northAngle == 90) {
                this.northAngleIndex = 1;
            } else if (this.northAngle == 180) {
                this.northAngleIndex = 2;
            } else if (this.northAngle == 270) {
                this.northAngleIndex = 3;
            }
            this.mountPlain = devInfo.mountPlain;
            if (this.northAngle == "Wall") {
                this.mountPlainIndex = 0;
            } else if (this.northAngle == 90) {
                this.mountPlainIndex = 1;
            }
            this.installPosition = devInfo.installPosition;

            if (this.installPosition == "Toilet") {
                this.installPositionIndex = 0;
            } else if (this.installPosition == "LivingRoom") {
                this.installPositionIndex = 1;
            } else if (this.installPosition == "Restaurant") {
                this.installPositionIndex = 2;
            } else if (this.installPosition == "Bedroom") {
                this.installPositionIndex = 3;
            }
            this.xxStart = devInfo.xxStart;
            this.xxEnd = devInfo.xxEnd;
            this.yyStart = devInfo.yyStart;
            this.yyEnd = devInfo.yyEnd;
            this.zzStart = devInfo.zzStart;
            this.zzEnd = devInfo.zzEnd;
            // this.statusLight = devInfo.statusLight;
        },
    },
    onLoad(options) {
        this.refreshWifi();
        if (JSON.stringify(options) != "{}") {
            this.devInfo = JSON.parse(options.devInfo);
            this.setDevInfo(this.devInfo);
            this.editFlag = true;
        } else {
            console.log("没有参数");
        }
        // this.$refs.alarModel.connectMQTTwo();
    },

    onUnload(options) {
        airkiss.stopAirkiss();
    },
    onShow() {},
};
</script>
<style lang="less" scoped>
.home-warp {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0rpx 120rpx;
        padding-top: 30rpx;
        .item {
            position: relative;
            text-align: center;
            width: 90rpx;
            height: 90rpx;
            image {
                width: 85rpx;
                height: 90rpx;
            }
            text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-weight: 700;
                color: #ffffff;
                font-size: 38rpx;
                text-align: center;
            }
        }
        .line {
            width: 56rpx;
            height: 4rpx;
            background-color: #e4c5b9;
        }
    }

    .bodyContent {
        width: 700rpx;
        height: 740rpx;
        margin: 20rpx auto 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        .deviceInfo {
            display: flex;
            flex-direction: column;
            padding: 0 auto;
            padding-top: 40rpx;
            width: 200rpx;
            margin: 0 auto;
            transition: all 0.8s ease;
            opacity: 0;
            transform: translateY(20rpx);
            image {
                width: 200rpx;
                height: 200rpx;
            }
            text {
                margin-top: 20rpx;
                text-align: center;
                font-weight: 500;
            }
        }

        .deviceInfo.fade-in {
            opacity: 1;
            transform: translateY(0);
        }

        .wifiScan {
            margin: 0 auto;
            padding-top: 75rpx;
            width: 188rpx;
            height: 188rpx;
            image {
                width: 188rpx;
                height: 188rpx;
            }
        }
        .wifiText {
            margin-top: 20rpx;
            color: #95a4b3;
            font-size: 24rpx;
            text-align: center;
        }
        .wifItem {
            width: 640rpx;
            height: 40rpx;
            display: flex;
            align-content: center;
            border-bottom: 2rpx solid #ebeff5;
            padding-bottom: 38rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            text {
                margin-left: 20rpx;
                color: #111111;
                font-size: 32rpx;
            }
            input {
                margin-left: auto;
                text-align: right;
            }

            .refresh {
                width: 80rpx;
                height: 50rpx;
                margin-left: 10rpx;
                border-radius: 10rpx;
                background-color: #f3e2dd;
                color: #151515;
                text-align: center;
            }
        }

        .btn {
            margin: 0 auto;
            margin-top: 38rpx;
            width: 240rpx;
            height: 75rpx;
            background: #f3e2dd;
            border-radius: 60rpx;
            text-align: center;
            line-height: 75rpx;
            color: #111111;
            font-size: 32rpx;
        }
    }

    .clientInfo {
        width: 700rpx;
        height: 140px;
        margin: 20rpx auto 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 30rpx 30rpx;
        .wifItem {
            width: 640rpx;
            height: 40rpx;
            display: flex;
            border-bottom: 2rpx solid #ebeff5;
            padding-bottom: 38rpx;
            text {
                margin-left: 20rpx;
                color: #111111;
                font-size: 32rpx;
            }
            input {
                margin-left: auto;
                // width: 70%;
                text-align: right;
            }
            image {
                width: 30rpx;
                height: 30rpx;
                margin-top: 10rpx;
            }
        }
    }
    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 170rpx;
        background: #ffffff;
        box-shadow: 0rpx 1.17rpx 0rpx #eaeaea inset;

        .nextTip {
            width: 675rpx;
            height: 95rpx;
            background: linear-gradient(97.91deg, #a27867 0%, #74483d 100%);
            border-radius: 28rpx;
            box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
                0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
                0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;

            font-weight: 500;
            color: #ffffff;
            font-size: 32rpx;
            text-align: center;
            margin: 30rpx auto;
            line-height: 95rpx;
        }
    }
}
.home-warpTwo {
    position: relative;
    height: 100vh;
    background: #f4f4f4;
    .header_two {
        width: 750rpx;
        height: 700rpx;
        border-bottom-left-radius: 35rpx;
        border-bottom-right-radius: 35rpx;
        background: linear-gradient(180deg, #faede2 0%, #ffffff 100%);
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0rpx 120rpx;
            padding-top: 30rpx;
            .item {
                position: relative;
                text-align: center;
                width: 90rpx;
                height: 90rpx;
                image {
                    width: 85rpx;
                    height: 90rpx;
                }
                text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-weight: 700;
                    color: #ffffff;
                    font-size: 38rpx;
                    text-align: center;
                }
            }
            .line {
                width: 56rpx;
                height: 4rpx;
                background-color: #e4c5b9;
            }
        }
        .airCantInfo {
            margin: 40rpx auto 0 auto;
            opacity: 20%;
            width: 400rpx;
            height: 400rpx;
            border: 18rpx solid;
            border-color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            text {
                color: #999999;
                font-size: 38rpx;
                text-align: center;
            }
        }
        .airbody {
            margin: 140rpx auto 0 auto;
            width: 700rpx;
            height: 540rpx;
            background: #ffffff;
            border-radius: 38rpx;
            padding: 38rpx 38rpx;
            box-sizing: border-box;
            overflow-y: scroll;
            .airTitle {
                font-weight: 500;
                color: #784c41;
                font-size: 32rpx;
            }
            .wifItem {
                width: 640rpx;
                height: 40rpx;
                display: flex;
                align-items: space-between;
                border-bottom: 2rpx solid #ebeff5;
                padding-bottom: 38rpx;
                text {
                    margin-left: 20rpx;
                    color: #111111;
                    font-size: 32rpx;
                }
                input {
                    margin-left: auto;
                    // width: 70%;
                    text-align: right;
                }
                .inputBox {
                    margin-left: auto;
                    width: 50%;
                    display: flex;
                    align-items: space-between;
                }
            }
        }
        .bottomTwo {
            display: flex;
            align-items: space-around;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 750rpx;
            height: 170rpx;
            background: #ffffff;
            box-shadow: 0rpx 1.17rpx 0rpx #eaeaea inset;

            .previousTip {
                width: 350rpx;
                height: 95rpx;
                background: #f3e2dd;
                border-radius: 28rpx;
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
                text-align: center;
                margin: 30rpx auto;
                line-height: 95rpx;
            }

            .nextTip {
                width: 350rpx;
                height: 95rpx;
                background: linear-gradient(97.91deg, #a27867 0%, #74483d 100%);
                border-radius: 28rpx;
                box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
                    0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
                    0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;

                font-weight: 500;
                color: #ffffff;
                font-size: 32rpx;
                text-align: center;
                margin: 30rpx auto;
                line-height: 95rpx;
            }
        }
    }
}
</style>