login.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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 {login} from "@/api/login"
  26. export default {
  27. components: {},
  28. data() {
  29. return {
  30. path: '/pages/index/index',
  31. lanuch: false,
  32. code: '',
  33. wxButton: {
  34. background: '#0DC55F'
  35. },
  36. popupBox:{
  37. padding:'20'
  38. },
  39. cancelBtn:{
  40. background:'#eee',
  41. color:"#07C160",
  42. width:'100px',
  43. height:'35px',
  44. border:0
  45. },
  46. submitBtn:{
  47. width:'100px',
  48. height:'35px'
  49. }
  50. }
  51. },
  52. onLoad(option) {
  53. // 开启分享
  54. uni.showShareMenu({
  55. withShareTicket: true,
  56. menus: ['shareAppMessage', 'shareTimeline']
  57. })
  58. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  59. this.wxLogin()
  60. const {
  61. path,
  62. lanuch
  63. } = option;
  64. this.lanuch = (lanuch + '') === 'true';
  65. if (path) {
  66. this.path = decodeURIComponent(path);
  67. }
  68. },
  69. methods: {
  70. cansel(){
  71. this.$store.state.vuex_noLogin = true
  72. uni.reLaunch({
  73. url: '/pages/index/index'
  74. })
  75. },
  76. toYs(){
  77. uni.navigateTo({
  78. url: '/pages/agreement/agreement'
  79. })
  80. },
  81. getPhoneNumber(e) {
  82. let _this = this
  83. uni.showLoading({
  84. mask: true,
  85. title: '加载中'
  86. });
  87. if (!this.code) {
  88. this.wxLogin()
  89. }
  90. console.log(this.code, e)
  91. if (e.target.errMsg === 'getPhoneNumber:ok') {
  92. setTimeout(()=>{
  93. const params={
  94. code: _this.code,
  95. encryptedData: e.target.encryptedData,
  96. iv: e.target.iv,
  97. }
  98. login(params).then(res => {
  99. uni.hideLoading();
  100. _this.code = ''
  101. console.log(res,_this.path, 'login data')
  102. if (res.status == '200') {
  103. getApp().globalData.token = res.data
  104. _this.$u.vuex('vuex_token',res.data)
  105. console.log(getApp().globalData.token,'---------getApp().globalData.token','------登录token')
  106. uni.$emit("getUserInfo")
  107. if (_this.path === '/pages/index/index' || _this.lanuch) {
  108. uni.reLaunch({
  109. url: _this.path
  110. });
  111. } else {
  112. uni.redirectTo({
  113. url: _this.path
  114. });
  115. }
  116. } else {
  117. uni.showToast({
  118. title: res.message,
  119. icon: 'none',
  120. duration: 2500
  121. });
  122. }
  123. });
  124. },300)
  125. } else {
  126. uni.showToast({
  127. title: '授权失败',
  128. icon: 'none',
  129. duration: 2500
  130. });
  131. }
  132. },
  133. // 调微信登录 获取code
  134. wxLogin () {
  135. let _this = this
  136. uni.login({
  137. provider: 'weixin',
  138. success(res) {
  139. console.log(res.code)
  140. _this.code = res.code
  141. }
  142. })
  143. },
  144. }
  145. }
  146. </script>
  147. <style lang="scss">
  148. .content{
  149. width: 100%;
  150. height: 100vh;
  151. padding:0 130upx;
  152. margin: 0 auto;
  153. .logo-cont{
  154. display: flex;
  155. flex-direction: column;
  156. align-items: center;
  157. }
  158. .logo{
  159. display: inline-block;
  160. margin:240upx 256upx 120upx;
  161. }
  162. .logo_text{
  163. display: inline-block;
  164. margin-bottom: 200upx;
  165. }
  166. .login-btn{
  167. display: block;
  168. // width: 670upx;
  169. height: 80upx;
  170. }
  171. .phoneBtn:active{
  172. background: #fff ;
  173. outline: none;
  174. }
  175. .nologin{
  176. text-align: center;
  177. margin: 70upx 0 350upx 0;
  178. }
  179. .yszc{
  180. font-size: 24upx;
  181. text-align: center;
  182. .yszc-text{
  183. color:#4F88F7;
  184. }
  185. }
  186. .popup-title{
  187. display: flex;
  188. align-items: center;
  189. padding: 30rpx 40rpx;
  190. h4{
  191. margin-left:20rpx ;
  192. }
  193. }
  194. .popup-usePhone{
  195. padding:20rpx 40rpx ;
  196. }
  197. .popup-bindPhone{
  198. display: flex;
  199. padding:20rpx 40rpx ;
  200. text{
  201. display: inline-block;
  202. margin-left: 20rpx;
  203. color:#999
  204. }
  205. }
  206. .popup-useOtherPhone{
  207. padding:20rpx 40rpx ;
  208. color:#576B95
  209. }
  210. .popup-btn{
  211. display: flex;
  212. justify-content: space-around;
  213. padding:20rpx 40rpx 40rpx;
  214. }
  215. }
  216. </style>