login.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view>
  3. <view class="container" :style="'height:'+ screenHeight +'px !important;'" v-if="isload">
  4. <!-- <image :src="bgImg" mode="" class="bgimg"></image> -->
  5. <view class="box" >
  6. <image src="../../static/img/login_text.png" mode="" class="loginLogo"></image>
  7. <view class="" >
  8. <button class="wxlogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >微信用户快捷登录</button>
  9. </view>
  10. <view class="iphoneLogin" @click="iphoneLogin">使用手机号登录</view>
  11. <view>
  12. </view>
  13. <view class="privacy" @click="privacyClick">
  14. <image src="../../static/img/login_icon_checked.png" mode="" class="imgPrivacy" v-show="privacyCk"></image>
  15. <view class="nock" v-show="!privacyCk"></view>
  16. <span>同意</span> <span class="span1" @click.stop="goTreaty">《服务协议》</span>
  17. <span>与</span> <span class="span1" @click.stop="goIntimity">《隐私政策》 </span>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. screenHeight: '',
  28. privacyCk:true,
  29. wxdata:'',
  30. wxCode:'',
  31. openID:'',
  32. session_key:'',
  33. wxPhoneData:'',
  34. wxOpendata:'',
  35. isload:false,
  36. shareID:'',
  37. }
  38. },
  39. onLoad() {
  40. this.shareID=this.$store.state.shareID
  41. console.log(this.$store.state.shareID)
  42. this.screenHeight = uni.getSystemInfoSync().windowHeight;
  43. // console.log( this.screenHeight)
  44. this.wxOpendata=uni.getStorageSync("wxOpendata");
  45. this.wxdata=uni.getStorageSync("wxdata");
  46. if(this.wxOpendata){
  47. this.isload=true;
  48. }else{
  49. uni.redirectTo({
  50. url:'empower?type=1'
  51. })
  52. }
  53. },
  54. methods: {
  55. goTreaty(){
  56. uni.navigateTo({
  57. url:'../me/treaty'
  58. })
  59. },
  60. goIntimity(){
  61. uni.navigateTo({
  62. url:'../me/intimity'
  63. })
  64. },
  65. getPhoneNumber: function(e) {
  66. console.log(e.detail);
  67. this.wxPhoneData=e.detail;
  68. this.gologin()
  69. },
  70. gologin(){
  71. if (this.privacyCk == false) {
  72. uni.showToast({
  73. title: '您需要先同意相关服务协议与隐私政策',
  74. icon: 'none',
  75. duration: 3000
  76. });
  77. return
  78. }
  79. var that=this;
  80. this.$http('worldKeepCar/sys/wxLogin', {
  81. openID:this.wxOpendata.openid,
  82. encrypData:this.wxPhoneData.encryptedData,
  83. iv:this.wxPhoneData.iv,
  84. sessionKey:this.wxOpendata.session_key,
  85. nickName:this.wxdata.userInfo.nickName,
  86. headUrl:this.wxdata.userInfo.avatarUrl,
  87. shareID:this.shareID,
  88. },).then(res => {
  89. //console.log(res)
  90. uni.hideLoading();
  91. if(res.code==0){
  92. uni.setStorage({
  93. key: 'logodata',
  94. data: res.data,
  95. success: function () {
  96. }
  97. });
  98. uni.showToast({
  99. title: '登录成功',
  100. icon:'none',
  101. duration: 3000
  102. });
  103. uni.switchTab({
  104. url:'../homePage/homePage'
  105. })
  106. }else{
  107. uni.showToast({
  108. title: res.msg,
  109. icon:'none',
  110. duration: 3000
  111. });
  112. }
  113. })
  114. },
  115. privacyClick(){
  116. this.privacyCk=!this.privacyCk
  117. },
  118. iphoneLogin(){
  119. uni.navigateTo({
  120. url:'iphoneLogin'
  121. })
  122. },
  123. }
  124. }
  125. </script>
  126. <style scoped>
  127. .bgimg {
  128. display: contents;
  129. overflow: hidden;
  130. position: relative;
  131. }
  132. .container{
  133. width: 100%;
  134. min-height: 100%;
  135. background: url('http://dmsphoto.66km.com.cn/keepcar/keepCarHome.png') ;
  136. background-size: 100%;
  137. }
  138. .loginLogo{
  139. width: 220rpx;height: 133rpx;
  140. }
  141. .box{
  142. padding-top: 20vh;
  143. padding-left: 58rpx;
  144. padding-right: 58rpx;
  145. }
  146. .wxlogin{
  147. width: 634rpx;
  148. height: 88rpx;
  149. background: linear-gradient(135deg, #FD5300 0%, #FF270A 100%) #FF2400;
  150. border-radius: 44rpx;
  151. line-height: 88rpx;
  152. text-align: center;
  153. color: #FFFFFF;
  154. font-size: 30rpx;
  155. margin-top: 200rpx;
  156. }
  157. .iphoneLogin{
  158. width: 634rpx;
  159. height: 88rpx;
  160. background: rgba(255,255,255,0.3);
  161. border-radius: 44rpx;
  162. line-height: 88rpx;
  163. text-align: center;
  164. color: #FFFFFF;
  165. font-size: 30rpx;
  166. margin-top: 50rpx;
  167. }
  168. .privacy{
  169. display: flex;
  170. justify-content: center;
  171. font-size: 24rpx;
  172. color: #CCCCCC;
  173. padding-top: 34rpx;
  174. }
  175. .imgPrivacy{
  176. width: 28rpx;
  177. height: 28rpx;
  178. margin-top: 2rpx;
  179. margin-right: 10rpx;
  180. }
  181. .span1{
  182. color: #FF4F00;
  183. }
  184. .nock{
  185. width: 22rpx;
  186. height: 22rpx;
  187. border-radius: 50%;
  188. border:2px solid #AEAEAE;
  189. margin-top: 2rpx;
  190. margin-right: 10rpx;
  191. }
  192. </style>