index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
  1. <template>
  2. <view>
  3. <!--#ifdef APP-PLUS-->
  4. <view class="lz-status_bar">
  5. <view class="lz-top_view"></view>
  6. </view>
  7. <!--#endif-->
  8. <view class="kaoshi-head" v-if="mode == 3">
  9. <view class="kaoshi-head-top">
  10. <view class="kaoshi-head-left">
  11. <view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
  12. </view>
  13. </view>
  14. <view class="kaoshi-logo">
  15. <image :src="static_media.img01" class="kaoshi-logo-img"></image>
  16. </view>
  17. <view class="kaoshi-login">
  18. <view class="kaoshi-login-content">
  19. <view class="kaoshi-login-title">
  20. <view
  21. :class="{ 'kaoshi-login-title-active': form_type == 0, 'kaoshi-login-title-other': form_type != 0 }"
  22. @tap="form_type = 0">登录
  23. </view>
  24. <view
  25. :class="{ 'kaoshi-login-title-active': form_type == 1, 'kaoshi-login-title-other': form_type != 1 }"
  26. @tap="form_type = 1">注册
  27. </view>
  28. </view>
  29. <view v-if="form_type == 0" class="kaoshi-input-group">
  30. <view class="kaoshi-input-row border kaoshi-login-flex">
  31. <text class="iconfont icon-shouji"></text>
  32. <m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号"
  33. style="flex: 1;"></m-input>
  34. </view>
  35. <view class="kaoshi-input-row kaoshi-login-flex ">
  36. <text class="iconfont icon-suo"></text>
  37. <m-input type="password" displayable v-model="password" placeholder="请输入密码"
  38. style="flex: 1;"></m-input>
  39. </view>
  40. </view>
  41. <view v-if="form_type == 1" class="kaoshi-input-group">
  42. <view class="kaoshi-input-row border kaoshi-login-flex">
  43. <text class="iconfont icon-shouji"></text>
  44. <m-input type="text" clearable v-model="account" placeholder="请输入用户名" style="flex: 1;">
  45. </m-input>
  46. </view>
  47. <view class="kaoshi-input-row kaoshi-login-flex">
  48. <text class="iconfont icon-suo"></text>
  49. <m-input type="password" displayable v-model="password" placeholder="请输入密码"
  50. style="flex: 1;"></m-input>
  51. </view>
  52. </view>
  53. <view class="kaoshi-login-forget">
  54. </view>
  55. <view style="font-size: 14px;color: #888;margin: 40px auto 17px;text-align: center;">暂不登录,<text
  56. style="color: #3b7bf9;" @tap="toMain">随便逛逛</text></view>
  57. <view class="kaoshi-login-button" v-if="form_type == 0">
  58. <button type="primary" class="kaoshi-primary" @tap="bindLogin">登录</button>
  59. </view>
  60. <view class="kaoshi-login-button" v-if="form_type == 1">
  61. <button type="primary" class="kaoshi-primary" @tap="creaet_user">注册</button>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. <view v-else>
  67. <view class="layout">
  68. <view class="kaoshi-logo" style="margin-top: 30px;">
  69. <image :src="static_media.img01" class="kaoshi-logo-img"></image>
  70. </view>
  71. <button style="margin-top: 80px;" v-if="canIUseGetUserProfile" @tap="getUserProfile" class="ydy-button">
  72. 立即登录</button>
  73. <button v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="passive_authorize"
  74. class="ydy-button">立即登录
  75. </button>
  76. <view @tap="cancel" style="font-size:15px;color: #8a8a8a;margin-top:9px;">取消登录</view>
  77. <view class="ydy-b">您需要授权才能正常使用此功能,我们承诺您的信息只应用在本平台,不做其他无关使用。</view>
  78. </view>
  79. </view>
  80. </view>
  81. </template>
  82. <script>
  83. import {
  84. mapState
  85. } from "vuex";
  86. import mInput from "@/components/m-input.vue";
  87. export default {
  88. components: {
  89. mInput,
  90. },
  91. data() {
  92. return {
  93. recommend: '',//邀请人Uid
  94. source: '',//邀请人ABCDE
  95. mode: 1, //程序编译版本:mode:3为账号密码登录
  96. Shouquan: false,
  97. showmodal: false,
  98. account: "",
  99. password: "",
  100. form_type: 0, // 0 登录;1 注册
  101. rawData: {},
  102. canIUseGetUserProfile: false, //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
  103. };
  104. },
  105. computed: {
  106. ...mapState(["userinfo", "forcedLogin", "subject"]),
  107. static_media() {
  108. return {
  109. img01: this.$myConfig.localMedia + '/static/img/login.png'
  110. }
  111. }
  112. },
  113. onLoad(opts) {
  114. this.mode = this.$myConfig.mode
  115. if (opts && opts.form_type) {
  116. this.form_type = opts.form_type
  117. }
  118. if (this.userinfo && this.userinfo.token) {
  119. this.toMain()
  120. }
  121. //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
  122. if (wx.getUserProfile) {
  123. this.canIUseGetUserProfile = true
  124. }
  125. // #ifdef H5
  126. if(opts.recommend) {
  127. this.recommend = opts.recommend
  128. uni.setStorageSync('recommend',opts.recommend)
  129. }else {
  130. this.recommend = uni.getStorageSync('recommend') || ''
  131. }
  132. if(opts.source) {
  133. this.source = opts.source
  134. uni.setStorageSync('source',opts.source)
  135. }else {
  136. this.source = uni.getStorageSync('source') || ''
  137. }
  138. // #endif
  139. // #ifdef MP
  140. this.recommend = uni.getStorageSync('spread_code') || ''
  141. // #endif
  142. },
  143. onShow() {},
  144. methods: {
  145. async creaet_user() {
  146. /**
  147. * 客户端对账号信息进行一些必要的校验。
  148. * 实际开发中,根据业务需要进行处理,这里仅做示例。
  149. */
  150. if (this.account.length < 2) {
  151. uni.showToast({
  152. icon: "none",
  153. title: "账号最短为 2 个字符"
  154. });
  155. return;
  156. }
  157. if (this.password.length < 6) {
  158. uni.showToast({
  159. icon: "none",
  160. title: "密码最短为 6 个字符"
  161. });
  162. return;
  163. }
  164. let res = await this.$myHttp.post({
  165. url: this.$myHttp.urlMap.register,
  166. data: {
  167. username: this.account,
  168. password: this.password,
  169. source: this.source,
  170. recommend: this.recommend
  171. }
  172. });
  173. if (res.code === 1) {
  174. this.$myUtils.$prompt.showToast({
  175. icon: "none",
  176. title: "注册成功"
  177. });
  178. const data = {
  179. account: this.account,
  180. password: this.password
  181. };
  182. const valid = await this.$myUserLogin.login(data);
  183. if (valid) {
  184. //如果已经选择了科目,直接进入首页,否者进入选择科目页面
  185. this.toMain();
  186. }
  187. }
  188. },
  189. async bindLogin() {
  190. /**
  191. * 客户端对账号信息进行一些必要的校验。
  192. * 实际开发中,根据业务需要进行处理,这里仅做示例。
  193. */
  194. if (this.account.length < 2) {
  195. uni.showToast({
  196. icon: "none",
  197. title: "账号最短为 2 个字符"
  198. });
  199. return;
  200. }
  201. if (this.password.length < 6) {
  202. uni.showToast({
  203. icon: "none",
  204. title: "密码最短为 6 个字符"
  205. });
  206. return;
  207. }
  208. const data = {
  209. account: this.account,
  210. password: this.password
  211. };
  212. const valid = await this.$myUserLogin.login(data);
  213. if (valid) {
  214. //如果已经选择了科目,直接进入首页,否者进入选择科目页面
  215. this.toMain();
  216. }else {
  217. }
  218. },
  219. //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
  220. getUserProfile(e) {
  221. let that = this,
  222. code = '';
  223. uni.login({
  224. provider: 'weixin',
  225. success: function(res) {
  226. if (res.errMsg == "login:ok") {
  227. code = res.code
  228. }
  229. }
  230. });
  231. // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
  232. // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
  233. uni.getUserProfile({
  234. desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  235. success: (res) => {
  236. if (res.errMsg == "getUserProfile:ok") {
  237. this.bindGetUserInfo({
  238. code,
  239. ...res
  240. });
  241. }
  242. }
  243. })
  244. },
  245. cancel() {
  246. uni.navigateBack({
  247. delta: 1
  248. })
  249. },
  250. /**
  251. * 被动授权
  252. * */
  253. passive_authorize(params) {
  254. uni.showLoading();
  255. if (params.detail) {
  256. if (params.detail.errMsg == 'getUserInfo:ok') {
  257. this.getLoginCode();
  258. }
  259. }
  260. },
  261. /**
  262. * 获取微信登录code
  263. * */
  264. getLoginCode() {
  265. let that = this;
  266. console.log('根据获取到的用户信息处理业务代码');
  267. //接下来写业务代码
  268. uni.login({
  269. provider: 'weixin',
  270. success: function(res) {
  271. // console.log(res)
  272. if (res.errMsg == "login:ok") {
  273. that.getUserInfo(res);
  274. }
  275. }
  276. });
  277. },
  278. /**
  279. * 获取到用户信息
  280. * */
  281. getUserInfo(loginCode) {
  282. let that = this;
  283. // 获取用户信息
  284. uni.getUserInfo({
  285. provider: 'weixin',
  286. success(res) {
  287. console.log('获取用户信息成功');
  288. uni.hideLoading();
  289. //此处得到userInfo
  290. if (res.errMsg == 'getUserInfo:ok') {
  291. //接下来写业务代码
  292. that.bindGetUserInfo({
  293. ...loginCode,
  294. ...res
  295. });
  296. }
  297. },
  298. fail() {
  299. console.log('获取用户信息失败');
  300. }
  301. });
  302. },
  303. /**
  304. * 添加用户到后台数据库中
  305. * */
  306. async bindGetUserInfo(params) {
  307. let that = this
  308. let res = await this.$myHttp.post({
  309. url: this.$myHttp.urlMap.authMini,
  310. data: {
  311. code: params.code,
  312. rawData: params.rawData,
  313. recommend: that.recommend
  314. },
  315. permission: '',
  316. need_login: false,
  317. });
  318. if (res.code == 1) {
  319. uni.hideLoading();
  320. // 注册用户成功
  321. // 保存用户信息
  322. let userinfo = {
  323. 'user_id': res.data.user_id,
  324. 'group_id': res.data.group_id,
  325. avatarUrl: params.userInfo.avatarUrl,
  326. city: params.userInfo.city,
  327. country: params.userInfo.country,
  328. gender: params.userInfo.gender,
  329. language: params.userInfo.language,
  330. nickName: params.userInfo.nickName,
  331. province: params.userInfo.province,
  332. expTime: 0,
  333. token: res.data.token,
  334. };
  335. this.$store.commit('setUserInfo', {
  336. userinfo: {
  337. ...userinfo,
  338. token: res.data.token
  339. }
  340. });
  341. uni.showToast({
  342. icon: 'success',
  343. title: '登录成功'
  344. })
  345. this.$myUtils.$router.switchTab({
  346. url: "/pages/index/index"
  347. });
  348. } else {
  349. this.canIUse = wx.canIUse('button.open-type.getUserInfo');
  350. }
  351. },
  352. // async toMain() {
  353. // // 判断是否选择了科目
  354. // if (this.subject && this.subject.id && this.subject.id !== 0) {
  355. // // 进入首页
  356. // await this.$myUserLogin.getSubvip(this.subject.id)
  357. // this.$myUtils.$router.switchTab({
  358. // url: "/pages/index/index"
  359. // });
  360. // } else {
  361. // // 进入选择科目
  362. // this.$myUtils.$router.navigateTo({
  363. // url: "/pages/auth/choiceSubject/index"
  364. // });
  365. // }
  366. // },
  367. toMain() {
  368. // 判断是否选择了科目
  369. if (this.subject && this.subject.id && this.subject.id !== 0) {
  370. // 进入首页
  371. this.$myUtils.$router.switchTab({
  372. url: "/pages/index/index"
  373. });
  374. } else {
  375. // 进入选择科目
  376. this.$myUtils.$router.navigateTo({
  377. url: "/pages/auth/choiceSubject/index"
  378. });
  379. }
  380. },
  381. }
  382. };
  383. </script>
  384. <style>
  385. page {
  386. background: #f9fafe;
  387. }
  388. .kaoshi-head {
  389. border-bottom: none;
  390. background: #f9fafe
  391. }
  392. .kaoshi-logo {
  393. text-align: center;
  394. }
  395. .kaoshi-logo-img {
  396. width: 156px;
  397. height: 156px;
  398. margin-top: 25px;
  399. }
  400. .kaoshi-login {
  401. width: 90%;
  402. margin: 0 auto;
  403. background: #f9fafe;
  404. }
  405. .kaoshi-login-content {
  406. margin-top: 22px;
  407. margin-right: 22px;
  408. margin-left: 22px;
  409. }
  410. .kaoshi-login-title {
  411. display: flex;
  412. justify-content: space-between;
  413. align-items: center;
  414. font-size: 16px;
  415. width: 44%;
  416. margin: 0 auto 18px;
  417. line-height: 42px;
  418. }
  419. .kaoshi-login-title-active {
  420. border-bottom: solid 2px #3c7bfc;
  421. width: 30%;
  422. text-align: center;
  423. color: #000;
  424. font-weight: bold;
  425. }
  426. .kaoshi-login-title-other {
  427. border-bottom: solid 2px transparent;
  428. text-align: center;
  429. width: 30%;
  430. color: #888;
  431. }
  432. .kaoshi-login-flex {
  433. display: flex;
  434. align-items: center;
  435. justify-content: space-between
  436. }
  437. .kaoshi-login-button {
  438. margin-top: 15px;
  439. }
  440. .kaoshi-login-forget {
  441. color: #000;
  442. font-size: 14px;
  443. margin: 12px 0;
  444. }
  445. .kaoshi-input-group {
  446. margin-top: 4px;
  447. }
  448. .kaoshi-input-group::before {
  449. background-color: #fff;
  450. }
  451. .kaoshi-input-row {
  452. background-color: #fff;
  453. margin-top: 15px;
  454. padding: 0 15px;
  455. border-radius: 5px;
  456. overflow: hidden;
  457. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  458. }
  459. .kaoshi-input-group::after,
  460. .kaoshi-input-row.border::after {
  461. background-color: #f6f7f9 !important;
  462. }
  463. .kaoshi-primary {
  464. width: 175px;
  465. background: #3c7bfc !important;
  466. color: #fff !important;
  467. border-radius: 8px;
  468. font-size: 14px;
  469. box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
  470. line-height: 35px;
  471. }
  472. .kaoshi-yanzheng {
  473. width: 81px;
  474. height: 30px;
  475. font-size: 12px;
  476. line-height: 30px;
  477. color: #fff;
  478. background: #3c7bfc;
  479. text-align: center;
  480. border-radius: 16px 16px 16px 0;
  481. }
  482. .kaoshi-password {
  483. text-align: right;
  484. color: #7d7d7d;
  485. }
  486. .border {
  487. border-bottom: solid 1px #fbfbfb;
  488. }
  489. .kaoshi-xieyi {
  490. font-weight: bold;
  491. text-decoration: underline;
  492. color: #3c7bfc;
  493. }
  494. .kaoshi-xieyi-flex {
  495. font-size: 13px;
  496. display: flex;
  497. align-items: center;
  498. color: #cecece;
  499. margin-top: 5px
  500. }
  501. .kaoshi-xieyi-check {
  502. transform: scale(0.7);
  503. color: #4c8cf8
  504. }
  505. .kaoshi-xieyi-text {
  506. color: #000;
  507. display: flex;
  508. align-items: center;
  509. }
  510. .layout {
  511. display: flex;
  512. align-items: center;
  513. flex-direction: column;
  514. }
  515. .ydy {
  516. width: 90%;
  517. height: 325px;
  518. margin: 0 auto;
  519. }
  520. .ydy-button {
  521. background: #3c7bfc;
  522. width: 82%;
  523. margin: 0 auto;
  524. text-align: center;
  525. font-size: 17px;
  526. padding: 3px;
  527. color: #fff;
  528. border-radius: 5px;
  529. letter-spacing: 2px;
  530. }
  531. .ydy-b {
  532. font-size: 13px;
  533. width: 83%;
  534. color: #888888;
  535. text-align: center;
  536. margin-top: 17px;
  537. line-height: 19px;
  538. }
  539. .icon-suo,
  540. .icon-shouji {
  541. color: #0f74c6;
  542. margin-right: 5px;
  543. }
  544. </style>