success.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <!-- 支付成功 -->
  2. <template>
  3. <view class="success" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
  4. <view class="success_status">
  5. <view class="status flex aic">
  6. <image class="pay_img" :src="payImg"></image>
  7. <view class="status_text">支付成功</view>
  8. </view>
  9. <view class="status_tip">套餐购买成功 请查看账单明细</view>
  10. </view>
  11. <view class="success_content">
  12. <view class="success_info">
  13. <view class="">
  14. <view class="success_item flex jcsb aic">
  15. <view class="flex aic">
  16. <view class="label">收件地址</view>
  17. <text class="bold">{{ orderInfo.email }}</text>
  18. </view>
  19. <!-- <view class="success_btn" @click="copyText()">复制</view>-->
  20. </view>
  21. <view class="success_item flex aic">
  22. <view class="label">收件人</view>
  23. <text>{{ orderInfo.recipientName }}({{orderInfo.contactPhone}})</text>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="line" :style="{ background: `url(${successImg}) no-repeat` }">
  28. <view class="line-circle"></view>
  29. </view>
  30. <view class="detail">
  31. <view class="detail_item flex aic jcsb">
  32. <text>订单金额</text>
  33. <view class="datas flex">
  34. <text>{{orderInfo.totalAmount}}元</text>
  35. </view>
  36. </view>
  37. <view class="detail_item flex aic jcsb">
  38. <text>套餐名称</text>
  39. <view class="datas flex">
  40. <text>{{ orderInfo.packageName }}</text>
  41. <!-- <view class="copy">详情</view> -->
  42. </view>
  43. </view>
  44. <view class="detail_item flex aic jcsb">
  45. <text>套餐内容</text>
  46. <view class="datas flex">
  47. <text>{{orderInfo.quantity}}条</text>
  48. </view>
  49. </view>
  50. <view class="detail_item flex aic jcsb">
  51. <text>支付方式</text>
  52. <view class="datas flex">
  53. <text>微信支付</text>
  54. </view>
  55. </view>
  56. <view class="detail_item flex aic jcsb">
  57. <text>订单编号</text>
  58. <view class="datas flex">
  59. <text>{{ orderInfo.orderNumber }}</text>
  60. <view class="copy" @click="copyText()">复制</view>
  61. </view>
  62. </view>
  63. <view class="detail_item flex aic jcsb">
  64. <text>订单时间</text>
  65. <view class="datas flex">
  66. <text>{{orderInfo.createDate}}</text>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="btns">
  72. <view class="bind" :style="{ background: 'url(' + buybtnBg + ')' }" @click="goOrderDetail">查看详情</view>
  73. <view class="back" @click="goHome">返回首页</view>
  74. </view>
  75. </view>
  76. </template>
  77. <script>
  78. import {copy} from "@/utils/utils";
  79. import {getOrderDetail} from "../../apis/order";
  80. import {goHome} from "../../utils/utils";
  81. export default {
  82. components: {},
  83. data() {
  84. return {
  85. orderId: '',
  86. orderInfo: {
  87. packageName:"",
  88. createDate:"",
  89. orderNumber:'',
  90. shootingRequirements:'',
  91. email:'',
  92. },
  93. buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
  94. bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
  95. payImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_paysuccess.png",
  96. successImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_quekou.png'
  97. };
  98. },
  99. onLoad(options) {
  100. if (options.orderId) this.orderId = options.orderId
  101. this.getData()
  102. },
  103. computed: {
  104. },
  105. watch: {},
  106. methods: {
  107. getData() {
  108. getOrderDetail({orderId: this.orderId}).then(res => {
  109. this.orderInfo = res
  110. })
  111. },
  112. goOrderDetail(item){
  113. uni.navigateTo({
  114. url: '/pages/order/orderDetail?orderId='+this.orderId
  115. })
  116. },
  117. goHome(){
  118. goHome()
  119. },
  120. // 复制
  121. copyText(num) {
  122. copy(num)
  123. }
  124. },
  125. created() {
  126. },
  127. mounted() {
  128. },
  129. }
  130. </script>
  131. <style lang='scss' scoped>
  132. .success {
  133. width: 100%;
  134. position: absolute;
  135. top: 0;
  136. bottom: 0;
  137. display: flex;
  138. flex-direction: column;
  139. background-size: contain !important;
  140. background-repeat: no-repeat !important;
  141. background-position: top;
  142. padding: 0 24rpx;
  143. .success_status {
  144. margin-top: 64rpx;
  145. display: flex;
  146. flex-direction: column;
  147. align-items: center;
  148. .pay_img {
  149. width: 48rpx;
  150. height: 48rpx;
  151. margin-left: 16rpx;
  152. }
  153. .status_text {
  154. font-weight: 500;
  155. font-size: 40rpx;
  156. color: #0D121A;
  157. }
  158. .status_tip {
  159. font-weight: 400;
  160. font-size: 28rpx;
  161. color: #9EA3B1;
  162. margin-top: 20rpx;
  163. }
  164. }
  165. .success_content {
  166. border-radius: 32rpx;
  167. overflow: hidden;
  168. margin-top: 64rpx;
  169. .success_info {
  170. background-color: #fff;
  171. padding: 36rpx 32rpx 8rpx;
  172. .success_item {
  173. margin-bottom: 20rpx;
  174. .label {
  175. min-width: 120rpx;
  176. font-weight: 400;
  177. font-size: 28rpx;
  178. color: #9EA3B1;
  179. margin-right: 16rpx;
  180. }
  181. text {
  182. font-size: 32rpx;
  183. color: #0D121A;
  184. }
  185. }
  186. }
  187. .success_btn {
  188. width: 80rpx;
  189. height: 40rpx;
  190. font-weight: 500;
  191. background: #F4F5F9;
  192. border-radius: 48rpx;
  193. font-size: 24rpx;
  194. color: #0D121A;
  195. text-align: center;
  196. line-height: 40rpx;
  197. }
  198. .line {
  199. width: 100%;
  200. height: 40rpx;
  201. background-size: cover !important;
  202. padding: 0 32rpx;
  203. display: flex;
  204. justify-content: center;
  205. align-items: center;
  206. .line-circle {
  207. width: 100%;
  208. border: 2rpx dashed #EDEDED;
  209. height: 2rpx;
  210. }
  211. }
  212. .detail {
  213. background-color: #fff;
  214. padding: 32rpx 32rpx 40rpx;
  215. .detail_item {
  216. margin-bottom: 36rpx;
  217. text {
  218. white-space: nowrap;
  219. font-weight: 400;
  220. font-size: 28rpx;
  221. color: #0D121A;
  222. }
  223. .datas {
  224. .copy {
  225. width: 80rpx;
  226. height: 40rpx;
  227. background: #F4F5F9;
  228. border-radius: 48rpx;
  229. font-weight: 500;
  230. font-size: 24rpx;
  231. color: #061714;
  232. text-align: center;
  233. line-height: 40rpx;
  234. margin-left: 16rpx;
  235. }
  236. }
  237. }
  238. .detail_item:nth-last-child(1) {
  239. margin-bottom: 0;
  240. }
  241. }
  242. .success_title {
  243. color: #9DA3A2;
  244. }
  245. }
  246. .btns {
  247. padding: 96rpx 32rpx;
  248. view {
  249. width: 100%;
  250. height: 84rpx;
  251. // border-radius: 48rpx;
  252. display: flex;
  253. justify-content: center;
  254. align-items: center;
  255. font-size: 32rpx;
  256. }
  257. .bind {
  258. width: 100%;
  259. height: 84rpx;
  260. background-size: 100% 100% !important;
  261. color: #061714;
  262. margin-bottom: 32rpx;
  263. font-weight: 500rpx;
  264. font-weight: bold;
  265. // background: linear-gradient(140deg, #246AF1 0%, #2F98EF 100%);
  266. }
  267. .back {
  268. font-weight: bold;
  269. background: #FFFFFF;
  270. // border: 4rpx solid #E7EAEA;
  271. color: #061714;
  272. }
  273. }
  274. .ml16 {
  275. margin-left: 16rpx;
  276. }
  277. }
  278. </style>