|
|
@@ -0,0 +1,664 @@
|
|
|
+<template>
|
|
|
+ <view class="container account clearfix">
|
|
|
+ <au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
|
|
|
+ <view class="account-header">
|
|
|
+ <view class="h-account" :style="{paddingTop:CustomBar+'px',backgroundImage: 'url('+account_bg+')'}">
|
|
|
+ <view class="m-account">
|
|
|
+ <view class="m-m money">
|
|
|
+ <text class="m-t b">{{showIndexOfMoney}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="m-m title">
|
|
|
+ <text class="m-p">可用数量</text>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-tishi" @click="showAccounExp"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-calendar">
|
|
|
+ <!-- 插入模式 切换年月-->
|
|
|
+ <uni-calendar :selected="infoData.selected" @monthSwitch="monthSwitch" />
|
|
|
+ </view>
|
|
|
+ <view class="h-typeTab clearfix">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in navList" :key="index"
|
|
|
+ class="nav-item"
|
|
|
+ :class="{current: tabCurrentIndex === index}"
|
|
|
+ @click="tabClick(index)"
|
|
|
+ >
|
|
|
+ {{item.text}}
|
|
|
+ <view class="line"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- @scrolltolower="toLower" -->
|
|
|
+ <scroll-view class="h-swiper-content" scroll-y :style="{paddingTop:CustomBar+234+'px'}">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <view v-if="isEmpty" class="empty-account">
|
|
|
+ <image class="empty-account-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6ADg5RAABQ9EmRCGk830.png" mode="aspectFit"></image>
|
|
|
+ <text class="error-text">{{errorText}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 余额明细列表 -->
|
|
|
+ <view v-else class="list-account">
|
|
|
+ <view v-for="(item,index) in accountList" :key="index" class="list-item">
|
|
|
+ <view class="list-t">
|
|
|
+ <view class="t-t">{{cheakType(item.balanceType)}}</view>
|
|
|
+ <view class="t-t bold" :style="{color:item.type == '1' ? '#ff2a2a' : '#15C47A'}">
|
|
|
+ <text class="txt">{{item.type =='1'? '+' : '-'}}</text>
|
|
|
+ <text class="txt">￥{{item.amount}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-b">
|
|
|
+ <view class="t-t">{{item.addDate}}</view>
|
|
|
+ <view class="t-t">{{item.type =='1'? '收入' : '支出'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="showAccounExp" :class="[isShowAccounExp == true ? 'show':'hide']" @tap="hideAccounExp">
|
|
|
+ <image src="https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SAZeZlAA2oDvspRRU204.png" mode=""></image>
|
|
|
+ <text class="iconfont icon-close" @click="hideAccounExp"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
+ import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
|
|
|
+ var date = new Date();
|
|
|
+ export default{
|
|
|
+ components: {
|
|
|
+ uniCalendar,
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ nvabarData: { //顶部自定义导航
|
|
|
+ showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 0,
|
|
|
+ title: '采美豆明细', // 导航栏 中间的标题
|
|
|
+ haveBack:true,
|
|
|
+ textColor:'#ffffff',
|
|
|
+ textLeft:this.$store.state.isIphone,
|
|
|
+ },
|
|
|
+ account_bg:'https://img.caimei365.com/group1/M00/03/D0/Cmis21-PpUqAbubBAADf1kTyhjs098.png',
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ year: date.getFullYear(), //年
|
|
|
+ month: date.getMonth()+1, //月
|
|
|
+ userID: '', //用户ID
|
|
|
+ pageNum:1, //页数
|
|
|
+ pageSize:10, //加载条数
|
|
|
+ balanceType: '', //查询余额类型
|
|
|
+ showIndexOfMoney:20000,
|
|
|
+ ableUserMoney:58656.65, //可用余额
|
|
|
+ balanceTypeText:'', //根据类型显示文字
|
|
|
+ tabCurrentIndex: 0, //标签选择索引
|
|
|
+ infoData: {selected: []}, //日期选择
|
|
|
+ accountList: [], //余额列表
|
|
|
+ isShowAccounExp:false, //控制明细说明文字显示
|
|
|
+ isRefreshing:false,
|
|
|
+ isNomore:false,
|
|
|
+ isEmpty:false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ errorText:'本月没有任何余额收支记录',
|
|
|
+ navList: [
|
|
|
+ {state: 0,text: '全部'},
|
|
|
+ {state: 1,text: '收入'},
|
|
|
+ {state: 2,text: '支出'},
|
|
|
+ ],
|
|
|
+ isCheckObject:{
|
|
|
+ 0:['','本月没有任何余额收支记录'],
|
|
|
+ 1:[1, '本月没有余额收入记录！'],
|
|
|
+ 2:[2, '本月没有余额支出记录！'],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getAccountInitData(this.tabCurrentIndex,this.year,this.month)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getAccountInitData(index,year,month){//获取余额明细数据列表
|
|
|
+ Object.keys(this.isCheckObject).forEach(key => {
|
|
|
+ if (+key === +index) {
|
|
|
+ this.balanceType = this.isCheckObject[key][0]
|
|
|
+ this.errorText = this.isCheckObject[key][1]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$api.getStorage().then((resolve) =>{
|
|
|
+ this.userID =resolve.userId ? resolve.userId : 0
|
|
|
+ /**
|
|
|
+ * @余额明细初始化加载 仅加载第一页码
|
|
|
+ * @param：type(查询余额类型:0全部,1收入,2支出)
|
|
|
+ * @param：year(查询年份)
|
|
|
+ * @param：month(查询月份)
|
|
|
+ * @param：index(页码数)
|
|
|
+ * @param：pageSize(每页条数)
|
|
|
+ * @param：userId(用户ID)
|
|
|
+ */
|
|
|
+ this.UserService.GetAccountInfo(
|
|
|
+ {
|
|
|
+ year:year,
|
|
|
+ month:month,
|
|
|
+ userId:this.userID,
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ type:this.balanceType,
|
|
|
+ })
|
|
|
+ .then(response =>{
|
|
|
+ let infoData = response.data
|
|
|
+ this.initAbleUserMoney(infoData.ableUserMoney)
|
|
|
+ let resultsData = infoData.pageDate.results
|
|
|
+ this.hasNextPage = infoData.pageDate.hasNextPage;
|
|
|
+ if(resultsData && resultsData.length > 0){
|
|
|
+ this.isEmpty = false;
|
|
|
+ this.accountList = [...resultsData];
|
|
|
+ }else{
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ if(this.accountList.length < 2){
|
|
|
+ this.pullUpOn = true
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData(index,year,month){//上拉加载
|
|
|
+ this.UserService.GetAccountInfo(
|
|
|
+ {
|
|
|
+ year:year,
|
|
|
+ month:month,
|
|
|
+ userId:this.userID,
|
|
|
+ pageNum:this.pageNum+=1,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ type:this.balanceType,
|
|
|
+ })
|
|
|
+ .then(response =>{
|
|
|
+ let infoData = response.data
|
|
|
+ this.initAbleUserMoney(infoData.ableUserMoney)
|
|
|
+ let resultsData = infoData.pageDate.results
|
|
|
+ this.hasNextPage = infoData.pageDate.hasNextPage;
|
|
|
+ this.accountList = this.accountList.concat(resultsData)
|
|
|
+ this.pullFlag = false;// 防上拉暴滑
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.loadding = false
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initAbleUserMoney(money){//拆分金额并转千分位格式显示
|
|
|
+ if(money == 0){
|
|
|
+ this.showIndexOfMoney ='0';
|
|
|
+ this.smallMoney=".00"
|
|
|
+ }else{
|
|
|
+ this.ableUserMoney = this.$api.FormatMoney(money) ;
|
|
|
+ let i = this.ableUserMoney.toString().lastIndexOf('.');
|
|
|
+ if(i==-1){
|
|
|
+ this.showIndexOfMoney=this.$api.FormatMoney( this.ableUserMoney)
|
|
|
+ this.smallMoney=".00"
|
|
|
+ }else{
|
|
|
+ this.smallMoney = this.ableUserMoney.toString().substring(i);
|
|
|
+ this.showIndexOfMoney= this.$api.FormatMoney(this.ableUserMoney.toString().substring(0,i))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tabClick(index){//tab点击
|
|
|
+ this.tabCurrentIndex = index;
|
|
|
+ this.pageNum = 1
|
|
|
+ this.accountList = []
|
|
|
+ this.pullUpOn = true //隐藏
|
|
|
+ this.getAccountInitData(this.tabCurrentIndex,this.year,this.month);
|
|
|
+ },
|
|
|
+ bindDateChange: function(e) {
|
|
|
+ this.date = e.target.value
|
|
|
+ },
|
|
|
+ monthSwitch(e) {
|
|
|
+ this.year = e.year;
|
|
|
+ this.month = e.month;
|
|
|
+ this.getAccountInitData(this.tabCurrentIndex,this.year,this.month);
|
|
|
+ },
|
|
|
+ cheakType(type){
|
|
|
+ let typeTextHtml,
|
|
|
+ typeObject={
|
|
|
+ 1:'余额抵扣',
|
|
|
+ 2:'多收退款到余额',
|
|
|
+ 3:'申请退款',
|
|
|
+ 4:'余额充值',
|
|
|
+ 5:'余额提现',
|
|
|
+ 6:'订金订单充值',
|
|
|
+ 7:'余额订单充值',
|
|
|
+ 8:'订金订单退款',
|
|
|
+ 9:'余额订单退款'
|
|
|
+ };
|
|
|
+ Object.keys(typeObject).forEach(function(key){
|
|
|
+ if(key == type){
|
|
|
+ typeTextHtml = typeObject[key]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return typeTextHtml;
|
|
|
+ },
|
|
|
+ hanldNavigateBack(){
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showAccounExp(){
|
|
|
+ this.isShowAccounExp = true
|
|
|
+ },
|
|
|
+ hideAccounExp(){
|
|
|
+ this.isShowAccounExp = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData(this.tabCurrentIndex,this.year,this.month)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {//下拉刷新
|
|
|
+ this.getAccountInitData(this.tabCurrentIndex,this.year,this.month)
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // this.accountList = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+page, .container{
|
|
|
+ background: #FFFFFF;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.account{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.account-header{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 998;
|
|
|
+}
|
|
|
+.h-account{
|
|
|
+ width: 100%;
|
|
|
+ height: 258rpx;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.h-calendar{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.m-account{
|
|
|
+ width: 100%;
|
|
|
+ height: 258rpx;
|
|
|
+ padding:50rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .icon-tishi{
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 20rpx;
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 74rpx;
|
|
|
+ }
|
|
|
+ .m-m{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ .m-p{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .money{
|
|
|
+ height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ .m-t{
|
|
|
+ font-size:58rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 90rpx;
|
|
|
+ &.b{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.s{
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.h-swiper{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ .uni-input{
|
|
|
+ flex: 8;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .iconfont{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.h-typeTab{
|
|
|
+ width: 702rpx;
|
|
|
+ padding:0 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ .nav-item{
|
|
|
+ width: 33.3%;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height:40rpx;
|
|
|
+ padding: 26rpx 0 22rpx 0;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ float: left;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .line{
|
|
|
+ width: 70rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10rpx;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -35rpx;
|
|
|
+ }
|
|
|
+ &.current{
|
|
|
+ color: $color-system;
|
|
|
+ .line{
|
|
|
+ background-color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.h-swiper-content{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 478rpx);
|
|
|
+ position: relative;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .list-account{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .icon-jiazai{
|
|
|
+ color: #666666;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .loading {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ &-no .line{
|
|
|
+ width: 30%;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ &:before{
|
|
|
+ content: "";
|
|
|
+ width: 80rpx;
|
|
|
+ height: 1px;
|
|
|
+ background: #999999;
|
|
|
+ position: absolute;
|
|
|
+ left: -50rpx;
|
|
|
+ top: 18rpx;
|
|
|
+ }
|
|
|
+ &:after{
|
|
|
+ content: "";
|
|
|
+ width: 80rpx;
|
|
|
+ height: 1px;
|
|
|
+ background: #999999;
|
|
|
+ position: absolute;
|
|
|
+ right: -50rpx;
|
|
|
+ top: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1px solid #EBEBEB;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .list-t{
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ .t-t{
|
|
|
+ flex: 1;
|
|
|
+ &:nth-child(1){
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ &.bold{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-b{
|
|
|
+ height: 46rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
+ font-size:$font-size-28;;
|
|
|
+ color: $text-color;
|
|
|
+ display: flex;
|
|
|
+ .t-t{
|
|
|
+ flex: 1;
|
|
|
+ color: #9aa5b5;
|
|
|
+ &:nth-child(1){
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .txt{
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ &.bold{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.showAccounExp{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ background: rgba(0,0,0,.5);
|
|
|
+ z-index: 999;
|
|
|
+ image{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1052rpx;
|
|
|
+ }
|
|
|
+ .icon-close{
|
|
|
+ position: absolute;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size:60rpx ;
|
|
|
+ bottom: 15%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.showAccounExp.show{
|
|
|
+ top: 0;
|
|
|
+ opacity: 1;
|
|
|
+ animation:rundtop 0.3s;
|
|
|
+}
|
|
|
+.showAccounExp.hide{
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ animation:rundbottom 0.3s;
|
|
|
+}
|
|
|
+@keyframes rundtop{
|
|
|
+ 0%{top: 100%;opacity: 0;}
|
|
|
+ 100%{top:0;opacity: 1;}
|
|
|
+}
|
|
|
+@keyframes rundbottom{
|
|
|
+ 0%{top: 0;opacity: 1;}
|
|
|
+ 100%{top:100%;opacity: 0;}
|
|
|
+}
|
|
|
+/*空列表显示样式*/
|
|
|
+.empty-account {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ background: $bg-color;
|
|
|
+ min-height: 800rpx;
|
|
|
+ &-image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 158rpx;
|
|
|
+ }
|
|
|
+ .error-text{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper-box{
|
|
|
+ min-height: 750rpx;
|
|
|
+}
|
|
|
+.list-scroll-content{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.uni-swiper-item{
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.load1,
|
|
|
+.load2,
|
|
|
+.load3 {
|
|
|
+ height: 24px;
|
|
|
+ width: 24px
|
|
|
+}
|
|
|
+
|
|
|
+.load2 {
|
|
|
+ transform: rotate(30deg)
|
|
|
+}
|
|
|
+
|
|
|
+.load3 {
|
|
|
+ transform: rotate(60deg)
|
|
|
+}
|
|
|
+
|
|
|
+.load1 view:nth-child(1) {
|
|
|
+ animation-delay: 0s
|
|
|
+}
|
|
|
+
|
|
|
+.load2 view:nth-child(1) {
|
|
|
+ animation-delay: .13s
|
|
|
+}
|
|
|
+
|
|
|
+.load3 view:nth-child(1) {
|
|
|
+ animation-delay: .26s
|
|
|
+}
|
|
|
+
|
|
|
+.load1 view:nth-child(2) {
|
|
|
+ animation-delay: .39s
|
|
|
+}
|
|
|
+
|
|
|
+.load2 view:nth-child(2) {
|
|
|
+ animation-delay: .52s
|
|
|
+}
|
|
|
+
|
|
|
+.load3 view:nth-child(2) {
|
|
|
+ animation-delay: .65s
|
|
|
+}
|
|
|
+
|
|
|
+.load1 view:nth-child(3) {
|
|
|
+ animation-delay: .78s
|
|
|
+}
|
|
|
+
|
|
|
+.load2 view:nth-child(3) {
|
|
|
+ animation-delay: .91s
|
|
|
+}
|
|
|
+
|
|
|
+.load3 view:nth-child(3) {
|
|
|
+ animation-delay: 1.04s
|
|
|
+}
|
|
|
+
|
|
|
+.load1 view:nth-child(4) {
|
|
|
+ animation-delay: 1.17s
|
|
|
+}
|
|
|
+
|
|
|
+.load2 view:nth-child(4) {
|
|
|
+ animation-delay: 1.3s
|
|
|
+}
|
|
|
+
|
|
|
+.load3 view:nth-child(4) {
|
|
|
+ animation-delay: 1.43s
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes load {
|
|
|
+ 0% {
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: .2
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
