exchange.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view>
  3. <navbar :config="config" backColor="#999999"></navbar>
  4. <view class="usable-integrate">
  5. <text class="usable-title">可用积分</text>
  6. <text class="usable-nums">{{ $addDecimals(integral_able , 8) }}</text>
  7. </view>
  8. <view class="box">
  9. <view class="usable-hint">
  10. <text>兑换余额</text>
  11. <service-charge title="兑换余额手续费为"></service-charge>
  12. </view>
  13. <view class="usable-input">
  14. <text class="iconfont3 usable-input-icon">&#xe619;</text>
  15. <!-- <text class="iconfont3 usable-hint-icon">&#xe619;</text> -->
  16. <u-input v-model="value" type="number" placeholder="请输入积分数量" :clearable="false" @blur="getPointToBalanceComputer"/>
  17. </view>
  18. <view class="usable-hint-info">
  19. <view class="usable-hint-item">
  20. <text class="usable-hint-title">手续费(销毁):</text>
  21. <text class="usable-hint-val">{{ result.handling_fee }}</text>
  22. </view>
  23. <view class="usable-hint-item">
  24. <text class="usable-hint-title">实际兑换积分:</text>
  25. <text class="usable-hint-val">{{ result.face_point }}</text>
  26. </view>
  27. <view class="usable-hint-item">
  28. <text class="usable-hint-title">可兑换金额:</text>
  29. <text class="usable-hint-val">{{ result.face_add_balance }}元</text>
  30. </view>
  31. <view class="usable-hint-item usable-hint-error">
  32. {{ valueError ? '*积分数量不足,请重新输入' : '' }}
  33. </view>
  34. <view class="usable-btn" @click.stop="openHintPopup()">
  35. 确认兑换
  36. </view>
  37. </view>
  38. </view>
  39. <exchange-hint ref="exchangeHint" :params="pointGiveAwayApi" :type="0" :useNums="value" :resultNum="`${result.face_add_balance}元`"></exchange-hint>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. pointToBalanceComputer,
  45. pointToBalance
  46. } from "@/api/personal-center.js"
  47. export default {
  48. data() {
  49. return {
  50. pointGiveAwayApi: {
  51. url: pointToBalance,
  52. mode: 'post',
  53. data: {
  54. value: '',
  55. user_obj_id: ''
  56. }
  57. },
  58. value: '',
  59. valueError:false,
  60. resultNum: '999元',
  61. config: {
  62. back: true, //false是tolbar页面 是则不写
  63. title: '兑换余额',
  64. color: '#1A1A1A',
  65. // autoBack:true,
  66. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  67. backgroundColor: [1, "#fff"],
  68. statusBarFontColor: '#1A1A1A'
  69. },
  70. // 手续费 / 实际转赠
  71. result: {
  72. face_point: 0,
  73. handling_fee: 0,
  74. face_add_balance:0
  75. }
  76. };
  77. },
  78. onShow() {
  79. this.getUserInfo()
  80. },
  81. watch:{
  82. value(newVal){
  83. console.log('newVal = ' , newVal)
  84. if (newVal.indexOf('.') != -1) {
  85. let arr = newVal.split('.')
  86. if (arr[1].length > 8) {
  87. this.value = Number(newVal).toFixed(8)
  88. }
  89. }
  90. if(newVal > this.integral_able){
  91. this.valueError = true
  92. }else{
  93. this.valueError = false
  94. }
  95. }
  96. },
  97. methods: {
  98. //获取个人信息
  99. getUserInfo() {
  100. let personal = uni.getStorageSync('personal');
  101. this.integral_able = personal ? personal.integral_able : '';
  102. },
  103. getPointToBalanceComputer(){
  104. if(!this.value || this.valueError){
  105. return false
  106. };
  107. this.$http.post(pointToBalanceComputer, {
  108. value: this.value
  109. }).then((res) => {
  110. if (res && res.code == 200) {
  111. this.result.face_point = res.data.face_point;
  112. this.result.handling_fee = res.data.handling_fee;
  113. this.result.face_add_balance = res.data.face_add_balance;
  114. };
  115. });
  116. },
  117. openHintPopup() {
  118. this.pointGiveAwayApi.data = {
  119. value: this.value
  120. }
  121. this.$refs.exchangeHint.open()
  122. // this.$refs.exchangeHint.open()
  123. }
  124. }
  125. }
  126. </script>
  127. <style lang="scss" scoped>
  128. @import "~./common.scss"
  129. </style>