会员卡

刘淇
1 parent 2690b31c
Showing 7 changed files with 315 additions and 69 deletions
src/api/cards/cards.js
src/assets/images/cards/cards.png
src/assets/images/cards/nodata.png
src/router/index.js
src/views/cards/CardList.vue
src/views/cards/Cards.vue
src/views/cards/buyCard.vue
+import request from '@/utils/request'
+
+
+//   查询用户已购买的会员卡
+export function queryVipCardsByCustId(params) {
+  return request({
+    url: 'parkvip/queryVipCardsByCustId',
+    method: 'post',
+    data: params
+  })
+}
+
+
+//   根据组织id查询区域卡/时域卡规则信息
+export function queryVipAreaCardByOrgId(params) {
+  return request({
+    url: 'vipAreaCardRule/queryVipAreaCardByOrgId',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
+
+
+
+
@@ -167,6 +167,25 @@ export default new Router({
       }
     },
  
+    {
+      path: '/Cards',
+      name: 'Cards',
+      component: () => import("@/views/cards/Cards.vue"),
+      meta:{
+        title:'我的卡'
+      }
+    },
+    {
+      path: '/CardList',
+      name: 'CardList',
+      component: () => import("@/views/cards/CardList.vue"),
+      meta:{
+        title:'购买会员卡'
+      }
+    },
+
+
+
  
     //
     // // ------------------------购买会员卡提示
@@ -177,12 +196,15 @@ export default new Router({
     // },
     //
     //
-    // // ------------------------购买会员卡
-    // {
-    //   path: '/buyCard',
-    //   name: 'buyCard',
-    //   component: () => import("@/views/cards/buyCard.vue")
-    // },
+    // ------------------------购买会员卡
+    {
+      path: '/buyCard',
+      name: 'buyCard',
+      component: () => import("@/views/cards/buyCard.vue"),
+      meta:{
+        title:'会员卡费用支付'
+      }
+    },
  
  
  
+<template>
+  <div style="padding: 15px">
+    <div class="cardBg">
+      <ul class="cardList" @click="$router.push({path:'buyCard'})">
+        <li style="display: flex;justify-content: space-between">
+          <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span>
+        </li>
+        <li>
+          +  购买会员卡
+        </li>
+        <li>
+          ¥  100.00
+        </li>
+        <li>
+          活动有效期： 2021.05.11 - 2022.01.31
+        </li>
+      </ul>
+    </div>
+    <div class="cardBg">
+      <ul class="cardList">
+        <li style="display: flex;justify-content: space-between">
+          <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span>
+        </li>
+        <li>
+          +  购买会员卡
+        </li>
+        <li>
+          ¥  100.00
+        </li>
+        <li>
+          活动有效期： 2021.05.11 - 2022.01.31
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryVipAreaCardByOrgId } from "@/api/cards/cards";
+
+export default {
+  name: "CardList",
+  data(){
+    return{
+
+    }
+  },
+  mounted(){
+    this.queryVipAreaCardByOrgId()
+  },
+  methods:{
+    queryVipAreaCardByOrgId: function() {
+      let jsondata = this.$utils.commonParams();
+      jsondata.saleChannel = '3' // 售卖渠道:1-APP、2-公众号、3-平台
+      jsondata.sign = this.$utils.signObject(jsondata);
+      queryVipAreaCardByOrgId(jsondata).then(data => {
+        console.log(data);
+        if (data.code == 0) {
+          let res = data.data;
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  .cardBg {
+    width: 100%;
+    height: 150px;
+    background: #0099FF url("../../assets/images/cards/cards.png") no-repeat 20px 20px;
+    background-size: 90% 90%;
+    border-radius: 8px;
+    margin-bottom: 15px;
+  }
+
+  .cardList {
+    padding: 20px 20px 0 20px;
+    color: #fff;
+    li {
+      margin-bottom: 10px;
+      /*line-height: 30px;*/
+    }
+  }
+</style>
+<template>
+  <div style="height: 100%;display: flex;flex-direction: column;">
+    <div style="flex: 1;overflow-y: auto;padding: 15px">
+      <div v-if="cardList.length == 0" class="noCardData">
+        <p>您目前没有任何会员卡,</p>
+        <p>请绑定车牌通过认证后再购买会员卡!</p>
+      </div>
+      <div class="cardBg">
+        <ul class="cardList">
+          <li>
+            会员卡- 月卡
+          </li>
+          <li>
+            绑定车牌号： 京A12312
+          </li>
+          <li>
+            有效时间段： 2021-11-11 至 2021-12-10
+          </li>
+          <li>
+            适用停车场： 万达停车场
+          </li>
+        </ul>
+      </div>
+      <div class="cardBg">
+        <ul class="cardList">
+          <li>
+            会员卡- 月卡
+          </li>
+          <li>
+            绑定车牌号： 京A12312
+          </li>
+          <li>
+            有效时间段： 2021-11-11 至 2021-12-10
+          </li>
+          <li>
+            适用停车场： 万达停车场
+          </li>
+        </ul>
+      </div>
+    </div>
+    <x-button type="primary" @click.native="$router.push({path:'CardList'})">购买会员卡</x-button>
+  </div>
+</template>
+
+<script>
+import { queryVipCardsByCustId } from "@/api/cards/cards";
+export default {
+  name: "Cards",
+  data() {
+    return {
+      cardList: []
+    };
+  },
+  mounted() {
+    this.queryVipCardsByCustId();
+  },
+  methods: {
+    queryVipCardsByCustId: function() {
+      let jsondata = this.$utils.commonParams();
+      jsondata.sign = this.$utils.signObject(jsondata);
+      queryVipCardsByCustId(jsondata).then(data => {
+        console.log(data);
+        if (data.code == 0) {
+          let res = data.data;
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  .noCardData {
+    padding-top: 130px;
+    background: url("../../assets/images/cards/nodata.png") no-repeat center 0;
+    background-size: 121px 100px;
+    text-align: center;
+  }
+
+  .cardBg {
+    width: 100%;
+    height: 150px;
+    background: #26a2ff url("../../assets/images/cards/cards.png") no-repeat 20px 20px;
+    background-size: 90% 90%;
+    border-radius: 8px;
+    margin-bottom: 15px;
+  }
+  .cardList{
+    padding: 20px 0 0 20px;
+    color: #fff;
+    li{
+      line-height: 30px;
+    }
+  }
+
+</style>
@@ -8,8 +8,8 @@
  
       <li>
         <div style="color: #666">选择卡类型</div>
-        <div @click="popupVisible = true">{{carType}}</div>
-        <div class="arrow">></div>
+        <div>{{carType}}</div>
+        <!--<div class="arrow">></div>-->
       </li>
  
  
@@ -21,7 +21,7 @@
  
       <li>
         <div style="color: #A31414">生效时间</div>
-        <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(time) }}</div>
+        <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(startData) }}</div>
         <div class="arrow">></div>
       </li>
  
@@ -42,7 +42,7 @@
  
       <li>
         <div style="color: #666">单价</div>
-        <div>￥10.00</div>
+        <div>￥{{unitPrice}}</div>
       </li>
  
  
@@ -53,7 +53,7 @@
  
       <li>
         <div style="color: #666">应付金额</div>
-        <div style="color: #A31414">￥30.00</div>
+        <div style="color: #A31414">￥{{needPay}}</div>
       </li>
  
     </ul>
@@ -67,7 +67,7 @@
       <p>停车场停车场停车停车场</p>
     </div>
  
-    <div  style="margin-top: 34px" class="leftRightPadding">
+    <div style="margin-top: 34px" class="leftRightPadding">
       <mt-button type="danger" size="large">确定购买</mt-button>
     </div>
  
@@ -99,7 +99,7 @@
  
     <mt-popup
       v-model="parkMoreVisible" class="park-list-wrap"
-      >
+    >
       <ul class="park-list">
         <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li>
       </ul>
@@ -109,76 +109,81 @@
 </template>
  
 <script>
-import { timestampToTime } from '../../utils/utils.js'
-
+import { timestampToTime } from "../../utils/utils.js";
 export default {
-  name: 'buyCard',
+  name: "buyCard",
   data() {
     return {
       startDate: new Date(),
-      dateVal: '',
-      selectedValue: '',
-      time: new Date(),
-      endDate:new Date(),
+      dateVal: "",
+      selectedValue: "",
+      startData: new Date(),
+      endDate: new Date(),
       popupVisible: false,
       actions: [
-        {name:'月卡',num:1, method: this.clickAction },
-        {name:'季卡',num:3, method: this.clickAction },
-        {name:'年卡',num:12, method: this.clickAction },
-
+        { name: "月卡", num: 1, method: this.clickAction },
+        { name: "季卡", num: 3, method: this.clickAction },
+        { name: "年卡", num: 12, method: this.clickAction }
       ],
-      carType:'月卡',
-      carNumList:[
-        {name:'停车场1',method: this.clickActionCarNum },
-        {name:'停车场2',method: this.clickActionCarNum },
-        {name:'停车场3',method: this.clickActionCarNum },
-        {name:'停车场4',method: this.clickActionCarNum },
-        {name:'停车场5',method: this.clickActionCarNum },
+      carType: "月卡",
+      carNumList: [
+        { name: "停车场1", method: this.clickActionCarNum },
+        { name: "停车场2", method: this.clickActionCarNum },
+        { name: "停车场3", method: this.clickActionCarNum },
+        { name: "停车场4", method: this.clickActionCarNum },
+        { name: "停车场5", method: this.clickActionCarNum }
       ],
-      carNumber:'',
-      carNumberVisible:false,
-      parkMoreVisible:false,
-      cardNum:1
-    }
+      carNumber: "京A12334",
+      carNumberVisible: false,
+      parkMoreVisible: false,
+      cardNum: 1,
+      unitPrice: 10,
+      needPay: 0
+    };
   },
   methods: {
     //打开时间选择器
     selectData() {
-
-      this.$refs['datePicker'].open()
+      this.$refs["datePicker"].open();
+      // console.log(this.startData)
+      // this.endDate = this.startData.setMonth(this.startData.getMonth()+1)
+      // console.log(this.endDate)
     },
     handleConfirm() {
-      console.log(this.dateVal)
-      this.time = this.$utils.timestampToTime(this.dateVal);
+      console.log(this.dateVal);
+      this.startData = this.$utils.timestampToTime(this.dateVal);
+      this.endDate = this.dateVal.setMonth(this.dateVal.getMonth() + 1);
     },
-    clickAction(e){
-      console.log(e.name)
-      this.carType = e.name
-      this.endDate = this.time
+    clickAction(e) {
+      console.log(e.name);
+      this.carType = e.name;
+      this.endDate = this.startData;
     },
-    clickActionCarNum(e){
-      this.carNumber = e.name
+    clickActionCarNum(e) {
+      this.carNumber = e.name;
     },
-    addCardNum(){ // 增加购买数量
-      this.cardNum ++
+    addCardNum() { // 增加购买数量
+      this.cardNum++;
+      this.calcMoney()
     },
-    reduceCarNum(){ // 增加购买数量
-      if(this.cardNum==1){
-        return
+    reduceCarNum() { // 增加购买数量
+      if (this.cardNum == 1) {
+        return;
       }
-      this.cardNum --
+      this.cardNum--;
+      this.calcMoney()
     },
-
-
-
+    calcMoney() {
+      this.needPay = this.cardNum*this.unitPrice
+    }
   },
   filters: {
     formatDate(time) {
       var date = new Date(time);
-      return formatDate(date)
+      return formatDate(date);
     }
-  },
-}
+  }
+};
 </script>
  
 <style scoped lang="scss">
@@ -205,27 +210,28 @@ export default {
       border-bottom: 0;
     }
   }
-  .choose-num{
+
+  .choose-num {
     height: 28px;
     margin-top: 5px;
     line-height: 28px;
     display: flex;
     border: 1px solid #D8D8D8;
-    span{
+    span {
       display: inline-block;
-      &:nth-of-type(1){
+      &:nth-of-type(1) {
         width: 28px;
         height: 28px;
         text-align: center;
         cursor: pointer;
       }
-      &:nth-of-type(2){
+      &:nth-of-type(2) {
         width: 50px;
         text-align: center;
         border-left: 1px solid #D8D8D8;
         border-right: 1px solid #D8D8D8;
       }
-      &:nth-of-type(3){
+      &:nth-of-type(3) {
         width: 28px;
         height: 28px;
         text-align: center;
@@ -233,31 +239,36 @@ export default {
       }
     }
   }
-  .parkArea{
+
+  .parkArea {
     padding-top: 10px;
     padding-bottom: 10px;
     margin-top: 10px;
     background: #fff;
     color: #999;
   }
-  .parkAreaTitle{
+
+  .parkAreaTitle {
     display: flex;
     justify-content: space-between;
     color: #666;
   }
-  .parkMore{
+
+  .parkMore {
     cursor: pointer;
   }
-  .park-list-wrap{
+
+  .park-list-wrap {
     width: 80%;
     max-height: 70%;
     overflow-y: scroll;
     border-radius: 5px;
   }
-  .park-list{
+
+  .park-list {
  
     /*width: 80%;*/
-    li{
+    li {
       padding-left: 20px;
       line-height: 25px;
     }