payFinish.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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>
  7. <u-button @click="toOrderDetail" type="success">查看订单详情</u-button>
  8. <view class="back-btn">
  9. <u-button @click="toHome">返回首页</u-button>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. orderId: '' //订单id
  18. }
  19. },
  20. onLoad(option) {
  21. console.log(option,'option')
  22. this.orderId = option.id
  23. },
  24. methods: {
  25. // 查看订单详情
  26. toOrderDetail() {
  27. uni.redirectTo({
  28. url: '/pagesA/order/orderDetail?id=' + this.orderId
  29. })
  30. },
  31. // 返回首页
  32. toHome() {
  33. uni.reLaunch({
  34. url: '/pages/index/index'
  35. })
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="less">
  41. page{
  42. height: 100%;
  43. }
  44. .page-cont{
  45. width: 100%;
  46. height: 100%;
  47. background-color: #fff;
  48. padding: 0 40upx;
  49. .icon-cont{
  50. width: 100%;
  51. height: 400upx;
  52. display: flex;
  53. flex-direction: column;
  54. align-items: center;
  55. justify-content: center;
  56. >view{
  57. font-size: 30upx;
  58. margin-top: 40upx;
  59. }
  60. }
  61. .icon{
  62. width: 120upx;
  63. height: 120upx;
  64. background-color: #07c160;
  65. display: flex;
  66. justify-content: center;
  67. border-radius: 50%;
  68. }
  69. .back-btn{
  70. margin-top: 40upx;
  71. }
  72. }
  73. </style>