去除log
This commit is contained in:
yuyongdong
parent
23a0ada9c0
commit
2f6cd711f1
@ -32,7 +32,6 @@ export default {
|
||||
this.beginCountdown();
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
this.beginCountdown();
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div>{{ formatPrice(5000000000000) }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
NubSize: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
format: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fileSize() {
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
|
||||
let number = this.size;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (number >= 1024 && unitIndex < units.length - 1) {
|
||||
number /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return number.toFixed(2) + ' ' + units[unitIndex];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -36,9 +36,7 @@ export default {
|
||||
localStorage.setItem("myAddress", address);
|
||||
let chainId = await web3.eth.getChainId();
|
||||
chainId = parseInt(chainId);
|
||||
// console.log(chainId, "----");
|
||||
const nonce = await loginNonce(address);
|
||||
// console.log(nonce, "nonce-------------");
|
||||
const nonceStr = `${nonce}|okx`;
|
||||
const nonceEncrypt = hexToBase58(
|
||||
aesEncrypt(nonceStr, "uaw_activity")
|
||||
@ -62,7 +60,6 @@ export default {
|
||||
signature,
|
||||
this.activity
|
||||
);
|
||||
console.log(resLogin.errcode,'61')
|
||||
if (!resLogin.errcode) {
|
||||
new GlobalData().token = resLogin.data.token;
|
||||
this.token = resLogin.data.token;
|
||||
@ -71,12 +68,10 @@ export default {
|
||||
`${this.TOKEN_KEY}+ ${address}`,
|
||||
resLogin.data.token
|
||||
);
|
||||
// console.log(resLogin.data.token);
|
||||
// console.log(parseTokenData(resLogin.data.token),'------------------');
|
||||
this.getUserState(resLogin.data.token)
|
||||
}
|
||||
} else {
|
||||
console.log("Please install the MetaMask plugin");
|
||||
console.info("Please install the MetaMask plugin");
|
||||
}
|
||||
},
|
||||
|
||||
@ -92,7 +87,6 @@ export default {
|
||||
|
||||
logOut() {
|
||||
let NewTime = new Date()
|
||||
console.log(NewTime,'------NewTime');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,6 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleCurrentChange(val) {
|
||||
console.log(val)
|
||||
this.currentPage = val
|
||||
this.$emit("onChangePage", val);
|
||||
},
|
||||
|
||||
@ -25,7 +25,6 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleCurrentChange(val) {
|
||||
console.log(val)
|
||||
this.currentPage = val
|
||||
this.$emit("onChangePage", val);
|
||||
},
|
||||
|
||||
@ -87,7 +87,6 @@ export default {
|
||||
// 登录
|
||||
async getWalletConnected() {
|
||||
await this.$store.dispatch('user/login', this.activity)
|
||||
console.log(this.$store.state.wallet.address)
|
||||
await this.$store.dispatch('user/fetchUserState')
|
||||
location.reload()
|
||||
},
|
||||
@ -100,18 +99,15 @@ export default {
|
||||
|
||||
async isWallet1() {
|
||||
let res = await new Wallet().isWalletConnected()
|
||||
console.log('isWalletConnected' ,res)
|
||||
},
|
||||
|
||||
// 设置token过期
|
||||
setCookie(exdays) {
|
||||
setToken('1')
|
||||
console.log(getToken())
|
||||
return
|
||||
},
|
||||
//读取cookie
|
||||
getCookie() {
|
||||
console.log(document.cookie,'document.cookie-------------------------------------------------------')
|
||||
// if (document.cookie.length > 0) {
|
||||
// var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
|
||||
// for (var i = 0; i < arr.length; i++) {
|
||||
|
||||
@ -1,31 +1,8 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="carousel">
|
||||
<Home />
|
||||
<!-- <Zillionaire ref="zillionaireRef" v-model="currentIndex" /> -->
|
||||
|
||||
<!-- <div class="swiper-container" ref="mySwiper" @slideChange="handleSlideChange">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<Home />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<Bonus @click="dialogVisible = true" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<Ranking />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <Zillionaire ref="zillionaireRef" v-model="currentIndex" /> -->
|
||||
<!-- <div class="navigation">
|
||||
<li :style="`${bgCor};`" class @click="toSwiper(0)"></li>
|
||||
<li @click="toSwiper(1)"></li>
|
||||
<li @click="toSwiper(2)"></li>
|
||||
</div> -->
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<WalletDialog class="wallet-dialog" :walletDialogVisible="walletDialogVisible" @closeDialog="closeDialog" />
|
||||
@ -36,19 +13,13 @@
|
||||
// @ is an alias to /src
|
||||
// import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import Home from "./home/index.vue";
|
||||
import Bonus from "./bonus/index.vue";
|
||||
import Ranking from "./ranking/index.vue";
|
||||
import WalletDialog from './../components/walletDialog/index.vue'
|
||||
import { getToken } from "@/utils/cookies.js";
|
||||
import Swiper from "swiper";
|
||||
import "swiper/css/swiper.css";
|
||||
|
||||
export default {
|
||||
name: "HomeView",
|
||||
components: {
|
||||
Home,
|
||||
Bonus,
|
||||
Ranking,
|
||||
WalletDialog,
|
||||
},
|
||||
data() {
|
||||
@ -57,12 +28,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
bgCor() {
|
||||
// if(this.activeIndex == 1) {
|
||||
// console.log(this.activeIndex)
|
||||
// return `background: #87uy67`
|
||||
// }
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
@ -75,10 +40,6 @@ export default {
|
||||
closeDialog() {
|
||||
this.walletDialogVisible = false
|
||||
},
|
||||
handleSlideChange() {
|
||||
const activeIndex = this.$refs.mySwiper.Swiper;
|
||||
console.log(activeIndex, "-------------------------------");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,422 +0,0 @@
|
||||
<template>
|
||||
<div class="bonus">
|
||||
<div class="bonus-top">
|
||||
<div class="bonus-records">
|
||||
<div class="img-records">
|
||||
<!-- <img src="" alt=""> -->
|
||||
图片
|
||||
</div>
|
||||
<div class="records" @click="getRecords">
|
||||
<i class="el-icon-tickets"></i>
|
||||
</div>
|
||||
<div class="dialog-records" v-if="recordsDialogVisible">
|
||||
<div class="bonus-header">
|
||||
Historical records
|
||||
<span @click="recordsDialogVisible = false">
|
||||
<i class="el-icon-circle-close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="records-list">
|
||||
<el-table :data="recordsList">
|
||||
<template slot="empty">
|
||||
<div>No Data</div>
|
||||
</template>
|
||||
<el-table-column prop="rank" label="Action" :width="80"></el-table-column>
|
||||
<el-table-column label="Time" :width="180">
|
||||
<template
|
||||
slot-scope="scope"
|
||||
>{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.address.slice(-4) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="post" label="Points"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-box">
|
||||
<p>Invite friends to Boost,Earn more rewards</p>
|
||||
<div class="img-box">
|
||||
<!-- <img src="" alt=""> -->
|
||||
图片
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-boosting">
|
||||
<h3>Boosting Records</h3>
|
||||
<li v-for="(item, index) in boostingList" :key="index">
|
||||
<div class="img-user">
|
||||
<img src alt />
|
||||
</div>
|
||||
<div class="name">{{ item.nickname }}</div>
|
||||
<div class="score">
|
||||
+
|
||||
<span>{{ item.score }}</span> Pts
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-content">
|
||||
<div class="bonus-content-top">
|
||||
<p>Invite friends to Boost</p>
|
||||
<p>Earn more rewards</p>
|
||||
<div class="box-amount">{{ boxData.bounsCount }}</div>
|
||||
<div class="invite" @click="copyLink(boxData.shareCode)">
|
||||
<p>Invite friends to Boost</p>
|
||||
<p><i class="el-icon-link"></i></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-content-btm">
|
||||
<div class="turn-btn" @click="turnBox(boxData.id)">Turn ON</div>
|
||||
<div class="turn-check">
|
||||
<el-checkbox v-model="turn.check">
|
||||
<span>Unlock the treasure will consume a small amount of</span>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<!-- <p>Unlock the treasure will consume a small amount of</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-btm">
|
||||
<div class="turn-all-btn">Turn On All</div>
|
||||
<div class="turn-list">
|
||||
<li v-for="(item, index) in boxList" :key="index">
|
||||
<div class="box-img">图片</div>
|
||||
<div class="box-name">{{ item.level }}</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-dialog class="records-dialog" :visible.sync="recordsDialogVisible" :before-close="handleClose">
|
||||
jkjkj
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>llklklklklk
|
||||
</el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sendOpenChest } from './../../utils/chainapi.js'
|
||||
import { getToken } from './../../utils/cookies.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
token: getToken(),
|
||||
boxList: [],
|
||||
boxData: {},
|
||||
boostingList: [
|
||||
{
|
||||
level: 1, // 段位
|
||||
nickname: "用户昵称",
|
||||
score: 100 // 获得的积分
|
||||
},
|
||||
{
|
||||
level: 1, // 段位
|
||||
nickname: "用户昵称",
|
||||
score: 100 // 获得的积分
|
||||
},
|
||||
{
|
||||
level: 1, // 段位
|
||||
nickname: "用户昵称",
|
||||
score: 100 // 获得的积分
|
||||
}
|
||||
],
|
||||
recordsDialogVisible: false,
|
||||
recordsList: [],
|
||||
turn: {
|
||||
check: false,
|
||||
},
|
||||
userData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getBoosting();
|
||||
this.getBoxList()
|
||||
this.getOpenBox()
|
||||
this.userData = JSON.parse(localStorage.getItem("userData"));
|
||||
},
|
||||
methods: {
|
||||
// 助力记录
|
||||
async getHistorical(id) {
|
||||
let res = await this.$axios
|
||||
.post(
|
||||
process.env.VUE_APP_API_URL+"/api/chest/enhance/list",
|
||||
{ chestid: id },
|
||||
{
|
||||
headers: { Authorization: `Bearer ${this.token}` }
|
||||
}
|
||||
)
|
||||
if(res.data.errcode == 0) {
|
||||
this.boostingList = res.data.data
|
||||
}
|
||||
},
|
||||
// 邀请列表
|
||||
getBoosting() {
|
||||
this.$axios
|
||||
.get(process.env.VUE_APP_API_URL+"/api/activity/invite_list", {
|
||||
params: "",
|
||||
headers: { Authorization: `Bearer ${this.token}` }
|
||||
})
|
||||
.then(res => {
|
||||
console.log('getBoosting',res.data);
|
||||
// boostingList
|
||||
});
|
||||
},
|
||||
getRecords() {
|
||||
this.recordsDialogVisible = true;
|
||||
},
|
||||
|
||||
// 复制助力链接
|
||||
copyLink(text) {
|
||||
console.log(text)
|
||||
let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${text}/id=${this.boxList[0].id}`
|
||||
let oInput = document.createElement("input");
|
||||
oInput.value = url;
|
||||
document.body.appendChild(oInput);
|
||||
oInput.select();
|
||||
document.execCommand("Copy");
|
||||
oInput.className = "oInput";
|
||||
oInput.style.display = "none";
|
||||
this.$message.success("Copy succeeded");
|
||||
},
|
||||
|
||||
// 宝箱列表
|
||||
async getBoxList() {
|
||||
let res = await this.$axios
|
||||
.get(process.env.VUE_APP_API_URL+"/api/chest/list", {
|
||||
params: "",
|
||||
headers: { Authorization: `Bearer ${this.token}` }
|
||||
})
|
||||
console.log('boxList', res.data.data)
|
||||
if(res.data.errcode == 0) {
|
||||
this.boxList = res.data.data
|
||||
console.log('宝箱列表', this.boxList)
|
||||
this.boxData = res.data.data[0]
|
||||
this.getHistorical(this.boxList[0].id);
|
||||
}
|
||||
},
|
||||
|
||||
// 宝箱开启记录
|
||||
async getOpenBox() {
|
||||
let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/chest/open/history',{params: '',headers: { Authorization: `Bearer ${this.token}` }})
|
||||
console.log('宝箱开启记录', res.data)
|
||||
},
|
||||
|
||||
// 开宝箱
|
||||
async turnBox(id) {
|
||||
// const address = localStorage.getItem('address')
|
||||
try{
|
||||
// let res = await sendOpenChest(address,id)
|
||||
let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/open',{chestId: id},{
|
||||
headers: { Authorization: `Bearer ${this.token}` }
|
||||
})
|
||||
console.log('开宝箱', res)
|
||||
} catch(e){
|
||||
console.info(e)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bonus {
|
||||
padding: 20px;
|
||||
.bonus-top {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.bonus-records {
|
||||
width: 120px;
|
||||
padding-right: 20px;
|
||||
position: relative;
|
||||
.img-records {
|
||||
// text-align: right;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
background: #4095e5;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.records {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dialog-records {
|
||||
width: 360px;
|
||||
// height: 280px;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-bottom: 0px;
|
||||
position: absolute;
|
||||
left: -300px;
|
||||
.bonus-header {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #4095e5;
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
color: #000;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.records-list {
|
||||
::v-deep .el-table {
|
||||
thead {
|
||||
color: #000;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-table__empty-block {
|
||||
.el-table__empty-text {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bonus-box {
|
||||
width: 400px;
|
||||
height: 320px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.img-box {
|
||||
width: 360px;
|
||||
height: 280px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.bonus-boosting {
|
||||
width: 280px;
|
||||
min-height: 320px;
|
||||
border: 2px solid #f0f0f0;
|
||||
h3 {
|
||||
background: #4095e5;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 40px;
|
||||
.img-user {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.score {
|
||||
color: #f59a23;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bonus-content {
|
||||
.bonus-content-top {
|
||||
width: 320px;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.box-amount {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.invite {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -137px;
|
||||
transform: translateY(-50%);
|
||||
padding: 10px;
|
||||
background: #f59a23;
|
||||
cursor: pointer;
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bonus-content-btm {
|
||||
margin-bottom: 10px;
|
||||
.turn-btn {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin: 15px auto;
|
||||
background: #f59a23;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.turn-check {
|
||||
::v-deep .el-checkbox {
|
||||
.el-checkbox__input {
|
||||
.el-checkbox__inner {
|
||||
border: 0px;
|
||||
background: #4095e5;
|
||||
border-radius: 50%;
|
||||
&::after {
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-checkbox__label {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bonus-btm {
|
||||
width: 1080px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #f0f0f0;
|
||||
padding: 10px;
|
||||
.turn-all-btn {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: #f59a23;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.turn-list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
.box-img {
|
||||
width: 180px;
|
||||
height: 220px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.box-name {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.records-dialog {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -449,7 +449,6 @@ export default {
|
||||
)
|
||||
if(res.data.errcode == 0) {
|
||||
this.boostingList = res.data.data
|
||||
console.log('助力记录', this.boostingList)
|
||||
}
|
||||
},
|
||||
|
||||
@ -518,8 +517,6 @@ export default {
|
||||
let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/enhance/list', {},{headers: { Authorization: `Bearer ${this.token}` }})
|
||||
if(res.data.errcode == 0){
|
||||
this.myRecordsList = res.data.data
|
||||
}else{
|
||||
console.log('[getMyHistoricalLog error]',res)
|
||||
}
|
||||
},
|
||||
// 我的助力记录分页
|
||||
|
||||
@ -39,7 +39,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.activityData,this.userData)
|
||||
this.generateMonth()
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -1,999 +0,0 @@
|
||||
<template>
|
||||
<div class="cal_con">
|
||||
<div class="cal_header">
|
||||
<!-- 顶部左侧 -->
|
||||
<div class="cal_header_left">
|
||||
<div class="cal_header_left_top">
|
||||
<span class="cal_h_time">{{ year }}</span>
|
||||
</div>
|
||||
<div class="cal_header_left_bottom">
|
||||
<div class="cal_h_left">
|
||||
<div class="cal_h_btn" @click="preYear">
|
||||
<svg class="cal_h_l_icon">
|
||||
<!-- 画线条 -->
|
||||
<polyline
|
||||
points="6,0 2,4 6,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
<!-- 画线条 -->
|
||||
<polyline
|
||||
points="10,0 6,4 10,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cal_h_btn" @click="preMonth">
|
||||
<svg class="cal_h_l_icon">
|
||||
<polyline
|
||||
points="6,0 2,4 6,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal_h_center">
|
||||
<span class="cal_h_time">{{ month }}</span>
|
||||
</div>
|
||||
<div class="cal_h_right">
|
||||
<div class="cal_h_btn" @click="nextMonth">
|
||||
<svg class="cal_h_l_icon">
|
||||
<polyline
|
||||
points="2,0 8,4 2,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cal_h_btn" @click="nextYear">
|
||||
<svg class="cal_h_l_icon">
|
||||
<polyline
|
||||
points="2,0 8,4 2,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
<polyline
|
||||
points="6,0 12,4 6,8"
|
||||
style="fill: none; stroke: #ffffff; stroke-width: 2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 顶部右侧 -->
|
||||
<div class="cal_header_right">
|
||||
<div class="nameText">姓名:张三</div>
|
||||
<div class="QingjiaText">请假:{{jobTime["请假"]}}h</div>
|
||||
<div class="JiaBanText">加班:{{jobTime["加班"]}}h</div>
|
||||
<div class="ChuCaiText">出差:{{jobTime["出差"]}}h</div>
|
||||
<div class="YiChangText">异常考勤:{{jobTime["异常卡"]}}次</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cal_month">
|
||||
<!--日历表头 周一 周二 周三 周四 周五 周六 周日-->
|
||||
<div class="cal_m_weeks">
|
||||
<div v-for="w in weeks" :key="w" class="cal_m_weeks_cell">
|
||||
{{ w }}
|
||||
</div>
|
||||
</div>
|
||||
<!--日历表内容 -->
|
||||
<div class="cal_m_days">
|
||||
<!-- 第几行 -->
|
||||
<div
|
||||
v-for="(ds, index) in monthData"
|
||||
:key="index"
|
||||
class="cal_m_day_line"
|
||||
>
|
||||
<!-- 每行内容 -->
|
||||
<div
|
||||
v-for="d in ds"
|
||||
:key="d.day"
|
||||
class="cal_m_day_cell"
|
||||
:style="{ color: getCellColor(d), background: getBgColor(d)}"
|
||||
@mouseenter="mouseenter(d, $event)"
|
||||
@mouseleave="mouseleave(d, $event)"
|
||||
>
|
||||
<div class="itemDay">{{ d.day }}</div>
|
||||
<!-- {{ ds[index].date.Format("yyyy-MM-dd") }} -->
|
||||
<!-- {{ d.date.Format("yyyy-MM-dd") }} -->
|
||||
<slot :name="d.fullYear + '-' + d.month + '-' + d.day"></slot>
|
||||
<!-- 未签到 -->
|
||||
<div
|
||||
v-if="
|
||||
d.type == -1 &&
|
||||
setDataList(d.date).typeName == '未签到'
|
||||
"
|
||||
class="ZhengChang"
|
||||
>
|
||||
<!-- <div class="ZhengChangTitle">未签到:{{setDataList(d.date).jobTime}}次</div> -->
|
||||
<div class="ZhengChangTitle">
|
||||
<!-- <img src="./../../assets/img/flame/mark.png" alt=""> -->
|
||||
</div>
|
||||
<div class="ZhengChangDian">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 正常卡 -->
|
||||
<div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '正常卡'
|
||||
"
|
||||
class="ZhengChang"
|
||||
>
|
||||
<div class="ZhengChangTitle">正常卡:{{setDataList(d.date).jobTime}}次</div>
|
||||
<!-- <div class="ZhengChangTitle"><img src="./../../assets/img/flame/mark.png" alt=""></div> -->
|
||||
<div class="ZhengChangDian">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 请假 -->
|
||||
<div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '请假'
|
||||
"
|
||||
class="Qingjia"
|
||||
>
|
||||
<!-- <div class="QingjiaTitle">请假:事假{{setDataList(d.date).jobTime}}</div> -->
|
||||
<div class="QingjiaDian">
|
||||
×
|
||||
<!-- <div></div>
|
||||
<div></div>
|
||||
<div></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 加班 -->
|
||||
<div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '加班'
|
||||
"
|
||||
class="JiaBan"
|
||||
>
|
||||
<!-- <div class="JiaBanTitle">加班:{{setDataList(d.date).jobTime}}h</div> -->
|
||||
<div class="JiaBanDian">
|
||||
√
|
||||
<!-- <div></div>
|
||||
<div></div>
|
||||
<div></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 出差 -->
|
||||
<!-- <div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '出差'
|
||||
"
|
||||
class="ChuChai"
|
||||
@click="ss(index)"
|
||||
>
|
||||
<div class="ChuChaiTitle">出差{{setDataList(d.date).jobTime}}</div>
|
||||
<div class="ChuChaiTitle"><img src="./../../assets/img/flame/mark.png" alt=""></div>
|
||||
<div class="ChuChaiDian">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 异常卡 -->
|
||||
<!-- <div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '异常卡'
|
||||
"
|
||||
class="YiChang"
|
||||
@click="ss(index)"
|
||||
>
|
||||
<div class="YiChangTitle">异常卡{{setDataList(d.date).jobTime}}</div>
|
||||
<div class="YiChangDian">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 假期 -->
|
||||
<!-- <div
|
||||
v-if="
|
||||
d.type == 0 &&
|
||||
setDataList(d.date).typeName == '假期'
|
||||
"
|
||||
class="JiaQi"
|
||||
>
|
||||
<div class="JiaQiTitle">假期{{setDataList(d.date).jobTime}}</div>
|
||||
<div class="JiaQiDian">
|
||||
<div>1</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, reactive, onMounted, defineEmits} from "vue";
|
||||
import axios from "axios";
|
||||
import { getToken } from './../../utils/cookies.js'
|
||||
|
||||
const $emit = defineEmits(["enter", "leave", "changeMonth"])
|
||||
const dataList = reactive({
|
||||
datas: [
|
||||
{
|
||||
time: "2024-04-01",
|
||||
// typeName: "正常卡",
|
||||
jobTime: 8
|
||||
},
|
||||
{
|
||||
time: "2024-04-02",
|
||||
typeName: "请假",
|
||||
jobTime: 0
|
||||
},
|
||||
{
|
||||
time: "2024-04-03",
|
||||
typeName: "请假",
|
||||
jobTime: 8
|
||||
},
|
||||
{
|
||||
time: "2024-04-12",
|
||||
typeName: "加班",
|
||||
jobTime: 4
|
||||
},
|
||||
{
|
||||
time: "2024-04-13",
|
||||
typeName: "出差",
|
||||
jobTime: 14
|
||||
},
|
||||
{
|
||||
time: "2024-04-14",
|
||||
typeName: "异常卡",
|
||||
jobTime: 8
|
||||
},
|
||||
{
|
||||
time: "2024-04-22",
|
||||
typeName: "未签到",
|
||||
jobTime: 11
|
||||
},
|
||||
{
|
||||
time: "2024-04-22",
|
||||
typeName: "未签到",
|
||||
jobTime: 11
|
||||
},
|
||||
{
|
||||
time: "2024-04-23",
|
||||
typeName: "未签到",
|
||||
jobTime: 11
|
||||
},
|
||||
{
|
||||
time: "2024-04-24",
|
||||
typeName: "未签到",
|
||||
jobTime: 11
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
let now = ref(new Date()) //当前时间：Fri Jul 29 2022 09:57:33 GMT+0800 (中国标准时间)
|
||||
let year = ref(0)
|
||||
let month = ref(0)
|
||||
let jobTime = ref([])
|
||||
const weeks = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||||
let monthData = ref([]) //月数据容器
|
||||
let currentYear = ref(new Date().getFullYear()) //当前年：2024
|
||||
let currentMonth = ref(new Date().getMonth() + 1) //当前月：4
|
||||
let currentDay = ref(new Date().getDate()) //当前天：2
|
||||
onMounted(() => {
|
||||
setYearMonth(now.value);
|
||||
generateMonth(now.value);
|
||||
getJobTime()
|
||||
getCheckInit()
|
||||
})
|
||||
|
||||
function getJobTime(){
|
||||
dataList.datas.forEach((item) => {
|
||||
|
||||
// check if animal type has already been added to newObj
|
||||
if(!jobTime.value[item.typeName]){
|
||||
// If it is the first time seeing this animal type
|
||||
// we need to add title and points to prevent errors
|
||||
jobTime.value[item.typeName] = {};
|
||||
jobTime.value[item.typeName] = 0;
|
||||
}
|
||||
// add animal points to newObj for that animal type.
|
||||
jobTime.value[item.typeName] += item.jobTime
|
||||
})
|
||||
}
|
||||
|
||||
// 通过输入日期，匹配当天的所有数据
|
||||
// 入参格式 value：'2022-07-09'
|
||||
function setDataList(value) {
|
||||
let object = {};
|
||||
const date = dateFormat("YYYY-mm-dd", value)
|
||||
dataList.datas.forEach((element) => {
|
||||
if (element.time == date) {
|
||||
object = element;
|
||||
}
|
||||
});
|
||||
return object;
|
||||
}
|
||||
|
||||
function setYearMonth(now) {
|
||||
year.value = now.getFullYear();
|
||||
month.value = now.getMonth() + 1;
|
||||
}
|
||||
|
||||
// 上一年
|
||||
function preYear() {
|
||||
let n = now.value;
|
||||
let date = new Date(
|
||||
n.getFullYear() - 1,
|
||||
n.getMonth(),
|
||||
n.getDate(),
|
||||
n.getHours(),
|
||||
n.getMinutes(),
|
||||
n.getSeconds(),
|
||||
n.getMilliseconds()
|
||||
);
|
||||
|
||||
setYearMonthInfos(date);
|
||||
}
|
||||
|
||||
// 上个月
|
||||
function preMonth() {
|
||||
let n = now.value;
|
||||
let date = new Date(
|
||||
n.getFullYear(),
|
||||
n.getMonth() - 1,
|
||||
n.getDate(),
|
||||
n.getHours(),
|
||||
n.getMinutes(),
|
||||
n.getSeconds(),
|
||||
n.getMilliseconds()
|
||||
);
|
||||
|
||||
setYearMonthInfos(date);
|
||||
}
|
||||
|
||||
// 下一年
|
||||
function nextYear() {
|
||||
let n = now.value;
|
||||
let date = new Date(
|
||||
n.getFullYear() + 1,
|
||||
n.getMonth(),
|
||||
n.getDate(),
|
||||
n.getHours(),
|
||||
n.getMinutes(),
|
||||
n.getSeconds(),
|
||||
n.getMilliseconds()
|
||||
);
|
||||
|
||||
setYearMonthInfos(date);
|
||||
}
|
||||
|
||||
// 下个月
|
||||
function nextMonth() {
|
||||
let n = now.value;
|
||||
let date = new Date(
|
||||
n.getFullYear(),
|
||||
n.getMonth() + 1,
|
||||
n.getDate(),
|
||||
n.getHours(),
|
||||
n.getMinutes(),
|
||||
n.getSeconds(),
|
||||
n.getMilliseconds()
|
||||
);
|
||||
|
||||
setYearMonthInfos(date);
|
||||
}
|
||||
|
||||
// 获取当前显示的月份
|
||||
function setYearMonthInfos(date) {
|
||||
|
||||
setYearMonth(date);
|
||||
generateMonth(date);
|
||||
now.value = date;
|
||||
dateChange();
|
||||
}
|
||||
|
||||
function generateMonth(date) {
|
||||
date.setDate(1);
|
||||
// 星期 0 - 6， 星期天 - 星期6
|
||||
let weekStart = date.getDay();
|
||||
|
||||
let endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
||||
let dayEnd = endDate.getDate();
|
||||
// 星期 0 - 6， 星期天 - 星期6
|
||||
let weeEnd = endDate.getDay();
|
||||
|
||||
let milsStart = date.getTime();
|
||||
let dayMils = 24 * 60 * 60 * 1000;
|
||||
let milsEnd = endDate.getTime() + dayMils;
|
||||
|
||||
let monthDatas = [];
|
||||
let current;
|
||||
// 上个月的几天
|
||||
for (let i = 1; i < weekStart; i++) {
|
||||
current = new Date(milsStart - (weekStart - i) * dayMils);
|
||||
monthDatas.push({
|
||||
type: -1,
|
||||
date: current,
|
||||
fullYear: current.getFullYear(),
|
||||
month: current.getMonth() + 1,
|
||||
day: current.getDate(),
|
||||
});
|
||||
}
|
||||
// 当前月
|
||||
for (let i = 0; i < dayEnd; i++) {
|
||||
current = new Date(milsStart + i * dayMils);
|
||||
monthDatas.push({
|
||||
type: 0,
|
||||
date: current,
|
||||
fullYear: current.getFullYear(),
|
||||
month: current.getMonth() + 1,
|
||||
day: current.getDate(),
|
||||
});
|
||||
}
|
||||
// 下个月的几天
|
||||
for (let i = 0; i < 6 - weeEnd + 1; i++) {
|
||||
current = new Date(milsEnd + i * dayMils);
|
||||
monthDatas.push({
|
||||
type: 1,
|
||||
date: current,
|
||||
fullYear: current.getFullYear(),
|
||||
month: current.getMonth() + 1,
|
||||
day: current.getDate(),
|
||||
});
|
||||
}
|
||||
|
||||
monthData.value = [];
|
||||
for (let i = 0; i < monthDatas.length; i++) {
|
||||
let mi = i % 7;
|
||||
if (mi == 0) {
|
||||
monthData.value.push([]);
|
||||
}
|
||||
monthData.value[Math.floor(i / 7)].push(monthDatas[i]);
|
||||
}
|
||||
|
||||
// 少于6行，补足6行
|
||||
if (monthData.value.length <= 5) {
|
||||
milsStart = current.getTime();
|
||||
let lastLine = [];
|
||||
for (let i = 1; i <= 7; i++) {
|
||||
current = new Date(milsStart + i * dayMils);
|
||||
lastLine.push({
|
||||
type: 1,
|
||||
date: current,
|
||||
fullYear: current.getFullYear(),
|
||||
month: current.getMonth() + 1,
|
||||
day: current.getDate(),
|
||||
});
|
||||
}
|
||||
monthData.value.push(lastLine);
|
||||
}
|
||||
}
|
||||
|
||||
function getCellColor(d) {
|
||||
if (
|
||||
d.fullYear == currentYear.value &&
|
||||
d.month == currentMonth.value &&
|
||||
d.day == currentDay.value
|
||||
) {
|
||||
return "#000";
|
||||
}
|
||||
let color = d.type == -1 ? "#6C6E83" : d.type == 1 ? "#4b4752" : d.type == 0 ? "#fff" : ""
|
||||
return color;
|
||||
}
|
||||
function getBgColor(d) {
|
||||
if (
|
||||
d.fullYear == currentYear.value &&
|
||||
d.month == currentMonth.value &&
|
||||
d.day == currentDay.value
|
||||
) {
|
||||
return "#38dedc";
|
||||
}
|
||||
let color = d.type == -1 ? "#050608" : d.type == 1 ? "#000" : "#221d2b";
|
||||
return color;
|
||||
}
|
||||
|
||||
function mouseenter(d, event) {
|
||||
$emit("enter", event, d);
|
||||
// document.getElementsByClassName('cal_m_day_cell').style('background-color','#000000')
|
||||
}
|
||||
|
||||
function mouseleave(d, event) {
|
||||
$emit("leave", event, d);
|
||||
}
|
||||
|
||||
function dateChange() {
|
||||
let fullYear = now.value.getFullYear();
|
||||
|
||||
let month = now.value.getMonth();
|
||||
let startDay = new Date(fullYear, month, 1);
|
||||
let endDay = new Date(fullYear, month + 1, 0, 23, 59, 59);
|
||||
$emit("changeMonth", startDay, endDay);
|
||||
}
|
||||
|
||||
function dateFormat(fmt, date) {
|
||||
let ret;
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt);
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
}
|
||||
|
||||
// 获取签到列表
|
||||
async function getCheckInit(){
|
||||
let token = getToken()
|
||||
let res = await axios.get(`/api/user/checkin/list/1month`, {
|
||||
params: "",
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
let dataLength = res.data.data[0].day.substr(-2)
|
||||
|
||||
// console.log(dataLength,res.data.data,'签到列表')
|
||||
// for(let i = 1; i < dataLength; i++) {
|
||||
// // if(res.data.data[0].day.substr(-2))
|
||||
// if((dataLength-i)<10) dataLength = "0" + dataLength
|
||||
// console.log(dataLength-i,res.data.data[i],'---------------------------------')
|
||||
// // dataList.datas[i].time = `${res.data.data[i].day.substr(0,4)}`+"-"+`${res.data.data[i].day.substr(4,2)}`+"-"+`${res.data.data[i].day.substr(-2)}`
|
||||
// // dataList.datas[i]["typeName"] = "加班"
|
||||
// }
|
||||
console.log(res.data.data[0].day,res.data.data[res.data.data.length-1].day,dataList.datas)
|
||||
console.log(await DateDiff(res.data.data[res.data.data.length-1].day,res.data.data[0].day))
|
||||
}
|
||||
|
||||
async function DateDiff(sDate1, sDate2) {
|
||||
var aDate, oDate1, oDate2, iDays;
|
||||
aDate = sDate1.split('-');
|
||||
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为yyyy-MM-dd格式
|
||||
aDate = sDate2.split('-');
|
||||
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
|
||||
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
|
||||
console.log(aDate,oDate1,oDate2,iDays)
|
||||
return iDays;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cal_con {
|
||||
box-sizing: border-box;
|
||||
// width: 1020px; //下方单元格*7+左右内边距 140*7+20+20
|
||||
padding: 10px 20px 20px 20px;
|
||||
-webkit-user-select: none; //取消鼠标点快了文字会被选中。
|
||||
-moz-user-select: none; //取消鼠标点快了文字会被选中。
|
||||
-ms-user-select: none; //取消鼠标点快了文字会被选中。
|
||||
user-select: none; //取消鼠标点快了文字会被选中。
|
||||
color: #000000;
|
||||
// box-shadow: 0 2px 12px 0 #0000006e;
|
||||
// background: #ffffff;
|
||||
border-radius: 20px;
|
||||
|
||||
.cal_header {
|
||||
width: 980px; //下方单元格*7 140*7
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: none;
|
||||
|
||||
.cal_header_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.cal_header_left_top {
|
||||
width: 122px;
|
||||
height: 30px;
|
||||
background: #109af9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.cal_h_time {
|
||||
font-family: "Microsoft YaHei";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.cal_header_left_bottom {
|
||||
width: 122px;
|
||||
height: 30px;
|
||||
background: rgba(16, 154, 249, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.cal_h_left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.cal_h_btn {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cal_h_btn:hover {
|
||||
background-color: #109af9;
|
||||
}
|
||||
|
||||
.cal_h_l_icon {
|
||||
height: 8px;
|
||||
width: 12px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cal_h_center {
|
||||
.cal_h_time {
|
||||
font-family: "Microsoft YaHei";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.cal_h_right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.cal_h_btn {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cal_h_btn:hover {
|
||||
background-color: #109af9;
|
||||
}
|
||||
|
||||
.cal_h_l_icon {
|
||||
height: 8px;
|
||||
width: 12px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal_header_right {
|
||||
// width: 1125px;
|
||||
height: 43px;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.QingjiaText {
|
||||
color: rgba(255, 199, 0, 1);
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.JiaBanText {
|
||||
color: rgba(36, 0, 255, 1);
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.ChuCaiText {
|
||||
color: rgba(255, 167, 40, 1);
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.YiChangText {
|
||||
color: rgba(240, 92, 39, 1);
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal_month {
|
||||
// 日历表头 周日 周一 周二 周三 周四 周五 周六
|
||||
margin: 0 auto;
|
||||
.cal_m_weeks {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.cal_m_weeks_cell {
|
||||
box-sizing: border-box;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
// font-weight: 600;
|
||||
// font-size: 18px;
|
||||
font-size: 14px;
|
||||
// border-bottom: 1px solid #818182;
|
||||
// border-right: 1px solid #818182;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// color: #38DEDC;
|
||||
color: #fff;
|
||||
}
|
||||
.cal_m_weeks_cell:last-child {
|
||||
// border-right: 0px solid #818182;
|
||||
}
|
||||
}
|
||||
|
||||
// 日历表内容
|
||||
.cal_m_days {
|
||||
// 第几行
|
||||
.cal_m_day_line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// 每行内容
|
||||
.cal_m_day_cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
// border-top: 1px solid #818182;
|
||||
// border-right: 1px solid #818182;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.itemDay {
|
||||
width: 100%;
|
||||
// height: 30px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.cal_m_day_cell:last-child {
|
||||
// border-right: 0px solid #818182;
|
||||
}
|
||||
|
||||
// 每行内容-浮动效果
|
||||
// .cal_m_day_cell:hover {
|
||||
// color: #409eff;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 正常卡
|
||||
.ZhengChang {
|
||||
margin: 0px 0px 0px 8px;
|
||||
// width: 120px;
|
||||
// height: 35px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px;
|
||||
// background: rgba(16, 154, 249, 0.2);
|
||||
color: rgba(16, 154, 249, 1);
|
||||
img {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.ZhengChangTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// .ZhengChangDian {
|
||||
// div {
|
||||
// width: 4px;
|
||||
// height: 4px;
|
||||
// margin-bottom: 2px;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(16, 154, 249, 1);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.ZhengChang:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 请假
|
||||
.Qingjia {
|
||||
// margin: 0px 0px 0px 8px;
|
||||
// width: 120px;
|
||||
// height: 35px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// padding: 0px 10px;
|
||||
background: rgba(255, 199, 0, 0.2);
|
||||
background: #ff5b5b;
|
||||
color: rgba(255, 199, 0, 1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// .QingjiaTitle {
|
||||
// }
|
||||
|
||||
.QingjiaDian {
|
||||
div {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 199, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Qingjia:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 加班
|
||||
.JiaBan {
|
||||
margin: 0px 0px 0px 8px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px;
|
||||
background: rgba(36, 0, 255, 0.2);
|
||||
color: rgba(36, 0, 255, 1);
|
||||
|
||||
// .JiaBanTitle {
|
||||
// }
|
||||
|
||||
.JiaBanDian {
|
||||
div {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
background: rgba(36, 0, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.JiaBan:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 出差
|
||||
.ChuChai {
|
||||
margin: 0px 0px 0px 8px;
|
||||
// width: 120px;
|
||||
// height: 35px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px;
|
||||
// background: rgba(255, 167, 40, 0.2);
|
||||
color: #ffa728;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ChuChaiTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// .ChuChaiDian {
|
||||
// div {
|
||||
// width: 4px;
|
||||
// height: 4px;
|
||||
// margin-bottom: 2px;
|
||||
// border-radius: 4px;
|
||||
// background: #ffa728;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.ChuChai:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 异常卡
|
||||
.YiChang {
|
||||
margin: 0px 0px 0px 8px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px;
|
||||
background: rgba(240, 92, 39, 0.2);
|
||||
color: rgba(240, 92, 39, 1);
|
||||
|
||||
// .YiChangTitle {
|
||||
// }
|
||||
|
||||
.YiChangDian {
|
||||
div {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
background: rgba(240, 92, 39, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.YiChang:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 假期
|
||||
.JiaQi {
|
||||
margin: 0px 0px 0px 8px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0px 10px;
|
||||
background: rgba(29, 209, 155, 0.2);
|
||||
color: rgba(29, 209, 155, 1);
|
||||
|
||||
// .JiaQiTitle {
|
||||
// }
|
||||
|
||||
.JiaQiDian {
|
||||
div {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
background: rgba(29, 209, 155, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.JiaQi:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -161,7 +161,6 @@ export default {
|
||||
// headers: { Authorization: `Bearer ${this.token}` }
|
||||
// });
|
||||
let res = await apiUploadInviteCode(newInvite)
|
||||
// console.log('领取助力奖励 || 判断是否是新用户',res)
|
||||
return
|
||||
if (res.data.errcode == 0) {
|
||||
this.isNewUser = 0
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -726,12 +726,6 @@ export default {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
activeList: {
|
||||
handler(newVal) {
|
||||
// console.log(newVal, "监听");
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredBar() {
|
||||
@ -791,7 +785,6 @@ export default {
|
||||
await this.$axios
|
||||
.get(process.env.VUE_APP_API_URL+`/api/activity/${this.activityId}`)
|
||||
.then(res => {
|
||||
// if (res.data.errcode == 0) {
|
||||
this.activityName = res.data.data.name;
|
||||
const actionTitles = {
|
||||
TwitterConnect: "Connect",
|
||||
@ -807,8 +800,6 @@ export default {
|
||||
}
|
||||
this.activityData = res.data.data
|
||||
this.baseTasks = res.data.data.baseTasks
|
||||
console.log(this.baseTasks, this.activityData)
|
||||
// }
|
||||
})
|
||||
.catch(err => {
|
||||
console.info(err);
|
||||
@ -836,7 +827,6 @@ export default {
|
||||
let res = await apiBeginActivity(data.id);
|
||||
if(res.errcode == 0) {
|
||||
await this.getProgress()
|
||||
// console.log("开始任务", res, data);
|
||||
}
|
||||
}
|
||||
|
||||
@ -860,7 +850,6 @@ export default {
|
||||
async getActivitrStatue(id) {
|
||||
await apiCheckActivity(id);
|
||||
await this.getProgress()
|
||||
// console.log(res, "检查任务状态------------------");
|
||||
},
|
||||
async loginTwitter() {
|
||||
// const _address = "0x8c10Ae04BF525734eaC00d5F7c062567461c207F";
|
||||
@ -868,7 +857,6 @@ export default {
|
||||
// const codeChallenge = crypto.randomUUID()
|
||||
const codeChallenge = Date.now();
|
||||
const address = this.$store.state.user.address;
|
||||
// console.log('codeChallenge: ' + codeChallenge)
|
||||
const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
|
||||
const state = btoa(`${address}|${codeChallenge}|${location.href}`);
|
||||
const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
|
||||
@ -877,7 +865,6 @@ export default {
|
||||
state
|
||||
)}`;
|
||||
let newwin = window.open(url, "twitter connect");
|
||||
console.log(newwin.closed);
|
||||
var timer = setInterval(function() {
|
||||
if (newwin.closed) {
|
||||
clearInterval(timer);
|
||||
@ -890,17 +877,13 @@ export default {
|
||||
async loginDiscord() {
|
||||
const _address = this.$store.state.user.address;
|
||||
const codeChallenge = Date.now();
|
||||
console.log(location.href);
|
||||
const state = btoa(`${_address}|${codeChallenge}`);
|
||||
console.log(state);
|
||||
// const url = 'https://discord.com/api/oauth2/authorize?client_id=1116692240224501850&redirect_uri=http%3A%2F%2Flocalhost%3A3010%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read'
|
||||
const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${state}`;
|
||||
console.log(url);
|
||||
// location.href = url
|
||||
// // Redirect the user to the Discord OAuth2 authorization page
|
||||
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
|
||||
let newwin = window.open(url, "discord login", params);
|
||||
console.log(newwin.closed);
|
||||
var timer = setInterval(function() {
|
||||
if (newwin.closed) {
|
||||
clearInterval(timer);
|
||||
@ -1134,7 +1117,6 @@ export default {
|
||||
// let res = await apiUsercheckin();
|
||||
let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/checkin',{ },
|
||||
{ headers: { Authorization: `Bearer ${this.token}` } })
|
||||
// console.log(res.data.data,'检查签到并领取奖励')
|
||||
return res.data.data
|
||||
},
|
||||
// 发送宝箱助力上链请求并领取奖励
|
||||
@ -1212,9 +1194,7 @@ export default {
|
||||
// params: { code: newInvite, rtoken: rtoken },
|
||||
// headers: { Authorization: `Bearer ${this.token}` }
|
||||
// });
|
||||
console.log("[code]", newInvite)
|
||||
let res = await apiUploadInviteCode(newInvite)
|
||||
// console.log('领取助力奖励 || 判断是否是新用户---',res)
|
||||
return
|
||||
if (res.data.errcode == 0) {
|
||||
this.isNewUser = 0
|
||||
@ -1236,17 +1216,7 @@ export default {
|
||||
|
||||
// 获取用户状态
|
||||
async getUserState() {
|
||||
console.log('update user state')
|
||||
await this.$store.dispatch('user/fetchUserState')
|
||||
// await this.$axios.get(process.env.VUE_APP_API_URL+'/api/user/state',{ params: '',
|
||||
// headers: { Authorization: `Bearer ${this.token}` },
|
||||
// }).then(res => {
|
||||
// this.$set(this.userData)
|
||||
// this.myScoreTotal = res.data.data.scoreTotal
|
||||
// console.log('this.myScoreTotal',this.myScoreTotal)
|
||||
// localStorage.setItem('userData', JSON.stringify(res.data.data))
|
||||
// // this.userData = this.userData.scoreTotal
|
||||
// })
|
||||
},
|
||||
|
||||
// nav 导航
|
||||
|
||||
@ -1,535 +0,0 @@
|
||||
<template>
|
||||
<div class="ranking">
|
||||
<div class="ranking-header">
|
||||
活动名
|
||||
</div>
|
||||
<div class="ranking-content">
|
||||
<div class="ranking-content-left">
|
||||
<div class="ranking-content-left-points">
|
||||
<div class="top">
|
||||
<div>My Points</div>
|
||||
<div class="details" @click="detailsDialog = true">
|
||||
<span><i class="el-icon-tickets"></i></span>
|
||||
</div>
|
||||
<div class="details-content" v-show="detailsDialog">
|
||||
<div class="details-header">
|
||||
Points Details
|
||||
<span>
|
||||
<i @click="detailsDialog = false" class="el-icon-circle-close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="details-list">
|
||||
<el-table :data="detailsList">
|
||||
<template slot="empty">
|
||||
<div>No Data</div>
|
||||
</template>
|
||||
<el-table-column prop="action" label="Action" :width="80">Task</el-table-column>
|
||||
<el-table-column label="Time" :width="190">
|
||||
<template
|
||||
slot-scope="scope"
|
||||
>{{ scope.row.time*1000 | formatDate }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="address" label="Time" :width="190">
|
||||
<template
|
||||
slot-scope="scope"
|
||||
>{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.address.slice(-4) }}</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="Points">
|
||||
<template
|
||||
slot-scope="scope"
|
||||
>{{ scope.row.count }} Pts</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<li>
|
||||
<p>Points tier</p>
|
||||
<div class="list-btm">徽章</div>
|
||||
<div class="points-tier">
|
||||
<div class="points-tier-list" v-for="(item, index) in pointsTierList" :key="index">
|
||||
<div class="imgSrc">{{ item.imgSrc }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="integral">{{ item.integral }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p>Points</p>
|
||||
<div class="list-btm"><span>{{ userData.scoreTotal }}</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<p>Ranking</p>
|
||||
<div class="list-btm">排名</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ranking-content-left-social">
|
||||
<div class="rule" @click="ruleDialog = true"><i class="el-icon-info"></i></div>
|
||||
<div class="social-header">Social Points</div>
|
||||
<h1>43</h1>
|
||||
<p>Tag $CounterFire or @playCounterFire in</p>
|
||||
<p>your tweets, or engage in others to</p>
|
||||
<p>earn social points automatically</p>
|
||||
<p>every week!</p>
|
||||
<div class="rule-dialog" v-if="ruleDialog">
|
||||
<div class="rule-header">规则说明 <span @click="ruleDialog = false"><i class="el-icon-error"></i></span></div>
|
||||
<div class="rule-content">
|
||||
<p>ssssssssssss</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ranking-content-left-forward">
|
||||
<div class="forward-list">
|
||||
<li>
|
||||
<div class="forward-list-item-top">
|
||||
<div class="user-img">头像</div>
|
||||
<div>userName</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm">84132</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="forward-list-item-top">
|
||||
<div class="user-img">头像</div>
|
||||
<!-- <div>{{ rankingTableData[0].nickname.slice(0,4) }}{{ '…'+rankingTableData[0].nickname.slice(-4) }}</div> -->
|
||||
<div>{{ rankingTableData[0].nickname }}</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm">{{ rankingTableData[0].score }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="forward-list-item-top">
|
||||
<div class="user-img">头像</div>
|
||||
<div>userName</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm">74111</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ranking-content-right">
|
||||
<div class="ranking-content-right-list">
|
||||
<el-table
|
||||
:data="rankingTableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="rank"
|
||||
label="Ranking">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nickname"
|
||||
label="user name">
|
||||
<template
|
||||
slot-scope="scope"
|
||||
>
|
||||
<!-- {{ scope.row.nickname.slice(0,4) }}{{ '…'+scope.row.nickname.slice(-4) }}</template> -->
|
||||
{{ scope.row.nickname }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="level"
|
||||
label="Points tier">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="score"
|
||||
label="Points">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="ranking-content-right-pagination">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from './../../components/pagination.vue';
|
||||
import { getToken } from './../../utils/cookies.js'
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
token: getToken(),
|
||||
pointsTierList: [
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '黄铜',
|
||||
integral: '0-100',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '白银',
|
||||
integral: '101-300',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '黄金',
|
||||
integral: '301-700',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '白金',
|
||||
integral: '701-1000',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '钻石',
|
||||
integral: '1001-1500',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '大师',
|
||||
integral: '1501-2000',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '宗师',
|
||||
integral: '2001-3000',
|
||||
},
|
||||
{
|
||||
imgSrc: '图片',
|
||||
name: '王者',
|
||||
integral: '3001+',
|
||||
}
|
||||
],
|
||||
detailsDialog: false,
|
||||
detailsList: [
|
||||
{
|
||||
action: 'Task',
|
||||
time: '2024-03-08 12:59:37',
|
||||
pts: '90'
|
||||
}
|
||||
],
|
||||
ruleDialog: false,
|
||||
rankingTableData: [
|
||||
{
|
||||
ranking: '1',
|
||||
username: 'Username',
|
||||
tier: 1,
|
||||
pts: '955517'
|
||||
},
|
||||
{
|
||||
ranking: '2',
|
||||
username: 'Username',
|
||||
tier: 1,
|
||||
pts: '921115'
|
||||
},
|
||||
{
|
||||
ranking: '3',
|
||||
username: 'Username',
|
||||
tier: 1,
|
||||
pts: '841111'
|
||||
},
|
||||
{
|
||||
ranking: '4',
|
||||
username: 'Username',
|
||||
tier: 1,
|
||||
pts: '841111'
|
||||
}
|
||||
],
|
||||
userData: [
|
||||
{
|
||||
scoreTotal: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getLeaderBoard()
|
||||
// if(this.token) {
|
||||
// this.getUserState()
|
||||
this.userData = JSON.parse(localStorage.getItem("userData"));
|
||||
this.getMyIntegralList()
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 我的积分记录
|
||||
async getMyIntegralList() {
|
||||
let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/user/checkin/list/all`,{ params: '',
|
||||
headers: { Authorization: `Bearer ${this.token}` },
|
||||
})
|
||||
this.detailsList = res.data.data
|
||||
},
|
||||
|
||||
// 获取总积分榜
|
||||
async getLeaderBoard () {
|
||||
let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/activity/leaderboard/uaw_activity/0`)
|
||||
console.log(res.data.data)
|
||||
this.rankingTableData = res.data.data
|
||||
},
|
||||
// 获取用户状态
|
||||
getUserState() {
|
||||
this.$axios.get(process.env.VUE_APP_API_URL+'/api/user/state',{ params: '',
|
||||
headers: { Authorization: `Bearer ${this.token}` },
|
||||
}).then(res => {
|
||||
this.userData = res.data.data
|
||||
console.log(this.userData)
|
||||
localStorage.setItem('userData', JSON.stringify(res.data.data))
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ranking {
|
||||
padding: 20px;
|
||||
.ranking-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.ranking-content {
|
||||
display: flex;
|
||||
.ranking-content-left {
|
||||
width: 60%;
|
||||
.ranking-content-left-points {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
div {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
span {
|
||||
font-size: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.details-content {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
padding: 10px;
|
||||
z-index: 9;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
.details-header {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
.details-list {
|
||||
::v-deep .el-table {
|
||||
thead {
|
||||
color: #000;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-table__empty-block {
|
||||
.el-table__empty-text {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__cell {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
&::before {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
position: relative;
|
||||
p {
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.list-btm {
|
||||
height: 60px;
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #6fb5d4;
|
||||
}
|
||||
}
|
||||
.points-tier {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
width: 200px;
|
||||
border: 2px solid #f0f0f0;
|
||||
padding: 0 10px;
|
||||
z-index: 9999;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
.points-tier-list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.imgSrc {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.integral {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li:nth-child(1) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
.points-tier {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-content-left-social {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
.rule {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.social-header {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: #00bfbf;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rule-dialog {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
.rule-header {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.rule-content {
|
||||
padding: 20px;
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-content-left-forward {
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
background: rgba(0,0,0,.5);
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
.forward-list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
margin-top: 50px;
|
||||
background: #fff;
|
||||
box-sizing: content-box;
|
||||
.forward-list-item-top {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 12px;
|
||||
.user-img {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
.forward-list-item-btm {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #f59a23;
|
||||
}
|
||||
}
|
||||
li:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-content-right {
|
||||
width: 40%;
|
||||
border: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
.ranking-content-right-list {
|
||||
::v-deep .el-table {
|
||||
thead {
|
||||
color: #000;
|
||||
background: #d7d7d7;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-table__empty-block {
|
||||
.el-table__empty-text {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
th.el-table__cell {
|
||||
background: #d7d7d7;
|
||||
}
|
||||
.el-table__cell {
|
||||
color: #000;
|
||||
border: 0px;
|
||||
}
|
||||
&::before {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-content-right-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user