| @@ -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 ------------------------------------ | ||||