猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

430 lines
9.2 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <!-- <div>订单详情</div> -->
  3. <view class="box box-size">
  4. <view class="top box-size" :style="{ borderRadius: '16rpx' }">
  5. <view class="top_left box-size">
  6. <view>
  7. 本单客户支付金额
  8. <view class="vertically_center text1">
  9. ¥ 45
  10. </view>
  11. </view>
  12. X
  13. <view>
  14. 您的分成比例
  15. <view class="vertically_center text1">
  16. 20%
  17. </view>
  18. </view>
  19. =
  20. <view>
  21. 本单酬劳
  22. <view class="vertically_center text1">
  23. ¥ 9
  24. </view>
  25. </view>
  26. </view>
  27. <view class="top_bottom">
  28. 订单为系统派发请确认订单信息后再抢单
  29. </view>
  30. <view class="top-button" :style="{ borderRadius: '27rpx' }">
  31. 系统派单
  32. </view>
  33. </view>
  34. <view class="information box-size" :style="{ borderRadius: '16rpx' }">
  35. <view class="form-title">
  36. 基本信息
  37. </view>
  38. <view class="line1">
  39. </view>
  40. <view class="time">
  41. <view>
  42. 服务日期
  43. </view>
  44. <view >
  45. 12-012-08
  46. </view>
  47. </view>
  48. <view class="line1">
  49. </view>
  50. <view class="time">
  51. <view>
  52. 服务地址
  53. </view>
  54. <view >
  55. {{ orderDetail.order?.address }}
  56. </view>
  57. </view>
  58. </view>
  59. <view class="service box-size" :style="{ borderRadius: '8rpx' }">
  60. <view class="horizontal_distribution service_top">
  61. <view class="form-title">
  62. 服务内容和酬劳
  63. </view>
  64. <view @click="petInfo" class="text2 flex">
  65. 查看宠物信息
  66. <u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
  67. </view>
  68. </view>
  69. <view class="line1">
  70. </view>
  71. <view v-for="pet in orderDetail.petList" :key="pet.id" class="pet_information box-size">
  72. <view class="flex pet_item box-size">
  73. <view class="img" :style="{borderRadius:'100rpx'}">
  74. <image :src="pet.headImage" mode=""></image>
  75. </view>
  76. <view >
  77. <view class="flex name">
  78. <view class="name_text">
  79. {{ pet.nickName }}
  80. </view>
  81. <image src="" mode=""></image>
  82. </view>
  83. {{ pet.type }}
  84. </view>
  85. </view>
  86. <view class="pet- level">
  87. 12-14
  88. <text>专业喂养</text>
  89. 上门1次
  90. </view>
  91. <view class="pet- level">
  92. 12-15
  93. <text>专业喂养</text>
  94. 上门1次
  95. </view>
  96. </view>
  97. <view class="line1">
  98. </view>
  99. <view class="flex money_total">
  100. <view>
  101. 合计
  102. </view>
  103. <view class="money_text">
  104. ¥&nbsp;{{ orderDetail.order?.price }}
  105. </view>
  106. </view>
  107. </view>
  108. <view class="other_information box-size">
  109. <view class="form-title">
  110. 其他信息
  111. </view>
  112. <view class="line1">
  113. </view>
  114. <view class="horizontal_distribution text3">
  115. <view>
  116. 订单编号
  117. </view>
  118. <view>
  119. fe34521532513256
  120. </view>
  121. </view>
  122. <view class="line1">
  123. </view>
  124. <view class="horizontal_distribution text3">
  125. <view>
  126. 下单时间
  127. </view>
  128. <view>
  129. {{ orderDetail.order?.createTime }}
  130. </view>
  131. </view>
  132. <view class="line1">
  133. </view>
  134. <view class="horizontal_distribution text3">
  135. <view>
  136. 支付时间
  137. </view>
  138. <view>
  139. {{ orderDetail.order?.payTime }}
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="bottom">
  145. <view @click="rushToBuyAnOrder" class="bottom_button level" :style="{ borderRadius: '41rpx' }">
  146. 立即抢单
  147. </view>
  148. </view>
  149. <up-popup :show="showConfirmOrder" mode="bottom" @close="close" @open="open" :round="10" :closeable="true"
  150. :safeAreaInsetBottom="false"
  151. :customStyle="{padding:'60rpx 20rpx 40rpx 20rpx;position:relative;height:auto;background:#F6F5F8;'}">
  152. <view>
  153. <view style="position:absolute;top: 20rpx;left:0;text-align: center;width: 100%;">
  154. 订单信息
  155. </view>
  156. <view style="text-align: center;">
  157. 请全部确认后接单
  158. </view>
  159. <view class="order-confirmation">
  160. <view class="confirmation-item">
  161. <view class="confirmation-base">
  162. <view class="title">
  163. 服务日期
  164. </view>
  165. <view class="desc">
  166. 共两天:12-09,01-09
  167. </view>
  168. </view>
  169. <view class="ok">
  170. <view class="btn">
  171. 点击确定
  172. </view>
  173. </view>
  174. </view>
  175. <view class="confirmation-item">
  176. <view class="confirmation-base">
  177. <view class="title">
  178. 服务地址
  179. </view>
  180. <view class="desc">
  181. xxx省xx市
  182. </view>
  183. </view>
  184. <view class="ok">
  185. <view class="btn">
  186. 点击确定
  187. </view>
  188. </view>
  189. </view>
  190. <view class="confirmation-item">
  191. <view class="confirmation-base">
  192. <view class="title">
  193. 服务宠物
  194. </view>
  195. <view class="desc">
  196. <view >
  197. 中华田园犬
  198. </view>
  199. <view >
  200. 中华田园犬2
  201. </view>
  202. </view>
  203. </view>
  204. <view class="ok">
  205. <view class="btn">
  206. 点击确定
  207. </view>
  208. </view>
  209. </view>
  210. </view>
  211. <view class="handbook">
  212. 接单即接受
  213. <text class="text">伴宠师手册</text>
  214. </view>
  215. <up-button @click="conform" color="#FFBF60" text="确定" shape="circle"></up-button>
  216. </view>
  217. </up-popup>
  218. <!-- 抢单成功 -->
  219. <up-popup :show="showOrderSuccess" mode="center" @close="orderSuccessClose" @open="orderSuccessOpen" :zIndex="999"
  220. :round="10" :safeAreaInsetBottom="false" :customStyle="{ width:'80%' , 'background-color': 'transparent' }">
  221. <view>
  222. <image style="width: 100%;" :src="configList?.order_success?.paramValueImage" mode="widthFix"></image>
  223. </view>
  224. <view style="margin-top: -100%;padding: 40rpx;20rpx">
  225. <view class="success-desc">
  226. {{ configList?.order_success?.paramValueText || '请立即添加服务顾问,并提供订单编码' }}
  227. </view>
  228. <view style="position: relative;z-index: 999;" class="qr-code">
  229. <image class="code-img" src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif"
  230. mode="aspectFill"></image>
  231. </view>
  232. <view class="input">
  233. <up-input placeholder="" border="none" v-model="value" disabled
  234. :customStyle="{height:'60rpx','text-indent': '20rem', 'background-color': '#F3F3F3', position : 'relative','z-index' : '999' }"></up-input>
  235. </view>
  236. <up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
  237. </view>
  238. </up-popup>
  239. </template>
  240. <script setup>
  241. import {
  242. ref,
  243. computed
  244. } from 'vue'
  245. import {
  246. onLoad
  247. } from '@dcloudio/uni-app'
  248. import {
  249. getByOrderId
  250. } from "@/api/receivingHall/index.js"
  251. import {
  252. onShow
  253. } from '@dcloudio/uni-app'
  254. import order from '../../../api/order/order'
  255. import {
  256. startByOrderId
  257. } from "@/api/receivingHall/index.js"
  258. import {
  259. useStore
  260. } from "vuex"
  261. onLoad((options) => {
  262. orderId.value = options.id || null;
  263. });
  264. onShow(() => {
  265. getDetail();
  266. })
  267. const store = useStore();
  268. const orderId = ref(null);
  269. const orderDetail = ref({});
  270. const showConfirmOrder = ref(false);
  271. const showOrderSuccess = ref(false);
  272. const value = ref("45619491656")
  273. const petList = ref([])
  274. const userInfo = computed(() => {
  275. return store.getters.userInfo
  276. })
  277. const configList = computed(() => {
  278. return store.getters.configList;
  279. })
  280. // 抢单
  281. const rushToBuyAnOrder = () => {
  282. open()
  283. }
  284. // 查看宠物信息
  285. const petInfo = () => {
  286. uni.navigateTo({
  287. url: "/otherPages/orderTakingManage/pet/index"
  288. })
  289. }
  290. const open = () => {
  291. showConfirmOrder.value = true;
  292. }
  293. const close = () => {
  294. showConfirmOrder.value = false;
  295. }
  296. const orderSuccessClose = () => {
  297. showOrderSuccess.value = false;
  298. };
  299. const orderSuccessOpen = () => {
  300. showOrderSuccess.value = true;
  301. };
  302. const conform = async () => {
  303. close();
  304. let response = await startByOrderId({
  305. id: orderId.value,
  306. userId: userInfo.value.userId
  307. })
  308. if (response.code == 200 && response.data) {
  309. uni.showToast({
  310. title: '接单成功~',
  311. icon: "none"
  312. });
  313. orderSuccessOpen();
  314. }
  315. }
  316. const getDetail = async () => {
  317. let response = await getByOrderId({
  318. id: orderId.value
  319. });
  320. if (response.code == 200 && response.data) {
  321. orderDetail.value = response.data;
  322. }
  323. }
  324. </script>
  325. <style scoped lang="scss">
  326. @import "index";
  327. .line1 {
  328. position: relative;
  329. margin: 10rpx 0 20rpx 0;
  330. &::before {
  331. position: absolute;
  332. top: 10rpx;
  333. left: -10rpx;
  334. content: "";
  335. width: 690rpx;
  336. height: 0.5rpx;
  337. background-color: #EFEFEF;
  338. // background-color: red;
  339. }
  340. }
  341. .order-confirmation {
  342. .confirmation-item {
  343. display: flex;
  344. justify-content: space-between;
  345. align-items: center;
  346. background: white;
  347. padding: 20rpx;
  348. border-radius: 20rpx;
  349. overflow: hidden;
  350. margin: 20rpx 0rpx;
  351. .confirmation-base {
  352. width: 75%;
  353. .title {
  354. font-size: 34rpx;
  355. }
  356. .desc {
  357. color: #999999;
  358. }
  359. }
  360. .ok {
  361. display: flex;
  362. justify-content: center;
  363. width: 25%;
  364. .btn {
  365. display: flex;
  366. align-items: center;
  367. justify-content: center;
  368. background: #FFBF60;
  369. color: white;
  370. width: 100%;
  371. height: 60rpx;
  372. border-radius: 30rpx;
  373. }
  374. }
  375. }
  376. }
  377. .handbook {
  378. color: #999999;
  379. margin: 10rpx 0rpx;
  380. .text {
  381. color: #FFBF60;
  382. }
  383. }
  384. .success-desc {
  385. text-align: center;
  386. color: #787878;
  387. font-size: 32rpx;
  388. }
  389. .qr-code {
  390. display: flex;
  391. justify-content: center;
  392. margin: 40rpx 0rpx;
  393. .code-img {
  394. width: 160rpx;
  395. height: 160rpx;
  396. }
  397. }
  398. .input {
  399. margin-bottom: 40rpx;
  400. }
  401. </style>