|
|
@@ -1,16 +1,17 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="bg-img flex justify-center align-center" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/97d63ec49f544a33a6a8cc3c0b64b17a-songRankBgImg.png');height: 402upx;">
|
|
|
+ <view class="bg-img flex justify-center align-center"
|
|
|
+ style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/97d63ec49f544a33a6a8cc3c0b64b17a-songRankBgImg.png');height: 402upx;">
|
|
|
<view class="title">歌曲排行榜</view>
|
|
|
</view>
|
|
|
<view class="flex justify-center align-center padding-bottom">
|
|
|
<view class="search">
|
|
|
- <text class="cuIcon-search padding-right-xs"></text>
|
|
|
- {{searValue}}
|
|
|
+ <u-input confirm-type="search" v-model="keyword" style="margin: 0 20rpx;" placeholder="请输入搜索内容" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-sticky h5-nav-height="0">
|
|
|
- <u-tabs :list="list" active-color="#5c40e8" :bold="false" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
+ <u-tabs :list="list" active-color="#5c40e8" :bold="false" :is-scroll="false" :current="current"
|
|
|
+ @change="change"></u-tabs>
|
|
|
</u-sticky>
|
|
|
<view class="flex align-center padding-left" style="margin-top: 40upx;">
|
|
|
<image src="/static/songRank/medal.png" style="width: 32upx;height: 40upx"></image>
|
|
|
@@ -18,18 +19,23 @@
|
|
|
</view>
|
|
|
<block v-for="(item, index) in rankList" :key="index">
|
|
|
<block v-if="index == 0 || index == 1 || index == 2">
|
|
|
- <view class="margin-sm flex align-center" :class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : '' " @click="musicBoost(item.id)">
|
|
|
- <u-image width="200" height="200" border-radius="16" :src="item.cover" v-if="item.urlsType==1"></u-image>
|
|
|
- <u-image width="200" height="200" border-radius="16" :src="item.urls" v-else></u-image>
|
|
|
- <view class="flex justify-between container" :style="{width: (index == 0 ? '70%': index == 1 ? '69%' : index == 2 ? '68%' : '60%')}">
|
|
|
- <view class="left" style="width: 65%;">
|
|
|
- <view class="name text-cut">{{item.title}}</view>
|
|
|
- <view class="padding-tb-sm text-sm">{{item.personName}}</view>
|
|
|
- <view class="hot-value">热力值 {{ +item.hotValue}}</view>
|
|
|
+ <view class="margin-sm flex align-center"
|
|
|
+ :class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : '' "
|
|
|
+ @click="musicBoost(item.production.id)">
|
|
|
+ <u-image width="200" height="200" border-radius="16" :src="item.production.cover"
|
|
|
+ v-if="item.production.urlsType==1"></u-image>
|
|
|
+ <u-image width="200" height="200" border-radius="16" :src="item.production.urls" v-else></u-image>
|
|
|
+ <view class="flex justify-between container"
|
|
|
+ :style="{width: (index == 0 ? '70%': index == 1 ? '69%' : index == 2 ? '68%' : '60%')}">
|
|
|
+ <view class="left" style="width: 65%;">
|
|
|
+ <view class="name text-cut">{{item.production.title}}</view>
|
|
|
+ <view class="padding-tb-sm text-sm">{{item.production.personName}}</view>
|
|
|
+ <view class="hot-value">热力值 {{ +item.production.hotValue}}</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
- <view class="rank" :style="{coloar: (index == 0 ? '#ECDA47': index == 1 ? '#C1D4DA' : index == 2 ? '#C1D4DA' : '')}">
|
|
|
- NO.{{index + 1}}
|
|
|
+ <view class="rank"
|
|
|
+ :style="{coloar: (index == 0 ? '#ECDA47': index == 1 ? '#C1D4DA' : index == 2 ? '#C1D4DA' : '')}">
|
|
|
+ NO.{{item.rank}}
|
|
|
</view>
|
|
|
<view>
|
|
|
<button class="cu-btn round theme-bg-color sm text-white">
|
|
|
@@ -42,26 +48,34 @@
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
- <view class="flex" style="padding: 10upx 30upx 30upx 40upx;" @click="musicBoost(item.id)">
|
|
|
- <view class="flex justify-center align-center text-bold text-lg padding-right">{{index + 1}}</view>
|
|
|
- <image v-if="item.urlsType==1" :src="item.cover" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
|
|
|
- <image v-else :src="item.urls" style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
|
|
|
+ <view class="flex" style="padding: 10upx 30upx 30upx 40upx;" @click="musicBoost(item.production.id)">
|
|
|
+ <view class="flex justify-center align-center text-bold text-lg padding-right">{{item.rank}}</view>
|
|
|
+ <image v-if="item.production.urlsType==1" :src="item.production.cover"
|
|
|
+ style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
|
|
|
+ <image v-else :src="item.production.urls" style="width: 120upx;height: 120upx;margin-right: 20upx;">
|
|
|
+ </image>
|
|
|
<view style="width: 70%;">
|
|
|
<view class="flex justify-between">
|
|
|
<view class="music" style="width: 75%;">
|
|
|
- <view class="name text-cut">{{item.title}}</view>
|
|
|
- <view class="author">{{item.personName}}</view>
|
|
|
- <view class="hot-vaule">热力值 {{ +item.hotValue}}</view>
|
|
|
+ <view class="name text-cut">{{item.production.title}}</view>
|
|
|
+ <view class="author">{{item.production.personName}}</view>
|
|
|
+ <view class="hot-vaule">热力值 {{ +item.production.hotValue}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-end">
|
|
|
<button class="cu-btn round lines-purple sm" style="width: 110upx;">打榜</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="margin-top-xs"><u-line color="#cacaca"></u-line> </view>
|
|
|
+ <view class="margin-top-xs">
|
|
|
+ <u-line color="#cacaca"></u-line>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</block>
|
|
|
+ <u-loadmore :status="status" v-if="rankList.length>4"/>
|
|
|
+ <view class="padding-top">
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -69,50 +83,89 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- activityId:'',
|
|
|
+ activityId: '',
|
|
|
current: 0,
|
|
|
list: [{
|
|
|
name: '全部'
|
|
|
}],
|
|
|
- searValue: '不存在的关系 - XMASwu',
|
|
|
- rankList:[],
|
|
|
+ rankList: [],
|
|
|
+ //搜索关键字
|
|
|
+ keyword: '',
|
|
|
+ name: '', //榜单搜索
|
|
|
+ //分页
|
|
|
+ status: 'loadmore',
|
|
|
+ pageCurrent: 1,
|
|
|
+ pageSize: 10,
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ keyword() {
|
|
|
+ let that = this
|
|
|
+ //节流函数
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer) //阻止setTimeout函数的执行
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ that.pageCurrent = 1
|
|
|
+ that.rankList = []
|
|
|
+ that.getRankList()
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ },
|
|
|
onLoad(options) {
|
|
|
this.activityId = options.activityId;
|
|
|
this.getActivityDetail()
|
|
|
this.getRankList()
|
|
|
},
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.rankList.length < this.pageCurrent * 10) {
|
|
|
+ this.status = 'nomore';
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.status = 'loading';
|
|
|
+ this.pageCurrent = ++this.pageCurrent;
|
|
|
+ this.getRankList()
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
change(index) {
|
|
|
this.current = index;
|
|
|
- let name=this.list[index].name.replace("榜",'')
|
|
|
- if (name=='全部') {
|
|
|
- name=""
|
|
|
+ let name = this.list[index].name.replace("榜", '')
|
|
|
+ if (name == '全部') {
|
|
|
+ name = ""
|
|
|
}
|
|
|
- this.getRankList(name)
|
|
|
+ this.rankList=[]
|
|
|
+ this.name = name
|
|
|
+ this.getRankList()
|
|
|
},
|
|
|
- getActivityDetail(){
|
|
|
- this.$u.api.activity.detail({id:this.activityId}).then(res=>{
|
|
|
- let arr=res.classification.split(",")
|
|
|
- arr.forEach(item=>{
|
|
|
- let obj={
|
|
|
- name:item+'榜'
|
|
|
+ getActivityDetail() {
|
|
|
+ this.$u.api.activity.detail({
|
|
|
+ id: this.activityId
|
|
|
+ }).then(res => {
|
|
|
+ let arr = res.classification.split(",")
|
|
|
+ arr.forEach(item => {
|
|
|
+ let obj = {
|
|
|
+ name: item + '榜'
|
|
|
}
|
|
|
this.list.push(obj)
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- getRankList(name){
|
|
|
- let params={
|
|
|
- activityId:this.activityId
|
|
|
+ getRankList(name) {
|
|
|
+ let params = {
|
|
|
+ type: 1,
|
|
|
+ activityId: this.activityId,
|
|
|
+ current: this.pageCurrent,
|
|
|
+ size: this.pageSize
|
|
|
+ }
|
|
|
+ if (!this.$u.test.empty(this.name)) {
|
|
|
+ params.productionType = this.name
|
|
|
}
|
|
|
- if (!this.$u.test.empty(name)) {
|
|
|
- params.personType=name
|
|
|
+ if (!this.$u.test.empty(this.keyword)) {
|
|
|
+ params.productionSearch = this.keyword
|
|
|
}
|
|
|
- this.$u.api.production.list(params).then(res=>{
|
|
|
- this.rankList=res.records
|
|
|
- console.log(res.records);
|
|
|
+ this.$u.api.production.getRankList(params).then(res => {
|
|
|
+ this.rankList = [...this.rankList,...res.records]
|
|
|
})
|
|
|
},
|
|
|
musicBoost(id) {
|
|
|
@@ -138,38 +191,45 @@
|
|
|
font-size: 20upx;
|
|
|
box-shadow: 10upx 20upx 60upx #d8d8d8;
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
font-size: 56upx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 800;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.first {
|
|
|
background-color: #fbf8e5;
|
|
|
border-radius: 20upx;
|
|
|
box-shadow: -1upx -1upx 60upx #d8d8d8;
|
|
|
}
|
|
|
+
|
|
|
.second {
|
|
|
background-color: #f0f5f9;
|
|
|
border-radius: 20upx;
|
|
|
box-shadow: -1upx -1upx 60upx #d8d8d8;
|
|
|
margin: 0 30upx;
|
|
|
}
|
|
|
+
|
|
|
.third {
|
|
|
background-color: #fef0ef;
|
|
|
border-radius: 20upx;
|
|
|
box-shadow: -1upx -1upx 60upx #d8d8d8;
|
|
|
margin: 20upx 40upx;
|
|
|
}
|
|
|
+
|
|
|
.container {
|
|
|
.left {
|
|
|
padding-left: 20upx;
|
|
|
+
|
|
|
.name {
|
|
|
font-size: 30upx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 800;
|
|
|
color: #000000;
|
|
|
}
|
|
|
+
|
|
|
.hot-value {
|
|
|
font-size: 24upx;
|
|
|
font-family: PingFang SC;
|
|
|
@@ -177,9 +237,11 @@
|
|
|
color: #3F372A;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.right {
|
|
|
text-align: center;
|
|
|
padding-right: 10upx;
|
|
|
+
|
|
|
.rank {
|
|
|
height: 70%;
|
|
|
font-size: 36upx;
|
|
|
@@ -189,6 +251,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.music {
|
|
|
.name {
|
|
|
font-size: 30upx;
|
|
|
@@ -196,12 +259,14 @@
|
|
|
font-weight: 400;
|
|
|
color: #000000;
|
|
|
}
|
|
|
+
|
|
|
.author {
|
|
|
font-size: 14upx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #9A9A9A;
|
|
|
}
|
|
|
+
|
|
|
.hot-vaule {
|
|
|
margin-top: 10upx;
|
|
|
font-size: 14upx;
|
|
|
@@ -210,9 +275,11 @@
|
|
|
color: #3F372A;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.lines-purple::after {
|
|
|
border-color: #5a3ee8;
|
|
|
}
|
|
|
+
|
|
|
.lines-purple {
|
|
|
color: #5a3ee8;
|
|
|
}
|
