payOptions.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="pay-options">
  3. <view class="flex align_center justify_between">
  4. <text>{{title}}:</text>
  5. </view>
  6. <view class="pay-item">
  7. <view class="flex align_center justify_between" @tap="changeItem(0)">
  8. <view>
  9. <uni-icons size="18" :type="defaultValue=='0'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
  10. </view>
  11. <view>充值余额(<text class="pf">¥</text>{{balance}})</view>
  12. </view>
  13. <view class="flex align_center justify_between" @tap="changeItem(1)">
  14. <view>
  15. <uni-icons size="18" :type="defaultValue=='1'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
  16. </view>
  17. <view>微信支付</view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. props: {
  25. title: {
  26. type: String,
  27. default: '支付方式'
  28. },
  29. value: {
  30. type: String,
  31. default: '1'
  32. },
  33. balance: {
  34. type: Number,
  35. default: 0
  36. }
  37. },
  38. data() {
  39. return {
  40. defaultValue: this.value,
  41. }
  42. },
  43. methods: {
  44. changeItem(val){
  45. this.defaultValue = val
  46. this.$emit('input',this.defaultValue)
  47. this.$emit('change',this.defaultValue)
  48. }
  49. },
  50. watch: {
  51. value(val) {
  52. this.defaultValue = val
  53. }
  54. }
  55. }
  56. </script>
  57. <style lang="less" scoped>
  58. .pay-options {
  59. padding: 0;
  60. .pay-item {
  61. margin-top: 10upx;
  62. >view {
  63. padding: 10upx 0;
  64. font-size: 28upx;
  65. color: #666;
  66. }
  67. .pf{
  68. font-size:20rpx;
  69. }
  70. >view:last-child {
  71. border-bottom: none;
  72. }
  73. }
  74. }
  75. </style>