赤峰分支

liuqimichale
1 parent 53cd7057
Showing 1 changed file with 116 additions and 28 deletions
src/components/home.vue
 <template>
   <div class="wrap">
-    <Pay :title="title" :money="money"/>
-    <Loading v-show="_getshowflag"/>
+    <div class="pay-wrap">
+      <div class="title">订单支付</div>
+      <div class="tipstext">{{ title }}</div>
+      <div class="money">{{ money }}</div>
+      <div class="choosetext">选择支付方式</div>
+      <ul class="pay-way">
+        <li v-for="(item, index) in payArr" :key="index" :class="{checkedClass : index===currentId}" @click="currentId = index">
+          <span></span>
+          {{ item }}
+        </li>
+      </ul>
+      <div class="commit-btn" @click="commitsure">确认支付</div>
+    </div>
+    <Loading v-show="showflag"/>
   </div>
 </template>
  
 <script>
 import Loading from './Loading'
-import InOut from './InOut'
-import Pay from './Pay'
-import { mapGetters, mapActions } from 'vuex'
  
 export default {
-  name: 'HelloWorld',
+  name: 'Home',
   components: {
-    Loading, InOut, Pay
+    Loading
   },
   data() {
     return {
-      payFlag: false,
-      inOutVal: this.$route.query.id,
-      // isShow: ''
+      showflag: true,
       title: '',
-      money: ''
+      money: '',
+      payArr: ['支付宝支付', '微信支付'],
+      currentId: 0
     }
   },
   computed: {
-    ...mapGetters([
-      '_getshowflag', '_getPayFlag'
-    ])
+    // ...mapGetters([
+    //   '_getshowflag', '_getPayFlag'
+    // ])
   },
   created() {
     this.$http.get('http://39.98.54.240:8090/hmQrCodeInOutPark/noCarQRcodeInOutPark')
@@ -39,7 +48,7 @@ export default {
         console.log(error)
       })
     setTimeout(() => {
-      this.handleHide()
+      this.showflag = false
  
       // $http.post('/user', {
       //   firstName: 'Fred',
@@ -58,31 +67,110 @@ export default {
       // })
       // },
       // this.handlePayFlag()
-      console.log(this._getPayFlag)
-      // this.title = '手机: 13911137584'
-      // this.money = '¥100.00'
+      this.title = '手机: 13911137584'
+      this.money = '¥100.00'
     }, 2000)
   },
   methods: {
-    ...mapActions([
-      'handleHide',
-      'handleShow',
-      'handlePayFlag'
-    ]),
-    transmit(data) {
-      console.log(data)
-      this.title = data.title
-      this.money = data.money
+    commitsure() {
+      alert(this.currentId)
     }
   }
 }
 </script>
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="scss" scoped>
   .wrap {
     width: 100%;
     height: 100%;
     position: relative;
+    .pay-wrap {
+      width: 100%;
+      height: 100%;
+      background-color: #eff4f5;
+      text-align: center;
+      .title {
+        height: 42px;
+        line-height: 42px;
+        background-color: rgba(255, 255, 255, .9);
+        font-size: 17px;
+        color: #4A4A4A;
+        font-weight: 500;
+      }
+      .tipstext {
+        margin: 35px auto 35px;
+        font-size: 18px;
+        font-weight: bold;
+        color: rgba(255, 7, 7, 1);
+      }
+      .money {
+        height: 48px;
+        line-height: 48px;
+        font-size: 48px;
+        font-weight: 400;
+        color: rgba(74, 74, 74, 1);
+      }
+      .choosetext {
+        padding-left: 10px;
+        margin: 60px 0 10px;
+        text-align: left;
+        font-size: 17px;
+        font-weight: 400;
+        color: rgba(74, 74, 74, 1);
+      }
+      .pay-way {
+        padding-left: 10px;
+        padding-right: 18px;
+        background-color: #fff;
+        text-align: left;
+        cursor: pointer;
+        li {
+          height: 43px;
+          line-height: 43px;
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(74, 74, 74, 1);
+          background-image: url("../assets/unchecked-icon.png");
+          background-repeat: no-repeat ;
+          background-position: right center ;
+          background-size: 18px 18px;
+          span {
+            width: 24px;
+            height: 24px;
+            display: inline-block;
+            margin-right: 11px;
+            vertical-align: middle;
+          }
+          &:nth-of-type(1) {
+            border-bottom: 1px solid rgba(240, 244, 245, 1);
+            span {
+              background: url("../assets/ali-icon.png") no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          &:nth-of-type(2) {
+            span {
+              background: url("../assets/wechat-icon.png") no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
+        .checkedClass{
+          background-image: url("../assets/checked-icon.png");
+        }
+      }
+      .commit-btn {
+        width: 80%;
+        height: 42px;
+        line-height: 42px;
+        margin: 120px auto 0;
+        border-radius: 21px;
+        background-color: #75CBBE;
+        font-size: 18px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
   }
 </style>