login.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="content">
  3. <view>
  4. <view class="logo-cont">
  5. <u-image src="/static/logo.png" width="160" height="160" class="logo"></u-image>
  6. <!-- <u-image src="/static/login_slogan.png" mode="aspectFit" width="286" height="36" class="logo_text"></u-image> -->
  7. </view>
  8. <view class="login-btns">
  9. <u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  10. 微信授权登录
  11. </u-button>
  12. <u-gap height="30"></u-gap>
  13. <u-button shape="circle" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
  14. 账号密码登录
  15. </u-button>
  16. </view>
  17. </view>
  18. <view class="nologin">
  19. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  20. 暂不登录
  21. </u-button>
  22. </view>
  23. <view class="authUserYs">
  24. <view class="xieyi">
  25. 首次登录会自动创建账号且代表同意
  26. <text @click="toYsPage()">
  27. 《乐色超人(骑手端)用户协议》
  28. </text>
  29. 及 <text>
  30. 《隐私政策》
  31. </text>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import {
  38. login
  39. } from "@/api/login"
  40. export default {
  41. components: {},
  42. data() {
  43. return {
  44. path: '/pages/index/index',
  45. lanuch: false,
  46. code: '',
  47. wxButton: {
  48. background: '#0DC55F'
  49. },
  50. phoneButton: {
  51. background: '#fff',
  52. color:'#000',
  53. }
  54. }
  55. },
  56. onLoad(option) {
  57. // 开启分享
  58. uni.showShareMenu({
  59. withShareTicket: true,
  60. menus: ['shareAppMessage', 'shareTimeline']
  61. })
  62. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  63. this.wxLogin()
  64. const {
  65. path,
  66. lanuch
  67. } = option;
  68. this.lanuch = (lanuch + '') === 'true';
  69. if (path) {
  70. this.path = decodeURIComponent(path);
  71. }
  72. },
  73. methods: {
  74. cansel(){
  75. this.$store.state.vuex_noLogin = true
  76. uni.reLaunch({
  77. url: '/pages/index/index'
  78. })
  79. },
  80. toYs(){
  81. uni.navigateTo({
  82. url: '/pages/agreement/agreement'
  83. })
  84. },
  85. getPhoneNumber(e) {
  86. let _this = this
  87. uni.showLoading({
  88. mask: true,
  89. title: '加载中'
  90. });
  91. if (!this.code) {
  92. this.wxLogin()
  93. }
  94. console.log(this.code, e)
  95. if (e.target.errMsg === 'getPhoneNumber:ok') {
  96. setTimeout(()=>{
  97. const params={
  98. code: _this.code,
  99. encryptedData: e.target.encryptedData,
  100. iv: e.target.iv,
  101. }
  102. login(params).then(res => {
  103. uni.hideLoading();
  104. _this.code = ''
  105. console.log(res,_this.path, 'login data')
  106. if (res.status == '200') {
  107. getApp().globalData.token = res.data
  108. _this.$u.vuex('vuex_token',res.data)
  109. uni.$emit("getUserInfo")
  110. if (_this.path === '/pages/index/index' || _this.lanuch) {
  111. uni.reLaunch({
  112. url: _this.path
  113. });
  114. } else {
  115. uni.redirectTo({
  116. url: _this.path
  117. });
  118. }
  119. } else {
  120. uni.showToast({
  121. title: res.message,
  122. icon: 'none',
  123. duration: 2500
  124. });
  125. }
  126. });
  127. },300)
  128. } else {
  129. uni.showToast({
  130. title: '授权失败',
  131. icon: 'none',
  132. duration: 2500
  133. });
  134. }
  135. },
  136. // 调微信登录 获取code
  137. wxLogin () {
  138. let _this = this
  139. uni.login({
  140. provider: 'weixin',
  141. success(res) {
  142. console.log(res.code)
  143. _this.code = res.code
  144. }
  145. })
  146. },
  147. // 手机号登录
  148. phoneLogin () {
  149. if(this.url){
  150. wx.navigateTo({
  151. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url
  152. })
  153. }else{
  154. wx.navigateTo({
  155. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
  156. })
  157. }
  158. }
  159. }
  160. }
  161. </script>
  162. <style lang="scss">
  163. .content{
  164. width: 100%;
  165. height: 100vh;
  166. padding:0 120upx;
  167. margin: 0 auto;
  168. .logo-cont{
  169. display: flex;
  170. flex-direction: column;
  171. align-items: center;
  172. }
  173. .logo{
  174. display: inline-block;
  175. margin:250upx 256upx 120upx;
  176. }
  177. .logo_text{
  178. display: inline-block;
  179. margin-bottom: 200upx;
  180. }
  181. .login-btn{
  182. display: block;
  183. height: 80upx;
  184. }
  185. .phoneBtn:active{
  186. background: #fff ;
  187. outline: none;
  188. }
  189. .nologin{
  190. text-align: center;
  191. margin: 100upx 0 50upx 0;
  192. }
  193. .authUserYs{
  194. text-align: center;
  195. position: absolute;
  196. bottom: 5%;
  197. font-size: 24upx;
  198. color: #191919;
  199. .xieyi{
  200. width: 80%;
  201. }
  202. text{
  203. color: #4F88F7;
  204. }
  205. }
  206. }
  207. </style>