payOptions.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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" v-if="hasBalancePay" @tap="changeItem(0)">
  8. <view>
  9. <uni-icons size="18" :type="defaultValue=='0'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
  10. </view>
  11. <view class="flex align_center">充值余额(<text class="pf">¥</text>{{balance}})</view>
  12. </view>
  13. <view class="flex align_center justify_between" v-if="hasPay" @tap="changeItem(1)">
  14. <view>
  15. <uni-icons size="18" :type="defaultValue=='1'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
  16. </view>
  17. <view class="flex_auto u-text-right">微信支付</view>
  18. </view>
  19. <view class="flex align_center justify_between" v-if="!hasPay" @tap="changeItem(2)">
  20. <view>
  21. <uni-icons size="18" :type="defaultValue=='2'?'checkbox-filled':'checkbox'" color="#2196f3"></uni-icons>
  22. </view>
  23. <view class="flex_auto u-text-right">线下支付</view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. props: {
  31. title: {
  32. type: String,
  33. default: '支付方式'
  34. },
  35. value: {
  36. type: [Number,String],
  37. default: '2'
  38. },
  39. balance: {
  40. type: Number,
  41. default: 0
  42. },
  43. hasBalancePay:{
  44. type: Boolean,
  45. default: false
  46. },
  47. hasPay: {
  48. type: Boolean,
  49. default: false
  50. }
  51. },
  52. data() {
  53. return {
  54. defaultValue: this.value,
  55. }
  56. },
  57. methods: {
  58. changeItem(val){
  59. this.defaultValue = val
  60. this.$emit('input',this.defaultValue)
  61. this.$emit('change',this.defaultValue)
  62. }
  63. },
  64. watch: {
  65. value(val) {
  66. console.log(val)
  67. this.defaultValue = val
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="less" scoped>
  73. .pay-options {
  74. padding: 0;
  75. .pay-item {
  76. margin-top: 10upx;
  77. >view {
  78. padding: 10upx 0;
  79. font-size: 28upx;
  80. color: #666;
  81. }
  82. .pf{
  83. font-size:20rpx;
  84. }
  85. >view:last-child {
  86. border-bottom: none;
  87. }
  88. }
  89. }
  90. </style>