@@ -1,6 +1,5 @@ | |||||
import request from "@/utils/request.js"; | import request from "@/utils/request.js"; | ||||
/** | /** | ||||
* @description 获取邀请码 | * @description 获取邀请码 | ||||
* @params | * @params | ||||
@@ -0,0 +1,89 @@ | |||||
import request from "@/utils/request.js"; | |||||
/** | |||||
* @description 获取价格表 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function packageInfoApi() { | |||||
return request({ | |||||
url: `/api/user/getPackageInfo`, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* @description 获取邀请码 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function inviteCodeApi() { | |||||
return request({ | |||||
url: `api/user/inviteCode`, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* @description 提交邀请码 | |||||
* @params code | |||||
* @returns | |||||
*/ | |||||
export function useCodeApi(code) { | |||||
return request({ | |||||
url: `api/user/useCode?code=${code}`, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* @description 查询是否使用过邀请码 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function isUseApi() { | |||||
return request({ | |||||
url: `api/user/isUse`, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* @description 查询使用过 我的邀请码 的用户列表 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function useCodeUserApi() { | |||||
return request({ | |||||
url: `api/user/getUseCodeUser`, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* @description 修改用户名和头像 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function updUserInfoApi(data) { | |||||
return request({ | |||||
url: `api/user/updUserInfo`, | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* @description 获取用户信息 | |||||
* @params | |||||
* @returns | |||||
*/ | |||||
export function getUserInfoApi() { | |||||
return request({ | |||||
url: `api/user/getUserInfo`, | |||||
method: 'get', | |||||
}) | |||||
} |
@@ -17,21 +17,21 @@ export default { | |||||
username: "Username", | username: "Username", | ||||
email: "E-mail", | email: "E-mail", | ||||
password: "Password", | password: "Password", | ||||
confirmPassword: "Confirm password", | |||||
login: "Sign in", | |||||
register: "Sign up", | |||||
loginBtn: "Sign in", | |||||
registerBtn: "Sign up", | |||||
verifyCode: "Verify code", | |||||
confirmPassword: "Confirm Password", | |||||
login: "Sign In", | |||||
register: "Sign Up", | |||||
loginBtn: "Sign In", | |||||
registerBtn: "Sign Up", | |||||
verifyCode: "Verify Code", | |||||
signIn: "Already got an account? Sign in here", | signIn: "Already got an account? Sign in here", | ||||
signUp: "Don't have an account? Sign up here", | signUp: "Don't have an account? Sign up here", | ||||
forgetPwd: "I forgot my password", | forgetPwd: "I forgot my password", | ||||
forgetPwdTitle:'Forgot password', | |||||
forgetPwdTitle:'Forgot Password', | |||||
SendEmail:'Send an email', | SendEmail:'Send an email', | ||||
resetPassword:'Reset password', | |||||
resetPassword:'Reset Password', | |||||
setNewPwd:'Set new password', | setNewPwd:'Set new password', | ||||
newPwd:'New password', | |||||
oldPwd:'Old password', | |||||
newPwd:'New Password', | |||||
oldPwd:'Old Password', | |||||
confirmNewPwd:'Confirm new password', | confirmNewPwd:'Confirm new password', | ||||
confirm:'Confirm', | confirm:'Confirm', | ||||
gohome:'Back to home page' | gohome:'Back to home page' | ||||
@@ -47,14 +47,14 @@ export default { | |||||
// 创作视频 | // 创作视频 | ||||
createVideo: { | createVideo: { | ||||
title: "Create Video", | title: "Create Video", | ||||
availableMould:"Available moulds", | |||||
personalWarehouse:'Personal warehouse', | |||||
availableMould:"Available Models", | |||||
personalWarehouse:'Personal Warehouse', | |||||
typeScript: "Type your script", | typeScript: "Type your script", | ||||
uploadAudio: "Upload audio", | |||||
recordedAudio:'Recorded audio', | |||||
startRecorded:'Start recording', | |||||
stopRecorded:'Stop recording', | |||||
aiScript: "Ai script", | |||||
uploadAudio: "Upload Audio", | |||||
recordedAudio:'Recorded Audio', | |||||
startRecorded:'Start Recording', | |||||
stopRecorded:'Stop Recording', | |||||
aiScript: "AI Script", | |||||
typeTitle: "Type a title", | typeTitle: "Type a title", | ||||
confirm: "Confirm", | confirm: "Confirm", | ||||
aiText: "Please input here", | aiText: "Please input here", | ||||
@@ -62,15 +62,15 @@ export default { | |||||
voices: "Voices", | voices: "Voices", | ||||
styles: "Styles", | styles: "Styles", | ||||
reselect: "Reselect", | reselect: "Reselect", | ||||
sureUpload: "Confirm upload", | |||||
generateVideo: "Generate video", | |||||
saveVideo:'Save manuscript', | |||||
select:'Please select', | |||||
sureUpload: "Confirm Upload", | |||||
generateVideo: "Generate Video", | |||||
saveVideo:'Save Manuscript', | |||||
select:'Please Select', | |||||
music:'Music', | music:'Music', | ||||
Aipicture:'Ai-generated pictures', | |||||
Aipicture:'AI-generated pictures', | |||||
AipictureTip:'Please customize your picture', | AipictureTip:'Please customize your picture', | ||||
chooseMusic:'Choose music', | |||||
searchMusic:'Search music' | |||||
chooseMusic:'Choose Music', | |||||
searchMusic:'Search Music' | |||||
}, | }, | ||||
// 我的视频 | // 我的视频 | ||||
@@ -79,27 +79,27 @@ export default { | |||||
search: "Search...", | search: "Search...", | ||||
name: "Name", | name: "Name", | ||||
date: "Date", | date: "Date", | ||||
videoTitle: "Video title:", | |||||
videoTitle: "Video Title:", | |||||
download: "Download", | download: "Download", | ||||
delete: "Delete", | delete: "Delete", | ||||
more: "More", | more: "More", | ||||
loading: "Loading , just a moment", | loading: "Loading , just a moment", | ||||
noList: "Nothing here. How about making one ?", | noList: "Nothing here. How about making one ?", | ||||
goCreate: "Go create !", | |||||
goCreate: "Go Create !", | |||||
manuscript: "Manuscript", | manuscript: "Manuscript", | ||||
generating: "Generating", | generating: "Generating", | ||||
generationFailed: "Failed", | generationFailed: "Failed", | ||||
generationSucceed: "Succeed", | generationSucceed: "Succeed", | ||||
manuscriptText: "Manuscript", | manuscriptText: "Manuscript", | ||||
generatingText: "The video is generating, Please wait a moment", | generatingText: "The video is generating, Please wait a moment", | ||||
generationFailedText: "The video generate is failed, Reason:", | |||||
generationFailedText: "Video generation failed, you can click the button below to edit the generation again", | |||||
edit:'Edit' | edit:'Edit' | ||||
}, | }, | ||||
// 个人账户 | // 个人账户 | ||||
account: { | account: { | ||||
title: "My Account", | title: "My Account", | ||||
reSetPwd: "Reset password", | |||||
reSetPwd: "Reset Password", | |||||
editInfo:'Edit personal information', | editInfo:'Edit personal information', | ||||
until: "Until", | until: "Until", | ||||
getMore: "UPGRADE", | getMore: "UPGRADE", | ||||
@@ -140,7 +140,7 @@ export default { | |||||
expired: | expired: | ||||
"Your ticket is expired. You can click the button to resend new email then", | "Your ticket is expired. You can click the button to resend new email then", | ||||
sendSuccess: "The email has been resent, you can check it now", | sendSuccess: "The email has been resent, you can check it now", | ||||
goLogin: "Login now", | |||||
goLogin: "Login Now", | |||||
reSend: "Resend", | reSend: "Resend", | ||||
}, | }, | ||||
}; | }; |
@@ -92,7 +92,7 @@ export default { | |||||
generationSucceed: "生成成功", | generationSucceed: "生成成功", | ||||
manuscriptText: "草稿", | manuscriptText: "草稿", | ||||
generatingText: "视频正在生成中,请稍等哦", | generatingText: "视频正在生成中,请稍等哦", | ||||
generationFailedText: "视频生成失败。原因:", | |||||
generationFailedText: "视频生成失败,您可以点击下方按钮重新编辑生成", | |||||
edit:'编辑' | edit:'编辑' | ||||
}, | }, | ||||
@@ -25,7 +25,7 @@ | |||||
<div class="icon"> | <div class="icon"> | ||||
<el-icon><i-ep-DocumentAdd /></el-icon> | <el-icon><i-ep-DocumentAdd /></el-icon> | ||||
</div> | </div> | ||||
API | |||||
API Access | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -105,9 +105,9 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 选中需要上传的图片前后 --> | |||||
<!-- 选中需要上传的图片后 --> | |||||
<div class="left-top" v-show="showUploadBtn == 4"> | <div class="left-top" v-show="showUploadBtn == 4"> | ||||
<el-row class="justify-between"> | |||||
<el-row style="display: flex; justify-content: flex-end"> | |||||
<!-- 上传按钮 --> | <!-- 上传按钮 --> | ||||
<div class="btnBox" v-show="submitImgBtn"> | <div class="btnBox" v-show="submitImgBtn"> | ||||
<button class="uploadBtn"> | <button class="uploadBtn"> | ||||
@@ -124,7 +124,7 @@ | |||||
<img :src="imgUrl" alt="" class="inmiddle" /> | <img :src="imgUrl" alt="" class="inmiddle" /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 选中需要上传的图片前后 --> | |||||
<!-- AI生成图片展示区 --> | |||||
<div class="left-top" v-show="showUploadBtn == 5"> | <div class="left-top" v-show="showUploadBtn == 5"> | ||||
<div class="editAiPicBox"> | <div class="editAiPicBox"> | ||||
<div class="edit"> | <div class="edit"> | ||||
@@ -163,8 +163,8 @@ | |||||
:class="showFace == 2 ? 'tabAvtive' : ''" | :class="showFace == 2 ? 'tabAvtive' : ''" | ||||
@click="chooseAiPic" | @click="chooseAiPic" | ||||
> | > | ||||
<div class="subscript"> | |||||
<span>GPT</span> | |||||
<div class="subscript subscript1"> | |||||
<span>AI </span> | |||||
<img src="../../assets/img/star.png" alt="" /> | <img src="../../assets/img/star.png" alt="" /> | ||||
</div> | </div> | ||||
{{ $t("createVideo.Aipicture") }} | {{ $t("createVideo.Aipicture") }} | ||||
@@ -757,7 +757,8 @@ async function lookImg(e) { | |||||
//#endregion ------------------ | //#endregion ------------------ | ||||
// 标题 | // 标题 | ||||
const title = ref(""); | |||||
const title = | |||||
lanChange.value == "zh-cn" ? ref("未定义标题") : ref("Undefined Title"); | |||||
//#region 上传图片 | //#region 上传图片 | ||||
const imgUrl = ref(""); //图片回显路径 | const imgUrl = ref(""); //图片回显路径 | ||||
@@ -1245,8 +1246,8 @@ onMounted(async () => { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
// height: 1200px; | |||||
height: calc(100vh - 80px); | |||||
height: 900px; | |||||
// height: calc(100vh - 80px); | |||||
// padding: 20px 0 0 40px; | // padding: 20px 0 0 40px; | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
@@ -1254,7 +1255,7 @@ onMounted(async () => { | |||||
.left { | .left { | ||||
width: 68%; | width: 68%; | ||||
height: 80%; | |||||
// height: 90%; | |||||
padding: 20px; | padding: 20px; | ||||
:deep(.el-input__wrapper) { | :deep(.el-input__wrapper) { | ||||
border: none; | border: none; | ||||
@@ -1279,13 +1280,14 @@ onMounted(async () => { | |||||
.uploadBtn { | .uploadBtn { | ||||
position: relative; | position: relative; | ||||
padding: 5px 10px; | |||||
padding: 10px 15px; | |||||
margin-left: 10px; | margin-left: 10px; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
background-color: #000; | |||||
color: #fff; | |||||
&:hover { | &:hover { | ||||
background-color: #000; | |||||
color: #fff; | |||||
background-color: #15d1b8; | |||||
} | } | ||||
} | } | ||||
@@ -1601,7 +1603,6 @@ onMounted(async () => { | |||||
right: -20px; | right: -20px; | ||||
width: 40px; | width: 40px; | ||||
height: 40px; | height: 40px; | ||||
z-index: 1; | z-index: 1; | ||||
img { | img { | ||||
position: absolute; | position: absolute; | ||||
@@ -1623,13 +1624,40 @@ onMounted(async () => { | |||||
transform: rotate(45deg); | transform: rotate(45deg); | ||||
} | } | ||||
} | } | ||||
.subscript1 { | |||||
position: absolute; | |||||
top: -20px; | |||||
right: -20px; | |||||
width: 40px; | |||||
height: 40px; | |||||
z-index: 1; | |||||
img { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0px; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 3; | |||||
} | |||||
span { | |||||
position: absolute; | |||||
line-height: 45px; | |||||
z-index: 4; | |||||
padding-left: 6px; | |||||
padding-bottom: 5px; | |||||
font-size: 16px; | |||||
color: #17ceb9; | |||||
font-weight: 900; | |||||
transform: rotate(45deg); | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.right { | .right { | ||||
width: 32%; | width: 32%; | ||||
height: 100%; | |||||
min-height: 100%; | |||||
padding: 30px 30px 20px 30px; | padding: 30px 30px 20px 30px; | ||||
background-color: #f1f2f6; | background-color: #f1f2f6; | ||||
border-radius: 30px 0 0 0; | border-radius: 30px 0 0 0; | ||||
@@ -1669,14 +1697,14 @@ onMounted(async () => { | |||||
} | } | ||||
.tabs { | .tabs { | ||||
height: 100%; | |||||
min-height: 100%; | |||||
padding: 20px 20px 0px 20px; | padding: 20px 20px 0px 20px; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
overflow-y: scroll; | |||||
.card1 { | .card1 { | ||||
.text { | .text { | ||||
padding: 10px; | padding: 10px; | ||||
border: 1px solid #000; | |||||
border: 1px solid #c0c4cc; | |||||
.el-button { | .el-button { | ||||
float: right; | float: right; | ||||
margin-top: 10px; | margin-top: 10px; | ||||
@@ -1731,6 +1759,7 @@ onMounted(async () => { | |||||
.btnBox { | .btnBox { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
// justify-content: flex-end; | |||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
} | } | ||||
audio { | audio { | ||||
@@ -134,9 +134,9 @@ | |||||
></video> | ></video> | ||||
<div v-else class="insteadVideo"> | <div v-else class="insteadVideo"> | ||||
{{ $t("myCreating." + presentItem.statusName + "Text") }} | {{ $t("myCreating." + presentItem.statusName + "Text") }} | ||||
<span v-if="presentItem.videoStatus == 3">{{ | |||||
<!-- <span v-if="presentItem.videoStatus == 3">{{ | |||||
presentItem.videoMsg | presentItem.videoMsg | ||||
}}</span> | |||||
}}</span> --> | |||||
</div> | </div> | ||||
<!-- 有视频路径的页脚 --> | <!-- 有视频路径的页脚 --> | ||||
<div class="footer" v-if="presentItem.videoPlayUrl"> | <div class="footer" v-if="presentItem.videoPlayUrl"> | ||||
@@ -257,6 +257,9 @@ function handleDownload(itemVideoPlayUrl) { | |||||
document.body.appendChild(link); | document.body.appendChild(link); | ||||
link.click(); | link.click(); | ||||
document.body.removeChild(link); | document.body.removeChild(link); | ||||
ElMessage.success( | |||||
lanChange.value == "zh-cn" ? `下载成功` : `Download Successfully` | |||||
); | |||||
} else { | } else { | ||||
ElMessage.error( | ElMessage.error( | ||||
lanChange.value == "zh-cn" ? `无法下载` : `Unable to download` | lanChange.value == "zh-cn" ? `无法下载` : `Unable to download` | ||||
@@ -647,7 +650,7 @@ onMounted(() => { | |||||
.elBtn { | .elBtn { | ||||
color: #fff; | color: #fff; | ||||
border-radius: 10px; | border-radius: 10px; | ||||
padding: 5px 10px; | |||||
padding: 10px 15px; | |||||
cursor: pointer; | cursor: pointer; | ||||
background-color: #000; | background-color: #000; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<div class="commoditylIst"> | <div class="commoditylIst"> | ||||
<div class="item" v-for="item in list" :key="item.title"> | |||||
<div class="item" v-for="item in packageList" :key="item.title"> | |||||
<div @click="clickPayDialog(item)"> | <div @click="clickPayDialog(item)"> | ||||
<div class="line" :style="`background-color:${item.color} ;`"></div> | <div class="line" :style="`background-color:${item.color} ;`"></div> | ||||
<div class="info"> | <div class="info"> | ||||
@@ -100,9 +100,22 @@ | |||||
</template> | </template> | ||||
<script setup> | <script setup> | ||||
const title = ref(""); | |||||
//#region 导入 | |||||
import { getCurrentInstance } from "vue"; | |||||
import { packageInfoApi } from "@/apis/myStore"; | |||||
import { useI18n } from "vue-i18n"; | |||||
import { useRoute, useRouter } from "vue-router"; | |||||
const route = useRoute(); | |||||
const router = useRouter(); | |||||
const { locale } = useI18n(); | |||||
const lanChange = ref(locale); | |||||
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | |||||
//#endregion ------------------------------------ | |||||
//#region 各个套餐的逻辑 | //#region 各个套餐的逻辑 | ||||
const list = reactive([ | |||||
const packageList = ref([ | |||||
{ | { | ||||
color: "#f3af00", | color: "#f3af00", | ||||
title: "shop.Lite", | title: "shop.Lite", | ||||
@@ -166,6 +179,10 @@ const list = reactive([ | |||||
], | ], | ||||
}, | }, | ||||
]); | ]); | ||||
async function getPackageList() { | |||||
const res = await packageInfoApi(); | |||||
} | |||||
const showPayDialog = ref(false); //套餐信息dialog显示隐藏 | const showPayDialog = ref(false); //套餐信息dialog显示隐藏 | ||||
const presentItme = reactive({}); //点击的套餐项 | const presentItme = reactive({}); //点击的套餐项 | ||||
function clickPayDialog(item) { | function clickPayDialog(item) { | ||||
@@ -182,6 +199,27 @@ const orderCodeDialogShow = ref(false); | |||||
const orderCodeUrl = ref(null); | const orderCodeUrl = ref(null); | ||||
//#endregion ------------------------------------ | //#endregion ------------------------------------ | ||||
//#region $t在script中的使用 | |||||
// const { | |||||
// appContext: { | |||||
// config: { globalProperties }, | |||||
// }, | |||||
// } = getCurrentInstance(); | |||||
// const string = "createVideo.typeScript"; | |||||
// const t = globalProperties.$t(string); | |||||
//#endregion ------------------------------------ | |||||
//#region 页面初始化 | |||||
onMounted(async () => { | |||||
getPackageList(); | |||||
}); | |||||
//#endregion ------------------------------------ | |||||
//#region | |||||
//#endregion ------------------------------------ | |||||
//#region | //#region | ||||
//#endregion ------------------------------------ | //#endregion ------------------------------------ | ||||