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