login.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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" @click="phoneLogin" type="primary">
  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. border: '1px solid #BBBBBB'
  46. }
  47. }
  48. },
  49. onLoad(option) {
  50. // 开启分享
  51. uni.showShareMenu({
  52. withShareTicket: true,
  53. menus: ['shareAppMessage', 'shareTimeline']
  54. })
  55. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  56. this.wxLogin()
  57. const {
  58. path,
  59. lanuch
  60. } = option;
  61. this.lanuch = (lanuch + '') === 'true';
  62. if (path) {
  63. this.path = decodeURIComponent(path);
  64. }
  65. },
  66. methods: {
  67. cansel(){
  68. this.$store.state.vuex_noLogin = true
  69. uni.reLaunch({
  70. url: '/pages/index/index'
  71. })
  72. },
  73. toYs(){
  74. uni.navigateTo({
  75. url: '/pages/agreement/agreement'
  76. })
  77. },
  78. getPhoneNumber(e) {
  79. let _this = this
  80. uni.showLoading({
  81. mask: true,
  82. title: '加载中'
  83. });
  84. if (!this.code) {
  85. this.wxLogin()
  86. }
  87. console.log(this.code, e)
  88. if (e.target.errMsg === 'getPhoneNumber:ok') {
  89. setTimeout(()=>{
  90. const params={
  91. code: _this.code,
  92. encryptedData: e.target.encryptedData,
  93. iv: e.target.iv,
  94. }
  95. login(params).then(res => {
  96. uni.hideLoading();
  97. _this.code = ''
  98. console.log(res,_this.path, 'login data')
  99. if (res.status == '200') {
  100. getApp().globalData.token = res.data
  101. _this.$u.vuex('vuex_token',res.data)
  102. uni.$emit("getUserInfo")
  103. if (_this.path === '/pages/index/index' || _this.lanuch) {
  104. uni.reLaunch({
  105. url: _this.path
  106. });
  107. } else {
  108. uni.redirectTo({
  109. url: _this.path
  110. });
  111. }
  112. } else {
  113. uni.showToast({
  114. title: res.message,
  115. icon: 'none',
  116. duration: 2500
  117. });
  118. }
  119. });
  120. },300)
  121. } else {
  122. uni.showToast({
  123. title: '授权失败',
  124. icon: 'none',
  125. duration: 2500
  126. });
  127. }
  128. },
  129. // 调微信登录 获取code
  130. wxLogin () {
  131. let _this = this
  132. uni.login({
  133. provider: 'weixin',
  134. success(res) {
  135. console.log(res.code)
  136. _this.code = res.code
  137. }
  138. })
  139. },
  140. // 手机号登录
  141. phoneLogin () {
  142. if(this.url){
  143. wx.navigateTo({
  144. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url
  145. })
  146. }else{
  147. wx.navigateTo({
  148. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
  149. })
  150. }
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="scss">
  156. .content{
  157. width: 100%;
  158. height: 100vh;
  159. padding:0 40upx;
  160. margin: 0 auto;
  161. .logo{
  162. display: inline-block;
  163. margin:250upx 256upx 24upx;
  164. }
  165. .logo_text{
  166. display: inline-block;
  167. margin:0upx 154upx 200upx;
  168. }
  169. .login-btn{
  170. display: block;
  171. width: 670upx;
  172. height: 100upx;
  173. border-radius: 50upx;
  174. }
  175. .nologin{
  176. text-align: center;
  177. margin-top: 100upx;
  178. }
  179. }
  180. // .content {
  181. // width: 100%;
  182. // height: 100%;
  183. // padding: 40upx;
  184. // display: flex;
  185. // flex-direction: column;
  186. // > view{
  187. // text-align: center;
  188. // &:first-child{
  189. // flex-grow: 1;
  190. // height: 80vh;
  191. // padding: 20% 10%;
  192. // display: flex;
  193. // flex-direction: column;
  194. // justify-content: space-between;
  195. // }
  196. // &:last-child{
  197. // font-size: 24upx;
  198. // text{
  199. // color: #07c160;
  200. // }
  201. // }
  202. // .logo{
  203. // text-align: center;
  204. // display: flex;
  205. // justify-content: center;
  206. // }
  207. // .login-btns{
  208. // // padding: 60upx 0;
  209. // .login-btn{
  210. // width: 670upx;
  211. // height: 50upx;
  212. // border-radius: 25upx;
  213. // }
  214. // }
  215. // }
  216. // }
  217. </style>