payOptions.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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: 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. this.defaultValue = val
  67. }
  68. }
  69. }
  70. </script>
  71. <style lang="less" scoped>
  72. .pay-options {
  73. padding: 0;
  74. .pay-item {
  75. margin-top: 10upx;
  76. >view {
  77. padding: 10upx 0;
  78. font-size: 28upx;
  79. color: #666;
  80. }
  81. .pf{
  82. font-size:20rpx;
  83. }
  84. >view:last-child {
  85. border-bottom: none;
  86. }
  87. }
  88. }
  89. </style>