logincode.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="container login">
  3. <view class="login-main">
  4. <image class="logo" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/logo.png" mode=""></image>
  5. </view>
  6. <view class="login-input">
  7. <input type="number"
  8. v-model="params.invitationCode"
  9. maxlength="6"
  10. class="input"
  11. placeholder="请输入邀请码"
  12. />
  13. </view>
  14. <view class="login-row" @click.stop="this.$api.navigateTo('/pages/login/register-select')"><text>免费注册</text></view>
  15. <view class="login-btn" @click.stop="goLogin">登录</view>
  16. <view class="login-btn-last" @click.stop="this.$api.navigateTo('/pages/login/login')">账号登录</view>
  17. </view>
  18. </template>
  19. <script>
  20. import authorize from '@/common/config/authorize.js'
  21. import wxLogin from "@/common/config/wxLogin.js"
  22. import {mapState,mapMutations } from 'vuex';
  23. export default{
  24. data() {
  25. return{
  26. params:{
  27. invitationCode:'',//获取用户登录的邀请码
  28. unionId:0,
  29. nickName:'',
  30. avatarUrl:'',
  31. },
  32. }
  33. },
  34. onLoad(option) {
  35. },
  36. computed: {
  37. ...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId'])
  38. },
  39. methods:{
  40. ...mapMutations(['login','wxLogin']),
  41. goLogin(){
  42. if( this.params.invitationCode == ''){
  43. this.$util.msg('请输入邀请码',2000)
  44. return
  45. }
  46. this.isUserInfo = false
  47. this.params.unionId = uni.getStorageSync('unionId')
  48. this.GetUserProfile()
  49. },
  50. GetUserProfile(){//获取用户微信个人信息
  51. const self = this
  52. wx.getUserProfile({
  53. desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  54. success(res) {
  55. console.log('微信获取用户信息新API',res)
  56. self.wxLogin(res.userInfo)
  57. self.params.nickName = res.userInfo.nickName
  58. self.params.avatarUrl = res.userInfo.avatarUrl
  59. self.BindingWechat(self.params)
  60. },
  61. fail() {
  62. self.$util.msg('授权失败', 2000)
  63. }
  64. })
  65. },
  66. BindingWechat(params){//邀请码登录并绑定微信
  67. this.UserService.InvitationCodeLogin(params)
  68. .then(response =>{
  69. wxLogin.wxLoginAuthorize()
  70. if(response.data.userIdentity === 3){
  71. setTimeout(()=>{
  72. this.$api.navigateTo('/supplier/pages/index/index')
  73. },1500)
  74. }else{
  75. setTimeout(()=>{
  76. switch(this.isLoginType){
  77. case 9:
  78. this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
  79. break;
  80. case 8:
  81. this.$api.navigateTo(`/pages/goods/product?id=${this.isLoginProductId}`)
  82. break;
  83. case 7:
  84. this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderID=${this.isLoginOrderId}`)
  85. break;
  86. default:
  87. this.$api.switchTabTo('/pages/tabBar/user/user')
  88. }
  89. },1500)
  90. }
  91. })
  92. .catch(error =>{
  93. this.$util.msg(error.msg,2000)
  94. this.isUserInfo = false
  95. })
  96. },
  97. InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
  98. authorize.getSetting().then(res =>{
  99. console.log('用户是否授权过',res)
  100. if(res == 1){
  101. wxLogin.wxLoginQuick()
  102. }
  103. })
  104. }
  105. },
  106. onShow() {
  107. this.$api.getStorage().then((resolve) =>{
  108. this.params.unionId = resolve.unionId ? resolve.unionId : 0
  109. })
  110. this.InitAuthorize()
  111. }
  112. }
  113. </script>
  114. <style lang="scss">
  115. .login{
  116. width: 100%;
  117. height: auto;
  118. .model-warp.none{
  119. display: none;
  120. }
  121. .model-warp.show{
  122. display: block;
  123. }
  124. .login-main{
  125. width: 100%;
  126. display: flex;
  127. flex-direction: column;
  128. align-items: center;
  129. height: 189rpx;
  130. padding:60rpx 0 40rpx 0;
  131. margin-bottom: 70rpx;
  132. .logo{
  133. width:467rpx;
  134. height: 189rpx;
  135. display: block;
  136. }
  137. }
  138. .login-input{
  139. width: 600rpx;
  140. height: 88rpx;
  141. padding: 24rpx 0;
  142. margin: 0 auto;
  143. margin-bottom: 30rpx;
  144. background: #FFFFFF;
  145. position: relative;
  146. box-sizing: border-box;
  147. border-bottom: 1px solid #E1E1E1;
  148. .input{
  149. width: 100%;
  150. height: 100%;
  151. background: #FFFFFF;
  152. font-size: $font-size-28;
  153. line-height: 88rpx;
  154. color: #333333;
  155. }
  156. }
  157. .login-row{
  158. padding: 0 75rpx;
  159. font-size: $font-size-28;
  160. line-height: 40rpx;
  161. color: #E15616;
  162. margin-bottom: 48rpx;
  163. text-align: right;
  164. }
  165. .login-btn{
  166. width: 600rpx;
  167. height: 88rpx;
  168. border-radius: 44rpx;
  169. font-size: $font-size-28;
  170. line-height: 88rpx;
  171. color: #FFFFFF;
  172. margin: 0 auto;
  173. text-align: center;
  174. background: $btn-confirm;
  175. }
  176. .login-btn-last{
  177. width: 600rpx;
  178. height: 86rpx;
  179. border-radius: 44rpx;
  180. font-size: $font-size-28;
  181. line-height: 88rpx;
  182. color: $color-system;
  183. margin: 0 auto;
  184. text-align: center;
  185. border: 1px solid $color-system;
  186. margin-top: 20rpx;
  187. }
  188. .model-authorization{
  189. width: 100%;
  190. height: 100%;
  191. position: fixed;
  192. top: 0;
  193. left: 0;
  194. z-index: 999;
  195. .authorization{
  196. width: 518rpx;
  197. height: 320rpx;
  198. position: absolute;
  199. background: rgba(255,255,255,.7);
  200. left: 0;
  201. right: 0;
  202. bottom: 0;
  203. top: 0;
  204. margin: auto;
  205. .to-btn{
  206. position: absolute;
  207. top: 0;
  208. left: 0;
  209. right: 0;
  210. bottom: 0;
  211. margin: auto;
  212. width: 70%;
  213. height: 88rpx;
  214. font-size: $font-size-28;
  215. line-height: 88rpx;
  216. color: #FFFFFF;
  217. text-align: center;
  218. border-radius: 44rpx;
  219. }
  220. }
  221. }
  222. }
  223. </style>