xl-mobile/src/pages/messagePush/index.vue

<script setup>
import BD1 from "../../static/icons/bd1.png";
import BD2 from "../../static/icons/bd2.png";
import BD3 from "../../static/icons/bd3.png";
import BD4 from "../../static/icons/bd4.png";
import BDH from "../../static/icons/bdh.png";
import WBDICON from "../../static/icons/缺省图.png";
import YBDICON from "../../static/icons/已绑定.png";
import XNav from "../../components/XNav.vue";
import BindMsgModal from "../../components/BindMsgModal.vue";
import {useUserStore} from "../../pinia/UserStore/index.js";

const UserStore = useUserStore();
</script>

<template>
    <!--消息推送-->
    <x-nav></x-nav>

    <view v-if="!UserStore.userInfo.openid" class="!flex flex-col items-center !mt-[128rpx]">
        <image class="!size-[260rpx]" mode="aspectFill" :src="WBDICON"></image>
        <view class="!mt-[-70rpx] relative z-10">暂未绑定</view>
        <view class="text-[#86909C] test-28r">当前消息推送无法使用，将影响您收益!</view>

        <bind-msg-modal>
            <view class="!mt-[80rpx] rounded-[4rpx] bg-[var(--primary-color)] text-[#fff] py-[10rpx] px-[32rpx]">开始绑定
            </view>
        </bind-msg-modal>
    </view>

    <view v-else class="!flex flex-col items-center !mt-[128rpx]">
        <image class="!size-[260rpx]" mode="aspectFill" :src="YBDICON"></image>
        <view class="!mt-[-70rpx] relative z-10">已绑定</view>
        <view class="text-[#86909C] test-28r">{{ UserStore.userInfo.mobile }}可正常接收消息</view>

        <bind-msg-modal>
            <view class="!mt-[80rpx] rounded-[4rpx] bg-[var(--primary-color)] text-[#fff] py-[10rpx] px-[32rpx]">重新绑定
            </view>
        </bind-msg-modal>
    </view>

    <view class="btm h-[50vh] !flex flex-col items-center px-[40rpx] !mx-[20rpx]">
        <image class="!w-[300rpx] !mt-[40rpx] !mb-[40rpx]" mode="widthFix" :src="BDH"></image>
        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx]">
            <image class="!size-[70rpx]" mode="aspectFill" :src="BD1"></image>
            <view>
                <view class="test-28r" style="font-weight: bold">结算提醒</view>
                <view class="test-24r text-[#4E5969]">新的收益入账，待您确认后方可提现</view>
            </view>
        </view>

        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
            <image class="!size-[70rpx]" mode="aspectFill" :src="BD2"></image>
            <view>
                <view class="test-28r" style="font-weight: bold">回填提醒</view>
                <view class="test-24r text-[#4E5969]">回填时间临近时，会提醒您</view>
            </view>
        </view>

        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
            <image class="!size-[70rpx]" mode="aspectFill" :src="BD3"></image>
            <view>
                <view class="test-28r" style="font-weight: bold">修改提醒</view>
                <view class="test-24r text-[#4E5969]">来自商家的修改建议，助力变现</view>
            </view>
        </view>

        <view class="!flex items-center bg-[#fff] p-[28rpx] w-full rounded-[16rpx] gap-[28rpx] !mt-[20rpx]">
            <image class="!size-[70rpx]" mode="aspectFill" :src="BD4"></image>
            <view>
                <view class="test-28r" style="font-weight: bold">申诉提醒</view>
                <view class="test-24r text-[#4E5969]">通知您向平台发起的任务申诉结果</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.btm {
    width: calc(100% - 40rpx);
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180.00deg, rgb(68, 125, 255) 0.763%, rgb(255, 255, 255) 99.237%);
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
}
</style>