paySuccess.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="content">
  3. <text class="success-icon iconfont iconroundcheck"></text>
  4. <text class="tit">支付成功</text>
  5. <view class="btn-group">
  6. <navigator :url="'/pages/order/orderDetail?id='+orderId" open-type="redirect" class="mix-btn">查看订单</navigator>
  7. <navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. import {
  13. mapState,
  14. mapMutations
  15. } from 'vuex';
  16. import {
  17. getUserInfo,
  18. } from '@/api/user.js';
  19. export default {
  20. data() {
  21. return {
  22. orderId:''
  23. }
  24. },
  25. onLoad(opt) {
  26. // 保存订单号
  27. this.orderId = opt.orderid;
  28. this.getUserInfo()
  29. },
  30. methods: {
  31. ...mapMutations('user', ['setUserInfo']),
  32. getUserInfo() {
  33. let that = this
  34. getUserInfo({})
  35. .then(({
  36. data
  37. }) => {
  38. that.setUserInfo(data);
  39. })
  40. .catch(e => {
  41. console.log(e);
  42. });
  43. }
  44. }
  45. }
  46. </script>
  47. <style lang='scss'>
  48. .content{
  49. display: flex;
  50. flex-direction: column;
  51. justify-content: center;
  52. align-items: center;
  53. }
  54. .success-icon{
  55. font-size: 160upx;
  56. color: #5dbc7c;
  57. margin-top: 100upx;
  58. }
  59. .tit{
  60. font-size: 38upx;
  61. color: #303133;
  62. }
  63. .btn-group{
  64. padding-top: 100upx;
  65. }
  66. .mix-btn {
  67. margin-top: 30upx;
  68. display: flex;
  69. align-items: center;
  70. justify-content: center;
  71. width: 600upx;
  72. height: 80upx;
  73. font-size: $font-lg;
  74. color: #fff;
  75. background-color: $base-color;
  76. border-radius: 10upx;
  77. &.hollow{
  78. background: #fff;
  79. color: #303133;
  80. border: 1px solid #ccc;
  81. }
  82. }
  83. </style>