congzc 1 år sedan
förälder
incheckning
239dc34359
7 ändrade filer med 476 tillägg och 312 borttagningar
  1. +28
    -199
      src/apis/createVideo.js
  2. +32
    -0
      src/apis/login.js
  3. +20
    -2
      src/lang/package/en.ts
  4. +22
    -2
      src/lang/package/zh-cn.ts
  5. +168
    -93
      src/views/createVideo/index.vue
  6. +197
    -1
      src/views/login/index.vue
  7. +9
    -15
      src/views/moveImg/index.vue

+ 28
- 199
src/apis/createVideo.js Visa fil

@@ -13,166 +13,6 @@ export function modeListApi(sex, pageNum, pageSize) {
})
}

/**
* @description 查询系统背景
* @returns pageNum,pageSize,videoType
*/
export function systemBGIListApi(pageNum, pageSize, videoType) {
return request({
url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get',
})
}
/**
* @description 查询我上传的背景
* @returns pageNum,pageSize,videoType
*/
export function personBGIListApi(pageNum, pageSize, videoType) {
return request({
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get',
})
}

/**
* @description 获取系统素材列表
* @param sex ,pageNum,pageSize
* @returns data
*/
export function systemSCIListApi(pageNum, pageSize) {
return request({
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'get'
})
}

/**
* @description 查询我上传的素材
* @returns pageNum,pageSize,videoType
*/
export function personSCIListApi(pageNum, pageSize, videoType) {
return request({
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get',
})
}

















/**
* @description 获取人脸列表
* @params pageNum, pageSize
* @returns data
*/
export function personPhotoList(pageNum, pageSize, sendType) {
return request({
url: `api/personPhoto/list?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`,
method: 'get'
})
}

/**
* @description 获取人脸列表
* @params pageNum, pageSize
* @returns data
*/
export function personPhotoUserListList(pageNum, pageSize, sendType) {
return request({
url: `api/personPhoto/userList?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`,
method: 'get'
})
}

/**
* @description 上传图片
* @params data
* @returns data
*/
export function awsImgUpload(data) {
return request({
url: `/api/upload/awsImgUpload`,
method: 'post',
data
})
}
/**
* @description 上传图片
* @params data
* @returns data
*/
export function saveImgApi(data) {
return request({
url: `/api/personPhoto/save`,
method: 'post',
data
})
}

/**
* @description 删除图片
* @params id
* @returns data
*/
export function delImgApi(id) {
return request({
url: `api/personPhoto/del?id=${id}`,
method: 'get',
})
}

/**
* @description 上传视频
* @params data
* @returns data
*/
export function videoUpload(data) {
return request({
url: `api/video/upload`,
method: 'post',
data
})
}

/**
* @description 获取视频上传进度
* @params videoId
* @returns data
*/
export function uploadProgressApi(videoId) {
return request({
url: `api/video/uploadProgress?videoId=${videoId}`,
method: 'GET',
})
}

/**
* @description 保存音频
* @params videoId
* @returns data
*/
export function saveAudioApi(data) {
return request({
url: `/api/voiceMaterial/save`,
method: 'post',
data
})
}


