register.vue 31 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219
  1. <template>
  2. <div :style="viewColor">
  3. <div class="register absolute" v-if="!auth_token">
  4. <div class="shading">
  5. <div class="pictrue acea-row row-center-wrapper">
  6. <image :src="login_logo" v-if="login_logo" />
  7. </div>
  8. </div>
  9. <div class="whiteBg" v-if="formItem === 1">
  10. <!-- <div class="title acea-row row-center-wrapper">
  11. <div class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" @click="navTap(index)" :key="index">
  12. {{ item }}
  13. </div>
  14. </div> -->
  15. <div class="list" :hidden="current !== 0">
  16. <form @submit.prevent="submit">
  17. <div class="item">
  18. <div class="acea-row row-middle">
  19. <image src="/static/images/phone_1.png"></image>
  20. <input type="text" placeholder="输入手机号码" placeholder-class="placeholder"
  21. v-model="account" required />
  22. </div>
  23. </div>
  24. <div class="item">
  25. <div class="acea-row row-middle">
  26. <image src="/static/images/code_2.png"></image>
  27. <input type="password" placeholder="填写登录密码" placeholder-class="placeholder"
  28. v-model="password" required />
  29. </div>
  30. </div>
  31. </form>
  32. <navigator class="forgetPwd" hover-class="none" url="/pages/users/retrievePassword/index">
  33. 忘记密码
  34. </navigator>
  35. </div>
  36. <div class="list" :hidden="current !== 1">
  37. <div class="item">
  38. <div class="acea-row row-middle">
  39. <image src="/static/images/phone_1.png"></image>
  40. <input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="account" />
  41. </div>
  42. </div>
  43. <div class="item">
  44. <div class="acea-row row-middle">
  45. <image src="/static/images/code_2.png"></image>
  46. <input type="text" placeholder="填写验证码" placeholder-class="placeholder" class="codeIput"
  47. v-model="captcha" />
  48. <button v-debounce class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
  49. @click="code">
  50. {{ text }}
  51. </button>
  52. </div>
  53. </div>
  54. <div class="item" v-if="isShowCode">
  55. <div class="acea-row row-middle">
  56. <image src="/static/images/code_2.png"></image>
  57. <input type="text" placeholder="填写验证码" placeholder-class="placeholder" class="codeIput"
  58. v-model="codeVal" />
  59. <div class="code" @click="">
  60. <image class="code-img" style="width: 100%;height: 100%;" :src="codeUrl" />
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="protocol acea-row row-between-wrapper">
  66. <checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
  67. <checkbox class="checkbox" :checked="isAgree ? true : false" />
  68. <text class="protocol_text">我已同意<text @click="userAgree" class="font_pro">《用户协议》</text>与<text
  69. @click="userPrivacyAgree" class="font_pro">《隐私政策》</text></text>
  70. </checkbox-group>
  71. </div>
  72. <div class="logon" v-debounce @click="loginMobile" :hidden="current !== 1">登录</div>
  73. <div class="logon" v-debounce @click="submit" :hidden="current === 1">登录</div>
  74. <div class="tip">
  75. 没有账号?
  76. <span @click="formItem = 2" class="font-color-red">立即注册</span>
  77. </div>
  78. <!-- #ifdef MP -->
  79. <view class="appLogin">
  80. <view class="hds">
  81. <span class="line"></span>
  82. <p>其他方式登录</p>
  83. <span class="line"></span>
  84. </view>
  85. <view class="btn-wrapper">
  86. <button form-type="submit" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  87. <view class="btn wx">
  88. <span class="iconfont icon-s-weixindenglu1"></span>
  89. </view>
  90. </button>
  91. </view>
  92. </view>
  93. <!-- #endif -->
  94. <!-- #ifdef APP-PLUS -->
  95. <view class="appLogin" v-if="!appLoginStatus && !appleLoginStatus">
  96. <view class="hds">
  97. <span class="line"></span>
  98. <p>其他方式登录</p>
  99. <span class="line"></span>
  100. </view>
  101. <view class="btn-wrapper">
  102. <view class="btn wx" @click="wxLogin">
  103. <span class="iconfont icon-s-weixindenglu1"></span>
  104. </view>
  105. <view class="btn wx btn-apple" @click="appleLogin" v-if="appleShow">
  106. <span class="iconfont icon-s-pingguo"></span>
  107. </view>
  108. </view>
  109. </view>
  110. <!-- #endif -->
  111. </div>
  112. <div class="whiteBg" v-else>
  113. <div class="title">注册账号</div>
  114. <div class="list">
  115. <div class="item">
  116. <div class="acea-row row-middle">
  117. <image src="/static/images/phone_1.png"></image>
  118. <input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="account" />
  119. </div>
  120. </div>
  121. <div class="item">
  122. <div class="acea-row row-middle">
  123. <image src="/static/images/code_2.png"></image>
  124. <input type="text" placeholder="填写验证码" placeholder-class="placeholder" class="codeIput"
  125. v-model="captcha" />
  126. <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
  127. @click="code">
  128. {{ text }}
  129. </button>
  130. </div>
  131. </div>
  132. <div class="item">
  133. <div class="acea-row row-middle">
  134. <image src="/static/images/code_1.png"></image>
  135. <input type="password" placeholder="填写您的登录密码" placeholder-class="placeholder"
  136. v-model="password" />
  137. </div>
  138. </div>
  139. <div class="item" v-if="isShowCode">
  140. <div class="acea-row row-middle">
  141. <image src="/static/images/code_2.png"></image>
  142. <input type="text" placeholder="填写验证码" placeholder-class="placeholder" class="codeIput"
  143. v-model="codeVal" />
  144. <div class="code" @click="">
  145. <image class="code-img" style="width: 100%;height: 100%;" :src="codeUrl" />
  146. </div>
  147. </div>
  148. </div>
  149. <div class="item">
  150. <div class="acea-row row-middle">
  151. <image src="/static/images/4-001.png"></image>
  152. <input type="text" placeholder="暂无推荐人" placeholder-class="placeholder" v-model="spread"
  153. disabled />
  154. </div>
  155. </div>
  156. </div>
  157. <div class="protocol acea-row row-between-wrapper">
  158. <checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
  159. <checkbox class="checkbox" :checked="isAgree ? true : false" />
  160. <text class="protocol_text">我已同意<text @click="userAgree" class="font_pro">《用户协议》</text>与<text
  161. @click="userPrivacyAgree" class="font_pro">《隐私政策》</text></text>
  162. </checkbox-group>
  163. </div>
  164. <div class="logon" @click="register">注册</div>
  165. <div class="tip" style="font-size: 32rpx;font-weight: bold;">
  166. <!-- 已有账号? -->
  167. <span @click="goDown" class="font-color-red">立即下载APP</span>
  168. </div>
  169. <!-- #ifdef APP-PLUS -->
  170. <view class="appLogin" v-if="!appLoginStatus && !appleLoginStatus">
  171. <view class="hds">
  172. <span class="line"></span>
  173. <p>其他方式登录</p>
  174. <span class="line"></span>
  175. </view>
  176. <view class="btn-wrapper">
  177. <view class="btn wx" @click="wxLogin">
  178. <span class="iconfont icon-s-weixindenglu1"></span>
  179. </view>
  180. <view class="btn wx btn-apple" @click="appleLogin" v-if="appleShow">
  181. <span class="iconfont icon-s-pingguo"></span>
  182. </view>
  183. </view>
  184. </view>
  185. <!-- #endif -->
  186. </div>
  187. <div class="bottom"></div>
  188. <view class="settlementAgreement" v-if="showAgreement">
  189. <view class="setAgCount">
  190. <i class="icon iconfont icon-cha" @click="showAgreement = false"></i>
  191. <div class="title">用户协议与隐私政策</div>
  192. <view class="content">
  193. <jyf-parser :html="agreement" ref="article" :tag-style="tagStyle"></jyf-parser>
  194. </view>
  195. </view>
  196. </view>
  197. </div>
  198. <form report-submit='true' v-if="auth_token">
  199. <view class="ChangePassword">
  200. <view class="list">
  201. <view class="item">
  202. <input type='number' placeholder='填写手机号码' placeholder-class='placeholder'
  203. v-model="account"></input>
  204. </view>
  205. <view class="item acea-row row-between-wrapper">
  206. <input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput"
  207. v-model="captcha"></input>
  208. <button class="code" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
  209. {{ text }}
  210. </button>
  211. </view>
  212. <view class="item">
  213. <input type='password' placeholder='填写登录密码' placeholder-class='placeholder'
  214. v-model="password"></input>
  215. </view>
  216. <view class="protocol acea-row row-between-wrapper">
  217. <checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
  218. <checkbox class="checkbox" :checked="isAgree ? true : false" />
  219. <text class="protocol_text">我已同意<text @click="userAgree"
  220. class="font_pro">《用户协议》</text>与<text @click="userPrivacyAgree"
  221. class="font_pro">《隐私政策》</text></text>
  222. </checkbox-group>
  223. </view>
  224. </view>
  225. <button form-type="submit" @click="register" class="confirmBnt">确认绑定</button>
  226. <button form-type="submit" @click="auth_token = ''" class="confirmBnt back">返回</button>
  227. </view>
  228. </form>
  229. </div>
  230. </template>
  231. <script>
  232. // +----------------------------------------------------------------------
  233. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  234. // +----------------------------------------------------------------------
  235. // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  236. // +----------------------------------------------------------------------
  237. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  238. // +----------------------------------------------------------------------
  239. // | Author: CRMEB Team <admin@crmeb.com>
  240. // +----------------------------------------------------------------------
  241. import dayjs from "@/plugin/dayjs/dayjs.min.js";
  242. import sendVerifyCode from "@/mixins/SendVerifyCode";
  243. import {
  244. loginH5,
  245. loginMobile,
  246. registerVerify,
  247. register,
  248. getCodeApi,
  249. getUserInfo,
  250. getCaptcha,
  251. getAgreementApi,
  252. appleLogin,
  253. loginMpPhone
  254. } from "@/api/user";
  255. // #ifdef APP-PLUS
  256. import {
  257. wechatAppAuth,
  258. appleAppAuth
  259. } from '@/api/api.js'
  260. // #endif
  261. import attrs, {
  262. required,
  263. alpha_num,
  264. chs_phone
  265. } from "@/utils/validate";
  266. import {
  267. validatorDefaultCatch
  268. } from "@/utils/dialog";
  269. import {
  270. getLogo,
  271. getconfig
  272. } from "@/api/public";
  273. // import cookie from "@/utils/store/cookie";
  274. import {
  275. VUE_APP_API_URL,
  276. configMap
  277. } from "@/utils";
  278. import parser from "@/components/jyf-parser/jyf-parser";
  279. import {
  280. commonAuth
  281. } from '@/api/public';
  282. import {
  283. mapGetters
  284. } from "vuex";
  285. const BACK_URL = "login_back_url";
  286. export default {
  287. name: "Login",
  288. mixins: [sendVerifyCode],
  289. components: {
  290. "jyf-parser": parser
  291. },
  292. data: function() {
  293. return {
  294. spread: '',
  295. navList: ["账号登录", "快速登录"],
  296. current: 0,
  297. account: "",
  298. password: "",
  299. captcha: "",
  300. formItem: 2,
  301. type: "login",
  302. keyCode: "",
  303. codeUrl: "",
  304. codeVal: "",
  305. isShowCode: false,
  306. showAgreement: false,
  307. tagStyle: {
  308. img: 'width:100%;display:block;'
  309. },
  310. isAgree: false,
  311. agreement: '',
  312. appLoginStatus: false, // 微信登录强制绑定手机号码状态
  313. appUserInfo: null, // 微信登录保存的用户信息
  314. appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
  315. appleUserInfo: null,
  316. appleShow: false, // 苹果登录版本必须要求ios13以上的
  317. keyLock: true,
  318. auth_token: '',
  319. codeVal: ''
  320. };
  321. },
  322. computed: configMap(['login_logo'], mapGetters(['viewColor'])),
  323. watch: {
  324. formItem: function(nval, oVal) {
  325. if (nval == 1) {
  326. this.type = 'login'
  327. } else {
  328. this.type = 'register'
  329. }
  330. }
  331. },
  332. onLoad(opt) {
  333. if (opt.spread) {
  334. this.spread = opt.spread
  335. }
  336. let self = this
  337. uni.getSystemInfo({
  338. success: function(res) {
  339. if (res.platform.toLowerCase() == 'ios' && self.getSystem(res.system) >= 13) {
  340. self.appleShow = true
  341. }
  342. }
  343. });
  344. },
  345. mounted: function() {
  346. },
  347. onReady() {
  348. let that = this
  349. // #ifdef MP
  350. wx.login({
  351. success(res) {
  352. if (res.code) {
  353. that.codeVal = res.code
  354. } else {
  355. console.log('登录失败!' + res.errMsg)
  356. }
  357. }
  358. })
  359. // #endif
  360. },
  361. methods: {
  362. goDown() {
  363. uni.navigateTo({
  364. url: '/pages/index/down'
  365. })
  366. },
  367. // #ifdef MP
  368. getPhoneNumber(e) {
  369. let that = this;
  370. loginMpPhone({
  371. iv: e.detail.iv,
  372. encryptedData: e.detail.encryptedData,
  373. code: that.codeVal,
  374. auth_token: uni.getStorageSync('auth_token'),
  375. }).then(({
  376. data
  377. }) => {
  378. const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  379. that.$Cache.clear(BACK_URL);
  380. that.$store.commit("LOGIN", {
  381. 'token': data.token,
  382. 'time': data.exp
  383. });
  384. that.$store.commit("SETUID", data.user.uid);
  385. that.$store.commit('UPDATE_USERINFO', data.user);
  386. let method
  387. let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
  388. '/pages/goods_cate/goods_cate',
  389. '/pages/user/index', '/pages/plant_grass/index'
  390. ]
  391. if (indexPat.includes(this.getPath(backUrl))) {
  392. method = 'switchTab'
  393. } else {
  394. method = 'navigateTo'
  395. }
  396. if (this.getPath(backUrl) === '/pages/users/login/index') {
  397. uni.switchTab({
  398. url: '/pages/index/index'
  399. });
  400. return
  401. }
  402. uni[method]({
  403. url: backUrl
  404. });
  405. })
  406. .catch(res => {
  407. that.$util.Tips({
  408. title: res
  409. });
  410. });
  411. },
  412. // #endif
  413. userAgree() {
  414. uni.navigateTo({
  415. url: '/pages/users/user_about/index?from=sys_user_agree'
  416. })
  417. },
  418. userPrivacyAgree() {
  419. uni.navigateTo({
  420. url: '/pages/users/user_about/index?from=sys_userr_privacy'
  421. })
  422. },
  423. getSystem(system) {
  424. if (system.indexOf('iOS') === -1) {
  425. return system
  426. } else {
  427. let str = system.split(' ')[1]
  428. if (str.indexOf('.')) {
  429. return Number(str.split('.')[0])
  430. } else {
  431. return Number(str)
  432. }
  433. }
  434. },
  435. // 苹果登录
  436. appleLogin() {
  437. let self = this
  438. this.account = ''
  439. this.captcha = ''
  440. uni.showLoading({
  441. title: '登录中'
  442. })
  443. uni.login({
  444. provider: 'apple',
  445. timeout: 10000,
  446. success(loginRes) {
  447. uni.getUserInfo({
  448. provider: 'apple',
  449. success: function(infoRes) {
  450. self.appleUserInfo = infoRes.userInfo
  451. self.appleLoginApi()
  452. },
  453. fail() {
  454. uni.showToast({
  455. title: '获取用户信息失败',
  456. icon: 'none',
  457. duration: 2000
  458. })
  459. },
  460. complete() {
  461. uni.hideLoading()
  462. }
  463. });
  464. },
  465. fail(error) {
  466. uni.showToast({
  467. title: '获取用户信息失败',
  468. icon: 'none',
  469. duration: 2000
  470. })
  471. console.log(error)
  472. }
  473. })
  474. },
  475. appleLoginApi() {
  476. let that = this
  477. commonAuth({
  478. auth: {
  479. type: 'apple',
  480. auth: {
  481. userInfo: that.appleUserInfo,
  482. openId: that.appleUserInfo.openId,
  483. nickname: (that.appleUserInfo.fullName.familyName || '') + (that.appleUserInfo.fullName
  484. .giveName || ''),
  485. }
  486. }
  487. }).then(res => {
  488. const data = res.data;
  489. if (res.data.status == 200) {
  490. const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  491. that.$Cache.clear(BACK_URL);
  492. that.$store.commit("LOGIN", {
  493. 'token': data.result.token,
  494. 'time': data.result.exp
  495. });
  496. that.$store.commit("SETUID", data.result.user.uid);
  497. that.$store.commit('UPDATE_USERINFO', data.result.user);
  498. let method
  499. let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
  500. '/pages/goods_cate/goods_cate',
  501. '/pages/user/index', '/pages/plant_grass/index'
  502. ]
  503. if (indexPat.includes(this.getPath(backUrl))) {
  504. method = 'switchTab'
  505. } else {
  506. method = 'navigateTo'
  507. }
  508. if (this.getPath(backUrl) === '/pages/users/login/index') {
  509. uni.switchTab({
  510. url: '/pages/index/index'
  511. });
  512. return
  513. }
  514. uni[method]({
  515. url: backUrl
  516. });
  517. } else {
  518. uni.hideLoading();
  519. that.auth_token = res.data.result.key;
  520. }
  521. }).catch(res => {
  522. uni.hideLoading();
  523. uni.showToast({
  524. title: res.message || res,
  525. icon: 'none',
  526. duration: 2000
  527. });
  528. });
  529. },
  530. // App微信登录
  531. wxLogin() {
  532. let self = this
  533. this.account = ''
  534. this.captcha = ''
  535. uni.showLoading({
  536. title: '登录中'
  537. })
  538. uni.login({
  539. provider: 'weixin',
  540. // onlyAuthorize: true,
  541. success: function(loginRes) {
  542. self.appUserInfo = loginRes
  543. self.wxLoginApi()
  544. },
  545. fail(error) {
  546. uni.showToast({
  547. title: '登录失败',
  548. icon: 'none',
  549. duration: 2000
  550. })
  551. }
  552. });
  553. },
  554. getPath(url) {
  555. if (url.indexOf("?") != -1) {
  556. url = url.split("?")[0];
  557. console.log(url);
  558. }
  559. return url
  560. },
  561. wxLoginApi() {
  562. const that = this
  563. commonAuth({
  564. auth: {
  565. type: 'app_wechat',
  566. auth: {
  567. code: that.appUserInfo.authResult.access_token,
  568. openid: that.appUserInfo.authResult.openid,
  569. phone: this.account,
  570. }
  571. }
  572. }).then(res => {
  573. const data = res.data;
  574. if (res.data.status == 200) {
  575. const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  576. that.$Cache.clear(BACK_URL);
  577. that.$store.commit("LOGIN", {
  578. 'token': data.result.token,
  579. 'time': data.result.exp
  580. });
  581. that.$store.commit("SETUID", data.result.user.uid);
  582. that.$store.commit('UPDATE_USERINFO', data.result.user);
  583. let method
  584. let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
  585. '/pages/goods_cate/goods_cate',
  586. '/pages/user/index', '/pages/plant_grass/index'
  587. ]
  588. if (indexPat.includes(this.getPath(backUrl))) {
  589. method = 'switchTab'
  590. } else {
  591. method = 'navigateTo'
  592. }
  593. if (this.getPath(backUrl) === '/pages/users/login/index') {
  594. uni.switchTab({
  595. url: '/pages/index/index'
  596. });
  597. return
  598. }
  599. uni[method]({
  600. url: backUrl
  601. });
  602. } else {
  603. that.auth_token = res.data.result.key;
  604. that.bindStatus = true;
  605. }
  606. uni.hideLoading();
  607. }).catch(res => {
  608. uni.hideLoading();
  609. uni.showToast({
  610. title: res.message || res,
  611. icon: 'none',
  612. duration: 2000
  613. });
  614. });
  615. },
  616. getAgreement() {
  617. let that = this
  618. getAgreementApi('sys_user_agree').then(res => {
  619. that.agreement = res.data.sys_user_agree
  620. })
  621. },
  622. getCode() {
  623. let that = this
  624. getCodeApi()
  625. .then(res => {
  626. that.keyCode = res.data.key;
  627. })
  628. .catch(res => {
  629. that.$util.Tips({
  630. title: res
  631. });
  632. });
  633. },
  634. async loginMobile() {
  635. let that = this;
  636. if (!that.account) return that.$util.Tips({
  637. title: '请输入手机号码'
  638. });
  639. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  640. title: '请输入正确的手机号码'
  641. });
  642. if (!that.captcha) return that.$util.Tips({
  643. title: '请输入验证码'
  644. });
  645. if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
  646. title: '请输入正确的验证码'
  647. });
  648. if (!that.isAgree) return that.$util.Tips({
  649. title: '请勾选用户协议与隐私政策'
  650. });
  651. loginMobile({
  652. auth_token: uni.getStorageSync('auth_token'),
  653. phone: that.account,
  654. sms_code: that.captcha,
  655. spread: that.$Cache.get("spread"),
  656. // #ifdef APP-PLUS
  657. user_type: 'app',
  658. // #endif
  659. // #ifdef H5
  660. user_type: 'h5',
  661. // #endif
  662. })
  663. .then(({
  664. data
  665. }) => {
  666. const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  667. that.$Cache.clear(BACK_URL);
  668. that.$store.commit("LOGIN", {
  669. 'token': data.token,
  670. 'time': data.exp
  671. });
  672. that.$store.commit("SETUID", data.user.uid);
  673. that.$store.commit('UPDATE_USERINFO', data.user);
  674. let method
  675. let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
  676. '/pages/goods_cate/goods_cate',
  677. '/pages/user/index'
  678. ]
  679. if (indexPat.includes(this.getPath(backUrl))) {
  680. method = 'switchTab'
  681. } else {
  682. method = 'navigateTo'
  683. }
  684. if (this.getPath(backUrl) === '/pages/users/login/index') {
  685. uni.switchTab({
  686. url: '/pages/index/index'
  687. });
  688. return
  689. }
  690. uni[method]({
  691. url: backUrl
  692. });
  693. })
  694. .catch(res => {
  695. that.$util.Tips({
  696. title: res
  697. });
  698. });
  699. },
  700. async register() {
  701. let that = this;
  702. if (!that.account) return that.$util.Tips({
  703. title: '请输入手机号码'
  704. });
  705. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  706. title: '请输入正确的手机号码'
  707. });
  708. if (!that.captcha) return that.$util.Tips({
  709. title: '请输入验证码'
  710. });
  711. if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
  712. title: '请输入正确的验证码'
  713. });
  714. if (!that.password) return that.$util.Tips({
  715. title: '请输入密码'
  716. });
  717. // if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({
  718. // title: '请输入6-16位字母加数字组合'
  719. // });
  720. if (!that.isAgree) return that.$util.Tips({
  721. title: '请勾选用户协议与隐私政策'
  722. });
  723. register({
  724. auth_token: this.auth_token || uni.getStorageSync('auth_token'),
  725. phone: that.account,
  726. sms_code: that.captcha,
  727. pwd: that.password,
  728. spread: that.spread,
  729. // #ifdef APP-PLUS
  730. user_type: 'app',
  731. // #endif
  732. // #ifdef H5
  733. user_type: 'h5',
  734. // #endif
  735. })
  736. .then(res => {
  737. // const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  738. // that.$Cache.clear(BACK_URL);
  739. // that.$store.commit("LOGIN", {
  740. // 'token': res.data.token,
  741. // 'time': res.data.exp
  742. // });
  743. // that.$store.commit("SETUID", res.data.user.uid);
  744. // that.$store.commit('UPDATE_USERINFO', res.data.user);
  745. that.$util.Tips({
  746. title: "注册成功"
  747. });
  748. })
  749. .catch(res => {
  750. that.$util.Tips({
  751. title: res
  752. });
  753. });
  754. },
  755. async code() {
  756. let that = this;
  757. if (!that.account) return that.$util.Tips({
  758. title: '请输入手机号码'
  759. });
  760. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  761. title: '请输入正确的手机号码'
  762. });
  763. // if (that.formItem == 2) that.type = "register";
  764. await registerVerify({
  765. phone: that.account,
  766. type: 'login',
  767. key: that.keyCode,
  768. code: that.codeVal
  769. })
  770. .then(res => {
  771. that.$util.Tips({
  772. title: res.message
  773. });
  774. that.sendCode();
  775. })
  776. .catch(res => {
  777. that.getcaptcha();
  778. that.$util.Tips({
  779. title: res
  780. });
  781. });
  782. },
  783. getcaptcha() {
  784. let that = this
  785. getCaptcha().then(data => {
  786. // that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
  787. that.codeUrl = data.data.captcha;
  788. })
  789. that.isShowCode = true;
  790. },
  791. navTap: function(index) {
  792. this.current = index;
  793. },
  794. getPath(url) {
  795. if (url.indexOf("?") != -1) {
  796. url = url.split("?")[0];
  797. }
  798. return url
  799. },
  800. async submit() {
  801. let that = this;
  802. if (!that.account) return that.$util.Tips({
  803. title: '请输入账号'
  804. });
  805. if (!/^[\w\d]{5,16}$/i.test(that.account)) return that.$util.Tips({
  806. title: '请输入正确的账号'
  807. });
  808. if (!that.password) return that.$util.Tips({
  809. title: '请输入密码'
  810. });
  811. if (!that.isAgree) return that.$util.Tips({
  812. title: '请勾选用户协议与隐私政策'
  813. });
  814. loginH5({
  815. auth_token: uni.getStorageSync('auth_token'),
  816. account: that.account,
  817. password: that.password,
  818. spread: that.$Cache.get("spread")
  819. })
  820. .then(({
  821. data
  822. }) => {
  823. const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
  824. that.$Cache.clear(BACK_URL);
  825. that.$store.commit("LOGIN", {
  826. 'token': data.token,
  827. 'time': data.exp
  828. });
  829. that.$store.commit("SETUID", data.user.uid);
  830. that.$store.commit('UPDATE_USERINFO', data.user);
  831. let method
  832. let indexPat = ['/pages/index/index', '/pages/order_addcart/order_addcart',
  833. '/pages/goods_cate/goods_cate',
  834. '/pages/user/index'
  835. ]
  836. if (indexPat.includes(this.getPath(backUrl))) {
  837. method = 'switchTab'
  838. } else {
  839. method = 'navigateTo'
  840. }
  841. if (this.getPath(backUrl) === '/pages/users/login/index') {
  842. uni.switchTab({
  843. url: '/pages/index/index'
  844. });
  845. return
  846. }
  847. uni[method]({
  848. url: backUrl
  849. });
  850. })
  851. .catch(e => {
  852. that.$util.Tips({
  853. title: e
  854. });
  855. });
  856. }
  857. }
  858. };
  859. </script>
  860. <style lang="scss">
  861. page {
  862. background-color: #fff !important;
  863. }
  864. /deep/uni-checkbox .uni-checkbox-input {
  865. border-radius: 100%;
  866. }
  867. .ChangePassword .phone {
  868. font-size: 32rpx;
  869. font-weight: bold;
  870. text-align: center;
  871. margin-top: 55rpx;
  872. }
  873. .ChangePassword .list {
  874. width: 580rpx;
  875. margin: 53rpx auto 0 auto;
  876. }
  877. .ChangePassword .list .item {
  878. width: 100%;
  879. height: 110rpx;
  880. border-bottom: 2rpx solid #f0f0f0;
  881. }
  882. .ChangePassword .list .item input {
  883. width: 100%;
  884. height: 100%;
  885. font-size: 32rpx;
  886. }
  887. .ChangePassword .list .item .placeholder {
  888. color: #b9b9bc;
  889. }
  890. .ChangePassword .list .item input.codeIput {
  891. width: 240rpx;
  892. }
  893. /deep/.uni-input-wrapper,
  894. /deep/.uni-input-input {
  895. // width: 240rpx;
  896. }
  897. .ChangePassword .list .item .code {
  898. font-size: 32rpx;
  899. background-color: #fff;
  900. color: var(--view-theme);
  901. }
  902. .ChangePassword .list .item .code.on {
  903. color: #b9b9bc;
  904. }
  905. .ChangePassword .confirmBnt {
  906. font-size: 32rpx;
  907. width: 580rpx;
  908. height: 90rpx;
  909. border-radius: 45rpx;
  910. color: #fff;
  911. margin: 92rpx auto 0 auto;
  912. text-align: center;
  913. line-height: 90rpx;
  914. background-color: var(--view-theme);
  915. }
  916. .ChangePassword .confirmBnt.back {
  917. background-color: #FFFFFF;
  918. border: 1px solid var(--view-theme);
  919. color: var(--view-theme);
  920. margin-top: 30rpx;
  921. }
  922. .getPhoneBtn {
  923. font-size: 32rpx;
  924. width: 580rpx;
  925. height: 90rpx;
  926. border-radius: 45rpx;
  927. border: 1rpx solid #3CB625;
  928. color: #3CB625;
  929. margin: 40rpx auto 0 auto;
  930. text-align: center;
  931. line-height: 90rpx;
  932. .iconfont {
  933. font-size: 32rpx;
  934. margin-right: 12rpx;
  935. }
  936. }
  937. .code image {
  938. width: 100%;
  939. height: 100%;
  940. }
  941. .acea-row.row-middle {
  942. input {
  943. margin-left: 20rpx;
  944. }
  945. }
  946. .settlementAgreement {
  947. width: 100%;
  948. height: 100%;
  949. position: fixed;
  950. top: 0;
  951. left: 0;
  952. background: rgba(0, 0, 0, .5);
  953. z-index: 10;
  954. }
  955. .protocol_text {
  956. color: #999;
  957. font-size: 24rpx;
  958. }
  959. .settlementAgreement .setAgCount {
  960. background: #fff;
  961. width: 656rpx;
  962. height: 458px;
  963. position: absolute;
  964. top: 50%;
  965. left: 50%;
  966. border-radius: 12rpx;
  967. -webkit-border-radius: 12rpx;
  968. padding: 52rpx;
  969. -webkit-transform: translate(-50%, -50%);
  970. -moz-transform: translate(-50%, -50%);
  971. transform: translate(-50%, -50%);
  972. overflow: hidden;
  973. .content {
  974. height: 900rpx;
  975. overflow-y: scroll;
  976. /deep/ p {
  977. font-size: 13px;
  978. line-height: 22px;
  979. }
  980. /deep/ img {
  981. max-width: 100%;
  982. }
  983. }
  984. }
  985. .settlementAgreement .setAgCount .icon {
  986. font-size: 42rpx;
  987. color: #b4b1b4;
  988. position: absolute;
  989. top: 15rpx;
  990. right: 15rpx;
  991. }
  992. .settlementAgreement .setAgCount .title {
  993. color: #333;
  994. font-size: 32rpx;
  995. text-align: center;
  996. font-weight: bold;
  997. }
  998. .settlementAgreement .setAgCount .content {
  999. margin-top: 32rpx;
  1000. color: #333;
  1001. font-size: 26rpx;
  1002. line-height: 22px;
  1003. text-align: justify;
  1004. text-justify: distribute-all-lines;
  1005. height: 756rpx;
  1006. overflow-y: scroll;
  1007. }
  1008. .protocol {
  1009. margin-top: 30rpx;
  1010. }
  1011. .protocol_text {
  1012. .font_pro {
  1013. color: var(--view-theme);
  1014. }
  1015. }
  1016. .appLogin {
  1017. .hds {
  1018. display: flex;
  1019. justify-content: center;
  1020. align-items: center;
  1021. font-size: 24rpx;
  1022. color: #B4B4B4;
  1023. .line {
  1024. width: 68rpx;
  1025. height: 1rpx;
  1026. background: #CCCCCC;
  1027. }
  1028. p {
  1029. margin: 0 20rpx;
  1030. }
  1031. }
  1032. .btn-wrapper {
  1033. display: flex;
  1034. align-items: center;
  1035. justify-content: center;
  1036. margin-top: 30rpx;
  1037. .btn {
  1038. display: flex;
  1039. align-items: center;
  1040. justify-content: center;
  1041. width: 68rpx;
  1042. height: 68rpx;
  1043. border-radius: 50%;
  1044. }
  1045. .apple-btn {
  1046. display: flex;
  1047. align-items: center;
  1048. justify-content: center;
  1049. width: 246rpx;
  1050. height: 66rpx;
  1051. margin-left: 10rpx;
  1052. background: #EAEAEA;
  1053. border-radius: 34rpx;
  1054. font-size: 24rpx;
  1055. .icon-s-pingguo {
  1056. color: #333;
  1057. margin-right: 10rpx;
  1058. font-size: 34rpx;
  1059. }
  1060. }
  1061. .iconfont {
  1062. font-size: 40rpx;
  1063. color: #fff;
  1064. }
  1065. .wx {
  1066. margin-right: 30rpx;
  1067. background-color: #61C64F;
  1068. &.btn-apple {
  1069. margin-right: 0;
  1070. background-color: #333;
  1071. }
  1072. }
  1073. .mima {
  1074. background-color: #28B3E9;
  1075. }
  1076. .yanzheng {
  1077. background-color: #F89C23;
  1078. }
  1079. }
  1080. }
  1081. .code img {
  1082. width: 100%;
  1083. height: 100%;
  1084. }
  1085. .acea-row.row-middle {
  1086. input {
  1087. margin-left: 20rpx;
  1088. display: block;
  1089. }
  1090. }
  1091. .login-wrapper {
  1092. padding: 30rpx;
  1093. .shading {
  1094. display: flex;
  1095. align-items: center;
  1096. justify-content: center;
  1097. width: 100%;
  1098. /* #ifdef APP-VUE */
  1099. margin-top: 50rpx;
  1100. /* #endif */
  1101. /* #ifndef APP-VUE */
  1102. margin-top: 200rpx;
  1103. /* #endif */
  1104. image {
  1105. width: 180rpx;
  1106. height: 180rpx;
  1107. }
  1108. }
  1109. .whiteBg {
  1110. margin-top: 100rpx;
  1111. .list {
  1112. border-radius: 16rpx;
  1113. overflow: hidden;
  1114. .item {
  1115. border-bottom: 1px solid #F0F0F0;
  1116. background: #fff;
  1117. .row-middle {
  1118. position: relative;
  1119. padding: 16rpx 45rpx;
  1120. input {
  1121. flex: 1;
  1122. font-size: 28rpx;
  1123. height: 80rpx;
  1124. }
  1125. .code {
  1126. color: #E93323;
  1127. font-size: 26rpx;
  1128. transform: translateY(-50%);
  1129. }
  1130. }
  1131. }
  1132. }
  1133. .logon {
  1134. display: flex;
  1135. align-items: center;
  1136. justify-content: center;
  1137. width: 100%;
  1138. height: 86rpx;
  1139. margin-top: 80rpx;
  1140. background-color: $theme-color;
  1141. border-radius: 120rpx;
  1142. color: #FFFFFF;
  1143. font-size: 30rpx;
  1144. }
  1145. .tips {
  1146. margin: 30rpx;
  1147. text-align: center;
  1148. color: #999;
  1149. }
  1150. }
  1151. }
  1152. </style>