payStatus.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <view class="container">
  3. <!-- 图标区域 -->
  4. <img class="img" :src="status === '1' ? '../../static/index/success.png' : '../../static/index/fail.png'" />
  5. <!-- 支付状态区域 -->
  6. <view class="status">{{ status === '1' ? '支付成功' : '支付失败' }}</view>
  7. <!-- 底部按钮区域 -->
  8. <view class="btn" @click="handleClickBtn">{{ status === '1' ? '返回主页' : '重新支付' }}</view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. // 支付状态
  16. status: ''
  17. }
  18. },
  19. onLoad(options) {
  20. this.status = options.status
  21. console.log(this.status)
  22. },
  23. methods: {
  24. // 点击底部按钮回调
  25. handleClickBtn() {
  26. if (this.status === '1') {
  27. uni.switchTab({
  28. url: '/pages/home/home'
  29. })
  30. } else if (this.status === '2') {
  31. }
  32. }
  33. }
  34. }
  35. </script>
  36. <style lang="scss" scoped>
  37. .container {
  38. display: flex;
  39. flex-direction: column;
  40. align-items: center;
  41. height: 100vh;
  42. background-color: #fff;
  43. .img {
  44. margin-top: 80rpx;
  45. width: 134rpx;
  46. height: 134rpx;
  47. text-align: center;
  48. }
  49. .status {
  50. margin-top: 40rpx;
  51. font-size: 32rpx;
  52. font-weight: bold;
  53. }
  54. .btn {
  55. position: absolute;
  56. bottom: 75rpx;
  57. display: flex;
  58. justify-content: center;
  59. align-items: center;
  60. width: 710rpx;
  61. height: 96rpx;
  62. font-size: 32rpx;
  63. color: #fff;
  64. border-radius: 64rpx;
  65. background-color: #096562;
  66. }
  67. }
  68. </style>