login.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view class="content">
  3. <!-- <view> -->
  4. <view>
  5. <view class="logo-cont">
  6. <u-image src="/static/login_icon.png" width="160" height="160" class="logo"></u-image>
  7. <u-image src="/static/login_slogan.png" mode="aspectFit" width="286" 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" class="yszc">登录即代表同意<text class="yszc-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-cont{
  161. display: flex;
  162. flex-direction: column;
  163. align-items: center;
  164. }
  165. .logo{
  166. display: inline-block;
  167. margin:250upx 256upx 24upx;
  168. }
  169. .logo_text{
  170. display: inline-block;
  171. margin-bottom: 200upx;
  172. }
  173. .login-btn{
  174. display: block;
  175. width: 670upx;
  176. height: 80upx;
  177. }
  178. .phoneBtn:active{
  179. background: #fff ;
  180. outline: none;
  181. }
  182. .nologin{
  183. text-align: center;
  184. margin: 100upx 0 50upx 0;
  185. }
  186. .yszc{
  187. font-size: 24upx;
  188. text-align: center;
  189. .yszc-text{
  190. color:#07c160;
  191. }
  192. }
  193. }
  194. // .content {
  195. // width: 100%;
  196. // height: 100%;
  197. // padding: 40upx;
  198. // display: flex;
  199. // flex-direction: column;
  200. // > view{
  201. // text-align: center;
  202. // &:first-child{
  203. // flex-grow: 1;
  204. // height: 80vh;
  205. // padding: 20% 10%;
  206. // display: flex;
  207. // flex-direction: column;
  208. // justify-content: space-between;
  209. // }
  210. // &:last-child{
  211. // font-size: 24upx;
  212. // text{
  213. // color: #07c160;
  214. // }
  215. // }
  216. // .logo{
  217. // text-align: center;
  218. // display: flex;
  219. // justify-content: center;
  220. // }
  221. // .login-btns{
  222. // // padding: 60upx 0;
  223. // .login-btn{
  224. // width: 670upx;
  225. // height: 50upx;
  226. // border-radius: 25upx;
  227. // }
  228. // }
  229. // }
  230. // }
  231. </style>