| @@ -1,6 +1,5 @@ | |||
| import request from "@/utils/request.js"; | |||
| /** | |||
| * @description 获取邀请码 | |||
| * @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", | |||
| email: "E-mail", | |||
| 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", | |||
| signUp: "Don't have an account? Sign up here", | |||
| forgetPwd: "I forgot my password", | |||
| forgetPwdTitle:'Forgot password', | |||
| forgetPwdTitle:'Forgot Password', | |||
| SendEmail:'Send an email', | |||
| resetPassword:'Reset password', | |||
| resetPassword:'Reset Password', | |||
| setNewPwd:'Set new password', | |||
| newPwd:'New password', | |||
| oldPwd:'Old password', | |||
| newPwd:'New Password', | |||
| oldPwd:'Old Password', | |||
| confirmNewPwd:'Confirm new password', | |||
| confirm:'Confirm', | |||
| gohome:'Back to home page' | |||
| @@ -47,14 +47,14 @@ export default { | |||
| // 创作视频 | |||
| createVideo: { | |||
| title: "Create Video", | |||
| availableMould:"Available moulds", | |||
| personalWarehouse:'Personal warehouse', | |||
| availableMould:"Available Models", | |||
| personalWarehouse:'Personal Warehouse', | |||
| 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", | |||
| confirm: "Confirm", | |||
| aiText: "Please input here", | |||
| @@ -62,15 +62,15 @@ export default { | |||
| voices: "Voices", | |||
| styles: "Styles", | |||
| 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', | |||
| Aipicture:'Ai-generated pictures', | |||
| Aipicture:'AI-generated pictures', | |||
| 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...", | |||
| name: "Name", | |||
| date: "Date", | |||
| videoTitle: "Video title:", | |||
| videoTitle: "Video Title:", | |||
| download: "Download", | |||
| delete: "Delete", | |||
| more: "More", | |||
| loading: "Loading , just a moment", | |||
| noList: "Nothing here. How about making one ?", | |||
| goCreate: "Go create !", | |||
| goCreate: "Go Create !", | |||
| manuscript: "Manuscript", | |||
| generating: "Generating", | |||
| generationFailed: "Failed", | |||
| generationSucceed: "Succeed", | |||
| manuscriptText: "Manuscript", | |||
| 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' | |||
| }, | |||
| // 个人账户 | |||
| account: { | |||
| title: "My Account", | |||
| reSetPwd: "Reset password", | |||
| reSetPwd: "Reset Password", | |||
| editInfo:'Edit personal information', | |||
| until: "Until", | |||
| getMore: "UPGRADE", | |||
| @@ -140,7 +140,7 @@ export default { | |||
| expired: | |||
| "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", | |||
| goLogin: "Login now", | |||
| goLogin: "Login Now", | |||
| reSend: "Resend", | |||
| }, | |||
| }; | |||
| @@ -92,7 +92,7 @@ export default { | |||
| generationSucceed: "生成成功", | |||
| manuscriptText: "草稿", | |||
| generatingText: "视频正在生成中,请稍等哦", | |||
| generationFailedText: "视频生成失败。原因:", | |||
| generationFailedText: "视频生成失败,您可以点击下方按钮重新编辑生成", | |||
| edit:'编辑' | |||
| }, | |||
| @@ -25,7 +25,7 @@ | |||
| <div class="icon"> | |||
| <el-icon><i-ep-DocumentAdd /></el-icon> | |||
| </div> | |||
| API | |||
| API Access | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -105,9 +105,9 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 选中需要上传的图片前后 --> | |||
| <!-- 选中需要上传的图片后 --> | |||
| <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"> | |||
| <button class="uploadBtn"> | |||
| @@ -124,7 +124,7 @@ | |||
| <img :src="imgUrl" alt="" class="inmiddle" /> | |||
| </div> | |||
| </div> | |||
| <!-- 选中需要上传的图片前后 --> | |||
| <!-- AI生成图片展示区 --> | |||
| <div class="left-top" v-show="showUploadBtn == 5"> | |||
| <div class="editAiPicBox"> | |||
| <div class="edit"> | |||
| @@ -163,8 +163,8 @@ | |||
| :class="showFace == 2 ? 'tabAvtive' : ''" | |||
| @click="chooseAiPic" | |||
| > | |||
| <div class="subscript"> | |||
| <span>GPT</span> | |||
| <div class="subscript subscript1"> | |||
| <span>AI </span> | |||
| <img src="../../assets/img/star.png" alt="" /> | |||
| </div> | |||
| {{ $t("createVideo.Aipicture") }} | |||
| @@ -757,7 +757,8 @@ async function lookImg(e) { | |||
| //#endregion ------------------ | |||
| // 标题 | |||
| const title = ref(""); | |||
| const title = | |||
| lanChange.value == "zh-cn" ? ref("未定义标题") : ref("Undefined Title"); | |||
| //#region 上传图片 | |||
| const imgUrl = ref(""); //图片回显路径 | |||
| @@ -1245,8 +1246,8 @@ onMounted(async () => { | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| // height: 1200px; | |||
| height: calc(100vh - 80px); | |||
| height: 900px; | |||
| // height: calc(100vh - 80px); | |||
| // padding: 20px 0 0 40px; | |||
| background-color: #fff; | |||
| border-radius: 25px 0 0; | |||
| @@ -1254,7 +1255,7 @@ onMounted(async () => { | |||
| .left { | |||
| width: 68%; | |||
| height: 80%; | |||
| // height: 90%; | |||
| padding: 20px; | |||
| :deep(.el-input__wrapper) { | |||
| border: none; | |||
| @@ -1279,13 +1280,14 @@ onMounted(async () => { | |||
| .uploadBtn { | |||
| position: relative; | |||
| padding: 5px 10px; | |||
| padding: 10px 15px; | |||
| margin-left: 10px; | |||
| border-radius: 5px; | |||
| transition: all 0.3s; | |||
| background-color: #000; | |||
| color: #fff; | |||
| &:hover { | |||
| background-color: #000; | |||
| color: #fff; | |||
| background-color: #15d1b8; | |||
| } | |||
| } | |||
| @@ -1601,7 +1603,6 @@ onMounted(async () => { | |||
| right: -20px; | |||
| width: 40px; | |||
| height: 40px; | |||
| z-index: 1; | |||
| img { | |||
| position: absolute; | |||
| @@ -1623,13 +1624,40 @@ onMounted(async () => { | |||
| 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 { | |||
| width: 32%; | |||
| height: 100%; | |||
| min-height: 100%; | |||
| padding: 30px 30px 20px 30px; | |||
| background-color: #f1f2f6; | |||
| border-radius: 30px 0 0 0; | |||
| @@ -1669,14 +1697,14 @@ onMounted(async () => { | |||
| } | |||
| .tabs { | |||
| height: 100%; | |||
| min-height: 100%; | |||
| padding: 20px 20px 0px 20px; | |||
| border-radius: 20px; | |||
| overflow-y: scroll; | |||
| .card1 { | |||
| .text { | |||
| padding: 10px; | |||
| border: 1px solid #000; | |||
| border: 1px solid #c0c4cc; | |||
| .el-button { | |||
| float: right; | |||
| margin-top: 10px; | |||
| @@ -1731,6 +1759,7 @@ onMounted(async () => { | |||
| .btnBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| // justify-content: flex-end; | |||
| margin-bottom: 10px; | |||
| } | |||
| audio { | |||
| @@ -134,9 +134,9 @@ | |||
| ></video> | |||
| <div v-else class="insteadVideo"> | |||
| {{ $t("myCreating." + presentItem.statusName + "Text") }} | |||
| <span v-if="presentItem.videoStatus == 3">{{ | |||
| <!-- <span v-if="presentItem.videoStatus == 3">{{ | |||
| presentItem.videoMsg | |||
| }}</span> | |||
| }}</span> --> | |||
| </div> | |||
| <!-- 有视频路径的页脚 --> | |||
| <div class="footer" v-if="presentItem.videoPlayUrl"> | |||
| @@ -257,6 +257,9 @@ function handleDownload(itemVideoPlayUrl) { | |||
| document.body.appendChild(link); | |||
| link.click(); | |||
| document.body.removeChild(link); | |||
| ElMessage.success( | |||
| lanChange.value == "zh-cn" ? `下载成功` : `Download Successfully` | |||
| ); | |||
| } else { | |||
| ElMessage.error( | |||
| lanChange.value == "zh-cn" ? `无法下载` : `Unable to download` | |||
| @@ -647,7 +650,7 @@ onMounted(() => { | |||
| .elBtn { | |||
| color: #fff; | |||
| border-radius: 10px; | |||
| padding: 5px 10px; | |||
| padding: 10px 15px; | |||
| cursor: pointer; | |||
| background-color: #000; | |||
| transition: all 0.3s; | |||
| @@ -1,7 +1,7 @@ | |||
| <template> | |||
| <div class="page"> | |||
| <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 class="line" :style="`background-color:${item.color} ;`"></div> | |||
| <div class="info"> | |||
| @@ -100,9 +100,22 @@ | |||
| </template> | |||
| <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 各个套餐的逻辑 | |||
| const list = reactive([ | |||
| const packageList = ref([ | |||
| { | |||
| color: "#f3af00", | |||
| title: "shop.Lite", | |||
| @@ -166,6 +179,10 @@ const list = reactive([ | |||
| ], | |||
| }, | |||
| ]); | |||
| async function getPackageList() { | |||
| const res = await packageInfoApi(); | |||
| } | |||
| const showPayDialog = ref(false); //套餐信息dialog显示隐藏 | |||
| const presentItme = reactive({}); //点击的套餐项 | |||
| function clickPayDialog(item) { | |||
| @@ -182,6 +199,27 @@ const orderCodeDialogShow = ref(false); | |||
| const orderCodeUrl = ref(null); | |||
| //#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 | |||
| //#endregion ------------------------------------ | |||