classify.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <view>
  3. <!-- 志愿者 -->
  4. <view class="classify-main" v-if="userType == '2'">
  5. <up-tabs
  6. :list="column"
  7. :scrollable="false"
  8. @change="onChange"
  9. :activeStyle="{
  10. color: 'rgba(221, 94, 69, 1)',
  11. fontWeight: 'bold',
  12. transform: 'scale(1.05)',
  13. }"
  14. lineColor="rgba(221, 94, 69, 1)"
  15. :current="tabKey"
  16. >
  17. </up-tabs>
  18. <view class="list">
  19. <List :data="data" v-if="data.length > 0" />
  20. <view v-else>
  21. <NoneView value="您还没有相关订单" />
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 用户 -->
  26. <OrderList
  27. :dataList="dataList"
  28. :dictSort="dictData"
  29. @fetchData="getListData"
  30. v-else
  31. />
  32. <custom-tab-bar :page="2" />
  33. </view>
  34. </template>
  35. <script setup>
  36. import { ref } from 'vue'
  37. import List from '@/pages/common/orderList/index.vue'
  38. import { provide } from 'vue'
  39. import { getVolunteerOrderList } from '@/api/volunteer.js'
  40. import { onMounted } from 'vue'
  41. import { useDict } from '@/utils/dict.js'
  42. import { onLoad, onShow } from '@dcloudio/uni-app'
  43. import OrderList from '@/pages/common/classify/orderlist.vue'
  44. import NoneView from '@/components/NoneView/index.vue'
  45. import { userMainOrderList, systemDictdaTalist } from '@/api/userList.js'
  46. import CustomTabBar from '@/components/CustomTabBar/index.vue'
  47. import { wxMakePhoneCall } from '@/utils/wxRequest.js'
  48. const {
  49. order_status,
  50. // lrr_service_status
  51. } = useDict('order_status', 'lrr_service_status')
  52. provide('order_status', order_status) //订单/服务状态
  53. // provide('lrr_service_status', lrr_service_status); //订单/服务状态
  54. const userType = uni.getStorageSync('userType') //读取本地存储
  55. // 用户/志愿者 识别标识
  56. const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
  57. const tab = ref('')
  58. const tabKey = ref(0)
  59. const dataList = ref([]) //用户
  60. const data = ref([]) //志愿者
  61. // 定义存储字典数据的响应式变量
  62. const dictData = ref([])
  63. /**
  64. * 0待支付 1已支付 2支付超时或取消 3进行中 4已完成 5申请退款中 6已退款 7部分退款 8 待确认
  65. */
  66. const column = [
  67. {
  68. name: '全部',
  69. value: '',
  70. },
  71. {
  72. name: '待服务',
  73. value: '1',
  74. },
  75. {
  76. name: '进行中',
  77. value: '3',
  78. },
  79. {
  80. name: '已完成',
  81. value: '4',
  82. },
  83. {
  84. name: '已取消',
  85. value: '2',
  86. },
  87. ]
  88. //获取用户订单列表状态
  89. async function getData() {
  90. console.log('进入')
  91. try {
  92. const res = await systemDictdaTalist().catch((err) => {
  93. throw err // 重新抛出以进入 catch 块
  94. })
  95. console.log(res, '用户状态获取成功')
  96. dictData.value = res.rows
  97. console.log(dictData.value, 'dictData.value')
  98. } catch (e) {
  99. console.error('获取数据异常:', e) // 确保这里打印错误
  100. }
  101. }
  102. async function getList() {
  103. try {
  104. uni.hideLoading()
  105. uni.showLoading({
  106. title: '数据加载中...',
  107. })
  108. // 判断 userType 来决定调用哪个接口
  109. let res
  110. if (userType === 1) {
  111. // 如果 userType 是 1,调用 userMainOrderList 接口
  112. res = await getListData()
  113. } else if (userType === 2) {
  114. // 如果 userType 是 2,调用 getVolunteerOrderList 接口
  115. res = await getVolunteerOrderList({
  116. orderStatus: tab.value,
  117. })
  118. data.value = res.data
  119. }
  120. } catch (error) {
  121. console.log('error', error)
  122. uni.showToast({
  123. title: error.msg,
  124. icon: 'error',
  125. })
  126. } finally {
  127. uni.hideLoading()
  128. }
  129. }
  130. const getListData = async (orderStatus = tab.value) => {
  131. const res = await userMainOrderList({
  132. orderStatus: orderStatus
  133. })
  134. dataList.value = res.data
  135. }
  136. /**
  137. * 1: 查看
  138. * 2:沟通
  139. * 3:上传照片
  140. */
  141. function btnClick(row, type) {
  142. if (type === 1 && row.orderStatus === '2') {
  143. uni.navigateTo({
  144. url: `/pages_classify/pages/order/index?orderId=${row.secondOrderId}`,
  145. })
  146. return
  147. }
  148. if (type === 1) {
  149. uni.navigateTo({
  150. url: `/pages_classify/pages/handle/index?orderId=${row.secondOrderId}`,
  151. })
  152. return
  153. console.log('res==>', res)
  154. data.value = res.data
  155. }
  156. //前往沟通
  157. // wxMakePhoneCall(phone)
  158. // uni.navigateTo({
  159. // url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${row.secondOrderId}`
  160. // });
  161. }
  162. provide('onClick', btnClick)
  163. function onChange(tabItem) {
  164. tab.value = tabItem.value
  165. getList()
  166. }
  167. onMounted(() => {
  168. getList()
  169. getListData()
  170. getData()
  171. })
  172. onShow(() => {
  173. const params = getApp().globalData.switchTabParams || {}
  174. tabKey.value = params.tabKey || 0
  175. onChange(column[tabKey.value])
  176. // 使用后建议清除参数,避免重复读取
  177. getApp().globalData.switchTabParams = null
  178. })
  179. </script>
  180. <style lang="scss" scoped>
  181. .classify-main {
  182. height: 100vh;
  183. .list {
  184. position: fixed;
  185. top: 50px;
  186. bottom: 150rpx;
  187. left: 0px;
  188. right: 0px;
  189. }
  190. }
  191. </style>