index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <!-- 订单详情 -->
  2. <template>
  3. <view>
  4. <view class="order-detail">
  5. <view class="service-info">
  6. <PositioningMap :address="detaile.address" />
  7. </view>
  8. <view class="user-info order-card">
  9. <view class="handle-user">
  10. <view class="handle-user-left">
  11. <img :src="detaile.avatar" alt=""
  12. style="width: 96rpx; height: 96rpx; margin-right: 32rpx" />
  13. <view class="handle-user-info">
  14. <view class="user-name">{{ detaile.clientName }}</view>
  15. <view class="user-id" style="display: flex">服务类别:{{ detaile.businessTireName }}</view>
  16. </view>
  17. </view>
  18. <view class="user-phone" @click="onPhone(detaile.clientPhoneNumber)">
  19. <up-icon name="phone" color="#fff" size="25"></up-icon>
  20. </view>
  21. </view>
  22. <view class="handle-adress">
  23. <up-icon name="map" color="rgba(156, 163, 175, 1)" size="20"></up-icon>
  24. <view class="adress-text">{{ detaile.address }}</view>
  25. <!-- <up-icon name="pushpin" color="rgba(221, 94, 69, 1)" size="25"></up-icon> -->
  26. </view>
  27. <view>
  28. <view class="handle-remark">
  29. <text class="remark-title">服务次数:{{detaile.singleQuantity }}次</text>
  30. </view>
  31. <view class="handle-remark">
  32. <text class="remark-title">服务时间: {{ detaile.workDate + ' '+ detaile.workStartTime }}</text>
  33. </view>
  34. </view>
  35. <view class="handle-remark">
  36. <view class="remark-title">备注</view>
  37. <view class="remark-text">{{ detaile.remark || '暂无备注' }}</view>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="footer-g">
  42. <view class="handle-start" v-if="orderStatus && detaile.serviceStartTime && dateData">
  43. 服务已开始:<text class="handle-time">{{ dateData }}</text>
  44. </view>
  45. <Slide ref="verify" @change="change" :sliderText="slideData" />
  46. </view>
  47. </view>
  48. </template>
  49. <script setup>
  50. import { ref } from 'vue'
  51. import { onLoad, onUnload } from '@dcloudio/uni-app'
  52. import { getVolunteerOrderInfo, getTimesByDate, getVolunteerFinishSecondOrder } from '@/api/volunteer.js'
  53. import PositioningMap from '@/pages_classify/components/PositioningMap/index.vue'
  54. import Slide from '@/pages_classify/components/Slide/index.vue'
  55. import { useDict } from '@/utils/dict.js'
  56. import DictTag from '@/components/DictTag/index.vue'
  57. import { wxMakePhoneCall } from '@/utils/wxRequest.js'
  58. import { getLatLong } from '@/utils/adress'
  59. import { computed } from 'vue'
  60. const secondOrderId = ref('')
  61. const detaile = ref({})
  62. const verify = ref(null)
  63. const { lrr_service_category } = useDict('lrr_service_category')
  64. const orderStatus = ref(false) //false:未开始服务 true:服务已开始,待上传图片
  65. const onPhone = (phone) => {
  66. if (phone) {
  67. wxMakePhoneCall(phone)
  68. }
  69. }
  70. const dateData = ref('00:00:00')
  71. let timer = null
  72. // 获取当前位置信息
  73. const getCurrentLocation = () => {
  74. return new Promise((resolve, reject) => {
  75. // 先检查用户是否授权了位置权限
  76. uni.getSetting({
  77. success: (res) => {
  78. console.log("TCL: getCurrentLocation -> res", res)
  79. // 已授权,直接获取位置
  80. getLocation(resolve, reject);
  81. // if (!res.authSetting['scope.getFuzzyLocation']) {
  82. // // 如果用户未授权,先请求授权
  83. // uni.authorize({
  84. // scope: 'scope.getFuzzyLocation',
  85. // success: () => {
  86. // // 授权成功后获取位置
  87. // getLocation(resolve, reject);
  88. // },
  89. // fail: (err) => {
  90. // console.error('位置授权失败:', err);
  91. // uni.showModal({
  92. // title: '提示',
  93. // content: '需要获取您的位置信息,请在设置中打开位置权限',
  94. // confirmText: '去设置',
  95. // success: (res) => {
  96. // if (res.confirm) {
  97. // uni.openSetting();
  98. // }
  99. // }
  100. // });
  101. // reject(err);
  102. // }
  103. // });
  104. // } else {
  105. // // 已授权,直接获取位置
  106. // getLocation(resolve, reject);
  107. // }
  108. },
  109. fail: (err) => {
  110. console.error('获取设置失败:', err);
  111. reject(err);
  112. }
  113. });
  114. });
  115. }
  116. // 获取位置的具体实现
  117. const getLocation = (resolve, reject) => {
  118. // 删除开发环境模拟位置的代码,始终获取真实位置
  119. uni.getFuzzyLocation({
  120. type: 'gcj02',
  121. // isHighAccuracy: true, // 高精度
  122. // highAccuracyExpireTime: 3000, // 高精度过期时间
  123. success: (res) => {
  124. const { longitude, latitude } = res;
  125. console.log('当前位置 - 经度:', longitude);
  126. console.log('当前位置 - 纬度:', latitude);
  127. resolve({
  128. longitude,
  129. latitude
  130. });
  131. },
  132. fail: (err) => {
  133. console.error('获取位置失败:', err);
  134. // 获取位置失败时向用户提示
  135. uni.showToast({
  136. title: '获取位置失败,请确保已开启位置权限',
  137. icon: 'none',
  138. duration: 2000
  139. });
  140. reject(err);
  141. }
  142. });
  143. }
  144. const slideData = computed(() => {
  145. //服务已开始,待上传图片
  146. if (orderStatus.value) {
  147. return {
  148. successText: '服务已完成',
  149. startText: '拖动滑块结束服务',
  150. successColor: '#f64a1f',
  151. btnText: '上传照片',
  152. }
  153. }
  154. return {
  155. successText: '服务已开始',
  156. startText: '拖动滑块开始服务',
  157. successColor: '#72c13f',
  158. btnText: '开始',
  159. }
  160. })
  161. const getOrderDetail = async () => {
  162. try {
  163. // uni.showLoading({
  164. // title: '数据加载中...',
  165. // })
  166. const res = await getVolunteerOrderInfo({
  167. secondOrderId: secondOrderId.value,
  168. })
  169. detaile.value = res.data
  170. if (res.data.orderStatus === '3') {
  171. orderStatus.value = true
  172. }
  173. if (res.data.serviceStartTime) {
  174. timer = setInterval(() => {
  175. const timeDiff = Math.abs(new Date() - new Date(res.data.serviceStartTime))
  176. const units = {
  177. day: Math.floor(timeDiff / (1000 * 60 * 60 * 24)),
  178. hour: Math.floor(timeDiff / (1000 * 60 * 60)),
  179. minute: Math.floor(timeDiff / (1000 * 60)),
  180. second: Math.floor(timeDiff / 1000),
  181. }
  182. // 默认返回完整格式
  183. const hours = units.hour % 24
  184. const minutes = units.minute % 60
  185. const seconds = units.second % 60
  186. dateData.value = `${hours}小时${minutes}分钟${seconds}秒`
  187. }, 1000)
  188. }
  189. } catch (error) {
  190. console.log('error', error)
  191. uni.showToast({
  192. title: error.msg,
  193. icon: 'error',
  194. })
  195. } finally {
  196. // uni.hideLoading()
  197. }
  198. }
  199. const change = async (e) => {
  200. if (e.state && !orderStatus.value) {
  201. try {
  202. // uni.showLoading({
  203. // title: '获取位置信息...'
  204. // })
  205. // 获取开始服务时的位置
  206. // const locationData = await getCurrentLocation().catch(err => {
  207. // // uni.hideLoading()
  208. // verify.value.initialization()
  209. // throw new Error('无法获取位置信息,请确保已开启位置权限')
  210. // })
  211. const locationData =await getLatLong()
  212. // 构建参数字符串
  213. const params = `secondOrderId=${secondOrderId.value}&serviceStartLongitude=${locationData.longitude.toString()}&serviceStartLatitude=${locationData.latitude.toString()}`
  214. // 调用开始服务接口,通过URL查询参数传递位置信息
  215. const res = await getTimesByDate(params)
  216. if (res.code === 200) {
  217. uni.showToast({
  218. title: '已开始服务',
  219. icon: 'success',
  220. success: () => {
  221. verify.value.initialization()
  222. // 验证成功
  223. orderStatus.value = true
  224. },
  225. })
  226. }
  227. } catch (error) {
  228. console.error('开始服务失败', error)
  229. uni.showToast({
  230. title: error.message || '开始服务失败',
  231. icon: 'none'
  232. })
  233. } finally {
  234. // uni.hideLoading()
  235. }
  236. }
  237. if (e.state && orderStatus.value) {
  238. try {
  239. // uni.showLoading({
  240. // title: '获取位置信息...'
  241. // })
  242. uni.showToast({
  243. title: '操作成功',
  244. icon: 'success',
  245. success: () => {
  246. setTimeout(() => {
  247. uni.redirectTo({
  248. url: `/pages_classify/pages/order/index?secondOrderId=${secondOrderId.value}`,
  249. })
  250. }, 800)
  251. },
  252. })
  253. } catch (error) {
  254. console.error('结束服务失败', error)
  255. uni.showToast({
  256. title: error.message || '结束服务失败',
  257. icon: 'none'
  258. })
  259. verify.value.initialization()
  260. } finally {
  261. // uni.hideLoading()
  262. }
  263. }
  264. }
  265. onLoad((options) => {
  266. secondOrderId.value = options.secondOrderId
  267. getOrderDetail()
  268. // // 初始检查位置权限
  269. // getCurrentLocation().then(location => {
  270. // console.log('位置权限正常,可以获取位置');
  271. // }).catch(err => {
  272. // console.error('位置权限检查失败', err);
  273. // uni.showModal({
  274. // title: '位置权限提示',
  275. // content: '服务需要获取您的位置信息,请确保已开启位置权限',
  276. // confirmText: '去设置',
  277. // cancelText: '知道了',
  278. // success: (res) => {
  279. // if (res.confirm) {
  280. // uni.openSetting();
  281. // }
  282. // }
  283. // });
  284. // });
  285. })
  286. onUnload(() => {
  287. clearInterval(timer)
  288. timer = null
  289. })
  290. </script>
  291. <style lang="scss" scoped>
  292. .order-detail {
  293. position: fixed;
  294. top: 0;
  295. left: 0;
  296. right: 0;
  297. bottom: 280rpx;
  298. overflow-y: auto;
  299. .service-info {
  300. // height: 360px;
  301. }
  302. .order-card {
  303. border-radius: 8px;
  304. background: rgba(255, 255, 255, 1);
  305. padding: 12px;
  306. margin-bottom: 12px;
  307. }
  308. .font-title {
  309. margin-bottom: 12px;
  310. }
  311. .user-box {
  312. display: flex;
  313. .user-img {
  314. width: 65.8px;
  315. height: 65.8px;
  316. margin-right: 12px;
  317. }
  318. }
  319. .register-box {
  320. display: flex;
  321. margin-bottom: 12px;
  322. .register-img {
  323. width: 90px;
  324. height: 90px;
  325. margin-right: 12px;
  326. }
  327. }
  328. .info-list {
  329. flex: 1;
  330. font-size: 14px;
  331. font-weight: 500;
  332. letter-spacing: 0px;
  333. line-height: 23.27px;
  334. color: rgba(51, 51, 51, 1);
  335. }
  336. .price {
  337. font-size: 18px;
  338. font-weight: 500;
  339. color: rgba(246, 74, 31, 1);
  340. .price-yuan {
  341. font-size: 13px;
  342. font-weight: 700;
  343. color: rgba(246, 74, 31, 1);
  344. }
  345. }
  346. .upload-img {
  347. height: 68px;
  348. width: 68px;
  349. margin-right: 12px;
  350. margin-bottom: 12px;
  351. }
  352. .upload-box {
  353. display: flex;
  354. flex-wrap: wrap;
  355. .upload-img-item {
  356. position: relative;
  357. .delete-icon {
  358. position: absolute;
  359. top: -7px;
  360. right: 7px;
  361. z-index: 1;
  362. }
  363. }
  364. }
  365. .phone {
  366. color: #3c9cff;
  367. }
  368. }
  369. .handle-user {
  370. display: flex;
  371. align-items: center;
  372. justify-content: space-between;
  373. .handle-user-left {
  374. display: flex;
  375. align-items: center;
  376. .handle-user-info {
  377. .user-name {
  378. font-size: 32rpx;
  379. font-weight: 400;
  380. color: rgba(17, 24, 39, 1);
  381. }
  382. .user-id {
  383. font-size: 28rpx;
  384. font-weight: 400;
  385. color: rgba(107, 114, 128, 1);
  386. }
  387. }
  388. }
  389. .user-phone {
  390. display: flex;
  391. align-items: center;
  392. justify-content: center;
  393. width: 80rpx;
  394. height: 80rpx;
  395. border-radius: 50%;
  396. background: rgba(221, 94, 69, 1);
  397. }
  398. }
  399. .handle-adress {
  400. display: flex;
  401. align-items: center;
  402. justify-content: space-between;
  403. margin-top: 38rpx;
  404. .adress-text {
  405. flex: 1;
  406. text-align: left;
  407. padding-left: 24rpx;
  408. font-size: 32rpx;
  409. font-weight: 400;
  410. color: rgba(75, 85, 99, 1);
  411. }
  412. }
  413. .handle-remark {
  414. margin-top: 30rpx;
  415. .remark-title {
  416. font-size: 28rpx;
  417. font-weight: 400;
  418. color: rgba(17, 24, 39, 1);
  419. margin-bottom: 20rpx;
  420. }
  421. .remark-text {
  422. border-radius: 16rpx;
  423. background: rgba(249, 250, 251, 1);
  424. padding: 32rpx;
  425. font-size: 32rpx;
  426. font-weight: 400;
  427. color: rgba(75, 85, 99, 1);
  428. }
  429. }
  430. .handle-start {
  431. margin-bottom: 30rpx;
  432. font-size: 32rpx;
  433. font-weight: 400;
  434. color: rgba(75, 85, 99, 1);
  435. text-align: center;
  436. .handle-time {
  437. font-size: 32rpx;
  438. font-weight: 400;
  439. color: rgba(17, 24, 39, 1);
  440. }
  441. }
  442. .footer-g {
  443. padding: 12px;
  444. position: absolute;
  445. bottom: 18px;
  446. left: 0px;
  447. right: 0px;
  448. background: rgba(255, 255, 255, 1);
  449. }
  450. </style>