推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

238 lines
4.7 KiB

3 weeks ago
  1. <template>
  2. <view class="page">
  3. <navbar title="核销详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />
  4. <view class="flex page-header">
  5. <image class="icon" src="@/pages_order/static/verifyOrder/icon-clock.png" mode="widthFix"></image>
  6. <text>待核销</text>
  7. </view>
  8. <view class="page-content">
  9. <!-- 商品详情 -->
  10. <productCard :data="orderDetail.massageItem" size="medium" :readonly="true"></productCard>
  11. <view class="card rights" v-if="orderDetail.rights && orderDetail.rights.length">
  12. <view class="flex rights-item" v-for="item in orderDetail.rights" :key="item">
  13. <image class="rights-icon" src="@/pages_order/static/verifyOrder/icon-checked.png" mode="widthFix">
  14. </image>
  15. <text>{{ item }}</text>
  16. </view>
  17. </view>
  18. <view class="card info">
  19. <view class="info-header">核销信息</view>
  20. <view class="flex flex-column info-content">
  21. <!-- <image class="info-qr" :src="orderDetail.qrCodeImgUrl" mode="widthFix"></image> -->
  22. <view class="" style="margin: 20rpx;">
  23. <!-- <uv-qrcode ref="qrcode" size="300rpx" value="https://h5.uvui.cn"></uv-qrcode> -->
  24. <uv-qrcode ref="qrcode" size="300px" :value="orderDetail.id"></uv-qrcode>
  25. </view>
  26. <view class="info-no">{{ `订单号:${orderDetail.id}` }}</view>
  27. <view class="info-desc">{{ `有效时间:${orderDetail.startTime}${orderDetail.endTime}` }}</view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- 下单 -->
  32. <view class="flex bar">
  33. <button plain class="btn btn-plain" @click="overOrder">核销</button>
  34. <button plain class="btn btn-plain" @click="onRefund">申请退款</button>
  35. <button plain class="btn" @click="onBuyAgain">再次购买</button>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import productCard from '@/components/product/productCard.vue'
  41. export default {
  42. components: {
  43. productCard,
  44. },
  45. data() {
  46. return {
  47. orderDetail: {},
  48. }
  49. },
  50. onLoad(args) {
  51. this.id = args.id
  52. this.fetchOrderDetail()
  53. },
  54. onPullDownRefresh() {
  55. this.fetchOrderDetail()
  56. },
  57. methods: {
  58. async fetchOrderDetail() {
  59. try {
  60. this.orderDetail = await this.$fetch('queryOrderById', {
  61. id: this.id
  62. })
  63. } catch (err) {
  64. }
  65. uni.stopPullDownRefresh()
  66. },
  67. overOrder() {
  68. uni.showModal({
  69. title: '确认核销订单吗?',
  70. success: e => {
  71. if (e.confirm) {
  72. this.$api('overOrder', {
  73. orderId: this.orderDetail.id,
  74. }, res => {
  75. this.$emit('done')
  76. // 请求成功后返回上一个页面
  77. uni.navigateBack()
  78. })
  79. }
  80. }
  81. })
  82. },
  83. onRefund() {
  84. // todo
  85. uni.showModal({
  86. title: '确认申请订单退款嘛?',
  87. success: e => {
  88. if (e.confirm) {
  89. this.$api('rollbackOrder', {
  90. orderId: this.orderDetail.id,
  91. }, res => {
  92. this.$emit('done')
  93. })
  94. }
  95. }
  96. })
  97. },
  98. onBuyAgain() {
  99. // todo: check
  100. this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.orderDetail.massageItem.id}`)
  101. },
  102. },
  103. }
  104. </script>
  105. <style scoped lang="scss">
  106. $bar-height: 132rpx;
  107. .page {
  108. background-color: #F5F5F5;
  109. /deep/ .nav-bar__view {
  110. background-image: linear-gradient(#84A73F, #D8FF8F);
  111. }
  112. &-header {
  113. color: #000000;
  114. font-size: 28rpx;
  115. margin-top: 24rpx;
  116. .icon {
  117. width: 30rpx;
  118. height: auto;
  119. margin-right: 17rpx;
  120. }
  121. }
  122. &-content {
  123. padding: 11rpx 13rpx;
  124. }
  125. }
  126. .rights {
  127. margin-top: 15rpx;
  128. padding: 23rpx 48rpx;
  129. color: #000000;
  130. font-size: 28rpx;
  131. &-item {
  132. margin-right: 70rpx;
  133. display: inline-flex;
  134. }
  135. &-icon {
  136. width: 30rpx;
  137. height: auto;
  138. margin-right: 12rpx;
  139. }
  140. }
  141. .info {
  142. margin-top: 19rpx;
  143. padding: 25rpx 41rpx 51rpx 41rpx;
  144. font-size: 28rpx;
  145. &-header {
  146. color: #000000;
  147. padding: 0 0 16rpx 7rpx;
  148. border-bottom: 1rpx dashed #C7C7C7;
  149. }
  150. &-qr {
  151. width: 279rpx;
  152. height: auto;
  153. margin-top: 57rpx;
  154. }
  155. &-no {
  156. color: #84A73F;
  157. margin-top: 16rpx;
  158. }
  159. &-desc {
  160. color: #999999;
  161. font-size: 22rpx;
  162. margin-top: 65rpx;
  163. }
  164. }
  165. .bar {
  166. position: fixed;
  167. bottom: 0;
  168. left: 0;
  169. width: 100vw;
  170. height: $bar-height;
  171. padding-bottom: env(safe-area-inset-bottom);
  172. background-color: $uni-fg-color;
  173. justify-content: flex-end;
  174. }
  175. .btn {
  176. display: inline-block;
  177. width: auto;
  178. height: auto;
  179. padding: 24rpx 50rpx;
  180. box-sizing: border-box;
  181. border: none;
  182. border-radius: 44rpx;
  183. margin: 0;
  184. font-size: 28rpx;
  185. line-height: 1;
  186. color: #FFFFFF;
  187. background-image: linear-gradient(to right, #84A73F, #D8FF8F);
  188. &+& {
  189. margin-left: 39rpx;
  190. }
  191. &:last-child {
  192. margin-right: 54rpx;
  193. }
  194. &-plain {
  195. border: 2rpx solid #999999;
  196. color: #999999;
  197. background: none;
  198. }
  199. }
  200. </style>