exchange-order-list.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
  3. :down="downOption" :up="upOption">
  4. <view class="order-list">
  5. <view v-for="(item, index) in orderList" :key="index" class="order-item bg-white m-t-20">
  6. <router-link
  7. :to="{path: '/bundle/pages/exchange_order_details/exchange_order_details', query: {id: item.id}}">
  8. <view class="order-header flex row-between">
  9. <view class="flex">
  10. <view class="m-r-10">
  11. {{ item.create_time }}
  12. </view>
  13. </view>
  14. <view class="primary">
  15. {{ item.order_status }}
  16. </view>
  17. </view>
  18. <view class="order-con">
  19. <view class="order-goods flex">
  20. <u-image :src="item.goods.image" border-radius="10" width="160" height="160"></u-image>
  21. <view class="goods-info flex-1 m-l-20">
  22. <view class="goods-name line-2">{{ item.goods.name }}</view>
  23. <view class="flex row-between">
  24. <view class="goods-price primary m-t-10">
  25. <price-format :show-subscript="false" :first-size="36" :second-size="24"
  26. :price="item.goods.need_integral" />
  27. <text class="xs"></text>
  28. <block v-if="item.goods.exchange_way === 2">
  29. <text>+</text>
  30. <price-format :show-subscript="false" :first-size="36" :second-size="24"
  31. :price="item.goods.need_money" />
  32. <text class="xs"></text>
  33. </block>
  34. </view>
  35. <view class="lighter">×{{item.total_num}}</view>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="all-price flex row-right">
  40. <text class="muted xs">{{item.total_num}}件商品,实付款:</text>
  41. <view class="">
  42. <price-format :show-subscript="false" :first-size="36" :second-size="24"
  43. :price="item.order_integral" :weight="500" />
  44. <text class="xs"></text>
  45. <block v-if="item.order_amount > 0">
  46. <text>+</text>
  47. <price-format :show-subscript="false" :first-size="36" :second-size="24"
  48. :price="item.order_amount" :weight="500" />
  49. <text class="xs"></text>
  50. </block>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="order-footer flex row-right"
  55. v-if="item.btns.cancel_btn || item.btns.delivery_btn || item.btns.confirm_btn || item.btns.del_btn || item.btns.pay_btn">
  56. <view v-if="item.btns.cancel_btn">
  57. <button size="sm" class="plain br60 lighter" hover-class="none"
  58. @tap.stop="handleOrder(item.id, 0)">
  59. 取消订单
  60. </button>
  61. </view>
  62. <view v-if="item.btns.delivery_btn" @tap.stop="">
  63. <router-link
  64. :to="{path: '/bundle/pages/goods_logistics/goods_logistics', query: {id: item.id, type: 'integral'}}">
  65. <button size="sm" class="btn plain br60 lighter" hover-class="none">查看物流</button>
  66. </router-link>
  67. </view>
  68. <view v-if="item.btns.del_btn">
  69. <button size="sm" class="btn plain br60 lighter" hover-class="none"
  70. @tap.stop="handleOrder(item.id, 1)">删除订单</button>
  71. </view>
  72. <view v-if="item.btns.pay_btn" class="m-l-20">
  73. <router-link
  74. :to="{path: '/pages/payment/payment', query: {from: 'integral', order_id: item.id}}">
  75. <button size="sm" class="btn bg-primary br60 white">
  76. 立即付款
  77. </button>
  78. </router-link>
  79. </view>
  80. <view v-if="item.btns.confirm_btn" class="m-l-20">
  81. <button size="sm" class="btn plain br60 primary red" hover-class="none"
  82. @tap.stop="handleOrder(item.id, 2)">确认收货</button>
  83. </view>
  84. </view>
  85. </router-link>
  86. </view>
  87. </view>
  88. <order-dialog ref="orderDialog" :order-id="orderId" :type="type" @confirm="confirmDialog"></order-dialog>
  89. </mescroll-uni>
  90. </template>
  91. <script>
  92. import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
  93. import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
  94. import {
  95. getIntegralOrder,
  96. cancelIntegralOrder,
  97. delIntegralOrder,
  98. confirmIntegralOrder
  99. } from '@/api/activity';
  100. export default {
  101. mixins: [MescrollMixin, MescrollMoreItemMixin],
  102. data() {
  103. return {
  104. orderList: [],
  105. downOption: {
  106. auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
  107. },
  108. upOption: {
  109. auto: false, // 不自动加载
  110. noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
  111. empty: {
  112. icon: '/static/images/order_null.png',
  113. tip: '暂无订单~', // 提示
  114. fixed: true
  115. }
  116. },
  117. showCancel: false,
  118. type: 0,
  119. orderId: "",
  120. showLoading: false
  121. };
  122. },
  123. props: {
  124. orderType: {
  125. type: [Number, String]
  126. }
  127. },
  128. created() {
  129. uni.$on("refreshorder", () => {
  130. this.refresh()
  131. })
  132. uni.$on('payment', params => {
  133. setTimeout(() => {
  134. console.log(params)
  135. if (params.result) {
  136. this.$toast({
  137. title: "支付成功"
  138. })
  139. this.refresh()
  140. } else {
  141. this.$toast({
  142. title: "支付失败"
  143. })
  144. }
  145. }, 500)
  146. })
  147. },
  148. destroyed() {
  149. uni.$off("payment")
  150. uni.$off("refreshorder")
  151. },
  152. methods: {
  153. async confirmDialog() {
  154. const {
  155. type,
  156. orderId
  157. } = this
  158. let res = null
  159. switch (type) {
  160. case 0:
  161. res = await cancelIntegralOrder(orderId);
  162. break;
  163. case 1:
  164. res = await delIntegralOrder(orderId);
  165. break;
  166. case 2:
  167. res = await confirmIntegralOrder(orderId);
  168. break;
  169. }
  170. if (res.code == 1) {
  171. this.refresh()
  172. this.$toast({
  173. title: res.msg
  174. });
  175. }
  176. },
  177. dialogOpen() {
  178. this.$refs.orderDialog.open()
  179. },
  180. refresh() {
  181. this.mescroll.resetUpScroll()
  182. },
  183. handleOrder(id, type) {
  184. this.orderId = id
  185. this.type = type
  186. this.$nextTick(() => {
  187. this.dialogOpen();
  188. });
  189. },
  190. upCallback(page) {
  191. let pageNum = page.num; // 页码, 默认从1开始
  192. let pageSize = page.size; // 页长, 默认每页10条
  193. let {
  194. orderType,
  195. } = this;
  196. getIntegralOrder({
  197. page_size: pageSize,
  198. page_no: pageNum,
  199. type: orderType
  200. }).then(({
  201. data
  202. }) => {
  203. let curPageData = data.list;
  204. let curPageLen = curPageData.length;
  205. let hasNext = !!data.more;
  206. if (page.num == 1) this.orderList = [];
  207. this.orderList = this.orderList.concat(curPageData);
  208. this.mescroll.endSuccess(curPageLen, hasNext);
  209. })
  210. },
  211. },
  212. computed: {
  213. }
  214. };
  215. </script>
  216. <style lang="scss">
  217. .order-list {
  218. padding: 0 20rpx;
  219. overflow: hidden;
  220. .order-item {
  221. border-radius: 10rpx;
  222. .order-header {
  223. height: 80rpx;
  224. padding: 0 24rpx;
  225. border-bottom: 1px dotted #E5E5E5;
  226. }
  227. .order-goods {
  228. padding: 30rpx 24rpx;
  229. .goods-name {
  230. line-height: 40rpx;
  231. height: 80rpx;
  232. }
  233. }
  234. .all-price {
  235. text-align: right;
  236. padding: 0 24rpx 20rpx;
  237. }
  238. .order-footer {
  239. height: 100rpx;
  240. border-top: $-solid-border;
  241. padding: 0 24rpx;
  242. .plain {
  243. border: 1px solid #BBBBBB;
  244. &.red {
  245. border-color: $-color-primary;
  246. }
  247. }
  248. }
  249. }
  250. }
  251. </style>