login.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <view class="content">
  3. <!-- <view> -->
  4. <view>
  5. <view class="logo-cont">
  6. <u-image src="/static/login_icon_logo.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. </view>
  14. </view>
  15. <view class="nologin">
  16. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  17. 暂不登录
  18. </u-button>
  19. </view>
  20. <!-- </view> -->
  21. <view @click="toYs" class="yszc">首次登录会自动创建账号且即代表同意<text class="yszc-text">《车领主服务协议》</text>及<text class="yszc-text">《隐私保护政策》</text></view>
  22. </view>
  23. </template>
  24. <script>
  25. import {
  26. login
  27. } from "@/api/login"
  28. export default {
  29. components: {},
  30. data() {
  31. return {
  32. path: '/pages/index/index',
  33. lanuch: false,
  34. code: '',
  35. wxButton: {
  36. background: '#0DC55F'
  37. },
  38. popupBox:{
  39. padding:'20'
  40. },
  41. cancelBtn:{
  42. background:'#eee',
  43. color:"#07C160",
  44. width:'100px',
  45. height:'35px',
  46. border:0
  47. },
  48. submitBtn:{
  49. width:'100px',
  50. height:'35px'
  51. }
  52. }
  53. },
  54. onLoad(option) {
  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. login(params).then(res => {
  101. uni.hideLoading();
  102. _this.code = ''
  103. console.log(res,_this.path, 'login data')
  104. if (res.status == '200') {
  105. getApp().globalData.token = res.data
  106. _this.$u.vuex('vuex_token',res.data)
  107. uni.$emit("getUserInfo")
  108. if (_this.path === '/pages/index/index' || _this.lanuch) {
  109. uni.reLaunch({
  110. url: _this.path
  111. });
  112. } else {
  113. uni.redirectTo({
  114. url: _this.path
  115. });
  116. }
  117. } else {
  118. uni.showToast({
  119. title: res.message,
  120. icon: 'none',
  121. duration: 2500
  122. });
  123. }
  124. });
  125. },300)
  126. } else {
  127. uni.showToast({
  128. title: '授权失败',
  129. icon: 'none',
  130. duration: 2500
  131. });
  132. }
  133. },
  134. // 调微信登录 获取code
  135. wxLogin () {
  136. let _this = this
  137. uni.login({
  138. provider: 'weixin',
  139. success(res) {
  140. console.log(res.code)
  141. _this.code = res.code
  142. }
  143. })
  144. },
  145. }
  146. }
  147. </script>
  148. <style lang="scss">
  149. .content{
  150. width: 100%;
  151. height: 100vh;
  152. padding:0 130upx;
  153. margin: 0 auto;
  154. .logo-cont{
  155. display: flex;
  156. flex-direction: column;
  157. align-items: center;
  158. }
  159. .logo{
  160. display: inline-block;
  161. margin:240upx 256upx 120upx;
  162. }
  163. .logo_text{
  164. display: inline-block;
  165. margin-bottom: 200upx;
  166. }
  167. .login-btn{
  168. display: block;
  169. // width: 670upx;
  170. height: 80upx;
  171. }
  172. .phoneBtn:active{
  173. background: #fff ;
  174. outline: none;
  175. }
  176. .nologin{
  177. text-align: center;
  178. margin: 100upx 0 200upx 0;
  179. }
  180. .yszc{
  181. font-size: 24upx;
  182. text-align: center;
  183. .yszc-text{
  184. color:#4F88F7;
  185. }
  186. }
  187. .popup-title{
  188. display: flex;
  189. align-items: center;
  190. padding: 30rpx 40rpx;
  191. h4{
  192. margin-left:20rpx ;
  193. }
  194. }
  195. .popup-usePhone{
  196. padding:20rpx 40rpx ;
  197. }
  198. .popup-bindPhone{
  199. display: flex;
  200. padding:20rpx 40rpx ;
  201. text{
  202. display: inline-block;
  203. margin-left: 20rpx;
  204. color:#999
  205. }
  206. }
  207. .popup-useOtherPhone{
  208. padding:20rpx 40rpx ;
  209. color:#576B95
  210. }
  211. .popup-btn{
  212. display: flex;
  213. justify-content: space-around;
  214. padding:20rpx 40rpx 40rpx;
  215. }
  216. }
  217. </style>