login.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <view class="content">
  3. <view>
  4. <view>
  5. <view class="logo">
  6. <u-image src="/static/logo.png" width="140" height="140" ></u-image>
  7. </view>
  8. <view class="login-btns">
  9. <u-button
  10. shape="circle"
  11. :custom-style="wxButton"
  12. class="login-btn"
  13. type="success"
  14. :hair-line="false"
  15. :open-type="tyYd?'getPhoneNumber':''"
  16. @click="getCheckYd"
  17. @getphonenumber="getPhoneNumber">
  18. 手机号快捷登录
  19. </u-button>
  20. <u-gap height="30"></u-gap>
  21. <u-button shape="circle" :custom-style="phoneButton" class="login-btn" @click="phoneLogin" type="primary">
  22. 手机验证码登录
  23. </u-button>
  24. </view>
  25. </view>
  26. <view class="nologin">
  27. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  28. 暂不登录
  29. </u-button>
  30. </view>
  31. </view>
  32. <view class="xieyi" style="display: flex;align-items: center;padding:50upx 0;justify-content: center;font-size: 24rpx;">
  33. <u-checkbox v-model="tyYd" :label-size="24">登录代表您已同意</u-checkbox>
  34. <text style="margin-left: -20rpx;" @click="toYs()">隐私政策、服务条款</text>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import {
  40. login
  41. } from "@/api/login"
  42. export default {
  43. components: {},
  44. data() {
  45. return {
  46. path: '/pages/index/index',
  47. lanuch: false,
  48. tyYd: false,
  49. code: '',
  50. url:'', // 二维码参数
  51. wxButton: {
  52. background: '#07c160'
  53. },
  54. phoneButton: {
  55. background: '#00aaff'
  56. }
  57. }
  58. },
  59. mounted() {},
  60. onLoad(option) {
  61. if(option.q !=undefined){
  62. this.url=decodeURIComponent(option.q)
  63. }
  64. // 开启分享
  65. uni.showShareMenu({
  66. withShareTicket: true,
  67. menus: ['shareAppMessage', 'shareTimeline']
  68. })
  69. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  70. this.wxLogin()
  71. const {
  72. path,
  73. lanuch
  74. } = option;
  75. this.lanuch = (lanuch + '') === 'true';
  76. if (path) {
  77. this.path = decodeURIComponent(path);
  78. }
  79. },
  80. methods: {
  81. cansel(){
  82. this.$store.state.vuex_noLogin = true
  83. uni.reLaunch({
  84. url: '/pages/index/index'
  85. })
  86. },
  87. toYs(){
  88. uni.navigateTo({
  89. url: '/pages/agreement/agreement'
  90. })
  91. },
  92. getCheckYd(){
  93. if(!this.tyYd){
  94. uni.showToast({
  95. title: "请阅读并同意隐私政策、服务条款",
  96. icon: "none"
  97. })
  98. return
  99. }
  100. },
  101. getPhoneNumber(e) {
  102. let _this = this
  103. uni.showLoading({
  104. mask: true,
  105. title: '加载中'
  106. });
  107. if (!this.code) {
  108. this.wxLogin()
  109. }
  110. console.log(this.code, e)
  111. if (e.target.errMsg === 'getPhoneNumber:ok') {
  112. setTimeout(()=>{
  113. const params={
  114. code: _this.code,
  115. encryptedData: e.target.encryptedData,
  116. iv: e.target.iv,
  117. }
  118. if(_this.url){
  119. params.encode=_this.url
  120. }
  121. login(params).then(res => {
  122. uni.hideLoading();
  123. _this.code = ''
  124. console.log(res,_this.path, 'login data')
  125. if (res.status == '200') {
  126. getApp().globalData.token = res.data
  127. _this.$u.vuex('vuex_token',res.data)
  128. uni.$emit("getUserInfo")
  129. if (_this.path === '/pages/index/index' || _this.lanuch) {
  130. uni.reLaunch({
  131. url: _this.path
  132. });
  133. } else {
  134. uni.redirectTo({
  135. url: _this.path
  136. });
  137. }
  138. } else {
  139. uni.showToast({
  140. title: res.message,
  141. icon: 'none',
  142. duration: 2500
  143. });
  144. }
  145. });
  146. },300)
  147. } else {
  148. uni.showToast({
  149. title: '授权失败',
  150. icon: 'none',
  151. duration: 2500
  152. });
  153. }
  154. },
  155. // 调微信登录 获取code
  156. wxLogin () {
  157. let _this = this
  158. uni.login({
  159. provider: 'weixin',
  160. success(res) {
  161. console.log(res.code)
  162. _this.code = res.code
  163. }
  164. })
  165. },
  166. // 手机号登录
  167. phoneLogin () {
  168. if(this.url){
  169. wx.navigateTo({
  170. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url
  171. })
  172. }else{
  173. wx.navigateTo({
  174. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
  175. })
  176. }
  177. }
  178. }
  179. }
  180. </script>
  181. <style lang="scss">
  182. .content {
  183. width: 100%;
  184. height: 100%;
  185. padding: 40upx;
  186. display: flex;
  187. flex-direction: column;
  188. > view{
  189. text-align: center;
  190. &:first-child{
  191. flex-grow: 1;
  192. height: 80vh;
  193. padding: 20% 10%;
  194. display: flex;
  195. flex-direction: column;
  196. justify-content: space-between;
  197. }
  198. &:last-child{
  199. font-size: 24upx;
  200. text{
  201. color: #07c160;
  202. }
  203. }
  204. .logo{
  205. text-align: center;
  206. display: flex;
  207. justify-content: center;
  208. }
  209. .login-btns{
  210. padding: 60upx 0;
  211. .login-btn{
  212. margin: 30upx 0;
  213. }
  214. }
  215. }
  216. }
  217. </style>