congzc 2 anni fa
parent
commit
efbbae99ab
9 ha cambiato i file con 244 aggiunte e 60 eliminazioni
  1. +1
    -0
      package.json
  2. +51
    -0
      src/apis/myAccount.js
  3. BIN
      src/assets/logo.png
  4. +3
    -1
      src/lang/package/en.ts
  5. +4
    -2
      src/lang/package/zh-cn.ts
  6. +1
    -22
      src/layout/components/Sidebar/index.vue
  7. +4
    -0
      src/styles/my.scss
  8. +175
    -35
      src/views/myAccount/index.vue
  9. +5
    -0
      yarn.lock

+ 1
- 0
package.json Vedi File

@@ -19,6 +19,7 @@
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
"axios": "^1.3.4", "axios": "^1.3.4",
"browser-image-compression": "^2.0.2", "browser-image-compression": "^2.0.2",
"dayjs": "^1.11.8",
"echarts": "^5.2.2", "echarts": "^5.2.2",
"element-plus": "^2.3.1", "element-plus": "^2.3.1",
"js-audio-recorder": "^1.0.7", "js-audio-recorder": "^1.0.7",


+ 51
- 0
src/apis/myAccount.js Vedi File

@@ -0,0 +1,51 @@
import request from "@/utils/request.js";


