hfln_miniprogram/src/pagesA/deviceDetail/deviceDetail.vue

<template>
    <!-- 设备详情 -->
    <view class="content">
        <view class="name_box">
            <view class="name_content">{{ devInfo.devName }}</view>
        </view>
        <view class="radar-box">
            <view
                :style="{
                    width: `${length / 200}px`,
                    height: `${width / 200}px`,
                    position: 'relative',
                    left: `${xOffset / 100}rpx`,
                    top: `${yOffset / 100}rpx`,
                    overflow: 'hidden',
                }"
                :class="[
                    width < 25500 && length < 25000 ? 'tranStyle' : 'center',
                ]"
            >
                <view
                    v-for="(item, index) in modules"
                    :key="index"
                    class="moduleContent"
                >
                    <view
                        :class="item.type"
                        :style="{
                            width: `${item.width / 2}px`,
                            height: `${item.length / 2}px`,
                            top: `${item.top / 2}px`,
                            left: `${item.left / 2}px`,
                            transform: `rotate(${item.rotate}deg)`,
                            'transform-origin': 'center center',
                        }"
                    >
                        <image
                            class="module-img"
                            :src="`../../static/furnitures/${item.type}.png`"
                            mode=""
                        />
                    </view>
                </view>
                <template v-if="devType == 'LNB'">
                    <view v-for="(item, index) in targetPoints" :key="index">
                        <image
                            class="action-icon-M"
                            :style="{
                                position: 'absolute',
                                transform: `translate3d(${
                                    item.displayX / 2 + 100
                                }px, ${
                                    -item.displayY / 2 + 100
                                }px, 0) translate(-50%, -50%)`,
                                zIndex: 9999,
                                transition: 'transform 1s linear',
                                willChange: 'transform',
                            }"
                            :src="`../../static/${lnbAction}.png`"
                            mode=""
                        />
                    </view>
                </template>
                <template v-else>
                    <image
                        v-if="actionName"
                        class="action-icon-G"
                        :style="{
                            top: `${top / 200}px`,
                            left: `${left / 200}px`,
                        }"
                        :src="`../../images/furnitures/${actionName}.png`"
                        mode=""
                    />
                </template>
            </view>
        </view>

        <view class="switchBox">
            <text class="name">呼吸灯</text>
            <switch
                :value="statusLight"
                @change="handleLightChange"
                :active-value="1"
                :inactive-value="0"
                size="24px"
                active-color="#07c160"
                inactive-color="#eeeff1"
                style="transform: scale(0.8)"
            />
        </view>
        <view class="notice-info">
            <text style="color: #95a4b3; font-size: 28rpx">{{
                todayDate
            }}</text>
            <view class="title" v-if="devInfo.installPosition == 'Toilet'">
                <view class="title-text" style="color: #22dea7"
                    >今日卫生间使用频次</view
                >
                <view class="title-btn" style="color: #22dea7"
                    >{{ endArr.length == "" ? "0" : endArr.length }}次</view
                >
            </view>
            <view class="title" v-if="devInfo.installPosition != 'Toilet'">
                <view class="title-text" style="color: #22dea7"
                    >今日进出频次</view
                >
                <view class="title-btn" style="color: #22dea7"
                    >{{ endArr.length == "" ? "0" : endArr.length }}次</view
                >
            </view>
            <view
                class="stayDetail"
                v-if="endArr.length > 0 && endArr.length == 1"
            >
                <view v-for="item in endArr" :key="item.id">
                    <view class="stayDetail-item">
                        <view class="stayDetail-text"
                            >{{ item.enterTime }}目标进入</view
                        >
                        <view class="stayDetail-btn"
                            >{{ item.leaveTime }}目标离开</view
                        >
                    </view>
                </view>
            </view>
            <view
                class="stayDetail"
                v-if="endArr.length > 0 && endArr.length > 1"
            >
                <swiper
                    class="auto-scroll-swiper"
                    :indicator-dots="false"
                    :autoplay="false"
                    :interval="3000"
                    :circular="true"
                    :display-multiple-items="1"
                    :vertical="false"
                    :current="currentIndex"
                    @change="onSwiperChange"
                >
                    <swiper-item
                        v-for="item in endArr"
                        :key="item.id"
                        class="stayDetail-item"
                    >
                        <view class="stayDetail-text"
                            >{{ item.enterTime }}目标进入</view
                        >
                        <view class="stayDetail-btn"
                            >{{ item.leaveTime }}目标离开</view
                        >
                    </swiper-item>
                </swiper>
            </view>
            <view class="title" v-if="devInfo.installPosition == 'Toilet'">
                <view class="title-text" style="color: #ff976a"
                    >昨日卫生间使用频次</view
                >
                <view class="title-btn" style="color: #ff976a"
                    >{{ endArr.length == "" ? "0" : endArr.length }}次</view
                >
            </view>
            <view class="title" v-else>
                <view class="title-text" style="color: #ff976a"
                    >昨日进出频次</view
                >
                <view class="title-btn" style="color: #ff976a"
                    >{{ endArr.length == "" ? "0" : endArr.length }}次</view
                >
            </view>
        </view>
        <view class="box">
            <view class="handle-btn">
                <view class="btn1" @click="shareDevice">分享</view>
                <view class="btn1" @click="gotoSetting">设置</view>
                <view class="btn2" @click="healthAlarm"> 健康闹钟 </view>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view class="mask" v-if="shareModel" @click="shareModel = false"></view>
        <!-- 弹窗内容 -->
        <view class="share-modal" v-if="shareModel">
            <view class="modal-header">
                <text class="cancel-btn" @click="shareModel = false">取消</text>
                <text class="modal-title">分享</text>
                <text class="confirm-btn" @click="onShareConfirm()">确认</text>
            </view>
            <view class="modal-body">
                <view class="info-row">
                    <view class="label">设备序列号：</view>
                    <view class="value">{{ devInfo.clientId }}</view>
                </view>
                <view class="info-row">
                    <view class="label">设备名称：</view>
                    <view class="value">{{ devInfo.devName }}</view>
                </view>
                <view class="input-row phoneInfo">
                    <view>被分享人</view>
                    <input
                        class="input"
                        placeholder="请输入手机号"
                        type="number"
                        v-model="sharedPhone"
                    />
                </view>
                <view class="funChoice">
                    <view class="funItem" @click="smChange()">
                        <label class="simple-radio"
                            ><radio
                                :value="messageFlag"
                                color="#7c5345"
                                :checked="messageFlag == true"
                                class="hide-original"
                            />
                            <text>短信权限</text></label
                        >
                    </view>
                    <view class="funItem">
                        <label class="simple-radio" @click="snChange()"
                            ><radio
                                :value="serviceNumberFlag"
                                color="#7c5345"
                                :checked="serviceNumberFlag == true"
                                class="hide-original"
                            />
                            <text>服务号通知</text></label
                        >
                    </view>
                    <view class="funItem">
                        <label class="simple-radio" @click="vfChange()"
                            ><radio
                                :value="voipFlag"
                                color="#7c5345"
                                :checked="voipFlag == true"
                                class="hide-original"
                            />
                            <text>语音通话</text></label
                        ></view
                    >
                </view>
            </view>
        </view>
        <view class="modal-mask" v-if="choiceVisible" @click="closeChoice">
            <view class="modal-container">
                <view class="modal-header">
                    <text class="title">请选择分享方式</text>
                </view>

                <view class="modal-buttons">
                    <!-- 手机号分析按钮 -->
                    <button class="btn phone-btn" @click="handlePhoneAnalysis">
                        <text>手机号分享</text>
                    </button>

                    <!-- 链接分享按钮 -->
                    <button class="btn link-btn" @click="handleLinkShare">
                        <text>链接分享</text>
                    </button>
                </view>
            </view>
        </view>
        <alarModel />
    </view>
