checkFinish.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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="num-cont">
  7. <view>
  8. {{payNum}}
  9. </view>
  10. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  11. </view>
  12. </view>
  13. <view class="back-btn">
  14. <u-button :custom-style="btnStyle" @click="toHome">返回首页</u-button>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. btnStyle: {
  23. backgroundColor: '#07c160',
  24. color:'#fff'
  25. },
  26. payNum: 0 //支付乐豆数
  27. }
  28. },
  29. onLoad(option) {
  30. console.log(option,'option')
  31. this.payNum = option.num
  32. },
  33. methods: {
  34. // 返回首页
  35. toHome() {
  36. uni.reLaunch({
  37. url: '/pages/index/index'
  38. })
  39. }
  40. }
  41. }
  42. </script>
  43. <style lang="less">
  44. page{
  45. height: 100%;
  46. }
  47. .page-cont{
  48. width: 100%;
  49. height: 100%;
  50. background-color: #fff;
  51. padding: 0 40upx;
  52. .icon-cont{
  53. width: 100%;
  54. height: 400upx;
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. justify-content: center;
  59. .num-cont{
  60. display: flex;
  61. color: red;
  62. font-size: 36upx;
  63. font-weight: 600;
  64. }
  65. >view{
  66. font-size: 30upx;
  67. margin-top: 40upx;
  68. }
  69. }
  70. .icon{
  71. width: 120upx;
  72. height: 120upx;
  73. background-color: #07c160;
  74. display: flex;
  75. justify-content: center;
  76. border-radius: 50%;
  77. }
  78. .back-btn{
  79. margin-top: 40upx;
  80. }
  81. }
  82. </style>