+
+
+
-
-
+
+
![]()
@@ -42,7 +52,7 @@
{{ list[2].integral }}
-
+
{{ index+1 }}
![]()
@@ -52,6 +62,7 @@
+
@@ -66,13 +77,16 @@ export default {
},
data() {
return {
- tabList: ['总榜','月榜','周榜'],
+ // tabList: ['总榜','月榜','周榜'],
+ tabList: ['个人排行', '家庭排行'],
tabIndex: 0,
current: 1,
userInfo: {},
inx: 0,
pageShow: false,
- list: []
+ list: [],
+ typeList: ['总榜', '月榜', '周榜'],
+ typeCurrent: 0
}
},
onLoad() {
@@ -84,12 +98,13 @@ export default {
methods: {
tabClick(index) {
this.tabIndex = index
+ this.typeCurrent = 0
this.getList()
},
getList() {// 积分排行
this.list = {}
- var url = `/app/appintegraluser/integralSortFD?type=${this.tabIndex}&size=50&areaId=${this.user.areaId}` //积分排行
- this.$instance.post(url).then(res => {
+ var url = this.tabIndex == 1 ? `/app/appintegraluser/integralSortFDHouse` : `/app/appintegraluser/integralSortFD` //tabIndex: 1家庭 0个人
+ this.$instance.post(url+`?type=${this.typeCurrent}&size=50&areaId=${this.user.areaId}`).then(res => {
if (res.code === 0) {
this.list = res.data.map(e=> ({...e, index: e.index}))
this.userInfo = res.data.filter(e => e.open_id === this.user.openId)
@@ -104,6 +119,10 @@ export default {
}
return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
},
+ typeChange(index) {
+ this.typeCurrent = index
+ this.getList()
+ }
},
onReachBottom() {
// if (this.list.length < 50) {
@@ -123,6 +142,9 @@ export default {
::v-deep .header-tab {
background: #FFF;
+ height: 116px;
+ padding: 34px 0 42px 0;
+ border-bottom: 1px solid #eee;
.tab-item {
color: #222222;
font-size: 30px;
@@ -134,6 +156,7 @@ export default {
}
.active-line {
background: #2D7DFF;
+ top: 82px;
}
}
@@ -144,8 +167,41 @@ export default {
.rank {
width: 100vw;
overflow-x: hidden;
- height: calc(100% - 136px);
- margin-top: 96px;
+ height: calc(100% - 156px);
+ margin-top: 116px;
+
+ .content-subsection {
+ width: 100%;
+ height: 116px;
+ padding: 22px 28px;
+ box-sizing: border-box;
+ background: #FFFF;
+
+ .type-subsection {
+ width: 100%;
+ height: 100%;
+ padding: 4px;
+ box-sizing: border-box;
+ border-radius: 36px;
+ background-color: #f6f7f9;
+ display: flex;
+ .item {
+ flex: 1;
+ line-height: 64px;
+ text-align: center;
+ font-family: PingFangSC-Regular;
+ font-weight: 400;
+ font-size: 28px;
+ color: #666;
+ }
+ .item-active {
+ background: #FFF;
+ border-radius: 32px;
+ color: #4181FF;
+ }
+ }
+ }
+
.header-content {
.item {
@@ -155,7 +211,8 @@ export default {
background: #FFF;
padding: 0 64px;
box-sizing: border-box;
- border: 4px solid #2d7dffff;
+ // border: 4px solid #2d7dffff;
+ display: flex;
.item-num {
display: inline-block;
@@ -167,10 +224,15 @@ export default {
vertical-align: top;
}
-
- .user-img {
- margin-right: 24px;
- vertical-align: middle;
+ .user-img-content {
+ display: inline-block;
+ width: 92px;
+ height: 92px;
+ padding: 4px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ border: 1px solid #2D7DFF;
+ margin: 14px 24px 0 0;
}
.item-name {
@@ -182,7 +244,7 @@ export default {
.item-point {
display: inline-block;
- width: calc(100% - 420px);
+ width: calc(100% - 430px);
text-align: right;
font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;