personal.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. <template>
  2. <view class="content">
  3. <view class="top-box">
  4. 个人报名
  5. </view>
  6. <view class="box">
  7. <view class="box-1">
  8. <view class="box-left">
  9. 姓名
  10. <text class="imp"></text>
  11. </view>
  12. <input type="text" value="" class="list-input" v-model="name" placeholder="请输入您的姓名" placeholder-class="placeholder" />
  13. </view>
  14. <view class="box-1">
  15. <view class="box-left">出生年月:</view>
  16. <picker mode="date" :value="birth" fields="month" :start="startDate" :end="endDate" @change="bindDateChange" class="box-right">
  17. <view class="placeholder" v-if="birth === ''">请输入您的生日</view>
  18. <view v-else>{{ birth }}</view>
  19. </picker>
  20. </view>
  21. <view class="box-1">
  22. <view class="box-left">性别:</view>
  23. <picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
  24. <view class="placeholder" v-if="sex === ''">请输入您的性别</view>
  25. <text>{{ sex }}</text>
  26. </picker>
  27. </view>
  28. <view class="box-1">
  29. <view class="box-left">文化程度:</view>
  30. <picker @change="bindPickerEdu" :value="education" :range="chooseEdu" class="box-right">
  31. <view class="placeholder" v-if="education === ''">请输入您的文化程度</view>
  32. <text>{{ education }}</text>
  33. </picker>
  34. </view>
  35. <view class="box-1">
  36. <view class="box-left">民族:</view>
  37. <input type="text" value="" class="list-input" v-model="mz" placeholder="请输入您的民族" placeholder-class="placeholder" />
  38. </view>
  39. <view class="box-1">
  40. <view class="box-left">地址:</view>
  41. <input type="text" value="" class="list-input" v-model="address" placeholder="请输入您的地址" placeholder-class="placeholder" />
  42. </view>
  43. <view class="box-1">
  44. <view class="box-left">身份证号码:</view>
  45. <input type="text" value="" class="list-input" v-model="card" placeholder="请输入您的身份证号码" placeholder-class="placeholder" />
  46. </view>
  47. <view class="box-1">
  48. <view class="box-left">联系方式:</view>
  49. <input type="text" value="" class="list-input" v-model="phone" placeholder="请输入您的联系方式" placeholder-class="placeholder" />
  50. </view>
  51. <view class="box-1">
  52. <view class="box-left">工作单位:</view>
  53. <input type="text" value="" class="list-input" v-model="work" placeholder="请输入您的工作单位" placeholder-class="placeholder" />
  54. </view>
  55. <view class="box-1">
  56. <view class="box-left">职位:</view>
  57. <input type="text" value="" class="list-input" v-model="specialty" placeholder="请输入您的职位" placeholder-class="placeholder" />
  58. </view>
  59. <view class="upload-box">
  60. <view class="upload-left">证件:</view>
  61. <view class="upload-right">
  62. <image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg"></image>
  63. <image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
  68. </view>
  69. </template>
  70. <script>
  71. import { joinSec } from '@/api/index.js';
  72. import { upload } from '@/api/ask.js';
  73. export default {
  74. data() {
  75. const currentDate = this.getDate({
  76. format: true
  77. });
  78. return {
  79. loding: false, //是否提交中
  80. array: ['男', '女'],
  81. chooseEdu: ['博士后', '博士', '硕士', '本科', '专科', '其他'],
  82. chooseVol: ['是', '否'],
  83. chooseExp: ['是', '否'],
  84. index: 0,
  85. mz: '',
  86. cardimg: '', //证件照
  87. card: '',
  88. checklist: [],
  89. name: '',
  90. sex: '',
  91. birth: '',
  92. phone: '',
  93. address: '',
  94. work: '',
  95. specialty: '',
  96. education: ''
  97. };
  98. },
  99. computed: {
  100. startDate() {
  101. return this.getDate('start');
  102. },
  103. endDate() {
  104. return this.getDate('end');
  105. }
  106. },
  107. methods: {
  108. async join() {
  109. let obj = this;
  110. if (obj.name == '') {
  111. obj.$api.msg('请输入您的姓名');
  112. return;
  113. }
  114. if (obj.birth == '') {
  115. obj.$api.msg('请选择出生年月');
  116. return;
  117. }
  118. if (obj.sex == '') {
  119. obj.$api.msg('请输入您的性别');
  120. return;
  121. }
  122. if (obj.education == '') {
  123. obj.$api.msg('请选择您的文化程度');
  124. return;
  125. }
  126. if (obj.mz == '') {
  127. obj.$api.msg('请填写您所属的民族');
  128. return;
  129. }
  130. if (obj.specialty == '') {
  131. obj.$api.msg('请填写您的职位');
  132. return;
  133. }
  134. if (obj.address == '') {
  135. obj.$api.msg('请填写您的地址');
  136. return;
  137. }
  138. let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
  139. if (!reg1.test(obj.card)) {
  140. obj.$api.msg('请填写正确的身份证信息');
  141. return;
  142. }
  143. const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
  144. if (!reg.test(obj.phone)) {
  145. obj.$api.msg('请填写正确的手机号码');
  146. return;
  147. }
  148. // /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
  149. if (obj.work == '') {
  150. obj.$api.msg('请填写您的工作单位');
  151. return;
  152. }
  153. if (obj.cardimg == '') {
  154. obj.$api.msg('请上传您的证件');
  155. return;
  156. }
  157. if (obj.specialty == '') {
  158. obj.$api.msg('请填写您的职位');
  159. return;
  160. }
  161. // if (obj.education == '') {
  162. // obj.$api.msg('请填写您的教育程度');
  163. // return;
  164. // }
  165. // if (obj.is_vol == '') {
  166. // obj.$api.msg('请填写您的是否受过志愿服务');
  167. // return;
  168. // }
  169. // if (obj.is_experience == '') {
  170. // obj.$api.msg('请填写您的有无服务经验');
  171. // return;
  172. // }
  173. obj.loding = true;
  174. joinSec({
  175. name: obj.name,
  176. sex: obj.sex,
  177. education: obj.education,
  178. birth: obj.birth,
  179. mz: obj.mz,
  180. phone: obj.phone,
  181. address: obj.address,
  182. work: obj.work,
  183. specialty: obj.specialty,
  184. img: obj.cardimg,
  185. card: obj.card
  186. })
  187. .then(e => {
  188. obj.name = '';
  189. obj.sex = '';
  190. obj.education = '';
  191. obj.birth = '';
  192. (obj.mz = ''), (obj.phone = '');
  193. obj.address = '';
  194. obj.work = '';
  195. obj.specialty = '';
  196. (obj.cardimg = ''), (obj.card = '');
  197. uni.navigateTo({
  198. url: '../joinSuc/joinNow'
  199. });
  200. })
  201. .catch(function(e) {
  202. console.log('出错了');
  203. console.log(e);
  204. });
  205. },
  206. imgsub() {
  207. console.log('imgsub');
  208. upload({
  209. filename: ''
  210. }).then(data => {
  211. this.cardimg = data[0].url;
  212. });
  213. },
  214. // 选择性别
  215. bindPickerSex: function(e) {
  216. console.log(this.array[e.target.value]);
  217. this.sex = this.array[e.target.value];
  218. this.index = e.target.value + 1;
  219. },
  220. // 选择教育程度
  221. bindPickerEdu: function(e) {
  222. this.education = this.chooseEdu[e.target.value];
  223. this.index = e.target.value + 1;
  224. },
  225. // 选择日期
  226. bindDateChange: function(e) {
  227. this.birth = e.target.value;
  228. },
  229. // 是否参加志愿活动
  230. bindPickerVol: function(e) {
  231. this.is_vol = this.chooseVol[e.target.value];
  232. this.index = e.target.value + 1;
  233. },
  234. // 有无服务经验
  235. bindPickerExp: function(e) {
  236. this.is_experience = this.chooseExp[e.target.value];
  237. this.index = e.target.value + 1;
  238. },
  239. getDate(type) {
  240. const date = new Date();
  241. let year = date.getFullYear();
  242. let month = date.getMonth() + 1;
  243. let day = date.getDate();
  244. if (type === 'start') {
  245. year = year - 60;
  246. } else if (type === 'end') {
  247. year = year + 2;
  248. }
  249. month = month > 9 ? month : '0' + month;
  250. day = day > 9 ? day : '0' + day;
  251. return `${year}-${month}-${day}`;
  252. },
  253. // 选择可提供时间
  254. // this.quantum = item.detail.value.join(',');
  255. checktime1(e) {
  256. // var items = this.timeList,
  257. // let quantum = [];
  258. this.quantum = e.detail.value.join(',');
  259. console.log(this.quantum);
  260. },
  261. checktime2(e) {
  262. // var items = this.timeList,
  263. let values = e.detail.value;
  264. // let quantum = [];
  265. console.log(values);
  266. },
  267. checktime3(e) {
  268. // var items = this.timeList,
  269. let values = e.detail.value;
  270. // let quantum = [];
  271. console.log(values);
  272. },
  273. //选择有兴趣参与的工作
  274. checkjob(item) {
  275. this.taste = item.detail.value.join(',');
  276. },
  277. // 选择专长checkspeciality
  278. checkspeciality(item) {
  279. this.speciali = item.detail.value.join(',');
  280. }
  281. }
  282. };
  283. </script>
  284. <style lang="scss">
  285. page {
  286. background-color: #fdcbc2;
  287. }
  288. .content {
  289. padding-top: 44rpx;
  290. background-color: #fdcbc2;
  291. .buttom {
  292. margin: 60rpx auto 0;
  293. width: 750rpx;
  294. height: 100rpx;
  295. background: #FA7E67;
  296. font-size: 34rpx;
  297. font-family: PingFang SC;
  298. font-weight: 500;
  299. color: #FFFFFF;
  300. line-height: 100rpx;
  301. text-align: center;
  302. &.action {
  303. background: #999999;
  304. }
  305. }
  306. .box {
  307. // margin-top: 44rpx;
  308. width: 690rpx;
  309. margin: 20rpx auto 0;
  310. background-color: #ffffff;
  311. border-radius: 20rpx;
  312. // padding: 28rpx 20rpx 32rpx 20rpx;
  313. position: relative;
  314. .red-box {
  315. width: 405rpx;
  316. line-height: 66rpx;
  317. text-align: center;
  318. background: linear-gradient(0deg, #c90f1b, #f14d33);
  319. // background-color: #c62316;
  320. border-radius: 10rpx;
  321. font-size: 30rpx;
  322. font-weight: 500;
  323. color: #ffffff;
  324. // position: relative;
  325. position: absolute;
  326. top: -36rpx;
  327. left: 50%;
  328. transform: translateX(-50%);
  329. z-index: 1;
  330. }
  331. .box-check {
  332. font-size: 28rpx;
  333. font-weight: 500;
  334. color: #666666;
  335. line-height: 100rpx;
  336. }
  337. .imp {
  338. color: red;
  339. margin-left: 5rpx;
  340. }
  341. .box-1 {
  342. height: 98rpx;
  343. padding: 0 20rpx;
  344. display: flex;
  345. justify-content: space-between;
  346. border-bottom: 1px solid #f0f0f0;
  347. line-height: 98rpx;
  348. align-items: center;
  349. font-size: 28rpx;
  350. font-family: PingFang SC;
  351. font-weight: 500;
  352. color: #333333;
  353. // .box-left {
  354. // width: 120rpx;
  355. // }
  356. // .list-input {
  357. // width: 440rpx;
  358. // }
  359. // .box-right {
  360. // width: 440rpx
  361. // }
  362. .list-input {
  363. width: 440rpx;
  364. // height: 26rpx;
  365. font-size: 28rpx;
  366. font-family: PingFang SC;
  367. font-weight: 500;
  368. color: #000;
  369. }
  370. .placeholder {
  371. color: #999999;
  372. }
  373. .box-right {
  374. width: 440rpx;
  375. }
  376. }
  377. }
  378. }
  379. .upload-box {
  380. // height: 247rpx;
  381. background: #ffffff;
  382. border-radius: 27rpx;
  383. display: flex;
  384. flex-direction: column;
  385. padding: 30rpx 40rpx 30rpx 0;
  386. margin: 15rpx auto 30rpx;
  387. width: 690rpx;
  388. background: #ffffff;
  389. border-radius: 10rpx;
  390. .upload-left {
  391. padding-left: 20rpx;
  392. font-weight: 400;
  393. color: #000;
  394. }
  395. .upload-right {
  396. flex: 1;
  397. display: flex;
  398. align-items: center;
  399. justify-content: center;
  400. .upload-img {
  401. width: 160rpx;
  402. height: 160rpx;
  403. margin-top: 24rpx;
  404. }
  405. }
  406. }
  407. .top-box {
  408. height: 58rpx;
  409. font-size: 38rpx;
  410. line-height: 58rpx;
  411. font-family: PingFang SC;
  412. font-weight: bold;
  413. color: #FA7E67;
  414. text-align: center;
  415. position: relative;
  416. &::before {
  417. content: '';
  418. width: 215rpx;
  419. height: 17rpx;
  420. background: #fff;
  421. opacity: 0.26;
  422. position: absolute;
  423. left: 0;
  424. right: 0;
  425. bottom: 0;
  426. margin: 0 auto;
  427. }
  428. }
  429. </style>