giftCard.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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="8" input-align="center" />
  17. </view>
  18. <u-button class="recharge-btn" shape="circle" :custom-style="customBtnStyle" hover-class="none" @click="messagePop=true">立即充值</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>1000乐豆已计入您的乐豆余额。</view>
  53. </view>
  54. <view class="know-btn" @click="messagePop=false">我知道了</view>
  55. </view>
  56. </u-popup>
  57. </view>
  58. </template>
  59. <script>
  60. export default{
  61. data(){
  62. return{
  63. rechargeCode: '', // 充值码
  64. customBtnStyle: { // 自定义按钮样式
  65. borderColor: '#01ad99',
  66. backgroundColor: '#01ad99',
  67. color: '#fff'
  68. },
  69. messagePop: false, // 充值成功提示框
  70. }
  71. },
  72. methods: {
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. .giftCard-wrap{
  78. width: 100%;
  79. background-color: #02c9b2;
  80. .page-header{
  81. display: block;
  82. width: 100%;
  83. height: 360rpx;
  84. }
  85. .module-con{
  86. &:nth-child(2){
  87. margin-bottom: 65rpx;
  88. }
  89. .head-con{
  90. text-align: center;
  91. .tit-icon{
  92. display: inline-block;
  93. width: 62rpx;
  94. height: 41rpx;
  95. }
  96. text{
  97. display: inline-block;
  98. color: #fff;
  99. font-size: 42rpx;
  100. font-weight: bold;
  101. margin: 0 20rpx;
  102. }
  103. .tit-icon{
  104. display: inline-block;
  105. vertical-align: middle;
  106. }
  107. }
  108. .giftcard-content{
  109. position: relative;
  110. box-sizing: border-box;
  111. padding: 0 18rpx;
  112. margin-top: 38rpx;
  113. .module-header-bg{
  114. display: block;
  115. width: 100%;
  116. height: 47rpx;
  117. }
  118. .giftcard-main{
  119. width: 92%;
  120. box-sizing: border-box;
  121. margin: -19rpx 4% 0;
  122. padding: 0 37rpx;
  123. background-color: #fff;
  124. box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
  125. }
  126. .module-footer-bg{
  127. display: block;
  128. width: 92%;
  129. height: 34rpx;
  130. margin: 0 4%;
  131. }
  132. .recharge-code{
  133. padding-top: 100rpx;
  134. padding-bottom: 100rpx;
  135. .inp-con{
  136. background: url(/static/giftcard/input-bg.png) no-repeat;
  137. background-size: 100% 100%;
  138. padding: 12rpx 0;
  139. }
  140. .recharge-btn{
  141. display: block;
  142. margin-top: 46rpx;
  143. }
  144. }
  145. .rule-con{
  146. font-size: 24rpx;
  147. color: #464646;
  148. line-height: 48rpx;
  149. padding: 70rpx 37rpx;
  150. }
  151. .leaf-left-pic{
  152. position: absolute;
  153. bottom: 130rpx;
  154. left: 0;
  155. display: block;
  156. width: 44rpx;
  157. height: 69rpx;
  158. }
  159. .leaf-right-pic{
  160. position: absolute;
  161. bottom: -70rpx;
  162. right: 0;
  163. z-index: 1;
  164. display: block;
  165. width: 90rpx;
  166. height: 97rpx;
  167. }
  168. .red-envelopes{
  169. position: absolute;
  170. bottom: 145rpx;
  171. right: 0;
  172. display: block;
  173. width: 85rpx;
  174. height: 123rpx;
  175. }
  176. }
  177. .rule-cont{
  178. margin-bottom: 16rpx;
  179. }
  180. }
  181. .footer-bg{
  182. z-index: 0;
  183. display: block;
  184. width: 100%;
  185. height: 137rpx;
  186. }
  187. // 弹框样式
  188. .custom-pop{
  189. .custom-con{
  190. text-align: center;
  191. background: url(/static/giftcard/pop-bg.png) no-repeat;
  192. background-size: 100% 100%;
  193. font-size: 30rpx;
  194. color: #5a5a5a;
  195. line-height: 54rpx;
  196. .pop-con{
  197. padding: 195rpx 0 100rpx;
  198. }
  199. .know-btn{
  200. color: #16d1bc;
  201. padding: 20rpx 0;
  202. border-top: 1rpx solid rgba(213,213,213,0.8);
  203. }
  204. }
  205. }
  206. }
  207. </style>