<template>
  <basic-container>
    <div style="text-align: center;">
      <el-row>
        <el-col :span="24"><h2>扫码支付</h2></el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <qrcode :value="msg" :options="options"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><h4>请使用微信或支付宝（沙箱）手机客户端扫一扫</h4></el-col>
      </el-row>
      <el-row>
        1. 请勿大额支付，无法退还请知悉
      </el-row>
      <el-row>
        2. 支付宝目前是沙箱，有正式账号的老铁欢迎提供测试 - -
      </el-row>
      <el-row>
        <el-radio v-model="amount" label="1">0.01 元</el-radio>
        <el-radio v-model="amount" label="2">0.02 元</el-radio>
        <el-radio v-model="amount" label="3">0.03 元</el-radio>
      </el-row>
    </div>
  </basic-container>
</template>

<style>
</style>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'

const protocol = window.location.protocol
const host = window.location.host

export default {
  components: {
    'qrcode': VueQrcode
  },
  data() {
    return {
      amount: '1',
      msg: '',
      options: {
        height: 300,
        width: 300
      }
    }
  },
  watch: {
    amount: function(amount) {
      this.msg = `${protocol}//${host}/pay/goods/buy?amount=${amount}`
    }
  },
  created() {
    this.msg = `${protocol}//${host}/pay/goods/buy?amount=1`
  }
}
</script>
