feat(score): 添加积分页面功能及样式

- 新增积分页面布局和交互逻辑
- 添加自定义图标样式文件
- 实现月份选择器和标签切换功能
- 增加文本斜体样式
This commit is contained in:
maclien
2025-06-23 23:40:14 +08:00
parent eba05ee109
commit e840e6c00b
6 changed files with 108 additions and 4 deletions
+2 -1
View File
@@ -11,4 +11,5 @@
.text-shadow{text-shadow:1rpx 3rpx 3rpx rgba(0,0,0,.8);}
.text-spacing-10{letter-spacing:10rpx}
.space-nowrap{white-space:nowrap;}
.space-normal{white-space:normal;}
.space-normal{white-space:normal;}
.text-italic{font-style: italic;}
+1
View File
@@ -11,3 +11,4 @@
@import "base/padding.wxss";
@import "base/radius.wxss";
@import "base/animate.wxss";
@import "custom/customIcon.wxss";
+21
View File
@@ -0,0 +1,21 @@
.custom-icon{
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.custom-icon-filtersearch{
width: 32rpx;
height: 32rpx;
background-image: url('https://img.liche.cn/lichebao/icon-filtersearch.png');
}
.custom-icon-logout{
width: 32rpx;
height: 32rpx;
background-image: url('https://img.liche.cn/lichebao/icon-logout.png');
}
.custom-icon-scancode{
width: 32rpx;
height: 32rpx;
background-image: url('https://img.liche.cn/lichebao/icon-scancode.png');
}
+29 -1
View File
@@ -1,11 +1,33 @@
// pages/customer/score/index.js
import _ from '../../../commons/js/commons'
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: _.config.imgUrl,
cur_month: '',
cur_tab_index: 0,
tab_list: [
{
name: '全部',
id: 1
},
{
name: '充值',
id: 2
},
{
name: '消耗',
id: 3
}
],
list: [],
loading: true,
end: false,
noData: false
},
/**
@@ -62,5 +84,11 @@ Page({
*/
onShareAppMessage() {
},
bindDateChange(e){
this.setData({
cur_month: e.detail.value
})
}
})
+51 -1
View File
@@ -1,2 +1,52 @@
<!--pages/customer/score/index.wxml-->
<text>pages/customer/score/index.wxml</text>
<view class="container" style="min-height:100vh; overflow:hidden;">
<view class="text-center pt50 pb50">
<view class="font-60 text-bold text-italic color-ff0000">8082</view>
<view class="color-444 font-28 mt-20">余额</view>
</view>
<view class="ml30 mr30 pb40">
<view class="bg-fff ulib-r10 box-shadow-000-10-10 pb30">
<view class="relative fn-flex text-center">
<view class="fn-flex-item pt30 pb30">
<view class="font-40">8593</view>
<view class="font-26 color-666 mt5">充值</view>
</view>
<view class="fn-flex-item pt30 pb30">
<view class="font-40">8593</view>
<view class="font-26 color-666 mt5">消耗</view>
</view>
<view
class="bg-picker absolute top-0 box-center bg-no-repeat bg-size-cover bg-pos-cente font-26"
style="width:230rpx;height:50rpx;line-height:50rpx;"
>
<picker mode="date" fields="month" value="{{cur_month}}" start="2015-09" end="2026-09" bindchange="bindDateChange">
<view class="color-666"><text class="iconfont icon-qianhetong"></text><text class="ml10">{{cur_month||'请选择月份'}}</text></view>
</picker>
</view>
</view>
<view class="pl30 pr30 pt30">
<view class="fn-flex font-28">
<block wx:for="{{tab_list}}" wx:key="index">
<view class="pl10 pr10 pt5 pb5 ulib-r10 mr25 transition-all {{index==cur_tab_index?'bg-333 color-fff':'bg-f8 color-333'}}">{{item.name}}</view>
</block>
</view>
<view class="mt20">
<block wx:for="{{10}}" wx:key="index">
<view class="bbs-1-eb pt20 pb20 fn-flex font-26">
<view class="wp25 color-ff0000 color-36afa2">{{'+40'}}</view>
<view class="fn-flex-item text-center">{{'L:138****1234'}}</view>
<view class="wp40 text-right">{{'2025.02.25'}}</view>
</view>
</block>
</view>
<lcb-listmore isLoading='{{loading}}' isEnd='{{end}}' isNoData='{{noData}}'></lcb-listmore>
</view>
</view>
</view>
</view>
+4 -1
View File
@@ -1 +1,4 @@
/* pages/customer/score/index.wxss */
/* pages/customer/score/index.wxss */
.bg-picker{
}