paySuccess.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="page-cont">
  3. <view class="icon-cont">
  4. <u-icon class="icon" name="checkmark" color="#fff" size="80"></u-icon>
  5. <view>支付成功</view>
  6. <view class="pay-info"><text>{{gold}}</text><image src="../../static/ledou.png"></image></view>
  7. </view>
  8. <view class="back-btn">
  9. <u-button type="success" @click="toLuckDraw">去抽奖</u-button>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. gold: '' //金币
  18. }
  19. },
  20. onLoad(option) {
  21. console.log(option,'option')
  22. this.gold = option.gold
  23. },
  24. methods: {
  25. // 去抽奖
  26. toLuckDraw() {
  27. uni.navigateBack()
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="less">
  33. page{
  34. height: 100%;
  35. }
  36. .page-cont{
  37. width: 100%;
  38. height: 100%;
  39. background-color: #fff;
  40. padding: 40upx;
  41. .icon-cont{
  42. width: 100%;
  43. height: 400upx;
  44. display: flex;
  45. flex-direction: column;
  46. align-items: center;
  47. justify-content: center;
  48. >view{
  49. font-size: 30upx;
  50. margin-top: 30upx;
  51. color: #00aa00;
  52. }
  53. .pay-info{
  54. font-size: 50rpx;
  55. color: #666;
  56. image{
  57. width: 40rpx;
  58. height: 40rpx;
  59. }
  60. text{
  61. color: red;
  62. font-weight: bold;
  63. }
  64. }
  65. }
  66. .icon{
  67. width: 120upx;
  68. height: 120upx;
  69. background-color: #07c160;
  70. display: flex;
  71. justify-content: center;
  72. border-radius: 50%;
  73. }
  74. .back-btn{
  75. margin-top: 40upx;
  76. padding: 0 20%;
  77. }
  78. }
  79. </style>