/**
* @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'
})
}

BIN
src/assets/logo.png Vedi File

Prima Dopo
Larghezza: 200  |  Altezza: 200  |  Dimensione: 6.7 KiB

+ 3
- 1
src/lang/package/en.ts Vedi File

@@ -102,7 +102,9 @@ export default {
failed: "Failed", failed: "Failed",
msg1: "Obtain one video production time", msg1: "Obtain one video production time",
inputCode:'Please enter the invitation code', inputCode:'Please enter the invitation code',
submit:'submit'
submit:'submit',
noListOrder: "没有数据哦,快去邀请更多人加入我们吧~",
noListInvite: "No data, please invite more people to join us",
}, },


// 商店 // 商店


+ 4
- 2
src/lang/package/zh-cn.ts Vedi File

@@ -97,12 +97,14 @@ export default {
inviteHistory: "邀请记录", inviteHistory: "邀请记录",
orderID: "订单号", orderID: "订单号",
price: "支付金额", price: "支付金额",
date: "购买日期",
date: "购买时间",
successed: "支付成功", successed: "支付成功",
failed: "支付失败", failed: "支付失败",
msg1: "获得视频制作次数一次", msg1: "获得视频制作次数一次",
inputCode:'请输入邀请码', inputCode:'请输入邀请码',
submit:'提交'
submit:'提交',
noListOrder: "没有数据哦,快去邀请更多人加入我们吧~",
noListInvite: "没有数据哦,快去邀请更多人加入我们吧~",
}, },


// 商店 // 商店


+ 1
- 22
src/layout/components/Sidebar/index.vue Vedi File

@@ -22,27 +22,6 @@
{{ $t("shop.title") }} {{ $t("shop.title") }}
</div> </div>
</div> </div>
<!-- <el-scrollbar>
<el-menu
style="background-color: #000000"
:default-active="route.path"
:collapse="!appStore.sidebar.opened"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:active-text-color="variables.menuActiveText"
:unique-opened="false"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="route in permissionStore.routes"
:item="route"
:key="route.path"
:base-path="route.path"
:is-collapse="!appStore.sidebar.opened"
/>
</el-menu>
</el-scrollbar> -->
</div> </div>
</template> </template>


@@ -84,7 +63,7 @@ function routerTo(url: RouteLocationRaw) {
display: flex; display: flex;
width: 100%; width: 100%;
height: 50px; height: 50px;
padding-left: 20px;
padding-left: 10px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
line-height: 50px; line-height: 50px;


+ 4
- 0
src/styles/my.scss Vedi File

@@ -1,3 +1,7 @@
body {
font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
}

.inmiddle { .inmiddle {
position: absolute; position: absolute;
// top: 50%; // top: 50%;


+ 175
- 35
src/views/myAccount/index.vue Vedi File

@@ -5,7 +5,7 @@
<!-- 头像 --> <!-- 头像 -->
<div class="left-one border flex justify-between flex-wrap"> <div class="left-one border flex justify-between flex-wrap">
<div class="avatar"> <div class="avatar">
<img src="" alt="" />
<img :src="defaultAvater" alt="" />
</div> </div>
<div class="info"> <div class="info">
<div class="name">OLO</div> <div class="name">OLO</div>
@@ -33,11 +33,7 @@
<!-- 我的邀请码 --> <!-- 我的邀请码 -->
<div class="left-three border flex justify-between"> <div class="left-three border flex justify-between">
<div class="codeImg"> <div class="codeImg">
<img
ref="codeImgRef"
src="https://formall.oss-accelerate.aliyuncs.com/1003/dongzhanxiziguoji.png"
alt=""
/>
<img ref="codeImgRef" :src="defaultAvater" alt="" />
</div> </div>
<div class="other"> <div class="other">
<div v-if="lanChange == 'en'"> <div v-if="lanChange == 'en'">
@@ -47,7 +43,7 @@
<span class="bigWord">Generation!</span> <span class="bigWord">Generation!</span>
<p class="myInviteCode"> <p class="myInviteCode">
your Invitation code: your Invitation code:
<span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
<span id="InviteCodeId">{{ myInviteCode }}</span>
</p> </p>
</div> </div>


@@ -57,7 +53,7 @@
<span>生成视频!</span> <span>生成视频!</span>
<p class="myInviteCode"> <p class="myInviteCode">
邀请码: 邀请码:
<span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
<span id="InviteCodeId">{{ myInviteCode }}</span>
</p> </p>
</div> </div>


@@ -72,13 +68,15 @@
</div> </div>
</div> </div>
<!-- 输入邀请码 --> <!-- 输入邀请码 -->
<div class="left-four border">
<div class="left-four border" v-if="!isUseState">
<el-input <el-input
class="w-50 m-2" class="w-50 m-2"
v-model="inputCode" v-model="inputCode"
:placeholder="$t('account.inputCode')" :placeholder="$t('account.inputCode')"
/> />
<span class="submitCodeBtn">{{ $t("account.submit") }}</span>
<span class="submitCodeBtn" @click="submitUseCode">{{
$t("account.submit")
}}</span>
</div> </div>
</div> </div>
<!-- 右侧内容 --> <!-- 右侧内容 -->
@@ -90,7 +88,7 @@
<div class="orderItem" v-for="item in 9" :key="item"> <div class="orderItem" v-for="item in 9" :key="item">
<p>{{ $t("account.orderID") }}:123456</p> <p>{{ $t("account.orderID") }}:123456</p>
<div class="orderItem-content"> <div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="orderCode"><img :src="defaultAvater" alt="" /></div>
<div class="info"> <div class="info">
<h5>疯狂星期{{ item }}</h5> <h5>疯狂星期{{ item }}</h5>
<p>{{ $t("account.price") }}:88$</p> <p>{{ $t("account.price") }}:88$</p>
@@ -104,15 +102,32 @@
<!-- ------------------------ 2 --> <!-- ------------------------ 2 -->
<el-tab-pane :label="$t('account.inviteHistory')"> <el-tab-pane :label="$t('account.inviteHistory')">
<div class="card scrolly card2"> <div class="card scrolly card2">
<div class="orderItem" v-for="item in 9" :key="item">
<div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="info">
<h5>张{{ item }}</h5>
<p>E-mail:65465468765465@gmail.com</p>
<p>{{ $t("account.date") }}:2023/5/2</p>
<div v-if="InviteList.length != 0">
<div class="orderItem" v-for="item in InviteList" :key="item">
<div class="orderItem-content">
<div class="orderCode">
<img
:src="item.avatarUrl ? item.avatarUrl : defaultAvater"
alt=""
/>
</div>
<div class="info">
<h5 v-if="item.name">{{ item.name }}</h5>
<p>E-mail:{{ item.email }}</p>
<p>
{{ $t("account.date") }}:{{
dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
}}
</p>
</div>
<div class="state">{{ $t("account.msg1") }}</div>
</div> </div>
<div class="state">{{ $t("account.msg1") }}</div>
</div>
</div>
<!-- 无数据时 -->
<div v-if="InviteList.length == 0" class="noList">
<div class="title">
{{ $t("account.noListInvite") }}
</div> </div>
</div> </div>
</div> </div>
@@ -123,15 +138,30 @@
</template> </template>


<script setup> <script setup>
//#region 导入文件
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { userInfoPinia } from "@/store/modules/userInfo"; import { userInfoPinia } from "@/store/modules/userInfo";
import dayjs from "dayjs";
import {
inviteCodeApi,
useCodeApi,
isUseApi,
useCodeUserApi,
} from "../../apis/myAccount";
import defaultAvater from "../../assets/img/left-top-logo.png";
//#endregion ---------------------------


const { locale } = useI18n(); const { locale } = useI18n();
const lanChange = ref(locale); //国际化 const lanChange = ref(locale); //国际化


const userInfo = userInfoPinia(); //pinia const userInfo = userInfoPinia(); //pinia
//#region 二维码区域
//#region 二维码邀请码区域
const myInviteCode = ref(null); //我的邀请码
async function getMyInviteCode() {
const res = await inviteCodeApi();
myInviteCode.value = res.data;
}
// 点击复制邀请码 // 点击复制邀请码
function copyInviteCode() { function copyInviteCode() {
const inviteCode = document.getElementById("InviteCodeId").innerText; const inviteCode = document.getElementById("InviteCodeId").innerText;
@@ -153,9 +183,52 @@ function DownloadCodeImg() {
link.click(); link.click();
} }
//#endregion //#endregion
const inputCode = ref("");
//#region 输入邀请码区 //#region 输入邀请码区
const inputCode = ref(""); // 邀请码输入框内容
const isUseState = ref(false); //用户是否填写过过邀请码
// 提交邀请码
async function submitUseCode() {
console.log(inputCode.value);
const res = await useCodeApi(inputCode.value);
if (res.code == 200) {
ElMessage.success(
lanChange.value == "zh-cn"
? `提交邀请码成功`
: `The invitation code was submitted successfully`
);
} else {
ElMessage.error(
lanChange.value == "zh-cn"
? `提交邀请码成失败`
: `Failed to submit the invitation code`
);
}
getIsUseState();
}
// 查询是否使用过邀请码
async function getIsUseState() {
const res = await isUseApi();
isUseState.value = res.data;
}
//#endregion ---------------------------

//#region 右侧列表
const InviteList = ref([]); //邀请列表

async function getInviteList() {
const res = await useCodeUserApi();
InviteList.value = res.data;
}

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


//#region 页面初始化
onMounted(() => {
getMyInviteCode(); // 查询用户的邀请码
getIsUseState(); //查询是否使用过邀请码
getInviteList();
});
//#endregion --------------------------- //#endregion ---------------------------


//#region //#region
@@ -170,7 +243,6 @@ function routerTo(url) {
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
height: calc(100vh - 80px); height: calc(100vh - 80px);
padding: 20px 0 0 20px;
// height: calc(100vh - 84px); // height: calc(100vh - 84px);
background-color: #fff; background-color: #fff;
border-radius: 25px 0 0; border-radius: 25px 0 0;
@@ -179,22 +251,32 @@ function routerTo(url) {
.left { .left {
width: 37%; width: 37%;
height: 100%; height: 100%;
margin-right: 2%;


padding: 30px;
.border { .border {
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid #000; border: 1px solid #000;
border-radius: 5px;
border-radius: 15px;
} }


&-one { &-one {
.avatar { .avatar {
position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin-right: 10px; margin-right: 10px;
background-color: red;
border-radius: 50%; border-radius: 50%;
border: 1px solid #ccc;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
} }


.info { .info {
@@ -244,7 +326,13 @@ function routerTo(url) {
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
background-color: skyblue;
background-color: #000;
color: #fff;
transition: all 0.3s;
&:hover {
background-color: #15d1b8;
color: #fff;
}
} }
} }


@@ -252,16 +340,19 @@ function routerTo(url) {
height: 200px; height: 200px;
.codeImg { .codeImg {
position: relative; position: relative;
padding: 10px;
width: 120px; width: 120px;
height: 120px; height: 120px;
margin-right: 10px; margin-right: 10px;
border: 1px solid #ccc;
border-radius: 10px;
// background-color: red; // background-color: red;
img { img {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 100%;
max-height: 100%;
width: 100px;
max-height: 100px;
} }
} }


@@ -323,11 +414,13 @@ function routerTo(url) {
} }


.right { .right {
width: 58%;
height: 800px;
background-color: #f1f2f6;
padding: 30px;
width: 63%;
height: 100%;
// height: 95%; // height: 95%;
border: 1px solid #000;
border-radius: 30px 0 0 0;
overflow: hidden;
// element组件样式 // element组件样式
:deep(.el-tabs--border-card) { :deep(.el-tabs--border-card) {
font-size: 20px; font-size: 20px;
@@ -335,8 +428,31 @@ function routerTo(url) {
} }


.tabs { .tabs {
height: 760px;
// height: 100%;
// height: 760px;
height: 100%;
padding: 20px;
border-radius: 20px;
overflow: hidden;
.noList {
.title {
font-size: 30px;
text-align: center;
margin-top: 100px;
background-image: -webkit-linear-gradient(
left,
#4b61dc,
#15d1b8 25%,
#4b61dc 50%,
#15d1b8 75%,
#4b61dc
) !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-background-size: 200% 100% !important;
background-size: 200% 100% !important;
}
}
.card { .card {
// height: 100%; // height: 100%;
height: 740px; height: 740px;
@@ -359,9 +475,22 @@ function routerTo(url) {
width: 100%; width: 100%;
// justify-content: space-between; // justify-content: space-between;
.orderCode { .orderCode {
position: relative;
width: 70px; width: 70px;
height: 70px; height: 70px;
background-color: skyblue;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 60px;
max-height: 60px;
}
} }


.info { .info {
@@ -391,7 +520,18 @@ function routerTo(url) {


&-content { &-content {
.orderCode { .orderCode {
position: relative;
border: 1px solid #ccc;
border-radius: 50%; border-radius: 50%;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
} }


.state { .state {


+ 5
- 0
yarn.lock Vedi File

@@ -2242,6 +2242,11 @@ dayjs@^1.11.3:
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz" resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz"
integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ== integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==


dayjs@^1.11.8:
version "1.11.8"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.8.tgz#4282f139c8c19dd6d0c7bd571e30c2d0ba7698ea"
integrity sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ==

debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4: debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
version "4.3.4" version "4.3.4"
resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz" resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"


Caricamento…
Annulla
Salva