index.vue 13 KB

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