hfln_miniprogram/src/pagesA/sharePages/sharePages.vue

<template>
    <view class="box">
        <view class="meauList">
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享人号码</text>
                </view>
                <view class="meanRight">
                    <text>{{ sharePhone }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备名称</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.devName }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备序列号</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.clientId }}</text></view
                >
            </view>
            <!-- <view class="menu-item">
                <view class="meanLeft">
                    <text>分享时间</text>
                </view>
                <view class="meanRight">
                    <text>{{ item.shareTime }}</text></view
                >
            </view> -->
            <!-- <view class="menu-item">
                <view class="meanLeft">
                    <text>分享状态</text>
                </view>
                <view class="meanRight">
                    <text v-if="item.state == 0" style="color: #7a5446"
                        >待确认</text
                    >
                    <text v-if="item.state == 1" style="color: #22b85e"
                        >已确认</text
                    >
                    <text v-if="item.state == 2" style="color: #ee3535"
                        >已拒绝</text
                    >
                </view>
            </view> -->
            <view class="menu-bottom">
                <view class="meanLeft" @click="acceptDevice(item)">授权</view>
                <view class="meanRight" @click="refuseDevice(item)">拒绝</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: "",
            sharePhone: "",
            messageFlag: true,
            serviceNumberFlag: true,
            voipFlag: true,
            userId: uni.getStorageSync("userId"),
            shareId: "",
        };
    },
    methods: {
        acceptDevice() {
            let userId = uni.getStorageSync("userId");
            if (!userId) {
                uni.showModal({
                    content: "暂未登录，请重新登录",
                    complete: (res) => {
                        if (res.confirm) {
                            uni.reLaunch({
                                url: "/pagesA/loginNew/loginNew",
                            });
                        } else {
                            uni.reLaunch({
                                url: "/pagesA/loginNew/loginNew",
                            });
                        }
                    },
                });
                return;
            }
            let shareConfirmParam = {
                // devId: this.devInfo.devId,
                sharedUserId: uni.getStorageSync("userId"),
                state: 1,
                sharedPhone: uni.getStorageSync("phone"),
                shareId: this.shareId,
            };
            console.log(shareConfirmParam, "shareConfirmParam");
            this.$http
                .post("wap/share/urlShareConfirm", shareConfirmParam, {
                    header: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "已接受该设备",
                            icon: "success",
                            duration: 1500,
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: "/pages/home/home",
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
        refuseDevice() {
            let shareConfirmParam = {
                // devId: this.devInfo.devId,
                sharedUserId: uni.getStorageSync("userId"),
                state: 2,
                sharedPhone: this.sharePhone,
                shareId: this.shareId,
            };
            this.$http
                .post("wap/share/urlShareConfirm", shareConfirmParam, {
                    header: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "已拒绝该设备",
                            icon: "success",
                            duration: 1500,
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: "/pages/home/home",
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
        this.sharePhone = options.phone;
        this.shareId = options.shareId;
    },
    onShow() {
        let userId = uni.getStorageSync("userId");
        if (!userId) {
            uni.showModal({
                content: "暂未登录，请重新登录",
                complete: (res) => {
                    if (res.confirm) {
                        uni.reLaunch({
                            url: "/pagesA/loginNew/loginNew",
                        });
                    } else {
                        uni.reLaunch({
                            url: "/pagesA/loginNew/loginNew",
                        });
                    }
                },
            });
        }
    },
    onShareAppMessage() {},
};
</script>
<style lang="less" scoped>
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    .meauList {
        width: 710rpx;
        margin: 18rpx auto;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 32rpx;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-of-type {
                border-bottom: none;
            }

            .meanLeft {
                flex: 1;
                color: #666;
                font-size: 28rpx;
                font-weight: 400;
            }

            .meanRight {
                flex: 1;
                text-align: right;
                color: #333;
                font-size: 28rpx;
                font-weight: 500;
                padding-left: 20rpx;
            }
        }

        .menu-bottom {
            display: flex;
            padding: 24rpx 32rpx;
            border-top: 1rpx solid #f0f0f0;

            .meanLeft,
            .meanRight {
                flex: 1;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                font-size: 30rpx;
                font-weight: 500;
                transition: all 0.2s;

                &:active {
                    opacity: 0.8;
                }
            }

            .meanLeft {
                background: #7b5245;
                color: white;
                margin-right: 16rpx;
            }

            .meanRight {
                background: fade(#ff4d4f, 10%);
                color: #ff4d4f;
                border: 1rpx solid fade(#ff4d4f, 30%);
            }
        }
    }
}
</style>