98 lines
4.0 KiB
Vue
98 lines
4.0 KiB
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/yczh.png";
|
||
import YBDICON from "../../static/icons/YBD.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] flex-shrink-0" 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>
|
||
|
||
<style>
|
||
#app {
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 1 / 2.1;
|
||
}
|
||
</style>
|