update

src/components/BindMsgModal.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {onMounted} from "vue";
+import XModal from "./XModal.vue";
+import XQrCode from "./XQrCode.vue";
+
+const show = defineModel('show');
+
+onMounted(() => {
+
+});
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <x-modal
+        v-model:show="show">
+        <view class="px-[30rpx] py-[40rpx] relative">
+            <image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]"
+                   src="/static/icons/close.png"></image>
+
+            <view class="title">绑定</view>
+            <view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
+                <x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
+            </view>
+            <view class="desc !mt-[24rpx]">截图保存后，使用微信扫码并关注</view>
+        </view>
+    </x-modal>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 34rpx;
+    font-weight: 500;
+    line-height: 48rpx;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.desc {
+    color: rgb(78, 89, 105);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+    text-align: center;
+}
+</style>

src/components/XConfirmModal.vue

@@ -0,0 +1,89 @@
+<script setup>
+import XModal from "./XModal.vue";
+
+const emits = defineEmits(['success']);
+const {title, info, cancel, confirmText} = defineProps({
+    title: {
+        type: String,
+        default: '确认删除吗'
+    },
+    info: {
+        type: String,
+        default: '删除后不可恢复'
+    },
+    confirmText: {
+        type: String,
+        default: '确定'
+    },
+    cancel: {
+        type: Boolean,
+        default: true,
+    }
+});
+const show = defineModel('show');
+
+const success = () => {
+    emits('success');
+    show.value = false;
+}
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <x-modal v-model:show="show" v-bind="$attrs">
+        <view class="py-[40rpx] px-[32rpx] !flex justify-center flex-col items-center gap-[20rpx]">
+            <template v-if="!$slots.context">
+                <view class="title">{{ title }}</view>
+                <view class="info">{{ info }}</view>
+            </template>
+            <slot name="context" v-else></slot>
+        </view>
+
+        <view class="!flex">
+            <view v-if="cancel" class="btn cancel" @click="show=false">取消</view>
+            <view class="btn confirm" @click="success">{{ confirmText }}</view>
+        </view>
+    </x-modal>
+</template>
+
+<style scoped lang="scss">
+.btn {
+    padding: 22rpx 0;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 300ms;
+
+    &:active {
+        background-color: rgba(0, 0, 0, .2);
+    }
+}
+
+.confirm {
+    color: #165DFF;
+    border-top: 1px solid #E5E6EA;
+}
+
+.cancel {
+    border-top: 1px solid #E5E6EA;
+    border-right: 1px solid #E5E6EA;
+}
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0;
+}
+</style>

src/components/XModal.vue

@@ -4,6 +4,7 @@ const show = defineModel('show');
 
 <template>
     <tui-modal
+        v-bind="$attrs"
         @cancel="show=false"
         padding="0"
         custom

src/pages.json

@@ -120,6 +120,20 @@
                 "navigationBarTitleText": "富文本页面",
                 "navigationStyle": "custom"
             }
