电子卡页面增加 满减按钮

pages/charge/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="charge-index">
     <div class="background">
-      <div class="headline"></div>
+      <div class="headline">
+        <span class="text1">电子卡充值享优惠</span>
+        <span class="text2">会员日充值更优惠</span>
+      </div>
     </div>
     <div class="content">
       <div class="title">我的卡片 ({{ cardList.length }})</div>
@@ -34,14 +37,10 @@
       </div>
     </div>
 
-    <div class="mask" :class="[mask ? '' : 'hidden']">
-      <div class="layer" @click="switchMask"></div>
+    <van-popup v-model="mask" closeable position="bottom" class="mask" round>
       <div class="charge">
-        <div class="title">
-          充值
-          <div class="close" @click="switchMask"></div>
-        </div>
-        <div class="tip">提示：充值汽油1000元，赠送100元，实际到账1100元</div>
+        <div class="title">充值</div>
+        <div class="tip">会员日充值更优惠，详情请咨询站长</div>
         <div class="amount">
           <span>{{
             chargeItem.cardOilsType == 1
@@ -60,6 +59,18 @@
           />
           <span>￥</span>
         </div>
+        <div class="container">
+          <div
+            class="btn"
+            v-for="item in discountList"
+            :key="item.cardSettingDetailId"
+            @click="selectDiscount(item.discountAmtEnd)"
+          >
+            <span>￥</span>
+            <span>{{ item.discountAmtEnd }}</span>
+            <span>满{{ item.discountAmtEnd }}送{{ item.presentAmt }}元</span>
+          </div>
+        </div>
       </div>
       <van-button
         :class="[chargeAmount !== '' ? 'selected' : '']"
@@ -70,7 +81,7 @@
       >
         确认充值
       </van-button>
-    </div>
+    </van-popup>
   </div>
 </template>
 
@@ -79,10 +90,12 @@ import ProductList from "../../components/ProductList";
 import { mapState, mapGetters, mapActions } from "vuex";
 import wx from "weixin-js-sdk";
 import Vue from "vue";
-import { Toast, Button } from "vant";
+import { Toast, Button, Popup, NumberKeyboard } from "vant";
 
+Vue.use(Popup);
 Vue.use(Toast);
 Vue.use(Button);
+Vue.use(NumberKeyboard);
 
 export default {
   head() {
@@ -98,6 +111,8 @@ export default {
       chargeAmount: "",
       stationInfo: {},
       payLoading: false,
+      show: false,
+      discountList: [],
     };
   },
   components: {
@@ -115,6 +130,12 @@ export default {
     this.init();
   },
   methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast("删除");
+    },
     ...mapActions({
       getSdkConfig: "authen/getSdkConfig",
     }),
@@ -134,8 +155,8 @@ export default {
       this.$axios
         .$get("/getElectronicCardList", {
           params: {
-            unionId: this.unionId,
-            stationId: this.stationId,
+            unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
+            stationId: 1,
           },
         })
         .then((res) => {
@@ -147,12 +168,26 @@ export default {
       this.$axios
         .$get("/getStationInfo", {
           params: {
-            stationId: this.stationId,
+            stationId: 1,
           },
         })
         .then((res) => {
           this.stationInfo = res.data;
         });
+      // 拉取折扣
+      this.$axios
+        .$get("/getCardRechargeSettingList", {
+          params: {
+            stationId: 1,
+          },
+        })
+        .then((res) => {
+          console.log(res);
+          if (res.retCode === 0) {
+            this.discountList = res.data[0].customerCardSettingDetailList;
+            console.log(this.discountList);
+          }
+        });
     },
     async pay() {
       try {
@@ -201,9 +236,7 @@ export default {
 
         const that = this;
         // 拉取微信支付
-        this.getSdkConfig([
-          "chooseWXPay",
-        ]).then((res) => {
+        this.getSdkConfig(["chooseWXPay"]).then((res) => {
           wx.config(res);
           wx.ready(function (res) {
             wx.chooseWXPay({
@@ -236,6 +269,9 @@ export default {
         alert(err);
       }
     },
+    selectDiscount(discount) {
+      this.chargeAmount = discount;
+    },
   },
 };
 </script>
@@ -262,8 +298,24 @@ export default {
   background: url("~static/personal/bj2@2x.png") no-repeat 0px 0px;
   background-size: 100% 100%;
   margin: 0.3rem auto;
+  display: relative;
+}
+.charge-index .background .headline .text1 {
+  position: absolute;
+  left: 0.8rem;
+  top: 1.6rem;
+  color: #8e9aae;
+  font-size: 0.3rem;
+  font-weight:600;
+}
+.charge-index .background .headline .text2 {
+  position: absolute;
+  left: 0.8rem;
+  top: 2.2rem;
+  color: #8e9aae;
+  font-size: 0.3rem;
+  font-weight:600;
 }
-
 .charge-index .content {
   position: absolute;
   top: 3.78rem;
@@ -354,33 +406,9 @@ export default {
 }
 
 .charge-index .mask {
-  position: fixed;
-  height: 100%;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transition: all 2s linear 2s;
-}
-
-.charge-index .hidden {
-  display: none;
-}
-
-.charge-index .mask .layer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #111111;
-  opacity: 0.59;
 }
 
 .charge-index .mask .charge {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   height: 7.5rem;
   background: #f2f2f2;
   border-radius: 0.42rem 0.42rem 0rem 0rem;
@@ -389,15 +417,9 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  transition: all 2s linear;
 }
-/*
-.charge-index .hidden .charge{
-  height: 0;
-}
-*/
 
-.charge-index .mask .charge div:not(:nth-child(1)) {
+.charge-index .mask .charge > div:not(:nth-child(1)):not(.container) {
   margin-top: 0.2rem;
 }
 .charge-index .mask .charge .title {
@@ -471,7 +493,7 @@ export default {
 .charge-index .mask button {
   border: none;
   outline: none;
-  bottom: 0.83rem;
+  bottom: 0.7rem;
   position: absolute;
   width: 6.9rem;
   height: 0.8rem;
@@ -484,7 +506,55 @@ export default {
   color: #ffffff;
   line-height: 0.45rem;
 }
-.charge-index .mask button.selected {
+.charge-index .mask > button.selected {
   background-color: #0ea374;
 }
+
+.charge-index .mask .container {
+  margin-top: 0.4rem;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.3rem 0.3rem;
+  justify-content: space-between;
+  overflow: scroll;
+  height: 2rem;
+}
+.charge-index .mask .container .btn {
+  display: inline-block;
+  width: 3.3rem;
+  height: 0.84rem;
+  background: #ffffff;
+  box-shadow: 0 0.04rem 0.08rem 0 #f2f2f2;
+  border-radius: 0.42rem;
+  margin-bottom: 0.35rem;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 0.26rem;
+  text-align: center;
+}
+.charge-index .mask .container .btn:nth-child(odd) {
+  margin-right: 0.3rem;
+}
+.charge-index .mask .container .btn span {
+  font-size: 0.35rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  color: #895017;
+  line-height: 0.84rem;
+}
+
+.charge-index .mask .container .btn span:nth-child(1) {
+  border-radius: 0.42rem;
+  font-size: 0.2rem;
+  float: left;
+}
+.charge-index .mask .container .btn span:nth-child(2) {
+  float: left;
+  font-weight: 600;
+}
+.charge-index .mask .container .btn span:nth-child(3) {
+  font-size: 0.2rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.29);
+  float: right;
+}
 </style>

settings.js

@@ -7,7 +7,7 @@ export default {
   prefix:"/demo",
   port: 8081,
     // host: '192.168.3.14' // default: localhost
-    // host:"localhost",
-    host:"192.168.31.87",
+    host:"localhost",
+    // host:"192.168.31.87",
   
 }