index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. <template>
  2. <view class="">
  3. <!-- <view class="text-center text-white bg-red">18岁以上方可认证使用</view> -->
  4. <view class="margin padding-lr bg-white" style="border-radius: 16rpx;">
  5. <view class="flex justify-between align-center" style="border-bottom: 2rpx solid #e6e6e6;color: #1a1a1a;">
  6. <view class="padding-tb text-lg text-bold ">申请信息</view>
  7. <view class="text-df" style="color: #666666;">注:18岁以上方可认证使用</view>
  8. </view>
  9. <view class="flex align-center padding-tb">
  10. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">你的生日</view>
  11. <view class="flex align-center">
  12. <!-- <view class="margin-right-xs text-gray">2020年4月2日</view> -->
  13. <input @click="isShow" v-model="birthday" class="margin-right-xs" disabled placeholder="请填写你的生日"
  14. style="text-align: right;" type="text">
  15. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  16. </view>
  17. </view>
  18. <view class="flex align-center padding-tb">
  19. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">你的性别</view>
  20. <view class="flex align-center">
  21. <u-radio-group v-model="sex">
  22. <u-radio v-for="(item,index) in gender" :key='index' :name="item.name">{{item.name}}</u-radio>
  23. </u-radio-group>
  24. </view>
  25. </view>
  26. <view class="flex align-center padding-tb">
  27. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">你的身高(CM)</view>
  28. <view class="flex align-center">
  29. <!-- <view class="margin-right-xs text-gray">170cm</view> -->
  30. <input class="margin-right-xs" v-model="height" placeholder="请填写你的身高" style="text-align: right;"
  31. type="text">
  32. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  33. </view>
  34. </view>
  35. <view class="flex align-center padding-tb">
  36. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">你的体重(KG)</view>
  37. <view class="flex align-center">
  38. <!-- <view class="margin-right-xs text-gray">50kg</view> -->
  39. <input class="margin-right-xs" v-model="weight" placeholder="请填写你的体重" style="text-align: right;"
  40. type="text">
  41. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  42. </view>
  43. </view>
  44. <view class="flex align-center padding-tb">
  45. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">你的职业</view>
  46. <view class="flex align-center">
  47. <!-- <view class="margin-right-xs text-gray">设计</view> -->
  48. <input class="margin-right-xs" v-model="occupation" placeholder="请填写你的职业" style="text-align: right;"
  49. type="text">
  50. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  51. </view>
  52. </view>
  53. </view>
  54. <view class="margin padding bg-white" style="border-radius: 16rpx;">
  55. <view class="flex align-center padding-tb">
  56. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">真实姓名</view>
  57. <view class="flex align-center">
  58. <!-- <view class="margin-right-xs text-gray">设计</view> -->
  59. <input class="margin-right-xs" v-model="realName" placeholder="请填写你的真实姓名" style="text-align: right;"
  60. type="text">
  61. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  62. </view>
  63. </view>
  64. <view class="flex align-center padding-tb">
  65. <view class="flex-sub text-df text-bold" style="color: #1a1a1a;">身份证号 <text class="text-red"> *</text>
  66. </view>
  67. <view class="flex align-center">
  68. <!-- <view class="margin-right-xs text-gray">设计</view> -->
  69. <input class="margin-right-xs" v-model="identityCardNum" placeholder="请填写你的身份证号"
  70. style="text-align: right;" type="text">
  71. <!-- <image src="../../static/images/orderReceiving/right.png" style="width: 16rpx;height: 26rpx;"></image> -->
  72. </view>
  73. </view>
  74. <view class="text-lg text-bold text-black margin-bottom-sm">上传身份证正面</view>
  75. <view class="margin-top"
  76. style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
  77. <view style="text-align: center;margin: 80rpx auto 0;" @click="addIDCard(1)" v-if="!identityCardFront">
  78. <image src="../../static/images/index/add.png" mode="widthFix" style="width: 73rpx;"></image>
  79. <view class="text-sm text-gray margin-top-sm">添加身份证正面</view>
  80. </view>
  81. <image @click="addIDCard(1)" v-else :src="identityCardFront" style="width: 100%;height: 320rpx;">
  82. </image>
  83. </view>
  84. <view class="text-lg text-bold text-black margin-tb-sm">上传身份证反面</view>
  85. <view class="margin-top"
  86. style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
  87. <view style="text-align: center;margin: 80rpx auto 0;" @click="addIDCard(2)" v-if="!identityCardRear">
  88. <image src="../../static/images/index/add.png" mode="widthFix" style="width: 73rpx;"></image>
  89. <view class="text-sm text-gray margin-top-sm">添加身份证反面</view>
  90. </view>
  91. <image @click="addIDCard(2)" v-else :src="identityCardRear" style="width: 100%;height: 320rpx;"></image>
  92. </view>
  93. </view>
  94. <view class="margin padding bg-white" style="border-radius: 16rpx;">
  95. <view class="text-lg text-bold text-black margin-bottom-sm">个人简介</view>
  96. <textarea class="radius" v-model="individualResume"
  97. style=" width: 100%; height: 150rpx;background: #f5f5f5;padding: 15rpx;"
  98. placeholder="请输入个人简介"></textarea>
  99. <view class="text-lg text-bold text-black margin-tb-sm">图片上传</view>
  100. <view class="flex flex-wrap">
  101. <view class="flex " v-if="infantImgs.length"
  102. style="width: 200rpx;height: 200rpx;margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
  103. v-for="(image,index) in infantImgs" :key="index">
  104. <image :src="image" class="radius" style="width: 100%;height: 100%;" @click="previewImg(index)">
  105. </image>
  106. <view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
  107. @click="infantImgremove(index)">
  108. <u-icon name="close-circle-fill" color="red" size="50rpx"></u-icon>
  109. </view>
  110. </view>
  111. <view v-if="infantImgs.length<9" style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
  112. class="flex justify-center align-center radius" @click="addImages()">
  113. <view>
  114. <view class="text-center">
  115. <image src="../../static/images/index/add.png" style="width: 65rpx;height: 55rpx;">
  116. </image>
  117. </view>
  118. <view class="text-center">添加图片</view>
  119. </view>
  120. </view>
  121. </view>
  122. <view class="text-lg text-bold text-black margin-tb-sm">视频上传</view>
  123. <view>
  124. <view v-if="!video" style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
  125. class="flex justify-center align-center radius" @click="addVideo()">
  126. <view>
  127. <view class="text-center">
  128. <image src="../../static/images/index/add.png" style="width: 65rpx;height: 55rpx;">
  129. </image>
  130. </view>
  131. <view class="text-center">添加视频</view>
  132. </view>
  133. </view>
  134. <view class="flex " v-if="video" style="width: 100%;position: relative;">
  135. <video :src="video" controls></video>
  136. <view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;" @click="removeVidoe()">
  137. <u-icon name="close-circle-fill" color="red" size="50rpx"></u-icon>
  138. </view>
  139. </view>
  140. </view>
  141. <!-- </view> -->
  142. </view>
  143. <view class="margin">
  144. <view class="text-center text-lg radius text-bold"
  145. style="width: 100%;height: 78rpx;line-height: 78rpx;background: #7E59FF;color: #FFF;"
  146. @click="fabuBtn()">
  147. {{btnName}}
  148. </view>
  149. </view>
  150. <u-picker @confirm="timeAction" v-model="show" :params="params" mode="time"></u-picker>
  151. </view>
  152. </template>
  153. <script>
  154. export default {
  155. data() {
  156. return {
  157. action: 'https://newxxpw.xianmxkj.com/sqx_fast/alioss/upload',
  158. fileList: [],
  159. show: false,
  160. params: {
  161. year: true,
  162. month: true,
  163. day: true,
  164. },
  165. birthday: '', //生日
  166. height: '', //身高
  167. weight: '', //体重
  168. occupation: '', //职业
  169. individualResume: '', //简介
  170. pictureList: [],
  171. realName: '', //姓名
  172. identityCardNum: '', //身份证号
  173. identityCardFront: '', //身份证正面
  174. identityCardRear: '', //身份证反面
  175. gender: [{
  176. name: '男',
  177. checked: true
  178. },
  179. {
  180. name: '女',
  181. checked: false
  182. },
  183. ],
  184. sex: '男',
  185. userId: '',
  186. btnName: '提交申请',
  187. video: "",
  188. isFinish: false,
  189. infantImgs: [],
  190. }
  191. },
  192. onLoad(option) {
  193. this.userId = option.userId ? option.userId : ''
  194. if (this.userId) {
  195. // this.getUserInfo()
  196. }
  197. uni.setNavigationBarTitle({
  198. title: "修改个人信息"
  199. })
  200. this.btnName = '提交修改'
  201. this.getPWInfo()
  202. },
  203. methods: {
  204. // 上传视频
  205. addVideo() {
  206. uni.chooseVideo({
  207. count: 1,
  208. sourceType: ['album', 'camera'],
  209. success: res => {
  210. this.$queue.showLoading("上传中...");
  211. console.log(res.tempFilePath)
  212. uni.uploadFile({ // 上传接口
  213. // url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
  214. url: 'https://newxxpw.xianmxkj.com/sqx_fast/alioss/upload',
  215. filePath: res.tempFilePath,
  216. name: 'file',
  217. timeout: '30000',
  218. success: (uploadFileRes) => {
  219. // console.log(JSON.parse(uploadFileRes.data))
  220. this.video = JSON.parse(uploadFileRes.data).data
  221. console.log(this.video)
  222. uni.hideLoading();
  223. }
  224. });
  225. }
  226. })
  227. },
  228. // 删除视频
  229. removeVidoe() {
  230. this.video = ''
  231. },
  232. addIDCard(e) {
  233. uni.chooseImage({
  234. count: 1,
  235. sourceType: ['album', 'camera'],
  236. success: res => {
  237. for (let i = 0; i < 1; i++) {
  238. this.$queue.showLoading("上传中...");
  239. uni.uploadFile({ // 上传接口
  240. // url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
  241. url: 'https://newxxpw.xianmxkj.com/sqx_fast/alioss/upload',
  242. filePath: res.tempFilePaths[i],
  243. name: 'file',
  244. success: (uploadFileRes) => {
  245. if (e == 1) {
  246. this.identityCardFront = JSON.parse(uploadFileRes.data)
  247. .data
  248. } else {
  249. this.identityCardRear = JSON.parse(uploadFileRes.data).data
  250. }
  251. uni.hideLoading();
  252. }
  253. });
  254. }
  255. }
  256. })
  257. },
  258. // 上传照片
  259. addImages(e) {
  260. uni.chooseImage({
  261. count: 9,
  262. sourceType: ['album', 'camera'],
  263. success: res => {
  264. console.log(res.tempFilePaths)
  265. for (let i = 0; i < res.tempFilePaths.length; i++) {
  266. this.$queue.showLoading("上传中...");
  267. uni.uploadFile({ // 上传接口
  268. // url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
  269. url: 'https://newxxpw.xianmxkj.com/sqx_fast/alioss/upload',
  270. filePath: res.tempFilePaths[i],
  271. name: 'file',
  272. success: (uploadFileRes) => {
  273. if (this.infantImgs.length < 9) {
  274. this.infantImgs.push(JSON.parse(uploadFileRes.data).data)
  275. }
  276. uni.hideLoading();
  277. }
  278. });
  279. }
  280. }
  281. })
  282. },
  283. // 删除照片
  284. infantImgremove(index) {
  285. this.infantImgs.splice(index, 1)
  286. },
  287. // 预览照片
  288. previewImg(index) {
  289. let _this = this;
  290. uni.previewImage({
  291. current: index,
  292. urls: _this.infantImgs
  293. });
  294. },
  295. getPWInfo() {
  296. this.$Request.getT('/app/usermessage/findPwUserMessage').then(res => {
  297. if (res.code == 0) {
  298. // if (res.data.auditStatus == 0) {
  299. this.birthday = res.data.birthday //生日
  300. this.height = res.data.height //身高
  301. this.weight = res.data.weight //体重
  302. this.sex = res.data.sex == 1 ? '男' : '女'
  303. this.occupation = res.data.occupation //职业
  304. this.individualResume = res.data.individualResume //简介
  305. this.realName = res.data.realName //姓名
  306. this.identityCardNum = res.data.identityCardNum //身份证号
  307. this.identityCardFront = res.data.identityCardFront //身份证正面
  308. this.identityCardRear = res.data.identityCardRear //身份证反面
  309. this.pictureList = res.data.pictureList.split(',')
  310. this.video = res.data.video
  311. this.infantImgs = [];
  312. this.pictureList.forEach(res => {
  313. this.infantImgs.push(res)
  314. })
  315. // }
  316. }
  317. })
  318. },
  319. getUserInfo() {
  320. this.$Request.getT('/app/payorder/selectUserMessageById?userId=' + this.userId).then(res => {
  321. if (res.code == 0) {
  322. console.log(res.data)
  323. this.birthday = res.data.birthday //生日
  324. this.height = res.data.height //身高
  325. this.weight = res.data.weight //体重
  326. this.occupation = res.data.occupation //职业
  327. this.individualResume = res.data.individualResume //简介
  328. this.realName = res.data.realName //姓名
  329. this.identityCardNum = res.data.identityCardNum //身份证号
  330. this.identityCardFront = res.data.identityCardFront //身份证正面
  331. this.identityCardRear = res.data.identityCardRear //身份证反面
  332. this.sex = res.data.sex == 1 ? '男' : '女'
  333. this.pictureList = res.data.pictureList.split(',')
  334. this.video = res.data.video
  335. this.infantImgs = [];
  336. this.pictureList.forEach(res => {
  337. this.infantImgs.push(res)
  338. })
  339. }
  340. })
  341. },
  342. isShow() {
  343. this.show = true
  344. },
  345. timeAction(e) {
  346. console.log(e)
  347. this.birthday = e.year + '-' + e.month + '-' + e.day
  348. },
  349. // 发布
  350. fabuBtn() {
  351. let that = this
  352. if (!that.birthday) {
  353. uni.showToast({
  354. title: '请填写你的生日',
  355. icon: 'none'
  356. })
  357. return
  358. }
  359. if (!that.height) {
  360. uni.showToast({
  361. title: '请填写你的身高',
  362. icon: 'none'
  363. })
  364. return
  365. }
  366. if (!that.weight) {
  367. uni.showToast({
  368. title: '请填写你的体重',
  369. icon: 'none'
  370. })
  371. return
  372. }
  373. if (!that.occupation) {
  374. uni.showToast({
  375. title: '请填写你的职业',
  376. icon: 'none'
  377. })
  378. return
  379. }
  380. if (!that.realName) {
  381. uni.showToast({
  382. title: '请填写你的真实姓名',
  383. icon: 'none'
  384. })
  385. return
  386. }
  387. if (!that.identityCardNum) {
  388. uni.showToast({
  389. title: '请填写你的身份证号',
  390. icon: 'none'
  391. })
  392. return
  393. }
  394. if (!that.identityCardFront) {
  395. uni.showToast({
  396. title: '请上传你的身份证正面',
  397. icon: 'none'
  398. })
  399. return
  400. }
  401. if (!that.identityCardRear) {
  402. uni.showToast({
  403. title: '请上传你的身份证反面',
  404. icon: 'none'
  405. })
  406. return
  407. }
  408. console.log(that.infantImgs, 'lenght', that.infantImgs.length)
  409. if (that.infantImgs.length < 9) {
  410. uni.showToast({
  411. title: '请上传9张你的照片',
  412. icon: 'none'
  413. })
  414. return
  415. }
  416. if (!that.video) {
  417. uni.showToast({
  418. title: '请上传你的视频',
  419. icon: 'none'
  420. })
  421. return
  422. }
  423. console.log(that.isFinish)
  424. console.log(that.infantImgs)
  425. // return
  426. let data = {
  427. birthday: that.birthday, //生日
  428. sex: that.sex == '男' ? 1 : 2, //性别
  429. height: that.height, //身高
  430. weight: that.weight, //体重
  431. occupation: that.occupation, //职业
  432. individualResume: that.individualResume, //简介
  433. pictureList: that.infantImgs.toString(),
  434. realName: that.realName,
  435. identityCardNum: that.identityCardNum,
  436. identityCardFront: that.identityCardFront,
  437. identityCardRear: that.identityCardRear,
  438. video: that.video
  439. }
  440. if (that.userId) {
  441. uni.showModal({
  442. title: '提示',
  443. content: '修改资料预计24小时后通过审核,审核期间将不能接单,是否继续?',
  444. confirmText: '继续',
  445. success: function(res) {
  446. if (res.confirm) {
  447. console.log('用户点击确定');
  448. that.$Request.postJson('/app/usermessage/updateUserMessage', data).then(
  449. res => {
  450. // console.log(that.res)
  451. if (res.code == 0) {
  452. uni.showToast({
  453. title: '提交成功'
  454. })
  455. setTimeout(function() {
  456. uni.switchTab({
  457. url: '/pages/my/index'
  458. })
  459. }, 1000)
  460. } else {
  461. uni.showToast({
  462. title: res.msg,
  463. icon: 'none'
  464. })
  465. }
  466. });
  467. } else if (res.cancel) {
  468. console.log('用户点击取消');
  469. }
  470. }
  471. })
  472. } else {
  473. that.$Request.postJson('/app/usermessage/applyPw', data).then(res => {
  474. console.log(that.res)
  475. if (res.code == 0) {
  476. uni.showToast({
  477. title: '申请成功'
  478. })
  479. setTimeout(function() {
  480. uni.switchTab({
  481. url: '/pages/my/index'
  482. })
  483. }, 1000)
  484. } else {
  485. uni.showToast({
  486. title: res.msg,
  487. icon: 'none'
  488. })
  489. }
  490. });
  491. }
  492. },
  493. }
  494. }
  495. </script>
  496. <style>
  497. page {
  498. /* background-color: #FFF; */
  499. }
  500. </style>