update

src/components/XNav.vue

@@ -22,7 +22,10 @@ const title = ref(document.title);
                 src="/static/icons/back.png">
             </image>
 
-            <view class="title">{{ title }}</view>
+            <view class="title">
+                <text v-if="!$slots.default">{{ title }}</text>
+                <slot v-else></slot>
+            </view>
         </view>
 
         <view class="h-[100rpx] w-full"></view>

src/components/XNoticeBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -14,7 +14,7 @@ const STATUS = {
     },
 };
 
-const {text, status} = defineProps({
+const {text, status, tile} = defineProps({
     text: {
         type: String,
         default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
@@ -22,6 +22,10 @@ const {text, status} = defineProps({
     status: {
         type: String,
         default: 'error'
+    },
+    tile: {
+        type: Boolean,
+        default: false,
     }
 });
 
@@ -30,6 +34,7 @@ const Context = ref();
 const roll = ref(false);
 
 onMounted(() => {
+    if (!tile) {
         if (
             Context.value.$el.clientWidth
             >
@@ -37,15 +42,20 @@ onMounted(() => {
         ) {
             roll.value = true;
         }
+    }
 });
 </script>
 
 <template>
     <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
-        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]">
+        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
+              :style="{alignItems: tile ? 'start' : 'center'}">
             <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
             <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
-            <text class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
+            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0">{{ text }}</text>
+            <text v-else>
+                {{ text }}
+            </text>
         </view>
     </view>
 </template>
@@ -81,7 +91,6 @@ onMounted(() => {
     text-align: left;
     white-space: nowrap;
     display: inline-flex;
-    align-items: center;
     gap: 18rpx;
 }
 

src/main.js

@@ -1,10 +1,9 @@
-import {
+import {createSSRApp} from "vue";
-	createSSRApp
-} from "vue";
 import App from "./App.vue";
 import './scss/index.css';
 import './scss/index.scss';
 import './scss/global.scss';
+import './scss/font.scss';
 import './scss/uni.scss';
 import propsConfig from "./scss/thorui.config.js";
 import {createPinia} from "pinia";

src/pages.json

@@ -92,6 +92,34 @@
                 "navigationBarTitleText": "编辑资料",
                 "navigationStyle": "custom"
             }
+        },
+        {
+            "path": "pages/wallet/index",
+            "style": {
+                "navigationBarTitleText": "我的钱包",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/paymentAccount/index",
+            "style": {
+                "navigationBarTitleText": "收款账号",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/addPaymentAccount/index",
+            "style": {
+                "navigationBarTitleText": "添加收款账号",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/richPage/index",
+            "style": {
+                "navigationBarTitleText": "富文本页面",
+                "navigationStyle": "custom"
+            }
         }
     ],
     "globalStyle": {

src/pages/addPaymentAccount/components/AliPay.vue

@@ -0,0 +1,61 @@
+<script setup>
+import {reactive} from 'vue';
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+import {toPage} from "../../../utils/uils.js";
+
+const rules = {
+    name: {
+        reg: /.+/,
+        msg: '姓名不能为空',
+    }
+};
+const form = reactive({
+    name: null,
+});
+</script>
+
+<template>
+    <view>
+        <x-form :model="form" :rules="rules">
+            <x-form-item label="真实姓名">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入真实姓名"></x-input>
+            </x-form-item>
+            <x-form-item label="身份证号码">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入身份证号码"></x-input>
+            </x-form-item>
+            <x-form-item label="支付宝账号">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入支付宝账号"></x-input>
+            </x-form-item>
+            <x-form-item label="手机号">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入手机号"></x-input>
+            </x-form-item>
+            <x-form-item>
+                <view class="items-center test-24r xy">
+                    <radio></radio>
+                    本人承诺已阅读并同意
+                    <text class="text-[var(--primary-color)]" @click="toPage('/pages/richPage/index')">
+                        《灵活用工平台综合服务协议》
+                    </text>
+                    ，本人按照协议内容向贵司提供相应的服务。
+                </view>
+            </x-form-item>
+            <x-form-item>
+                <view
+                    class="bg-[var(--primary-color)] py-[26rpx] w-full text-[#fff] rounded-[12rpx] !flex justify-center items-center !mt-[40rpx]">
+                    提交
+                </view>
+            </x-form-item>
+        </x-form>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.xy {
+    :deep(.uni-radio-input) {
+        width: 28rpx;
+        height: 28rpx;
+    }
+}
+</style>

src/pages/addPaymentAccount/components/BankPay.vue

@@ -0,0 +1,61 @@
+<script setup>
+import {reactive} from "vue";
+import {toPage} from "../../../utils/uils.js";
+import XInput from "../../../components/XInput.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XForm from "../../../components/XForm.vue";
+
+const rules = {
+    name: {
+        reg: /.+/,
+        msg: '姓名不能为空',
+    }
+};
+const form = reactive({
+    name: null,
+});
+</script>
+
+<template>
+    <view>
+        <x-form :model="form" :rules="rules">
+            <x-form-item label="真实姓名">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入真实姓名"></x-input>
+            </x-form-item>
+            <x-form-item label="身份证号码">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入身份证号码"></x-input>
+            </x-form-item>
+            <x-form-item label="银行卡号">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入银行卡号"></x-input>
+            </x-form-item>
+            <x-form-item label="手机号">
+                <x-input v-model:model-value="form.name" height="96rpx" placeholder="请输入手机号"></x-input>
+            </x-form-item>
+            <x-form-item>
+                <view class="items-center test-24r xy">
+                    <radio></radio>
+                    本人承诺已阅读并同意
+                    <text class="text-[var(--primary-color)]" @click="toPage('/pages/richPage/index')">
+                        《灵活用工平台综合服务协议》
+                    </text>
+                    ，本人按照协议内容向贵司提供相应的服务。
+                </view>
+            </x-form-item>
+            <x-form-item>
+                <view
+                    class="bg-[var(--primary-color)] py-[26rpx] w-full text-[#fff] rounded-[12rpx] !flex justify-center items-center !mt-[40rpx]">
+                    提交
+                </view>
+            </x-form-item>
+        </x-form>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.xy {
+    :deep(.uni-radio-input) {
+        width: 28rpx;
+        height: 28rpx;
+    }
+}
+</style>

src/pages/addPaymentAccount/index.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {defineAsyncComponent, ref} from "vue";
+import XNav from "../../components/XNav.vue";
+import XNoticeBar from "../../components/XNoticeBar.vue";
+
+const AliPay = defineAsyncComponent(() => import('./components/AliPay.vue'));
+const BankPay = defineAsyncComponent(() => import('./components/BankPay.vue'));
+
+const currentTab = ref(0);
+const tabs = [
+    {
+        name: '支付宝账号',
+        component: AliPay,
+    },
+    {
+        name: '银行卡账号',
+        component: BankPay,
+    },
+];
+
+const change = (e) => {
+    currentTab.value = e.index;
+}
+</script>
+
+<template>
+    <!-- 立即提现 -->
+    <x-nav></x-nav>
+
+    <x-notice-bar
+        status="success"
+        :tile="true"
+        text="平台承诺：所有信息仅用于打款，不会用作其他用途。为了您的资金安全，大额提现会通过第三方支付代发，请填写实名信息和银行卡进行验证。">
+    </x-notice-bar>
+
+    <view class="bg-[#fff]">
+        <tui-tabs
+            :tabs="tabs"
+            :currentTab="currentTab"
+            @change="change"
+            width="300">
+        </tui-tabs>
+
+        <Suspense>
+            <template #default>
+                <view class="px-[34rpx] !mt-[40rpx]">
+                    <component :is="tabs[currentTab].component"></component>
+                </view>
+            </template>
+
+            <template #fallback>
+                加载中...
+            </template>
+        </Suspense>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/paymentAccount/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import XNav from "../../components/XNav.vue";
+import {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";
+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";
+</script>
+
+<template>
+    <x-nav></x-nav>
+
+    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
+        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
+              @click="toPage('/pages/addPaymentAccount/index')">
+            <image class="!size-[72rpx]" mode="aspectFill" :src="ICON1"></image>
+            <view class="text-[#86909C] test-28r">您还没有添加收款信息~</view>
+            <x-link class="test-28r !ml-auto">去添加</x-link>
+            <image class="!w-[12rpx]" mode="widthFix" :src="ICON2"></image>
+        </view>
+
+        <view class="bg-[#3878F6] p-[32rpx] rounded-[12rpx]" v-for="i in 10">
+            <view class="!flex items-center">
+                <view class="text-[#fff]">支付宝</view>
+                <image class="!size-[35rpx] !ml-auto" mode="aspectFill" :src="ICON3"></image>
+                <image class="!size-[30rpx] !ml-[20rpx]" mode="aspectFill" :src="ICON4"></image>
+            </view>
+            <view class="HarmonyOS account">
+                135 7777 9865
+            </view>
+            <view class="radio-info">
+                <image v-if="false" class="!size-[30rpx]" mode="aspectFill" :src="ICON5"></image>
+                <image v-else class="!size-[30rpx]" mode="aspectFill" :src="ICON6"></image>
+                设为默认打款信息
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.radio-info {
+    color: rgb(255, 255, 255);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+}
+
+.account {
+    color: rgb(255, 255, 255);
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    margin-top: 26rpx;
+    margin-bottom: 22rpx;
+}
+</style>

src/pages/richPage/index.vue

@@ -0,0 +1,19 @@
+<script setup>
+import {ref} from 'vue';
+import XNav from "../../components/XNav.vue";
+
+const title = ref('灵活用工平台综合服务协议');
+const nodes = ref('<div>Hello World!</div>');
+</script>
+
+<template>
+    <x-nav>{{ title }}</x-nav>
+
+    <view class="bg-[#fff]">
+        <rich-text :nodes="nodes"></rich-text>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/user/index.vue

@@ -95,7 +95,7 @@ const tabs = [
                 <image class="!size-[40rpx]" mode="aspectFill" :src="ICON2"></image>
                 <view class="test-24r">变动记录</view>
             </view>
-            <view class="!flex items-center gap-[12rpx]">
+            <view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/wallet/index')">
                 <image class="!size-[40rpx]" mode="aspectFill" :src="ICON3"></image>
                 <view class="test-24r">我的钱包</view>
             </view>

src/pages/wallet/index.vue

@@ -1,11 +1,94 @@
 <script setup>
-
+import ICON1 from "../../static/icons/payICON.png";
+import ICON2 from "../../static/icons/right_blue.png";
+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";
 </script>
 
 <template>
     <!--钱包-->
+    <x-nav></x-nav>
+
+    <view class="!flex flex-col gap-[20rpx] p-[20rpx]">
+        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
+              @click="toPage('/pages/paymentAccount/index')">
+            <image class="!size-[72rpx]" mode="aspectFill" :src="ICON1"></image>
+            <view class="text-[#86909C] test-28r">您还没有添加收款信息~</view>
+            <x-link class="test-28r !ml-auto">去添加</x-link>
+            <image class="!w-[12rpx]" mode="widthFix" :src="ICON2"></image>
+        </view>
+
+        <view class="py-[32rpx] px-[24rpx] rounded-[12rpx] bg-[#fff] w-full">
+            <view class="!flex items-center justify-between">
+                <view>
+                    <view class="test-28r">可提现余额(元）</view>
+                    <view class="HarmonyOS" style="font-size: 60rpx;font-weight: 500;">0.00</view>
+                </view>
+                <view
+                    class="py-[8rpx] bg-[var(--primary-color)] text-[#fff] rounded-full w-[200rpx] !flex justify-center items-center">
+                    立即提现
+                </view>
+            </view>
+
+            <view class="h-[3rpx] bg-[#E5E6EB] !my-[20rpx]"></view>
+
+            <view class="wxts">
+                温馨提示<br/>
+                1.提现门槛为1元<br/>
+                2.打款时间:工作日11:00-18:00;<br/>
+                3.工作日18:00前提现的当日到款<br/>
+                4.工作日18:00后提现的次日到账;<br/>
+                5.如遇打款失败，可在提现记录中查看原因
+            </view>
+        </view>
+
+        <view class="w-full !grid grid-cols-3 gap-[20rpx]">
+            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
+                <view class="text-[#4E5969] test-22r">总收益</view>
+                <view class="test-36r" style="font-weight: 700;">0.00</view>
+            </view>
+            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
+                <view class="text-[#4E5969] test-22r">打款中</view>
+                <view class="test-36r" style="font-weight: 700;">0.00</view>
+            </view>
+            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
+                <view class="text-[#4E5969] test-22r">已提现</view>
+                <view class="test-36r" style="font-weight: 700;">0.00</view>
+            </view>
+        </view>
+
+        <view class="w-full bg-[#fff] rounded-[16rpx] overflow-hidden">
+            <view class="!flex items-center h-[108rpx] px-[32rpx]">
+                <view class="title">变动记录</view>
+                <view class="!ml-auto whitespace-nowrap value"></view>
+                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+            </view>
+            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+            <view class="!flex items-center h-[108rpx] px-[32rpx]">
+                <view class="title">提现记录</view>
+                <view class="!ml-auto whitespace-nowrap value"></view>
+                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+            </view>
+            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+            <view class="!flex items-center h-[108rpx] px-[32rpx]">
+                <view class="title">收益记录</view>
+                <view class="!ml-auto whitespace-nowrap value"></view>
+                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+            </view>
+        </view>
+    </view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
-
+.wxts {
+    color: rgb(134, 144, 156);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0;
+}
 </style>

src/scss/font.scss

@@ -0,0 +1,3 @@
+.HarmonyOS {
+    font-family: HarmonyOS Sans;
+}

src/utils/uils.js

@@ -14,14 +14,20 @@ export const isWXWeb = () => {
     return userAgent.includes('MicroMessenger');
 }
 
-export const toPage = (url) => {
+export const toPage = async (url) => {
-    uni.reLaunch({
+    try {
+        await uni.navigateTo({
             url: url,
-    }).then();
+        })
+    } catch (e) {
+        await uni.reLaunch({
+            url: url,
+        })
+    }
 }
 
 export const backPage = () => {
-    window.history.back();
+    uni.navigateBack().then();
 }
 
 export const copy = (context) => {