1.14提交
This commit is contained in:
zoujiandong
@@ -1,16 +1,24 @@
|
||||
<template>
|
||||
<!-- <uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的福利"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="180rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar> -->
|
||||
<navBar :title="'我的福利'" />
|
||||
|
||||
<view class="navbox">
|
||||
<view class="status_bar"></view>
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
:title="'我的福利'"
|
||||
@clickLeft="goBack"
|
||||
|
||||
color="#8B2316"
|
||||
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<view class="nav-right" @click="goRules" >
|
||||
规则
|
||||
</view>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</view>
|
||||
<view class="benefits-page">
|
||||
|
||||
|
||||
@@ -48,17 +56,23 @@
|
||||
<scroll-view class="benefits-list" scroll-y="true" :show-scrollbar="false">
|
||||
<view
|
||||
class="benefit-card"
|
||||
|
||||
v-for="(benefit, index) in benefitsList"
|
||||
:key="index"
|
||||
:class="[benefit.type, { 'disabled': !benefit.flag }]"
|
||||
:class="fotmatType(benefit.name)"
|
||||
@click="claimBenefit(benefit)"
|
||||
>
|
||||
<view class="card-title">{{ benefit.title }}</view>
|
||||
<!-- <view class="card-bg">
|
||||
|
||||
</view> -->
|
||||
<view class="card-content">
|
||||
|
||||
<view class="card-content" >
|
||||
<image :src="jifenBgImg" mode="widthFix" class="card-img" v-if="benefit.name == 'jifen'"></image>
|
||||
<image :src="videoImg" mode="widthFix" class="card-img" v-if="benefit.name == 'video'"></image>
|
||||
<image :src="kejianImg" mode="widthFix" class="card-img" v-if="benefit.name == 'kejian'"></image>
|
||||
<image :src="upanImg" mode="widthFix" class="card-img" v-if="benefit.name == 'upan'"></image>
|
||||
<image :src="wanfangImg" mode="widthFix" class="card-img" v-if="benefit.name == 'wanfang'"></image>
|
||||
<image :src="wenxianImg" mode="widthFix" class="card-img" v-if="benefit.name == 'daicha'"></image>
|
||||
<view class="card-details">
|
||||
<view class="left-section">
|
||||
<text class="condition">{{ benefit.left_tip }}</text>
|
||||
@@ -69,6 +83,7 @@
|
||||
<text class="reward-value">{{ benefit.right_result }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="panbox" v-if="benefit.name == 'upan'">知识U盘</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -78,20 +93,50 @@
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="bottom-nav">
|
||||
<view class="nav-item" @click="goPointsDetail">
|
||||
<!-- <up-image :src="jifenImg" width="34rpx" height="34rpx" ></up-image> -->
|
||||
<text class="nav-text">兑换福利卡</text>
|
||||
<up-image :src="jifenImg" width="34rpx" height="34rpx" ></up-image>
|
||||
<text class="nav-text">积分详情</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="gofuliDetail">
|
||||
<up-image :src="fuliImg" width="34rpx" height="34rpx" ></up-image>
|
||||
<text class="nav-text">福利详情</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="goAddPatient">
|
||||
<up-image :src="addImg" width="34rpx" height="34rpx" ></up-image>
|
||||
<text class="nav-text">添加患者</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<unidialog :visible="showDialog" :content="content" @close="showDialog=false" :showCancel="false" @confirm="confirmDialog"></unidialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import jifenImg from "@/static/duihuan.png"
|
||||
import {onShow,onBackPress} from '@dcloudio/uni-app';
|
||||
import docUrl from '@/utils/docUrl.js';
|
||||
onBackPress(() => {
|
||||
plus.runtime.quit();
|
||||
return true;
|
||||
});
|
||||
//import jifenImg from "@/static/duihuan.png"
|
||||
import api from '@/api/api';
|
||||
import unidialog from '@/components/dialog/dialog.vue'
|
||||
import navTo from "@/utils/navTo.js";
|
||||
import navBar from '@/components/navBar/navBar.vue'
|
||||
import fuliImg from "@/static/fulidetail.png"
|
||||
import jifenImg from "@/static/jifendetail.png"
|
||||
import addImg from "@/static/tianjiapatient.png"
|
||||
import jifenBgImg from "@/static/fljifen_big.png"
|
||||
import videoImg from "@/static/flshipin_big.png"
|
||||
import kejianImg from "@/static/flkejian_big.png"
|
||||
import upanImg from "@/static/flupan_big2.png"
|
||||
import wanfangImg from "@/static/flwanfang_big.png"
|
||||
import wenxianImg from "@/static/flwen_big.png"
|
||||
const showDialog = ref(false);
|
||||
const content = ref('肝胆相照平台协助查找文献次数已经用完，谢谢您的支持！');
|
||||
const confirmDialog = () => {
|
||||
showDialog.value = false;
|
||||
}
|
||||
// 当前选中的标签页
|
||||
const activeTab = ref(0);
|
||||
|
||||
@@ -141,13 +186,7 @@
|
||||
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
fail() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
});
|
||||
plus.runtime.quit();
|
||||
};
|
||||
|
||||
const showRules = () => {
|
||||
@@ -156,7 +195,21 @@
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
|
||||
const fotmatType = (name) => {
|
||||
if(name == 'video'){
|
||||
return 'video';
|
||||
}else if(name == 'kejian'){
|
||||
return 'kejian';
|
||||
}else if(name == 'upan'){
|
||||
return 'upan';
|
||||
}else if(name == 'wanfang'){
|
||||
return 'wanfang';
|
||||
}else if(name=='jifen'){
|
||||
return 'jifen';
|
||||
}else if(name=='daicha'){
|
||||
return 'wenxian';
|
||||
}
|
||||
}
|
||||
const switchTab = (index) => {
|
||||
activeTab.value = index;
|
||||
|
||||
@@ -172,42 +225,62 @@
|
||||
};
|
||||
|
||||
const claimBenefit = (benefit) => {
|
||||
if (!benefit.flag) {
|
||||
uni.showToast({
|
||||
title: `需${benefit.num}个新随访`,
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
console.log(benefit);
|
||||
console.log(activeTab.value);
|
||||
if(activeTab.value == 1){
|
||||
if(benefit.name == 'jifen'){
|
||||
navTo({
|
||||
url: '/pages_goods/pointMall/pointMall'
|
||||
});
|
||||
}else if(benefit.name == 'video'){
|
||||
navTo({
|
||||
url: '/pages_app/video/video'
|
||||
});
|
||||
}else if(benefit.name == 'kejian'){
|
||||
navTo({
|
||||
url: '/pages_app/ppt/ppt'
|
||||
});
|
||||
}else if(benefit.name == 'upan'){
|
||||
navTo({
|
||||
url: '/pages_app/buyUpan/buyUpan?restNum='+benefit.num
|
||||
});
|
||||
|
||||
}else if(benefit.name == 'wanfang'){
|
||||
navTo({
|
||||
url: '/pages_app/zhinan/zhinan'
|
||||
});
|
||||
}else if(benefit.name == 'daicha'){
|
||||
if(benefit.num == 0){
|
||||
showDialog.value = true;
|
||||
}else{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: `领取${benefit.title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const goPointsDetail = () => {
|
||||
uni.showToast({
|
||||
title: '积分详情',
|
||||
icon: 'none'
|
||||
});
|
||||
navTo({
|
||||
url: '/pages_app/myPoint/myPoint'
|
||||
})
|
||||
};
|
||||
|
||||
const goBenefitDetail = () => {
|
||||
uni.showToast({
|
||||
title: '福利详情',
|
||||
icon: 'none'
|
||||
});
|
||||
const gofuliDetail = () => {
|
||||
navTo({
|
||||
url: '/pages_app/myPoint/myPoint'
|
||||
})
|
||||
};
|
||||
|
||||
const addPatient = () => {
|
||||
uni.showToast({
|
||||
title: '添加患者',
|
||||
icon: 'none'
|
||||
});
|
||||
const goAddPatient = () => {
|
||||
navTo({
|
||||
url: '/pages_app/myCode/myCode'
|
||||
})
|
||||
};
|
||||
const goRules = () => {
|
||||
navTo({
|
||||
url: '/pages_app/webview/webview?url='+encodeURIComponent(docUrl+'integral/integral_welfare.html')+'&title=福利规则'
|
||||
})
|
||||
};
|
||||
|
||||
const useWelfarePage = () => {
|
||||
api.useWelfarePage().then(res => {
|
||||
if (res.code === '200' && res.data) {
|
||||
@@ -395,8 +468,24 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border:2rpx solid #fff;
|
||||
|
||||
|
||||
&.jifen{
|
||||
border:2rpx solid #ffad17;
|
||||
}
|
||||
&.wenxian{
|
||||
border:2rpx solid #33c966;
|
||||
}
|
||||
&.video{
|
||||
border:2rpx solid #ff951d;
|
||||
}
|
||||
&.kejian{
|
||||
border:2rpx solid #f17dff;
|
||||
}
|
||||
&.upan{
|
||||
border:2rpx solid #40cdc5;
|
||||
}
|
||||
&.wanfang{
|
||||
border:2rpx solid #4aa2fe;
|
||||
}
|
||||
.disabled-text {
|
||||
color: $text-light !important;
|
||||
}
|
||||
@@ -411,11 +500,17 @@
|
||||
|
||||
.card-content {
|
||||
margin-top: 30rpx;
|
||||
background:url("@/static/fljifen_big.png") 0 0 no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
height: 220rpx;
|
||||
min-height: 220rpx;
|
||||
z-index: 1;
|
||||
.card-img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
@@ -424,8 +519,22 @@
|
||||
margin-bottom: 30rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.panbox{
|
||||
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background: #40cdc5;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.card-details {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -435,17 +544,20 @@
|
||||
.right-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
justify-content: center;
|
||||
align-items: center!important;
|
||||
|
||||
|
||||
.condition,
|
||||
.reward-type {
|
||||
font-size: 24rpx;
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 11);
|
||||
}
|
||||
|
||||
.requirement,
|
||||
.reward-value {
|
||||
font-size: 36rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size: 42rpx;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -493,10 +605,11 @@
|
||||
padding: 0 20rpx;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: flex;
|
||||
gap: 8rpx;
|
||||
|
||||
|
||||
.nav-icon {
|
||||
font-size: 40rpx;
|
||||
@@ -504,8 +617,13 @@
|
||||
|
||||
.nav-text {
|
||||
font-size: 32rpx;
|
||||
margin-left: 8rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-right{
|
||||
font-size: 28rpx;
|
||||
color: #8B2316;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<navBar :title="'福利明细'" />
|
||||
|
||||
<view class="welfare-detail-page">
|
||||
<!-- Tab 切换栏 -->
|
||||
<view class="segmented-control">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 1 }"
|
||||
@click="switchTab(1)"
|
||||
>
|
||||
<text class="tab-text">视频下载</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 2 }"
|
||||
@click="switchTab(2)"
|
||||
>
|
||||
<text class="tab-text">课件下载</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 6 }"
|
||||
@click="switchTab(6)"
|
||||
>
|
||||
<text class="tab-text">查找文献</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格头部 -->
|
||||
<view class="table-header">
|
||||
<text class="col reason">原因</text>
|
||||
<text class="col time">时间</text>
|
||||
<text class="col count">次数</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表数据区域 -->
|
||||
<scroll-view
|
||||
class="table-body"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="onLoadMore"
|
||||
:lower-threshold="100"
|
||||
>
|
||||
<view
|
||||
class="row"
|
||||
v-for="(item, index) in filteredList"
|
||||
:key="index"
|
||||
>
|
||||
<text class="cell reason">{{ item.reason }}</text>
|
||||
<text class="cell time">{{ item.time }}</text>
|
||||
<text class="cell count" >{{ item.count }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view v-if="!loading && filteredList.length === 0" class="empty-wrap">
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loading" class="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多数据提示 -->
|
||||
<view v-if="isLastPage && filteredList.length > 0" class="no-more">
|
||||
<text>没有更多数据了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import navBar from '@/components/navBar/navBar.vue';
|
||||
import api from '@/api/api';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 当前选中的 Tab（0: 视频下载, 1: 课件下载, 2: 查找文献）
|
||||
const activeTab = ref(1);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
// 福利明细列表数据
|
||||
const welfareList = ref([]);
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
const refreshing = ref(false);
|
||||
const isLastPage = ref(false);
|
||||
|
||||
// 根据 activeTab 过滤后的列表数据
|
||||
const filteredList = computed(() => {
|
||||
if (!welfareList.value || welfareList.value.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const typeMap = {
|
||||
0: '视频下载',
|
||||
1: '课件下载',
|
||||
2: '查找文献'
|
||||
};
|
||||
|
||||
const currentType = typeMap[activeTab.value];
|
||||
return welfareList.value;
|
||||
});
|
||||
|
||||
// Tab 切换
|
||||
const switchTab = (index) => {
|
||||
if (activeTab.value === index) return;
|
||||
activeTab.value = index;
|
||||
page.value = 1;
|
||||
pageSize.value = 10;
|
||||
welfareList.value = [];
|
||||
isLastPage.value = false;
|
||||
loading.value = false;
|
||||
refreshing.value = false;
|
||||
// 切换 Tab 时重新加载数据
|
||||
loadWelfareDetail();
|
||||
};
|
||||
|
||||
// 加载福利明细数据
|
||||
const loadWelfareDetail = () => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
console.log(api);
|
||||
// 调用 API 获取数据
|
||||
api.welfareList({
|
||||
type: activeTab.value,
|
||||
page: page.value,
|
||||
pageSize: pageSize.value
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code ==1) {
|
||||
// 兼容两种数据结构：直接数组或包含 list 的对象
|
||||
let rawList = [];
|
||||
if (Array.isArray(res.data)) {
|
||||
rawList = res.data;
|
||||
isLastPage.value = false;
|
||||
} else if (res.data.list && Array.isArray(res.data.list)) {
|
||||
rawList = res.data.list;
|
||||
isLastPage.value = !!res.data.isLastPage;
|
||||
} else {
|
||||
if (page.value === 1) {
|
||||
welfareList.value = [];
|
||||
}
|
||||
isLastPage.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 将接口返回的数据映射到页面需要的格式
|
||||
const formattedList = rawList.map(item => {
|
||||
let timeStr = item.create_date || item.time || '';
|
||||
// 使用 dayjs 格式化日期，只显示年月日
|
||||
if (timeStr) {
|
||||
timeStr = dayjs(timeStr).format('YYYY-MM-DD');
|
||||
}
|
||||
return {
|
||||
reason: item.name || item.reason || '',
|
||||
time: timeStr,
|
||||
count: item.count_num ? parseInt(item.count_num) : (item.count || 0)
|
||||
};
|
||||
});
|
||||
|
||||
// 如果是第一页或刷新，替换数据；否则追加数据
|
||||
if (page.value === 1 || refreshing.value) {
|
||||
welfareList.value = formattedList;
|
||||
} else {
|
||||
welfareList.value = [...welfareList.value, ...formattedList];
|
||||
}
|
||||
} else {
|
||||
if (page.value === 1) {
|
||||
welfareList.value = [];
|
||||
}
|
||||
isLastPage.value = false;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取福利明细失败:', err);
|
||||
if (page.value === 1) {
|
||||
welfareList.value = [];
|
||||
}
|
||||
uni.showToast({
|
||||
title: '获取福利明细失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
refreshing.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = () => {
|
||||
refreshing.value = true;
|
||||
page.value = 1;
|
||||
isLastPage.value = false;
|
||||
loadWelfareDetail();
|
||||
};
|
||||
|
||||
// 上拉加载更多
|
||||
const onLoadMore = () => {
|
||||
if (isLastPage.value || loading.value) return;
|
||||
page.value += 1;
|
||||
loadWelfareDetail();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadWelfareDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 变量定义
|
||||
$bg-color: #f5f6f7;
|
||||
$text-primary: #333333;
|
||||
$text-secondary: #666666;
|
||||
$text-light: #999999;
|
||||
$border-color: #e5e5e5;
|
||||
$white: #ffffff;
|
||||
$theme-color: #8B2316;
|
||||
$table-header-bg: #8B2316;
|
||||
$divider-color: #cccccc;
|
||||
$nav-height: 180rpx;
|
||||
$segmented-height: 80rpx;
|
||||
$table-header-height: 70rpx;
|
||||
|
||||
.welfare-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: $bg-color;
|
||||
padding-top: $nav-height;
|
||||
}
|
||||
|
||||
// Tab 切换栏
|
||||
.segmented-control {
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar-height) + 44px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
height: $segmented-height;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: $theme-color;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background-color: $divider-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格头部
|
||||
.table-header {
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar-height) + 44px + $segmented-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background: $table-header-bg;
|
||||
color: $white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
height: $table-header-height;
|
||||
box-sizing: border-box;
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&.reason {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.time {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.count {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表数据区域
|
||||
.table-body {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(var(--status-bar-height) + 44px + $segmented-height + $table-header-height);
|
||||
height: calc(100vh - var(--status-bar-height) - 44px - $segmented-height - $table-header-height);
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 列表行
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
|
||||
.cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&.reason {
|
||||
text-align: left;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
&.time {
|
||||
text-align: center;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
&.count {
|
||||
text-align: right;
|
||||
color: $text-primary;
|
||||
|
||||
&.negative {
|
||||
color: #e34d4d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据状态
|
||||
.empty-wrap {
|
||||
padding-top: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #bdbdbd;
|
||||
|
||||
.empty-text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading, .no-more {
|
||||
text-align: center;
|
||||
color: $text-light;
|
||||
padding: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user