Skip to content

P
pptist
Commit d80235e2 authored by zhengke's avatar zhengke
Browse files
Options

no message

parent f3ae1551
Hide whitespace changes
Inline Side-by-side
Showing with 356 additions and 46 deletions
src/components/home/BackTop.vue
View file @ d80235e2
<template>
<div class="BackTopBox animate__animated animate__fadeInUp">
<img class="cursor-pointer" src="../../assets//img/backtop.png"
style="height: 58px;"
@click="BackTop"/>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
const emit = defineEmits<{
(event: 'BackTop'): void,
}>()
const BackTop = () =>{
emit('BackTop')
}
</script>
<style lang="scss" scoped>
.BackTopBox{
position: fixed;
right: 20px;
bottom: 100px;
z-index: 15;
}
</style>
\ No newline at end of file
src/services/UserService.ts
View file @ d80235e2
......@@ -58,6 +58,16 @@ class UserServices {
return Api.Post("travel_set_signout", msg)
}
static async wechatLoginAsync(account: string, code: string, v_token: string, tid: string = ''): Promise<HttpResponse> {
let msg = { account, code, v_token, tid }
return Api.Post("travel_login_password", msg)
}
static async VerifyLoginAsync(account: string, code: string, v_token: string, tid: string = ''): Promise<HttpResponse> {
let msg = { account, code, v_token, tid }
return Api.Post("travel_login_password", msg)
}
static async PasswordLoginAsync(account: string, pwd: string, v_token: string, tid: string = ''): Promise<HttpResponse> {
let msg = { account, pwd, v_token, tid }
return Api.Post("travel_login_password", msg)
......
src/store/user.ts
View file @ d80235e2
......@@ -109,6 +109,28 @@ export const useUserStore = defineStore('user', {
this.userInfo.logo = ENTERPRISE_DEFAULT_HEADER
}
},
async setUserVerifyLoginAsync(account:string,code:string,vtoken:string,tid:string='') {
try {
let response = await UserService.VerifyLoginAsync(account,code,vtoken,tid)
if (response.data.resultCode == ApiResult.SUCCESS) {
if(!Array.isArray(response.data.data)) {
this.token = response.data.data.token
this.userInfo = response.data.data.userinfo
if(!this.userInfo.photo || (!this.userInfo.photo.includes('http://')&& !this.userInfo.photo.includes('https://'))){
this.userInfo.photo = USER_DEFAULT_HEADER
}
if(!this.userInfo.logo || (!this.userInfo.logo.includes('http://')&& !this.userInfo.logo.includes('https://'))){
this.userInfo.logo = ENTERPRISE_DEFAULT_HEADER
}
return { status:'SUCCESS',verify:false } as UserLoginResult
} else {
return { status:'CHOSEN', data:response.data.data,verify:false } as UserLoginResult
}
} else return { status:'ERROR',verify:response.data.data==1 } as UserLoginResult
} catch (error) {}
return { status:'ERROR',verify:true } as UserLoginResult
},
async setUserPasswordLoginAsync(account:string,pwd:string,vtoken:string,tid:string='') {
try {
let response = await UserService.PasswordLoginAsync(account,pwd,vtoken,tid)
......
src/views/Auth/Login.vue
View file @ d80235e2
......@@ -25,52 +25,25 @@
<el-button type="info" class="ppt-button q-ml-md" @click="cancelInviteHandler">取消</el-button>
</div>
</div>
<div style="font-size: 36px; " class="text-dark">登录</div>
<div style="font-size: 36px; " class="text-dark" @click="currentLogin=1">登录</div>
<div class="text-info text-small">你的创作空间</div>
<template v-if="!multipleUsers || multipleUsers.length==0">
<!-- <div class="q-py-xl row items-center full-width">
<div class="login-type row items-center col">
<div class="q-py-xl row items-center full-width">
<div class="login-type row items-center col" @click="currentLogin=3"
:class="[currentLogin==3?'active':'']">
<img src="../../assets/img/wechat.png" alt="">
<span class="q-ml-md">使用微信扫码登录</span>
</div>
<div class="login-type row items-center col q-ml-md">
<div class="login-type row items-center col q-ml-md" @click="currentLogin=2"
:class="[currentLogin==2?'active':'']">
<img src="../../assets/img/phone.png" alt="">
<span class="q-ml-md">使用短信验证登录</span>
</div>
</div> -->
<div class="row LoginTypeBox">
<div v-for="(item,index) in LoginType">
{{item.Name}}
</div>
</div>
<el-divider> <span class="text-info">使用邮箱或者账号登录</span> </el-divider>
<!-- <el-form ref="loginFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg">
<el-form-item label="" prop="account">
<el-input v-model="model.account" placeholder="账号/邮箱" />
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password class="q-mt-lg"/>
</el-form-item>
<el-form-item label="">
<div class="row q-mt-lg full-width">
<div class="col">
<vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler" v-if="needVerify"></vue-hcaptcha>
</div>
<el-button link type="primary" @click="redicetToForgot">忘记密码？</el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
</el-form-item>
</el-form> -->
<passwordLogin></passwordLogin>
<div class="text-info text-small row flex-center">
<span>还没有账号？</span>
<el-button link type="primary" class="q-mb-lg" @click="redicetToRegist">立即注册</el-button>
</div>
<!-- <div class="text-info text-small row flex-center">
<img class="cursor-pointer" src="../../assets/img/wechatLogin.png" style="width:1.67vw;" alt="" @click="redicetToWechat">
</div> -->
<el-divider> <span class="text-info">使用<template v-if="currentLogin==1">邮箱或者账号</template><template v-if="currentLogin==2">手机号</template><template v-if="currentLogin==3">微信扫码</template>登录</span> </el-divider>
<passwordLogin v-if="currentLogin==1"></passwordLogin>
<verifyLogin v-if="currentLogin==2" @passwordLogin="currentLogin=1"></verifyLogin>
<wechatLogin v-if="currentLogin==3" @passwordLogin="currentLogin=1"></wechatLogin>
</template>
<template v-if="multipleUsers && multipleUsers.length>0">
<el-divider> <span class="text-info">选择你需要登录的组织</span> </el-divider>
......@@ -115,6 +88,8 @@ import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
import passwordLogin from "./components/passwordLogin";
import wechatLogin from "./components/wechatLogin";
import verifyLogin from "./components/verifyLogin"
interface RuleForm {
account: string
......@@ -156,7 +131,7 @@ const LoginType = reactive([
{Name:'微信登录',Id:3},
])
const currentLogin = ref(0)
const currentLogin = ref(1)
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
......@@ -278,8 +253,43 @@ verifyCheckHandler()
background-color: #f8f7fc;
color:var(--el-color-primary);
}
.login-type.active{
background-color: #f8f7fc;
color:var(--el-color-primary);
}
.login-box .login-type img{
width:16px;
}
.LoginTypeBox{
font-size: 0.94vw;
}
.currentLoginCenter{
padding: 1vw 0;
position: relative;
}
.currentLoginCenter.active div{
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.currentLoginCenter.active p {
font-size: 1.25vw;
font-family: PingFang SC;
font-weight: bold;
}
.currentLoginCenter.active span{
width: 2.24rem;
height: 0.36rem;
background: #1E3FE7;
border-radius: 0.18rem;
display: inline-block;
margin: auto;
}
.currentLoginCenter:nth-child(2){
padding: 1vw 2.34vw;
}
</style>
\ No newline at end of file
src/views/Auth/components/passwordLogin.vue
View file @ d80235e2
......@@ -9,7 +9,8 @@
<el-form-item label="">
<div class="row q-mt-lg full-width">
<div class="col">
<vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler" v-if="needVerify"></vue-hcaptcha>
<vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler"
v-if="needVerify"></vue-hcaptcha>
</div>
<el-button link type="primary" @click="redicetToForgot">忘记密码？</el-button>
</div>
......@@ -17,6 +18,10 @@
<el-form-item>
<el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
</el-form-item>
<div class="text-info text-small row flex-center">
<span>还没有账号？</span>
<el-button link type="primary" class="q-mb-lg" @click="redicetToRegist">立即注册</el-button>
</div>
</el-form>
</template>
<script lang="ts" setup>
......@@ -59,6 +64,10 @@ if(localStorage.getItem("invite")){
inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
}
const redicetToRegist = ()=>{
location.href='/regist'
}
const redicetToForgot = ()=>{
location.href='/forgot'
}
......@@ -91,4 +100,8 @@ const userLoginHandler = async ()=>{
ElMessage.error({message:'账号或密码错误'})
}
}
const verifyHandler = (token:string,ekey:string)=>{
validateToken.value = token
}
</script>
\ No newline at end of file
src/views/Auth/components/verifyLogin.vue 0 → 100644
View file @ d80235e2
<template>
<el-form ref="loginFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg">
<el-form-item label="" prop="account">
<el-input v-model="model.account" placeholder="手机号">
<template #suffix>
<el-button link :disabled="!phoneRegex.test(model.account)" :loading="sending" v-if="!isCountdown" @click="sendVerifyCode">{{ isSend?'重新发送':'发送验证码' }}</el-button>
<template v-else>
<el-countdown title="" format="ss" :value="countValue" value-style="font-size:14px;color:#f89c53;" class="inline q-mx-sm" @finish="()=>isCountdown=false" />s
</template>
</template>
</el-input>
</el-form-item>
<el-form-item label="" prop="code">
<el-input v-model="model.code" placeholder="验证码" class="q-mt-lg"/>
</el-form-item>
<el-form-item label="">
<div class="row q-mt-lg full-width">
<div class="col">
<vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler" v-if="needVerify"></vue-hcaptcha>
</div>
<el-button link type="primary" > &nbsp; </el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
</el-form-item>
<div class="text-info text-small row flex-center">
<span>账户/邮箱登录？</span>
<el-button link type="primary" class="q-mb-lg" @click="passwordLogin">立即登录</el-button>
</div>
</el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
import { ApiResult } from '@/configs/axios';
import UserServices from '@/services/UserService';
import { useUserStore } from '@/store/user';
interface RuleForm {
account: string
code: string
}
const model = ref<{account:string,code:string,tid:string}>({
account:'',
code:'',
tid:''
})
const rules = reactive<FormRules<RuleForm>>({
account: [
{ required: true, message: '请输入你的手机号', trigger: 'blur' },
{ min: 11, message: '请输入正确的手机号', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入你的验证码', trigger: 'blur' },
{ min: 6,max:20, message: '请输入正确的验证码', trigger: 'blur' },
]
})
const loginFormRef = ref<FormInstance>()
const loading = ref(false)
const user = useUserStore()
const multipleUsers = ref<any[]>([])
const inviteInfo = ref<any>()
const needVerify = ref(false)
const validateToken = ref('')
const invisibleHcaptcha = ref()
if(localStorage.getItem("invite")){
inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
}
const sending = ref(false)
const isCountdown = ref(false)
const countValue = ref<number>(0)
const phoneRegex = /^[1]([3-9])[0-9]{9}$/
const emit = defineEmits<{
(event: 'passwordLogin'): void,
}>()
const passwordLogin = () =>{
emit('passwordLogin')
}
const redicetToForgot = ()=>{
location.href='/forgot'
}
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
loading.value=true
await formEl.validate(async (valid) => {
if (valid) {
await userLoginHandler()
}
loading.value=false
})
}
const userLoginHandler = async ()=>{
const result = await user.setUserVerifyLoginAsync(model.value.account,model.value.code,validateToken.value,model.value.tid)
if(result.status=='SUCCESS'){
ElMessage.success({message:'登录成功'})
if(inviteInfo.value){
localStorage.removeItem('invite')
localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
}
location.href='/space';
}else if(result.status=='CHOSEN' && Array.isArray(result.data)){
multipleUsers.value = result.data
}else{
if(!needVerify.value) needVerify.value = result.verify
if(invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
ElMessage.error({message:'手机号或验证码错误'})
}
}
const sendVerifyCode = async () => {
if(!phoneRegex.test(model.value.mail) || sending.value) return
sending.value= true
const response = await UserServices.SendRegistCodeAsync(model.value.mail)
if(response.data.resultCode == ApiResult.SUCCESS){
ElMessage.success({message:'验证码已发送，请前往邮箱查看'})
isCountdown.value = true
countValue.value = Date.now() + 1000 * 60
isSend.value = true
} else {
ElMessage.error({message:response.data.message})
}
sending.value= false
}
const verifyHandler = (token:string,ekey:string)=>{
validateToken.value = token
}
</script>
\ No newline at end of file
src/views/Auth/components/wechatLogin.vue 0 → 100644
View file @ d80235e2
<template>
<div class="wechatLoginForm" v-loading="qrLoading">
<!-- <QRCode :value="qrCode" style="width: 13.31vw;height: auto;border: 1px solid #1E3FE7;" v-if="!qrLoading"></QRCode>
<QRCode value="http://www.viitto.com" style="width: 13.31vw;height: auto;border: 0.1px solid #1E3FE7;" v-if="qrLoading"></QRCode> -->
<QRCode :value="qrCode" style="width: 256px;height: 256px;border: 1px solid #1E3FE7;" v-if="!qrLoading"></QRCode>
<QRCode value="http://www.viitto.com" style="width: 256px;height: 256px;border: 1px solid #1E3FE7;" v-if="qrLoading"></QRCode>
</div>
<div class="text-info text-small row flex-center q-pt-lg">
<span>账户/邮箱登录？</span>
<el-button link type="primary" class="q-mb-lg" @click="passwordLogin">立即登录</el-button>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
import { ApiResult } from '@/configs/axios';
import UserServices from '@/services/UserService';
import { useUserStore } from '@/store/user';
interface RuleForm {
account: string
password: string
}
const model = ref<{account:string,password:string,tid:string}>({
account:'',
password:'',
tid:''
})
const rules = reactive<FormRules<RuleForm>>({
account: [
{ required: true, message: '请输入你的账号/邮箱', trigger: 'blur' },
{ min: 6, message: '请输入正确的账号', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入你的密码', trigger: 'blur' },
{ min: 6,max:20, message: '请输入正确的密码', trigger: 'blur' },
]
})
const loginFormRef = ref<FormInstance>()
const loading = ref(false)
const user = useUserStore()
const multipleUsers = ref<any[]>([])
const inviteInfo = ref<any>()
const needVerify = ref(false)
const validateToken = ref('')
const invisibleHcaptcha = ref()
if(localStorage.getItem("invite")){
inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
}
const qrCode = ref('none')
const qrLoading = ref(false)
const emit = defineEmits<{
(event: 'passwordLogin'): void,
}>()
const passwordLogin = () =>{
emit('passwordLogin')
}
const redicetToForgot = ()=>{
location.href='/forgot'
}
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
loading.value=true
await formEl.validate(async (valid) => {
if (valid) {
await userLoginHandler()
}
loading.value=false
})
}
const userLoginHandler = async ()=>{
const result = await user.setUserPasswordLoginAsync(model.value.account,model.value.password,validateToken.value,model.value.tid)
if(result.status=='SUCCESS'){
ElMessage.success({message:'登录成功'})
if(inviteInfo.value){
localStorage.removeItem('invite')
localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
}
location.href='/space';
}else if(result.status=='CHOSEN' && Array.isArray(result.data)){
multipleUsers.value = result.data
}else{
if(!needVerify.value) needVerify.value = result.verify
if(invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
ElMessage.error({message:'账号或密码错误'})
}
}
</script>
<style>
.wechatLoginForm{
padding-top: 16px;
padding-bottom: 12px;
}
</style>
\ No newline at end of file
src/views/Market/Index.vue
View file @ d80235e2
......@@ -196,8 +196,7 @@
</div>
<div class="MarketIndexList-img">
<LazyImg :url="item.CoverImg"
class="rounded" style="display: block;"
@error="errorImg"/>
class="rounded" style="display: block;" />
</div>
</div>
</template>
......@@ -226,6 +225,8 @@
@next="next"/>
<!-- vip购买提示 -->
<vipFooter v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenPrompt" @close="closeVip"></vipFooter>
<!-- 到顶部 -->
<BackTop v-if="marketRef&&marketRef.scrollTop>800" @BackTop="goBackTop"></BackTop>
</template>
<script setup lang="ts">
......@@ -338,8 +339,8 @@ const loadProps = reactive({
error
})
const errorImg = (res:any)=>{
console.log(res,'===')
const goBackTop = () => {
marketRef.value.scrollTop = 0
}
// 关闭vip购买提示
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment