ownerCertification.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. <template>
  2. <view class="yezhu_body">
  3. <view class="user_info">
  4. <view class="user_line">
  5. </view>
  6. <view class="user_item">
  7. <text class="item_name">姓名</text>
  8. <view class="item_right">
  9. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="name" placeholder="请输入姓名" @blur='inputName' @confirm='inputName'/>
  10. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  11. </view>
  12. </view>
  13. <view class="user_line">
  14. </view>
  15. <view class="user_item">
  16. <text class="item_name">性别</text>
  17. <view class="item_right" @click="showGender">
  18. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="genderStr" placeholder="请选择" disabled/>
  19. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  20. </view>
  21. </view>
  22. <view class="user_line">
  23. </view>
  24. <view class="user_item">
  25. <text class="item_name">手机号</text>
  26. <view class="item_right">
  27. <input v-if="mobileOld" placeholder-class="item_right_name_placeholder" type='number' maxlength="11" class="item_right_name" :value="mobileOld" disabled/>
  28. <input v-else placeholder-class="item_right_name_placeholder" type='number' maxlength="11" style="width: calc(100% - 150rpx);" class="item_right_name" :value="mobile" placeholder="请输入" @blur='inputMobile' @confirm='inputMobile'/>
  29. <view class="veritify" @click="getVeritify" v-if="!mobileOld">
  30. {{veritifyTxt}}
  31. </view>
  32. <image v-if="mobileOld" class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  33. </view>
  34. </view>
  35. <view class="user_item" v-if="!mobileOld&&showInputVerifity">
  36. <text class="item_name">验证码</text>
  37. <view class="item_right">
  38. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="verifity" placeholder="请输入" @blur='inputVerifity' @confirm='inputVerifity'/>
  39. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="project_ino">
  44. <view class="user_line">
  45. </view>
  46. <view class="user_item">
  47. <text class="item_name">认证项目</text>
  48. <view class="item_right" @click="chooseHouse">
  49. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="houseName" placeholder="请选择" disabled/>
  50. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  51. </view>
  52. </view>
  53. <view class="user_line">
  54. </view>
  55. <view class="user_item">
  56. <text class="item_name">证件类型</text>
  57. <view class="item_right" @click="chooseCertificateType">
  58. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="certificateTypeStr" placeholder="请选择" disabled/>
  59. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  60. </view>
  61. </view>
  62. <view class="user_line">
  63. </view>
  64. <view class="user_item">
  65. <text class="item_name">证件号</text>
  66. <view class="item_right">
  67. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="idcard" :value="certificateNo" placeholder="请输入" @blur='inputId' @confirm='inputId'/>
  68. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  69. </view>
  70. </view>
  71. <view class="user_line">
  72. </view>
  73. <view class="user_item">
  74. <text class="item_name">填写房号</text>
  75. <view class="item_right">
  76. <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="roomNo" placeholder="请输入" @blur='inputRoomNo' @confirm='inputRoomNo'/>
  77. <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="xieyi" @click="showXieyi">
  82. <image class="icon_selected" v-if="agree" src="../../static/icons/icon_yezhu_selected.png" mode=""></image>
  83. <image class="icon_selected" v-else src="../../static/icons/icon_yezhu_unselected.png" mode=""></image>
  84. <text class="tongyi">我已阅读并同意</text>
  85. <text class="xieyi_text">《入驻协议》</text>
  86. </view>
  87. <view class="btn_next" @click="addOrUpdate">
  88. 下一步
  89. </view>
  90. <dmAgreeement ref='agreement' @agree='agreeXieyi'></dmAgreeement>
  91. <dmPickerView ref="genderPicker" :options="genderList" :value="gender" @confirm="confirm" title="筛选时间维度"></dmPickerView>
  92. <dmPickerView ref="housePicker" :options="houseList" :value="houseId" @confirm="houseConfirm" title="筛选时间维度"></dmPickerView>
  93. <dmPickerView ref="certificateTypePicker" :options="certificateTypeList" :value="certificateType" @confirm="certificateTypeConfirm" title="筛选时间维度"></dmPickerView>
  94. </view>
  95. </template>
  96. <script>
  97. import dmAgreeement from "../../components/subComponents/dmAgreement.vue";
  98. import dmPickerView from "../../components/subComponents/dmPickerView.vue";
  99. let app = getApp();
  100. export default {
  101. data() {
  102. return {
  103. agree:false,
  104. veritifyTxt:"获取验证码",
  105. genderList:[
  106. {
  107. title:"男",
  108. value:"1"
  109. },
  110. {
  111. title:"女",
  112. value:"0"
  113. }
  114. ],
  115. gender:"",
  116. genderStr:"",
  117. houseId:"",
  118. houseName:"",
  119. houseList:[],
  120. certificateType:"1",
  121. certificateTypeStr:"",
  122. certificateTypeList:[{
  123. title:"中国居民大陆身份证",
  124. value:"1"
  125. },{
  126. title:"香港居民身份证",
  127. value:"2"
  128. },{
  129. title:"护照",
  130. value:"3"
  131. }],
  132. mobileOld:"",
  133. mobile:"",
  134. verifity:"",
  135. name:"",
  136. certificateNo:"",
  137. roomNo:"",
  138. timer:null,
  139. countdownTimes:120,
  140. showInputVerifity:true
  141. };
  142. },
  143. created() {
  144. this.queryProjectBox();
  145. },
  146. methods:{
  147. agreeXieyi(){
  148. this.agree = true
  149. },
  150. showXieyi(){
  151. this.$refs.agreement.show()
  152. },
  153. showGender(){
  154. this.$refs.genderPicker.show();
  155. },
  156. confirm(e){
  157. this.genderStr = e.selItem.title;
  158. this.gender = e.selItem.value;
  159. },
  160. chooseCertificateType(){
  161. this.$refs.certificateTypePicker.show();
  162. },
  163. certificateTypeConfirm(e){
  164. this.certificateTypeStr = e.selItem.title;
  165. this.certificateType = e.selItem.value;
  166. },
  167. async queryProjectBox() {
  168. let ret = await this.$myRequest({
  169. url: "/project/queryProjectBox",
  170. data: {
  171. "onlineStatus": "1",
  172. }
  173. })
  174. this.houseList = [];
  175. if (ret.data.success) {
  176. let houseList = ret.data.list || [];
  177. let count = 0;
  178. while (count<houseList.length){
  179. this.houseList.push({
  180. title:houseList[count].name,
  181. value:houseList[count].id,
  182. })
  183. count++;
  184. }
  185. }
  186. },
  187. async getVeritify(){
  188. if(!this.mobile){
  189. uni.showToast({
  190. icon:"none",
  191. title:"请输入手机号"
  192. })
  193. return
  194. }
  195. var phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  196. if (!phone.test(this.mobile)) {
  197. uni.showToast({
  198. icon:"none",
  199. title:"请输入正确的手机号"
  200. })
  201. return
  202. }
  203. this.showInputVerifity = true;
  204. if(this.timer&&this.countdownTimes>=0){
  205. return
  206. }
  207. let ret = await this.$myRequest({
  208. url: "/sms/sendSmsVerifyCode",
  209. data: {
  210. "phone": this.mobile,
  211. },
  212. method:"GET"
  213. })
  214. this.houseList = [];
  215. if (ret.data.success) {
  216. this.countdown();
  217. }
  218. },
  219. chooseHouse(){
  220. this.$refs.housePicker.show();
  221. },
  222. houseConfirm(e){
  223. this.houseId = e.selItem.value;
  224. this.houseName = e.selItem.title
  225. },
  226. countdown(){
  227. this.timer = setInterval(()=>{
  228. this.countdownTimes--;
  229. this.veritifyTxt = this.countdownTimes+"s"
  230. if(this.countdownTimes<=0){
  231. clearInterval(this.timer);
  232. this.timer = null;
  233. this.veritifyTxt = '获取验证码';
  234. this.countdownTimes = 120;
  235. }
  236. },1000)
  237. },
  238. inputName(e){
  239. this.name = e.detail.value
  240. },
  241. inputMobile(e){
  242. this.mobile = e.detail.value
  243. },
  244. inputVerifity(e){
  245. this.verifity = e.detail.value
  246. },
  247. inputId(e){
  248. this.certificateNo = e.detail.value
  249. },
  250. inputRoomNo(e){
  251. this.roomNo = e.detail.value
  252. },
  253. async addOrUpdate() {
  254. if(!this.name){
  255. uni.showToast({
  256. icon:"none",
  257. title:"请输入姓名"
  258. })
  259. return
  260. }
  261. if(!this.gender){
  262. uni.showToast({
  263. icon:"none",
  264. title:"请选择性别"
  265. })
  266. return
  267. }
  268. if(!this.mobile){
  269. uni.showToast({
  270. icon:"none",
  271. title:"请输入手机号"
  272. })
  273. return
  274. }
  275. if(!this.houseId){
  276. uni.showToast({
  277. icon:"none",
  278. title:"请选择认证项目"
  279. })
  280. return
  281. }
  282. if(!this.certificateType){
  283. uni.showToast({
  284. icon:"none",
  285. title:"请选择证件类型"
  286. })
  287. return
  288. }
  289. if(!this.certificateNo){
  290. uni.showToast({
  291. icon:"none",
  292. title:"请输入证件号"
  293. })
  294. return
  295. }
  296. if(!this.roomNo){
  297. uni.showToast({
  298. icon:"none",
  299. title:"请输入房号"
  300. })
  301. return
  302. }
  303. if(!this.agree){
  304. uni.showToast({
  305. icon:"none",
  306. title:"请阅读并同意《入住协议》"
  307. })
  308. return
  309. }
  310. let ret = await this.$myRequest({
  311. url: "/user/regist/addOrUpdate",
  312. data: {
  313. "agreeState": this.agree?1:0,
  314. "captcha":this.verifity,
  315. "certificateNo": this.certificateNo,
  316. "certificateType": this.certificateType,
  317. "phone": this.mobile,
  318. "projectId": this.houseId,
  319. "roomNo": this.roomNo,
  320. "sex": this.gender,
  321. "sign": this.sign,
  322. "userId": app.globalData.userId,
  323. "username": this.name,
  324. "phoneFrom":this.mobileOld?1:2
  325. }
  326. })
  327. if (ret.data.success) {
  328. uni.navigateTo({
  329. url:'../certificationResultPage/certificationResultPage'
  330. })
  331. }else{
  332. uni.showToast({
  333. icon:"none",
  334. title:ret.data.message
  335. })
  336. }
  337. },
  338. },
  339. destroyed() {
  340. if(null!=this.timer){
  341. clearInterval(this.timer);
  342. this.timer = null;
  343. }
  344. },
  345. components:{
  346. dmAgreeement,
  347. dmPickerView
  348. }
  349. }
  350. </script>
  351. <style lang="scss">
  352. .yezhu_body{
  353. width: 100%;
  354. height: 100vh;
  355. position: relative;
  356. .user_info{
  357. background: #ffffff;
  358. .user_item{
  359. margin-left: 40rpx;
  360. margin-right: 40rpx;
  361. height: 98rpx;
  362. display: flex;
  363. justify-content: space-between;
  364. align-items: center;
  365. .item_name{
  366. width: 20%;
  367. font-size: 28rpx;
  368. font-family: Verdana, Verdana-Regular;
  369. font-weight: 400;
  370. text-align: left;
  371. color: #262626;
  372. }
  373. .item_right{
  374. width: 80%;
  375. font-size: 26rpx;
  376. font-family: Verdana, Verdana-Regular;
  377. font-weight: 400;
  378. text-align: right;
  379. color: #262626;
  380. display: flex;
  381. align-items: center;
  382. .item_right_name{
  383. width: 100%;
  384. }
  385. .item_right_name_placeholder{
  386. font-size: 26rpx;
  387. font-family: Verdana, Verdana-Regular;
  388. font-weight: 400;
  389. color: #b1b1b1;
  390. }
  391. .icon_right{
  392. width: 10rpx;
  393. height: 22rpx;
  394. margin-left: 19rpx;
  395. }
  396. .veritify{
  397. width: 140rpx;
  398. height: 50rpx;
  399. margin-left: 10rpx;
  400. line-height: 50rpx;
  401. background: #ffffff;
  402. border: 2rpx solid #f07423;
  403. border-radius: 8rpx;
  404. font-size: 20rpx;
  405. font-family: Verdana, Verdana-Regular;
  406. font-weight: 400;
  407. text-align: center;
  408. color: #f07423;
  409. }
  410. }
  411. }
  412. .user_line{
  413. margin-left: 40rpx;
  414. margin-right: 40rpx;
  415. height: 2px;
  416. background: #f8f8f8;
  417. }
  418. }
  419. .project_ino{
  420. background: #ffffff;
  421. margin-top: 20rpx;
  422. .user_item{
  423. margin-left: 40rpx;
  424. margin-right: 40rpx;
  425. height: 98rpx;
  426. display: flex;
  427. justify-content: space-between;
  428. align-items: center;
  429. .item_name{
  430. width: 20%;
  431. font-size: 28rpx;
  432. font-family: Verdana, Verdana-Regular;
  433. font-weight: 400;
  434. text-align: left;
  435. color: #262626;
  436. }
  437. .item_right{
  438. width: 80%;
  439. font-size: 26rpx;
  440. font-family: Verdana, Verdana-Regular;
  441. font-weight: 400;
  442. text-align: right;
  443. color: #262626;
  444. display: flex;
  445. align-items: center;
  446. .item_right_name{
  447. width: 100%;
  448. }
  449. .item_right_name_placeholder{
  450. font-size: 26rpx;
  451. font-family: Verdana, Verdana-Regular;
  452. font-weight: 400;
  453. color: #b1b1b1;
  454. }
  455. .icon_right{
  456. width: 10rpx;
  457. height: 22rpx;
  458. margin-left: 19rpx;
  459. }
  460. }
  461. }
  462. .user_line{
  463. margin-left: 40rpx;
  464. margin-right: 40rpx;
  465. height: 2px;
  466. background: #f8f8f8;
  467. }
  468. }
  469. .xieyi{
  470. display: flex;
  471. width: 100%;
  472. justify-content: center;
  473. position: absolute;
  474. bottom: 162rpx;
  475. left: 0;
  476. align-items: center;
  477. .icon_selected{
  478. width: 24rpx;
  479. height: 24rpx;
  480. margin-right: 20rpx;
  481. }
  482. .tongyi{
  483. font-size: 24rpx;
  484. font-family: Verdana, Verdana-Regular;
  485. font-weight: 400;
  486. color: #999999;
  487. display: inline-block;
  488. }
  489. .xieyi_text{
  490. font-size: 24rpx;
  491. font-family: Verdana, Verdana-Regular;
  492. font-weight: 400;
  493. color: #f07423;
  494. display: inline-block;
  495. }
  496. }
  497. .btn_next{
  498. width: calc(100% - 80rpx);
  499. box-sizing: border-box;
  500. margin-left: 40rpx;
  501. margin-right: 40rpx;
  502. height: 72rpx;
  503. line-height: 72rpx;
  504. background: #f07423;
  505. border-radius: 12rpx;
  506. font-size: 32rpx;
  507. font-family: Verdana, Verdana-Regular;
  508. font-weight: 400;
  509. text-align: center;
  510. color: #ffffff;
  511. position: absolute;
  512. bottom: 60rpx;
  513. left: 0;
  514. }
  515. }
  516. </style>