</template>
<script>
import mqtt from "../../utils/mqtt";
export default {
    data() {
        return {
            width: 0, //检测区域宽度
            length: 0, //检测区域长度
            xOffset: 0,
            yOffset: 0,
            devInfo: "",
            actionName: "",
            startDate: "",
            endDate: "",
            softWare: "",
            targetPoints: [],
            statusLight: 0,
            currentDate: new Date().getTime(),
            lnbAction: "action8",
            wsj: false,
            todayWcTimes: "",
            stayDetail: "",
            todayDate: "",
            dev_id: "",
            nowTime: "",
            devName: "",
            devType: "",
            localPhone: uni.getStorageSync("phone"),
            startArr: [],
            endArr: [],
            // mqtt相关
            mqttClient: "",
            // voip相关
            // isWmpf: isWmpf,
            name: "用户",
            voipDevices: [],
            authorizeFlag: "",
            sn: "",
            isShowPopUp: false,
            contactList: [],
            // isWmpf,
            // envVersion,
            // apiTypesValid: (isWmpf ? apiTypesWMPF : apiTypesWechat).map(
            //     (id) => apiTypes[id]
            // ),
            apiTypeIndex: 0,
            currentIndex: 0,
            modules: [],
            autoPlayinterval: "",
            choiceVisible: "",
            // 手机号分享授权模块
            shareModel: false,
            alarmModel: false,
            sharedPhone: "",
            messageFlag: true,
            serviceNumberFlag: true,
            voipFlag: true,
            inactivityTimer: "",
        };
    },
    computed: {},
    methods: {
        getdevInfo(devId) {
            this.$http
                .get(`wap/device/queryDeviceInfoById/${devId}`, {})
                .then((res) => {
                    if (res.data.data) {
                        this.devInfo = res.data.data;
                        this.devType = this.devInfo.devType;

                        this.width =
                            Math.abs(
                                this.devInfo.yyEnd - this.devInfo.yyStart
                            ) * 100;
                        this.length =
                            Math.abs(
                                this.devInfo.xxEnd - this.devInfo.xxStart
                            ) * 100;
                        this.xOffset =
                            (this.devInfo.xxStart + this.devInfo.xxEnd) * 50;
                        this.yOffset =
                            -(this.devInfo.yyStart + this.devInfo.yyEnd) * 50;
                        this.statusLight = this.devInfo.statusLight;
                    }
                })
                .catch((err) => {});
        },
        getdevRoomInfo(devId) {
            this.$http
                .get(`wap/room/readRoom`, {
                    devId: devId,
                })
                .then((res) => {
                    if (res.data.data) {
                        this.modules = res.data.data.furnitures;
                    }
                });
        },
        handleLightChange(e) {
            let newValue = e.detail.value == true ? 1 : 0;
            this.$http
                .post(`wap/device/statusLight`, {
                    statusLight: newValue,
                    devId: this.devInfo.devId,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "操作成功",
                            icon: "success",
                        });
                        this.statusLight = newValue;
                    } else {
                        wx.showToast({
                            title: res.data.message,
                            icon: "none",
                        });
                    }
                });
        },

        connectMQTT(clientId, devId) {
            const THRESHOLD = 2;
            const params = {
                keepalive: 60,
                clean: true,
                connectTimeout: 30 * 1000,
                clientId:
                    "wx_mqtt_" + Math.random().toString(16).substring(2, 8),
                username: "admin",
                password: "public",
                // 微信小程序特定配置
                wsOptions: {
                    WebSocket: function (url) {
                        return wx.connectSocket({
                            url: url,
                            header: {
                                "content-type": "application/json",
                            },
                            protocols: ["mqtt"],
                        });
                    },
                },
                rejectUnauthorized: false, // 仅开发环境使用，生产环境应设为true或移除
            };
            let client = "";
            let selectedService = uni.getStorageSync("sercviceChoice");
            if (!selectedService || selectedService == "aloneServe") {
                client = mqtt.connect("wxs://radar-power.cn:8084/mqtt", params);
            }
            // 存储client引用以便后续操作
            this.mqttClient = client;

            client.on("connect", () => {
                console.log("MQTT连接成功");
                client.subscribe(`/mps/${clientId}/realtime_pos`, (err) => {
                    if (err) {
                        console.error("订阅失败", err);
                    } else {
                        console.log(`成功订阅设备主题: device/${clientId}`);
                    }
                });
            });
            client.on("disconnect", () => {
                console.log("MQTT不在连接");
            });
            client.on("error", (err) => {
                // console.error("MQTT连接错误", err);
                setTimeout(() => {
                    // console.log("尝试重新连接MQTT...");
                    this.connectMQTT(clientId, devId);
                }, 5000);
            });

            client.on("reconnect", () => {
                // console.log("MQTT正在重新连接...");
            });

            client.on("close", () => {
                // console.log("MQTT连接已关闭");
            });

            client.on("message", (topic, message) => {
                clearTimeout(this.inactivityTimer);
                this.inactivityTimer = setTimeout(() => {
                    this.targetPoints = {};
                    console.log("长时间没有点位，消除");
                }, 1500);

                const match = topic.match(/^\/mps\/(.+)\/realtime_pos$/);
                if (!match) return;

                const msgDevId = match[1];
                if (msgDevId !== clientId) return; // 只处理当前设备

                try {
                    const data = JSON.parse(message.toString());
                    // console.log(data, 9999);
                    const arr = data.targetPoints;
                    this.left = arr[0];
                    this.top = arr[1];
                    if (arr.length > 0) {
                        const currentIds = new Set();
                        arr.forEach((item) => {
                            if (item.length < 4) return;
                            const [x, y, z, id] = item;
                            currentIds.add(id);
                            if (!(id in this.targetPoints)) {
                                this.targetPoints[id] = {
                                    x,
                                    y,
                                    z,
                                    id,
                                    displayX: x,
                                    displayY: y,
                                    lastX: x,
                                    lastY: y,
                                };
                            }
                            // 去抖动
                            const dx = x - this.targetPoints[id].lastX;
                            const dy = y - this.targetPoints[id].lastY;
                            if (Math.sqrt(dx * dx + dy * dy) > THRESHOLD) {
                                this.targetPoints[id].x = x;
                                this.targetPoints[id].y = y;
                                this.targetPoints[id].z = z;
                                this.targetPoints[id].lastX = x;
                                this.targetPoints[id].lastY = y;
                                this.targetPoints[id].displayX = x;
                                this.targetPoints[id].displayY = y;
                            }
                        });
                        console.log("🚀🚀🚀🚀targets", this.targetPoints);
                    }
                } catch (e) {
                    // console.error("MQTT消息解析失败", e);
                }
            });
        },

        parseDeviceItem(devItemStr) {
            try {
                const devItem = JSON.parse(devItemStr);
                if (!devItem || !devItem.devId || !devItem.clientId) {
                    throw new Error("设备信息不完整");
                }
                return devItem;
            } catch (e) {
                throw new Error("设备信息解析失败: " + e.message);
            }
        },
        // 分享功能模块
        shareDevice() {
            this.choiceVisible = true;
        },
        onShareConfirm() {
            if (!this.sharedPhone) {
                uni.showModal({
                    content: "请填写手机号!",
                    showCancel: false,
                });
                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;
            }
            let shareParam = {
                sharerUserId: uni.getStorageSync("userId"),
                devId: this.devInfo.devId,
                sharerPhone: uni.getStorageSync("phone"),
                sharedUserId: "",
                sharedPhone: this.sharedPhone,
                messageFlag: this.messageFlag == true ? 0 : 1,
                serviceNumberFlag: this.serviceNumberFlag == true ? 0 : 1,
                voipFlag: this.voipFlag == true ? 0 : 1,
            };

            this.$http
                .post("wap/share/deviceShare", shareParam, {
                    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,
                        });
                    }
                });
            this.shareModel = false;
        },
        closeChoice() {
            this.choiceVisible = false;
        },
        handlePhoneAnalysis() {
            this.choiceVisible = false;
            this.shareModel = true;
        },
        handleLinkShare() {
            this.choiceVisible = false;
            uni.navigateTo({
                url:
                    "/pagesA/linkShare/linkShare?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },
        smChange() {
            this.messageFlag = !this.messageFlag;
        },
        snChange() {
            this.serviceNumberFlag = !this.serviceNumberFlag;
        },
        vfChange() {
            this.voipFlag = !this.voipFlag;
        },
        gotoSetting() {
            uni.navigateTo({
                url:
                    "/pagesA/deviceSetting/deviceSetting?devInfo=" +
                    JSON.stringify(this.devInfo),
            });
        },
        getFrequency(devId) {
            let now = new Date();
            let startDate = this.timestampToTime(
                new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    now.getDate() - 1
                ).getTime()
            );
            let endDate = this.timestampToTime(
                new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    now.getDate()
                ).getTime()
            );

            this.$http
                .post(`wap/device/getUsedInfo`, {
                    devId: devId,
                    startDate: startDate,
                    endDate: endDate,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (
                            res.data.data.stayTimes &&
                            res.data.data.stayTimes.length > 0
                        ) {
                            this.startArr = res.data.data.stayTimes.filter(
                                (item) => item.enterTime.startsWith(startDate)
                            );
                            this.endArr = res.data.data.stayTimes.filter(
                                (item) => item.enterTime.startsWith(endDate)
                            );
                        }
                        if (this.startArr.length > 0) {
                            this.startArr.forEach((item) => {
                                item.enterTime = item.enterTime
                                    .slice(11)
                                    .slice(0, 5);
                                item.leaveTime = item.leaveTime
                                    .slice(11)
                                    .slice(0, 5);
                            });
                        }
                        if (this.endArr.length > 0) {
                            this.endArr.forEach((item) => {
                                item.enterTime = item.enterTime
                                    .slice(11)
                                    .slice(0, 5);
                                item.leaveTime = item.leaveTime
                                    .slice(11)
                                    .slice(0, 5);
                            });
                        }
                    } else {
                        wx.showToast({
                            title: res.data.message,
                            icon: "none",
                        });
                    }
                });
        },
        // 健康闹钟方法
        healthAlarm() {
            uni.showToast({
                title: "该功能正在开发中，敬请期待",
                icon: "none",
                duration: 1500,
            });
        },
        // 循环播放进出
        timestampToTime(value, type = 0) {
            var time = new Date(value);
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var date = time.getDate();
            var hour = time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            hour = hour < 10 ? "0" + hour : hour;
            minute = minute < 10 ? "0" + minute : minute;
            second = second < 10 ? "0" + second : second;
            var arr = [
                year + "-" + month + "-" + date,
                year +
                    "-" +
                    month +
                    "-" +
                    date +
                    " " +
                    hour +
                    ":" +
                    minute +
                    ":" +
                    second,
                year + "年" + month + "月" + date + "日",
                year +
                    "年" +
                    month +
                    "月" +
                    date +
                    " " +
                    hour +
                    ":" +
                    minute +
                    ":" +
                    second,
                hour + ":" + minute + ":" + second,
                year + "-" + month + "-" + date + " " + hour + ":" + minute,
                month + "月" + date + "日" + hour + ":" + minute,
            ];
            return arr[type];
        },
        onSwiperChange(event) {
            const current = event.detail.current;
            const totalItems = this.endArr.length;
            if (current === totalItems - 1) {
                this.autoplay = false;
            }
            this.currentIndex = current;
        },

        autoSwipe() {
            if (this.endArr && this.endArr.length > 0) {
                setInterval(() => {
                    let nextIndex = this.currentIndex + 1;
                    if (nextIndex >= this.endArr.length) {
                        nextIndex = 0; // 循环到第一个项目
                    }
                    this.currentIndex = nextIndex;
                }, 3000); // 每3秒自动滚动一次
            }
        },
    },
    onLoad(options) {
        try {
            const devItem = this.parseDeviceItem(options.devItem);
            const { devId, clientId } = devItem;
            Promise.all([this.getdevInfo(devId), this.getdevRoomInfo(devId)])
                .then(() => {
                    this.connectMQTT(clientId, devId);
                    this.getFrequency(devId);
                })
                .catch((error) => {
                    // console.error("初始化失败:", error);
                    uni.showToast({
                        title: "初始化设备信息失败",
                        icon: "none",
                    });
                });
        } catch (error) {
            uni.showToast({
                title: "设备信息格式错误",
                icon: "none",
            });
        }
        this.autoPlayinterval = setTimeout(() => {
            this.autoSwipe();
        }, 3000);
    },
    onUnload() {
        if (this.mqttClient) this.mqttClient.end(true);
        clearInterval(this.autoPlayinterval);
        clearInterval(this.inactivityTimer);
    },
    onHide() {
        if (this.mqttClient) this.mqttClient.end(true);
    },
    onShow() {},
    // onShareAppMessage() {},
};
</script>
<style lang="less" scoped>
.content {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    padding-top: 20rpx;

    .name_box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 37rpx 0;

        .name_content {
            display: inline-flex;
            background: rgba(255, 255, 255, 0.65);
            border-radius: 37rpx;
            padding: 6rpx 18rpx;
        }
    }

    .radar-box {
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 710rpx;
        height: 710rpx;
        background: #ffffff;
        border-radius: 37.5rpx;
        box-sizing: border-box;

        .center {
            position: absolute;
            background-color: #fff;
            border: 14rpx solid #333333;
            background-image: url("http://jkld.radar-power.com//uploadFiles/framework/file/20250620/toilet_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            transform: scale(1.3);
            .moduleContent {
                position: relative;
                view {
                    position: absolute;
                }
                .module-img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }

        .tranStyle {
            position: absolute;
            background-color: #fff;
            border: 9rpx solid #333333;
            background-image: url("http://jkld.radar-power.com//uploadFiles/framework/file/20250620/toilet_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            transform: scale(2.5);

            .moduleContent {
                overflow: hidden;
                position: relative;
                view {
                    position: absolute;
                }
                .module-img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }

        .action-icon-G {
            position: absolute;
            width: 100rpx;
            height: 100rpx;
        }

        .action-icon-M {
            position: absolute;
            width: 50rpx;
            height: 50rpx;
        }
    }

    .switchBox {
        width: 710rpx;
        height: 94rpx;
        margin: 18rpx auto;
        padding: 0 37rpx;
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 37rpx;
        box-sizing: border-box;

        .name {
            color: #111111;
            font-size: 32rpx;
        }
    }

    .notice-info {
        width: 710rpx;
        max-height: 300rpx;
        overflow: hidden;
        padding: 30rpx 37rpx 10rpx 37rpx;
        background: #ffffff;
        border-radius: 37rpx;
        box-sizing: border-box;
        margin: 0 auto;

        .title {
            margin-top: 10rpx;
            margin-bottom: 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 34rpx;
            color: #1757dd;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title-text {
                font-size: 28rpx;
                font-weight: 500;
                color: #1757dd;
            }

            .title-btn {
                font-size: 28rpx;
                font-weight: 500;
                color: #5a5a5a;
            }
        }

        .stayDetail {
            height: 80rpx;
            overflow: hidden;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
            padding-left: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 34rpx;

            .stayDetail-item {
                display: flex;
                padding-bottom: 5rpx !important;
                padding-top: 10rpx !important;
                box-sizing: border-box;
                line-height: 60rpx;

                .stayDetail-text {
                    width: 40%;
                    font-size: 28rpx;
                    height: 30rpx !important;
                }

                .stayDetail-btn {
                    padding-left: 30rpx;
                    font-size: 28rpx;
                    height: 30rpx !important;
                }
            }
        }
    }

    .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: 155rpx;
                height: 94rpx;
                background: #ffebe4;
                border-radius: 28rpx;
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
                text-align: center;
            }

            .btn2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 328rpx;
                height: 94rpx;
                background: linear-gradient(
                    105.95deg,
                    #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-family: MiSans;
                font-weight: 500;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }

    /* 弹窗部分样式 */
    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 100;
    }

    .share-modal {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-radius: 24rpx 24rpx 0 0;
        z-index: 101;
        height: 750rpx;

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 32rpx 0 32rpx;
            font-size: 30rpx;

            .cancel-btn {
                color: #888;
                font-size: 32rpx;
            }

            .modal-title {
                color: #111111;
                font-size: 36rpx;
            }

            .confirm-btn {
                color: #996e5f;
                font-size: 32rpx;
            }
        }

        .modal-body {
            padding: 50rpx;

            .info-row {
                display: flex;
                margin-bottom: 24rpx;
                font-size: 28rpx;
                padding: 0 20rpx;

                .label {
                    color: #111111;
                    width: 200rpx;
                    font-size: 32rpx;
                    text-align-last: justify;
                }

                .value {
                    text-align: right;
                    width: 65%;
                    color: #111111;
                    font-size: 32rpx;
                }
            }

            .input-row {
                display: flex;
                align-items: center;
                margin-top: 32rpx;
                border-radius: 40rpx;
                background: #f7f7f7;
                padding: 0 24rpx;
                height: 80rpx;

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

            .funChoice {
                .funItem {
                    .simple-radio {
                        display: flex;
                        align-items: center;
                        padding: 20rpx 0;
                    }
                }
            }
        }
    }

    // 分享弹窗样式

    .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: 999;
        .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;
                .title {
                    font-size: 36rpx;
                    display: block;
                    margin-bottom: 10rpx;
                }
            }
            .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>