@@ -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 获取语言 | * @description 获取语言 | ||||
* @params | * @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({ | 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({ | 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 | * @returns data | ||||
*/ | */ | ||||
export function createVideoApi(data) { | |||||
export function systemSCIListApi(pageNum, pageSize) { | |||||
return request({ | 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({ | return request({ | ||||
url: `/api/userPhotoVideo/findById?id=${id}`, | |||||
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
method: 'get', | method: 'get', | ||||
}) | }) | ||||
} | } | ||||
/** | /** | ||||
* @description 获取音乐列表 | |||||
* @params data | |||||
* @description 试听 | |||||
* @params id | |||||
* @returns data | * @returns data | ||||
*/ | */ | ||||
export function musicListApi() { | |||||
export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||||
return request({ | return request({ | ||||
url: `api/userPhotoVideo/music`, | |||||
method: 'get', | |||||
url: `api/voiceMould/preview`, | |||||
method: 'POST', | |||||
data: { gen_txt, voice_id, voice_style } | |||||
}) | }) | ||||
} | |||||
} | |||||
@@ -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 | |||||
}) | |||||
} | |||||
/** | /** | ||||
/** | /** | ||||
@@ -35,7 +35,10 @@ export default { | |||||
confirmNewPwd:'Confirm new password', | confirmNewPwd:'Confirm new password', | ||||
confirm:'Confirm', | confirm:'Confirm', | ||||
gohome:'Back to home page', | 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', | Aipicture:'Ai-generated pictures', | ||||
AipictureTip:'Please customize your picture', | AipictureTip:'Please customize your picture', | ||||
chooseMusic:'Choose music', | 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', | |||||
}, | }, | ||||
// 我的视频 | // 我的视频 | ||||
@@ -23,8 +23,10 @@ export default { | |||||
loginBtn: "登 录", | loginBtn: "登 录", | ||||
registerBtn: "注 册", | registerBtn: "注 册", | ||||
verifyCode: "验证码", | verifyCode: "验证码", | ||||
signIn: "已有账号?现在登录!", | |||||
signUp: "没有账号?现在加入!", | |||||
// signIn: "已有账号?现在登录!", | |||||
// signUp: "没有账号?现在加入!", | |||||
signIn: "立即登录", | |||||
signUp: "立即注册", | |||||
forgetPwd: "忘记密码", | forgetPwd: "忘记密码", | ||||
forgetPwdTitle:'忘记密码', | forgetPwdTitle:'忘记密码', | ||||
SendEmail:'发送短信验证码', | SendEmail:'发送短信验证码', | ||||
@@ -36,6 +38,9 @@ export default { | |||||
confirm:'确定', | confirm:'确定', | ||||
gohome:'回到首页', | gohome:'回到首页', | ||||
SMSCode:'短信验证码', | SMSCode:'短信验证码', | ||||
SMSLogin:'短信登录', | |||||
pwsLogin:'账号密码登录', | |||||
sendSMS:'发送短信验证码', | |||||
}, | }, | ||||
// 导航栏国际化 | // 导航栏国际化 | ||||
@@ -72,6 +77,21 @@ export default { | |||||
AipictureTip:'请自定义您的图片', | AipictureTip:'请自定义您的图片', | ||||
chooseMusic:'选择音乐', | chooseMusic:'选择音乐', | ||||
searchMusic:'搜索音乐', | searchMusic:'搜索音乐', | ||||
copywriting:'文案', | |||||
BackgroundImage:'背景', | |||||
material:'素材', | |||||
subtitles:'字幕', | |||||
sex:"性别", | |||||
videoRatio:"视频比例", | |||||
all:'全部', | |||||
male:'男性', | |||||
female:'女性', | |||||
landscape:'横屏', | |||||
portrait:'竖屏', | |||||
systemBGI:'系统背景', | |||||
personBGI:'个人背景', | |||||
systemMaterial:'系统素材', | |||||
personMaterial:'个人素材', | |||||
}, | }, | ||||
// 我的视频 | // 我的视频 | ||||
@@ -21,68 +21,53 @@ | |||||
> | > | ||||
< | < | ||||
</div> | </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栏 --> | <!-- tab栏 --> | ||||
<p>性别</p> | |||||
<p>{{ $t("createVideo.sex") }}</p> | |||||
<div class="tab" v-show="showChooseModel"> | <div class="tab" v-show="showChooseModel"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | :class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | ||||
@click="changeTabSex(0)" | @click="changeTabSex(0)" | ||||
> | > | ||||
全部 | |||||
{{ $t("createVideo.all") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive == 1 ? 'tabItemActive' : ''" | :class="modelTabItemActive == 1 ? 'tabItemActive' : ''" | ||||
@click="changeTabSex(1)" | @click="changeTabSex(1)" | ||||
> | > | ||||
男性 | |||||
{{ $t("createVideo.male") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive == 2 ? 'tabItemActive' : ''" | :class="modelTabItemActive == 2 ? 'tabItemActive' : ''" | ||||
@click="changeTabSex(2)" | @click="changeTabSex(2)" | ||||
> | > | ||||
女性 | |||||
{{ $t("createVideo.female") }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<p>视频比例</p> | |||||
<p>{{ $t("createVideo.videoRatio") }}</p> | |||||
<div class="tab" v-show="showChooseModel"> | <div class="tab" v-show="showChooseModel"> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | :class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | ||||
@click="changeTabVideoType(0)" | @click="changeTabVideoType(0)" | ||||
> | > | ||||
全部 | |||||
{{ $t("createVideo.all") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" | :class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" | ||||
@click="changeTabVideoType(2)" | @click="changeTabVideoType(2)" | ||||
> | > | ||||
横屏 | |||||
{{ $t("createVideo.landscape") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" | :class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" | ||||
@click="changeTabVideoType(1)" | @click="changeTabVideoType(1)" | ||||
> | > | ||||
竖屏 | |||||
{{ $t("createVideo.portrait") }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 模版列表 --> | <!-- 模版列表 --> | ||||
@@ -124,28 +109,28 @@ | |||||
:class="tabItemActive == 1 ? 'tabItemActive' : ''" | :class="tabItemActive == 1 ? 'tabItemActive' : ''" | ||||
@click="tabItemActive = 1" | @click="tabItemActive = 1" | ||||
> | > | ||||
文案 | |||||
{{ $t("createVideo.copywriting") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="tabItemActive == 2 ? 'tabItemActive' : ''" | :class="tabItemActive == 2 ? 'tabItemActive' : ''" | ||||
@click="tabItemActive = 2" | @click="tabItemActive = 2" | ||||
> | > | ||||
背景 | |||||
{{ $t("createVideo.BackgroundImage") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="tabItemActive == 3 ? 'tabItemActive' : ''" | :class="tabItemActive == 3 ? 'tabItemActive' : ''" | ||||
@click="tabItemActive = 3" | @click="tabItemActive = 3" | ||||
> | > | ||||
素材 | |||||
{{ $t("createVideo.material") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="tabItemActive == 4 ? 'tabItemActive' : ''" | :class="tabItemActive == 4 ? 'tabItemActive' : ''" | ||||
@click="tabItemActive = 4" | @click="tabItemActive = 4" | ||||
> | > | ||||
字幕 | |||||
{{ $t("createVideo.subtitles") }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 文案 只能使用v-if,不能使用v-show--> | <!-- 文案 只能使用v-if,不能使用v-show--> | ||||
@@ -171,13 +156,13 @@ | |||||
type="textarea" | type="textarea" | ||||
:placeholder="$t('createVideo.aiText')" | :placeholder="$t('createVideo.aiText')" | ||||
/> | /> | ||||
<span | <span | ||||
class="pointer" | |||||
@click="getPreviewAudio" | |||||
style="margin-right: 10px; font-size: 20px" | style="margin-right: 10px; font-size: 20px" | ||||
>🔊</span | |||||
class="pointer" | |||||
@click="insertIcon" | |||||
>🕗</span | |||||
> | > | ||||
<span class="pointer" @click="insertIcon">🕗</span> | |||||
</div> | </div> | ||||
<p>{{ $t("createVideo.languages") }}</p> | <p>{{ $t("createVideo.languages") }}</p> | ||||
<!-- 语言 --> | <!-- 语言 --> | ||||
@@ -190,7 +175,7 @@ | |||||
<el-option | <el-option | ||||
v-for="item in languageOptions" | v-for="item in languageOptions" | ||||
:key="item.value" | :key="item.value" | ||||
:label="item.name" | |||||
:label="lanChange == 'zh-cn' ? item.chineseName : item.name" | |||||
:value="item.id" | :value="item.id" | ||||
> | > | ||||
<img | <img | ||||
@@ -198,7 +183,9 @@ | |||||
alt="" | alt="" | ||||
style="width: 20px; margin-right: 10px; vertical-align: text-top" | 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-option> | ||||
</el-select> | </el-select> | ||||
<p>{{ $t("createVideo.voices") }}</p> | <p>{{ $t("createVideo.voices") }}</p> | ||||
@@ -213,7 +200,13 @@ | |||||
<el-option | <el-option | ||||
v-for="item in soundOptions" | v-for="item in soundOptions" | ||||
:key="item.value" | :key="item.value" | ||||
:label="item.displayName" | |||||
:label=" | |||||
(lanChange == 'zh-cn' | |||||
? item.displayName + ` (${item.sex == 1 ? '男' : '女'})` | |||||
: item.localName + | |||||
` (${item.sex == 1 ? 'male' : 'female'})`) + | |||||
returnAge(item.ageType) | |||||
" | |||||
:value="item.id" | :value="item.id" | ||||
/> | /> | ||||
</el-select> | </el-select> | ||||
@@ -227,10 +220,19 @@ | |||||
> | > | ||||
<el-option | <el-option | ||||
v-for="item in soundStyleOptions" | 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> | </el-select> | ||||
</div> | </div> | ||||
<!-- 背景 --> | <!-- 背景 --> | ||||
@@ -241,18 +243,19 @@ | |||||
:class="bjTabItemActive == 1 ? 'tabItemActive' : ''" | :class="bjTabItemActive == 1 ? 'tabItemActive' : ''" | ||||
@click="bjTabItemActive = 1" | @click="bjTabItemActive = 1" | ||||
> | > | ||||
系统背景 | |||||
{{ $t("createVideo.systemBGI") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="bjTabItemActive == 2 ? 'tabItemActive' : ''" | :class="bjTabItemActive == 2 ? 'tabItemActive' : ''" | ||||
@click="bjTabItemActive = 2" | @click="bjTabItemActive = 2" | ||||
> | > | ||||
个人背景 | |||||
{{ $t("createVideo.personBGI") }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 背景图片展示 --> | |||||
<!-- 系统背景图片展示 --> | |||||
<div | <div | ||||
v-if="bjTabItemActive == 1" | |||||
class="bjSystemBox" | class="bjSystemBox" | ||||
v-infinite-scroll="loadMoreSystemBGI" | v-infinite-scroll="loadMoreSystemBGI" | ||||
:infinite-scroll-disabled="overLoadSystemBG" | :infinite-scroll-disabled="overLoadSystemBG" | ||||
@@ -265,6 +268,21 @@ | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
</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> | ||||
<!-- 素材 --> | <!-- 素材 --> | ||||
<div v-if="tabItemActive == 3" class="tabContent tab3"> | <div v-if="tabItemActive == 3" class="tabContent tab3"> | ||||
@@ -274,18 +292,19 @@ | |||||
:class="scTabItemActive == 1 ? 'tabItemActive' : ''" | :class="scTabItemActive == 1 ? 'tabItemActive' : ''" | ||||
@click="scTabItemActive = 1" | @click="scTabItemActive = 1" | ||||
> | > | ||||
系统素材 | |||||
{{ $t("createVideo.systemMaterial") }} | |||||
</div> | </div> | ||||
<div | <div | ||||
class="tabItem" | class="tabItem" | ||||
:class="scTabItemActive == 2 ? 'tabItemActive' : ''" | :class="scTabItemActive == 2 ? 'tabItemActive' : ''" | ||||
@click="scTabItemActive = 2" | @click="scTabItemActive = 2" | ||||
> | > | ||||
个人素材 | |||||
{{ $t("createVideo.personMaterial") }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 素材图片展示 --> | |||||
<!-- 系统素材图片展示 --> | |||||
<div | <div | ||||
v-if="scTabItemActive == 1" | |||||
class="bjSystemBox" | class="bjSystemBox" | ||||
v-infinite-scroll="loadMoreSystemSCI" | v-infinite-scroll="loadMoreSystemSCI" | ||||
:infinite-scroll-disabled="overLoadSystemSC" | :infinite-scroll-disabled="overLoadSystemSC" | ||||
@@ -298,6 +317,21 @@ | |||||
<img class="boxCentreImg" :src="item.material" alt="" /> | <img class="boxCentreImg" :src="item.material" alt="" /> | ||||
</div> | </div> | ||||
</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> | ||||
<!-- 字幕 --> | <!-- 字幕 --> | ||||
<div v-if="tabItemActive == 4" class="tabContent"></div> | <div v-if="tabItemActive == 4" class="tabContent"></div> | ||||
@@ -332,6 +366,11 @@ const route = useRoute(); | |||||
const router = useRouter(); | const router = useRouter(); | ||||
const { locale } = useI18n(); | const { locale } = useI18n(); | ||||
const lanChange = ref(locale); | const lanChange = ref(locale); | ||||
// ElMessage.error( | |||||
// lanChange.value == "zh-cn" | |||||
// ? `您还没有输入文案` | |||||
// : `You have not entered the copy yet` | |||||
// ); | |||||
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | ||||
@@ -462,16 +501,7 @@ const language = ref(""); //选择的语言 | |||||
const sound = ref(""); // 选择的声音 | const sound = ref(""); // 选择的声音 | ||||
const soundStyle = ref(""); //选择的风格 | const soundStyle = ref(""); //选择的风格 | ||||
// 语言下拉框内容 | // 语言下拉框内容 | ||||
const languageOptions = ref([ | |||||
{ | |||||
id: "0", | |||||
name: "中文", | |||||
}, | |||||
{ | |||||
id: "1", | |||||
name: "English", | |||||
}, | |||||
]); | |||||
const languageOptions = ref([]); | |||||
async function voiceTotal() { | async function voiceTotal() { | ||||
const res = await voiceTotalApi(); | const res = await voiceTotalApi(); | ||||
languageOptions.value = res.data; | languageOptions.value = res.data; | ||||
@@ -531,13 +561,58 @@ async function getPreviewAudio() { | |||||
ElMessage.error(error); | 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 ---------------------------- | //#endregion ---------------------------- | ||||
//#region 背景 | //#region 背景 | ||||
const bjTabItemActive = ref(1); //系统或个人tab高亮 | const bjTabItemActive = ref(1); //系统或个人tab高亮 | ||||
const systemBGIList = ref([]); //系统背景列表 | const systemBGIList = ref([]); //系统背景列表 | ||||
const systemBGPageNum = ref(1); //系统背景页数 | const systemBGPageNum = ref(1); //系统背景页数 | ||||
const overLoadSystemBG = ref(true); | |||||
const overLoadSystemBG = ref(true); //禁止系统背景触底刷新 | |||||
async function getSystemBGIList() { | async function getSystemBGIList() { | ||||
const res = await systemBGIListApi( | const res = await systemBGIListApi( | ||||
systemBGPageNum.value, | systemBGPageNum.value, | ||||
@@ -561,19 +636,11 @@ async function loadMoreSystemBGI() { | |||||
systemBGPageNum.value = modelPageNum.value - 1; | 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() { | async function getpersonBGIList() { | ||||
const res = await personBGIListApi( | const res = await personBGIListApi( | ||||
personBGPageNum.value, | personBGPageNum.value, | ||||
@@ -583,7 +650,7 @@ async function getpersonBGIList() { | |||||
personBGIList.value = res.data.list; | personBGIList.value = res.data.list; | ||||
overLoadpersonBG.value = false; | overLoadpersonBG.value = false; | ||||
} | } | ||||
// 加载更多系统背景图 | |||||
// 加载更多个人背景图 | |||||
async function loadMorePersonBGI() { | async function loadMorePersonBGI() { | ||||
personBGPageNum.value += 1; | personBGPageNum.value += 1; | ||||
const res = await personBGIListApi( | const res = await personBGIListApi( | ||||
@@ -597,13 +664,26 @@ async function loadMorePersonBGI() { | |||||
personBGPageNum.value = modelPageNum.value - 1; | 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 ---------------------------- | //#endregion ---------------------------- | ||||
//#region 素材 | //#region 素材 | ||||
const scTabItemActive = ref(1); //系统或个人tab高亮 | const scTabItemActive = ref(1); //系统或个人tab高亮 | ||||
const systemSCIList = ref([]); //系统素材列表 | const systemSCIList = ref([]); //系统素材列表 | ||||
const systemSCPageNum = ref(1); //系统素材页数 | const systemSCPageNum = ref(1); //系统素材页数 | ||||
const overLoadSystemSC = ref(true); | |||||
const overLoadSystemSC = ref(true); //禁止系统素材触底刷新 | |||||
async function getSystemSCIList() { | async function getSystemSCIList() { | ||||
const res = await systemSCIListApi( | const res = await systemSCIListApi( | ||||
systemSCPageNum.value, | 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() { | async function getpersonSCIList() { | ||||
const res = await personSCIListApi( | const res = await personSCIListApi( | ||||
personSCPageNum.value, | personSCPageNum.value, | ||||
@@ -675,9 +755,12 @@ const string = "createVideo.typeScript"; | |||||
const t = globalProperties.$t(string); | const t = globalProperties.$t(string); | ||||
onMounted(async () => { | onMounted(async () => { | ||||
voiceTotal(); | |||||
voiceTotal(); //获取声音列表 | |||||
// getSystemSCIList(); | |||||
// getpersonBGIList(); | |||||
await getModeList("", 1, 20); //获取模版列表 | |||||
getpersonSCIList(); | |||||
getSystemSCIList(); | getSystemSCIList(); | ||||
await getModeList("", 1, 20); | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -706,26 +789,14 @@ onMounted(async () => { | |||||
position: absolute; | position: absolute; | ||||
top: 0px; | top: 0px; | ||||
left: 0px; | left: 0px; | ||||
width: 30%; | |||||
width: 50%; | |||||
height: 100%; | height: 100%; | ||||
padding: 30px; | padding: 30px; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
// background-color: #f1f2f6; | // background-color: #f1f2f6; | ||||
background-color: #454545; | background-color: #454545; | ||||
z-index: 9; | z-index: 9; | ||||
.openChooseModel, | |||||
.closeChooseModel { | |||||
position: absolute; | |||||
top: 50%; | |||||
width: 50px; | |||||
height: 20px; | |||||
z-index: 999; | |||||
cursor: pointer; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | |||||
// 伸缩按钮 | // 伸缩按钮 | ||||
.shrinkBtn { | .shrinkBtn { | ||||
position: absolute; | position: absolute; | ||||
@@ -774,6 +845,7 @@ onMounted(async () => { | |||||
margin: auto; | margin: auto; | ||||
margin-top: 10px; | margin-top: 10px; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | |||||
width: 100%; | width: 100%; | ||||
height: 40px; | height: 40px; | ||||
// background-color: #fff; | // background-color: #fff; | ||||
@@ -781,14 +853,16 @@ onMounted(async () => { | |||||
border-radius: 25px; | border-radius: 25px; | ||||
color: #b9b9b9; | color: #b9b9b9; | ||||
.tabItem { | .tabItem { | ||||
flex: 1; | |||||
font-size: 16px; | |||||
// flex: 1; | |||||
width: 30%; | |||||
font-size: 14px; | |||||
text-align: center; | text-align: center; | ||||
line-height: 40px; | line-height: 40px; | ||||
border-radius: 15px; | border-radius: 15px; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
cursor: pointer; | cursor: pointer; | ||||
margin: 0 10px; | |||||
// margin: 0 10px; | |||||
// padding: 0 5px; | |||||
background-color: #000; | background-color: #000; | ||||
} | } | ||||
.tabItemActive { | .tabItemActive { | ||||
@@ -812,9 +886,10 @@ onMounted(async () => { | |||||
position: relative; | position: relative; | ||||
padding: 20px; | padding: 20px; | ||||
width: 45%; | width: 45%; | ||||
height: 110px; | |||||
margin: 0 10px 10px 0; | |||||
height: 190px; | |||||
margin: 0 20px 20px 0; | |||||
border-radius: 15px; | border-radius: 15px; | ||||
// padding: 20px; | |||||
// background: rgba(0, 0, 0, 0.1); | // background: rgba(0, 0, 0, 0.1); | ||||
background-color: #fff; | background-color: #fff; | ||||
z-index: 2; | z-index: 2; | ||||
@@ -114,6 +114,11 @@ | |||||
<div style="margin-bottom: 5px" @click="loginFlag(2)"> | <div style="margin-bottom: 5px" @click="loginFlag(2)"> | ||||
<span class="join">{{ $t("login.signUp") }}</span> | <span class="join">{{ $t("login.signUp") }}</span> | ||||
</div> | </div> | ||||
<div style="margin-bottom: 5px"> | |||||
<span class="join" @click="loginFlag(7)">{{ | |||||
$t("login.SMSLogin") | |||||
}}</span> | |||||
</div> | |||||
<div> | <div> | ||||
<span class="join" @click="loginFlag(3)">{{ | <span class="join" @click="loginFlag(3)">{{ | ||||
$t("login.forgetPwd") | $t("login.forgetPwd") | ||||
@@ -604,6 +609,103 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</el-form> | </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> | </div> | ||||
</template> | </template> | ||||
@@ -619,6 +721,8 @@ import { | |||||
doUpdPassApi, | doUpdPassApi, | ||||
resetPwdEmailApi, | resetPwdEmailApi, | ||||
resetPwdFormApi, | resetPwdFormApi, | ||||
getSMSToLoginApi, | |||||
loginByMSMApi, | |||||
} from "@/apis/login"; | } from "@/apis/login"; | ||||
import axios from "axios"; | import axios from "axios"; | ||||
// 状态管理依赖 | // 状态管理依赖 | ||||
@@ -695,7 +799,10 @@ const loginData5 = ref({ | |||||
const loginData6 = ref({ | const loginData6 = ref({ | ||||
SMSCode: "", | SMSCode: "", | ||||
}); | }); | ||||
const loginData7 = ref({ | |||||
email: "", | |||||
verifyCode: "", | |||||
}); | |||||
const loginRules = ref({ | const loginRules = ref({ | ||||
email: [ | email: [ | ||||
{ | { | ||||
@@ -1038,6 +1145,87 @@ function resetPwdForm() { | |||||
} | } | ||||
//#endregion -------------------------- | //#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() { | function getCode() { | ||||
showCodeImg.value = false; | showCodeImg.value = false; | ||||
axios({ | axios({ | ||||
@@ -1197,6 +1385,14 @@ onMounted(() => { | |||||
height: 48px; | height: 48px; | ||||
cursor: pointer; | cursor: pointer; | ||||
} | } | ||||
.sendSMSBtn { | |||||
width: 120px; | |||||
height: 48px; | |||||
line-height: 48px; | |||||
color: #fff; | |||||
text-align: center; | |||||
background: linear-gradient(270deg, #4b61dc, #15d1b8); | |||||
} | |||||
} | } | ||||
&:hover { | &:hover { | ||||
backdrop-filter: blur(7px); | backdrop-filter: blur(7px); | ||||
@@ -12,9 +12,9 @@ | |||||
<!-- <div class="other"></div> --> | <!-- <div class="other"></div> --> | ||||
</canvas> | </canvas> | ||||
<img | <img | ||||
style="display: none; width: 200px; height: 100px" | |||||
style="display: none; width: 200px; height: 200px" | |||||
id="bjImg" | id="bjImg" | ||||
src="../../assets/img/lake.jpg" | |||||
src="../../assets/img/star.png" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
</div> | </div> | ||||
@@ -29,6 +29,7 @@ | |||||
<script setup> | <script setup> | ||||
//#region 导入 | //#region 导入 | ||||
import { fabric } from "fabric"; | import { fabric } from "fabric"; | ||||
//#endregion --------------------------- | //#endregion --------------------------- | ||||
//#region 画布交互 | //#region 画布交互 | ||||
@@ -38,23 +39,16 @@ let canvas = new fabric.Canvas("canvas"); | |||||
onMounted(() => { | onMounted(() => { | ||||
let canvas = new fabric.Canvas("canvas"); | 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 imgElement = document.getElementById("bjImg"); //声明我们的图片 | ||||
let imgInstance = new fabric.Image(imgElement, { | 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.add(imgInstance); | ||||
// canvas.on("mouse:up", function (options) { | // canvas.on("mouse:up", function (options) { | ||||
// console.log(options.e.clientX, options.e.clientY); | // console.log(options.e.clientX, options.e.clientY); | ||||