意思意思

DESKTOP-NC155IP\vm

2022-11-15 83c81464327e274acb9d0694536a88d9aa74be30

 src/page/transferRecord/compontents/recharge-list.vue

@@ -1,13 +1,10 @@
<template>
  <div>
    <div v-if="list.length<=0" class="empty text-center">
      暂无充值信息!
      {{ $t('hj228') }}
    </div>
    <div v-else>
      <ul
        class="table-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
      <ul class="table-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li class="list-body" v-for="(item) in list" :key="item.key">
          <div class="order-info-box">
@@ -18,18 +15,21 @@
                        <i v-if="item.payChannel == '微信' " style="color:#1296db;" class="iconfont icon-weixin"></i>
                        <i v-if="item.payChannel == 1 || item.payChannel == '对公转账'" style="color:#1296db;"
                           class="iconfont icon-yinlian"></i> -->
                        {{item.payChannel == 0?'支付宝':item.payChannel == 1?'对公转账':item.payChannel}}
                {{ item.payChannel == 0 ? $t('hj229') : item.payChannel == 1 ? $t('hj230') : item.payChannel }}
                    </span>
              <span class="payNumber">充值：<span :style="{color:$state.theme =='red'?'#BB1815':''}">￥{{item.payAmt}}</span></span>
              <span class="payNumber">{{$t('hj172')}}：<span :style="{ color: $state.theme == 'red' ? '#BB1815' : '' }">￥{{
                  item.payAmt
              }}</span></span>
              <span
                :class="item.orderStatus == 1?'green pull-right':item.orderStatus == 2?'red pull-right':'red pull-right'">
                        <i v-if="item.orderStatus == 1" class="iconfont icon-tongguo4 animated bounceIn"></i>
                        <i v-if="item.orderStatus==0" class="iconfont icon-dengdai animated bounceInDown"></i>
                        <i v-if="item.orderStatus == 2" class="iconfont icon-failure animated bounceInDown"></i>
                        <i v-if="item.orderStatus == 3"
                           class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
                <i v-if="item.orderStatus == 3" class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
                        <!-- 1 => 成功 2 失败 3取消 4 等待 -->
                        {{item.orderStatus == 1?'充值成功':item.orderStatus == 2?'充值失败':item.orderStatus == 3?'取消充值':'审核中'}}
                {{ item.orderStatus == 1 ? $t('hj231') : item.orderStatus == 2 ? $t('hj232') : item.orderStatus == 3 ? $t('hj233') :
                    $t('hj202')
                }}
                        
                    </span>
              <!-- <span class="secondary ">123456789</span> -->
@@ -48,8 +48,8 @@
                        </span>
              </p> -->
              <div class="info-mix ">
                <span class="info-item">订单号:<b>{{item.orderSn}}</b></span>
                <span class="info-item">时间:
                <span class="info-item">{{$t('hj234')}}:<b>{{ item.orderSn }}</b></span>
                <span class="info-item">{{$t('hj80')}}:
                    <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
                    <b v-else></b>
                </span>
@@ -74,10 +74,10 @@
      </ul>
      <div v-show="loading" class="load-all text-center">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
        {{$t('hj235') }}
      </div>
      <div v-show="!loading" class="load-all text-center">
        已全部加载
        {{$t('hj236') }}
      </div>
    </div>
  </div>
@@ -175,13 +175,16 @@
  .payNumber {
    font-size: 0.24rem;
    font-weight: bold;

    span {
      font-family: lightnumber;
    }
  }

  /deep/.order-info-box {
    background-color: #16171d;
    padding: 0;

    .main{
      padding: 0.05rem .15rem;
      letter-spacing:0;
@@ -189,52 +192,66 @@
      margin-right: .16rem;
      font-size: 0.24rem;
      border-radius: 3px;

      &.ali {
        background-color: #138EB4;
      }

      &.cart {
        background-color: #7266BA;
      }

      &.wechat {
        background-color: #009C46;
      }
    }

    .order-info {
      border-bottom: 1px solid #2e3237;
      padding-bottom: .3rem;
    }

    .order-title{
      border-bottom: none;
    }

    .info-mix{
      display: flex;
      font-size: .2rem;
      width: 100%;

      .info-item {
        margin-right: .2rem;
        color: #fff8;
      }
    }
  }

  .red-theme {
    .list-body {
      background-color: #fff;
    }

    .order-info-box {
      background-color: #fff;

      .order-info {
        border-bottom-color: #e9e9e9;
      }
    }

    .order-info-box .main.cart {
      color: #fff;
    }

    .payNumber {
      color: #000;
    }

    .order-info-box .info-mix .info-item{
      color: #666666;
    }

    .load-all{
      background-color: #fff;
    }