index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. <template>
  2. <view class="wrapper" :style="colorStyle">
  3. <view class="bag"></view>
  4. <view class="system-height" :style="{ height: statusBarHeight }"></view>
  5. <!-- #ifdef MP -->
  6. <view class="title-bar" style="height: 43px;">
  7. <view class="icon" @click="back" v-if="!isHome">
  8. <image src="../static/left.png"></image>
  9. </view>
  10. <view class="icon" @click="home" v-else>
  11. <image src="../static/home.png"></image>
  12. </view>
  13. {{$t(pageTitle)}}
  14. </view>
  15. <!-- #endif -->
  16. <view class="page-msg">
  17. <view class="title">
  18. {{pageType == 1?$t('绑定手机号'):$t('手机号登录')}}
  19. </view>
  20. <view class="tip">
  21. {{pageType == 1?$t('登录注册需绑定手机号'):$t('首次登录会自动注册')}}
  22. </view>
  23. </view>
  24. <view class="page-form">
  25. <view class="item">
  26. <input type='number' :placeholder='$t(`填写手机号码`)' placeholder-class='placeholder' v-model="phone"
  27. :maxlength="11"></input>
  28. </view>
  29. <view class="item acea-row row-between-wrapper">
  30. <input type='number' :placeholder='$t(`填写验证码`)' placeholder-class='placeholder' :maxlength="6"
  31. class="codeIput" v-model="captcha"></input>
  32. <view class="line">
  33. </view>
  34. <button class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
  35. {{ text }}
  36. </button>
  37. </view>
  38. <view class="btn" @click="submitData">
  39. {{$t(`${pageType == 1 ? '绑定手机号' : '立即登录'}`)}}
  40. </view>
  41. </view>
  42. <view class="protocol" v-if="pageType == 0 && !canGetPrivacySetting">
  43. <checkbox-group @click.stop='ChangeIsDefault'>
  44. <checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
  45. :checked="protocol ? true : false" /> <text @click.stop='ChangeIsDefault'>{{$t(`已阅读并同意`)}}</text>
  46. <text class="main-color" @click.stop="privacy(4)">{{$t(`《用户协议》`)}}</text>
  47. {{$t(`与`)}}<text class="main-color" @click.stop="privacy(3)">{{$t(`《隐私协议》`)}}</text>
  48. </checkbox-group>
  49. </view>
  50. <Verify @success="success" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }"
  51. ref="verify"></Verify>
  52. <editUserModal :isShow="isShow" @closeEdit="closeEdit" @editSuccess="editSuccess">
  53. </editUserModal>
  54. <!-- #ifdef MP -->
  55. <privacyAgreementPopup v-if="canGetPrivacySetting" @onReject="onReject" @onAgree="onAgree">
  56. </privacyAgreementPopup>
  57. <!-- #endif -->
  58. </view>
  59. </template>
  60. <script>
  61. const app = getApp();
  62. let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  63. import sendVerifyCode from "@/mixins/SendVerifyCode";
  64. import colors from '@/mixins/color.js';
  65. import editUserModal from '@/components/eidtUserModal/index.vue'
  66. import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue'
  67. import {
  68. bindingUserPhone,
  69. verifyCode,
  70. registerVerify,
  71. updatePhone
  72. } from '@/api/api.js';
  73. import {
  74. loginMobile,
  75. getCodeApi,
  76. getUserInfo,
  77. phoneSilenceAuth
  78. } from "@/api/user.js";
  79. import {
  80. phoneLogin,
  81. wechatBindingPhone
  82. } from '@/api/public.js'
  83. import Routine from '@/libs/routine';
  84. import Verify from '../components/verify/index.vue';
  85. import Cache from '@/utils/cache';
  86. export default {
  87. mixins: [sendVerifyCode, colors],
  88. components: {
  89. Verify,
  90. editUserModal,
  91. privacyAgreementPopup
  92. },
  93. data() {
  94. return {
  95. statusBarHeight: statusBarHeight,
  96. pageType: 1, // 0 登录 1 绑定手机
  97. phone: '',
  98. captcha: '',
  99. text: '获取验证码',
  100. isShow: false,
  101. protocol: false,
  102. inAnimation: false,
  103. authKey: "",
  104. backUrl: "",
  105. pageTitle: '绑定手机号',
  106. configData: Cache.get('BASIC_CONFIG'),
  107. canGetPrivacySetting: false,
  108. }
  109. },
  110. onLoad(options) {
  111. if (options.authKey) {
  112. this.authKey = options.authKey
  113. }
  114. // #ifdef MP
  115. if (wx.getPrivacySetting) {
  116. this.canGetPrivacySetting = true
  117. }
  118. // #endif
  119. this.backUrl = options.backUrl || ''
  120. if (options.pageType) {
  121. this.pageType = options.pageType || 1
  122. this.pageTitle = options.pageType == 1 ? '绑定手机号' : '手机号登录'
  123. }
  124. let pages = getCurrentPages();
  125. let prePage = pages[pages.length - 2];
  126. if (prePage && prePage.route == 'pages/order_addcart/order_addcart') {
  127. this.isHome = true;
  128. } else {
  129. this.isHome = false;
  130. }
  131. },
  132. methods: {
  133. onAgree() {
  134. this.protocol = true
  135. },
  136. submitData() {
  137. let that = this;
  138. if (this.pageType == 0) {
  139. this.isLogin()
  140. return
  141. }
  142. if (!this.rules()) return
  143. if (!this.authKey) {
  144. let key = this.$Cache.get('snsapiKey');
  145. this.phoneAuth(key)
  146. } else {
  147. this.phoneAuth(this.authKey)
  148. }
  149. },
  150. rules() {
  151. let that = this;
  152. if (!this.protocol && this.pageType == 0) {
  153. uni.showToast({
  154. title: this.$t('请先阅读并同意协议'),
  155. icon: 'none',
  156. duration: 2000
  157. });
  158. return false
  159. }
  160. if (!that.phone) {
  161. that.$util.Tips({
  162. title: that.$t(`请填写手机号码`)
  163. });
  164. return false
  165. }
  166. if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) {
  167. that.$util.Tips({
  168. title: that.$t(`请输入正确的手机号码`)
  169. });
  170. return false
  171. }
  172. if (!that.captcha) {
  173. return that.$util.Tips({
  174. title: that.$t(`请填写验证码`)
  175. });
  176. return false
  177. }
  178. return true
  179. },
  180. isLogin() {
  181. if (!this.rules()) return
  182. uni.showLoading({
  183. title: this.$t(`正在登录中`)
  184. });
  185. Routine.getCode()
  186. .then(code => {
  187. phoneLogin({
  188. code,
  189. spread_spid: app.globalData.spid,
  190. spread_code: app.globalData.code,
  191. phone: this.phone,
  192. captcha: this.captcha,
  193. }).then(res => {
  194. uni.hideLoading();
  195. let time = res.data.expires_time - this.$Cache.time();
  196. this.$store.commit('LOGIN', {
  197. token: res.data.token,
  198. time: time
  199. });
  200. this.getUserInfo(res.data.bindName);
  201. })
  202. .catch(err => {
  203. uni.hideLoading();
  204. uni.showToast({
  205. title: err,
  206. icon: 'none',
  207. duration: 2000
  208. });
  209. });
  210. })
  211. .catch(err => {
  212. console.log(err)
  213. });
  214. },
  215. phoneAuth(key) {
  216. uni.showLoading({
  217. title: this.$t(`正在登录中`)
  218. });
  219. let met
  220. // #ifdef MP
  221. met = phoneLogin
  222. // #endif
  223. // #ifndef MP
  224. met = wechatBindingPhone
  225. // #endif
  226. met({
  227. phone: this.phone,
  228. captcha: this.captcha,
  229. key
  230. }).then(res => {
  231. let time = res.data.expires_time - this.$Cache.time();
  232. this.$store.commit('LOGIN', {
  233. token: res.data.token,
  234. time: time
  235. });
  236. this.getUserInfo(res.data.bindName);
  237. }).catch(error => {
  238. uni.hideLoading()
  239. this.$util.Tips({
  240. title: error
  241. })
  242. })
  243. },
  244. /**
  245. * 获取个人用户信息
  246. */
  247. getUserInfo(new_user) {
  248. let that = this;
  249. getUserInfo().then(res => {
  250. uni.hideLoading();
  251. that.userInfo = res.data;
  252. that.$store.commit('SETUID', res.data.uid);
  253. that.$store.commit('UPDATE_USERINFO', res.data);
  254. if (new_user) {
  255. this.isShow = true
  256. } else {
  257. // #ifdef MP
  258. that.$util.Tips({
  259. title: that.$t(`登录成功`),
  260. icon: 'success'
  261. }, {
  262. tab: 3,
  263. url: this.configData.wechat_auth_switch ? 2 : 1
  264. });
  265. // #endif
  266. // #ifndef MP
  267. that.$util.Tips({
  268. title: that.$t(`登录成功`),
  269. icon: 'success'
  270. }, {
  271. tab: 4,
  272. url: this.backUrl || 'pages/user/index'
  273. });
  274. // #endif
  275. }
  276. });
  277. },
  278. success(data) {
  279. this.$refs.verify.hide()
  280. let that = this;
  281. verifyCode().then(res => {
  282. registerVerify(that.phone, 'reset', res.data.key, this.captchaType, data.captchaVerification)
  283. .then(res => {
  284. that.$util.Tips({
  285. title: res.msg
  286. });
  287. that.sendCode();
  288. }).catch(err => {
  289. return that.$util.Tips({
  290. title: err
  291. });
  292. });
  293. });
  294. },
  295. /**
  296. * 发送验证码
  297. *
  298. */
  299. async code() {
  300. let that = this;
  301. if (!that.phone) return that.$util.Tips({
  302. title: that.$t(`请填写手机号码`)
  303. });
  304. if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
  305. title: that.$t(`请输入正确的手机号码`)
  306. });
  307. this.$refs.verify.show();
  308. return;
  309. },
  310. ChangeIsDefault() {
  311. this.$set(this, 'protocol', !this.protocol);
  312. },
  313. closeEdit() {
  314. this.isShow = false
  315. this.$util.Tips({
  316. title: this.$t(`登录成功`),
  317. icon: 'success'
  318. }, {
  319. tab: 3,
  320. url: 2
  321. });
  322. },
  323. editSuccess() {
  324. this.isShow = false
  325. },
  326. back() {
  327. uni.navigateBack({
  328. delta: this.configData.wechat_auth_switch ? 2 : 1
  329. })
  330. },
  331. privacy(type) {
  332. uni.navigateTo({
  333. url: "/pages/users/privacy/index?type=" + type
  334. })
  335. },
  336. }
  337. }
  338. </script>
  339. <style lang="scss" scoped>
  340. .wrapper {
  341. background-color: #fff;
  342. min-height: 100vh;
  343. position: relative;
  344. .bag {
  345. position: absolute;
  346. top: 0;
  347. left: 0;
  348. width: 750rpx;
  349. height: 460rpx;
  350. background: var(--view-linear);
  351. }
  352. .page-msg {
  353. padding-top: 160rpx;
  354. margin-left: 72rpx;
  355. .title {
  356. font-size: 48rpx;
  357. font-weight: 500;
  358. color: #333333;
  359. line-height: 68rpx;
  360. }
  361. .tip {
  362. font-size: 28rpx;
  363. font-weight: 400;
  364. color: #333333;
  365. line-height: 40rpx;
  366. }
  367. }
  368. .page-form {
  369. width: 606rpx;
  370. margin: 100rpx auto 0 auto;
  371. .item {
  372. width: 100%;
  373. height: 88rpx;
  374. background: #F5F5F5;
  375. border-radius: 45rpx;
  376. padding: 24rpx 48rpx;
  377. margin-bottom: 32rpx;
  378. input {
  379. width: 100%;
  380. height: 100%;
  381. font-size: 32rpx;
  382. }
  383. .placeholder {
  384. color: #BBBBBB;
  385. font-size: 28rpx;
  386. }
  387. input.codeIput {
  388. width: 300rpx;
  389. }
  390. .line {
  391. width: 2rpx;
  392. height: 28rpx;
  393. background: #CCCCCC;
  394. }
  395. .code {
  396. font-size: 28rpx;
  397. color: var(--view-theme);
  398. background-color: rgba(255, 255, 255, 0);
  399. }
  400. .code.on {
  401. color: #BBBBBB !important;
  402. }
  403. }
  404. .btn {
  405. width: 606rpx;
  406. height: 88rpx;
  407. background: var(--view-theme);
  408. border-radius: 200rpx 200rpx 200rpx 200rpx;
  409. display: flex;
  410. justify-content: center;
  411. align-items: center;
  412. font-size: 32rpx;
  413. font-family: PingFang SC-Regular, PingFang SC;
  414. font-weight: 400;
  415. color: #FFFFFF;
  416. line-height: 44rpx;
  417. margin-top: 48rpx;
  418. letter-spacing: 1px;
  419. }
  420. }
  421. }
  422. .title-bar {
  423. position: relative;
  424. display: flex;
  425. align-items: center;
  426. justify-content: center;
  427. font-size: 34rpx;
  428. font-weight: 500;
  429. color: #333333;
  430. line-height: 48rpx;
  431. }
  432. .icon {
  433. position: absolute;
  434. left: 30rpx;
  435. top: 0;
  436. display: flex;
  437. align-items: center;
  438. justify-content: center;
  439. width: 80rpx;
  440. height: 80rpx;
  441. image {
  442. width: 35rpx;
  443. height: 35rpx;
  444. }
  445. }
  446. .protocol {
  447. position: fixed;
  448. bottom: 52rpx;
  449. left: 0;
  450. width: 100%;
  451. margin: 0 auto;
  452. color: #999999;
  453. font-size: 24rpx;
  454. line-height: 22rpx;
  455. text-align: center;
  456. bottom: calc(52rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  457. bottom: calc(52rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  458. .main-color {
  459. color: var(--view-theme);
  460. }
  461. .trembling {
  462. animation: shake 0.6s;
  463. }
  464. }
  465. /deep/ uni-checkbox .uni-checkbox-input {
  466. width: 28rpx;
  467. height: 28rpx;
  468. }
  469. /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
  470. font-size: 24rpx;
  471. }
  472. /deep/ uni-checkbox .uni-checkbox-wrapper {
  473. margin-bottom: 1px;
  474. }
  475. /*checkbox 选项框大小 */
  476. /deep/ checkbox .wx-checkbox-input {
  477. width: 28rpx;
  478. height: 28rpx;
  479. }
  480. /*checkbox选中后样式 */
  481. /deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  482. background: white;
  483. }
  484. /*checkbox选中后图标样式 */
  485. /deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  486. width: 28rpx;
  487. height: 28rpx;
  488. line-height: 28rpx;
  489. text-align: center;
  490. font-size: 22rpx;
  491. background: transparent;
  492. transform: translate(-50%, -50%) scale(1);
  493. -webkit-transform: translate(-50%, -50%) scale(1);
  494. }
  495. </style>