payOptions.vue 2.2 KB

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