OrderCard.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <div class="order-card-panel">
  3. <div class="header">
  4. <div class="order-no">
  5. <span>订单编号: </span><span>{{options.number}}</span>
  6. </div>
  7. <div class="order-status" :class="options.orderFlag">
  8. {{getPayStatus}}
  9. </div>
  10. </div>
  11. <div class="content">
  12. <div class="product-img" @click="toDetail()">
  13. <img class="img" :src="options.bundle ? options.bundle.icon2 : '/static/img/ic_shop_title_06.png'" alt="">
  14. </div>
  15. <div class="product-info">
  16. <div @click="toDetail()">
  17. <div class="title">{{options.bundleName}}</div>
  18. <div class="desc">{{options.bundle ? options.bundle.tag : ''}}</div>
  19. </div>
  20. <div>
  21. <div class="price">
  22. ¥{{options.payedAmount}}
  23. </div>
  24. <div class="btn-control" v-if="options.orderFlag === 'UNPA'">
  25. <van-button class="btn" size="small" @click="cancelHandler()">取消订单</van-button>
  26. <!-- <van-button class="btn" size="small" type="danger" :disabled="payLoading" :loading="payLoading" @click="toPay()">立即支付</van-button> -->
  27. </div>
  28. <div class="btn-control" v-else>
  29. <van-button class="btn" size="small" @click="toDetail()">查看详情</van-button>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import { objToUrl } from '@/utils/index';
  38. import { cancelOrder, wxPay, getPayStatus } from '@/api/bundle';
  39. import { subscribePayMessage, subscribeHxMessage } from '@/utils/index.js';
  40. export default {
  41. name: 'OrderCard',
  42. props: {
  43. options: {
  44. type: 'Object',
  45. default: function(){
  46. return {}
  47. }
  48. }
  49. },
  50. data() {
  51. return {
  52. payLoading: false
  53. }
  54. },
  55. computed: {
  56. getPayStatus() {
  57. const dict = {
  58. 'UNPA': '未支付',
  59. 'INPA': '支付中',
  60. 'PAED': '已支付',
  61. 'CAEL': '已取消',
  62. 'SYCA': '已取消',
  63. 'RUND': '已退款'
  64. };
  65. return dict[this.options.orderFlag];
  66. }
  67. },
  68. methods: {
  69. cancelHandler() {
  70. const { options } = this;
  71. const _this = this;
  72. cancelOrder({
  73. id: options.id
  74. }).then(res => {
  75. let icon = 'none';
  76. if (res.status === '200') {
  77. _this.$emit('refresh');
  78. icon = 'success';
  79. }
  80. wx.showToast({
  81. title: res.message,
  82. icon: icon,
  83. duration: 2500
  84. });
  85. });
  86. },
  87. // 查询支付状态
  88. queryPayStatus (tradeNo){
  89. getPayStatus({ tradeNo: tradeNo }).then(result => {
  90. wx.hideLoading()
  91. if (result.status === '200') {
  92. wx.redirectTo({ url: `/pages/paySuccess/main?` + objToUrl(result.data) });
  93. }
  94. });
  95. },
  96. // 去支付
  97. toPay() {
  98. let _this = this
  99. if(this.payLoading){return}
  100. this.payLoading = true
  101. //订阅消息
  102. subscribePayMessage(function(res){
  103. wx.showLoading({title:'正在支付中...'})
  104. wxPay({
  105. id: _this.options.id
  106. }).then(res => {
  107. if (res.status === '200') {
  108. setTimeout(function(){
  109. _this.queryPayStatus(res.tradeNo)
  110. },500)
  111. } else {
  112. wx.showToast({
  113. title: res.message,
  114. icon: 'none',
  115. duration: 2500
  116. });
  117. }
  118. _this.payLoading = false
  119. }).catch(err => {
  120. let message = '支付失败!';
  121. if (err.errMsg === 'requestPayment:fail cancel') {
  122. message = '您取消了支付';
  123. }
  124. wx.showToast({
  125. title: message,
  126. icon: 'none',
  127. duration: 2500
  128. });
  129. _this.payLoading = false
  130. });
  131. _this.$emit('refresh');
  132. })
  133. },
  134. toDetail() {
  135. const { options } = this;
  136. wx.navigateTo({
  137. url: `/pages/orderDetail/main?id=${options.id}`
  138. });
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="stylus" scoped>
  144. .order-card-panel {
  145. // margin-top: 10rpx;
  146. width: 100%;
  147. background-color: #fff;
  148. box-sizing: border-box;
  149. padding: 0 25rpx;
  150. border-top: 16rpx solid #f8f8f8;
  151. .header, .content {
  152. box-sizing: border-box;
  153. padding: 15rpx 25rpx;
  154. }
  155. .header {
  156. display: flex;
  157. justify-content: space-between;
  158. font-size: 25rpx;
  159. border-bottom: 1px solid #e9eaec;
  160. .order-no {
  161. color: #80848f;
  162. }
  163. .UNPA {
  164. color: #ed3f14;
  165. }
  166. .INPA {
  167. color: #00aaff;
  168. }
  169. .PAED {
  170. color: #00aa00;
  171. }
  172. .CAEL {
  173. color: #999999;
  174. }
  175. .SYCA {
  176. color: #999999;
  177. }
  178. .RUND {
  179. color: red;
  180. }
  181. }
  182. .content {
  183. display: flex;
  184. width: 100%;
  185. height: 230rpx;
  186. .product-img {
  187. width: 30%;
  188. border-radius : 0.5em;
  189. overflow: hidden;
  190. border: 1px solid #f8f8f8;
  191. img {
  192. width: 100%;
  193. height: 100%;
  194. }
  195. }
  196. }
  197. }
  198. .order-card-panel:first-child{
  199. border-top: none;
  200. }
  201. .product-info {
  202. padding-left: 1em;
  203. box-sizing: border-box;
  204. font-size: 25rpx;
  205. flex: 1;
  206. display: flex;
  207. flex-direction: column;
  208. justify-content: space-between;
  209. .title {
  210. font-size: 1.2em;
  211. margin: 10rpx 0;
  212. word-break: break-all;
  213. text-overflow: ellipsis;
  214. display: -webkit-box;
  215. -webkit-box-orient: vertical;
  216. -webkit-line-clamp: 2;
  217. overflow: hidden;
  218. }
  219. .desc {
  220. color: #80848f;
  221. font-size: 0.85em;
  222. }
  223. .price {
  224. color: #ff5500;
  225. font-size: 1.4em;
  226. font-weight: bold;
  227. }
  228. .btn-control {
  229. text-align: right;
  230. .btn + .btn {
  231. margin-left: 20rpx;
  232. }
  233. }
  234. }
  235. </style>