Browse Source

邀请码

dev
congzc 2 years ago
parent
commit
efbbae99ab
9 changed files with 244 additions and 60 deletions
  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 View File

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


+ 51
- 0
src/apis/myAccount.js View 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 View File

Before After
Width: 200  |  Height: 200  |  Size: 6.7 KiB

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

@@ -102,7 +102,9 @@ export default {
failed: "Failed",
msg1: "Obtain one video production time",
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 View File

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

// 商店


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

@@ -22,27 +22,6 @@
{{ $t("shop.title") }}
</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>
</template>

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


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

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

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


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

@@ -5,7 +5,7 @@
<!-- 头像 -->
<div class="left-one border flex justify-between flex-wrap">
<div class="avatar">
<img src="" alt="" />
<img :src="defaultAvater" alt="" />
</div>
<div class="info">
<div class="name">OLO</div>
@@ -33,11 +33,7 @@
<!-- 我的邀请码 -->
<div class="left-three border flex justify-between">
<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 class="other">
<div v-if="lanChange == 'en'">
@@ -47,7 +43,7 @@
<span class="bigWord">Generation!</span>
<p class="myInviteCode">
your Invitation code:
<span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
<span id="InviteCodeId">{{ myInviteCode }}</span>
</p>
</div>

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

@@ -72,13 +68,15 @@
</div>
</div>
<!-- 输入邀请码 -->
<div class="left-four border">
<div class="left-four border" v-if="!isUseState">
<el-input
class="w-50 m-2"
v-model="inputCode"
:placeholder="$t('account.inputCode')"
/>
<span class="submitCodeBtn">{{ $t("account.submit") }}</span>
<span class="submitCodeBtn" @click="submitUseCode">{{
$t("account.submit")
}}</span>
</div>
</div>
<!-- 右侧内容 -->
@@ -90,7 +88,7 @@
<div class="orderItem" v-for="item in 9" :key="item">
<p>{{ $t("account.orderID") }}:123456</p>
<div class="orderItem-content">
<div class="orderCode"><img src="" alt="" /></div>
<div class="orderCode"><img :src="defaultAvater" alt="" /></div>
<div class="info">
<h5>疯狂星期{{ item }}</h5>
<p>{{ $t("account.price") }}:88$</p>
@@ -104,15 +102,32 @@
<!-- ------------------------ 2 -->
<el-tab-pane :label="$t('account.inviteHistory')">
<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 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>
@@ -123,15 +138,30 @@
</template>

<script setup>
//#region 导入文件
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
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 lanChange = ref(locale); //国际化

const userInfo = userInfoPinia(); //pinia
//#region 二维码区域
//#region 二维码邀请码区域
const myInviteCode = ref(null); //我的邀请码
async function getMyInviteCode() {
const res = await inviteCodeApi();
myInviteCode.value = res.data;
}
// 点击复制邀请码
function copyInviteCode() {
const inviteCode = document.getElementById("InviteCodeId").innerText;
@@ -153,9 +183,52 @@ function DownloadCodeImg() {
link.click();
}
//#endregion
const inputCode = ref("");
//#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 ---------------------------

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

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

&-one {
.avatar {
position: relative;
width: 80px;
height: 80px;
margin-right: 10px;
background-color: red;
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 {
@@ -244,7 +326,13 @@ function routerTo(url) {
height: 80px;
line-height: 80px;
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;
.codeImg {
position: relative;
padding: 10px;
width: 120px;
height: 120px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 10px;
// background-color: red;
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
max-height: 100%;
width: 100px;
max-height: 100px;
}
}

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

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

.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 {
// height: 100%;
height: 740px;
@@ -359,9 +475,22 @@ function routerTo(url) {
width: 100%;
// justify-content: space-between;
.orderCode {
position: relative;
width: 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 {
@@ -391,7 +520,18 @@ function routerTo(url) {

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

.state {


+ 5
- 0
yarn.lock View File

@@ -2242,6 +2242,11 @@ dayjs@^1.11.3:
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz"
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:
version "4.3.4"
resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"


Loading…
Cancel
Save