|
|
@@ -0,0 +1,224 @@
|
|
|
+<template>
|
|
|
+ <div class="coupon">
|
|
|
+ <div class="top">
|
|
|
+ <span class="selected" >可使用(9)</span>
|
|
|
+ <span>已过期(3)</span>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="item cash">
|
|
|
+ <div class="left">
|
|
|
+ <span class="amount">￥<span class="big">100</span></span>
|
|
|
+ <span>无门槛</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span class="title">立减劵</span>
|
|
|
+ <span class="scope">范围：限汽油</span>
|
|
|
+ <span class="valid">有效至 2021.03.01</span>
|
|
|
+ <span class="use"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item discount">
|
|
|
+ <div class="left">
|
|
|
+ <span class="amount">￥<span class="big">100</span></span>
|
|
|
+ <span>无门槛</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span class="title">立减劵</span>
|
|
|
+ <span class="scope">范围：限汽油</span>
|
|
|
+ <span class="valid">有效至 2021.03.01</span>
|
|
|
+ <span class="use"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item exchange">
|
|
|
+ <div class="left">
|
|
|
+ <span class="amount">￥<span class="big">100</span></span>
|
|
|
+ <span>无门槛</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span class="title">立减劵</span>
|
|
|
+ <span class="scope">范围：限汽油</span>
|
|
|
+ <span class="valid">有效至 2021.03.01</span>
|
|
|
+ <span class="use"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item invalid">
|
|
|
+ <div class="left">
|
|
|
+ <span class="amount">￥<span class="big">100</span></span>
|
|
|
+ <span>无门槛</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span class="title">立减劵</span>
|
|
|
+ <span class="scope">范围：限汽油</span>
|
|
|
+ <span class="valid">有效至 2021.03.01</span>
|
|
|
+ </div>
|
|
|
+ </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,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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() {},
|
|
|
+ methods: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.coupon {
|
|
|
+ width: 7.5rem;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ .top {
|
|
|
+ height: 1rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ height: 0.45rem;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #aaaaaa;
|
|
|
+ line-height: 0.45rem;
|
|
|
+ letter-spacing: 0.01rem;
|
|
|
+ }
|
|
|
+ span.selected {
|
|
|
+ color: #111111;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ .item {
|
|
|
+ width: 6.9rem;
|
|
|
+ height: 1.6rem;
|
|
|
+ font-size: .24rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: .4rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: .2rem;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.6rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-size: .2rem;
|
|
|
+
|
|
|
+ .big {
|
|
|
+ font-size: .33rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 5.4rem;
|
|
|
+ height: 1.6rem;
|
|
|
+ color: #111111;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: .22rem;
|
|
|
+ left: .2rem;
|
|
|
+ height: .4rem;
|
|
|
+ font-size: .28rem;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: .4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scope {
|
|
|
+ position: absolute;
|
|
|
+ top: .72rem;
|
|
|
+ left: .2rem;
|
|
|
+ height: .28rem;
|
|
|
+ font-size: .2rem;
|
|
|
+ color: #666666;
|
|
|
+ line-height: .28rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valid {
|
|
|
+ position: absolute;
|
|
|
+ top: 1.1rem;
|
|
|
+ left: .2rem;
|
|
|
+ height: .28rem;
|
|
|
+ font-size: .20rem;
|
|
|
+ color: #666666;
|
|
|
+ line-height: .28rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use {
|
|
|
+ position: absolute;
|
|
|
+ top: .54rem;
|
|
|
+ right: .20rem;
|
|
|
+ display: inline-block;
|
|
|
+ width: 1.60rem;
|
|
|
+ height: .55rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cash {
|
|
|
+ background: url("../../static/coupon/youhuiquan1.2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .discount {
|
|
|
+ background: url("../../static/coupon/youhuiquan2.2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .exchange {
|
|
|
+ background: url("../../static/coupon/youhuiquan3.2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .invalid{
|
|
|
+ background: url("../../static/coupon/youhuiquan0.2x.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Joe
