login.vue 5.1 KB

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