root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-14 17:26:40 +08:00
parent a706b60c90
commit b6f2a0fdc1
19 changed files with 424 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/XNav.vue
View File

@@ -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>

31
src/components/XNoticeBar.vue
View File

@@ -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,22 +34,28 @@ const Context = ref();
const roll = ref(false);
onMounted(() => {
if (
Context.value.$el.clientWidth
>
XNoticeBox.value.$el.clientWidth
) {
roll.value = true;
if (!tile) {
if (
Context.value.$el.clientWidth
>
XNoticeBox.value.$el.clientWidth
) {
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;
}

13
src/main.js
View File

@@ -1,10 +1,9 @@
import {
createSSRApp
} from "vue";
import {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";
@@ -13,11 +12,11 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
uni.$tui = propsConfig;
export function createApp() {
const app = createSSRApp(App);
const app = createSSRApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
return {
app,
};
return {
app,
};
}

28
src/pages.json
View File

@@ -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": {

61
src/pages/addPaymentAccount/components/AliPay.vue Normal file
View File

@@ -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>

61
src/pages/addPaymentAccount/components/BankPay.vue Normal file
View File

@@ -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>

60
src/pages/addPaymentAccount/index.vue Normal file
View File

@@ -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>

64
src/pages/paymentAccount/index.vue Normal file
View File

@@ -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>

19
src/pages/richPage/index.vue Normal file
View File

@@ -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>

2
src/pages/user/index.vue
View File

@@ -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>

89
src/pages/wallet/index.vue
View File

@@ -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>

3
src/scss/font.scss Normal file
View File

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

BIN
src/static/icons/icon-delete-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 B

BIN
src/static/icons/icon-edit-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 551 B

BIN
src/static/icons/icon-radio-s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 890 B

BIN
src/static/icons/icon-radio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 692 B

BIN
src/static/icons/payICON.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
src/static/icons/right_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 B

16
src/utils/uils.js
View File

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