|
|
@@ -1,198 +1,173 @@
|
|
|
-
|
|
|
<template>
|
|
|
<view class="container login">
|
|
|
- <view class="login-main">
|
|
|
- <image class="logo" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/logo.png" mode=""></image>
|
|
|
- </view>
|
|
|
+ <view class="login-main"> <image class="logo" src="/static/ws/logo.png" mode="widthFix"></image> </view>
|
|
|
+ <view class="login-title"> <image src="/static/ws/invitation_code.png" mode="widthFix"></image> <text>邀请码</text> </view>
|
|
|
<view class="login-input">
|
|
|
- <input type="number"
|
|
|
- v-model="invitationCode"
|
|
|
- maxlength="6"
|
|
|
- class="input"
|
|
|
- placeholder="请输入邀请码"
|
|
|
- />
|
|
|
+ <!-- 邀请码输入框 -->
|
|
|
+ <vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
|
|
|
</view>
|
|
|
- <view class="login-row" @click.stop="this.$api.navigateTo('/pages/login/register-select')"><text>免费注册</text></view>
|
|
|
- <view class="login-btn" @click.stop="goLogin">登录</view>
|
|
|
- <view class="login-btn-last" @click.stop="this.$api.navigateTo('/pages/login/login')">账号登录</view>
|
|
|
+ <view class="logo-message"><text>邀请码错误，请联系采美客服获取最新邀请码</text> </view> <button class="login-btn">登录</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import authorize from '@/common/config/authorize.js'
|
|
|
- import wxLogin from "@/common/config/wxLogin.js"
|
|
|
- import {mapState,mapMutations } from 'vuex';
|
|
|
- import { invitationCodeLogin } from '@/services/use.js'
|
|
|
- export default{
|
|
|
- data() {
|
|
|
- return{
|
|
|
- invitationCode:'', //获取用户登录的邀请码
|
|
|
- }
|
|
|
+import VcodeInput from '@/components/vcode-input/vcode-input'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VcodeInput
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ // 用户输入的值
|
|
|
+ vcodeInput(val) {
|
|
|
+ console.log(val)
|
|
|
},
|
|
|
- onLoad(option) {
|
|
|
-
|
|
|
+ // 控制组件获取焦点
|
|
|
+ setFocus() {
|
|
|
+ this.$refs.VcodeInput.setFocus()
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId'])
|
|
|
+ // 控制组件失去焦点
|
|
|
+ setBlur() {
|
|
|
+ this.$refs.VcodeInput.setBlur()
|
|
|
},
|
|
|
- methods:{
|
|
|
- ...mapMutations(['login']),
|
|
|
- goLogin() {
|
|
|
- if( this.invitationCode == ''){
|
|
|
- this.$util.msg('请输入邀请码',2000)
|
|
|
- return
|
|
|
- }
|
|
|
- wx.getUserInfo({
|
|
|
- success: res => {
|
|
|
- this.isUserInfo = false
|
|
|
- this.userInfo = res.userInfo;
|
|
|
- let params ={
|
|
|
- invitationCode:this.invitationCode,
|
|
|
- nickName:res.userInfo.nickName,
|
|
|
- headimgurl:res.userInfo.avatarUrl,
|
|
|
- }
|
|
|
- invitationCodeLogin(params).then(response =>{
|
|
|
- this.login(response.data)
|
|
|
- wxLogin.wxLoginAuthorize()
|
|
|
- if(response.data.userIdentity === 3){
|
|
|
- setTimeout(()=>{
|
|
|
- this.$api.navigateTo('/supplier/pages/index/index')
|
|
|
- },1000)
|
|
|
- }else{
|
|
|
- setTimeout(()=>{
|
|
|
- switch(this.isLoginType){
|
|
|
- case 9:
|
|
|
- this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
|
|
|
- break;
|
|
|
- case 8:
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${this.isLoginProductId}`)
|
|
|
- break;
|
|
|
- case 7:
|
|
|
- this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderID=${this.isLoginOrderId}`)
|
|
|
- break;
|
|
|
- default:
|
|
|
- this.$api.switchTabTo('/pages/tabBar/user/user')
|
|
|
- }
|
|
|
- },1000)
|
|
|
- }
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
- this.isUserInfo = false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ // 清除已输入
|
|
|
+ clearValue() {
|
|
|
+ this.$refs.VcodeInput.clearValue()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/*
|
|
|
+import authorize from '@/common/config/authorize.js'
|
|
|
+import wxLogin from "@/common/config/wxLogin.js"
|
|
|
+import {mapState,mapMutations } from 'vuex';
|
|
|
+import { invitationCodeLogin } from '@/services/use.js'
|
|
|
+export default{
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ invitationCode:'', //获取用户登录的邀请码
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId'])
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ ...mapMutations(['login']),
|
|
|
+ goLogin() {
|
|
|
+ if( this.invitationCode == ''){
|
|
|
+ this.$util.msg('请输入邀请码',2000)
|
|
|
+ return
|
|
|
}
|
|
|
+ wx.getUserInfo({
|
|
|
+ success: res => {
|
|
|
+ this.isUserInfo = false
|
|
|
+ this.userInfo = res.userInfo;
|
|
|
+ let params ={
|
|
|
+ invitationCode:this.invitationCode,
|
|
|
+ nickName:res.userInfo.nickName,
|
|
|
+ headimgurl:res.userInfo.avatarUrl,
|
|
|
+ }
|
|
|
+ invitationCodeLogin(params).then(response =>{
|
|
|
+ this.login(response.data)
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ if(response.data.userIdentity === 3){
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.$api.navigateTo('/supplier/pages/index/index')
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ setTimeout(()=>{
|
|
|
+ switch(this.isLoginType){
|
|
|
+ case 9:
|
|
|
+ this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
|
|
|
+ break;
|
|
|
+ case 8:
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${this.isLoginProductId}`)
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderID=${this.isLoginOrderId}`)
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/user/user')
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ this.isUserInfo = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}*/
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .login{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- .model-warp.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .model-warp.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .login-main{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- height: 189rpx;
|
|
|
- padding:60rpx 0 40rpx 0;
|
|
|
- margin-bottom: 70rpx;
|
|
|
- .logo{
|
|
|
- width:467rpx;
|
|
|
- height: 189rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-input{
|
|
|
- width: 600rpx;
|
|
|
- height: 88rpx;
|
|
|
- padding: 24rpx 0;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #E1E1E1;
|
|
|
- .input{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 88rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-row{
|
|
|
- padding: 0 75rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 40rpx;
|
|
|
- color: #E15616;
|
|
|
- margin-bottom: 48rpx;
|
|
|
- text-align: right;
|
|
|
+.login {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .login-main,
|
|
|
+ .login-title,
|
|
|
+ .logo-message {
|
|
|
+ width: 590rpx;
|
|
|
+ }
|
|
|
+ .login-main {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 180rpx 0 60rpx;
|
|
|
+ image {
|
|
|
+ width: 151rpx;
|
|
|
+ height: 151rpx;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
- .login-btn{
|
|
|
- width: 600rpx;
|
|
|
- height: 88rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 88rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- background: $btn-confirm;
|
|
|
+ }
|
|
|
+ .login-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
}
|
|
|
- .login-btn-last{
|
|
|
- width: 600rpx;
|
|
|
- height: 86rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 88rpx;
|
|
|
- color: $color-system;
|
|
|
- margin: 0 auto;
|
|
|
+ }
|
|
|
+ .login-btn {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ background-color: #000;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .login-input {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
+ .logo-message {
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &::before {
|
|
|
+ content: '!';
|
|
|
+ display: block;
|
|
|
+ width: 22rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ background: #ff2a2a;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
text-align: center;
|
|
|
- border: 1px solid $color-system;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- .model-authorization{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- .authorization{
|
|
|
- width: 518rpx;
|
|
|
- height: 320rpx;
|
|
|
- position: absolute;
|
|
|
- background: rgba(255,255,255,.7);
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- top: 0;
|
|
|
- margin: auto;
|
|
|
- .to-btn{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- width: 70%;
|
|
|
- height: 88rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 88rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ line-height: 22rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
