index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one" v-if="platform.uniPlatform=='app'">
  5. <view class="one_2">
  6. <uni-data-checkbox mode="tag" v-model="loginType" :localdata="loginTypeList" @change="logintypeChange"></uni-data-checkbox>
  7. </view>
  8. <view class="one_3" v-if="loginType==0">
  9. <uni-forms ref="codeForm" :rules="codeRules" :model="codeForm" label-width="auto">
  10. <uni-forms-item label="手机号" name="phone">
  11. <uni-easyinput type="number" v-model="codeForm.phone" placeholder="请输入手机号" />
  12. </uni-forms-item>
  13. <uni-forms-item label="验证码" name="code">
  14. <view class="yzm">
  15. <view class="l">
  16. <uni-easyinput type="text" v-model="codeForm.code" placeholder="请输入手机验证码" />
  17. </view>
  18. <view class="r">
  19. <button type="default" size="mini" @tap.stop="appsendCount">{{time_count==0?'验证码':time_count}}</button>
  20. </view>
  21. </view>
  22. </uni-forms-item>
  23. <view class="btn">
  24. <button type="default" size="mini" @click="codeSubmit('codeForm')">提交登录</button>
  25. </view>
  26. </uni-forms>
  27. </view>
  28. <view class="one_4" v-else-if="loginType==1">
  29. <uni-forms ref="accountForm" :rules="accountRules" :model="accountForm" label-width="auto">
  30. <uni-forms-item label="手机号" name="phone">
  31. <uni-easyinput type="number" v-model="accountForm.phone" placeholder="请输入手机号" />
  32. </uni-forms-item>
  33. <uni-forms-item label="登录密码" name="password">
  34. <uni-easyinput type="number" v-model="accountForm.password" placeholder="请输入登录密码" />
  35. </uni-forms-item>
  36. <view class="btn">
  37. <button type="default" size="mini" @click="accountSubmit('accountForm')">提交登录</button>
  38. </view>
  39. </uni-forms>
  40. </view>
  41. </view>
  42. <view class="two" v-else-if="platform.uniPlatform=='mp-weixin'">
  43. <view class="icon">
  44. <text class="iconfont icon-weixin"></text>
  45. </view>
  46. <view class="btn">
  47. <button type="default" size="mini" @tap="wxLogin()">微信信任登录</button>
  48. </view>
  49. </view>
  50. <view class="thr">
  51. <view class="thr_1">
  52. <checkbox-group @change="changeAgree">
  53. <label>
  54. <checkbox :checked="agree" />
  55. <text @tap="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
  56. </label>
  57. </checkbox-group>
  58. </view>
  59. </view>
  60. </view>
  61. <uni-popup ref="dialogShow" type="dialog">
  62. <uni-popup-dialog :title="dialog.title" mode="base" :before-close="true" @confirm="diaSubmit(dialog)" @close="diaReset(dialog)">
  63. <view class="dialog dialog_1" v-if="dialog.type=='1'">
  64. <uni-forms ref="phoneForm" :model="phoneForm" label-width="auto">
  65. <uni-forms-item label="方式">
  66. <uni-data-checkbox v-model="phoneForm.type" :localdata="typeList" />
  67. </uni-forms-item>
  68. <uni-forms-item label="微信" v-if="phoneForm.type==0">
  69. <button type="default" size="mini" open-type="getPhoneNumber" @getphonenumber="getUserPhone">获取微信绑定手机</button>
  70. </uni-forms-item>
  71. <uni-forms-item label="手机号" v-if="phoneForm.type==0">
  72. <uni-easyinput type="number" v-model="phoneForm.phone" disabled />
  73. </uni-forms-item>
  74. <uni-forms-item label="手机号" v-if="phoneForm.type==1">
  75. <view class="yzm">
  76. <view class="l">
  77. <uni-easyinput type="number" v-model="phoneForm.phone" placeholder="请输入手机号" />
  78. </view>
  79. <view class="r">
  80. <button type="default" size="mini" @tap="sendCount">{{time_count==0?'验证码':time_count}}</button>
  81. </view>
  82. </view>
  83. </uni-forms-item>
  84. <uni-forms-item label="验证码" v-if="phoneForm.type==1">
  85. <uni-easyinput type="number" v-model="phoneForm.code" placeholder="请输入验证码" />
  86. </uni-forms-item>
  87. </uni-forms>
  88. </view>
  89. </uni-popup-dialog>
  90. </uni-popup>
  91. </mobile-frame>
  92. </template>
  93. <script>
  94. export default {
  95. data() {
  96. return {
  97. point_title: this.$config.point_title,
  98. // 平台信息
  99. platform: {},
  100. //openid
  101. openid: '',
  102. // 隐私协议
  103. agree: false,
  104. // app-start
  105. loginType: 0,
  106. // 短信登录
  107. loginTypeList: [ //
  108. {
  109. "value": 0,
  110. "text": "短信登录"
  111. }, {
  112. "value": 1,
  113. "text": "密码登录"
  114. },
  115. ],
  116. // 验证码登录
  117. codeForm: {},
  118. codeRules: {
  119. phone: {
  120. rules: [ //
  121. {
  122. required: true,
  123. errorMessage: '请输入手机号',
  124. },
  125. {
  126. minLength: 11,
  127. maxLength: 11,
  128. errorMessage: '账号长度在{maxLength}个字符',
  129. }
  130. ]
  131. },
  132. code: {
  133. rules: [ //
  134. {
  135. required: true,
  136. errorMessage: '请输入短信验证码',
  137. }
  138. ]
  139. }
  140. },
  141. // 密码登录
  142. accountForm: {},
  143. accountRules: {
  144. phone: {
  145. rules: [ //
  146. {
  147. required: true,
  148. errorMessage: '请输入手机号',
  149. },
  150. {
  151. minLength: 11,
  152. maxLength: 11,
  153. errorMessage: '账号长度在{maxLength}个字符',
  154. }
  155. ]
  156. },
  157. password: {
  158. rules: [ //
  159. {
  160. required: true,
  161. errorMessage: '请输入登录密码',
  162. }
  163. ]
  164. }
  165. },
  166. // app-end
  167. // 微信登陆
  168. // 无账号
  169. is_user: false,
  170. user: {},
  171. // 弹框
  172. dialog: {
  173. title: '绑定手机号',
  174. type: '1'
  175. },
  176. // 绑定手机号
  177. phoneForm: {
  178. type: 0,
  179. },
  180. typeList: [ //
  181. {
  182. text: '微信',
  183. value: 0
  184. },
  185. {
  186. text: '短信验证',
  187. value: 1
  188. }
  189. ],
  190. // 倒计时
  191. time_count: 0
  192. };
  193. },
  194. onShow: function() {
  195. const that = this;
  196. that.search();
  197. },
  198. methods: {
  199. search() {
  200. const that = this;
  201. uni.getStorage({
  202. key: 'system',
  203. success: function(res) {
  204. if (res.data) that.$set(that, `platform`, res.data);
  205. // 获取openid
  206. that.searchOpenid()
  207. }
  208. })
  209. },
  210. // 查询openid
  211. searchOpenid() {
  212. const that = this;
  213. if (that.platform.uniPlatform == 'mp-weixin') {
  214. uni.login({
  215. provider: 'weixin',
  216. success: async function(res) {
  217. const aee = await that.$api(`/wechat/api/login/app`, 'GET', {
  218. config: that.$config.wx_projectkey,
  219. js_code: res.code
  220. })
  221. if (aee.errcode == '0') {
  222. that.$set(that, `openid`, aee.data.openid);
  223. // 微信登录
  224. that.openidLogin(aee.data.openid);
  225. }
  226. },
  227. fail: function(err) {
  228. console.log(err);
  229. }
  230. })
  231. } else if (that.platform.uniPlatform == 'app') {
  232. console.log('to do');
  233. }
  234. },
  235. // 有账号,微信登录,直接返回上一页
  236. async openidLogin(e) {
  237. const that = this;
  238. let res = await that.$api(`/user/wxLogin`, 'POST', {
  239. openid: e
  240. })
  241. if (res.errcode == '0') {
  242. uni.setStorage({
  243. data: res.data,
  244. key: 'token',
  245. success: function() {
  246. uni.navigateBack({
  247. delta: 1
  248. })
  249. }
  250. })
  251. } else {
  252. if (res.errcode == '-5') {
  253. console.log('无账号');
  254. that.$set(that, `is_user`, false)
  255. }
  256. }
  257. },
  258. // 微信信任登录
  259. async wxLogin() {
  260. const that = this;
  261. if (that.agree) {
  262. uni.getUserProfile({
  263. desc: '用于展示',
  264. success: async function(res) {
  265. let parmas = {
  266. openid: that.openid,
  267. icon: [{
  268. url: res.userInfo.avatarUrl
  269. }],
  270. name: res.userInfo.nickName,
  271. }
  272. const arr = await that.$api(`/user`, 'POST', parmas);
  273. if (arr.errcode == '0') {
  274. that.$set(that, `user`, arr.data);
  275. // 打开弹框
  276. that.diaShow();
  277. } else {
  278. uni.showToast({
  279. title: arr.errmsg,
  280. icon: 'none'
  281. });
  282. }
  283. },
  284. fail: function(err) {
  285. console.log(err);
  286. }
  287. })
  288. } else {
  289. uni.showToast({
  290. title: '请阅读并同意用户协议和隐私政策',
  291. icon: 'none'
  292. })
  293. }
  294. },
  295. // 微信信任登录-1
  296. async wxLogins() {
  297. const that = this;
  298. const agg = await that.$api(`/user/wxLogin`, 'POST', {
  299. openid: that.openid
  300. })
  301. if (agg.errcode == '0') {
  302. uni.setStorage({
  303. data: agg.data,
  304. key: 'token',
  305. success: function() {
  306. uni.navigateBack({
  307. delta: 1
  308. })
  309. }
  310. })
  311. } else {
  312. uni.showToast({
  313. title: agg.errmsg,
  314. icon: 'none'
  315. });
  316. }
  317. },
  318. // 打开弹框,绑定手机号
  319. diaShow() {
  320. const that = this;
  321. that.$refs.dialogShow.open();
  322. },
  323. // 获取手机号
  324. async getUserPhone(e) {
  325. const that = this;
  326. let user = that.user;
  327. let detail = e.detail;
  328. let res = await that.$api(`/wechat/api/login/getPhone`, 'GET', {
  329. config: that.$config.wx_projectkey,
  330. code: detail.code
  331. })
  332. if (res.errcode == '0') {
  333. let phone = res.data && res.data.phone_info && res.data.phone_info.purePhoneNumber || '';
  334. that.$set(that.phoneForm, `phone`, phone);
  335. } else {
  336. uni.showToast({
  337. title: res.errmsg,
  338. icon: 'none'
  339. })
  340. }
  341. },
  342. // 短信验证
  343. // 获取验证码
  344. async sendCount() {
  345. const that = this;
  346. let user = this.user;
  347. let form = that.form && that.form.phone ? that.form : that.phoneForm;
  348. if (form && form.phone) {
  349. let res = await that.$api(`/user/toBindPhone`, 'POST', {
  350. id: user._id,
  351. phone: form.phone
  352. })
  353. if (res.errcode == '0') {
  354. uni.showToast({
  355. title: '发送成功'
  356. })
  357. that.$set(that, `time_count`, 60);
  358. that.timeDown();
  359. } else {
  360. uni.showToast({
  361. title: res.errmsg,
  362. icon: 'none'
  363. })
  364. }
  365. } else {
  366. uni.showToast({
  367. title: '输入错误,请重新输入!',
  368. icon: 'none'
  369. })
  370. }
  371. },
  372. // 倒计时
  373. timeDown() {
  374. const that = this;
  375. var times = setInterval(() => {
  376. that.time_count--;
  377. if (that.time_count <= 0) {
  378. clearInterval(times);
  379. }
  380. }, 1000);
  381. },
  382. // 弹框确认(关闭)
  383. async diaSubmit(e) {
  384. const that = this;
  385. let user = this.user;
  386. if (e.type == '1') {
  387. const that = this;
  388. let form = that.phoneForm;
  389. if (form.type == '0') {
  390. if (form && form.phone) that.updatePhone(form.phone);
  391. } else if (form.type == '1') {
  392. const res = await that.$api(`/user/checkBindPhone`, 'POST', {
  393. id: user._id,
  394. code: form.code,
  395. phone: form.phone
  396. });
  397. if (res.errcode == '0') {
  398. const arr = await that.$api(`/user/${user._id}`, 'POST', {
  399. phone: form.phone
  400. });
  401. if (arr.errcode == '0') {
  402. uni.showToast({
  403. title: '绑定手机号成功',
  404. icon: 'none'
  405. })
  406. that.wxLogins();
  407. } else {
  408. uni.showToast({
  409. title: arr.errmsg,
  410. icon: 'none'
  411. })
  412. }
  413. } else {
  414. uni.showToast({
  415. title: res.errmsg,
  416. icon: 'none'
  417. })
  418. }
  419. }
  420. }
  421. },
  422. async updatePhone(e) {
  423. const that = this;
  424. let user = that.user;
  425. let arr = await that.$api(`/user/${user._id}`, 'POST', {
  426. phone: e
  427. })
  428. if (arr.errcode == '0') {
  429. that.wxLogins();
  430. } else {
  431. uni.showToast({
  432. title: res.errmsg,
  433. icon: 'none'
  434. })
  435. }
  436. },
  437. // 弹框取消(关闭)
  438. diaReset(e) {
  439. const that = this;
  440. if (e.type == '1') {
  441. that.wxLogins();
  442. }
  443. },
  444. // 账号登录-start
  445. // 选择登录类型
  446. logintypeChange(e) {
  447. const that = this;
  448. that.$set(that, `loginType`, e.detail.value)
  449. },
  450. // 验证码登录
  451. async appsendCount() {
  452. const that = this;
  453. let form = that.codeForm;
  454. if (form && form.phone) {
  455. let res = await that.$api(`/user/toLoginByCode`, 'POST', {
  456. phone: form.phone
  457. })
  458. console.log(res);
  459. if (res.errcode == '0') {
  460. uni.showToast({
  461. title: '发送成功'
  462. })
  463. that.$set(that, `time_count`, 60);
  464. that.timeDown();
  465. } else {
  466. uni.showToast({
  467. title: res.errmsg,
  468. icon: 'none'
  469. })
  470. }
  471. } else {
  472. uni.showToast({
  473. title: '输入错误,请重新输入!',
  474. icon: 'none'
  475. })
  476. }
  477. },
  478. codeSubmit(ref) {
  479. const that = this;
  480. let agree = that.agree;
  481. that.$refs[ref].validate().then(async params => {
  482. if (agree) {
  483. const res = await that.$api(`/user/checkLoginCode`, 'POST', params);
  484. if (res.errcode == '0') {
  485. uni.setStorage({
  486. key: 'token',
  487. data: res.data,
  488. success: function() {
  489. uni.navigateBack({
  490. delta: 1
  491. })
  492. }
  493. });
  494. } else {
  495. uni.showToast({
  496. title: res.errmsg,
  497. icon: 'none'
  498. })
  499. }
  500. } else {
  501. uni.showToast({
  502. title: '请阅读并同意用户协议和隐私政策',
  503. icon: 'none'
  504. })
  505. }
  506. }).catch(err => {
  507. console.log(err);
  508. })
  509. },
  510. // 账号登录
  511. accountSubmit(ref) {
  512. const that = this;
  513. let agree = that.agree;
  514. that.$refs[ref].validate().then(async params => {
  515. if (agree) {
  516. const res = await that.$api(`/user/login`, 'POST', {
  517. ...params
  518. })
  519. if (res.errcode == '0') {
  520. uni.setStorage({
  521. key: 'token',
  522. data: res.data,
  523. success: function() {
  524. uni.navigateBack({
  525. delta: 1
  526. })
  527. }
  528. });
  529. } else {
  530. uni.showToast({
  531. title: res.errmsg,
  532. icon: 'none'
  533. })
  534. }
  535. } else {
  536. uni.showToast({
  537. title: '请阅读并同意用户协议和隐私政策',
  538. icon: 'none'
  539. })
  540. }
  541. }).catch(err => {
  542. console.log(err);
  543. })
  544. },
  545. // 账号登录-end
  546. // 同意隐私协议
  547. changeAgree() {
  548. const that = this;
  549. if (that.agree) that.$set(that, `agree`, false)
  550. else that.$set(that, `agree`, true);
  551. },
  552. // 查看隐私协议
  553. toAgree() {
  554. uni.navigateTo({
  555. url: `/pages/other/agree`
  556. })
  557. },
  558. }
  559. }
  560. </script>
  561. <style lang="scss">
  562. .main {
  563. .one {
  564. padding: 2vw;
  565. .one_2 {
  566. margin: 4vw 22vw;
  567. text-align: center;
  568. }
  569. .btn {
  570. text-align: center;
  571. margin: 0 0 2vw 0;
  572. width: 96vw;
  573. button {
  574. width: 40%;
  575. padding: 1vw 2vw;
  576. background-color: var(--f35BColor);
  577. color: var(--fffColor);
  578. font-size: var(--font20Size);
  579. }
  580. }
  581. }
  582. .two {
  583. text-align: center;
  584. margin: 20vw 0;
  585. .icon {
  586. margin: 0 0 5vw 0;
  587. text {
  588. font-size: 60px;
  589. }
  590. }
  591. .btn {
  592. button {
  593. background-color: var(--f35BColor);
  594. color: var(--fffColor);
  595. }
  596. }
  597. }
  598. .thr {
  599. .thr_1 {
  600. padding: 0 2vw;
  601. font-size: 14px;
  602. text-align: center;
  603. position: absolute;
  604. width: 96vw;
  605. bottom: 25vw;
  606. }
  607. }
  608. }
  609. .dialog {
  610. width: 100vw;
  611. }
  612. .dialog_1 {
  613. .uni-forms {
  614. display: flex;
  615. form {
  616. width: 100%;
  617. }
  618. }
  619. .uni-data-checklist {
  620. border: 1px solid #E5E5E5;
  621. padding: 1vw;
  622. border-radius: 5px;
  623. }
  624. .uni-forms-item {
  625. margin-bottom: 2vw !important;
  626. }
  627. }
  628. .yzm {
  629. display: flex;
  630. flex-direction: row;
  631. justify-content: space-between;
  632. .l {
  633. flex-grow: 1;
  634. }
  635. .r {
  636. width: 18vw;
  637. button {
  638. width: 100%;
  639. line-height: 2.8;
  640. padding: 0 1vw;
  641. }
  642. }
  643. }
  644. </style>