register.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. <template>
  2. <view class="container">
  3. <u-icon class="back-btn" name="arrow-left" color="black" size="20" @click="navBack"></u-icon>
  4. <view class="wrapper">
  5. <h2 class="Semibold">手机号注册</h2>
  6. <view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;position:relative;'
  7. class="flex">
  8. <view class="NumberMedium" style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
  9. <view style='width:85%;'>
  10. <!-- <u-input border="none" maxlength="11" v-model='phone' @input='phoneinput' style='padding-left:10px;'
  11. placeholder="请输入手机号码" type="number" class="Regular" /> -->
  12. <input placeholder-style="color:#AFB3BF" border="none" maxlength="11" v-model='phone'
  13. @input='phoneinput' style='padding-left:10px;' placeholder="请输入手机号码" type="number"
  14. class="Regular" />
  15. </view>
  16. <!-- <image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image> -->
  17. </view>
  18. <view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
  19. <view style='width:70%;position:relative;'>
  20. <!-- <u-input border="none" v-model='verifyCode' class="Regular" placeholder="请输入验证码" type="number" maxlength="6" />
  21. -->
  22. <input placeholder-style="color:#AFB3BF" border="none" maxlength="6" v-model='verifyCode'
  23. style='padding-left:10px;' placeholder="请输入验证码" type="number" class="Regular" />
  24. <!-- <image v-if='verifyCode' @click='verifyCode=""' class='close1' src='../../static/img/login/guanbi@2x.png'></image> -->
  25. </view>
  26. <button :class='codestatus&&!sendDisabled?"active":""' @click='getcode'
  27. class='getcode Regular'>{{sendText}}</button>
  28. </view>
  29. <view style='border-bottom:1px solid #E8E9ED;padding:10px;position:relative;display: flex;'>
  30. <!-- <u-input placeholder-style="color:#AFB3BF" border="none" maxlength="16" v-model='password' style='padding-left:10px;'
  31. placeholder="请输入密码,6-16位字符" :type="type" class="Regular input-style" /> -->
  32. <input placeholder-style="color:#AFB3BF" class='password' v-model='password'
  33. v-if="isShowPassword=='password'" placeholder="请输入密码" type="password">
  34. <input maxlength='16' placeholder-style="color:#AFB3BF" class='password' v-model='password' v-else
  35. type="text" placeholder="请输入密码">
  36. <view style="width: 50%;text-align: right;">
  37. <image class='yanjingicon' style='width:22px;height:22px;' @click="passWordStatus(1)"
  38. v-if="isShowPassword=='password'" src="../../static/yioncang.png" mode=""></image>
  39. <image class='yanjingicon' style='width:22px;height:22px;' @click="passWordStatus(2)" v-else
  40. src="../../static/xianshi.png" mode=""></image>
  41. </view>
  42. <!-- <input maxlength='16' class='password Regular input-style' style='height:30px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type"> -->
  43. <!-- <image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image> -->
  44. <!-- <view @click='switchover' style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont " :class='type=="password"?"icon-yanjing-biyan":"icon-yanjing-zhengyan"'></view> -->
  45. </view>
  46. <button :class='phone!=""&&verifyCode!=""&&password!=""?"active":""' @click='register'
  47. class='verificationCode'>注册</button>
  48. <view
  49. style='color:#6A6A6A;margin-top:10px;font-size:30rpx;display:flex;justify-content:center;align-items: center;'>
  50. <u--image style='margin-right:3px;position:relative;top:1rpx;' @click='consent'
  51. :src="consentStatus==true?'../../static/images/mine/duihao@2x.png':'../../static/images/mine/wxz.png'"
  52. width="17px" height="17px"></u--image>
  53. 已阅读并同意
  54. <navigator
  55. url="/pages/sale/webview?can_share=false&url=http://liangxin.zthymaoyi.com/cythzUserAgreement.html"
  56. class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator
  57. url="/pages/sale/webview?can_share=false&url=http://liangxin.zthymaoyi.com/cytScrectAgreement.html"
  58. class="path" hover-class="navigator-hover">《隐私政策》</navigator>
  59. </view>
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. import {
  65. mapMutations
  66. } from 'vuex';
  67. import {
  68. openFSqlite,
  69. createFSQL,
  70. selectFSQL,
  71. addFSQL
  72. } from '../../util/f.js'
  73. import helper from '@/common/helper.js';
  74. import {
  75. queryData,
  76. upData,
  77. initData
  78. } from '../../util/dbUtil.js'
  79. export default {
  80. data() {
  81. return {
  82. inputContent: null,
  83. loginType: "wechat",
  84. phone: '',
  85. password: '',
  86. logining: false,
  87. isPhone: false,
  88. isApple: true,
  89. accessToken: '',
  90. params: {
  91. encryptedData: '',
  92. session_key: '',
  93. iv: '',
  94. },
  95. userInfo: {
  96. nickName: '',
  97. avatarUrl: '',
  98. gender: '',
  99. phone: ''
  100. },
  101. consentStatus: false,
  102. codestatus: false,
  103. type: 'password',
  104. inputStatus: 'none',
  105. verifyCode: null,
  106. sendText: '获取验证码',
  107. sendDisabled: false,
  108. system: '',
  109. platform: '',
  110. canIUseProfile: false,
  111. isShowPassword: "password"
  112. }
  113. },
  114. onShow() {
  115. // this.loginType = "wechat"
  116. // this.$api.logout()
  117. },
  118. onLoad(options) {
  119. if (wx.getUserProfile) {
  120. console.log('--check getUserProfile--OK');
  121. this.canIUseProfile = true;
  122. }
  123. console.log("login on load")
  124. var that = this
  125. // that.$api.request('user', 'sendIsApple', {}).then(res => {
  126. // that.isApple = res.data
  127. // })
  128. // uni.getSystemInfo({
  129. // success: (res) => {
  130. // // console.log(res)
  131. // this.system = res.system // ios
  132. // this.platform = res.platform // 14.3
  133. // }
  134. // })
  135. },
  136. methods: {
  137. passWordStatus(type) {
  138. if (type == 1) {
  139. this.isShowPassword = 'text'
  140. } else {
  141. this.isShowPassword = 'password'
  142. }
  143. },
  144. // 随机数
  145. randomAccess(min, max) {
  146. return Math.floor(Math.random() * (min - max) + max)
  147. },
  148. // 解码
  149. decodeUnicode(str) {
  150. //Unicode显示方式是\u4e00
  151. str = "\\u" + str
  152. str = str.replace(/\\/g, "%");
  153. //转换中文
  154. str = unescape(str);
  155. //将其他受影响的转换回原来
  156. str = str.replace(/%/g, "\\");
  157. return str;
  158. },
  159. /*
  160. *@param Number NameLength 要获取的名字长度
  161. */
  162. getRandomName(NameLength) {
  163. let name = ""
  164. for (let i = 0; i < NameLength; i++) {
  165. let unicodeNum = ""
  166. unicodeNum = this.randomAccess(0x4e00, 0x9fa5).toString(16)
  167. name += this.decodeUnicode(unicodeNum)
  168. }
  169. return name
  170. },
  171. phoneinput(e) {
  172. if (e.detail.value.length == 11) {
  173. this.codestatus = true
  174. } else {
  175. this.codestatus = false
  176. }
  177. },
  178. getcode() {
  179. var that = this
  180. if (that.sendText != "获取验证码") {
  181. return
  182. }
  183. if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)) {
  184. that.$request.baseRequest('get', '/commonUser/sendVerifyCode', {
  185. phone: this.phone
  186. }).then(res => {
  187. console.log(2222222)
  188. if (res.code == 200) {
  189. console.log(1121212)
  190. that.sendDisabled = true
  191. let sec = 60
  192. let interval = setInterval(() => {
  193. sec--;
  194. that.sendText = sec + 's后重发'
  195. if (sec <= 0) {
  196. that.sendDisabled = false
  197. that.sendText = "获取验证码"
  198. clearInterval(interval)
  199. }
  200. }, 1000)
  201. } else {
  202. uni.showToast({
  203. title: res.message,
  204. icon: 'none',
  205. duration: 2000
  206. })
  207. }
  208. })
  209. .catch(res => {
  210. uni.showToast({
  211. title: res.data.message,
  212. icon: 'none',
  213. duration: 2000
  214. })
  215. });
  216. } else {
  217. uni.showToast({
  218. title: '请输入正确的手机号',
  219. icon: 'none',
  220. duration: 2000
  221. })
  222. }
  223. },
  224. register() {
  225. var that = this
  226. if (!this.consentStatus) {
  227. uni.showToast({
  228. title: '请勾选协议',
  229. icon: 'none',
  230. duration: 2000
  231. })
  232. return
  233. }
  234. if (!this.phone) {
  235. uni.showToast({
  236. title: '手机号不能为空',
  237. icon: 'none',
  238. duration: 2000
  239. })
  240. return
  241. }
  242. if (!this.verifyCode) {
  243. uni.showToast({
  244. title: '验证码不能为空',
  245. icon: 'none',
  246. duration: 2000
  247. })
  248. return
  249. }
  250. if (!this.password) {
  251. uni.showToast({
  252. title: '密码不能为空',
  253. icon: 'none',
  254. duration: 2000
  255. })
  256. return
  257. }
  258. if (this.verifyCode.length != 6) {
  259. uni.showToast({
  260. title: '验证码错误',
  261. icon: 'none',
  262. duration: 2000
  263. })
  264. return
  265. }
  266. if (this.password.length < 6) {
  267. uni.showToast({
  268. title: '密码长度需大于6位',
  269. icon: 'none',
  270. duration: 2000
  271. })
  272. return
  273. }
  274. var username = this.getRandomName(3)
  275. that.$request.baseRequest('post', '/commonUser/register', {
  276. phone: this.phone,
  277. password: this.password,
  278. verifyCode: this.verifyCode,
  279. userName: username,
  280. identification: 1, //司机标识
  281. avatarUrl: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/1656724567954127.png" //司机默认头像
  282. }).then(res => {
  283. if (res.code == '11003') {
  284. uni.showToast({
  285. title: res.message,
  286. icon: 'none',
  287. duration: 2000
  288. })
  289. return
  290. } else if (res.code == '11004') {
  291. uni.showToast({
  292. title: '该手机号已注册,可直接登录',
  293. icon: 'none',
  294. duration: 2000
  295. })
  296. return
  297. } else {
  298. uni.showLoading({
  299. title: '登录中',
  300. mask: true
  301. })
  302. that.$request.baseRequest('get', '/commonUser/login', {
  303. phone: this.phone,
  304. password: this.password,
  305. loginFlag: 2,
  306. identification: 1 //司机标识
  307. }).then(res => {
  308. if (res.code == 200) {
  309. uni.setStorageSync("shiro", encodeURIComponent(
  310. `ws_login_companyShortName=
  311. '黑龙江中天昊元贸易有限公司'; ws_login_rememberMe=1; ws_login_account=${that.phone}; ws_login_pwd=${that.password}; shiro.session=65500189-7bb5-457f-9ff6-0db069150e78`
  312. ))
  313. // // pc登录
  314. // that.$request.baseRequest('post', '/commonUser/api/loginQuickly', {
  315. // mobilePhone: this.phone,
  316. // veriCode: "123456",
  317. // }).then(res1 => {
  318. // if (res1.code == 200) {
  319. // uni.setStorageSync('pcUserInfo', res1.data)
  320. // helper.getListByUserId()
  321. // } else {
  322. // that.$api.doRequest('post',
  323. // '/commonUser/api/loginQuickly', {
  324. // mobilePhone: '14444444444',
  325. // veriCode: "123456",
  326. // }).then(res2 => {
  327. // uni.setStorageSync('pcUserInfo', res2
  328. // .data)
  329. // helper.getListByUserId()
  330. // })
  331. // }
  332. // })
  333. uni.setStorageSync('userInfo', res.data)
  334. that.$store.commit('login', res.data)
  335. uni.switchTab({
  336. url: '/pages/goodSource/index'
  337. });
  338. } else {
  339. uni.showToast({
  340. title: res.message,
  341. icon: 'none',
  342. duration: 2000
  343. })
  344. }
  345. uni.hideLoading()
  346. })
  347. .catch(res => {
  348. uni.hideLoading()
  349. console.log(res);
  350. });
  351. }
  352. })
  353. .catch(res => {
  354. uni.hideLoading()
  355. console.log(res);
  356. });
  357. },
  358. consent() {
  359. this.consentStatus = !this.consentStatus
  360. uni.setStorage({
  361. key: 'policyStorageKey',
  362. data: this.consentStatus
  363. });
  364. },
  365. switchover() {
  366. if (this.type == 'password') {
  367. this.type = 'text'
  368. } else {
  369. this.type = 'password'
  370. }
  371. },
  372. ...mapMutations(['login']),
  373. navBack() {
  374. uni.navigateBack();
  375. },
  376. },
  377. }
  378. </script>
  379. <style lang='scss' scoped>
  380. uni-navigator {
  381. display: inline-block;
  382. color: #F5BA3C;
  383. }
  384. .password {
  385. border: none;
  386. outline: none;
  387. }
  388. .apple {
  389. background: #000;
  390. width: 35px;
  391. height: 35px;
  392. padding: 8px;
  393. border-radius: 50%;
  394. vertical-align: middle;
  395. }
  396. page {
  397. background: #fff;
  398. }
  399. .cuIcon-weixin {
  400. background: #F5BA3C;
  401. color: #fff;
  402. font-size: 18px;
  403. padding: 9px;
  404. border-radius: 50%;
  405. vertical-align: middle;
  406. margin-right: 5px;
  407. }
  408. .container {
  409. padding-top: 85px;
  410. position: relative;
  411. width: 100vw;
  412. height: calc(100vh - 85px);
  413. overflow: hidden;
  414. background: url('~@/static/images/mine/bg@2x.png');
  415. background-size: 100%;
  416. }
  417. .close {
  418. width: 20px;
  419. height: 20px;
  420. position: absolute;
  421. right: 0px;
  422. }
  423. .close1 {
  424. width: 20px;
  425. height: 20px;
  426. position: absolute;
  427. right: 10px;
  428. top: 0;
  429. }
  430. .close2 {
  431. width: 15px;
  432. height: 15px;
  433. position: absolute;
  434. right: 19px;
  435. top: 50%;
  436. transform: translateY(-45%);
  437. }
  438. .wrapper {
  439. position: relative;
  440. z-index: 90;
  441. padding-bottom: 40upx;
  442. height: 100%;
  443. padding: 0 30px;
  444. }
  445. .back-btn {
  446. position: absolute;
  447. left: 40upx;
  448. z-index: 9999;
  449. padding-top: var(--status-bar-height);
  450. top: 40upx;
  451. font-size: 40upx;
  452. color: black;
  453. }
  454. .verificationCode {
  455. margin-top: 20px;
  456. background: #F5F6F9;
  457. color: #AFB3BF;
  458. }
  459. .verificationCode:after {
  460. border: none;
  461. }
  462. .register {
  463. position: absolute;
  464. bottom: 20px;
  465. left: 50%;
  466. transform: translateX(-50%);
  467. color: #333333;
  468. height: 50px;
  469. line-height: 50px;
  470. border-radius: 30px;
  471. border: 1px solid #444444;
  472. }
  473. .register:after {
  474. border: none;
  475. }
  476. .verificationCode.active {
  477. background: #F5BA3C;
  478. color: #fff;
  479. }
  480. .getcode {
  481. font-size: 14px;
  482. position: absolute;
  483. right: 0;
  484. top: 50%;
  485. transform: translateY(-50%);
  486. color: #AFB3BF;
  487. background: #F5F6F9;
  488. height: 30px;
  489. line-height: 30px;
  490. }
  491. .getcode:after {
  492. border: none;
  493. }
  494. uni-navigator {
  495. display: inline-block;
  496. color: #F5BA3C;
  497. }
  498. .getcode.active {
  499. background: #F5BA3C;
  500. color: #fff;
  501. }
  502. .NumberMedium {
  503. display: flex;
  504. align-items: center;
  505. }
  506. .flex {
  507. align-items: center;
  508. }
  509. </style>