vue 停车场车牌号键盘微信支付

于 2018-10-15 14:48:01 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： es6 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27318177/article/details/83058314

应公司要求现在需做某医院的停车厂微信公众号支付功能

前端框架 Vant https://youzan.github.io/vant/#/zh-CN/intro

预览demo:http://tangyupeng.top/card/index.html#/

主要功能需求：用户输入手机号监测该手机号是否注册，注册则进入车辆输入界面

 

现目前只处理了前端的逻辑操作，后续会根据接口处理各种状态，包括微信支付，后续更新

该界面为用户登录，用了vant的数字键盘，方便用户输入

该界面为用户登录后的车辆输入键盘

如果该手机号绑定多辆车后，则有快捷输入方法，用户直接点击车牌号直接选填入输入框

 

该界面为用户输入自己车牌号后点击支付就可进行微信支付

 

 

login.vue

<template>
  <div class="hello">
      <div class="parkinput">
            <van-cell-group >
            <van-field 
                v-model="value" 
                label="手机号"
                @blur="shows = false" 
                 @focus="show = true" 
                 placeholder="请输入用户名" 
                 ref="keyvalue" 
                 maxlength="11"
                 
            />

            <van-field
                v-if="stateShow"
                v-model="code"
                type="number"
                label="验证码"
                placeholder="请输入验证码"
                ref="code" 
            />
            </van-cell-group>

            
      </div>
      <div class="btnbox">
          <van-button size="large" class="surebtn" @click="surebtn">登录</van-button>
      </div>
      <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="#"
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
        @close="onclose"
        />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'HelloWorld',
  data () {
    return {
        stateShow:false,
        tell:"",
        code:"",
        value: '',
        showKeyboard: true,
        show: false
    }
  },
    methods: {
            onInput(value) {
                console.log(this);
                console.log(value);
                this.value = this.value+value;
                console.log(this.value);
                console.log(this.value.length);
                var keyNumlength=this.value.length;
                var tell=/^1[3|4|5|7|8][0-9]\d{8}$/;
                if(keyNumlength>11){
                    Toast('请输入正确的手机号!');
                }else if(keyNumlength==11&&tell.test(this.value)){
                    this.stateShow=true;
                    this.$emit('headCallBack', 'true'); 
                }else if(keyNumlength<11){
                    this.stateShow=false;
                }
            },
            onDelete() {
                this.value = this.value.slice(0, this.value.length - 1);
                console.log(this.$refs.keyvalue);
                var keyNumlength=this.value.length;
                if(keyNumlength<11){
                    this.stateShow=false;
                }
            },
            onclose(){
                console.log(this.value);
                this.$refs.keyvalue.blur();
            },
            surebtn(){
                var keyNumlength=this.value.length;
                var tell=/^1[3|4|5|7|8][0-9]\d{8}$/;
                if(keyNumlength!=11){
                    Toast("请输入正确的手机号！");
                }else if(!tell.test(this.value)){
                    Toast("请输入正确的手机号！");
                }else{
                    console.log("a");
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.parkinput{
    padding:20px 10px;
}
.surebtn{
    background: #16BFFF;
    color: #fff;
    border-radius: 10px;
    margin-top: 40px;
    width: 80%;
        height: 45px;
    line-height: 45px;
}
.btnbox{
    text-align: center;
}
</style>

 

输入键盘支付页面 payment.vue

<template>
  <div id="dispense" navbar-fixed style="width:100%;">
    <div class="content-car-number">
      <div class="car-content-title">
        <span class="titlespan">请输入车牌号查询停车费</span>
        
      </div>
      <div class="content-section">
        <div class="content-section-flex flex-card">
          <div class="content-section-flex flex-card-border">
              <div class="paytonst" v-if="numlist">
                  <ul>
                      <li><span class="yuxradis"></span><span @click="carnumclick('京A56480')">京A 56489</span></li>
                      <li><span class="yuxradis"></span><span @click="carnumclick('渝D12345')">渝D12345</span></li>
                      <li><span class="yuxradis"></span><span @click="carnumclick('川C23456')">川C23456</span></li>
                      <li><span class="yuxradis"></span><span @click="carnumclick('京A45678')">京A45678</span></li>
                  </ul>
                    <div class="paytext">
                        <div>
                            <img src="./../../assets/card.png" alt="">
                        </div>
                        <div>
                            <p class="xqstop">新桥医院停车场</p>
                            <p class="addresstexy">重庆市渝北区龙山街道28号 023-25689452</p>
                        </div>
                    </div>
              </div>

            <button id="font" class="flex-btn" @click="btnClickYue" v-bind:class="{isClick: isYue }">
              {{areaName}}
            </button>
            <span class="blank-border blank-border-first"></span>
            <button id='letter' class="flex-btn" @click="btnClickA" v-bind:class="{isClick: isA}">
              {{areaLetter}}
            </button>
            <div class="flex-mid"><span></span></div>
            <div class="flex-btns">
              <button id='numOne' @click="btnClickNum('one')" v-bind:class="{isNumClick: isNumOne }">{{numOne}}</button>
              <span class="blank-border"></span>
              <button id='numTwo' @click="btnClickNum('two')" v-bind:class="{isNumClick: isNumTwo }">{{numTwo}}</button>
              <span class="blank-border"></span>
              <button id='numThree' @click="btnClickNum('three')" v-bind:class="{isNumClick: isNumThree }">{{numThree}}
              </button>
              <span class="blank-border"></span>
              <button id='numFour' @click="btnClickNum('four')" v-bind:class="{isNumClick: isNumFour }">{{numFour}}
              </button>
              <span class="blank-border"></span>
              <button id='numFive' @click="btnClickNum('five')" v-bind:class="{isNumClick: isNumFive }">{{numFive}}
              </button>
              <span class="blank-border" v-if="checkbox"></span>
              <button v-if="checkbox" id='numSix' @click="btnClickNum('six')"
                      v-bind:class="{isNumClick: isNumSix }">{{numSix}}
              </button>
            </div>
          </div>
        </div>
        <van-checkbox v-model="checkbox" @change="carTypeChange">新能源</van-checkbox>
      </div>
    </div>
    <div class="paymentcontent">
        <p>停车详情</p>
        <van-cell-group>
            <van-cell title="停车场:" value="新桥医院停车场" />
            <van-cell title="停车时长:" value="1h 14min 37s" />
            <van-cell title="驾入时间:" value="2018-10-11  10:01:37" />
            <van-cell title="停车费:" value="¥ 4.00" />
        </van-cell-group>
    </div>
    <div class="surepay">
        <p>还需支付<span class="paynum">¥4.00</span></p>
    </div>
    <div class="searchPay-btn">
        <van-button type="primary" @click="addCar" class="paybtn">支付</van-button>
    </div>
    <div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
      <button class="btn-complete" @click="completeClick"><span>完成</span></button>
      <div v-if="keyboard == 'txt'">
        <div class="keyboard-row" v-for="(item,rows) in carTxt">
          <button class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
          </button>
        </div>
        <div class="keyboard-row">
          <!-- <div class="keyboard-row-items"> -->
          <button class="keyboard-row-item bottom" @click="btnBottomClick('新')">新</button>
          <button class="keyboard-row-item bottom" @click="btnBottomClick('临')">临</button>
          <button v-for="j in noneBottomtxt" class="none-botton">{{j}}</button>
          <div class="keyboard-row-item clear" @click="clearClick">
          </div>
          <!-- </div> -->
        </div>
      </div>
      <div v-if="keyboard == 'num'">
        <div class="keyboard-row" v-for="(item,rows) in carNum">
          <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item"
                  v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
          </button>
        </div>
        <div class="keyboard-row">
          <!-- <div class="keyboard-row-bottom"> -->
          <button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom"
                  @click="btnBottomNumClick(item)">{{item}}
          </button>
          <button v-for="j in noneBottom" class="none-botton">{{j}}</button>
          <div class="keyboard-row-item clear" @click="clearClick">
          </div>
          <!-- </div> -->

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar,Toast } from 'vant';
    // import {ADD_VEHICLE} from '../url'
    export default{
        name: 'Dispense',
        data () {
            return {
                numlist:false,
                carNum:"",
                isFeeHourClick: false,
                checkbox: false,
                isDown: false,
                isUp: false,
                selected: null,
                isSelectx: false,
                isSelectl: false,
                key: 1,
                areaName: '',
                areaLetter: '',
                numOne: '',
                numTwo: '',
                numThree: '',
                numFour: '',
                numFive: '',
                numSix: '',
                isYue: false,
                keyboardShow: false,
                keyboard: false,
                isA: false,
                isNumOne: false,
                isNumTwo: false,
                isNumThree: false,
                isNumFour: false,
                isNumFive: false,
                isNumSix: false,
                isDisable: false,
                isOne: false,
                isTwo: false,
                isThree: false,
                isFour: false,
                isFive: false,
                isSix: false,
                isSeven: false,
                isEight: false,
                isOther: false,
                carTxt: [
                    { name: ['渝', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑'] },
                    { name: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂'] },
                    { name: ['琼', '粤', '川', '贵', '云', '藏', '陕', '甘', '青', '宁'] }
                ],
                carNumBottom: ['W', 'X', 'Y', 'Z'],
                noneBottom: ['', '', '', ''],
                noneBottomtxt: ['', '', '', '', '', ''],
                carNum: [
                    { name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] },
                    { name: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'] },
                    { name: ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'] }
                ],
                addedCarNum: '',
                carnump:""
            }
        },
        watch: {
            checkbox: function (val) {
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                const vm = this
                if (!val) { // 切换到普通车牌
                    if (vm.numFour) {
                        vm.isNumFive = true
                        vm.key = 7
                        console.log(4, val)
                    }
                } else { // 切换到新能源车牌
                    if (vm.numFive) {
                        vm.isNumSix = true
                        vm.key = 8
                        console.log(3, val)
                    }
                }
            }
        },
        methods: {
            carnumclick(carnum){
                console.log(carnum.split("")[0]);
                var numlist=carnum.split("");
                for(var i=0; i<numlist.length;i++){
                    console.log(numlist[i])
                    this.areaName=numlist[0];
                    this.areaLetter=numlist[1];
                    this.numOne=numlist[2];
                    this.numTwo=numlist[3];
                    this.numThree=numlist[4];
                    this.numFour=numlist[5];
                    this.numFive=numlist[6];
                    this.numSix=numlist[7];
                }
            },
            feeHourClick (val) {
                if (this.areaName && this.areaLetter && this.numOne && this.numTwo && this.numThree && this.numFour && this.numFive) {
                    if (this.checkbox && this.numSix) {
                        this.isFeeHourClick = true
                    } else if (!this.checkbox) {
                        this.isFeeHourClick = true
                    }
                }
                this.keyboardShow = false
                if (val === 'one') {
                    this.isOne = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'two') {
                    this.isTwo = true
                    this.isOne = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'three') {
                    this.isThree = true
                    this.isTwo = false
                    this.isOne = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'four') {
                    this.isFour = true
                    this.isTwo = false
                    this.isThree = false
                    this.isOne = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'five') {
                    this.isFive = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isOne = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'six') {
                    this.isSix = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isOne = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'seven') {
                    this.isSeven = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isOne = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'eight') {
                    this.isEight = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isOne = false
                    this.isOther = false
                } else if (val === 'other') {
                    this.isOther = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOne = false
                }
            },
            carTypeChange (val) {
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                if (!val) { // 切换到普通车牌
                    if (this.numFour) {
                        this.isNumFive = true
                        this.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (this.numFive) {
                        this.isNumSix = true
                        this.key = 8
                    }
                }
            },
            btnClickYue () {
                this.isYue = true
                this.isA = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'txt'
                this.key = 1
            },
            btnWordClick (rows, index, i) {
                var mun=this.carNum+i;
                console.log(mun);
                console.log(rows);
                console.log(index);
                console.log(this.carnump+i);
                console.log(i);
                var num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix+i;
                console.log(num);
                this.selected = i
                if (this.key === 1) {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = i
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                if (this.key === 7 || this.key === 8) {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学','武']
                    this.noneBottom = ['']
                } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z']
                    this.noneBottom = ['', '', '', '']
                }
            },
            btnBottomClick (val) {
                if (val === '新') {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = '新'
                    this.isSelectx = true
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (val === '临') {
                    this.areaName = '临'
                    this.isSelectl = true
                    this.isSelectx = false
                    this.isDisable = true
                    this.areaLetter = ''
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                }
            },
            btnBottomNumClick (i) {
                this.selected = i
                if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
            },
            btnClickA () {
                this.isDisable = true
                this.isA = true
                this.isYue = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'num'
                this.key = 2
            },
            btnClickNum (name) {
                console.log(name);
                if (this.isSelectl) {
                    this.isDisable = true
                } else {
                    this.isDisable = false
                }
                this.keyboard = 'num'
                this.keyboardShow = true
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = true
                if (name === 'one') {
                    this.isNumOne = true
                    this.key = 3
                } else if (name === 'two') {
                    this.isNumTwo = true
                    this.key = 4
                } else if (name === 'three') {
                    this.isNumThree = true
                    this.key = 5
                } else if (name === 'four') {
                    this.isNumFour = true
                    this.key = 6
                } else if (name === 'five') {
                    this.isNumFive = true
                    this.key = 7
                } else if (name === 'six') {
                    this.isNumSix = true
                    this.key = 8
                }
                if (name === 'five' || name === 'six') {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学']
                    this.noneBottom = ['']
                } else {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z']
                    this.noneBottom = ['', '', '', '']
                }
            },
            completeClick () {
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = false
                this.isDown = true
                this.keyboardShow = false
            },
            clearClick () {
                if (this.key === 1) {
                    this.areaName = ''
                } else if (this.key === 2) {
                    document.getElementById('font').click()
                    this.areaLetter = ''
                } else if (this.key === 3) {
                    document.getElementById('letter').click()
                    this.numOne = ''
                } else if (this.key === 4) {
                    document.getElementById('numOne').click()
                    this.numTwo = ''
                } else if (this.key === 5) {
                    document.getElementById('numTwo').click()
                    this.numThree = ''
                } else if (this.key === 6) {
                    document.getElementById('numThree').click()
                    this.numFour = ''
                } else if (this.key === 7) {
                    document.getElementById('numFour').click()
                    this.numFive = ''
                } else if (this.key === 8) {
                    document.getElementById('numFive').click()
                    this.numSix = ''
                }
            },
            addCar () {
                var num
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num === '') {
                    Toast('请输入车牌');
                } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
                    Toast('请输入完整车牌');
                } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
                    Toast('请输入完整车牌');
                } else {
                    console.log(num);
                    // let data = {
                    //     vehiclenum: num
                    // }
                    // this.$http.post(ADD_VEHICLE, data).then(res => {
                    //   if (res.data.ret === 0) {
                    //     this.addedCarNum = num
                    //     this.$router.push({name: 'AddSuccess', params: {addedCarNum: this.addedCarNum}})
                    //   } else {
                    //     this.$dialog.toast({mes:res.data.message,timeout:1200})
                    //   }
                    // })
                }
            }
        },
        mounted () {
            this.btnClickYue()
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                vm.areaName = ''
                vm.areaLetter = ''
                vm.numOne = ''
                vm.numTwo = ''
                vm.numThree = ''
                vm.numFour = ''
                vm.numFive = ''
                vm.numSix = ''
            })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
.van-checkbox{
    float: right;
    padding-right: 14px;
    font-size: 13px;
}
.van-checkbox__icon, .van-checkbox__label{
    line-height: 15px;
}
.van-checkbox__icon .van-icon{
    width: 15px;
    height: 15px;
}
.ze-checkbox-text{
    font-size:13px;
        padding-right: 10px;
}
.ze-checkbox{
        float: right;
}
.surepay{
    font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;
    text-align: center;
    margin: 30px 0;
}
.paynum{
    font-family: PingFangSC-Regular;
font-size: 28px;
color: #EA2929;
letter-spacing: -0.7px;
    padding-left: 10px;
}
.paybtn{
        height: 35px;
    line-height: 35px;
    background: #0290FF;
    border: 1px solid #0290FF;
    width: 100px;
    float: right;
}
.titlespan{
    font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;
}
.paymentcontent{
        margin-top: 40px;
    margin: 10px;
    border: 1px solid #E8E8E8;
    color: #4386BF !important;
    background: #fff;
}
.paymentcontent p{
        opacity: 0.28;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #121212;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 8px;
    background: #fff;
}
.van-cell{
    color: #4386BF !important;
}
  #dispense {
    .navbar {
      .right{
        a{
          font-size: 30px;
          color: #ffc200;
        }
      }
    }
    .ze-checkbox > input[type=checkbox] {
      position: absolute;
      left: -9999em;
    }
    .yuxradis{
        width: 5px;
        height: 5px;
        background: #ccc;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        top: -2px;
        margin-right: 5px;
    }
    .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon {
      background-color: currentColor;
      border-color: #ffC400;
    }
    .paytext img{
        width: 25px;
        padding: 10px 4px;
    }
    .paytext{
            display: flex;
        width: 100%;
        font-size: 13px;
        text-align: left;
        border-top: 1px solid #E8E8E8;
            padding-top: 10px;
    }
    .addresstexy{
        opacity: 0.8;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #909191;
        line-height: 20px;
    }
    .xqstop{
            font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #212223;
    }
    .paytonst ul li{
        float: left;
        line-height: 30px;
        padding-left: 10px;
        color: #346df1;
    }
    .paytonst{
        padding: 5px 10px;
        position: absolute;
        top: 50px;
        z-index: 99999;
        border: 1px solid #ccc;
        left: 0;
        font-size: 13px;
        width: 220px;
        background: #fff;
        box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);
    }
    .paytonst:after{
        content:"";
         width:0;
        height:0;
        border-width:0 10px 10px;
        border-style:solid;
        border-color:transparent transparent #fff;/*透明 透明  灰*/
        position: absolute;
        top: -5px;
        left: 10px;
    }
    .ze-checkbox-icon {
      border: 1px solid #ccc; /*no*/
      border-radius: 2px;
      display: inline-block;
      position: relative;
      z-index: 10;
      vertical-align: bottom;
      pointer-events: none;
      > i {
        content: "";
        position: absolute;
        top: 45%;
        left: 50%;
        border: 3px solid #ffC400; /*no*/
        border-top: 0;
        border-left: 0;
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
      }
    }

    .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon > i {
      -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
      transform: translate(-50%, -50%) rotate(45deg) scale(1);
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
    .content-car-number {
        text-align: center;
        height:120px;
      .car-content-title {
        display: block;
        justify-content: space-between;
        padding: 0 32px;
        margin-bottom: 16px;
        span {
          font-size: 15px;
        }
        .ze-checkbox {
          display: flex;
          align-items: center;
        }
        .ze-radio-text {
          font-size: 13px;
        }
        .ze-checkbox-icon {
          color: #FFEDB1 !important;
          margin-right: 8px;
        }
      }
      .content-section {
        .content-section-flex {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          margin-bottom: 5px;
          .blank-border {
            height: 40px;
            width: 1px; /*no*/
            border-right: 1px solid #ddd; /*no*/
            float: left;
            margin-left: 0px;
            z-index: 1;
            &.blank-border-first {
              margin-top: 0px;
            }
          }
          &.flex-card {
            color: #000;
            .flex-btn {
              width: 40px;
              height: 40px;
              border: none;
              text-align: center;
              background: #fff;
              font-size: 20px;
              color: #000;

            }
            .flex-btns {
              text-align: center;
              background: #fff;
              width: fit-content;
              position: relative;
              height: 40px;
              button {
                width: 34px;
                height: 40px;
                border: none;
                font-size: 20px;
                color: #000;
                border-radius: 50%;
                background: transparent;
                float: left;
                margin-left: 0px;
                z-index: 2;
                position: relative;
                &:first-child {
                  margin-left: 0;
                }
              }
            }
            .flex-mid {
              margin: 0 0.1rem;
              span {
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #ddd;
              }
            }
            .isClick {
              border: 1px solid #ffc200; /*no*/
              z-index: 50;
              border-radius: 8px;
            }
            .isNumClick {
              border-radius: 8px !important;
              border: 1px solid #ffc200 !important; /*no*/
              z-index: 10;
              background-color: #fff !important;
            }
          }
          .flex-card-border {
            border: 1px solid #ddd; /*no*/
            border-radius: 8px;
            background: #fff;
            position: relative;
          }
        }
      }
    }
    .fee-hours {
      padding: 0 32px;
      margin-bottom: 80px;
      .fee-hours-title {
        margin-bottom: 16px;
        font-size: 15px;
      }
      .fee-hours-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;
        &.fee-hours-num {
          display: block;
        }
      }
      .fee-hours-num {
        width: 102px;
        height: 34px;
        font-size: 13px;
        background: #ececec;
        border-radius: 8px;
        text-align: center;
        line-height: 34px;
      }
      .isFeeHour {
        background: #ffeeb1;
      }
    }
    .searchPay-btn {
      text-align: center;
      /*background-color: #f6f6f6;*/
      margin: 0 32px 0;
      button {
        border-radius: 8px;
        margin-bottom:10px;
        &.searchPay-btn-click {
          box-shadow: 0px 5px 10px 0px rgba(255, 227, 135, 1);
          background: #ffc200;
          color: #101010;
        }
      }
    }
    .keyboard {
      width: 100%;
      height: 300px;
      position: fixed;
      bottom: -300px;
      background: #eeeeee;
      z-index: 10;
      &.animationDown {
        animation: slide_dowms 0.3s ease-out;
        animation-fill-mode: forwards;
      }
      &.animationUp {
        animation: slide_ups 0.3s ease-out;
        animation-fill-mode: forwards;
      }
      .btn-complete {
        height: 40px;
        text-align: right;
        color: #ffc200;
        font-size: 20px;
        width: 100%;
        background: #fff;
        border: none;
        border-top: 1px solid #eee;
        margin-bottom: 10px;
        span {
          margin-right: 30px;
        }
      }
      .keyboard-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        color: #333;
        &:first-child {
          margin-top: 0;
        }
        .keyboard-row-items {
          display: flex;
          justify-content: left;
        }
        .keyboard-row-bottom {
          display: flex;
          justify-content: space-between;
        }
        .keyboard-row-item {
          width: 45px;
          height: 45px;
          background: #fff;
          font-size: 15px;
          text-align: center;
          border: 1px solid #ccc; /*no*/
          border-radius: 10px;
          color: #333;
          &.bottom {
            height: 45px;
            width: 45px;
            line-height: 45px;
            background: #fff;
            color: #333;
            /*margin-right: 0.08rem;*/
          }
          &.clear {
            width: 90px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 62px;
            }
          }
        }
        .none-botton {
          border: none;
          height: 80px;
          width: 66px;
          visibility: hidden;
        }
      }
      button {
        &:active {
          background: #f4f4f4 !important;
          color: #999 !important;
        }
      }
    }
    @keyframes slide_ups {
      from {
        bottom: -300px;
      }
      to {
        bottom: 0px;
      }
    }
    @keyframes slide_dowms {
      from {
        bottom: 0px;
      }
      to {
        bottom: -320px;
      }
    }
    button:disabled {
      background: #f4f4f4 !important;
      color: #8f8f8f !important;
    }
    .active {
      &:active {
        background: #f4f4f4 !important;
        color: #999 !important;
      }
    }
  }
</style>

 

index.vue 显示两个组件

 

<template>
  <div class="hello">
    <logint v-if="logintype" v-on:headCallBack="headCall"></logint>
    <payment v-if="paymentype"></payment>
  </div>
</template>

<script>
import logint from './login'
import payment from './payment'
export default {
  name: 'HelloWorld',
  data () {
    return {
      logintype:true,
      paymentype:false,
      msg: 'Welcomeaa to Your Vue.js App'
    }
  },
  methods: {
    headCall:function(msg){
      console.log(msg);
      if(msg=="true"){
        this.paymentype=true;
        this.logintype=false;
      }
    }
  },
  components:{
      logint,payment
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值