index.tsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. import ColHeader from '@/components/col-header'
  2. import ColResult from '@/components/col-result'
  3. import request from '@/helpers/request'
  4. import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
  5. import { defineComponent } from 'vue'
  6. import styles from './index.module.less'
  7. import { orderState } from '@/views/shop-mall/shop-mall'
  8. import { cartConfirm } from '@/views/cart/cart'
  9. import Item from './item'
  10. import AfterSaleBtns from './components/after-sale-btns'
  11. import { useEventTracking } from '@/helpers/hooks'
  12. export default defineComponent({
  13. name: 'shop-order',
  14. data() {
  15. return {
  16. active: 0,
  17. list: [],
  18. dataShow: true, // 判断是否有数据
  19. loading: false,
  20. finished: false,
  21. params: {
  22. search: '',
  23. groupStatus: 'APPLY',
  24. page: 1,
  25. rows: 20
  26. },
  27. page: {
  28. pageNum: 1,
  29. pageSize: 20
  30. }
  31. }
  32. },
  33. watch: {
  34. active(val) {
  35. this.init()
  36. this.getList()
  37. }
  38. },
  39. mounted() {
  40. useEventTracking('订单')
  41. },
  42. methods: {
  43. init() {
  44. this.page.pageNum = 1
  45. this.finished = false
  46. this.list = []
  47. this.dataShow = true
  48. },
  49. async getList() {
  50. if (this.loading || this.finished) {
  51. return
  52. }
  53. this.loading = true
  54. try {
  55. const { code, data } = await request.get(
  56. '/api-mall-portal/order/list',
  57. {
  58. params: {
  59. ...this.page,
  60. status:
  61. this.active === 0 ? '0,6' : this.active === 1 ? '1,2' : '3,4'
  62. }
  63. }
  64. )
  65. if (code === 200 && data.list) {
  66. this.page.pageNum += 1
  67. this.list = [].concat(this.list as any, data.list)
  68. }
  69. if (this.list.length >= data.total) {
  70. this.finished = true
  71. }
  72. if (this.list.length === 0) {
  73. this.dataShow = false
  74. }
  75. } catch (error) {
  76. this.finished = true
  77. this.dataShow = false
  78. }
  79. this.loading = false
  80. },
  81. onClickRight() {
  82. this.$router.push('/afterSale')
  83. },
  84. async cancelOrder(item: any) {
  85. const dialog = await Dialog.confirm({
  86. title: '提示',
  87. message: '确认取消订单?',
  88. confirmButtonText: '取消订单',
  89. confirmButtonColor: 'var(--van-primary)'
  90. })
  91. if (dialog === 'confirm') {
  92. const { code, data } = await request.post(
  93. '/api-mall-portal/order/cancelUserOrder',
  94. { params: { orderId: item.id } }
  95. )
  96. if (code === 200) {
  97. this.init()
  98. this.getList()
  99. }
  100. }
  101. },
  102. payOrder(item: any) {
  103. cartConfirm.orderInfo = item
  104. this.$router.push({ path: '/cartConfirmAgin' })
  105. },
  106. // 再来一单
  107. async onAginOrder(item: any) {
  108. try {
  109. const res = await request.post('/api-mall-portal/order/oneOrder', {
  110. params: {
  111. orderId: item.id
  112. }
  113. })
  114. const { code, data } = res
  115. if (code === 200) {
  116. cartConfirm.calcAmount = data.calcAmount
  117. cartConfirm.cartPromotionItemList = data.cartPromotionItemList
  118. cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
  119. this.$router.push({
  120. path: '/cartConfirm'
  121. })
  122. }
  123. console.log(res)
  124. } catch (error) {}
  125. },
  126. // 确认收货
  127. async onConfirmReceipt(item: any) {
  128. const dialog = await Dialog.confirm({
  129. title: '提示',
  130. message: '确认收货?',
  131. confirmButtonText: '收货',
  132. confirmButtonColor: 'var(--van-primary)'
  133. })
  134. if (dialog === 'confirm') {
  135. const res = await request.post(
  136. '/api-mall-portal/order/confirmReceiveOrder',
  137. { params: { orderId: item.id } }
  138. )
  139. if (res.code === 200) {
  140. this.init()
  141. this.getList()
  142. }
  143. }
  144. }
  145. },
  146. render() {
  147. const tabs = [
  148. { name: 0, title: '待支付' },
  149. { name: 1, title: '待收货' },
  150. { name: 2, title: '已完成' }
  151. ]
  152. return (
  153. <div class={styles.shopOrder}>
  154. <ColHeader
  155. ref="colHeader"
  156. class="header"
  157. rightText="售后服务"
  158. onClickRight={this.onClickRight}
  159. />
  160. <Tabs
  161. v-model:active={this.active}
  162. color="var(--van-primary)"
  163. lineWidth={28}
  164. animated
  165. swipeable
  166. >
  167. {tabs.map(tab => (
  168. <Tab name={tab.name} title={tab.title}>
  169. {this.active === tab.name && this.dataShow ? (
  170. <List
  171. loading={this.loading}
  172. finished={this.finished}
  173. finishedText=" "
  174. class={[styles.goodsList]}
  175. onLoad={this.getList}
  176. >
  177. {this.list.map((item: any) => (
  178. <>
  179. <CellGroup
  180. class={styles.cellGroup}
  181. onClick={() => {
  182. this.$router.push({
  183. path: '/shopOrderDetail',
  184. query: { id: item.id }
  185. })
  186. }}
  187. >
  188. <Cell
  189. title={item.createTime}
  190. titleClass={styles.payTime}
  191. value={orderState[item.status]}
  192. valueClass={
  193. [0, 4, 5, 6].includes(item.status)
  194. ? styles.payStatus
  195. : styles.paySuccess
  196. }
  197. ></Cell>
  198. {item.orderItemList && item.orderItemList.length
  199. ? item.orderItemList.map((n: any) => (
  200. <Item item={n} />
  201. ))
  202. : null}
  203. <AfterSaleBtns
  204. item={item}
  205. onCancelOrder={this.cancelOrder}
  206. onPayOrder={this.payOrder}
  207. onConfirmReceipt={this.onConfirmReceipt}
  208. onAginOrder={this.onAginOrder}
  209. />
  210. </CellGroup>
  211. </>
  212. ))}
  213. </List>
  214. ) : (
  215. <ColResult
  216. btnStatus={false}
  217. classImgSize="SMALL"
  218. tips="暂无订单"
  219. />
  220. )}
  221. </Tab>
  222. ))}
  223. </Tabs>
  224. </div>
  225. )
  226. }
  227. })