优惠券静态完成

nuxt.config.js

@@ -40,6 +40,12 @@ export default {
       href: '/favicon.ico'
     }]
   },
+  css: [
+    {
+          src: '*.scss',
+          lang: 'scss'
+     }
+] ,
   plugins: [
     '~/plugins/vant',
     '~/plugins/vue-map'

package-lock.json

@@ -9305,13 +9305,40 @@
       }
     },
     "sass-loader": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-11.0.1.tgz?cache=0&sync_timestamp=1612804548821&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-11.0.1.tgz",
-      "integrity": "sha1-hnL4llk0Zlc7kE9HaT4GlTaOOMk=",
+      "version": "10.1.1",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-10.1.1.tgz?cache=0&sync_timestamp=1612804548821&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-10.1.1.tgz",
+      "integrity": "sha1-Td1aPXY455SQZd1unHwEA39+Zj0=",
       "dev": true,
       "requires": {
         "klona": "^2.0.4",
-        "neo-async": "^2.6.2"
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz?cache=0&sync_timestamp=1601922251376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-3.0.0.tgz",
+          "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
       }
     },
     "sax": {

package.json

@@ -27,6 +27,6 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "node-sass": "^5.0.0",
-    "sass-loader": "^11.0.1"
+    "sass-loader": "^10.1.1"
   }
 }

pages/coupon/index.vue

@@ -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>