@@ -33,6 +33,7 @@ | |||
"postcss-pxtorem": "^6.0.0", | |||
"screenfull": "^6.0.0", | |||
"vue": "^3.2.45", | |||
"vue-cropper": "^1.0.9", | |||
"vue-i18n": "9", | |||
"vue-router": "^4.0.13" | |||
}, | |||
@@ -95,3 +95,34 @@ export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||
}) | |||
} | |||
/** | |||
* @description 上传阿里云--裁剪后的个人背景图 | |||
* @params id | |||
* @returns data | |||
*/ | |||
export function awsImgUpload(data) { | |||
const timestamp = Date.now(); | |||
const formData = new FormData(); | |||
formData.append('file', data, timestamp + ".png"); | |||
return request({ | |||
url: '/api/upload/awsImgUpload', | |||
method: 'post', | |||
data: formData, | |||
headers: { | |||
'Content-Type': 'application/form-data', | |||
"Access-Control-Allow-Credentials": true, | |||
} | |||
}); | |||
} | |||
/** | |||
* @description 保存裁剪后的个人背景图 | |||
* @params id | |||
* @returns data | |||
*/ | |||
export function saveImgApi(data) { | |||
return request({ | |||
url: `/api/materialMould/save `, | |||
method: 'post', | |||
data | |||
}) | |||
} |
@@ -112,6 +112,29 @@ export function loginByMSMApi(loginParams) { | |||
} | |||
/** | |||
* @description 查询用户邀请码状态 | |||
* @returns data | |||
*/ | |||
export function doFindInviteCode() { | |||
return request({ | |||
url: `/api/inviteCode/find`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 更新邀请码 | |||
* @param {object} inviteCodeData | |||
* @returns data | |||
*/ | |||
export function doUpdateInviteCode(inviteCodeData) { | |||
return request({ | |||
url: `/api/inviteCode/update`, | |||
method: 'post', | |||
data: inviteCodeData | |||
}) | |||
} | |||
@@ -0,0 +1,202 @@ | |||
<template> | |||
<div class="page" style="width: 100%; height: 100%"> | |||
<!-- 上传 --> | |||
<el-upload | |||
show-file-list="false" | |||
:http-request="myUpload" | |||
ref="uploader" | |||
class="avatar-uploader" | |||
accept="image/*" | |||
:before-upload="beforeAvatarUpload" | |||
> | |||
<el-icon class="avatar-uploader-icon"><Plus /></el-icon> | |||
</el-upload> | |||
<!-- 弹框 --> | |||
<el-dialog | |||
get-container="#app" | |||
v-model="dialogVisible" | |||
title="Tips" | |||
width="60%" | |||
:before-close="handleClose" | |||
> | |||
<!-- <img :src="option.img" alt="" /> --> | |||
<!-- 123321 --> | |||
<div style="height: 500px; width: 100%"> | |||
<VueCropper | |||
:style="{ width: '100%', height: '100%' }" | |||
ref="cropper" | |||
:img="option.img" | |||
:outputSize="option.outputSize" | |||
:outputType="option.outputType" | |||
:info="option.info" | |||
:full="option.full" | |||
:autoCropWidth="option.autoCropWidth" | |||
:autoCropHeight="option.autoCropHeight" | |||
:canMove="option.canMove" | |||
:canMoveBox="option.canMoveBox" | |||
:original="option.original" | |||
:autoCrop="option.autoCrop" | |||
:fixed="option.fixed" | |||
:fixedNumber="option.fixedNumber" | |||
:centerBox="option.centerBox" | |||
:infoTrue="option.infoTrue" | |||
:fixedBox="option.fixedBox" | |||
:high="option.high" | |||
:mode="option.mode" | |||
/> | |||
</div> | |||
<!-- 底部按钮 --> | |||
<template #footer> | |||
<span class="dialog-footer"> | |||
<el-button @click="dialogVisible = false">Cancel</el-button> | |||
<el-button type="primary" @click="sendImgData"> Confirm </el-button> | |||
</span> | |||
</template> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<script setup> | |||
// import "vue-cropper/dist/index.css"; | |||
// import { VueCropper } from "vue-cropper"; | |||
import { ElMessage } from "element-plus/es"; | |||
import { ref, reactive } from "vue"; | |||
import { awsImgUpload, saveImgApi } from "../apis/createVideo"; | |||
import { useI18n } from "vue-i18n"; | |||
const { locale } = useI18n(); | |||
const lanChange = ref(locale); | |||
const emit = defineEmits(["reGetpersonBGIList", "reGetpersonSCIList"]); | |||
const props = defineProps({ | |||
type: { | |||
default: 4, | |||
type: Number, | |||
}, | |||
videoType: { | |||
default: 1, | |||
type: Number, | |||
}, | |||
}); | |||
//#region 选择好文件后 | |||
const dialogVisible = ref(false); //弹框显隐 | |||
function beforeAvatarUpload(file) { | |||
let data = window.URL.createObjectURL(file); | |||
option.img = data; //给裁剪图片的路径 | |||
dialogVisible.value = true; | |||
} | |||
// 防止组件自动上传报错 | |||
function myUpload(params) {} | |||
//#endregion ------------------------ | |||
const cropper = ref(null); | |||
const option = reactive({ | |||
img: "", | |||
outputSize: 0.5, //图片质量 | |||
info: false, // 裁剪框的大小信息 | |||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||
outputType: "png", // 裁剪生成图片的格式 | |||
canScale: true, // 图片是否允许滚轮缩放 | |||
autoCrop: true, // 是否默认生成截图框 | |||
autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | |||
autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 | |||
high: true, // 是否按照设备的dpr 输出等比例图片 | |||
fixedBox: false, // 固定截图框大小 不允许改变 | |||
fixed: false, // 是否开启截图框宽高固定比例 | |||
// fixedNumber: [1, 1], // 截图框的宽高比例 | |||
full: true, // 是否输出原图比例的截图 | |||
canMoveBox: true, // 截图框能否拖动 | |||
original: false, // 上传图片按照原始比例渲染 | |||
centerBox: true, // 截图框是否被限制在图片里面 | |||
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||
mode: "100% auto", // 图片默认渲染方式 | |||
}); | |||
//#region 裁剪图片 | |||
const cropperOverData = ref(null); | |||
function sendImgData() { | |||
cropper.value.getCropBlob(async (data) => { | |||
try { | |||
const res = await awsImgUpload(data); | |||
const res2 = await saveImgApi({ | |||
type: props.type, | |||
videoType: props.videoType, | |||
material: res.data.url, | |||
}); | |||
ElMessage.success( | |||
lanChange.value == "zh-cn" | |||
? "图片上传成功!" | |||
: "Picture uploaded successfully!" | |||
); | |||
// 重新获取列表 | |||
if (props.type == 4) { | |||
emit("reGetpersonBGIList"); | |||
dialogVisible.value = false; | |||
} else if (props.type == 5) { | |||
emit("reGetpersonSCIList"); | |||
dialogVisible.value = false; | |||
} | |||
} catch (error) { | |||
ElMessage.error(error.message); | |||
} | |||
}); | |||
} | |||
//#endregion ------------------------ | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
width: 100%; | |||
height: 100%; | |||
opacity: 0; | |||
} | |||
.avatar-uploader { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
:deep(.el-upload--text) { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
:deep(.el-upload) { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
:deep(.el-icon) { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
:deep(.avatar-uploader-icon) { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
</style> | |||
<!-- <style lang="scss" scoped> | |||
.avatar-uploader .avatar { | |||
width: 100%; | |||
height: 200px; | |||
display: block; | |||
overflow: hidden; | |||
} | |||
.avatar-uploader .el-upload { | |||
border: 1px dashed var(--el-border-color); | |||
border-radius: 6px; | |||
cursor: pointer; | |||
position: relative; | |||
overflow: hidden; | |||
transition: var(--el-transition-duration-fast); | |||
} | |||
.avatar-uploader .el-upload:hover { | |||
border-color: var(--el-color-primary); | |||
} | |||
.el-icon.avatar-uploader-icon { | |||
font-size: 28px; | |||
color: #8c939d; | |||
width: 178px; | |||
height: 178px; | |||
text-align: center; | |||
} | |||
:deep(.el-upload-list) { | |||
display: none; | |||
} | |||
</style> --> |
@@ -0,0 +1,128 @@ | |||
<template> | |||
<div style="width: 100%; height: 100%"> | |||
<!-- 上传 --> | |||
<el-upload | |||
:http-request="myUpload" | |||
ref="uploader" | |||
class="avatar-uploader" | |||
accept="image/*" | |||
:before-upload="beforeAvatarUpload" | |||
> | |||
<el-icon class="avatar-uploader-icon"><Plus /></el-icon> | |||
</el-upload> | |||
<!-- 弹框 --> | |||
<el-dialog | |||
get-container="#app" | |||
v-model="dialogVisible" | |||
title="Tips" | |||
width="60%" | |||
:before-close="handleClose" | |||
> | |||
<!-- <img :src="option.img" alt="" /> --> | |||
<!-- 123321 --> | |||
<div style="height: 500px; width: 500px"> | |||
<VueCropper | |||
style="height: 500px; width: 500px" | |||
ref="cropper" | |||
:img="option.img" | |||
:outputSize="option.outputSize" | |||
:outputType="option.outputType" | |||
:info="option.info" | |||
:full="option.full" | |||
:autoCropWidth="option.autoCropWidth" | |||
:autoCropHeight="option.autoCropHeight" | |||
:canMove="option.canMove" | |||
:canMoveBox="option.canMoveBox" | |||
:original="option.original" | |||
:autoCrop="option.autoCrop" | |||
:fixed="option.fixed" | |||
:fixedNumber="option.fixedNumber" | |||
:centerBox="option.centerBox" | |||
:infoTrue="option.infoTrue" | |||
:fixedBox="option.fixedBox" | |||
:high="option.high" | |||
:mode="option.mode" | |||
/> | |||
</div> | |||
<!-- 底部按钮 --> | |||
<template #footer> | |||
<span class="dialog-footer"> | |||
<el-button @click="dialogVisible = false">Cancel</el-button> | |||
<el-button type="primary" @click="dialogVisible = false"> | |||
Confirm | |||
</el-button> | |||
</span> | |||
</template> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<script setup> | |||
import { VueCropper } from "vue-cropper"; | |||
import "vue-cropper/dist/index.css"; | |||
import { ref } from "vue"; | |||
//#region 选择好文件后 | |||
const dialogVisible = ref(true); //弹框显隐 | |||
function beforeAvatarUpload(file) { | |||
let data = window.URL.createObjectURL(file); | |||
option.value.img = data; //给裁剪图片的路径 | |||
dialogVisible.value = true; | |||
} | |||
// 防止组件自动上传报错 | |||
function myUpload(params) {} | |||
//#endregion ------------------------ | |||
const cropper = ref(null); | |||
const option = ref({ | |||
img: "", | |||
outputSize: 0.5, //图片质量 | |||
info: false, // 裁剪框的大小信息 | |||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||
outputType: "png", // 裁剪生成图片的格式 | |||
canScale: true, // 图片是否允许滚轮缩放 | |||
autoCrop: true, // 是否默认生成截图框 | |||
autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | |||
autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 | |||
high: true, // 是否按照设备的dpr 输出等比例图片 | |||
fixedBox: false, // 固定截图框大小 不允许改变 | |||
fixed: false, // 是否开启截图框宽高固定比例 | |||
// fixedNumber: [1, 1], // 截图框的宽高比例 | |||
full: true, // 是否输出原图比例的截图 | |||
canMoveBox: true, // 截图框能否拖动 | |||
original: false, // 上传图片按照原始比例渲染 | |||
centerBox: true, // 截图框是否被限制在图片里面 | |||
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||
mode: "100% auto", // 图片默认渲染方式 | |||
}); | |||
//#region 裁剪图片 | |||
//#endregion ------------------------ | |||
</script> | |||
<style lang="scss" scoped> | |||
.avatar-uploader .avatar { | |||
width: 100%; | |||
height: 200px; | |||
display: block; | |||
} | |||
.avatar-uploader .el-upload { | |||
border: 1px dashed var(--el-border-color); | |||
border-radius: 6px; | |||
cursor: pointer; | |||
position: relative; | |||
overflow: hidden; | |||
transition: var(--el-transition-duration-fast); | |||
} | |||
.avatar-uploader .el-upload:hover { | |||
border-color: var(--el-color-primary); | |||
} | |||
.el-icon.avatar-uploader-icon { | |||
font-size: 28px; | |||
color: #8c939d; | |||
width: 178px; | |||
height: 178px; | |||
text-align: center; | |||
} | |||
</style> |
@@ -39,6 +39,8 @@ export default { | |||
SMSLogin:'SMS login', | |||
pwsLogin:'Account password login', | |||
sendSMS:'Send SMS', | |||
setInvitatioCode:"Invitation Code", | |||
invitatioCode:"Invitation Code", | |||
}, | |||
// 导航栏国际化 | |||
@@ -36,11 +36,13 @@ export default { | |||
oldPwd:'旧密码', | |||
confirmNewPwd:'确认新密码', | |||
confirm:'确定', | |||
gohome:'回到首页', | |||
gohome:'进入首页', | |||
SMSCode:'短信验证码', | |||
SMSLogin:'短信登录', | |||
pwsLogin:'账号密码登录', | |||
sendSMS:'发送短信验证码', | |||
setInvitatioCode:"填写邀请码", | |||
invitatioCode:"邀请码", | |||
}, | |||
// 导航栏国际化 | |||
@@ -18,9 +18,12 @@ import "@/styles/index.scss"; | |||
import "uno.css"; | |||
import "@/styles/my.scss"; // 引入自己定义的样式 | |||
import 'amfe-flexible'; | |||
import ElementPlus from "element-plus"; | |||
// 引入组件 | |||
import myLoading from "@/components/myLoading.vue"; | |||
import myLoadingIcon from "@/components/myLoadingIcon.vue"; | |||
import VueCropper from 'vue-cropper'; | |||
import 'vue-cropper/dist/index.css' | |||
const app = createApp(App); | |||
// 全局注册 自定义指令(directive) | |||
@@ -28,10 +31,9 @@ setupDirective(app); | |||
// 全局注册 状态管理(store) | |||
setupStore(app); | |||
// element | |||
import ElementPlus from "element-plus"; | |||
app.use(ElementPlus); | |||
app.use(router).use(i18n).mount("#app"); | |||
// 注册全局组件 | |||
app.use(router).use(i18n).use(VueCropper).mount("#app"); | |||
// 注册全局组件 .component('VueCropper',VueCropper) | |||
app.component('myLoading',myLoading).component('myLoadingIcon',myLoadingIcon) |
@@ -2,7 +2,6 @@ | |||
export {} | |||
declare global { | |||
const EffectScope: typeof import('vue')['EffectScope'] | |||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | |||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | |||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | |||
@@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' | |||
declare module 'vue' { | |||
interface ComponentCustomProperties { | |||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | |||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | |||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
@@ -8,6 +8,9 @@ export {} | |||
declare module '@vue/runtime-core' { | |||
export interface GlobalComponents { | |||
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | |||
copy: typeof import('./../components/myLoading copy.vue')['default'] | |||
CutImg: typeof import('./../components/cutImg.vue')['default'] | |||
CutImg1: typeof import('./../components/cutImg1.vue')['default'] | |||
ElButton: typeof import('element-plus/es')['ElButton'] | |||
ElCol: typeof import('element-plus/es')['ElCol'] | |||
ElDialog: typeof import('element-plus/es')['ElDialog'] | |||
@@ -25,6 +28,7 @@ declare module '@vue/runtime-core' { | |||
ElTabPane: typeof import('element-plus/es')['ElTabPane'] | |||
ElTabs: typeof import('element-plus/es')['ElTabs'] | |||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | |||
ElUpload: typeof import('element-plus/es')['ElUpload'] | |||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | |||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | |||
IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | |||
@@ -270,11 +270,25 @@ | |||
</div> | |||
<!-- 个人背景图片展示 --> | |||
<div | |||
v-if="bjTabItemActive == 3" | |||
v-if="bjTabItemActive == 2" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMorePersonBGI" | |||
:infinite-scroll-disabled="overLoadpersonBG" | |||
> | |||
<!-- 上传个人背景 --> | |||
<div class="bjSystemBoxItem"> | |||
<img | |||
class="boxCentreImg" | |||
src="../../assets/img/uploadImg.png" | |||
alt="" | |||
/> | |||
<cutImg | |||
@reGetpersonBGIList="reGetpersonBGIList" | |||
:type="4" | |||
:videoType="videoType" | |||
style="width: 100%; height: 100%" | |||
></cutImg> | |||
</div> | |||
<div | |||
class="bjSystemBoxItem" | |||
v-for="item in personBGIList" | |||
@@ -319,11 +333,24 @@ | |||
</div> | |||
<!-- 个人素材图片展示 --> | |||
<div | |||
v-if="scTabItemActive == 3" | |||
v-if="scTabItemActive == 2" | |||
class="bjSystemBox" | |||
v-infinite-scroll="loadMorePersonSCI" | |||
:infinite-scroll-disabled="overLoadpersonSC" | |||
> | |||
<div class="bjSystemBoxItem"> | |||
<img | |||
class="boxCentreImg" | |||
src="../../assets/img/uploadImg.png" | |||
alt="" | |||
/> | |||
<cutImg | |||
@reGetpersonSCIList="reGetpersonSCIList" | |||
:type="5" | |||
:videoType="videoType" | |||
style="width: 100%; height: 100%" | |||
></cutImg> | |||
</div> | |||
<div | |||
class="bjSystemBoxItem" | |||
v-for="item in personSCIList" | |||
@@ -360,6 +387,7 @@ import { useI18n } from "vue-i18n"; | |||
import Recorder from "js-audio-recorder"; //mp3插件 | |||
import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
import { useRoute, useRouter } from "vue-router"; | |||
import cutImg from "@/components/cutImg.vue"; | |||
//#endregion ----------------------------------- | |||
const route = useRoute(); | |||
@@ -677,6 +705,13 @@ watch( | |||
}, | |||
{ deep: true } | |||
); | |||
// 重新获取个人仓库背景图片 | |||
async function reGetpersonBGIList() { | |||
personBGPageNum.value = 1; | |||
overLoadpersonBG.value = true; | |||
await getpersonBGIList(); | |||
} | |||
//#endregion ---------------------------- | |||
//#region 素材 | |||
@@ -735,6 +770,12 @@ async function loadMorePersonSCI() { | |||
personSCPageNum.value = modelPageNum.value - 1; | |||
} | |||
} | |||
// 重新获取个人仓库背景图片 | |||
async function reGetpersonSCIList() { | |||
personSCPageNum.value = 1; | |||
overLoadpersonSC.value = true; | |||
await getpersonSCIList(); | |||
} | |||
//#endregion ---------------------------- | |||
//#region | |||
@@ -1044,6 +1085,21 @@ onMounted(async () => { | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
.bjSystemBoxItemAction { | |||
position: relative; | |||
margin-right: 3%; | |||
margin-bottom: 10px; | |||
width: 30%; | |||
height: 200px; | |||
background-color: #e5e5e5; | |||
border-radius: 10px; | |||
cursor: pointer; | |||
img { | |||
padding: 10px; | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -706,6 +706,79 @@ | |||
</div> | |||
</div> | |||
</el-form> | |||
<!-- 邀请码填写 isLogin == 8--> | |||
<el-form | |||
v-if="isLogin == 8" | |||
ref="loginFormRef" | |||
:model="loginData7" | |||
:rules="loginRules" | |||
class="login-form" | |||
> | |||
<div class="flex text-white items-center"> | |||
<span class="flex-1 text-center">{{ | |||
$t("login.title") + " " + $t("login.setInvitatioCode") | |||
}}</span> | |||
<el-tooltip | |||
class="box-item" | |||
effect="dark" | |||
:content="$t('navbar.LanguageChange')" | |||
placement="top-start" | |||
> | |||
<lang-select class="navItem" style="color: #ffffff" /> | |||
</el-tooltip> | |||
</div> | |||
<el-form-item prop="verifyCode"> | |||
<div class="text-white"> | |||
<svg-icon icon-class="user" /> | |||
</div> | |||
<el-input | |||
class="flex-1" | |||
ref="invitatioCode" | |||
size="large" | |||
v-model="loginData8.invitatioCode" | |||
:placeholder="$t('login.invitatioCode')" | |||
name="invitatioCode" | |||
/> | |||
</el-form-item> | |||
<el-button | |||
size="default" | |||
:loading="loading" | |||
type="primary" | |||
class="loginBtn" | |||
@click.prevent="handleInvitatioCode" | |||
> | |||
<el-icon | |||
v-if="isLogining" | |||
style="margin-right: 10px" | |||
class="is-loading" | |||
> | |||
<svg | |||
viewBox="0 0 1024 1024" | |||
xmlns="http://www.w3.org/2000/svg" | |||
data-v-ea893728="" | |||
> | |||
<path | |||
fill="currentColor" | |||
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | |||
></path> | |||
</svg> | |||
</el-icon> | |||
{{ $t("login.confirm") }} | |||
</el-button> | |||
<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | |||
<div style="margin-bottom: 5px" @click="loginFlag(1)"> | |||
<span class="join">{{ $t("login.signIn") }}</span> | |||
</div> | |||
<div style="margin-bottom: 5px"> | |||
<span class="join" @click="router.push('/createVideo')">{{ | |||
$t("login.gohome") | |||
}}</span> | |||
</div> | |||
</div> | |||
</el-form> | |||
</div> | |||
</template> | |||
@@ -723,6 +796,8 @@ import { | |||
resetPwdFormApi, | |||
getSMSToLoginApi, | |||
loginByMSMApi, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
} from "@/apis/login"; | |||
import axios from "axios"; | |||
// 状态管理依赖 | |||
@@ -803,6 +878,9 @@ const loginData7 = ref({ | |||
email: "", | |||
verifyCode: "", | |||
}); | |||
const loginData8 = ref({ | |||
invitatioCode: "", | |||
}); | |||
const loginRules = ref({ | |||
email: [ | |||
{ | |||
@@ -826,6 +904,16 @@ const loginRules = ref({ | |||
: "Please input verifyCode", | |||
}, | |||
], | |||
invitatioCode: [ | |||
{ | |||
required: true, | |||
trigger: "blur", | |||
message: | |||
currentLan.value == "zh-cn" | |||
? "请输入邀请码" | |||
: "Please input invitation code", | |||
}, | |||
], | |||
oldPassword: [ | |||
{ required: true, trigger: "blur", validator: passwordValidator }, | |||
], | |||
@@ -1203,15 +1291,16 @@ async function doLoginByMSM(data: any) { | |||
const msg = | |||
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | |||
await loginByMSMApi(data) | |||
.then((res: any) => { | |||
.then(async (res: any) => { | |||
console.log(res, "res"); | |||
localStorage.setItem("AccessToken", res.data.token); | |||
saveInfo(data); | |||
isLogining.value = false; | |||
// await checkInviteCode(); | |||
ElMessage.success(msg); | |||
router.push("/createVideo"); | |||
// 注册成功将账号密码保存到本地 | |||
saveInfo(data); | |||
isLogining.value = false; | |||
userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
}) | |||
.catch((err) => { | |||
console.log(err, "err"); | |||
@@ -1226,6 +1315,56 @@ async function doLoginByMSM(data: any) { | |||
} | |||
//#endregion -------------------------- | |||
//#region 查询邀请码 表单8 | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async function checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode(); | |||
// console.log(res, '查询用户邀请码数据') | |||
const status = res.data.status; | |||
// 当没有邀请码时,切换输入验证码页面 | |||
if (status == 0) { | |||
isLogin.value = 8; | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
ElMessage.success( | |||
'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"' | |||
); | |||
router.push({ | |||
path: "/createVideo", | |||
}); | |||
} else { | |||
router.push("/createVideo"); | |||
} | |||
} catch (error: any) { | |||
console.log(error, "error"); | |||
ElMessage.error(error.message); | |||
} | |||
} | |||
// 填写邀请码 | |||
async function handleInvitatioCode() { | |||
const data = { | |||
inviteCode: loginData8.value.invitatioCode, | |||
}; | |||
try { | |||
const res = await doUpdateInviteCode(data); | |||
userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
ElMessage.success( | |||
'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"' | |||
); | |||
router.push({ | |||
path: "/createVideo", | |||
}); | |||
} catch (error: any) { | |||
console.log(error, "error"); | |||
ElMessage.error(error.message); | |||
} | |||
} | |||
//#endregion ----------------------- | |||
function getCode() { | |||
showCodeImg.value = false; | |||
axios({ | |||
@@ -1273,15 +1412,16 @@ async function doLogin(data: any) { | |||
const msg = | |||
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | |||
await login(data) | |||
.then((res) => { | |||
.then(async (res) => { | |||
console.log(res, "res"); | |||
localStorage.setItem("AccessToken", res.data.token); | |||
ElMessage.success(msg); | |||
router.push("/createVideo"); | |||
// 注册成功将账号密码保存到本地 | |||
saveInfo(data); | |||
isLogining.value = false; | |||
// await checkInviteCode(); | |||
userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
ElMessage.success(msg); | |||
router.push("/createVideo"); | |||
}) | |||
.catch((err) => { | |||
console.log(err, "err"); | |||