用工小程序前端代码
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.

389 lines
13 KiB

  1. <template>
  2. <view class="u-page">
  3. <view class="se-px-20 se-pt-40 se-flex-v-c">
  4. <template v-if="stepsIndex==0">
  5. <view class="se-flex se-flex-h-c">
  6. <image class="se-a-50" src="@/static/image/46524.png" mode=""></image>
  7. <text class="se-c-orange se-fs-30 se-ml-10">聘用师傅-师傅求职-等待师傅确认</text>
  8. </view>
  9. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  10. </template>
  11. <template v-if="stepsIndex==1">
  12. <view class="se-flex se-flex-h-c">
  13. <image class="se-a-50" src="@/static/image/46524.png" mode=""></image>
  14. <text class="se-c-orange se-fs-30 se-ml-10">订单进行中</text>
  15. </view>
  16. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  17. </template>
  18. <template v-if="stepsIndex==2">
  19. <view class="se-flex se-flex-h-c">
  20. <image class="se-a-50" src="@/static/image/46525.png" mode=""></image>
  21. <text class="se-c-orange se-fs-30 se-ml-10">企业待确认</text>
  22. </view>
  23. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  24. </template>
  25. <template v-if="stepsIndex==3">
  26. <view class="se-flex se-flex-h-c">
  27. <image class="se-a-50" src="@/static/image/46525.png" mode=""></image>
  28. <text class="se-c-orange se-fs-30 se-ml-10">企业待支付</text>
  29. </view>
  30. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  31. </template>
  32. <template v-if="stepsIndex==4">
  33. <view class="se-flex se-flex-h-c">
  34. <image class="se-a-50" src="@/static/image/46525.png" mode=""></image>
  35. <text class="se-c-orange se-fs-30 se-ml-10">求职者待确认</text>
  36. </view>
  37. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  38. </template>
  39. <template v-if="stepsIndex==5">
  40. <view class="se-flex se-flex-h-c">
  41. <image class="se-a-50" src="@/static/image/46525.png" mode=""></image>
  42. <text class="se-c-orange se-fs-30 se-ml-10">订单已完成</text>
  43. </view>
  44. <text class="se-c-orange se-mt-20 se-fs-24">124530有效</text>
  45. </template>
  46. <template v-if="stepsIndex==6">
  47. <view class="se-flex se-flex-h-c">
  48. <image class="se-a-50" src="@/static/image/46525.png" mode=""></image>
  49. <text class="se-c-orange se-fs-30 se-ml-10">订单已取消</text>
  50. </view>
  51. </template>
  52. </view>
  53. <view class="se-px-20 se-py-40" v-if="stepsIndex != 6">
  54. <u-steps activeColor="#FF7A31" :current="stepsIndex" dot>
  55. <u-steps-item class="se-fs-22" v-for="(items,indexs) in stepsList" :key="indexs" :title="items.title">
  56. <!-- <text class="se-fs-22" slot="title">{{items.title}}</text> -->
  57. </u-steps-item>
  58. </u-steps>
  59. </view>
  60. <!-- 企业 -->
  61. <view class="se-px-20">
  62. <view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
  63. v-if="!type">
  64. <view @click="onService()"
  65. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  66. <text>联系客服</text>
  67. </view>
  68. <template v-if="stepsIndex==0">
  69. <view @click="onCancel()"
  70. class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
  71. <text>取消</text>
  72. </view>
  73. </template>
  74. <template v-if="stepsIndex == 2">
  75. <view @click="confirmOrderTryCompany()"
  76. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  77. <text>企业确认</text>
  78. </view>
  79. </template>
  80. <template v-if="stepsIndex==3">
  81. <view @click="onPay()"
  82. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  83. <text>去支付</text>
  84. </view>
  85. </template>
  86. </view>
  87. <!-- 求职者 -->
  88. <view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
  89. v-else>
  90. <view @click="onService()"
  91. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  92. <text>联系客服</text>
  93. </view>
  94. <template v-if="stepsIndex==0">
  95. <view @click="confirmOrder()"
  96. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  97. <text>接受工作</text>
  98. </view>
  99. <view @click="onCancel()"
  100. class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
  101. <text>取消</text>
  102. </view>
  103. </template>
  104. <template v-if="stepsIndex==1">
  105. <view @click="confirmOrderTry()"
  106. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  107. <text>确认试工完成</text>
  108. </view>
  109. </template>
  110. <template v-if="stepsIndex==4">
  111. <view @click="confirmOrderTryCompanyOk()"
  112. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  113. <text>确认到账</text>
  114. </view>
  115. </template>
  116. </view>
  117. </view>
  118. <view class="se-px-40 se-py-20">
  119. <view class="se-flex se-flex-ai-c se-pb-10">
  120. <view class="line-orange"></view>
  121. <view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
  122. 师傅求职详情
  123. </view>
  124. </view>
  125. <view class="se-flex se-flex-v-sa se-flex-ai-fs se-py-20">
  126. <view class="se-flex">
  127. <view class="se-w-160 se-h-160">
  128. <image class="se-w-160 se-h-160 se-br-10" :src="obj.employResume.headImage" mode=""></image>
  129. </view>
  130. <view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
  131. <view class="se-fw-6 se-c-black se-fs-30 se-display-ib">期望工作地址:{{obj.employSeek.address}}</view>
  132. <view class="se-fs-24 se-c-text-third se-display-ib">所属行业:{{obj.employSeek.categoryOne}}</view>
  133. <view class="se-fs-24 se-c-text-third se-display-ib">所属工种:{{obj.employSeek.categoryTwo}}</view>
  134. </view>
  135. </view>
  136. <view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
  137. <view class="se-fs-24 se-display-ib">薪资</view>
  138. <view class="se-c-orange se-fs-32 se-fw-6 se-display-ib">{{obj.employSeek.dayMoney}}/</view>
  139. </view>
  140. </view>
  141. <u-line dashed></u-line>
  142. <view class="se-py-10 se-pb-30">
  143. <view class="se-mt-30">
  144. <text class="se-fs-28 se-c-black se-fw5">师傅姓名:{{obj.employResume.name}}</text>
  145. <text class="se-fs-28 se-c-black se-fw5">民族:{{obj.employResume.nation}}</text>
  146. <text class="se-fs-28 se-c-black se-fw5">性别:{{obj.employResume.sex}}</text>
  147. <text class="se-fs-28 se-c-black se-fw5">年龄:{{obj.employResume.age}}</text>
  148. <text class="se-fs-28 se-c-black se-fw5">简介:{{obj.employResume.brief}}</text>
  149. <text class="se-fs-28 se-c-black se-fw5">地区:{{obj.employResume.address}}</text <text
  150. class="se-fs-24 se-c-text-third se-ml-40">师傅电话:{{obj.employResume.phone}}</text>
  151. <view class="se-bgc-orange se-c-white se-fs-20 se-display-ib se-px-10 se-py-5 se-br-10 se-ml-10"
  152. @click="copyText(obj.employResume.phone)">
  153. 复制
  154. </view>
  155. </view>
  156. <view class="se-mt-10">
  157. <text class="se-fs-24 se-c-33">简历地址:{{obj.workAddress}}</text>
  158. <view class="se-bgc-orange se-c-white se-fs-20 se-display-ib se-px-10 se-py-5 se-br-10 se-ml-10"
  159. @click="copyText(obj.workAddress)">
  160. 复制
  161. </view>
  162. </view>
  163. </view>
  164. <u-line dashed></u-line>
  165. <view class="se-mt-20 se-pt-20 se-pb-30">
  166. <view class="se-fw-6 se-fs-32 se-c-black">
  167. 师傅简历
  168. </view>
  169. <view class="se-flex se-pt-30 se-flex-h-sb">
  170. <view class="se-fs-24 se-display-ib">简介</view>
  171. <view class="se-fs-24 se-display-ib">{{obj.employResume.brief}}</view>
  172. </view>
  173. <view class="se-flex se-pt-30 se-flex-h-sb">
  174. <view class="se-fs-24 se-display-ib">出行方式</view>
  175. <view class="se-fs-24 se-display-ib">{{obj.employSeek.selectGo}}</view>
  176. </view>
  177. <view class="se-flex se-pt-30 se-flex-h-sb">
  178. <view class="se-fs-24 se-display-ib">支付方式</view>
  179. <view class="se-fs-24 se-display-ib" v-if="obj.employSeek.payType==0">提前支付</view>
  180. <view class="se-fs-24 se-display-ib" v-if="obj.employSeek.payType==1">试用后支付</view>
  181. </view>
  182. <!-- <view class="se-flex se-pt-30 se-flex-h-sb">
  183. <view class="se-fs-24 se-display-ib">工作时间</view>
  184. <view class="se-fs-24 se-display-ib">{{obj.workTime}}</view>
  185. </view> -->
  186. </view>
  187. <u-line dashed></u-line>
  188. <view class="se-mt-20 se-pt-20 se-pb-30">
  189. <view class="se-fw-6 se-fs-32 se-c-black">
  190. 师傅技能
  191. </view>
  192. <view class="se-fs-24 se-pt-20 se-pb-20 se-lh-40">
  193. <u-parse :content="obj.employSeek.workDetail"></u-parse>
  194. </view>
  195. </view>
  196. <view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c">
  197. <view @click="onService()"
  198. class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
  199. <text>联系师傅</text>
  200. </view>
  201. </view>
  202. </view>
  203. </view>
  204. </template>
  205. <script>
  206. import {
  207. orderDetail,
  208. deleteOrder,
  209. confirmOrder,
  210. confirmOrderTry,
  211. confirmOrderTryCompany,
  212. confirmOrderTryCompanyOk,
  213. } from "@/common/api.js"
  214. export default {
  215. data() {
  216. return {
  217. stepsIndex: 1,
  218. stepsList: [{
  219. title: "接单",
  220. date: "10:21"
  221. },
  222. {
  223. title: "进行",
  224. date: "10:22"
  225. },
  226. {
  227. title: "试工完成",
  228. date: "10:23"
  229. },
  230. {
  231. title: "企业确认",
  232. date: "10:24"
  233. },
  234. {
  235. title: "企业支付",
  236. date: "10:25"
  237. },
  238. {
  239. title: "企业完成",
  240. date: "10:26"
  241. }
  242. ],
  243. detail: `<p>
  244. 1全日制大专以上学历艺术设计类相关专业;<br/>
  245. 2两年以上平面品牌视觉设计等相关工作经验能独立完成项目的设计工作 3C数码/个护健 类产品服务经验优先有乙方工作经验佳;<br/>
  246. 3具备一定的设计提案能力能完整的呈现设计思路与创意能清晰的表达设计逻辑与思考;<br/>
  247. 4热爱设计平面基本功扎实拥有优良的审美与创意想法对版式色彩把控能力强;对工作富有责任心具备团队沟通与协作能力;<br/>
  248. 5精通 PSAICDR 等平面设计软件能独立完成日常平面设计工作内容熟练使用 PPT/Keynote能完成提案内容的材料美化工作<br/>
  249. </p>`,
  250. obj: {},
  251. type : '',
  252. }
  253. },
  254. onLoad(options) {
  255. this.orderId = options.orderId
  256. this.type = options.type || ''
  257. this.onOrderDetail()
  258. },
  259. methods: {
  260. onOrderDetail() {
  261. let that = this
  262. let params = {
  263. orderId: that.orderId
  264. }
  265. orderDetail(params).then(response => {
  266. that.obj = response.result
  267. that.stepsIndex = response.result.status;
  268. }).catch(error => {
  269. })
  270. },
  271. copyText(event) {
  272. uni.setClipboardData({
  273. data: event,
  274. success: () => {
  275. uni.showToast({
  276. title: "复制成功",
  277. icon: "none",
  278. });
  279. },
  280. fail: (err) => {
  281. console.error("复制失败", err);
  282. },
  283. })
  284. },
  285. onCancel() {
  286. deleteOrder(this.orderId).then(res => {
  287. if (res.code == 200) {
  288. uni.navigateBack(-1)
  289. }
  290. })
  291. },
  292. onService() {
  293. console.info(`联系客服`)
  294. uni.makePhoneCall({
  295. phoneNumber: this.obj.jobPhone,
  296. success: () => {
  297. console.log("拨打成功");
  298. },
  299. fail: (err) => {
  300. console.error("拨打失败", err);
  301. },
  302. })
  303. },
  304. // 订单信息-求职者确认订单
  305. confirmOrder() {
  306. confirmOrder(this.orderId)
  307. .then(res => {
  308. if(res.code == 200){
  309. uni.showToast({
  310. title: '确认成功',
  311. icon: 'none'
  312. })
  313. this.onOrderDetail()
  314. }
  315. })
  316. },
  317. // 订单信息-确认试工完成
  318. confirmOrderTry(){
  319. confirmOrderTry(this.orderId)
  320. .then(res => {
  321. if(res.code == 200){
  322. uni.showToast({
  323. title: '确认成功',
  324. icon: 'none'
  325. })
  326. this.onOrderDetail()
  327. }
  328. })
  329. },
  330. // 确认企业已结款
  331. confirmOrderTryCompanyOk(){
  332. confirmOrderTryCompanyOk({
  333. orderId : this.orderId
  334. })
  335. .then(res => {
  336. this.onOrderDetail()
  337. })
  338. },
  339. onPay() {
  340. uni.navigateTo({
  341. url: "/pages_subpack/pay/index?orderId=" + this.orderId
  342. })
  343. },
  344. /**
  345. * 企业方法
  346. */
  347. // 订单信息-企业确认试工完成
  348. confirmOrderTryCompany(){
  349. confirmOrderTryCompany(this.orderId)
  350. .then(res => {
  351. if(res.code == 200){
  352. uni.showToast({
  353. title: '确认成功',
  354. icon: 'none'
  355. })
  356. this.onOrderDetail()
  357. }
  358. })
  359. },
  360. // 订单信息-企业确认订单
  361. confirmOrder() {
  362. confirmOrder(this.orderId)
  363. .then(res => {
  364. if(res.code == 200){
  365. uni.showToast({
  366. title: '确认成功',
  367. icon: 'none'
  368. })
  369. this.onOrderDetail()
  370. }
  371. })
  372. },
  373. }
  374. }
  375. </script>
  376. <style lang="scss" scoped>
  377. </style>