Browse Source
feat(订单状态): 重构订单状态显示为组件并优化相关页面
新增订单状态组件统一管理不同订单状态显示逻辑 优化订单详情页、求职详情页和招聘详情页的状态显示 添加求职订单列表页面展示待确认订单 更新结算方式选项为"提前支付"和"试用以后支付" 修复订单状态显示不一致问题并移除重复代码master
10 changed files with 434 additions and 269 deletions
Split View
Diff Options
-
+161 -0components/order-status/index.vue
-
+13 -0pages.json
-
+24 -15pages_subpack/job-hunt/index.vue
-
+193 -0pages_subpack/job-hunt/order-list.vue
-
+13 -83pages_subpack/job-order-detail/index.vue
-
+17 -88pages_subpack/order-detail/boss.vue
-
+11 -81pages_subpack/order-detail/index.vue
-
+2 -2pages_subpack/release/component/master.vue
-
+0 -0static/image/order/46524.png
-
+0 -0static/image/order/46525.png
+ 161
- 0
components/order-status/index.vue
View File
| @ -0,0 +1,161 @@ | |||
| <template> | |||
| <view> | |||
| <!-- 状态显示区域 --> | |||
| <view class="se-flex se-flex-h-sb se-flex-v-c se-py-20"> | |||
| <!-- <view class="se-flex se-flex-v-c"> | |||
| <image src="@/static/images/order/46525.png" | |||
| style="width: 80rpx;height: 80rpx;" | |||
| mode="aspectFit"></image> | |||
| </view> --> | |||
| <view class="se-flex se-flex-v-c" | |||
| style="flex-direction: row;"> | |||
| <view class="line-orange"></view> | |||
| <text class="se-ml-10 se-fs-28 se-fw-6 se-c-black">{{ statusText }}</text> | |||
| </view> | |||
| </view> | |||
| <!-- 进度条 --> | |||
| <view class="se-py-20"> | |||
| <u-steps | |||
| activeColor="#FF7A31" | |||
| :current="stepsIndex" dot> | |||
| <u-steps-item class="se-fs-22" v-for="(items,indexs) in stepsList" | |||
| :key="indexs" :title="items.title"> | |||
| </u-steps-item> | |||
| </u-steps> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'OrderStatus', | |||
| props: { | |||
| // 订单对象 | |||
| orderData: { | |||
| type: Object, | |||
| default: () => ({}) | |||
| }, | |||
| // 页面类型，用于区分不同页面的状态显示 | |||
| pageType: { | |||
| type: String, | |||
| default: 'job-order' // 'job-order' 或 'order' | |||
| } | |||
| }, | |||
| computed: { | |||
| stepsIndex() { | |||
| return this.orderData.status || 0; | |||
| }, | |||
| statusText() { | |||
| const statusTextMap = { | |||
| '0' : {//先付后用 | |||
| 'job-order': { | |||
| 0: '等待师傅确认',//师傅操作 | |||
| 1: '企业待支付',//企业操作 | |||
| 2: '订单进行中',//师傅操作 | |||
| 3: '试工完成',//企业操作 | |||
| 4: '',//暂无 | |||
| 5: '订单已完成', | |||
| 6: '订单已取消' | |||
| }, | |||
| default: { | |||
| 0: '等待企业确认并支付',//企业操作 | |||
| 1: '',//暂无 | |||
| 2: '订单进行中',//师傅操作 | |||
| 3: '试工完成',//企业操作 | |||
| 4: '',//暂无 | |||
| 5: '订单已完成', | |||
| 6: '订单已取消' | |||
| } | |||
| }, | |||
| '1' : {//试用以后支付 | |||
| 'job-order': { | |||
| 0: '等待企业确认', | |||
| 1: '订单进行中', | |||
| 2: '试工完成', | |||
| 3: '企业待支付', | |||
| 4: '订单待完成', | |||
| 5: '订单已完成', | |||
| 6: '订单已取消' | |||
| }, | |||
| default: { | |||
| 0: '等待企业确认', | |||
| 1: '订单进行中', | |||
| 2: '试工完成', | |||
| 3: '企业待支付', | |||
| 4: '订单待完成', | |||
| 5: '订单已完成', | |||
| 6: '订单已取消' | |||
| } | |||
| } | |||
| }; | |||
| let i = this.orderData ? this.orderData.payType : '1'; | |||
| let statusTextMapItem = statusTextMap[i] || statusTextMap[1]; | |||
| const pageTypeMap = statusTextMapItem[this.pageType] || statusTextMapItem.default; | |||
| return pageTypeMap[this.stepsIndex] || '未知状态'; | |||
| }, | |||
| statusImage() { | |||
| const statusImageMap = { | |||
| 0: '/static/images/order/46524.png', | |||
| 1: '/static/images/order/46524.png', | |||
| 2: '/static/images/order/46525.png', | |||
| 3: '/static/images/order/46525.png', | |||
| 4: '/static/images/order/46525.png', | |||
| 5: '/static/images/order/46525.png', | |||
| 6: '/static/images/order/46525.png' | |||
| }; | |||
| return statusImageMap[this.stepsIndex] || '/static/images/order/46524.png'; | |||
| }, | |||
| stepsList() { | |||
| const stepsListMap = { | |||
| 0 : {//先付后用 | |||
| 'job-order': [ | |||
| { title: "师傅确认", date: "" }, | |||
| { title: "进行", date: "" }, | |||
| { title: "试工完成", date: "" }, | |||
| { title: "企业支付", date: "" }, | |||
| { title: "订单完成", date: "" } | |||
| ], | |||
| default: [ | |||
| { title: "接单", date: "" }, | |||
| { title: "进行", date: "" }, | |||
| { title: "试工完成", date: "" }, | |||
| { title: "企业确认", date: "" }, | |||
| { title: "企业支付", date: "" }, | |||
| { title: "企业完成", date: "" } | |||
| ] | |||
| }, | |||
| 1 : {//试用以后支付 | |||
| 'job-order': [ | |||
| { title: "师傅确认", date: "" }, | |||
| { title: "进行", date: "" }, | |||
| { title: "试工完成", date: "" }, | |||
| { title: "企业支付", date: "" }, | |||
| { title: "订单完成", date: "" } | |||
| ], | |||
| default: [ | |||
| { title: "接单", date: "" }, | |||
| { title: "进行", date: "" }, | |||
| { title: "试工完成", date: "" }, | |||
| { title: "企业确认", date: "" }, | |||
| { title: "企业支付", date: "" }, | |||
| { title: "企业完成", date: "" } | |||
| ] | |||
| }, | |||
| }; | |||
| let i = this.orderData ? this.orderData.payType : '1'; | |||
| let stepsListMapItem = stepsListMap[i] || stepsListMap[1]; | |||
| return stepsListMapItem[this.pageType] || stepsListMapItem.default; | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .line-orange { | |||
| width: 8rpx; | |||
| height: 32rpx; | |||
| background: #ff7a31; | |||
| border-radius: 4rpx; | |||
| } | |||
| </style> | |||
+ 13
- 0
pages.json
View File
+ 24
- 15
pages_subpack/job-hunt/index.vue
View File
+ 193
- 0
pages_subpack/job-hunt/order-list.vue
View File
| @ -0,0 +1,193 @@ | |||
| <template> | |||
| <view class="u-page se-w-vw-100"> | |||
| <!-- 求职信息头部 --> | |||
| <view class="se-m-20 se-br-20 se-bs-b se-bgc-white se-py-20 se-px-30" v-if="seekInfo"> | |||
| <view class="se-flex se-flex-h-sb se-mb-10"> | |||
| <view class="se-flex"> | |||
| <view class="se-a-80"> | |||
| <image class="se-a-80 se-br-p-50 se-bgc-f5" :src="seekInfo.employResume.headImage" mode=""></image> | |||
| </view> | |||
| <view class="se-ml-20 se-flex se-flex-v-c se-flex-ai-fs"> | |||
| <text class="se-fw-6 se-c-black se-fs-30">{{seekInfo.employResume.name?seekInfo.employResume.name:seekInfo.hanHaiMember.nickName}}</text> | |||
| <text class="se-mx-10 se-b-l"></text> | |||
| <text class="se-fs-28 se-c-orange">日薪:{{seekInfo.dayMoney}}</text> | |||
| <text class="se-fs-24 se-c-text-third se-mt-5">{{seekInfo.employResume.sex==1?"男":"女"}}-{{seekInfo.employResume.nation?seekInfo.employResume.nation:"未知"}}族-{{seekInfo.employResume.age}}岁</text> | |||
| </view> | |||
| </view> | |||
| <view class="se-c-orange se-fs-32 se-fw-6"> | |||
| {{seekInfo.salaryMin}}-{{seekInfo.salaryMax}}元 | |||
| </view> | |||
| </view> | |||
| <view class="se-py-10"> | |||
| <text class="se-c-text-sub se-fs-22 se-mr-10 se-py-5 se-px-20 se-br-5 se-bgc-f5" | |||
| v-if="seekInfo.categoryOne_dictText">{{seekInfo.categoryOne_dictText}}</text> | |||
| <text class="se-c-text-sub se-fs-22 se-mr-10 se-py-5 se-px-20 se-br-5 se-bgc-f5" | |||
| v-if="seekInfo.categoryTwo_dictText">{{seekInfo.categoryTwo_dictText}}</text> | |||
| </view> | |||
| <view class="se-flex se-flex-h-sb"> | |||
| <view class="se-flex se-flex-h-c"> | |||
| <u-icon name="map"></u-icon> | |||
| <text class="se-c-text-sub se-fs-24 se-pl-10 se-toe-3">{{seekInfo.address}}</text> | |||
| </view> | |||
| <view | |||
| style="flex-shrink: 0;" | |||
| class="se-c-orange se-fs-24 se-fw-6"> | |||
| 共{{orderList.length}}个订单 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="se-p-40"> | |||
| <view class="se-px-40 se-mb-30 se-py-30 se-bgc-white se-br-40 se-bs-b" | |||
| v-for="(item, index) in orderList" | |||
| :key="index" | |||
| @click="onOrderDetail(item)"> | |||
| <view class="se-flex se-flex-h-sb se-fw-6 se-fs-32 se-pb-20"> | |||
| <view class="se-flex"> | |||
| </view> | |||
| <view class="se-c-red"> | |||
| {{getStatusText(item.status)}} | |||
| </view> | |||
| </view> | |||
| <view class="se-flex se-bgc-f5 se-br-20 se-p-20"> | |||
| <view class="se-w-160 se-h-160"> | |||
| <image class="se-w-160 se-h-160 se-br-10" :src="item.employAuthenticationCompany ? | |||
| item.employAuthenticationCompany.headImg | |||
| : '/static/image/logo.png'" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs se-flex-1"> | |||
| <view class="se-fw-6 se-c-black se-fs-30 se-display-ib se-mb-10" | |||
| v-if="item.employAuthenticationCompany"> | |||
| 企业：{{item.employAuthenticationCompany.name}} | |||
| </view> | |||
| <view class="se-fs-24 se-c-text-third se-display-ib se-mb-5" | |||
| v-if="item.employAuthenticationCompany"> | |||
| 联系电话：{{item.employAuthenticationCompany.phone}} | |||
| </view> | |||
| <view class="se-fs-24 se-c-text-third se-display-ib se-mb-5"> | |||
| 聘用时间：{{item.createTime | formatTime}} | |||
| </view> | |||
| <view class="se-fs-24 se-c-text-third se-display-ib se-mb-5" | |||
| v-if="item.employAuthenticationCompany"> | |||
| 公司地址：{{item.employAuthenticationCompany.address}} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <u-empty v-if="orderList && orderList.length==0" mode="list" text="暂无订单信息"></u-empty> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| querySeekById | |||
| } from "@/common/api.js" | |||
| export default { | |||
| data() { | |||
| return { | |||
| orderList: [], | |||
| seekInfo: null, | |||
| seekId: null | |||
| } | |||
| }, | |||
| filters: { | |||
| formatTime(time) { | |||
| if (!time) return ''; | |||
| // 处理时间戳格式（可能是毫秒或字符串） | |||
| let timestamp; | |||
| if (typeof time === 'number') { | |||
| // 如果是数字，直接使用 | |||
| timestamp = time; | |||
| } else { | |||
| // 如果是字符串，转换为时间戳 | |||
| timestamp = new Date(time).getTime(); | |||
| } | |||
| const currentTime = new Date().getTime(); | |||
| const diff = (currentTime - timestamp) / 1000; // 时间差，单位：秒 | |||
| // 计算月差，判断是否超过一个月 | |||
| const oneMonthInSeconds = 30 * 24 * 60 * 60; | |||
| if (diff > oneMonthInSeconds) { | |||
| let date = new Date(timestamp); | |||
| let year = date.getFullYear(); | |||
| let month = date.getMonth() + 1; | |||
| let day = date.getDate(); | |||
| if (month < 10) month = "0" + month; | |||
| if (day < 10) day = "0" + day; | |||
| return `${year}-${month}-${day}`; | |||
| } else { | |||
| // 计算秒、分钟、小时的差值 | |||
| if (diff < 60) { | |||
| return `${Math.floor(diff)}秒钟前`; | |||
| } else if (diff < 60 * 60) { | |||
| return `${Math.floor(diff / 60)}分钟前`; | |||
| } else if (diff < 60 * 60 * 24) { | |||
| return `${Math.floor(diff / 60 / 60)}小时前`; | |||
| } else { | |||
| // 显示天数 | |||
| return `${Math.floor(diff / 60 / 60 / 24)}天前`; | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| onLoad(options) { | |||
| if (options.seekId) { | |||
| this.seekId = options.seekId; | |||
| } | |||
| }, | |||
| onShow(){ | |||
| this.getSeekDetail(); | |||
| }, | |||
| methods: { | |||
| getSeekDetail() { | |||
| querySeekById({ id: this.seekId }).then(response => { | |||
| if (response.success) { | |||
| this.seekInfo = response.result; | |||
| this.orderList = this.seekInfo.employOrder || []; | |||
| // 设置页面标题 | |||
| uni.setNavigationBarTitle({ | |||
| title: `${this.seekInfo.employResume.name || this.seekInfo.hanHaiMember.nickName} - 订单列表` | |||
| }); | |||
| } else { | |||
| uni.showToast({ | |||
| title: '获取求职详情失败', | |||
| icon: 'none' | |||
| }); | |||
| } | |||
| }).catch(error => { | |||
| console.error('获取求职详情失败:', error); | |||
| uni.showToast({ | |||
| title: '网络错误', | |||
| icon: 'none' | |||
| }); | |||
| }); | |||
| }, | |||
| getStatusText(status) { | |||
| const statusMap = { | |||
| 0: '待确认', | |||
| 1: '进行中', | |||
| 2: '试工完成', | |||
| 3: '企业确认', | |||
| 4: '已支付', | |||
| 5: '已完成', | |||
| 6: '已取消' | |||
| }; | |||
| return statusMap[status] || '未知状态'; | |||
| }, | |||
| onOrderDetail(order) { | |||
| uni.navigateTo({ | |||
| url: `/pages_subpack/job-order-detail/index?orderId=${order.id}&type=true` | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| </style> | |||
