login.vue 4.9 KB

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