+        },
+        {
+            "path": "pages/changeLog/index",
+            "style": {
+                "navigationBarTitleText": "变动记录",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/messagePush/index",
+            "style": {
+                "navigationBarTitleText": "消息推送",
+                "navigationStyle": "custom"
+            }
         }
     ],
     "globalStyle": {

src/pages/changeLog/index.vue

@@ -1,11 +1,216 @@
 <script setup>
+import Avatar from '../../static/images/banner占位.png';
+import MAICON from '../../static/icons/打码.png';
+import SQ from '../../static/icons/搜索.png';
+import XNav from "../../components/XNav.vue";
+import filer from "../../static/icons/filer-balck.png";
+import XFilter from "../../components/XFilter.vue";
+import {reactive, ref} from "vue";
+import XFilterItem from "../../components/XFilterItem.vue";
+import XRadioGroup from "../../components/XRadioGroup.vue";
+import XRadio from "../../components/XRadio.vue";
 
+const isVague = ref(false);
+const showFilter = ref(false);
+const isSearch = ref(false);
+const sumPo = reactive({
+    type: 0,
+});
 </script>
 
 <template>
     <!--变动记录-->
+    <x-nav></x-nav>
+
+    <x-filter
+        v-model:model="sumPo"
+        v-model:visible="showFilter">
+        <x-filter-item label="成员类型">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-3 gap-[24rpx]">
+                    <x-radio :value="0">我邀请的</x-radio>
+                    <x-radio :value="1">他人邀请的</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+        <x-filter-item label="排序类型">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-3 gap-[24rpx]">
+                    <x-radio :value="0">按收益</x-radio>
+                    <x-radio :value="1">加入时间正序</x-radio>
+                    <x-radio :value="2">加入时间倒序</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+    </x-filter>
+
+    <view class="py-[28rpx] !flex justify-evenly bg-[#fff]">
+        <view class="top-filter top-filter-cur">我邀请的</view>
+        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
+        <view class="top-filter top-filter-cur">按收益排序</view>
+        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
+        <view class="top-filter" @click="showFilter=true">
+            <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
+            筛选
+        </view>
+    </view>
+
+    <view class="!mx-[20rpx] bg-[#fff] rounded-[20rpx] !mt-[20rpx]">
+        <view class="balance-card">
+            <view class="p-[24rpx] !flex items-center gap-[20rpx]">
+                <view class="radio radio-cur">今天</view>
+                <view class="radio">昨天</view>
+                <view class="radio">累计</view>
+            </view>
+            <view class="gap-line"></view>
+            <view class="py-[52rpx] px-[44rpx] !grid grid-cols-3">
+                <view>
+                    <view class="info-title">新增成员(个)</view>
+                    <view class="info-balance">
+                        4
+                    </view>
+                </view>
+                <view>
+                    <view class="info-title">团队收益(元)</view>
+                    <view class="info-balance">
+                        15.64
+                    </view>
+                </view>
+                <view>
+                    <view class="info-title">团队奖励(元)</view>
+                    <view class="info-balance">
+                        5.60
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+
+    <view class="!mt-[40rpx] px-[20rpx] !flex items-center gap-[20rpx]">
+        <view class="sjmx">数据明细</view>
+
+        <view class="btn !ml-auto" @click="isVague=!isVague">
+            <image class="!size-[28rpx]" mode="aspectFill" :src="MAICON"></image>
+            {{ isVague ? '取消' : '一键' }}打码
+        </view>
+        <view :class="['btn', isSearch?'search':'']" @click="isSearch=true">
+            <image class="!size-[28rpx] flex-shrink-0" mode="aspectFill" :src="SQ"></image>
+            <text v-if="!isSearch">搜索</text>
+            <input @blur="isSearch=false" v-else></input>
+        </view>
+    </view>
+
+    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
+        <view v-for="item in 20" class="rounded-[8rpx] bg-[#fff] p-[24rpx] flex-grow">
+            <view :class="['!flex gap-[18rpx]', isVague?'vague':'']">
+                <image class="!size-[88rpx] rounded-[16rpx]" :src="Avatar" mode="aspectFill"></image>
+                <view class="flex-grow h-full !flex flex-col justify-between gap-[14rpx]">
+                    <view class="!flex justify-between items-center">
+                        <view class="test-28r">一只哈里路</view>
+                        <view class="text-[#86909C] test-24r">2024-01-26 加入</view>
+                    </view>
+                    <view class="!flex flex-wrap">
+                        <view class="py-[3rpx] px-[8rpx] test-20r bg-[#F2F3F5]">id：53379</view>
+                    </view>
+                </view>
+            </view>
+            <view class="!flex gap-[22rpx] !mt-[20rpx]">
+                <view class="!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r">
+                    <view>收益：</view>
+                    <view class="text-[var(--primary-color)]">245.14</view>
+                </view>
+                <view
+                    :class="['!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r', isVague?'vague':'']">
+                    <view>收益：</view>
+                    <view class="text-[var(--primary-color)]">245.14</view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.search {
+    width: 300rpx;
+}
 
+.vague {
+    filter: blur(4px);
+}
+
+.btn {
+    padding: 8rpx 32rpx;
+    color: var(--primary-color);
+    font-size: 28rpx;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    border-radius: 999rpx;
+    border: 1px solid var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+}
+
+.sjmx {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+}
+
+.top-filter {
+    color: rgb(29, 33, 41);
+    font-size: 28rpx;
+    line-height: 22px;
+    letter-spacing: 0;
+}
+
+.top-filter-cur {
+    color: var(--primary-color);
+}
+
+.balance-card {
+    border-radius: 20rpx;
+    background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);
+
+    .radio {
+        color: rgb(255, 255, 255);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        letter-spacing: 0;
+        padding: 10rpx 32rpx;
+        transition: 300ms;
+    }
+
+    .radio-cur {
+        background-color: #ffffff;
+        border-radius: 999rpx;
+        color: var(--primary-color);
+    }
+
+    .gap-line {
+        height: 2px;
+        width: 100%;
+        background-color: rgba(232, 243, 255, 0.14);
+    }
+
+    .info-title {
+        color: rgb(190, 218, 255);
+        font-size: 24rpx;
+        font-weight: 400;
+        letter-spacing: 0;
+        margin-bottom: 16rpx;
+    }
+
+    .info-balance {
+        color: rgb(255, 255, 255);
+        font-size: 40rpx;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: 0;
+    }
+}
 </style>

src/pages/messagePush/index.vue

@@ -1,11 +1,74 @@
 <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 XNav from "../../components/XNav.vue";
+import BindMsgModal from "../../components/BindMsgModal.vue";
 </script>
 
 <template>
     <!--消息推送-->
+    <x-nav></x-nav>
+
+    <view 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 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 scoped>
+<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>

src/pages/paymentAccount/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import XNav from "../../components/XNav.vue";
-import {toPage} from "../../utils/uils.js";
+import {showToast, toPage} from "../../utils/uils.js";
 import ICON1 from "../../static/icons/payICON.png";
 import ICON2 from "../../static/icons/right_blue.png";
 import ICON3 from "../../static/icons/icon-edit-white.png";
