zzzz
2024-04-02 ab0704f2238e9159d13c66a19e830bcb249b36b9
src/page/user/compontents/recharge-list.vue
@@ -1,75 +1,81 @@
<template>
  <div>
    <div v-if="list.length<=0" class="empty text-center">
      暂无充值信息!
  <div style="padding-bottom: 100px">
    <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"
        infinite-scroll-distance="10">
        <li class="list-body" v-for="(item) in list" :key="item.key">
        infinite-scroll-distance="10"
      >
        <li class="list-body" v-for="item in list" :key="item.key">
          <div class="order-info-box">
            <div class="order-title">
                    <span :class="['main',item.payChannel == 0?'ali':item.payChannel == 1?'cart':'wechat']">
                        <!-- <i v-if="item.payChannel == 0 || item.payChannel == '支付宝'" style="color:#1296db;"
                           class="iconfont icon-zhifubao"></i>
                        <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}}
                    </span>
              <span class="payNumber">充值:<span :style="{color:$state.theme =='red'?'#BB1815':''}">¥{{item.payAmt}}</span></span>
              <span :class="['main', 'wechat']">
                {{ item.payChannel }}
              </span>
              <span class="payNumber">
                {{ $t("hj172") }}:
                <span
                  :style="{ color: $state.theme == 'red' ? '#BB1815' : '' }"
                >
                  {{ item.channelName }} {{ 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>
                        <!-- 1 => 成功 2 失败 3取消 4 等待 -->
                        {{item.orderStatus == 1?'充值成功':item.orderStatus == 2?'充值失败':item.orderStatus == 3?'取消充值':'审核中'}}
                    </span>
              <!-- <span class="secondary ">123456789</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>
                <!-- 1 => 成功 2 失败 3取消 4 等待 -->
                {{
                  item.orderStatus == 1
                    ? $t("hj231")
                    : item.orderStatus == 2
                    ? $t("hj232")
                    : item.orderStatus == 3
                    ? $t("hj233")
                    : $t("hjshz")
                }}
              </span>
            </div>
            <div class="order-info">
              <!-- <p class="clearfix">
                <span class="col-xs-5">{{item.orderDesc}}</span>
              </p> -->
              <!-- <p class="clearfix">
                <span class="col-xs-12">订单号:<b>{{item.orderSn}}</b></span>
              </p>
              <p class="clearfix">
                        <span class="secondary col-xs-6">时间:
                            <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
                            <b v-else></b>
                        </span>
              </p> -->
              <div class="info-mix ">
                <span class="info-item">订单号:<b>{{item.orderSn}}</b></span>
                <span class="info-item">时间:
                    <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
                    <b v-else></b>
              <div class="info-mix">
                <span class="info-item"
                  >订单号:<b>{{ item.orderSn }}</b></span
                >
                <span class="info-item"
                  >时间:
                  <b v-if="item.addTime">{{
                    new Date(item.addTime) | timeFormat
                  }}</b>
                  <b v-else></b>
                </span>
              </div>
            </div>
          </div>
          <!-- <div class="capital">
              <div class="pro">
                  {{item.payChannel}} <span class="pull-right">金额:{{item.payAmt}}</span>
              </div>
              <div class=" clearfix">
                  <div class="col-xs-4"></div>
                  <div class="col-xs-8">
                      <span class="pull-right">
                          {{new Date(item.addTime) | timeFormat}}
                      </span>
                  </div>
              </div>
          </div> -->
        </li>
      </ul>
      <div v-show="loading" class="load-all text-center">
@@ -77,166 +83,166 @@
        loading...
      </div>
      <div v-show="!loading" class="load-all text-center">
        已全部加载
        {{ $t("hj236") }}
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/axios/api'
import { Toast } from "mint-ui";
import * as api from "@/axios/api";
export default {
  components: {},
  props: {},
  data () {
  data() {
    return {
      loading: false,
      list: [],
      pageNum: 1,
      pageSize: 15,
      total: 0
    }
      total: 0,
    };
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {
    this.getListDetail()
  created() {},
  mounted() {
    this.getListDetail();
  },
  methods: {
    async getListDetail () {
    async getListDetail() {
      let opt = {
        payChannel: '', // 支付方式
        orderStatus: '', // 订单状态
        payChannel: "", // 支付方式
        orderStatus: "", // 订单状态
        pageNum: this.pageNum,
        pageSize: 15
      }
      let data = await api.rechargeList(opt)
        pageSize: 15,
      };
      let data = await api.rechargeList(opt);
      if (data.status === 0) {
        data.data.list.forEach(element => {
          this.list.push(element)
        })
        this.total = data.data.total
        data.data.list.forEach((element) => {
          this.list.push(element);
        });
        this.total = data.data.total;
      } else {
        Toast(data.msg)
        Toast(data.msg);
      }
    },
    async loadMore () {
    async loadMore() {
      if (this.list.length < 10 || this.total <= this.pageNum * this.pageNum) {
        return
        return;
      }
      this.loading = true
      this.loading = true;
      // 加载下一页
      this.pageNum++
      await this.getListDetail()
      this.loading = false
      this.pageNum++;
      await this.getListDetail();
      this.loading = false;
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 0.9rem;
}
.table-list {
  // padding: 0.2rem 0;
  .list-body {
    padding: 0.1rem 0.3rem;
    .capital:nth-child(1) {
      border-top: 0.01rem solid #3f444a;
    }
    .capital {
      padding: 0.2rem;
      // border-radius: 0.2rem;
      border-bottom: 0.01rem solid #3f444a;
      div {
        line-height: 0.4rem;
      }
      .col-xs-4 {
        padding-left: 0;
        padding-right: 0;
      }
      .pro {
        color: #999;
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .wrapper {
    padding-top: 0.9rem;
.payNumber {
  font-size: 0.24rem;
  font-weight: bold;
  span {
    font-family: lightnumber;
  }
  .table-list {
    padding: 0.2rem 0;
    .list-body {
      padding: 0.1rem 0.3rem;
      .capital:nth-child(1) {
        border-top: 0.01rem solid #3f444a;
      }
      .capital {
        padding: 0.2rem;
        // border-radius: 0.2rem;
        border-bottom: 0.01rem solid #3f444a;
        div {
          line-height: 0.4rem;
        }
        .col-xs-4 {
          padding-left: 0;
          padding-right: 0;
        }
        .pro {
          color: #999;
        }
      }
    }
  }
  .payNumber {
}
/deep/.order-info-box {
  background-color: #16171d;
  padding: 0;
  .main {
    padding: 0.05rem 0.15rem;
    letter-spacing: 0;
    text-align: center;
    margin-right: 0.16rem;
    font-size: 0.24rem;
    font-weight: bold;
    span {
      font-family: lightnumber;
    border-radius: 3px;
    &.ali {
      background-color: #138eb4;
    }
    &.cart {
      background-color: #7266ba;
    }
    &.wechat {
      background-color: #009c46;
    }
  }
  /deep/.order-info-box {
    background-color: #16171d;
    padding: 0;
    .main{
      padding: 0.05rem .15rem;
      letter-spacing:0;
      text-align: center;
      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: 0.3rem;
  }
  .order-title {
    border-bottom: none;
  }
  .info-mix {
    display: flex;
    font-size: 0.2rem;
    width: 100%;
    .info-item {
      margin-right: 0.2rem;
      color: #fff8;
    }
  }
}
.red-theme {
  .list-body {
    background-color: #fff;
  }
  .order-info-box {
    background-color: #fff;
    .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;
      }
      border-bottom-color: #e9e9e9;
    }
  }
  .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;
    }
  .order-info-box .main.cart {
    color: #fff;
  }
  .payNumber {
    color: #000;
  }
  .order-info-box .info-mix .info-item {
    color: #666666;
  }
  .load-all {
    background-color: #fff;
  }
}
</style>