hfln_miniprogram/src/pagesA/linkShare/linkShare.vue

<template>
    <view class="content">
        <view class="meauList">
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享人号码</text>
                </view>
                <view class="meanRight">
                    <text>{{ phone }}</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>设备Id</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.devId }}</text></view
                >
            </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>
        <button class="btn1" open-type="share" v-if="shareFlag">
            确认分享
        </button>
        <button class="btn1" v-else>暂不可分享</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: "",
            phone: uni.getStorageSync("phone"),
            messageFlag: true,
            serviceNumberFlag: true,
            voipFlag: true,
            shareFlag: false,
        };
    },
    methods: {
        smChange() {
            this.messageFlag = !this.messageFlag;
            this.shareUserLink("权限修改成功");
        },
        snChange() {
            this.serviceNumberFlag = !this.serviceNumberFlag;
            this.shareUserLink("权限修改成功");
        },

        vfChange() {
            this.voipFlag = !this.voipFlag;
            this.shareUserLink("权限修改成功");
        },
        onShareAppMessage() {
            return {
                title: "好友向您分享了一台设备",
                path:
                    "/pagesA/sharePages/sharePages?phone=" +
                    this.phone +
                    "&devInfo=" +
                    JSON.stringify(this.devInfo),
            };
        },
        shareUserLink(itemTitle) {
            let shareParam = {
                devId: this.devInfo.devId,
                sharerUserId: uni.getStorageSync("userId"),
                sharerPhone: uni.getStorageSync("phone"),
                sharedUserId: "",
                messageFlag: this.messageFlag == true ? 0 : 1,
                serviceNumberFlag: this.serviceNumberFlag == true ? 0 : 1,
                voipFlag: this.voipFlag == true ? 0 : 1,
            };
            this.$http
                .post("wap/share/shareByUrl", shareParam, {
                    header: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                })
                .then((res) => {
                    if (res.statusCode == 200) {
                        uni.showToast({
                            title: itemTitle,
                            icon: "none",
                            duration: 1500,
                        });
                        this.shareFlag = true;
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
    },
    onShow() {
        setTimeout(() => {
            this.shareUserLink("分享链接创建成功");
        }, 500);
    },
};
</script>
<style lang="less" scoped>
.content {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    padding-top: 20rpx;
    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;
                }
            }
        }
    }
    .funChoice {
        padding-left: 30rpx;
        padding-top: 20rpx;
        .funItem {
            .simple-radio {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
            }
        }
    }
    .btn1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 710rpx;
        height: 94rpx;
        margin-top: 60rpx;
        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;
    }
}
</style>