JDD-WXCP/pages/charge/amount.vue

<template>
  <div class="charge-amount">
    <div class="container">
      <div class="overview">
        <div class="title">会员余额(¥)</div>
        <div class="card">
          <div v-if="cardList.length == 0">所在油站未启动电子卡功能</div>
          <div  v-for="ele in cardList" :key="ele.id">
            {{cardOilsTypeText[ele.cardOilsType]}}：<span>{{ ele.amt | toFixed }}</span>
          </div>          
        </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">{{
                cardOilsTypeText[item.cardOilsType]
              }}</span>
              <span class="amount" v-if="item.usageType == '-'"
                >{{ item.usageType }} {{ +item.amt | toFixed }}</span
              >
              <span class="amount" v-else
                >{{ 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">赠送金额</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";
import { mapGetters } from "vuex";

export default {
  head() {
    return {
      title: "电子卡明细",
    };
  },
  data() {
    return {
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
      cardOilsTypeText: [, "汽油卡", "柴油卡", "非油卡", "LNG卡", "CNG卡"],
      cardList:[]
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    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,
  },
  created() {
    this.init();
    console.log("user.info", this.userInfo);
  },
  methods: {
    async init() {
      // const data = [
      //   {
      //     id: 105,
      //     unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
      //     customerNo: "11622424586654",
      //     customerName: "Joe",
      //     amt: 55455.82,
      //     cardOilsType: "1",
      //     stationId: 1,
      //     createTime: "Jun 4, 2021 2:16:29 PM",
      //     recentlyTime: "Jun 4, 2021 2:14:33 PM",
      //   },
      //   {
      //     id: 106,
      //     unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
      //     customerNo: "11619582798963",
      //     customerName: "Joe",
      //     amt: 10005.06,
      //     cardOilsType: "2",
      //     stationId: 1,
      //     createTime: "Jun 4, 2021 2:16:29 PM",
      //     recentlyTime: "Jun 2, 2021 5:22:39 PM",
      //   },
      //   {
      //     id: 115,
      //     unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
      //     customerNo: "11622424586607",
      //     customerName: "Joe",
      //     amt: 55555,
      //     cardOilsType: "3",
      //     stationId: 1,
      //     createTime: "Jun 4, 2021 2:16:29 PM",
      //   },
      //   {
      //     id: 116,
      //     unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
      //     customerNo: "11622424586654",
      //     customerName: "Joe",
      //     amt: 55555,
      //     cardOilsType: "4",
      //     stationId: 1,
      //     createTime: "Jun 4, 2021 2:16:29 PM",
      //   },
      //   {
      //     id: 119,
      //     unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
      //     customerNo: "11622538683941",
      //     customerName: "Joe",
      //     amt: 0,
      //     cardOilsType: "5",
      //     stationId: 1,
      //     createTime: "Jun 4, 2021 2:16:29 PM",
      //   },
      // ];
      // data.forEach((ele) => {
      //   if (ele.cardOilsType == "1") {
      //     this.gasolineAmount = ele.amt;
      //   } else if (ele.cardOilsType == "2") {
      //     this.dieselAmount = ele.amt;
      //   }
      // });
      // this.cardList = data
      // 获取油站列表
      this.$axios
        .$get("/getElectronicCardList", {
          params: {
            unionId: this.unionId,
            stationId: this.stationId,
          },
        })
        .then((res) => {
          if (res.retCode === 0) {
            this.cardList = res.data
          }
        })
        .catch((e) => {});

      // 获取订单
      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.parseZone(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>
.charge-amount {
  width: 100%;
  height: 16.24rem;
  background: #ffffff;
}
.charge-amount .container {
  width: 6.9rem;
  margin: 0 auto;
}
.charge-amount .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;
}
.charge-amount .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;
}
.charge-amount .container .overview >.card{
  position: absolute;
  left: 0.3rem;
  top: 0.9rem;
  width:6.3rem;
  height:1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-content:space-around;
}
.charge-amount .container .overview >.card div{
  font-size: 0.28rem;
  color: #ffffff;
  font-weight: 500;
}
.charge-amount .container .overview >.card div span{
  font-weight: 600;
  font-size: 0.4rem;
}

.charge-amount .container .overview .pay {
  width: 1.4rem;
  height: 0.5rem;
  border-radius: 0.39rem;
  border: 0.02rem solid #ffffff;
  position: absolute;
  top: 0.25rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.charge-amount .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;
}

.charge-amount .container .overview .pay .text {
  display: inline-block;
  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;
}

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

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

.charge-amount .container .detail .part div {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.13rem;
}
.charge-amount .container .detail .part .active {
  height: 1.13rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  border-bottom: 0.06rem solid #db9d28;
}
.charge-amount .container .content {
  width: 100%;
}
.charge-amount .container .content .no-img {
  width: 100%;
  height: 60vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.charge-amount .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%;
}
.charge-amount .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;
}

.charge-amount .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;
}
.charge-amount .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;
}

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

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

.charge-amount .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;
}

.charge-amount .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;
}

.charge-amount .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>