giftCard.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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" @input="vailRcode" placeholder="请输入充值码(8位字母或数字)" :maxlength="8" 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. giftCardUseCard({ sequence: this.rechargeCode }).then(res => {
  95. if(res.status == 200){
  96. this.ldNum = res.data
  97. this.messagePop = true
  98. }else{
  99. this.ldNum = 0
  100. this.messagePop = false
  101. }
  102. })
  103. },
  104. // 跳转
  105. toPage(){
  106. uni.navigateBack()
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="scss" scoped>
  112. .giftCard-wrap{
  113. width: 100%;
  114. background-color: #02c9b2;
  115. .page-header{
  116. display: block;
  117. width: 100%;
  118. height: 360rpx;
  119. }
  120. .module-con{
  121. &:nth-child(2){
  122. margin-bottom: 65rpx;
  123. }
  124. .head-con{
  125. text-align: center;
  126. .tit-icon{
  127. display: inline-block;
  128. width: 62rpx;
  129. height: 41rpx;
  130. }
  131. text{
  132. display: inline-block;
  133. color: #fff;
  134. font-size: 42rpx;
  135. font-weight: bold;
  136. margin: 0 20rpx;
  137. }
  138. .tit-icon{
  139. display: inline-block;
  140. vertical-align: middle;
  141. }
  142. }
  143. .giftcard-content{
  144. position: relative;
  145. box-sizing: border-box;
  146. padding: 0 18rpx;
  147. margin-top: 38rpx;
  148. .module-header-bg{
  149. display: block;
  150. width: 100%;
  151. height: 47rpx;
  152. }
  153. .giftcard-main{
  154. width: 92%;
  155. box-sizing: border-box;
  156. margin: -19rpx 4% 0;
  157. padding: 0 37rpx;
  158. background-color: #fff;
  159. box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
  160. }
  161. .module-footer-bg{
  162. display: block;
  163. width: 92%;
  164. height: 34rpx;
  165. margin: 0 4%;
  166. }
  167. .recharge-code{
  168. padding-top: 100rpx;
  169. padding-bottom: 100rpx;
  170. .inp-con{
  171. background: url(/static/giftcard/input-bg.png) no-repeat;
  172. background-size: 100% 100%;
  173. padding: 12rpx 0;
  174. }
  175. .recharge-btn{
  176. display: block;
  177. margin-top: 46rpx;
  178. }
  179. }
  180. .rule-con{
  181. font-size: 24rpx;
  182. color: #464646;
  183. line-height: 48rpx;
  184. padding: 70rpx 37rpx;
  185. }
  186. .leaf-left-pic{
  187. position: absolute;
  188. bottom: 130rpx;
  189. left: 0;
  190. display: block;
  191. width: 44rpx;
  192. height: 69rpx;
  193. }
  194. .leaf-right-pic{
  195. position: absolute;
  196. bottom: -70rpx;
  197. right: 0;
  198. z-index: 1;
  199. display: block;
  200. width: 90rpx;
  201. height: 97rpx;
  202. }
  203. .red-envelopes{
  204. position: absolute;
  205. bottom: 145rpx;
  206. right: 0;
  207. display: block;
  208. width: 85rpx;
  209. height: 123rpx;
  210. }
  211. }
  212. .rule-cont{
  213. margin-bottom: 16rpx;
  214. }
  215. }
  216. .footer-bg{
  217. z-index: 0;
  218. display: block;
  219. width: 100%;
  220. height: 137rpx;
  221. }
  222. // 弹框样式
  223. .custom-pop{
  224. .custom-con{
  225. text-align: center;
  226. background: url(/static/giftcard/pop-bg.png) no-repeat;
  227. background-size: 100% 100%;
  228. font-size: 30rpx;
  229. color: #5a5a5a;
  230. line-height: 54rpx;
  231. .pop-con{
  232. padding: 195rpx 0 100rpx;
  233. }
  234. .know-btn{
  235. color: #16d1bc;
  236. padding: 20rpx 0;
  237. border-top: 1rpx solid rgba(213,213,213,0.8);
  238. }
  239. }
  240. }
  241. }
  242. </style>