BJ_web_developers / parkingpay

Blame view

src/components/home.vue 4.29 KB
Edit Raw Normal View History Permalink
35b48aa6   liuqimichale   init 
1
2
 
  <template>
    <div class="wrap">
82fb1f51   liuqimichale   赤峰分支 
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
      <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"/>
35b48aa6   liuqimichale   init 
17
18
19
20
21
 
    </div>
  </template>
  
  <script>
  import Loading from './Loading'
35b48aa6   liuqimichale   init 
22
23
 
  
  export default {
82fb1f51   liuqimichale   赤峰分支 
24
 
    name: 'Home',
35b48aa6   liuqimichale   init 
25
 
    components: {
82fb1f51   liuqimichale   赤峰分支 
26
 
      Loading
35b48aa6   liuqimichale   init 
27
28
29
 
    },
    data() {
      return {
82fb1f51   liuqimichale   赤峰分支 
30
 
        showflag: true,
8da434bf   liuqimichale   车场进出场支付 
31
 
        title: '',
82fb1f51   liuqimichale   赤峰分支 
32
33
34
 
        money: '',
        payArr: ['支付宝支付', '微信支付'],
        currentId: 0
35b48aa6   liuqimichale   init 
35
36
37
 
      }
    },
    computed: {
82fb1f51   liuqimichale   赤峰分支 
38
39
40
 
      // ...mapGetters([
      //   '_getshowflag', '_getPayFlag'
      // ])
35b48aa6   liuqimichale   init 
41
42
 
    },
    created() {
9a7a9240   liuqimichale   赤峰分支 
43
 
      this.$http.get('http://39.98.54.240:8090/hmQrCodeInOutPark/noCarQRcodeInOutPark')
0bfdd97a   liuqimichale   调接口 
44
45
46
47
48
49
 
        .then(function(response) {
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        })
35b48aa6   liuqimichale   init 
50
 
      setTimeout(() => {
82fb1f51   liuqimichale   赤峰分支 
51
 
        this.showflag = false
e495e419   liuqimichale   传值 
52
e495e419   liuqimichale   传值 
53
54
55
56
57
58
59
60
61
62
63
 
        // $http.post('/user', {
        //   firstName: 'Fred',
        //   lastName: 'Flintstone'
        // })
        // .then(function (response) {
        //   console.log(response);
        // })
        // .catch(function (error) {
        //   console.log(error);
        // });
35b48aa6   liuqimichale   init 
64
65
66
67
68
 
        // 模拟请求
        // this.$fetch('/api/v2/movie/top250').then((response) => {
        //   console.log(response)
        // })
        // },
145c620a   liuqimichale   传值 
69
 
        // this.handlePayFlag()
82fb1f51   liuqimichale   赤峰分支 
70
71
 
        this.title = '手机: 13911137584'
        this.money = '¥100.00'
35b48aa6   liuqimichale   init 
72
73
74
 
      }, 2000)
    },
    methods: {
82fb1f51   liuqimichale   赤峰分支 
75
76
 
      commitsure() {
        alert(this.currentId)
145c620a   liuqimichale   传值 
77
 
      }
35b48aa6   liuqimichale   init 
78
79
80
81
82
 
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
82fb1f51   liuqimichale   赤峰分支 
83
 
  <style lang="scss" scoped>
35b48aa6   liuqimichale   init 
84
85
86
87
 
    .wrap {
      width: 100%;
      height: 100%;
      position: relative;
82fb1f51   liuqimichale   赤峰分支 
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
      .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);
        }
      }
35b48aa6   liuqimichale   init 
175
176
 
    }
  </style>