paymoment.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <view>
  3. <van-radio-group >
  4. <van-cell-group
  5. v-for="(item, index) in list"
  6. :key="index"
  7. >
  8. <van-cell
  9. :title="item.title"
  10. @click="onChange(index)"
  11. >
  12. <template slot="icon" style="padding-right: 10upx;">
  13. <van-radio-group :value="radio" >
  14. <van-radio checked-color="#D9332E" :name="index" >
  15. </van-radio>
  16. </van-radio-group>
  17. </template>
  18. </van-cell>
  19. </van-cell-group>
  20. </van-radio-group>
  21. <view class="payMoney">支付</view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. list:[
  29. {title:'微信支付'},
  30. {title:'支付宝支付'},
  31. {title:'圈币支付'}
  32. ],
  33. radio: 0
  34. }
  35. },
  36. methods: {
  37. onChange(index) {
  38. this.radio = index;
  39. },
  40. payMoney() {
  41. if(this.radio == 0) {
  42. // 微信支付
  43. }else if(this.radio == 1) {
  44. // 支付宝支付
  45. }else {
  46. // 圈币支付
  47. }
  48. }
  49. }
  50. }
  51. </script>
  52. <style>
  53. .payMoney {
  54. width: 90%;
  55. color: #fff;
  56. background-color: #D9332E;
  57. position: fixed;
  58. text-align: center;
  59. padding: 20upx 0;
  60. bottom: 5%;
  61. left: 5%;
  62. }
  63. </style>