login.vue 4.8 KB

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