我已经购买会员卡

刘淇
1 parent 9ca46819
Showing 6 changed files with 207 additions and 19 deletions
src/api/card/card.js
src/assets/images/cards/myvipcardBg.png
src/assets/images/cards/vipcardbtnBg.png
src/router/index.js
src/utils/filters.js
src/views/cards/ownCards.vue
@@ -43,4 +43,11 @@ export function createVipCardOrder2022(params) { //会员卡购买续费2022
   })
 }
  
+export function queryVipCardsByCustId(params) { //查询用户已购买的会员卡
+  return request({
+    url: 'parkvip/queryVipCardsByCustId',
+    method: 'post',
+    data: params
+  })
+}
  
@@ -131,6 +131,13 @@ export default new Router({
       name: "buyCard",
       component: () => import("@/views/cards/buyCard.vue"),
       meta: { title: "购买会员卡" }
-    }
+    },
+    {
+      path: "/ownCards",
+      name: "ownCards",
+      component: () => import("@/views/cards/ownCards.vue"),
+      meta: { title: "已购会员卡" }
+    },
+
   ]
 });
 const vFilter = {
   formateColor: function(val) {  // 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
     switch (val) {
-      case '0':
-        return 'carBlue'
+      case "0":
+        return "carBlue";
         break;
-      case '1':
-        return 'carYellow'
+      case "1":
+        return "carYellow";
         break;
-      case '2':
-        return 'carWhite'
+      case "2":
+        return "carWhite";
         break;
-      case '3':
-        return 'carBlack'
+      case "3":
+        return "carBlack";
         break;
-      case '4':
-        return 'carGreen'
+      case "4":
+        return "carGreen";
         break;
-
     }
-  },
+  }
+};
+const numFilter = function(value) {
+  // 截取当前数据到小数点后两位
+  let realVal = (Number(value) / 100).toFixed(2);
+  return realVal;
+};
+const carType = function(carType) {
+  switch (Number(carType)) {
+    case 1:
+      return "大型车";
+      break;
+    case 2:
+      return "小型车";
+      break;
+    default:
+      break;
+  }
+};
  
-}
  
-const numFilter=function (value) {
-  // 截取当前数据到小数点后两位
-  let realVal = (Number(value)/100).toFixed(2)
-  return realVal
+const cardType = function(cardType) {
+  switch (Number(cardType)) {
+    case 1:
+      return "年卡";
+      break;
+    case 2:
+      return "半年卡";
+      break;
+    case 3:
+      return "季卡";
+      break;
+    case 4:
+      return "月卡";
+      break;
+    case 5:
+      return "日卡";
+      break;
+    default:
+      break;
+  }
 }
  
  
-export default {vFilter,numFilter}
+
+export default { vFilter, numFilter, carType, cardType };
+<template>
+  <section class="commonPagePadding">
+    <ul class="cardListWrap">
+      <li class="cardMain" v-for="(i,index) in mycardlist" @click="gotoNextPay(i)" :key="index">
+        <p class="cardTags">
+          <span>{{i.cardType | cardType}}</span>
+          <span>{{i.carType | carType}}</span>
+        </p>
+
+        <p class="cardCarNum">{{i.carNumber}}</p>
+        <p>{{i.parkName}}</p>
+        <p class="cardDate">有效期：{{i.effDate}} 至 {{i.expDate}}</p>
+        <div class="renewBtn">续费</div>
+      </li>
+    </ul>
+
+    <!--<div style="text-align: center;padding-top: 60px;">-->
+    <!--<van-image :src="require('../../assets/images/cards/novipcard.png')"></van-image>-->
+    <!--<p>暂无购买会员卡记录</p>-->
+    <!--</div>-->
+  </section>
+</template>
+
+<script>
+import { queryVipCardsByCustId } from "@/api/card/card";
+export default {
+  name: "ownCards",
+  data() {
+    return {
+      mycardlist: [{
+        "cardName": "测试1",
+        "parkName": "东济路",
+        "num": 1,
+        "discount": "1.0",
+        "invoiceState": "0",
+        "useType": "1",
+        "cardNo": "V1123900924620210176",
+        "expDate": "2023-07-28",
+        "effDate": "2023-06-29",
+        "carType": "2",
+        "payType": "12",
+        "price": "100",
+        "isSupportRenew": "1",
+        "cardStatus": "2",
+        "parkNo": "P15040000000018",
+        "payFinishTime": "2023-06-29 09:01:37",
+        "cardType": "4",
+        "orderPayedFee": "10",
+        "custCardNo": "7011123901072930799616",
+        "carNumber": "苏B13ERR",
+        "parkAddr": "江阴市江阴高新技术产业开发区东济路",
+        "totalAmount": "100",
+        "saleChannel": "4",
+        "custCardId": "4493",
+        "actPrice": "100"
+      }]
+    };
+  },
+  created() {
+    this.queryVipCardsByCustId();
+  },
+  methods: {
+    queryVipCardsByCustId() {
+      let jsondata = {
+        saleChannel: "2"
+      };
+      jsondata.sign = this.$utils.signObject(jsondata);
+      queryVipCardsByCustId(jsondata).then(response => {
+        console.log(response);
+        // this.mycardlist = response.data
+      });
+    },
+    gotoNextPay(i) {
+      this.$router.push({
+          name: "buyVipCard",
+          query: {
+            cardName: i.cardName,
+            carType: i.carType,
+            cardType: i.cardType,
+            actPrice: i.actPrice,
+            discValue: i.discValue,
+            plName: i.parkName,
+            plAddress: i.parkAddr,
+            plNo: i.parkNo,
+            cardNo: i.cardNo,
+            carNumber: i.carNumber,
+            effDate: i.effDate,
+            expDate: i.expDate,
+            orderPayedFee: i.orderPayedFee
+          }
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .cardMain {
+    height: 190px;
+    padding: 20px;
+    margin-top: 10px;
+    position: relative;
+    background: url("../../assets/images/cards/myvipcardBg.png") no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
+  }
+
+  .cardTags {
+    span {
+      padding: 2px 25px;
+      border-radius: 15px;
+      background: rgba(255, 255, 255, .3);
+      margin-right: 10px;
+      font-size: 12px;
+
+    }
+  }
+
+  .cardCarNum {
+    padding: 20px 0 2px;
+    font-size: 22px;
+    font-weight: 600;
+  }
+
+  .cardDate {
+    padding-top: 34px;
+  }
+
+  .renewBtn {
+    width: 80px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    position: absolute;
+    right: 70px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: url("../../assets/images/cards/vipcardbtnBg.png") no-repeat;
+  }
+</style>