surOrder.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <view class="sure-order">
  3. <view class="order-detail">
  4. <view class="order-title">
  5. <uv-text text="订单详情" :customStyle="{
  6. fontWeight:'bold'
  7. }" size="32"></uv-text>
  8. </view>
  9. <view class="order-content">
  10. <uv-image :src="imageUrl(orderData.rotatingImages) || ''" width="180" height="180" radius="16">
  11. </uv-image>
  12. <view class="order-content-detail">
  13. <uv-text :text="orderData.name" :lines="2" size="28"></uv-text>
  14. <uv-text text="x1" type="content" size="28" :customStyle="{
  15. background:'#eee',
  16. padding:'2rpx 16rpx',
  17. borderRadius:'4rpx',
  18. margin:'10rpx 0'
  19. }"></uv-text>
  20. <uv-text :text="orderData.price" type="error" size="32" mode="price"></uv-text>
  21. </view>
  22. </view>
  23. <view class="order-item">
  24. <uv-text text="优惠券" size="28"></uv-text>
  25. <view class="text-flex"
  26. @tap="$navigateTo('/subPages/workarkPage/coupon/coupon?productLevelId=' + orderData.productLevelId + '&price=' + orderData.price)">
  27. <text class="order-item-icon">-</text>
  28. <uv-text :text="minus" type="error" size="28" mode="price"></uv-text>
  29. <uv-icon name="arrow-right" size="32"></uv-icon>
  30. </view>
  31. </view>
  32. <view class="order-count">
  33. <view class="text-flex">
  34. <uv-text text="合计:" size="28"></uv-text>
  35. <uv-text :text="countPriceData.totalFee" type="error" size="28" mode="price"></uv-text>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="hui-button-box">
  40. <view class="button-flex">
  41. <uv-text :text="countPriceData.totalFee" type="error" size="28" mode="price"></uv-text>
  42. <view class="text-flex">
  43. <uv-text text="-" type="error" size="24"></uv-text>
  44. <uv-text :text="minus" type="error" size="24" mode="price"></uv-text>
  45. </view>
  46. </view>
  47. <uv-button type="primary" text="立即支付" @tap="payment" :disabled="isCount"></uv-button>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import {
  53. getServeById,
  54. countPriceAPI,
  55. createOrder,
  56. getWxPay
  57. } from '@/request/api/workark.js'
  58. export default {
  59. data() {
  60. return {
  61. orderId: '',
  62. orderData: {
  63. price: 0
  64. },
  65. countPriceData: {
  66. productCoupon: [],
  67. totalFee: 0
  68. },
  69. isCount: false,
  70. couponChecked: [],
  71. order: {}
  72. };
  73. },
  74. onLoad(body) {
  75. this.orderId = body.orderId;
  76. uni.$on('changeCoupon', this.changeCoupon);
  77. if (this.orderId) this.init();
  78. },
  79. computed: {
  80. minus() {
  81. let data = this.countPriceData.productCoupon || [];
  82. let num = 0;
  83. for (var i = 0; i < data.length; i++) {
  84. num += data[i].minus
  85. }
  86. return num;
  87. }
  88. },
  89. methods: {
  90. async init() {
  91. let orderData = await getServeById(this.orderId);
  92. if (!orderData.state) return;
  93. this.orderData = orderData.data;
  94. this.countPrice();
  95. },
  96. imageUrl(data) {
  97. if (!data) return '';
  98. let imgData = JSON.parse(data)[0];
  99. if (!imgData) return '';
  100. return imgData.url;
  101. },
  102. async countPrice() {
  103. this.isCount = true;
  104. let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
  105. let countPriceData = await countPriceAPI(this.orderData.id, couponIds);
  106. this.isCount = false;
  107. if (!countPriceData.state) return;
  108. this.countPriceData = countPriceData.data;
  109. },
  110. changeCoupon(data) {
  111. this.couponChecked = data;
  112. this.countPrice();
  113. },
  114. async payment() {
  115. uni.showLoading({
  116. title: '订单确认中...'
  117. })
  118. let wxConfig = await getWxPay('ORDER_20250516154349168', uni.getStorageSync('openId'));
  119. uni.requestPayment({
  120. provider: 'wxpay',
  121. timeStamp: wxConfig.data.timeStamp,
  122. nonceStr: wxConfig.data.nonceStr,
  123. package: wxConfig.data.prepayId,
  124. signType: wxConfig.data.signType,
  125. paySign: wxConfig.data.paySign,
  126. success: function(res) {
  127. console.log('success:' + JSON.stringify(res));
  128. },
  129. fail: function(err) {
  130. console.log('fail:' + JSON.stringify(err));
  131. }
  132. });
  133. console.log(wxConfig);
  134. uni.hideLoading();
  135. return;
  136. let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
  137. let orderData = await createOrder(this.orderData.id, this.$store.getters.organization.id, couponIds);
  138. if (orderData.state) {
  139. let wxConfig = await getWxPay(orderData.data.orderNo, uni.getStorageSync('openId'));
  140. console.log(wxConfig);
  141. uni.hideLoading();
  142. }
  143. }
  144. },
  145. }
  146. </script>
  147. <style lang="scss">
  148. .sure-order {
  149. padding: 30rpx;
  150. }
  151. .order-detail {
  152. background: #fff;
  153. padding: 30rpx;
  154. border-radius: 16rpx;
  155. }
  156. .order-title {
  157. padding-bottom: 30rpx;
  158. }
  159. .order-content {
  160. display: flex;
  161. }
  162. .order-content-detail {
  163. flex: 1;
  164. width: 0;
  165. margin-left: 30rpx;
  166. }
  167. .order-item {
  168. display: flex;
  169. justify-content: space-between;
  170. align-items: center;
  171. height: 88rpx;
  172. border-bottom: 1px solid $uv-border-color;
  173. margin-bottom: 30rpx;
  174. }
  175. .order-item-icon {
  176. color: $uv-error;
  177. }
  178. .order-count {
  179. display: flex;
  180. justify-content: flex-end;
  181. }
  182. .button-flex {
  183. margin-right: 20rpx;
  184. }
  185. </style>