dengtongyu/luckyrun
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新

Browse Source
This commit is contained in:
dengtongyu committed 2021-09-05 16:11:27 +08:00
1 parent 75a45dab67
commit 241c63aaa0
60 files changed
+684 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/luckyGridView/main.vue
+1 -1
View File
@@ -310,7 +310,7 @@ export default {
}
.lucky-grid-prize {
display: flex;
align-items: center;
// align-items: center;
justify-content: center;
padding: 30px;
&-item {
src/components/prizesList/main.vue
+6 -1
View File
@@ -2,7 +2,12 @@
<div class="prizes-list">
<div class="prizes-list-item" v-for="item in curList" :key="item.prizeId">
<div class="prizes-list-item-image">
<van-image width="100%" height="100%" :src="item.prizeImgUrl" />
<van-image
width="100%"
height="100%"
:src="item.prizeImgUrl"
fit="cover"
/>
</div>
<div class="prizes-list-item-name">
<span>{{ item.prizeName }}</span>
src/components/rankList/index.js
+7
View File
@@ -0,0 +1,7 @@
import RankList from "./main";
RankList.install = function(Vue) {
Vue.component(RankList.name, RankList);
};
export default RankList;
src/components/rankList/main.vue
+52
View File
@@ -0,0 +1,52 @@
<template>
<div class="rank-list">
<template v-if="list.length > 0">
<rank-list-item
class="rank-list-block"
v-for="(item, index) in list"
:key="`rank-list-item-${item.id}-${index}`"
:rank="index + 1"
:avatar="item.imageUrl"
:name="item.username"
:id="item.id"
:value="item.diffValue"
></rank-list-item>
</template>
<template v-else>
<van-empty image="error" description="暂无数据" />
</template>
</div>
</template>
<script>
import rankListItem from "./rankListItem.vue";
export default {
name: "RankList",
props: {
list: {
type: Array,
default: () => []
}
},
components: {
rankListItem
},
computed: {},
data() {
return {};
},
created() {},
methods: {}
};
</script>
<style lang="less" scoped>
.rank-list {
&-block {
margin-top: 40px;
}
&:first-child {
margin-top: 0;
}
}
</style>
src/components/rankList/rankListItem.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<div class="rank-list-item">
<div class="rank-list-item-index">
<div class="rank-list-item-index-image" v-if="indexImage">
<van-image width="100%" height="100%" fit="cover" :src="indexImage" />
</div>
<template v-else>
<span v-if="rank">{{ rank }}</span>
<label v-else>未上榜</label>
</template>
</div>
<div class="rank-list-item-info">
<div class="rank-list-item-info-image">
<van-image width="100%" height="100%" :src="avatar" fit="cover" round />
</div>
<div class="rank-list-item-info-text">
<div class="rank-list-item-info-text-name">{{ name }}</div>
<div class="rank-list-item-info-text-id">{{ id }}</div>
</div>
</div>
<div class="rank-list-item-value">
<div class="rank-list-item-value-number">
{{ rank === 1 ? "No.1" : value }}
</div>
<div class="rank-list-item-value-text" v-if="rank > 1">距上名</div>
</div>
</div>
</template>
<script>
export default {
name: "RankListItem",
props: {
rank: {
type: Number,
default: 1
},
avatar: {
type: String,
default: ""
},
name: {
type: String,
default: ""
},
id: {
type: [String, Number],
default: ""
},
value: {
type: [String, Number],
default: ""
}
},
data() {
return {
rankIcon: [
require("@/assets/images/icon_no1.png"),
require("@/assets/images/icon_no2.png"),
require("@/assets/images/icon_no3.png")
]
};
},
computed: {
index() {
return this.rank - 1;
},
indexImage() {
if (this.index < 0) return null;
if (this.index <= 2) return this.rankIcon[this.index];
else return null;
},
rankDisplay() {
if (this.rank === 0) return "未上榜";
else return this.rank;
}
}
};
</script>
<style lang="less" scoped>
.rank-list-item {
display: flex;
align-items: center;
&-index {
width: 100px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
&-image {
width: 64px;
height: 64px;
}
& > span {
font-size: 40px;
font-weight: 800;
color: #dbcfff;
}
& > label {
font-size: 24px;
font-weight: bold;
color: #dbcfff;
}
}
&-info {
flex: 1;
display: flex;
align-items: center;
// margin-left: 20px;
&-image {
width: 100px;
height: 100px;
}
&-text {
flex: 1;
margin-left: 20px;
&-name {
font-size: 30px;
font-weight: bold;
color: #dbcfff;
line-height: 40px;
}
&-id {
font-size: 26px;
font-weight: 500;
color: #dbcfff;
line-height: 40px;
opacity: 0.6;
}
}
}
&-value {
width: 150px;
text-align: right;
&-number {
font-size: 32px;
font-weight: bold;
color: #ffe26c;
line-height: 54px;
opacity: 0.8;
}
&-text {
font-size: 24px;
font-weight: 500;
color: #dbcfff;
line-height: 54px;
opacity: 0.6;
}
}
}
</style>
src/components/rankPane/index.js
+7
View File
@@ -0,0 +1,7 @@
import RankPane from "./main";
RankPane.install = function(Vue) {
Vue.component(RankPane.name, RankPane);
};
export default RankPane;
src/components/rankPane/main.vue
+339
View File
@@ -0,0 +1,339 @@
<template>
<div class="rank-pane">
<div class="rank-pane-tips">
<p>
<span>{{ tipsText }}</span>
</p>
</div>
<div class="rank-pane-top" :class="paneTypeClass">
<div class="rank-pane-top-image">
<div class="rank-pane-top-image-avatar">
<van-image
width="100%"
height="100%"
:src="yesterdayTop.imageUrl"
fit="cover"
round
/>
</div>
</div>
<div class="rank-pane-top-info">
<div class="rank-pane-top-info-name">{{ yesterdayTop.username }}</div>
<div class="rank-pane-top-info-id">{{ yesterdayTop.id }}</div>
</div>
</div>
<div class="rank-pane-list">
<div class="rank-pane-list-rank">
<rank-list :list="list"></rank-list>
</div>
<div class="rank-pane-list-user">
<rank-list-item
v-if="myRank"
class="rank-pane-list-user-item"
:rank="myRank.rank"
:avatar="myRank.imageUrl"
:name="myRank.username"
:id="myRank.id"
:value="myRank.diffValue"
></rank-list-item>
</div>
</div>
</div>
</template>
<script>
import rankList from "@/components/rankList";
import rankListItem from "@/components/rankList/rankListItem.vue";
import { ticketList, giftList } from "@/api/rank";
export default {
name: "RankPane",
components: {
rankList,
rankListItem
},
props: {
paneType: {
type: String,
default: "ticket"
}
},
data() {
return {
list: [],
myRank: null,
yesterdayRank: []
};
},
computed: {
uid() {
return this.$route.query.uid;
},
tipsText() {
if (this.paneType === "ticket")
return "抽奖次数越多，排名越高哦~ 每日零点重置";
else return "获得奖励价值越高，排名越高哦~ 每日零点重置";
},
paneTypeClass() {
return `rank-pane-${this.paneType}`;
},
yesterdayTop() {
if (this.yesterdayRank.length === 0)
return {
username: "暂无",
id: "暂无"
};
return this.yesterdayRank[0];
}
},
created() {
if (this.paneType === "ticket") this.getTicketList();
else this.getGiftList();
},
methods: {
getTicketList() {
ticketList({ uid: this.uid })
.then(res => {
this.todoData(res);
})
.catch(() => {
this.$toast.fail("获取排行榜失败！");
});
},
getGiftList() {
giftList({ uid: this.uid })
.then(res => {
this.todoData(res);
})
.catch(() => {
this.$toast.fail("获取排行榜失败！");
});
},
todoData(res) {
const { code, data, msg } = res;
if (code === 200) {
const { myRank, rankVoList, yesterdayRank } = data;
this.list = rankVoList || [];
// this.list = [
// {
// diffValue: null,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 210,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 30,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 411,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 301,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 123,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 321,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 741,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 963,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// },
// {
// diffValue: 987,
// id: 3333,
// imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
// levelVo: null,
// rank: 1,
// sex: null,
// showValue: null,
// uid: 9002,
// username: "11",
// value: 100
// }
// ];
this.yesterdayRank = yesterdayRank || [];
this.myRank = myRank;
} else {
this.$toast.fail(msg);
}
}
}
};
</script>
<style lang="less" scoped>
.rank-pane {
height: 100%;
&-tips {
display: flex;
justify-content: center;
margin-top: 20px;
& > p {
background-color: rgba(255, 255, 255, 0.1);
padding: 0 50px;
border-radius: 60px;
& > span {
border-radius: 26px;
font-size: 24px;
font-weight: 500;
color: #dbcfff;
line-height: 54px;
}
}
}
&-top {
width: 680px;
height: 160px;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
margin: 30px auto 40px;
&-image {
width: 136px;
height: 136px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../../assets/images/hg.png);
&-avatar {
width: 112px;
height: 112px;
margin-left: 13px;
margin-top: 13px;
}
}
&-info {
margin-left: 10px;
&-name {
font-size: 30px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
}
&-id {
font-size: 24px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
opacity: 0.6;
}
}
}
&-ticket {
background-image: url(../../assets/images/pcw_zr_bg.png);
}
&-gift {
background-image: url(../../assets/images/pcw_zr_bg2.png);
}
&-list {
height: calc(100% - 20px - 54px - 160px - 30px - 40px);
display: flex;
flex-direction: column;
&-rank {
flex: 1;
width: 100%;
padding: 0 35px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
}
&-user {
width: 100%;
height: 138px;
padding: 0 35px;
box-sizing: border-box;
background-color: #34285b;
display: flex;
align-items: center;
&-item {
width: 100%;
}
}
}
}
</style>
src/components/recordList/recordItem.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="record-item">
<div class="record-item-left">
<div class="record-item-left-image">
<van-image width="100%" height="100%" :src="img" />
<van-image width="100%" height="100%" :src="img" fit="cover" />
</div>
<div class="record-item-left-text">
<span>{{ name }}</span>