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-21 15:19:28 +08:00
parent 90271467eb
commit ef99f9377c
14 changed files with 392 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/XConfirmModal.vue
View File

@@ -85,5 +85,6 @@ const success = () => {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-align: center;
}
</style>

15
src/components/XDateTime.vue
View File

@@ -2,10 +2,14 @@
import timeIcon from "../static/icons/time.png";
const modalValue = defineModel();
const {placeholder} = defineProps({
const {placeholder, fields} = defineProps({
placeholder: {
type: String,
default: "请选择时间",
},
fields: {
type: String,
default: 'day'
}
});
@@ -15,12 +19,13 @@ const success = ({detail: {value}}) => {
</script>
<template>
<picker mode="date" class="x-date-input" @change="success">
<view>
<image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
<picker mode="date" :class="[!$slots.default ? 'x-date-input' : '']" @change="success" :fields="fields">
<view v-if="!$slots.default" class="!flex items-center justify-center gap-[20rpx]">
<image class="!size-[24rpx]" :src="timeIcon"></image>
<text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
<text v-else>{{modalValue}}</text>
<text class="test-24r" v-else>{{ modalValue }}</text>
</view>
<slot v-else></slot>
</picker>
</template>

37
src/components/XTag.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
const {type} = defineProps({
type: {
type: String,
default: 'info'
}
});
</script>
<template>
<view :class="['x-tag', type]">
<slot></slot>
</view>
</template>
<style scoped lang="scss">
.x-tag {
font-size: 24rpx;
padding: 3rpx 8rpx;
border-radius: 4rpx;
}
.info {
background-color: var(--primary-color-info);
color: var(--primary-color);
}
.success {
background-color: #E8FFEA;
color: #00B42A;
}
.warn {
background-color: #FFF7E8;
color: #FF7D00;
}
</style>

13
src/hooks/useTableQuery.js
View File

@@ -1,4 +1,4 @@
import {ref, reactive, watch} from 'vue';
import {reactive, ref, watch} from 'vue';
/**
*
@@ -41,6 +41,7 @@ function useTableQuery({
callback && callback({
...data,
rows: data.rows.map(v => ({...v, key: v.id})),
current: pagination.current
});
} finally {
loading.value = false;
@@ -48,8 +49,12 @@ function useTableQuery({
}
const initFetchData = async () => {
pagination.current = 1;
pagination.total = 0;
if (pagination.current === 1) {
fetchData().then();
} else {
pagination.current = 1;
pagination.total = 0;
}
}
watch(
@@ -60,7 +65,7 @@ function useTableQuery({
if (watchParameter) watch(
() => parameter,
() => fetchData(),
() => initFetchData(),
{deep: true}
);

21
src/pages.json
View File

@@ -134,6 +134,27 @@
"navigationBarTitleText": "消息推送",
"navigationStyle": "custom"
}
},
{
"path": "pages/withdrawalLog/index",
"style": {
"navigationBarTitleText": "提现记录",
"navigationStyle": "custom"
}
},
{
"path": "pages/walletLog/index",
"style": {
"navigationBarTitleText": "变动记录",
"navigationStyle": "custom"
}
},
{
"path": "pages/incomeLog/index",
"style": {
"navigationBarTitleText": "收益记录",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

119
src/pages/incomeLog/index.vue
View File

@@ -1,11 +1,128 @@
<script setup>
import {reactive, ref} from 'vue';
import XNav from "../../components/XNav.vue";
import SETTING from "../../static/icons/setting.png";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import dropDown from "../../static/icons/drop-down.svg";
import XDateTime from "../../components/XDateTime.vue";
import XTag from "../../components/XTag.vue";
import dayjs from "dayjs";
import XConfirmModal from "../../components/XConfirmModal.vue";
const showModal = ref(false);
const po = reactive({
type: 0,
datetime: dayjs().format("YYYY-MM"),
});
const vo = reactive({
page: '',
rows: [],
total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
api: Api.system.getData,
parameter: po,
watchParameter: true,
callback: (data) => {
vo.page = data.page;
vo.total = data.total;
if (data.current === 1) {
vo.rows.length = 0;
}
vo.rows = [...vo.rows, ...data.rows];
}
});
</script>
<template>
<!--收益记录-->
<x-nav></x-nav>
<view class="!flex justify-around bg-[#fff] h-[100rpx]">
<view :class="['top-filter transition-[500ms] !flex items-center', po.type === 0 ? 'top-filter-cur' : '']"
@click="po.type=0">
个人收益
</view>
<view :class="['top-filter transition-[500ms] !flex items-center', po.type === 1 ? 'top-filter-cur' : '']"
@click="po.type=1">
团队收益
</view>
<view>
<view class="top-filter transition-[500ms] !flex items-center gap-[20rpx] h-full" @click="showModal=true">
<image class="!w-[22rpx] !h-[22rpx]" :src="SETTING"></image>
活动收益
</view>
<x-confirm-modal
width="500rpx"
title="拉新奖励"
info="邀请新用户并完成首个任务，可以获得拉新奖励"
:cancel="false"
confirmText="知道了"
v-model:show="showModal">
</x-confirm-modal>
</view>
</view>
<scroll-view
scroll-y
@refresherpulling="initFetchData()"
@scrolltolower="pagination.current++"
class="h-[calc(100vh-200rpx)]">
<view class="!flex flex-col gap-[20rpx] p-[20rpx]">
<view class="bg-[var(--primary-color)] p-[32rpx] rounded-[12rpx] !flex items-center">
<view class="!flex-grow text-[#fff]">
<view class="test-36r font-bold">246.23</view>
<view class="test-24r">该月收益</view>
</view>
<view class="!flex-grow text-[#fff]">
<view class="test-36r font-bold">246.23</view>
<view class="test-24r">累计收益</view>
</view>
<view class="flex-shrink-0">
<x-date-time v-model:model-value="po.datetime" fields="month">
<view
class="rounded-full bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] !flex items-center gap-[14rpx]">
{{ po.datetime }}
<image class="!w-[18rpx]" mode="widthFix" :src="dropDown"></image>
</view>
</x-date-time>
</view>
</view>
<view v-for="item in vo.rows">
<view class="p-[20rpx] rounded-[12rpx] bg-[#fff] !flex justify-between items-center">
<view class="!flex flex-col gap-[24rpx]">
<view class="!flex items-center gap-[16rpx]">
<view>提现退回</view>
<x-tag type="success">收入</x-tag>
</view>
<view class="text-[#86909C] test-24r">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</view>
</view>
<view class="test-36r font-bold HarmonyOS">
+95.88
</view>
</view>
</view>
<tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
</view>
</scroll-view>
</template>
<style scoped>
<style lang="scss" scoped>
.top-filter-cur {
color: var(--primary-color);
position: relative;
&::after {
content: '';
display: block;
height: 4rpx;
background-color: var(--primary-color);
width: 100%;
position: absolute;
bottom: 0;
}
}
</style>

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

@@ -87,11 +87,11 @@ const tabs = [
</view>
<view class="px-[34rpx] py-[20rpx] !flex justify-between">
<view class="!flex items-center gap-[12rpx]">
<view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/withdrawalLog/index')">
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON1"></image>
<view class="test-24r">提现记录</view>
</view>
<view class="!flex items-center gap-[12rpx]">
<view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/changeLog/index')">
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON2"></image>
<view class="test-24r">变动记录</view>
</view>

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

@@ -68,21 +68,21 @@ const withdrawal = async () => {
</view>
<view class="w-full bg-[#fff] rounded-[16rpx] overflow-hidden">
<view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/changeLog/index')">
<view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/walletLog/index')">
<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="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/withdrawalLog/index')">
<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="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/incomeLog/index')">
<view class="title">收益记录</view>
<view class="!ml-auto whitespace-nowrap value"></view>
<image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>

98
src/pages/walletLog/index.vue
View File

@@ -1,7 +1,103 @@
<script setup></script>
<script setup>
import XNav from "../../components/XNav.vue";
import filer from "../../static/icons/filer-balck.png";
import {reactive, ref} from "vue";
import XFilter from "../../components/XFilter.vue";
import XRadioGroup from "../../components/XRadioGroup.vue";
import XFilterItem from "../../components/XFilterItem.vue";
import XRadio from "../../components/XRadio.vue";
import XDateTime from "../../components/XDateTime.vue";
import dayjs from "dayjs";
import XTag from "../../components/XTag.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
const showFilter = ref(false);
const sumPo = reactive({
type: 0,
datetime: dayjs().format('YYYY-MM'),
});
const vo = reactive({
page: '',
rows: [],
total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
api: Api.system.getData,
parameter: sumPo,
watchParameter: true,
callback: (data) => {
vo.page = data.page;
vo.total = data.total;
if (data.current === 1) {
vo.rows.length = 0;
}
vo.rows = [...vo.rows, ...data.rows];
}
});
</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>
<x-radio :value="2">支出</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-date-time v-model:model-value="sumPo.datetime" fields="month"></x-date-time>
</view>
</x-radio-group>
</x-filter-item>
</x-filter>
<view class="py-[28rpx] !flex justify-evenly bg-[#fff] h-[100rpx]">
<view class="top-filter top-filter-cur text-[var(--primary-color)]">{{
['全部', '收入', '支出'][sumPo.type]
}}
</view>
<view class="w-[4rpx] bg-[#E5E6EB]"></view>
<view class="top-filter top-filter-cur text-[var(--primary-color)]">{{ sumPo.datetime }}</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>
<scroll-view
@refresherpulling="initFetchData()"
@scrolltolower="pagination.current++"
scroll-y
class="h-[calc(100vh-200rpx)]">
<view class="p-[20rpx]" v-for="item in vo.rows">
<view class="p-[20rpx] rounded-[12rpx] bg-[#fff] !flex justify-between items-center">
<view class="!flex flex-col gap-[24rpx]">
<view class="!flex items-center gap-[16rpx]">
<view>提现退回</view>
<x-tag type="success">收入</x-tag>
</view>
<view class="text-[#86909C] test-24r">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</view>
</view>
<view class="test-36r font-bold HarmonyOS">
+95.88
</view>
</view>
</view>
<tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
</scroll-view>
</template>
<style scoped>

91
src/pages/withdrawalLog/index.vue
View File

@@ -1,11 +1,98 @@
<script setup>
import ZFBICON from '../../static/icons/ZFBICON.png';
import dropDown from '../../static/icons/drop-down.svg';
import XNav from "../../components/XNav.vue";
import XTag from "../../components/XTag.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import {reactive} from "vue";
import XDateTime from "../../components/XDateTime.vue";
import dayjs from "dayjs";
const po = reactive({
datetime: dayjs().format('YYYY-MM'),
});
const vo = reactive({
page: '',
rows: [],
total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
api: Api.system.getData,
watchParameter: true,
parameter: po,
callback: (data) => {
if (data.current === 1) {
vo.rows.length = 0;
}
vo.page = data.page;
vo.total = data.total;
vo.rows = [...vo.rows, ...data.rows];
}
});
</script>
<template>
<!--提现记录-->
<x-nav></x-nav>
<scroll-view
scroll-y
@refresherpulling="initFetchData()"
@scrolltolower="pagination.current++"
class="p-[20rpx] h-[calc(100vh-100rpx)]">
<view class="!flex flex-col gap-[20rpx]">
<view class="bg-[var(--primary-color)] p-[32rpx] rounded-[12rpx] !flex items-center">
<view class="!flex-grow text-[#fff]">
<view class="test-36r font-bold">246.23</view>
<view class="test-24r">该月提现收益</view>
</view>
<view class="!flex-grow text-[#fff]">
<view class="test-36r font-bold">246.23</view>
<view class="test-24r">该月提现收益</view>
</view>
<view class="flex-shrink-0">
<x-date-time v-model:model-value="po.datetime" fields="month">
<view
class="rounded-full bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] !flex items-center gap-[14rpx]">
{{ po.datetime }}
<image class="!w-[18rpx]" mode="widthFix" :src="dropDown"></image>
</view>
</x-date-time>
</view>
</view>
<view class="p-[20rpx] bg-[#fff] rounded-[8rpx] card" v-for="v in vo.rows">
<view class="!flex">
<image class="!size-[80rpx]" mode="aspectFill" :src="ZFBICON"></image>
<view class="!ml-[60rpx] !flex gap-[60rpx]">
<view>
<view class="test-32r font-bold">100.00</view>
<view class="text-[#86909C] test-24r">提现金额</view>
</view>
<view>
<view class="test-32r font-bold">94.00</view>
<view class="text-[#86909C] test-24r">到账金额</view>
</view>
</view>
<view class="!ml-auto">
<x-tag>正在提现</x-tag>
</view>
</view>
<view
class="!mt-[20rpx] py-[10rpx] px-[20rpx] test-24r !flex justify-between items-center bg-[#F2F3F5] rounded-[8rpx]">
<view>提现时间：2024-08-06 12:22</view>
<view>手续费：6%</view>
</view>
</view>
<tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
</view>
</scroll-view>
</template>
<style scoped>
<style lang="scss" scoped>
.card {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
</style>

4
src/scss/global.scss
View File

@@ -64,6 +64,10 @@ $primary-color: #2D5CF6;
font-size: 28rpx;
}
.test-32r {
font-size: 32rpx;
}
.test-36r {
font-size: 36rpx;
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

1
src/static/icons/drop-down.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745213165654" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4679" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M585.246075 875.340272l408.227201-447.966132c57.440818-63.040395 12.824837-164.374669-72.613865-164.374669H104.224378c-85.25807 0-130.054683 101.334274-72.613865 164.374669l408.407832 447.7855c39.016405 42.809667 106.211325 42.809667 145.22773 0.180632z" fill="#165DFF" p-id="4680"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1004 B