|
|
@@ -0,0 +1,407 @@
|
|
|
+<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>
|
Joe