exchangeDetail.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <view class="exchangeDetail">
  3. <!-- 兑换状态 -->
  4. <view class="detailCard">
  5. <image src="/static/icon/success.png"></image>
  6. <text>奖品兑换成功</text>
  7. </view>
  8. <!-- 按钮 -->
  9. <view class="btn">
  10. <view class="back" @click="goBack">
  11. <text>返回首页</text>
  12. </view>
  13. <view class="checkout" @click="goOrderDetail">
  14. <text>查看订单</text>
  15. </view>
  16. </view>
  17. <!-- 加入会员 -->
  18. <view class="bottomCard" @click="goOther">
  19. <image src="/static/icon/Kudosbg.png"></image>
  20. <view class="content">
  21. <text>立即加入IHG会员</text>
  22. <image src="/static/icon/right.png"></image>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. }
  32. },
  33. methods: {
  34. // 返回首页
  35. goBack() {
  36. uni.reLaunch({
  37. url: '/pages/my/my'
  38. })
  39. },
  40. // 跳转订单详情
  41. goOrderDetail() {
  42. uni.navigateTo({
  43. url: '/pages/my/myorders/orders'
  44. })
  45. },
  46. // 跳转其他小程序
  47. goOther() {
  48. wx.navigateToMiniProgram({
  49. appId: 'wx255b58f0992b3c53', //appid
  50. path: 'newUIMain/enrollment/enrollment', //path
  51. extraData: { //参数
  52. foo: 'bar'
  53. },
  54. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  55. success(res) {
  56. console.log('成功')
  57. // 打开成功
  58. },
  59. fail(e) {
  60. console.log(e, '失败')
  61. }
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="scss" scoped>
  68. $pageColor:#F9F9F9;
  69. $bgColor:#FFFFFF;
  70. @mixin flexlayout {
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. }
  75. .exchangeDetail {
  76. height: 100%;
  77. background: $pageColor;
  78. }
  79. .detailCard {
  80. width: 750rpx;
  81. height: 446rpx;
  82. display: flex;
  83. flex-direction: column;
  84. justify-content: center;
  85. align-items: center;
  86. image {
  87. width: 120rpx;
  88. height: 120rpx;
  89. margin-bottom: 48rpx;
  90. }
  91. text {
  92. display: block;
  93. font-size: 32rpx;
  94. font-family: PingFangSC-Medium, PingFang SC;
  95. font-weight: 500;
  96. color: #080F18;
  97. }
  98. }
  99. .btn {
  100. width: 750rpx;
  101. height: 76rpx;
  102. display: flex;
  103. justify-content: space-between;
  104. align-items: center;
  105. padding:0 32rpx;
  106. .back {
  107. width: 332rpx;
  108. height: 76rpx;
  109. background: #F5F5F5;
  110. border-radius: 8rpx;
  111. @include flexlayout() text {
  112. font-size: 30rpx;
  113. font-family: PingFang-SC-Bold, PingFang-SC;
  114. font-weight: bold;
  115. color: #FF6301;
  116. }
  117. }
  118. .checkout {
  119. width: 332rpx;
  120. height: 76rpx;
  121. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  122. border-radius: 8rpx;
  123. @include flexlayout() text {
  124. font-size: 30rpx;
  125. font-family: PingFang-SC-Bold, PingFang-SC;
  126. font-weight: bold;
  127. color: #FFFFFF;
  128. }
  129. }
  130. }
  131. .bottomCard {
  132. width: 690rpx;
  133. height: 584rpx;
  134. background: #FFFFFF;
  135. box-shadow: 0px 8rpx 16rpx 0px rgba(220, 222, 229, 0.71);
  136. border-radius: 20rpx;
  137. background: $bgColor;
  138. margin-left: 30rpx;
  139. margin-top: 64rpx;
  140. image {
  141. width: 690rpx;
  142. height: 492rpx;
  143. }
  144. .content {
  145. width: 690rpx;
  146. height: 92rpx;
  147. position: relative;
  148. margin-top:-9rpx;
  149. border:1rpx solid;
  150. @include flexlayout();
  151. image {
  152. width: 12rpx;
  153. height: 20rpx;
  154. margin-left: 8rpx;
  155. }
  156. text {
  157. font-size: 30rpx;
  158. font-family: PingFang-SC-Medium, PingFang-SC;
  159. font-weight: 500;
  160. color: #333333;
  161. text-shadow: 0px 8rpx 16rpx rgba(220, 222, 229, 0.71);
  162. }
  163. }
  164. }
  165. </style>