/**
* @description 获取语言
* @params
@@ -198,71 +38,60 @@ export function chooseTypeApi(id) {
}

/**
* @description 试听
* @params id
* @returns data
* @description 查询系统背景 &videoType=${videoType}
* @returns pageNum,pageSize,videoType
*/
// export function previewAudioApi(genTxt, voiceId, voiceStyle) {
// return request({
// url: `api/voiceMould/preview?genTxt=${genTxt}&voiceId=${voiceId}&voiceStyle=${voiceStyle}`,
// method: 'GET',
// })
// }
export function previewAudioApi(gen_txt, voice_id, voice_style) {
export function systemBGIListApi(pageNum, pageSize, videoType) {
return request({
url: `api/voiceMould/preview`,
method: 'POST',
data: { gen_txt, voice_id, voice_style }
url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get',
})
}

/**
* @description 保存生成视频数据
* @params data
* @returns data
* @description 查询我上传的背景 &videoType=${videoType}
* @returns pageNum,pageSize,videoType
*/
export function saveOrUpdateApi(data) {
export function personBGIListApi(pageNum, pageSize, videoType) {
return request({
url: `/api/userPhotoVideo/saveOrUpdate`,
method: 'POST',
data
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get',
})
}

/**
* @description 生成视频
* @params data
* @description 获取系统素材列表
* @param pageNum,pageSize
* @returns data
*/
export function createVideoApi(data) {
export function systemSCIListApi(pageNum, pageSize) {
return request({
url: `/api/userPhotoVideo/createVideo`,
method: 'POST',
data
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'get',
})
}


/**
* @description 根据作品id查询作品信息
* @params data
* @returns data
* @description 查询我上传的素材
* @returns pageNum,pageSize,
*/
export function findByIdApi(id) {
export function personSCIListApi(pageNum, pageSize) {
return request({
url: `/api/userPhotoVideo/findById?id=${id}`,
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'get',
})
}


/**
* @description 获取音乐列表
* @params data
* @description 试听
* @params id
* @returns data
*/
export function musicListApi() {
export function previewAudioApi(gen_txt, voice_id, voice_style) {
return request({
url: `api/userPhotoVideo/music`,
method: 'get',
url: `api/voiceMould/preview`,
method: 'POST',
data: { gen_txt, voice_id, voice_style }
})
}
}


+ 32
- 0
src/apis/login.js Visa fil

@@ -86,6 +86,38 @@ export function doUpdPassApi(loginParams) {
})
}

/**
* @description 获取手机验证码
* @param {number} phone
* @returns data
*/
export function getSMSToLoginApi(phone) {
return request({
url: `/api/user/sendLoginPhoneCode?phone=${phone}`,
method: 'get'
})
}

/**
* @description 短信验证码登录
* @param {object} loginParams (phone,code)
* @returns data
*/
export function loginByMSMApi(loginParams) {
return request({
url: `/api/user/doLoginByPhone`,
method: 'post',
data: loginParams
})
}









/**
/**


+ 20
- 2
src/lang/package/en.ts Visa fil

@@ -35,7 +35,10 @@ export default {
confirmNewPwd:'Confirm new password',
confirm:'Confirm',
gohome:'Back to home page',
SMSCode:'SMS Code'
SMSCode:'SMS Code',
SMSLogin:'SMS login',
pwsLogin:'Account password login',
sendSMS:'Send SMS',
},

// 导航栏国际化
@@ -71,7 +74,22 @@ export default {
Aipicture:'Ai-generated pictures',
AipictureTip:'Please customize your picture',
chooseMusic:'Choose music',
searchMusic:'Search music'
searchMusic:'Search music',
copywriting:'Copywriting',
BackgroundImage:'Background Image',
material:'Material',
subtitles:'Subtitles',
sex:"Sex",
videoRatio:"Video Ratio",
all:'All',
male:'Male',
female:'Female',
landscape:'Landscape',
portrait:'Portrait',
systemBGI:'System background diagram',
personBGI:'Person background diagram',
systemMaterial:'System Material',
personMaterial:'Person Material',
},

// 我的视频


+ 22
- 2
src/lang/package/zh-cn.ts Visa fil

@@ -23,8 +23,10 @@ export default {
loginBtn: "登 录",
registerBtn: "注 册",
verifyCode: "验证码",
signIn: "已有账号?现在登录!",
signUp: "没有账号?现在加入!",
// signIn: "已有账号?现在登录!",
// signUp: "没有账号?现在加入!",
signIn: "立即登录",
signUp: "立即注册",
forgetPwd: "忘记密码",
forgetPwdTitle:'忘记密码',
SendEmail:'发送短信验证码',
@@ -36,6 +38,9 @@ export default {
confirm:'确定',
gohome:'回到首页',
SMSCode:'短信验证码',
SMSLogin:'短信登录',
pwsLogin:'账号密码登录',
sendSMS:'发送短信验证码',
},

// 导航栏国际化
@@ -72,6 +77,21 @@ export default {
AipictureTip:'请自定义您的图片',
chooseMusic:'选择音乐',
searchMusic:'搜索音乐',
copywriting:'文案',
BackgroundImage:'背景',
material:'素材',
subtitles:'字幕',
sex:"性别",
videoRatio:"视频比例",
all:'全部',
male:'男性',
female:'女性',
landscape:'横屏',
portrait:'竖屏',
systemBGI:'系统背景',
personBGI:'个人背景',
systemMaterial:'系统素材',
personMaterial:'个人素材',
},

// 我的视频


+ 168
- 93
src/views/createVideo/index.vue Visa fil

@@ -21,68 +21,53 @@
>
<
</div>
<!-- 箭头 -->
<!-- <div
v-if="showChooseModel && videoType"
class="openChooseModel"
@click="showChooseModel = false"
>
<img src="../../assets/img/arrowLeft.png" alt="" />
</div>
<div
v-if="!showChooseModel"
class="closeChooseModel"
@click="showChooseModel = true"
>
<img src="../../assets/img/arrowRight.png" alt="" />
</div> -->
<!-- tab栏 -->
<p>性别</p>
<p>{{ $t("createVideo.sex") }}</p>
<div class="tab" v-show="showChooseModel">
<div
class="tabItem"
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''"
@click="changeTabSex(0)"
>
全部
{{ $t("createVideo.all") }}
</div>
<div
class="tabItem"
:class="modelTabItemActive == 1 ? 'tabItemActive' : ''"
@click="changeTabSex(1)"
>
男性
{{ $t("createVideo.male") }}
</div>
<div
class="tabItem"
:class="modelTabItemActive == 2 ? 'tabItemActive' : ''"
@click="changeTabSex(2)"
>
女性
{{ $t("createVideo.female") }}
</div>
</div>
<p>视频比例</p>
<p>{{ $t("createVideo.videoRatio") }}</p>
<div class="tab" v-show="showChooseModel">
<div
class="tabItem"
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''"
@click="changeTabVideoType(0)"
>
全部
{{ $t("createVideo.all") }}
</div>
<div
class="tabItem"
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''"
@click="changeTabVideoType(2)"
>
横屏
{{ $t("createVideo.landscape") }}
</div>
<div
class="tabItem"
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''"
@click="changeTabVideoType(1)"
>
竖屏
{{ $t("createVideo.portrait") }}
</div>
</div>
<!-- 模版列表 -->
@@ -124,28 +109,28 @@
:class="tabItemActive == 1 ? 'tabItemActive' : ''"
@click="tabItemActive = 1"
>
文案
{{ $t("createVideo.copywriting") }}
</div>
<div
class="tabItem"
:class="tabItemActive == 2 ? 'tabItemActive' : ''"
@click="tabItemActive = 2"
>
背景
{{ $t("createVideo.BackgroundImage") }}
</div>
<div
class="tabItem"
:class="tabItemActive == 3 ? 'tabItemActive' : ''"
@click="tabItemActive = 3"
>
素材
{{ $t("createVideo.material") }}
</div>
<div
class="tabItem"
:class="tabItemActive == 4 ? 'tabItemActive' : ''"
@click="tabItemActive = 4"
>
字幕
{{ $t("createVideo.subtitles") }}
</div>
</div>
<!-- 文案 只能使用v-if,不能使用v-show-->
@@ -171,13 +156,13 @@
type="textarea"
:placeholder="$t('createVideo.aiText')"
/>

<span
class="pointer"
@click="getPreviewAudio"
style="margin-right: 10px; font-size: 20px"
>🔊</span
class="pointer"
@click="insertIcon"
>🕗</span
>
<span class="pointer" @click="insertIcon">🕗</span>
</div>
<p>{{ $t("createVideo.languages") }}</p>
<!-- 语言 -->
@@ -190,7 +175,7 @@
<el-option
v-for="item in languageOptions"
:key="item.value"
:label="item.name"
:label="lanChange == 'zh-cn' ? item.chineseName : item.name"
:value="item.id"
>
<img
@@ -198,7 +183,9 @@
alt=""
style="width: 20px; margin-right: 10px; vertical-align: text-top"
/>
<span style="line-height: 20px">{{ item.name }}</span>
<span style="line-height: 20px">{{
lanChange == "zh-cn" ? item.chineseName : item.name
}}</span>
</el-option>
</el-select>
<p>{{ $t("createVideo.voices") }}</p>
@@ -213,7 +200,13 @@
<el-option
v-for="item in soundOptions"
:key="item.value"
:label="item.displayName"
:label="
(lanChange == 'zh-cn'
? item.displayName + `&nbsp; (${item.sex == 1 ? '男' : '女'})`
: item.localName +
`&nbsp; (${item.sex == 1 ? 'male' : 'female'})`) +
returnAge(item.ageType)
"
:value="item.id"
/>
</el-select>
@@ -227,10 +220,19 @@
>
<el-option
v-for="item in soundStyleOptions"
:key="item"
:label="item"
:value="item"
/>
:key="item.name"
:label="lanChange == 'zh-cn' ? item.name : item.engName"
:value="item.name"
>
<div style="padding: 0 20px">
{{ lanChange == "zh-cn" ? item.name : item.engName }}
<span
style="float: right; cursor: pointer"
@click.stop="ListenVoices(item.url)"
>🔊</span
>
</div>
</el-option>
</el-select>
</div>
<!-- 背景 -->
@@ -241,18 +243,19 @@
:class="bjTabItemActive == 1 ? 'tabItemActive' : ''"
@click="bjTabItemActive = 1"
>
系统背景
{{ $t("createVideo.systemBGI") }}
</div>
<div
class="tabItem"
:class="bjTabItemActive == 2 ? 'tabItemActive' : ''"
@click="bjTabItemActive = 2"
>
个人背景
{{ $t("createVideo.personBGI") }}
</div>
</div>
<!-- 背景图片展示 -->
<!-- 系统背景图片展示 -->
<div
v-if="bjTabItemActive == 1"
class="bjSystemBox"
v-infinite-scroll="loadMoreSystemBGI"
:infinite-scroll-disabled="overLoadSystemBG"
@@ -265,6 +268,21 @@
<img class="boxCentreImg" :src="item.material" alt="" />
</div>
</div>
<!-- 个人背景图片展示 -->
<div
v-if="bjTabItemActive == 3"
class="bjSystemBox"
v-infinite-scroll="loadMorePersonBGI"
:infinite-scroll-disabled="overLoadpersonBG"
>
<div
class="bjSystemBoxItem"
v-for="item in personBGIList"
:key="item.id"
>
<img class="boxCentreImg" :src="item.material" alt="" />
</div>
</div>
</div>
<!-- 素材 -->
<div v-if="tabItemActive == 3" class="tabContent tab3">
@@ -274,18 +292,19 @@
:class="scTabItemActive == 1 ? 'tabItemActive' : ''"
@click="scTabItemActive = 1"
>
系统素材
{{ $t("createVideo.systemMaterial") }}
</div>
<div
class="tabItem"
:class="scTabItemActive == 2 ? 'tabItemActive' : ''"
@click="scTabItemActive = 2"
>
个人素材
{{ $t("createVideo.personMaterial") }}
</div>
</div>
<!-- 素材图片展示 -->
<!-- 系统素材图片展示 -->
<div
v-if="scTabItemActive == 1"
class="bjSystemBox"
v-infinite-scroll="loadMoreSystemSCI"
:infinite-scroll-disabled="overLoadSystemSC"
@@ -298,6 +317,21 @@
<img class="boxCentreImg" :src="item.material" alt="" />
</div>
</div>
<!-- 个人素材图片展示 -->
<div
v-if="scTabItemActive == 3"
class="bjSystemBox"
v-infinite-scroll="loadMorePersonSCI"
:infinite-scroll-disabled="overLoadpersonSC"
>
<div
class="bjSystemBoxItem"
v-for="item in personSCIList"
:key="item.id"
>
<img class="boxCentreImg" :src="item.material" alt="" />
</div>
</div>
</div>
<!-- 字幕 -->
<div v-if="tabItemActive == 4" class="tabContent"></div>
@@ -332,6 +366,11 @@ const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);
// ElMessage.error(
// lanChange.value == "zh-cn"
// ? `您还没有输入文案`
// : `You have not entered the copy yet`
// );

const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录

@@ -462,16 +501,7 @@ const language = ref(""); //选择的语言
const sound = ref(""); // 选择的声音
const soundStyle = ref(""); //选择的风格
// 语言下拉框内容
const languageOptions = ref([
{
id: "0",
name: "中文",
},
{
id: "1",
name: "English",
},
]);
const languageOptions = ref([]);
async function voiceTotal() {
const res = await voiceTotalApi();
languageOptions.value = res.data;
@@ -531,13 +561,58 @@ async function getPreviewAudio() {
ElMessage.error(error);
}
}
// 根据ageType返回年龄
function returnAge(ageType) {
if (!ageType) {
return "";
} else if (ageType == 1) {
if (lanChange.value == "zh-cn") {
return " 儿童";
} else {
return "Child";
}
} else if (ageType == 2) {
if (lanChange.value == "zh-cn") {
return " 少年";
} else {
return "Teen";
}
} else if (ageType == 3) {
if (lanChange.value == "zh-cn") {
return " 年轻";
} else {
return "YoungAdult";
}
} else if (ageType == 4) {
if (lanChange.value == "zh-cn") {
return " 中年";
} else {
return "OlderAdult";
}
} else if (ageType == 5) {
if (lanChange.value == "zh-cn") {
return " 老年";
} else {
return "Senior";
}
}
}
// 新的试听
function ListenVoices(url) {
previewAudioUrl.value = url;
let audioA = document.getElementById("audio");
audioA.addEventListener("loadedmetadata", async () => {
audioA.muted = false; // 将 muted 属性设置为 false
await audioA.play();
});
}
//#endregion ----------------------------

//#region 背景
const bjTabItemActive = ref(1); //系统或个人tab高亮
const systemBGIList = ref([]); //系统背景列表
const systemBGPageNum = ref(1); //系统背景页数
const overLoadSystemBG = ref(true);
const overLoadSystemBG = ref(true); //禁止系统背景触底刷新
async function getSystemBGIList() {
const res = await systemBGIListApi(
systemBGPageNum.value,
@@ -561,19 +636,11 @@ async function loadMoreSystemBGI() {
systemBGPageNum.value = modelPageNum.value - 1;
}
}
// 当横屏竖屏改变时,重新获取背景列表
watch(
() => videoType,
(newValue, oldValue) => {
systemBGPageNum.value = 1;
getSystemBGIList();
},
{ deep: true }
);

// 个人背景
const personBGIList = ref([]); //系统背景列表
const personBGPageNum = ref(1); //系统背景页数
const overLoadpersonBG = ref(true);
const personBGIList = ref([]); //个人背景列表
const personBGPageNum = ref(1); //个人背景页数
const overLoadpersonBG = ref(true); //禁止个人背景触底刷新
async function getpersonBGIList() {
const res = await personBGIListApi(
personBGPageNum.value,
@@ -583,7 +650,7 @@ async function getpersonBGIList() {
personBGIList.value = res.data.list;
overLoadpersonBG.value = false;
}
// 加载更多系统背景图
// 加载更多个人背景图
async function loadMorePersonBGI() {
personBGPageNum.value += 1;
const res = await personBGIListApi(
@@ -597,13 +664,26 @@ async function loadMorePersonBGI() {
personBGPageNum.value = modelPageNum.value - 1;
}
}
// 当横屏竖屏改变时,重新获取背景列表,且还原页数和禁止刷新状态
watch(
() => videoType,
async (newValue, oldValue) => {
systemBGPageNum.value = 1;
personBGPageNum.value = 1;
overLoadSystemBG.value = true;
overLoadpersonBG.value = true;
await getSystemBGIList();
await getpersonBGIList();
},
{ deep: true }
);
//#endregion ----------------------------

//#region 素材
const scTabItemActive = ref(1); //系统或个人tab高亮
const systemSCIList = ref([]); //系统素材列表
const systemSCPageNum = ref(1); //系统素材页数
const overLoadSystemSC = ref(true);
const overLoadSystemSC = ref(true); //禁止系统素材触底刷新
async function getSystemSCIList() {
const res = await systemSCIListApi(
systemSCPageNum.value,
@@ -629,9 +709,9 @@ async function loadMoreSystemSCI() {
}

// 个人素材
const personSCIList = ref([]); //系统素材列表
const personSCPageNum = ref(1); //系统素材页数
const overLoadpersonSC = ref(true);
const personSCIList = ref([]); //个人素材列表
const personSCPageNum = ref(1); //个人素材页数
const overLoadpersonSC = ref(true); //禁止个人素材触底刷新
async function getpersonSCIList() {
const res = await personSCIListApi(
personSCPageNum.value,
@@ -675,9 +755,12 @@ const string = "createVideo.typeScript";
const t = globalProperties.$t(string);

onMounted(async () => {
voiceTotal();
voiceTotal(); //获取声音列表
// getSystemSCIList();
// getpersonBGIList();
await getModeList("", 1, 20); //获取模版列表
getpersonSCIList();
getSystemSCIList();
await getModeList("", 1, 20);
});
</script>

@@ -706,26 +789,14 @@ onMounted(async () => {
position: absolute;
top: 0px;
left: 0px;
width: 30%;
width: 50%;
height: 100%;
padding: 30px;
transition: all 0.3s;
// background-color: #f1f2f6;
background-color: #454545;
z-index: 9;
.openChooseModel,
.closeChooseModel {
position: absolute;
top: 50%;
width: 50px;
height: 20px;
z-index: 999;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}

// 伸缩按钮
.shrinkBtn {
position: absolute;
@@ -774,6 +845,7 @@ onMounted(async () => {
margin: auto;
margin-top: 10px;
display: flex;
justify-content: space-between;
width: 100%;
height: 40px;
// background-color: #fff;
@@ -781,14 +853,16 @@ onMounted(async () => {
border-radius: 25px;
color: #b9b9b9;
.tabItem {
flex: 1;
font-size: 16px;
// flex: 1;
width: 30%;
font-size: 14px;
text-align: center;
line-height: 40px;
border-radius: 15px;
transition: all 0.3s;
cursor: pointer;
margin: 0 10px;
// margin: 0 10px;
// padding: 0 5px;
background-color: #000;
}
.tabItemActive {
@@ -812,9 +886,10 @@ onMounted(async () => {
position: relative;
padding: 20px;
width: 45%;
height: 110px;
margin: 0 10px 10px 0;
height: 190px;
margin: 0 20px 20px 0;
border-radius: 15px;
// padding: 20px;
// background: rgba(0, 0, 0, 0.1);
background-color: #fff;
z-index: 2;


+ 197
- 1
src/views/login/index.vue Visa fil

@@ -114,6 +114,11 @@
<div style="margin-bottom: 5px" @click="loginFlag(2)">
<span class="join">{{ $t("login.signUp") }}</span>
</div>
<div style="margin-bottom: 5px">
<span class="join" @click="loginFlag(7)">{{
$t("login.SMSLogin")
}}</span>
</div>
<div>
<span class="join" @click="loginFlag(3)">{{
$t("login.forgetPwd")
@@ -604,6 +609,103 @@
</div>
</div>
</el-form>
<!-- 短信登录 isLogin == 7-->
<el-form
v-if="isLogin == 7"
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.login")
}}</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="email">
<div class="text-white">
<svg-icon icon-class="user" />
</div>
<el-input
class="flex-1"
ref="email"
size="large"
v-model="loginData7.email"
:placeholder="$t('login.email')"
name="email"
/>
</el-form-item>

<!-- 验证码 -->
<el-form-item prop="verifyCode">
<span class="text-white">
<svg-icon icon-class="verify_code" />
</span>
<el-input
v-model="loginData7.verifyCode"
auto-complete="off"
:placeholder="$t('login.SMSLogin')"
class="flex-1"
/>
<span class="captcha">
<div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
{{ $t("login.sendSMS") }}
</div>
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
</span>
</el-form-item>

<el-button
size="default"
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="handleLoginBySMS"
>
<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.loginBtn") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
<div style="margin-bottom: 5px" @click="loginFlag(2)">
<span class="join">{{ $t("login.signUp") }}</span>
</div>
<div style="margin-bottom: 5px">
<span class="join" @click="loginFlag(1)">{{
$t("login.pwsLogin")
}}</span>
</div>
<div>
<span class="join" @click="loginFlag(3)">{{
$t("login.forgetPwd")
}}</span>
</div>
</div>
</el-form>
</div>
</template>

@@ -619,6 +721,8 @@ import {
doUpdPassApi,
resetPwdEmailApi,
resetPwdFormApi,
getSMSToLoginApi,
loginByMSMApi,
} from "@/apis/login";
import axios from "axios";
// 状态管理依赖
@@ -695,7 +799,10 @@ const loginData5 = ref({
const loginData6 = ref({
SMSCode: "",
});

const loginData7 = ref({
email: "",
verifyCode: "",
});
const loginRules = ref({
email: [
{
@@ -1038,6 +1145,87 @@ function resetPwdForm() {
}
//#endregion --------------------------

//#region 短信登录 表单7
// 获取验证码
const SMSTimeOut = ref(0);
async function getSMSToLogin() {
let phoneReg = /^[1][3-9]\d{9}$/;
let phoneValide = phoneReg.test(loginData7.value.email);
if (!phoneValide) {
ElMessage.error(
currentLan.value == "zh-cn"
? "请输入正确的手机号!"
: "Please enter the correct phone number!"
);
return;
}
try {
await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
ElMessage.success(
currentLan.value == "zh-cn"
? "短信验证码发送成功!"
: "SMS verification code sent successfully!"
);
SMSTimeOut.value = 60;
const timer = setInterval(() => {
if (SMSTimeOut.value != 0) {
SMSTimeOut.value--;
} else {
clearInterval(timer);
}
}, 1000);
});
} catch (error: any) {
ElMessage.error(error.message);
}
}
// 登录行为
function handleLoginBySMS() {
loginFormRef.value.validate((val: any) => {
if (val) {
const data = {
phone: loginData7.value.email,
code: loginData7.value.verifyCode,
};
isLogining.value = true;
doLoginByMSM(data);
} else {
const msg =
currentLan.value == "zh-cn"
? "请检查信息格式!"
: "Please check the format !";
ElMessage.error(msg);
return;
}
});
}
async function doLoginByMSM(data: any) {
const msg =
currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
await loginByMSMApi(data)
.then((res: any) => {
console.log(res, "res");
localStorage.setItem("AccessToken", res.data.token);
ElMessage.success(msg);
router.push("/createVideo");
// 注册成功将账号密码保存到本地
saveInfo(data);
isLogining.value = false;
userInfoPinia.getUserInfo(); //保存邮箱到pinia
})
.catch((err) => {
console.log(err, "err");
// 登录失败刷新验证码
getCode();
ElMessage.error(err.message);
isLogining.value = false;
if (err.code == 2112) {
reSendEmail(data.email);
}
});
}
//#endregion --------------------------

function getCode() {
showCodeImg.value = false;
axios({
@@ -1197,6 +1385,14 @@ onMounted(() => {
height: 48px;
cursor: pointer;
}
.sendSMSBtn {
width: 120px;
height: 48px;
line-height: 48px;
color: #fff;
text-align: center;
background: linear-gradient(270deg, #4b61dc, #15d1b8);
}
}
&:hover {
backdrop-filter: blur(7px);


+ 9
- 15
src/views/moveImg/index.vue Visa fil

@@ -12,9 +12,9 @@
<!-- <div class="other"></div> -->
</canvas>
<img
style="display: none; width: 200px; height: 100px"
style="display: none; width: 200px; height: 200px"
id="bjImg"
src="../../assets/img/lake.jpg"
src="../../assets/img/star.png"
alt=""
/>
</div>
@@ -29,6 +29,7 @@
<script setup>
//#region 导入
import { fabric } from "fabric";

//#endregion ---------------------------

//#region 画布交互
@@ -38,23 +39,16 @@ let canvas = new fabric.Canvas("canvas");

onMounted(() => {
let canvas = new fabric.Canvas("canvas");
// let rect = new fabric.Rect({
// left: 0, //距离画布左侧的距离,单位是像素
// top: 0, //距离画布上边的距离
// fill: "red", //填充的颜色
// width: 50, //方形的宽度
// height: 50, //方形的高度
// });
// canvas.add(rect);
let imgElement = document.getElementById("bjImg"); //声明我们的图片
let imgInstance = new fabric.Image(imgElement, {
//设置图片位置和样子
left: 100,
top: 100,
width: 200,
height: 100,
angle: 30, //设置图形顺时针旋转角度
// left: 100,
// top: 100,
// width: 400,
// height: 200,
// angle: 30, //设置图形顺时针旋转角度
});
console.log(imgInstance);
canvas.add(imgInstance);
// canvas.on("mouse:up", function (options) {
// console.log(options.e.clientX, options.e.clientY);


Laddar…
Avbryt
Spara