login.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <view class="content">
  3. <view class="content-body">
  4. <view class="login-logo">
  5. <u-image src="/static/logo-mini.png" width="396" height="76" class="logo"></u-image>
  6. </view>
  7. <view class="login-btns">
  8. <u-button
  9. shape="circle"
  10. :custom-style="wxButton"
  11. class="login-btn"
  12. type="success"
  13. :hair-line="false"
  14. :open-type="tyYd?'getPhoneNumber':''"
  15. @click="getCheckYd"
  16. @getphonenumber="getPhoneNumber">
  17. 手机号快捷登录
  18. </u-button>
  19. <u-button shape="circle" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
  20. 手机验证码登录
  21. </u-button>
  22. </view>
  23. </view>
  24. <view class="xieyi" style="display: flex;align-items: center;padding:50upx 0;justify-content: center;font-size: 24rpx;">
  25. <u-checkbox v-model="tyYd" shape="circle" style="width:25px;"></u-checkbox>
  26. 登录代表您已同意<text @click="gotoXieyi()">隐私政策、服务条款</text>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. import {wxlogin} from '../../api/login.js'
  32. import {
  33. mapState,
  34. mapMutations
  35. } from 'vuex'
  36. export default {
  37. components: {
  38. },
  39. data() {
  40. return {
  41. path: '/pages/report/report',
  42. lanuch: false,
  43. mobile: '',
  44. code: '',
  45. codeText: '获取验证码',
  46. getCodeing: false,
  47. totalTime: 60,
  48. positionTop: 0,
  49. hasFocus: false,
  50. hasFocus1: false,
  51. wxButton:{
  52. background: '#20d468',
  53. borderColor: '#22c573'
  54. },
  55. phoneButton:{
  56. background: '#f8f8f8',
  57. borderColor: '#eeeeee'
  58. },
  59. tyYd: false
  60. }
  61. },
  62. computed: mapState(['forcedLogin']),
  63. mounted() {
  64. //微信平台登录
  65. //#ifdef MP-WEIXIN
  66. this.$store.dispatch('wxLogin','weixin')
  67. //#endif
  68. },
  69. onLoad(option) {
  70. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  71. this.wxLogin()
  72. const {
  73. path,
  74. lanuch,
  75. q
  76. } = option;
  77. this.lanuch = (lanuch + '') === 'true';
  78. if (path) {
  79. this.path = decodeURIComponent(path+"?q="+q);
  80. }
  81. },
  82. methods: {
  83. ...mapMutations(['login']),
  84. changeYd(v){
  85. this.tyYd = v
  86. },
  87. getCheckYd(){
  88. if(!this.tyYd){
  89. uni.showToast({
  90. title: "请阅读并同意隐私政策、服务条款",
  91. icon: "none"
  92. })
  93. return
  94. }
  95. },
  96. // 微信授权登录
  97. getPhoneNumber(e) {
  98. let _this = this
  99. if(!this.tyYd){
  100. uni.showToast({
  101. title: "请阅读并同意隐私政策、服务条款",
  102. icon: "none"
  103. })
  104. return
  105. }
  106. uni.showLoading({
  107. mask: true,
  108. title: '加载中'
  109. });
  110. if (!this.code) {
  111. this.wxLogin()
  112. }
  113. console.log(this.code, e)
  114. if (e.target.errMsg === 'getPhoneNumber:ok') {
  115. setTimeout(()=>{
  116. const params={
  117. code: _this.code,
  118. encryptedData: e.target.encryptedData,
  119. iv: e.target.iv,
  120. }
  121. wxlogin(params).then(res => {
  122. uni.hideLoading();
  123. _this.code = ''
  124. console.log(res,_this.path, 'login data')
  125. if (res.status == '200') {
  126. this.toMain(res.data)
  127. uni.$emit("getUserInfo")
  128. if (_this.path === '/pages/report/report' || _this.lanuch) {
  129. uni.reLaunch({
  130. url: _this.path
  131. });
  132. } else {
  133. uni.redirectTo({
  134. url: _this.path
  135. });
  136. }
  137. } else {
  138. uni.showToast({
  139. title: res.message,
  140. icon: 'none',
  141. duration: 2500
  142. });
  143. }
  144. });
  145. },300)
  146. } else {
  147. uni.showToast({
  148. title: '授权失败',
  149. icon: 'none',
  150. duration: 2500
  151. });
  152. }
  153. },
  154. // 调微信登录 获取code
  155. wxLogin () {
  156. let _this = this
  157. uni.login({
  158. provider: 'weixin',
  159. success(res) {
  160. console.log(res.code)
  161. _this.code = res.code
  162. }
  163. })
  164. },
  165. toMain(data) {
  166. this.login(data);
  167. uni.reLaunch({
  168. url: '/pages/report/report',
  169. });
  170. },
  171. // 手机号登录
  172. phoneLogin(){
  173. wx.navigateTo({
  174. url: '/pages/login/phoneLogin'
  175. })
  176. },
  177. initPosition() {
  178. /**
  179. * 使用 absolute 定位,并且设置 bottom 值进行定位。软键盘弹出时,底部会因为窗口变化而被顶上来。
  180. * 反向使用 top 进行定位,可以避免此问题。
  181. */
  182. this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
  183. },
  184. gotoXieyi(url){
  185. uni.navigateTo({
  186. url: '/pages/xieyi/index?id=0'
  187. })
  188. }
  189. },
  190. onReady() {
  191. this.initPosition();
  192. }
  193. }
  194. </script>
  195. <style lang="less">
  196. .content{
  197. width: 100%;
  198. height: 100vh;
  199. padding:0 125upx;
  200. display: flex;
  201. flex-direction: column;
  202. text-align: center;
  203. .content-body{
  204. flex: 1;
  205. .logo{
  206. display: inline-block;
  207. margin:250upx 0 120upx;
  208. }
  209. .phoneBtn{
  210. display: block;
  211. margin: 30rpx 0 350upx;
  212. }
  213. }
  214. .xieyi{
  215. font-size: 24upx;
  216. padding-bottom: 60upx;
  217. text{
  218. color:#1283d4
  219. }
  220. }
  221. }
  222. </style>