giftCard.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <view class="giftCard-wrap">
  3. <image class="page-header" src="/static/giftcard/bg01.jpg"></image>
  4. <view class="module-con">
  5. <!-- 标题 -->
  6. <view class="head-con">
  7. <image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
  8. <text>礼品卡充值</text>
  9. <image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
  10. </view>
  11. <!-- 内容 -->
  12. <view class="giftcard-content">
  13. <image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
  14. <view class="giftcard-main recharge-code">
  15. <view class="inp-con">
  16. <u-input v-model="rechargeCode" placeholder="请输入充值码" :maxlength="9" input-align="center" />
  17. </view>
  18. <u-button class="recharge-btn" shape="circle" :custom-style="customBtnStyle" hover-class="none" @click="goRecharge">立即充值</u-button>
  19. </view>
  20. <image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
  21. </view>
  22. </view>
  23. <view class="module-con">
  24. <!-- 标题 -->
  25. <view class="head-con">
  26. <image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
  27. <text>使用规则</text>
  28. <image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
  29. </view>
  30. <!-- 内容 -->
  31. <view class="giftcard-content rule-cont">
  32. <image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
  33. <view class="giftcard-main rule-con">
  34. <view>1、礼品卡仅限在乐色管家助手小程序中使用;</view>
  35. <view>2、礼品卡不记名、不挂失、不兑换现金;</view>
  36. <view>3、礼品卡终生有效,充值成功后不支持退回;</view>
  37. <view>4、最终解释权归陕西智享亿家环保科技有限公司所有。</view>
  38. </view>
  39. <image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
  40. <!-- 背景图 -->
  41. <image class="leaf-left-pic" src="/static/giftcard/leaf-left-pic.png"></image>
  42. <image class="leaf-right-pic" src="/static/giftcard/leaf-right-pic.png"></image>
  43. <image class="red-envelopes" src="/static/giftcard/red-envelopes.png"></image>
  44. </view>
  45. </view>
  46. <image class="footer-bg" src="/static/giftcard/bg02.jpg"></image>
  47. <!-- 充值成功提示 -->
  48. <u-popup v-model="messagePop" mode="center" class="custom-pop" length="80%" border-radius="14" :mask-close-able="false">
  49. <view class="custom-con">
  50. <view class="pop-con">
  51. <view>恭喜您,充值成功!</view>
  52. <view>{{ldNum}}乐豆已计入您的乐豆余额。</view>
  53. </view>
  54. <view class="know-btn" @click="toPage">我知道了</view>
  55. </view>
  56. </u-popup>
  57. </view>
  58. </template>
  59. <script>
  60. import { giftCardUseCard } from '@/api/coupon'
  61. export default{
  62. data(){
  63. return{
  64. rechargeCode: '', // 充值码
  65. customBtnStyle: { // 自定义按钮样式
  66. borderColor: '#01ad99',
  67. backgroundColor: '#01ad99',
  68. color: '#fff'
  69. },
  70. messagePop: false, // 充值成功提示框
  71. ldNum: 0 // 充值乐豆数
  72. }
  73. },
  74. onLoad() {
  75. this.messagePop = false
  76. this.ldNum = 0
  77. this.rechargeCode = ''
  78. },
  79. methods: {
  80. // 校验卡号输入,只能输入字母和数字
  81. vailRcode(event){
  82. console.log(event)
  83. this.rechargeCode = event.replace(/[^\w\.\/]/ig,'')
  84. },
  85. // 立即充值
  86. goRecharge(){
  87. if(!this.rechargeCode){
  88. uni.showToast({
  89. title:"请输入充值码",
  90. icon:"none"
  91. })
  92. return
  93. }
  94. let sequence = this.rechargeCode.replace(/[^\w\.\/]/ig,'')
  95. giftCardUseCard({ sequence }).then(res => {
  96. if(res.status == 200){
  97. this.ldNum = res.data
  98. this.messagePop = true
  99. }else{
  100. this.ldNum = 0
  101. this.messagePop = false
  102. }
  103. })
  104. },
  105. // 跳转
  106. toPage(){
  107. uni.navigateBack()
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .giftCard-wrap{
  114. width: 100%;
  115. background-color: #02c9b2;
  116. .page-header{
  117. display: block;
  118. width: 100%;
  119. height: 360rpx;
  120. }
  121. .module-con{
  122. &:nth-child(2){
  123. margin-bottom: 65rpx;
  124. }
  125. .head-con{
  126. text-align: center;
  127. .tit-icon{
  128. display: inline-block;
  129. width: 62rpx;
  130. height: 41rpx;
  131. }
  132. text{
  133. display: inline-block;
  134. color: #fff;
  135. font-size: 42rpx;
  136. font-weight: bold;
  137. margin: 0 20rpx;
  138. }
  139. .tit-icon{
  140. display: inline-block;
  141. vertical-align: middle;
  142. }
  143. }
  144. .giftcard-content{
  145. position: relative;
  146. box-sizing: border-box;
  147. padding: 0 18rpx;
  148. margin-top: 38rpx;
  149. .module-header-bg{
  150. display: block;
  151. width: 100%;
  152. height: 47rpx;
  153. }
  154. .giftcard-main{
  155. width: 92%;
  156. box-sizing: border-box;
  157. margin: -19rpx 4% 0;
  158. padding: 0 37rpx;
  159. background-color: #fff;
  160. box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
  161. }
  162. .module-footer-bg{
  163. display: block;
  164. width: 92%;
  165. height: 34rpx;
  166. margin: 0 4%;
  167. }
  168. .recharge-code{
  169. padding-top: 100rpx;
  170. padding-bottom: 100rpx;
  171. .inp-con{
  172. background: url(/static/giftcard/input-bg.png) no-repeat;
  173. background-size: 100% 100%;
  174. padding: 12rpx 0;
  175. }
  176. .recharge-btn{
  177. display: block;
  178. margin-top: 46rpx;
  179. }
  180. }
  181. .rule-con{
  182. font-size: 24rpx;
  183. color: #464646;
  184. line-height: 48rpx;
  185. padding: 70rpx 37rpx;
  186. }
  187. .leaf-left-pic{
  188. position: absolute;
  189. bottom: 130rpx;
  190. left: 0;
  191. display: block;
  192. width: 44rpx;
  193. height: 69rpx;
  194. }
  195. .leaf-right-pic{
  196. position: absolute;
  197. bottom: -70rpx;
  198. right: 0;
  199. z-index: 1;
  200. display: block;
  201. width: 90rpx;
  202. height: 97rpx;
  203. }
  204. .red-envelopes{
  205. position: absolute;
  206. bottom: 145rpx;
  207. right: 0;
  208. display: block;
  209. width: 85rpx;
  210. height: 123rpx;
  211. }
  212. }
  213. .rule-cont{
  214. margin-bottom: 16rpx;
  215. }
  216. }
  217. .footer-bg{
  218. z-index: 0;
  219. display: block;
  220. width: 100%;
  221. height: 137rpx;
  222. }
  223. // 弹框样式
  224. .custom-pop{
  225. .custom-con{
  226. text-align: center;
  227. background: url(/static/giftcard/pop-bg.png) no-repeat;
  228. background-size: 100% 100%;
  229. font-size: 30rpx;
  230. color: #5a5a5a;
  231. line-height: 54rpx;
  232. .pop-con{
  233. padding: 195rpx 0 100rpx;
  234. }
  235. .know-btn{
  236. color: #16d1bc;
  237. padding: 20rpx 0;
  238. border-top: 1rpx solid rgba(213,213,213,0.8);
  239. }
  240. }
  241. }
  242. }
  243. </style>