index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  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. let data = {
  321. userId: this.userId
  322. }
  323. this.$Request.getT('/app/payorder/selectUserMessageById',data).then(res => {
  324. if (res.code == 0) {
  325. console.log(res.data)
  326. this.birthday = res.data.birthday //生日
  327. this.height = res.data.height //身高
  328. this.weight = res.data.weight //体重
  329. this.occupation = res.data.occupation //职业
  330. this.individualResume = res.data.individualResume //简介
  331. this.realName = res.data.realName //姓名
  332. this.identityCardNum = res.data.identityCardNum //身份证号
  333. this.identityCardFront = res.data.identityCardFront //身份证正面
  334. this.identityCardRear = res.data.identityCardRear //身份证反面
  335. this.sex = res.data.sex == 1 ? '男' : '女'
  336. this.pictureList = res.data.pictureList.split(',')
  337. this.video = res.data.video
  338. this.infantImgs = [];
  339. this.pictureList.forEach(res => {
  340. this.infantImgs.push(res)
  341. })
  342. }
  343. })
  344. },
  345. isShow() {
  346. this.show = true
  347. },
  348. timeAction(e) {
  349. console.log(e)
  350. this.birthday = e.year + '-' + e.month + '-' + e.day
  351. },
  352. // 发布
  353. fabuBtn() {
  354. let that = this
  355. if (!that.birthday) {
  356. uni.showToast({
  357. title: '请填写你的生日',
  358. icon: 'none'
  359. })
  360. return
  361. }
  362. if (!that.height) {
  363. uni.showToast({
  364. title: '请填写你的身高',
  365. icon: 'none'
  366. })
  367. return
  368. }
  369. if (!that.weight) {
  370. uni.showToast({
  371. title: '请填写你的体重',
  372. icon: 'none'
  373. })
  374. return
  375. }
  376. if (!that.occupation) {
  377. uni.showToast({
  378. title: '请填写你的职业',
  379. icon: 'none'
  380. })
  381. return
  382. }
  383. if (!that.realName) {
  384. uni.showToast({
  385. title: '请填写你的真实姓名',
  386. icon: 'none'
  387. })
  388. return
  389. }
  390. if (!that.identityCardNum) {
  391. uni.showToast({
  392. title: '请填写你的身份证号',
  393. icon: 'none'
  394. })
  395. return
  396. }
  397. if (!that.identityCardFront) {
  398. uni.showToast({
  399. title: '请上传你的身份证正面',
  400. icon: 'none'
  401. })
  402. return
  403. }
  404. if (!that.identityCardRear) {
  405. uni.showToast({
  406. title: '请上传你的身份证反面',
  407. icon: 'none'
  408. })
  409. return
  410. }
  411. console.log(that.infantImgs, 'lenght', that.infantImgs.length)
  412. if (that.infantImgs.length < 9) {
  413. uni.showToast({
  414. title: '请上传9张你的照片',
  415. icon: 'none'
  416. })
  417. return
  418. }
  419. if (!that.video) {
  420. uni.showToast({
  421. title: '请上传你的视频',
  422. icon: 'none'
  423. })
  424. return
  425. }
  426. console.log(that.isFinish)
  427. console.log(that.infantImgs)
  428. // return
  429. let data = {
  430. birthday: that.birthday, //生日
  431. sex: that.sex == '男' ? 1 : 2, //性别
  432. height: that.height, //身高
  433. weight: that.weight, //体重
  434. occupation: that.occupation, //职业
  435. individualResume: that.individualResume, //简介
  436. pictureList: that.infantImgs.toString(),
  437. realName: that.realName,
  438. identityCardNum: that.identityCardNum,
  439. identityCardFront: that.identityCardFront,
  440. identityCardRear: that.identityCardRear,
  441. video: that.video
  442. }
  443. if (that.userId) {
  444. uni.showModal({
  445. title: '提示',
  446. content: '修改资料预计24小时后通过审核,审核期间将不能接单,是否继续?',
  447. confirmText: '继续',
  448. success: function(res) {
  449. if (res.confirm) {
  450. console.log('用户点击确定');
  451. that.$Request.postJson('/app/usermessage/updateUserMessage', data).then(
  452. res => {
  453. // console.log(that.res)
  454. if (res.code == 0) {
  455. uni.showToast({
  456. title: '提交成功'
  457. })
  458. setTimeout(function() {
  459. uni.switchTab({
  460. url: '/pages/my/index'
  461. })
  462. }, 1000)
  463. } else {
  464. uni.showToast({
  465. title: res.msg,
  466. icon: 'none'
  467. })
  468. }
  469. });
  470. } else if (res.cancel) {
  471. console.log('用户点击取消');
  472. }
  473. }
  474. })
  475. } else {
  476. that.$Request.postJson('/app/usermessage/applyPw', data).then(res => {
  477. console.log(that.res)
  478. if (res.code == 0) {
  479. uni.showToast({
  480. title: '申请成功'
  481. })
  482. setTimeout(function() {
  483. uni.switchTab({
  484. url: '/pages/my/index'
  485. })
  486. }, 1000)
  487. } else {
  488. uni.showToast({
  489. title: res.msg,
  490. icon: 'none'
  491. })
  492. }
  493. });
  494. }
  495. },
  496. }
  497. }
  498. </script>
  499. <style>
  500. page {
  501. /* background-color: #FFF; */
  502. }
  503. </style>