JDD-WXCP/pages/charge/amount.vue

<template>
  <div class="outer">
    <div class="container">
      <div class="overview">
        <div class="title">会员余额(¥)</div>
        <div class="gasoline">
          汽油卡：<span>{{ this.gasolineAmount | toFixed }}</span>
        </div>
        <div class="diesel">
          柴油卡：<span>{{ this.dieselAmount | toFixed }}</span>
        </div>
        <div class="pay">
          <span class="icon"></span>
          <router-link to="/charge/" tag="span" class="text">充值</router-link>
        </div>
      </div>
      <div class="detail">
        <div class="title">金额明细</div>
        <div class="part">
          <div :class="[type === 0 ? 'active' : '']" @click="selectType(0)">
            全部
          </div>
          <div :class="[type === 1 ? 'active' : '']" @click="selectType(1)">
            充值
          </div>
          <div :class="[type === 2 ? 'active' : '']" @click="selectType(2)">
            支出
          </div>
        </div>
      </div>
      <div class="content">
        <div v-if="showList.length === 0" class="no-img">
          <div></div>
          <span>无记录</span>
        </div>
        <template v-else>
          <div class="ele" v-for="(item, index) in showList" :key="index">
            <div class="title">
              <span class="text">{{
                item.cardOilsType == "1" ? "汽油卡" : "柴油卡"
              }}</span>
              <span class="amount"
                >{{ item.usageType }}
                {{ (+item.amt + +item.presentAmt) | toFixed }}</span
              >
            </div>
            <div class="item">
              <span class="text">{{
                item.usageType == "+" ? "充值金额" : "消费金额"
              }}</span>
              <span class="amount">{{ item.amt | toFixed }}</span>
            </div>
            <div class="item" v-if="item.usageType === '+'">
              <span class="text">赠送金额{{ item.usageType }}</span>
              <span class="amount">{{ item.presentAmt | toFixed }}</span>
            </div>
            <div class="item">
              <span class="text">{{
                item.usageType == "+" ? "充值时间" : "消费时间"
              }}</span>
              <span class="amount">{{ item.createTime }}</span>
            </div>
          </div>
        </template>
        <template>
          <div></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import ProductList from "../../components/ProductList";
import moment from "moment";

export default {
  head() {
    return {
      title: "积分订单",
    };
  },
  data() {
    return {
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
    };
  },
  computed: {
    chargeList() {
      return this.allList.filter((ele) => {
        return ele.usageType === "+";
      });
    },
    payList() {
      return this.allList.filter((ele) => {
        return ele.usageType === "-";
      });
    },
  },
  filters: {
    toFixed: function (value) {
      return (+value).toFixed(2);
    },
  },
  components: {
    ProductList,
  },
  beforeCreate() {},
  created() {
    this.init();
  },
  methods: {
    async init() {
      // 获取油站列表
      this.$axios
        .$get("/getElectronicCardList", {
          params: {
            unionId: this.unionId,
            stationId: this.stationId,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.retCode === 0) {
            res.data.forEach((ele) => {
              console.log(ele);
              if (ele.cardOilsType == "1") {
                this.gasolineAmount = ele.amt;
              } else if (ele.cardOilsType == "2") {
                this.dieselAmount = ele.amt;
              }
            });
          }
          console.log(this.gasolineAmount, this.dieselAmount);
        });

      // 获取订单
      try {
        const amountData = await this.$axios.$get("/getCardRecordList", {
          params: {
            stationId: this.stationId,
            unionId: this.unionId,
            usageType: "",
          },
        });
        if (amountData.retCode !== 0) {
          throw new Error(amountData.message);
        }
        this.allList = amountData.data.map((ele) => {
          ele.createTime = moment(ele.createTime, "MMM DD, YYYY HH:mm:ss A")
            .utc()
            .format("YYYY/MM/DD HH:mm:ss");
          return ele;
        });
        this.showList = this.allList;
      } catch (error) {
        alert(error);
      }
    },
    selectType(type) {
      this.type = type;
      const typeArr = ["allList", "chargeList", "payList"];
      this.showList = this[typeArr[type]];
    },
  },
};
</script>

<style>
.outer {
  width: 100%;
  height: 16.24rem;
  background: #ffffff;
}
.outer .container {
  width: 6.9rem;
  margin: 0 auto;
}
.outer .container .overview {
  width: 6.9rem;
  height: 2.8rem;
  background: url("../../static/point/4_b01_bj@2x.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.outer .container .overview .title {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.4rem;
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
}
.outer .container .overview .gasoline {
  height: 0.6rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 0.6rem;
  position: absolute;
  top: 1rem;
  left: 0.6rem;
}

.outer .container .overview .gasoline span {
  height: 0.6rem;
  font-size: 0.4rem;
  font-weight: 600;
  line-height: 0.6rem;
}

.outer .container .overview .diesel {
  height: 0.6rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 0.6rem;
  position: absolute;
  top: 1.75rem;
  left: 0.6rem;
}
.outer .container .overview .diesel span {
  height: 0.6rem;
  font-size: 0.4rem;
  font-weight: 600;
  line-height: 0.6rem;
}

.outer .container .overview .pay {
  width: 1.56rem;
  height: 0.6rem;
  border-radius: 0.39rem;
  border: 0.02rem solid #ffffff;
  position: absolute;
  top: 1.3rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer .container .overview .pay .icon {
  width: 0.3rem;
  height: 0.3rem;
  background: #ffffff;
  display: inline-block;
  background: url("../../static/point/jinbi.png") no-repeat;
  background-size: cover;
}

.outer .container .overview .pay .text {
  display: inline-block;
  width: 0.56rem;
  height: 0.6rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.6rem;
  margin-left: 0.2rem;
}

.outer .container .detail {
  width: 100%;
  height: 1.17rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid #e0e0e0;
}

.outer .container .detail .title {
  width: 1.28rem;
  height: 1.17rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1.17rem;
}
.outer .container .detail .part {
  display: flex;
  width: 3.2rem;
  height: 1.13rem;
  justify-content: space-between;
  align-items: center;
}

.outer .container .detail .part div {
  width: 0.64rem;
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.13rem;
}
.outer .container .detail .part .active {
  width: 0.64rem;
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  border-bottom: 0.06rem solid #db9d28;
}
.outer .container .content {
  width: 100%;
}
.outer .container .content .no-img {
  width: 100%;
  height: 60vh;
    position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.outer .container .content .no-img div {
  width: 2.29rem;
  height: 1.87rem;
  background: url("../../static/common/wu@2x.png") no-repeat 0 0;
  background-size: 100% 100%;
}
.outer .container .content .no-img span {
  width: 2.29rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-weight: 500;
  color: #aaaaaa;
  line-height: 0.4rem;
  text-align: center;
}

.outer .container .content .ele {
  height: 2.7rem;
  border-bottom: 0.01rem solid #e0e0e0;
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.outer .container .content .ele .title {
  width: 100%;
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #111111;
  line-height: 0.45rem;
  display: flex;
  justify-content: space-between;
}

.outer .container .content .ele .title .text {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #111111;
}

.outer .container .content .ele .title .amount {
  display: inline-block;
  height: 0.45rem;
  font-weight: 500;
  color: #db9d28;
}

.outer .container .content .ele .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.outer .container .content .ele .item .text {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
}

.outer .container .content .ele .item .amount {
  display: inline-block;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 0.4rem;
}
</style>