@@ -8,6 +8,14 @@ import ICON4 from "../../static/icons/icon-delete-white.png";
 import ICON5 from "../../static/icons/icon-radio.png";
 import ICON6 from "../../static/icons/icon-radio-s.png";
 import XLink from "../../components/XLink.vue";
+import XConfirmModal from "../../components/XConfirmModal.vue";
+
+const deletePayment = async () => {
+    showToast({
+        icon: 'success',
+        title: '删除成功'
+    });
+}
 </script>
 
 <template>
@@ -26,7 +34,9 @@ import XLink from "../../components/XLink.vue";
             <view class="!flex items-center">
                 <view class="text-[#fff]">支付宝</view>
                 <image class="!size-[35rpx] !ml-auto" mode="aspectFill" :src="ICON3"></image>
+                <x-confirm-modal title="确定删除银行卡" info="135 7777 9865" @success="deletePayment">
                     <image class="!size-[30rpx] !ml-[20rpx]" mode="aspectFill" :src="ICON4"></image>
+                </x-confirm-modal>
             </view>
             <view class="HarmonyOS account">
                 135 7777 9865

src/pages/user/index.vue

@@ -136,11 +136,12 @@ const tabs = [
             </view>
             <view class="!flex items-center flex-col justify-center gap-[12rpx]">
                 <image class="!size-[84rpx]" mode="aspectFill" :src="ICON6"></image>
-                <view class="test-24r">邀请好友</view>
+                <view class="test-24r">联系客服</view>
             </view>
-            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
+            <view class="!flex items-center flex-col justify-center gap-[12rpx]"
+                  @click="toPage('/pages/messagePush/index')">
                 <image class="!size-[84rpx]" mode="aspectFill" :src="ICON7"></image>
-                <view class="test-24r">邀请好友</view>
+                <view class="test-24r">消息推送</view>
             </view>
         </view>
     </view>

src/pages/wallet/components/WithdrawalModal.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {ref} from "vue";
+import XConfirmModal from "../../../components/XConfirmModal.vue";
+import {showToast} from "../../../utils/uils.js";
+
+const show = ref(false);
+const open = () => {
+    show.value = true;
+}
+
+const success = () => {
+    showToast({
+        icon: 'success',
+        title: '发起提现成功，正在打款',
+    });
+}
+</script>
+
+<template>
+    <view>
+        <view @click="open">
+            <slot></slot>
+        </view>
+
+        <x-confirm-modal
+            @success="success"
+            v-model:show="show"
+            width="540rpx"
+            confirm-text="我已确认"
+            :cancel="false">
+            <template v-slot:context>
+                <view class="w-full">
+                    <view class="title">
+                        请核对提现信息
+                    </view>
+                    <view class="info">
+                        姓名：李晓<br/>
+                        支付宝号：13566890241<br/>
+                        提现金额：36.78<br/>
+                        提现手续费：3.678<br/>
+                        到账金额：33.10
+                    </view>
+                    <view class="exp">
+                        手续费率为6%，由三方代账公司收取
+                    </view>
+                </view>
+            </template>
+        </x-confirm-modal>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 30px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.exp {
+    color: rgb(155, 159, 171);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+}
+</style>

src/pages/wallet/index.vue

@@ -5,6 +5,11 @@ import XNav from "../../components/XNav.vue";
 import XLink from "../../components/XLink.vue";
 import Right from "../../static/icons/right.png";
 import {toPage} from "../../utils/uils.js";
+import WithdrawalModal from "./components/WithdrawalModal.vue";
+
+const withdrawal = async () => {
+
+}
 </script>
 
 <template>
@@ -26,10 +31,13 @@ import {toPage} from "../../utils/uils.js";
                     <view class="test-28r">可提现余额(元）</view>
                     <view class="HarmonyOS" style="font-size: 60rpx;font-weight: 500;">0.00</view>
                 </view>
+                <withdrawal-modal>
                     <view
+                        @click=""
                         class="py-[8rpx] bg-[var(--primary-color)] text-[#fff] rounded-full w-[200rpx] !flex justify-center items-center">
                         立即提现
                     </view>
+                </withdrawal-modal>
             </view>
 
             <view class="h-[3rpx] bg-[#E5E6EB] !my-[20rpx]"></view>
@@ -60,7 +68,7 @@ import {toPage} from "../../utils/uils.js";
         </view>
 
         <view class="w-full bg-[#fff] rounded-[16rpx] overflow-hidden">
-            <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/changeLog/index')">
                 <view class="title">变动记录</view>
                 <view class="!ml-auto whitespace-nowrap value"></view>
                 <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>

src/pages/walletLog/index.vue

@@ -1,6 +1,4 @@
-<script setup>
+<script setup></script>
-
-</script>
 
 <template>
     <!--变动记录-->

src/scss/global.scss

@@ -48,6 +48,10 @@ $primary-color: #2D5CF6;
     white-space: nowrap;
 }
 
+.test-20r {
+    font-size: 20rpx;
+}
+
 .test-22r {
     font-size: 22rpx;
 }