Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[优化] 我的钱包页面UI

twodate
邓平艺 4 years ago
parent
a7e34bc4ca
commit
059a80ba7b
3 changed files with 58 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages.json
  2. 7
      pages/center/fans.vue
  3. 67
      pages/center/wallet.vue

3
pages.json
View File

@ -118,7 +118,8 @@
{
"path": "pages/center/wallet",
"style": {
"navigationBarTitleText": "我的钱包"
"navigationBarTitleText": "我的钱包",
"disableScroll": true
}
},
{

7
pages/center/fans.vue
View File

@ -23,8 +23,11 @@
<view class="lf-font-32 text-black1">时空网的内部网友 <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">达人</text></view>
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="tabItem.list.length" :class="{'loading-more-text': tabItem.loadingClass}">{{ tabItem.loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
</view>
</scroll-view>
</view>

67
pages/center/wallet.vue
View File

@ -1,5 +1,6 @@
<template>
<view>
<!-- 钱包余额信息 -->
<view class="wallet-top">
<view class="bg-white wallet-wraptop flex-direction flex justify-around align-center text-center">
<view class="text-black1 text-price1" style="font-size: 72rpx;">2000.48</view>
@ -9,13 +10,21 @@
</view>
</view>
</view>
<!-- tabs -->
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
<view class="lf-font-32" style="width: 50%;border-right: 1px solid rgba(0, 0, 0, 0.1);box-sizing: border-box;" :class="tabIndex ==0?'text-orange':'text-black1'" @click="tabIndex = 0">佣金记录</view>
<view class="lf-font-32" style="width: 50%;" :class="tabIndex ==1?'text-orange':'text-black1'" @click="tabIndex = 1">提取记录</view>
<view class="tab-item" :class="current==index?'text-orange':'text-black1'"
v-for="(item, index) in tab_list" :key="index"
@click="current = index">{{ item.name }}
</view>
</view>
<block v-if="tabIndex == 0">
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom">
<!-- scroll page -->
<block v-if="current == 0">
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}"
:scroll-y="true" :refresher-enabled="true"
:refresher-triggered="isRefresher"
@scrolltolower="onScrolltolower"
@refresherrefresh="onRefresherrefresh">
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="item in 12" :key="item">
<view class="flex align-center text-center justify-between">
<view class="lf-font-36 lf-color-price">-¥10.00</view>
<view class="lf-font-32 text-black1">结余 ¥34.43</view>
@ -27,16 +36,18 @@
</view>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<text v-if="tab_list[0].list.length" :class="{'loading-more-text': tab_list[0].loadingClass}">{{ tab_list[0].loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</scroll-view>
</block>
<block v-else>
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}"
:scroll-y="true" :refresher-enabled="true"
:refresher-triggered="isRefresher"
@scrolltolower="onScrolltolower"
@refresherrefresh="onRefresherrefresh">
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom">
<view class="flex align-center text-center justify-between">
<view class="lf-font-36 lf-color-price">-¥11.00</view>
@ -49,11 +60,9 @@
</view>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<text v-if="tab_list[1].list.length" :class="{'loading-more-text': tab_list[1].loadingClass}">{{ tab_list[1].loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</scroll-view>
</block>
</view>
@ -63,13 +72,30 @@
export default {
data() {
return {
tabIndex: 0,
current: 0,
pageSize: 10,
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
page: 1,
isPage: false
tab_list: [{
name: '佣金记录',
list: [1,2,3,4,5,6,7,8,9],
page: 1,
isPage: false,
loadingClass: false,
loadingText: '已加载全部数据'
},{
name: '提取记录',
list: [1],
page: 1,
isPage: false,
loadingClass: true,
loadingText: '正在加载中'
}],
windowHeight: 0
}
},
onLoad(){
this.windowHeight = uni.getSystemInfoSync().windowHeight;
},
methods: {
// 页面触底，加载下一页
onScrolltolower(){
@ -86,7 +112,16 @@
}
}
</script>
<style scoped>
<style scoped lang="scss">
.tab-item{
font-size: 32rpx;
width: 50%;
box-sizing: border-box;
&:first-child{
border-right: 2rpx solid rgba(0, 0, 0, 0.1);
}
}
.com {
height: 900rpx;
}

Write Preview
Loading…
Cancel
Save