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

333 lines
9.1 KiB

7 months ago
  1. <template>
  2. <view>
  3. <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
  4. <view class="se-p-20">
  5. <view class="se-px-20 se-bgc-white se-br-10 se-fs-20">
  6. <u-form-item labelWidth="0">
  7. <view class="se-flex se-flex-ai-c">
  8. <view class="line-orange"></view>
  9. <view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
  10. 标题
  11. </view>
  12. </view>
  13. </u-form-item>
  14. <u-form-item labelWidth="0" prop="title">
  15. <u--input v-model="form.title" placeholder="请在此输入标题"></u--input>
  16. </u-form-item>
  17. <u-form-item label="工作地点" prop="area" @click="handleAreaChange">
  18. <u--input @click="handleAreaChange" readonly v-model="form.area" placeholder="请选择工作地点"
  19. border="none"></u--input>
  20. <u-icon @click="handleAreaChange" slot="right" name="arrow-right"></u-icon>
  21. </u-form-item>
  22. <u-form-item label="详细地址" prop="address">
  23. <u--textarea v-model="form.address" count
  24. placeholder="请输入详细地址"></u--textarea>
  25. <!-- <u--input v-model="form.address" placeholder="请输入详细地址"></u--input> -->
  26. </u-form-item>
  27. <u-form-item label="所属行业" prop="industry" @click="handleindustryChange">
  28. <u--input @click="handleindustryChange" readonly v-model="form.industry" placeholder="请选择行业"
  29. border="none"></u--input>
  30. <u-icon @click="handleindustryChange" slot="right" name="arrow-right"></u-icon>
  31. </u-form-item>
  32. <u-form-item label="所属工种" prop="type" @click="handleTypeChange">
  33. <u--input @click="handleTypeChange" v-model="form.type" readonly placeholder="请选择工种"
  34. border="none"></u--input>
  35. <u-icon @click="handleTypeChange" slot="right" name="arrow-right"></u-icon>
  36. </u-form-item>
  37. <u-form-item label="试用日薪" prop="salary">
  38. <view class="se-flex se-flex-h-c">
  39. <u--input v-model="form.salaryMin" class="se-w-200" placeholder="最小值"></u--input>
  40. <text class="se-mx-10">~</text>
  41. <u--input v-model="form.salaryMax" class="se-w-200" placeholder="最大值"></u--input>
  42. </view>
  43. </u-form-item>
  44. <u-form-item label="结算方式" prop="settlement">
  45. <u-radio-group v-model="form.settlement" placement="row">
  46. <u-radio activeColor="#FF7A31" name="1" label="提前支付"></u-radio>
  47. <u-radio activeColor="#FF7A31" class="se-ml-20" name="2" label="试用以后支付"></u-radio>
  48. </u-radio-group>
  49. </u-form-item>
  50. <u-form-item label="时间" prop="date">
  51. <view class="se-flex se-flex-h-c">
  52. <u--input v-model="form.dateMin" class="se-w-200" placeholder="0:00"></u--input>
  53. <text class="se-mx-10">~</text>
  54. <u--input v-model="form.dateMax" class="se-w-200" placeholder="0:00"></u--input>
  55. </view>
  56. </u-form-item>
  57. <u-form-item label="联系电话" prop="mobile">
  58. <u--input v-model="form.mobile" placeholder="请输入联系方式"></u--input>
  59. </u-form-item>
  60. <u-form-item label="工作内容" prop="introduce">
  61. <u--textarea v-model="form.introduce" count
  62. placeholder="请选择工作内容"></u--textarea>
  63. </u-form-item>
  64. </view>
  65. </view>
  66. <view class="se-p-20">
  67. <view class="se-px-20 se-pb-20 se-bgc-white se-br-10 se-fs-20">
  68. <u-form-item prop="file" labelWidth="2">
  69. <view class="se-flex se-flex-v-sa">
  70. <view class="se-py-20 se-w-p-100 se-flex">
  71. <view class="line-orange"></view>
  72. <view class="se-ml-10">
  73. 图片上传
  74. </view>
  75. </view>
  76. <view class="se-py-20 se-w-p-100">
  77. <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
  78. multiple :maxCount="10"></u-upload>
  79. </view>
  80. </view>
  81. </u-form-item>
  82. </view>
  83. </view>
  84. <view class="se-px-20 se-pt-20">
  85. <view class="se-px-20 se-pb-80 se-fs-20 se-flex">
  86. <view @click="submit"
  87. class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-28 se-c-white se-bgc-orange">
  88. <text>发布订单</text>
  89. </view>
  90. </view>
  91. </view>
  92. </u--form>
  93. <!-- 性别 -->
  94. <u-action-sheet :show="showIndustry" :actions="industryList" title="请选择行业" @close="showIndustry = false" @select="industrySelect">
  95. </u-action-sheet>
  96. <!-- 种类 -->
  97. <u-action-sheet :show="showType" :actions="typeList" title="请选择种类" @close="showType = false"
  98. @select="typeSelect">
  99. </u-action-sheet>
  100. <!-- 地址 -->
  101. <citySelect v-model="showPicker" @city-change="handleCityChange"></citySelect>
  102. </view>
  103. </template>
  104. <script>
  105. import citySelect from '@/components/cityselect/index.vue'
  106. export default {
  107. components:{
  108. citySelect
  109. },
  110. data() {
  111. return {
  112. showPicker: false,
  113. showIndustry: false,
  114. industryList: [
  115. {
  116. name: '打铁',
  117. },
  118. {
  119. name: '打牌',
  120. }
  121. ],
  122. showType: false,
  123. typeList: [{
  124. name: '铁匠',
  125. },
  126. {
  127. name: '水泥搬运',
  128. }
  129. ],
  130. fileList: [],
  131. form: {
  132. title:"",
  133. area:'',
  134. address:'',
  135. industry:"",
  136. settlement:1,
  137. date:"",
  138. dateMin:"",
  139. dateMax:"",
  140. mobile: '',
  141. type: '',
  142. salary:'',
  143. salaryMin: '',
  144. salaryMax: '',
  145. introduce: '',
  146. file: ''
  147. },
  148. rules: {
  149. title:[
  150. {
  151. type: 'string',
  152. required: true,
  153. message: '请在此输入标题',
  154. trigger: ['blur', 'change']
  155. }
  156. ],
  157. area:[
  158. {
  159. type: 'string',
  160. required: true,
  161. message: '请选择地址',
  162. trigger: ['blur', 'change']
  163. }
  164. ],
  165. address:[
  166. {
  167. type: 'string',
  168. required: true,
  169. message: '请填写详细地址',
  170. trigger: ['blur', 'change']
  171. }
  172. ],
  173. industry:[
  174. {
  175. type: 'string',
  176. required: true,
  177. message: '请选择行业',
  178. trigger: ['blur', 'change']
  179. }
  180. ],
  181. settlement:[
  182. {
  183. type: 'string',
  184. required: true,
  185. message: '请选择结算方式',
  186. trigger: ['blur', 'change']
  187. }
  188. ],
  189. mobile: [
  190. {
  191. required: true,
  192. message: '请输入手机号',
  193. trigger: ['change','blur'],
  194. },
  195. {
  196. validator: (rule, value, callback) => {
  197. return uni.$u.test.mobile(value);
  198. },
  199. message: '手机号码不正确',
  200. trigger: ['change','blur'],
  201. },
  202. ],
  203. date: [{
  204. type: 'string',
  205. max: 1,
  206. required: true,
  207. message: '请填写时间',
  208. trigger: ['blur', 'change']
  209. }],
  210. salary: [{
  211. type: 'string',
  212. required: true,
  213. message: '请输入试用日薪',
  214. trigger: ['blur', 'change']
  215. }],
  216. introduce: [{
  217. type: 'string',
  218. required: true,
  219. message: '请输入工作内容',
  220. trigger: ['blur', 'change']
  221. }],
  222. file: [{
  223. type: 'string',
  224. required: true,
  225. message: '请选择身份证',
  226. trigger: ['blur', 'change']
  227. }]
  228. },
  229. }
  230. },
  231. watch: {
  232. 'form.salaryMin': {
  233. handler(newVal, oldVal) {
  234. if (!uni.$u.test.isEmpty(newVal) && !uni.$u.test.isEmpty(this.form.salaryMax)) {
  235. this.form.salary = '有'
  236. } else {
  237. this.form.salary = ''
  238. }
  239. },
  240. immediate: true
  241. },
  242. 'form.salaryMax': {
  243. handler(newVal, oldVal) {
  244. if (!uni.$u.test.isEmpty(newVal) && !uni.$u.test.isEmpty(this.form.salaryMin)) {
  245. this.form.salary = '有'
  246. } else {
  247. this.form.salary = ''
  248. }
  249. },
  250. immediate: true
  251. },
  252. 'form.dateMin': {
  253. handler(newVal, oldVal) {
  254. if (!uni.$u.test.isEmpty(newVal) && !uni.$u.test.isEmpty(this.form.dateMax)) {
  255. this.form.date = '有'
  256. } else {
  257. this.form.date = ''
  258. }
  259. },
  260. immediate: true
  261. },
  262. 'form.dateMax': {
  263. handler(newVal, oldVal) {
  264. if (!uni.$u.test.isEmpty(newVal) && !uni.$u.test.isEmpty(this.form.dateMin)) {
  265. this.form.date = '有'
  266. } else {
  267. this.form.date = ''
  268. }
  269. },
  270. immediate: true
  271. },
  272. fileList(newValue, oldValue) {
  273. if (newValue.length > 0) {
  274. this.form.file = '有'
  275. } else {
  276. this.form.file = ''
  277. }
  278. }
  279. },
  280. methods: {
  281. handleAreaChange(){
  282. this.showPicker = true
  283. },
  284. handleCityChange(e) {
  285. console.info(e)
  286. this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label;
  287. },
  288. handleindustryChange() {
  289. this.showIndustry = true
  290. },
  291. industrySelect(e) {
  292. this.form.industry = e.name
  293. this.$refs.uForm.validateField('industry')
  294. },
  295. handleTypeChange() {
  296. this.showType = true
  297. },
  298. typeSelect(e) {
  299. this.form.type = e.name
  300. this.$refs.uForm.validateField('type')
  301. },
  302. submit() {
  303. console.info(this.form)
  304. this.$refs.uForm.validate().then(res => {
  305. uni.$u.toast('校验通过')
  306. }).catch(errors => {
  307. // uni.$u.toast('校验失败')
  308. })
  309. },
  310. deletePic(event) {
  311. this.fileList.splice(e.index, 1)
  312. },
  313. async afterRead(e) {
  314. let self = this
  315. e.file.forEach(file => {
  316. self.$Oss.ossUpload(file.url).then(url => {
  317. self.fileList.push({
  318. url
  319. })
  320. })
  321. })
  322. }
  323. },
  324. onReady() {
  325. this.$refs.uForm.setRules(this.rules)
  326. },
  327. }
  328. </script>
  329. <style>
  330. </style>