| @@ -33,6 +33,7 @@ | |||||
| "postcss-pxtorem": "^6.0.0", | "postcss-pxtorem": "^6.0.0", | ||||
| "screenfull": "^6.0.0", | "screenfull": "^6.0.0", | ||||
| "vue": "^3.2.45", | "vue": "^3.2.45", | ||||
| "vue-cropper": "^1.0.9", | |||||
| "vue-i18n": "9", | "vue-i18n": "9", | ||||
| "vue-router": "^4.0.13" | "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', | SMSLogin:'SMS login', | ||||
| pwsLogin:'Account password login', | pwsLogin:'Account password login', | ||||
| sendSMS:'Send SMS', | sendSMS:'Send SMS', | ||||
| setInvitatioCode:"Invitation Code", | |||||
| invitatioCode:"Invitation Code", | |||||
| }, | }, | ||||
| // 导航栏国际化 | // 导航栏国际化 | ||||
| @@ -36,11 +36,13 @@ export default { | |||||
| oldPwd:'旧密码', | oldPwd:'旧密码', | ||||
| confirmNewPwd:'确认新密码', | confirmNewPwd:'确认新密码', | ||||
| confirm:'确定', | confirm:'确定', | ||||
| gohome:'回到首页', | |||||
| gohome:'进入首页', | |||||
| SMSCode:'短信验证码', | SMSCode:'短信验证码', | ||||
| SMSLogin:'短信登录', | SMSLogin:'短信登录', | ||||
| pwsLogin:'账号密码登录', | pwsLogin:'账号密码登录', | ||||
| sendSMS:'发送短信验证码', | sendSMS:'发送短信验证码', | ||||
| setInvitatioCode:"填写邀请码", | |||||
| invitatioCode:"邀请码", | |||||
| }, | }, | ||||
| // 导航栏国际化 | // 导航栏国际化 | ||||
| @@ -18,9 +18,12 @@ import "@/styles/index.scss"; | |||||
| import "uno.css"; | import "uno.css"; | ||||
| import "@/styles/my.scss"; // 引入自己定义的样式 | import "@/styles/my.scss"; // 引入自己定义的样式 | ||||
| import 'amfe-flexible'; | import 'amfe-flexible'; | ||||
| import ElementPlus from "element-plus"; | |||||
| // 引入组件 | // 引入组件 | ||||
| import myLoading from "@/components/myLoading.vue"; | import myLoading from "@/components/myLoading.vue"; | ||||
| import myLoadingIcon from "@/components/myLoadingIcon.vue"; | import myLoadingIcon from "@/components/myLoadingIcon.vue"; | ||||
| import VueCropper from 'vue-cropper'; | |||||
| import 'vue-cropper/dist/index.css' | |||||
| const app = createApp(App); | const app = createApp(App); | ||||
| // 全局注册 自定义指令(directive) | // 全局注册 自定义指令(directive) | ||||
| @@ -28,10 +31,9 @@ setupDirective(app); | |||||
| // 全局注册 状态管理(store) | // 全局注册 状态管理(store) | ||||
| setupStore(app); | setupStore(app); | ||||
| // element | // element | ||||
| import ElementPlus from "element-plus"; | |||||
| app.use(ElementPlus); | 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) | app.component('myLoading',myLoading).component('myLoadingIcon',myLoadingIcon) | ||||
| @@ -2,7 +2,6 @@ | |||||
| export {} | export {} | ||||
| declare global { | declare global { | ||||
| const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
| @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' | |||||
| declare module 'vue' { | declare module 'vue' { | ||||
| interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | 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 ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
| @@ -8,6 +8,9 @@ export {} | |||||
| declare module '@vue/runtime-core' { | declare module '@vue/runtime-core' { | ||||
| export interface GlobalComponents { | export interface GlobalComponents { | ||||
| Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | 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'] | ElButton: typeof import('element-plus/es')['ElButton'] | ||||
| ElCol: typeof import('element-plus/es')['ElCol'] | ElCol: typeof import('element-plus/es')['ElCol'] | ||||
| ElDialog: typeof import('element-plus/es')['ElDialog'] | ElDialog: typeof import('element-plus/es')['ElDialog'] | ||||
| @@ -25,6 +28,7 @@ declare module '@vue/runtime-core' { | |||||
| ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
| ElTabs: typeof import('element-plus/es')['ElTabs'] | ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
| ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ||||
| ElUpload: typeof import('element-plus/es')['ElUpload'] | |||||
| GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
| Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
| IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
| @@ -270,11 +270,25 @@ | |||||
| </div> | </div> | ||||
| <!-- 个人背景图片展示 --> | <!-- 个人背景图片展示 --> | ||||
| <div | <div | ||||
| v-if="bjTabItemActive == 3" | |||||
| v-if="bjTabItemActive == 2" | |||||
| class="bjSystemBox" | class="bjSystemBox" | ||||
| v-infinite-scroll="loadMorePersonBGI" | v-infinite-scroll="loadMorePersonBGI" | ||||
| :infinite-scroll-disabled="overLoadpersonBG" | :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 | <div | ||||
| class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
| v-for="item in personBGIList" | v-for="item in personBGIList" | ||||
| @@ -319,11 +333,24 @@ | |||||
| </div> | </div> | ||||
| <!-- 个人素材图片展示 --> | <!-- 个人素材图片展示 --> | ||||
| <div | <div | ||||
| v-if="scTabItemActive == 3" | |||||
| v-if="scTabItemActive == 2" | |||||
| class="bjSystemBox" | class="bjSystemBox" | ||||
| v-infinite-scroll="loadMorePersonSCI" | v-infinite-scroll="loadMorePersonSCI" | ||||
| :infinite-scroll-disabled="overLoadpersonSC" | :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 | <div | ||||
| class="bjSystemBoxItem" | class="bjSystemBoxItem" | ||||
| v-for="item in personSCIList" | v-for="item in personSCIList" | ||||
| @@ -360,6 +387,7 @@ import { useI18n } from "vue-i18n"; | |||||
| import Recorder from "js-audio-recorder"; //mp3插件 | import Recorder from "js-audio-recorder"; //mp3插件 | ||||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | import imageCompression from "browser-image-compression"; //压缩图片插件 | ||||
| import { useRoute, useRouter } from "vue-router"; | import { useRoute, useRouter } from "vue-router"; | ||||
| import cutImg from "@/components/cutImg.vue"; | |||||
| //#endregion ----------------------------------- | //#endregion ----------------------------------- | ||||
| const route = useRoute(); | const route = useRoute(); | ||||
| @@ -677,6 +705,13 @@ watch( | |||||
| }, | }, | ||||
| { deep: true } | { deep: true } | ||||
| ); | ); | ||||
| // 重新获取个人仓库背景图片 | |||||
| async function reGetpersonBGIList() { | |||||
| personBGPageNum.value = 1; | |||||
| overLoadpersonBG.value = true; | |||||
| await getpersonBGIList(); | |||||
| } | |||||
| //#endregion ---------------------------- | //#endregion ---------------------------- | ||||
| //#region 素材 | //#region 素材 | ||||
| @@ -735,6 +770,12 @@ async function loadMorePersonSCI() { | |||||
| personSCPageNum.value = modelPageNum.value - 1; | personSCPageNum.value = modelPageNum.value - 1; | ||||
| } | } | ||||
| } | } | ||||
| // 重新获取个人仓库背景图片 | |||||
| async function reGetpersonSCIList() { | |||||
| personSCPageNum.value = 1; | |||||
| overLoadpersonSC.value = true; | |||||
| await getpersonSCIList(); | |||||
| } | |||||
| //#endregion ---------------------------- | //#endregion ---------------------------- | ||||
| //#region | //#region | ||||
| @@ -1044,6 +1085,21 @@ onMounted(async () => { | |||||
| max-width: 100%; | max-width: 100%; | ||||
| max-height: 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> | ||||
| </div> | </div> | ||||
| </el-form> | </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> | </div> | ||||
| </template> | </template> | ||||
| @@ -723,6 +796,8 @@ import { | |||||
| resetPwdFormApi, | resetPwdFormApi, | ||||
| getSMSToLoginApi, | getSMSToLoginApi, | ||||
| loginByMSMApi, | loginByMSMApi, | ||||
| doFindInviteCode, | |||||
| doUpdateInviteCode, | |||||
| } from "@/apis/login"; | } from "@/apis/login"; | ||||
| import axios from "axios"; | import axios from "axios"; | ||||
| // 状态管理依赖 | // 状态管理依赖 | ||||
| @@ -803,6 +878,9 @@ const loginData7 = ref({ | |||||
| email: "", | email: "", | ||||
| verifyCode: "", | verifyCode: "", | ||||
| }); | }); | ||||
| const loginData8 = ref({ | |||||
| invitatioCode: "", | |||||
| }); | |||||
| const loginRules = ref({ | const loginRules = ref({ | ||||
| email: [ | email: [ | ||||
| { | { | ||||
| @@ -826,6 +904,16 @@ const loginRules = ref({ | |||||
| : "Please input verifyCode", | : "Please input verifyCode", | ||||
| }, | }, | ||||
| ], | ], | ||||
| invitatioCode: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "blur", | |||||
| message: | |||||
| currentLan.value == "zh-cn" | |||||
| ? "请输入邀请码" | |||||
| : "Please input invitation code", | |||||
| }, | |||||
| ], | |||||
| oldPassword: [ | oldPassword: [ | ||||
| { required: true, trigger: "blur", validator: passwordValidator }, | { required: true, trigger: "blur", validator: passwordValidator }, | ||||
| ], | ], | ||||
| @@ -1203,15 +1291,16 @@ async function doLoginByMSM(data: any) { | |||||
| const msg = | const msg = | ||||
| currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | ||||
| await loginByMSMApi(data) | await loginByMSMApi(data) | ||||
| .then((res: any) => { | |||||
| .then(async (res: any) => { | |||||
| console.log(res, "res"); | console.log(res, "res"); | ||||
| localStorage.setItem("AccessToken", res.data.token); | localStorage.setItem("AccessToken", res.data.token); | ||||
| saveInfo(data); | |||||
| isLogining.value = false; | |||||
| // await checkInviteCode(); | |||||
| ElMessage.success(msg); | ElMessage.success(msg); | ||||
| router.push("/createVideo"); | router.push("/createVideo"); | ||||
| // 注册成功将账号密码保存到本地 | // 注册成功将账号密码保存到本地 | ||||
| saveInfo(data); | |||||
| isLogining.value = false; | |||||
| userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| console.log(err, "err"); | console.log(err, "err"); | ||||
| @@ -1226,6 +1315,56 @@ async function doLoginByMSM(data: any) { | |||||
| } | } | ||||
| //#endregion -------------------------- | //#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() { | function getCode() { | ||||
| showCodeImg.value = false; | showCodeImg.value = false; | ||||
| axios({ | axios({ | ||||
| @@ -1273,15 +1412,16 @@ async function doLogin(data: any) { | |||||
| const msg = | const msg = | ||||
| currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | ||||
| await login(data) | await login(data) | ||||
| .then((res) => { | |||||
| .then(async (res) => { | |||||
| console.log(res, "res"); | console.log(res, "res"); | ||||
| localStorage.setItem("AccessToken", res.data.token); | localStorage.setItem("AccessToken", res.data.token); | ||||
| ElMessage.success(msg); | |||||
| router.push("/createVideo"); | |||||
| // 注册成功将账号密码保存到本地 | // 注册成功将账号密码保存到本地 | ||||
| saveInfo(data); | saveInfo(data); | ||||
| isLogining.value = false; | isLogining.value = false; | ||||
| // await checkInviteCode(); | |||||
| userInfoPinia.getUserInfo(); //保存邮箱到pinia | userInfoPinia.getUserInfo(); //保存邮箱到pinia | ||||
| ElMessage.success(msg); | |||||
| router.push("/createVideo"); | |||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| console.log(err, "err"); | console.log(err, "err"); | ||||