添加页面
This commit is contained in:
wangxiaowei
133
src/bundle/finance/finance.vue
Normal file
133
src/bundle/finance/finance.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#F6F7F8"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="home-bg pb-80rpx">
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar left-arrow safeAreaInsetTop title="财务管理" :bordered="false" custom-style="background-color: transparent !important;" @click-left="router.navigateBack()"></wd-navbar>
|
||||
</view>
|
||||
|
||||
<view :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<view class="relative mx-30rpx mt-16rpx">
|
||||
<wd-img width="692rpx" height="334rpx" :src="`${OSS}images/store/finance/image1.png`" mode="aspectFit" />
|
||||
<view class="absolute top-50rpx left-40rpx">
|
||||
<view class="font-400 text-26rpx text-[#B4CEFF] leading-36rpx">经营资产</view>
|
||||
<view class="mt-20rpx font-bold text-36rpx text-[#fff] leading-34rpx">5,662.46</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-around w-100% absolute bottom-40rpx left-0 px-40rpx">
|
||||
<view class="flex flex-col items-center justify-start">
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">已提现</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">3,662.46</view>
|
||||
</view>
|
||||
<view class="h-98rpx">
|
||||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||||
</view>
|
||||
<view class="flex flex-col items-center justify-start">
|
||||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">待提现</view>
|
||||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-14rpx">3,662.46</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-[#303133]">
|
||||
<text class="text-44rpx">8</text>
|
||||
<text class="text-32rpx">月</text>
|
||||
</view>
|
||||
<view class="mt-16rpx">
|
||||
<wd-icon name="fill-arrow-down" size="40rpx" color="#BFC2CC"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-24rpx text-[#606266] leading-34rpx">
|
||||
收入￥5,562.46
|
||||
</view>
|
||||
|
||||
<view class="mt-20rpx">
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Finance.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="bg-white rounded-16rpx px-16rpx py-28rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="line-1 w-480rpx font-bold text-30rpx text-[#303133] leading-42rpx">【榻榻米双人包间】惬意茶室商务...</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#FF5951] font-bold text-30rpx leading-42rpx">+ 181.35</view>
|
||||
<wd-icon name="arrow-right" size="40rpx" color="#000"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-12rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="rounded-4rpx w-60rpx text-center text-[#40AE36] border-2rpx border-solid border-[#40AE36] text-22rpx pb-4rpx">团购</view>
|
||||
<view class="text-24rpx text-[#606266] leading-34rpx ml-10rpx">上海.茶址24小时智能茶室（中新店）</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-14rpx text-24rpx text-[#909399] leading-34rpx">
|
||||
核销时间：2025-08-05 19:09:52
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@/utils/tools'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
// mescroll相关
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const list = ref<Array<any>>([]) // 茶艺师列表
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
const Finance = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
|
||||
// getTeaSpecialistOrderList(filter).then((res) => {
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||||
// list.value = list.value.concat(curPageData) //追加新数据
|
||||
// mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||||
// }).catch(() => {
|
||||
mescroll.endErr() // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
// background: linear-gradient( 176deg, #D2EDFF 0%, rgba(119,199,255,0) 100%);
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: linear-gradient( 176deg, #D2EDFF 0%, rgba(119,199,255,0) 100%);
|
||||
// background-image: url(#{$OSS}images/store/finance/image1.png);
|
||||
background-size: 100% 588rpx;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user