discountModal.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <u-mask class="discountModal" :show="isShow" :mask-click-able="false">
  3. <view class="discount-con">
  4. <view class="discount-main">
  5. <view class="text-c">请输入折扣金额</view>
  6. <view class="discount-price text-c">
  7. <u-input class="price" v-model="discountAmount" @input="numberToFixed" :clearable="false" type="number" style="display: inline-block;vertical-align: middle;" />元
  8. </view>
  9. </view>
  10. <view class="discount-footer">
  11. <view class="button-cancel" @click="isShow=false">取消</view>
  12. <view class="button-confirm" @click="handleConfirm">确定</view>
  13. </view>
  14. </view>
  15. </u-mask>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. openModal: { // 弹框显示状态
  21. type: Boolean,
  22. default: false
  23. },
  24. infoData: {
  25. tyoe: Object,
  26. default: ()=>{
  27. return null
  28. }
  29. }
  30. },
  31. data() {
  32. return {
  33. isShow: this.openModal, // 是否打开弹框
  34. discountAmount: ''
  35. }
  36. },
  37. methods: {
  38. // 确认
  39. handleConfirm(){
  40. this.$emit('confirm', this.printType)
  41. },
  42. numberToFixed(){
  43. if(this.discountAmount){
  44. this.discountAmount = Math.floor(this.discountAmount * 100) / 100 // 保留两位小数,不四舍五入
  45. if(this.discountAmount < 0){
  46. this.discountAmount = Math.abs(this.discountAmount) // 金额为正数
  47. }
  48. }
  49. }
  50. },
  51. watch: {
  52. // 父页面传过来的弹框状态
  53. openModal (newValue, oldValue) {
  54. this.isShow = newValue
  55. },
  56. // 重定义的弹框状态
  57. isShow (newValue, oldValue) {
  58. if (!newValue) {
  59. this.$emit('close')
  60. }
  61. }
  62. }
  63. }
  64. </script>
  65. <style lang="scss" scoped>
  66. .discountModal{
  67. width: 100%;
  68. height: 100%;
  69. position: absolute;
  70. left: 0;
  71. top: 0;
  72. .text-c{
  73. text-align: center;
  74. }
  75. .discount-con{
  76. width: 78%;
  77. margin: 45% auto 0;
  78. background-color: #fff;
  79. border-radius: 24upx;
  80. .discount-main{
  81. padding: 20upx 20upx;
  82. .discount-price{
  83. margin: 10upx 0;
  84. .price{
  85. border-bottom: 1upx solid #e4e7ed;
  86. }
  87. }
  88. }
  89. .discount-footer{
  90. font-size: 30upx;
  91. display: flex;
  92. justify-content: space-between;
  93. align-items: center;
  94. text-align: center;
  95. border-top: 1upx solid #E5E5E5;
  96. .button-cancel{
  97. color: #999;
  98. border-right: 1upx solid #E5E5E5;
  99. flex-grow: 1;
  100. padding: 20upx 0;
  101. }
  102. .button-confirm{
  103. color: #2A86F4;
  104. flex-grow: 1;
  105. padding: 20upx 0;
  106. }
  107. }
  108. }
  109. }
  110. </style>