login.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <view class="content">
  3. <view>
  4. <view class="logo-cont">
  5. <u-image src="/static/logo.png" width="160" height="160" class="logo"></u-image>
  6. <!-- <u-image src="/static/login_slogan.png" mode="aspectFit" width="286" height="36" class="logo_text"></u-image> -->
  7. </view>
  8. <view class="login-btns">
  9. <u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  10. 微信授权登录
  11. </u-button>
  12. <u-gap height="30"></u-gap>
  13. <u-button shape="circle" :custom-style="phoneButton" class="login-btn phoneBtn" @click="phoneLogin" :hoverClass='none'>
  14. 账号密码登录
  15. </u-button>
  16. </view>
  17. </view>
  18. <!-- 客服电话 -->
  19. <view class="phone flex justify_center align_center">
  20. <u-icon name="phone" color="#191919" font-size="32" @click="callPhone(customerPhoneNum)"></u-icon>
  21. <text @click="callPhone(customerPhoneNum)">客服电话:{{customerPhoneNum || '--'}}</text>
  22. </view>
  23. <view class="nologin">
  24. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  25. 暂不登录
  26. </u-button>
  27. </view>
  28. <view class="authUserYs">
  29. <view class="xieyi">
  30. 登录即代表同意
  31. <text @click="toYsPage()">
  32. 《乐色超人(骑手端)用户协议》
  33. </text>
  34. 及 <text @click="toYsPage()">
  35. 《隐私政策》
  36. </text>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import {login,customerPhone} from "@/api/login"
  43. export default {
  44. components: {},
  45. data() {
  46. return {
  47. path: '/pages/index/index',
  48. lanuch: false,
  49. code: '',
  50. wxButton: {
  51. background: '#0DC55F'
  52. },
  53. phoneButton: {
  54. background: '#fff',
  55. color:'#000',
  56. },
  57. customerPhoneNum:'' // 客服电话
  58. }
  59. },
  60. onLoad(option) {
  61. this.getCustomerPhone()
  62. // 开启分享
  63. uni.showShareMenu({
  64. withShareTicket: true,
  65. menus: ['shareAppMessage', 'shareTimeline']
  66. })
  67. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  68. this.wxLogin()
  69. const {
  70. path,
  71. lanuch
  72. } = option;
  73. this.lanuch = (lanuch + '') === 'true';
  74. if (path) {
  75. this.path = decodeURIComponent(path);
  76. }
  77. },
  78. methods: {
  79. cansel(){
  80. this.$store.state.vuex_noLogin = true
  81. uni.reLaunch({
  82. url: '/pages/index/index'
  83. })
  84. },
  85. toYsPage(){
  86. uni.navigateTo({
  87. url: '/pages/agreement/agreement'
  88. })
  89. },
  90. // 获取客服电话
  91. getCustomerPhone(){
  92. customerPhone().then(res=>{
  93. console.log(res,'=====================客服电话')
  94. if(res.status==200){
  95. this.customerPhoneNum=res.data.paramPhone
  96. }else{
  97. uni.showToast({
  98. title:res.message,
  99. icon:'none'
  100. })
  101. }
  102. })
  103. },
  104. //联系客服
  105. callPhone(customerPhoneNum){
  106. uni.makePhoneCall({
  107. phoneNumber: customerPhoneNum
  108. });
  109. },
  110. getPhoneNumber(e) {
  111. let _this = this
  112. uni.showLoading({
  113. mask: true,
  114. title: '加载中'
  115. });
  116. if (!this.code) {
  117. this.wxLogin()
  118. }
  119. console.log(this.code, e)
  120. if (e.target.errMsg === 'getPhoneNumber:ok') {
  121. setTimeout(()=>{
  122. const params={
  123. code: _this.code,
  124. encryptedData: e.target.encryptedData,
  125. iv: e.target.iv,
  126. }
  127. login(params).then(res => {
  128. uni.hideLoading();
  129. _this.code = ''
  130. console.log(res,_this.path, 'login data')
  131. if (res.status == '200') {
  132. getApp().globalData.token = res.data
  133. _this.$u.vuex('vuex_token',res.data)
  134. uni.$emit("getUserInfo")
  135. if (_this.path === '/pages/index/index' || _this.lanuch) {
  136. uni.reLaunch({
  137. url: _this.path
  138. });
  139. } else {
  140. uni.redirectTo({
  141. url: _this.path
  142. });
  143. }
  144. } else {
  145. uni.showToast({
  146. title: res.message,
  147. icon: 'none',
  148. duration: 2500
  149. });
  150. }
  151. });
  152. },300)
  153. } else {
  154. uni.showToast({
  155. title: '授权失败',
  156. icon: 'none',
  157. duration: 2500
  158. });
  159. }
  160. },
  161. // 调微信登录 获取code
  162. wxLogin () {
  163. let _this = this
  164. uni.login({
  165. provider: 'weixin',
  166. success(res) {
  167. console.log(res.code)
  168. _this.code = res.code
  169. }
  170. })
  171. },
  172. // 手机号登录
  173. phoneLogin () {
  174. if(this.url){
  175. wx.navigateTo({
  176. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url
  177. })
  178. }else{
  179. wx.navigateTo({
  180. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
  181. })
  182. }
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="scss">
  188. .content{
  189. width: 100%;
  190. height: 100vh;
  191. padding:0 120upx;
  192. margin: 0 auto;
  193. background-color: #fff;
  194. .logo-cont{
  195. display: flex;
  196. flex-direction: column;
  197. align-items: center;
  198. }
  199. .logo{
  200. display: inline-block;
  201. margin:250upx 256upx 120upx;
  202. }
  203. .logo_text{
  204. display: inline-block;
  205. margin-bottom: 200upx;
  206. }
  207. .login-btn{
  208. display: block;
  209. height: 80upx;
  210. }
  211. .phoneBtn:active{
  212. background: #fff ;
  213. outline: none;
  214. }
  215. .nologin{
  216. text-align: center;
  217. margin: 100upx 0 50upx 0;
  218. }
  219. .phone{
  220. font-weight: 400;
  221. margin-top:40upx;
  222. text{
  223. display: inline-block;
  224. margin-left:10upx ;
  225. }
  226. }
  227. .authUserYs{
  228. text-align: center;
  229. position: absolute;
  230. bottom: 5%;
  231. font-size: 24upx;
  232. color: #191919;
  233. .xieyi{
  234. width: 80%;
  235. }
  236. text{
  237. color: #4F88F7;
  238. }
  239. }
  240. }
  241. </style>