receive.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <view class="container">
  3. <view class="search-wrapper">
  4. <view class="search-input">
  5. <view class="search-input-wrapper">
  6. <view class="right">
  7. <input v-model="code" class="input" placeholder="请输入卡券核销码" type="text"></input>
  8. </view>
  9. <view class="scan u-icon-wrap">
  10. <view class="icon" @click="doScan">
  11. <u-icon name="scan"></u-icon>
  12. </view>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="main-form">
  18. <view class="footer">
  19. <view class="btn-wrapper">
  20. <view class="btn-item btn-item-main" :class="{ disabled }" @click="doSubmit()">确定兑换</view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import * as couponApi from '@/api/coupon'
  28. export default {
  29. data() {
  30. return {
  31. code: '',
  32. // 按钮禁用
  33. disabled: false
  34. }
  35. },
  36. /**
  37. * 生命周期函数--监听页面加载
  38. */
  39. onLoad(options) {
  40. this.code = options.code ? options.code : '';
  41. },
  42. methods: {
  43. /**
  44. * 扫码
  45. */
  46. doScan() {
  47. const app = this;
  48. uni.scanCode({
  49. success: function(res) {
  50. app.code = res.result;
  51. }
  52. });
  53. },
  54. /**
  55. * 提交兑换
  56. */
  57. doSubmit() {
  58. const app = this;
  59. app.disabled = true;
  60. couponApi.receive({ 'couponId': 0, 'receiveCode': app.code })
  61. .then(result => {
  62. app.code = '';
  63. app.disabled = false;
  64. // 显示提示
  65. if (parseInt(result.code) === 200) {
  66. app.$success("兑换成功!");
  67. } else {
  68. app.$error(result.message);
  69. }
  70. })
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss" scoped>
  76. .container {
  77. padding: 20rpx;
  78. min-height: 100vh;
  79. background: #f7f7f7;
  80. }
  81. .search-wrapper {
  82. display: flex;
  83. height: 100rpx;
  84. margin-top: 80rpx;
  85. padding: 0 5rpx;
  86. }
  87. // 搜索输入框
  88. .search-input {
  89. width: 100%;
  90. background: #fff;
  91. border-radius: 10rpx 0 0 10rpx;
  92. box-sizing: border-box;
  93. overflow: hidden;
  94. .search-input-wrapper {
  95. display: flex;
  96. .right {
  97. flex: 1;
  98. input {
  99. font-size: 30rpx;
  100. height: 100rpx;
  101. line-height: 100rpx;
  102. padding-left: 30rpx;
  103. .input-placeholder {
  104. color: #aba9a9;
  105. }
  106. }
  107. }
  108. .scan {
  109. display: flex;
  110. width: 60rpx;
  111. justify-content: center;
  112. align-items: center;
  113. .icon {
  114. display: block;
  115. color: #b4b4b4;
  116. font-size: 48rpx;
  117. }
  118. }
  119. }
  120. }
  121. /* 底部操作栏 */
  122. .footer {
  123. margin-top: 100rpx;
  124. .btn-wrapper {
  125. height: 100%;
  126. display: flex;
  127. align-items: center;
  128. padding: 0 5rpx;
  129. }
  130. .btn-item {
  131. flex: 1;
  132. font-size: 28rpx;
  133. height: 80rpx;
  134. line-height: 80rpx;
  135. text-align: center;
  136. color: #fff;
  137. border-radius: 40rpx;
  138. }
  139. .btn-item-main {
  140. background: linear-gradient(to right, #f9211c, #ff6335);
  141. // 禁用按钮
  142. &.disabled {
  143. background: #ff9779;
  144. }
  145. }
  146. }
  147. </style>