<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">选择支付方式</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>
    <van-col span="24">
     <van-field name="radio" label="支付方式">
    <template #input>
        <van-radio-group v-model="radio" direction="vertical">
        <van-radio name="1" class="title1">微信支付</van-radio>
        <van-radio name="2" class="title1">支付宝</van-radio>
        </van-radio-group>
    </template>
    </van-field>
    </van-col>
     <van-col span="24"><van-button type="info" @click="select()" >确定</van-button></van-col>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      radio: '1'

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
  },
  methods: {
    select: function () { // 获取房产信息
      console.info('radio', this.radio)
      // eslint-disable-next-line eqeqeq
      if (this.radio == '1') {
        this.$router.push('MakePayUrl')
      } else {
        this.$toast('支付宝支付尚未开通')
      }
    },

    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    }

  }
}
</script>

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

  height: 30px;
  line-height: 30px;
}
.value1 {
  color: #999;
  font-size: 15px;
}
.borderTop{
    margin-top:50px;
}
.paddingLeft15{
    padding-left: 15px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
}
</style>
