uni_mattress/sleep/pages/index/index.vue

<template>
	<view class="recommend-container page-background">
		<view class="bg-black">
			<cu-custom bgColor="#000000"><view slot="content" style="color: #ffffff">UU睡眠</view></cu-custom>
		</view>
		<scroll-view :style="{ height: height }" class="main-container" scroll-y>
			
			<view class="bg-black">
				<view class="banner-wrapper">
					<swiper class="screen-swiper square-dot" style="min-height: 317upx;" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
						<swiper-item v-for="item in swiperList" :key="item.bannerId">
							<image :src="item.pic || item.imageUrl" mode="scaleToFill" class="banner-img"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			<view class="music-wrapper" v-if="recommendList.length > 0">
				<box-title title="UU推荐" buttonName="更多" iconName="right" @handlePlay="handleNative('../songList/index')"></box-title>
				<song-list :currentList="recommendList"></song-list>
			</view>
			
			
			<view class="music-wrapper" v-if="dayRecommendList.length > 0">
				<box-title title="睡眠音乐" buttonName="更多" iconName="kaishi2" @handlePlay="handlePlay('dayRecommendList')"></box-title>
				<music-list :currentList="dayRecommendList"></music-list>
			</view>
			
			<view class="music-wrapper" v-if="dayRecommendList.length > 0">
				<box-title title="睡眠小知识" buttonName="更多" iconName="kaishi2" @handlePlay="handlePlay('dayRecommendList')"></box-title>
				
				<view class="flex-col justify-start knowledge-list">
				  <view class="flex-row items-center space-x-14 knowledge-item">
				    <view class="flex-col flex-auto space-y-8">
				      <text class="self-start font_4 knowledge-item-title">睡眠科普：你真的了解睡眠吗？</text>
				      <text class="knowledge-item-desc">
				        套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应该是迥然不同的，所以每一个设计方案也…
				      </text>
				    </view>
				    <image
				      class="shrink-0 image_12"
				      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874496879438729687.png"
				    />
				  </view>
				  
				  <view class="flex-row items-center space-x-14 knowledge-item">
				    <view class="flex-col flex-auto space-y-8">
				      <text class="self-start font_4 knowledge-item-title">睡眠科普：你真的了解睡眠吗？</text>
				      <text class="knowledge-item-desc">
				        套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应该是迥然不同的，所以每一个设计方案也…
				      </text>
				    </view>
				    <image
				      class="shrink-0 image_12"
				      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874496879438729687.png"
				    />
				  </view>
				  
				  <view class="flex-row items-center space-x-14 knowledge-item">
				    <view class="flex-col flex-auto space-y-8">
				      <text class="self-start font_4 knowledge-item-title">睡眠科普：你真的了解睡眠吗？</text>
				      <text class="knowledge-item-desc">
				        套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应该是迥然不同的，所以每一个设计方案也…
				      </text>
				    </view>
				    <image
				      class="shrink-0 image_12"
				      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874496879438729687.png"
				    />
				  </view>
				</view>
			</view>
			
		</scroll-view>
		
		<music-control />
		
		<!-- <tab-bar currentPage="index" /> -->
	</view>
</template>

<script>
import songList from './components/songList.vue';
import musicList from './components/musicList.vue';
import { getImage, getName } from '@/utils/index.js';
export default {
	data() {
		return {
			//轮播图
			swiperList: [
				{
					"pic": "http://p1.music.126.net/ZuDmYz9gKTes67weCA6roQ==/109951168702825545.jpg",
					"bannerId": "1687869567089252"
				},
				{
					"pic": "http://p1.music.126.net/vrPXmAQsg-aW5I3EEFcKcw==/109951168702819867.jpg",
					"bannerId": "1687869640017460"
				},
				{
					"pic": "http://p1.music.126.net/xK69a1N5DCqNQXts64y3xA==/109951168703821815.jpg",
					"bannerId": "1687869708598159"
				}
			],
			recommendList: [
				{
				    "id": 331841455,
				    "type": 0,
				    "name": "深度睡眠 |重度失眠者专用歌单",
				    "copywriter": "",
				    "picUrl": "https://p2.music.126.net/g2_Gv0dtAicJ3ChTYu28_g==/1393081239628722.jpg",
				    "canDislike": true,
				    "trackNumberUpdateTime": 1552746520361,
				    "playCount": 72862600,
				    "trackCount": 32,
				    "highQuality": true,
				    "alg": "alg_high_quality"
				},
				{
				    "id": 5338700800,
			        "type": 0,
				    "name": "一个双子座的听歌列表",
				    "copywriter": "",
				    "picUrl": "https://p2.music.126.net/SATl5PH1NpEPHsYaB24t5A==/109951166269856073.jpg",
				    "canDislike": true,
				    "trackNumberUpdateTime": 1685028754372,
				    "playCount": 29329484,
				    "trackCount": 361,
				    "highQuality": false,
				    "alg": "alg_high_quality"        
				},
				{
				    "id": 2042205655,
				    "type": 0,
				    "name": "愿还会有人，做个傻子陪你浪费一生",
				    "copywriter": "",
				    "picUrl": "https://p2.music.126.net/AWcDI5wc9fkS2bZt6wIm-Q==/109951163212638897.jpg",
				    "canDislike": true,
				    "trackNumberUpdateTime": 1679320967844,
				    "playCount": 25818546,
				    "trackCount": 41,
				    "highQuality": false,
				    "alg": "alg_high_quality"        
				},
				{
				    "id": 2139324915,
				    "type": 0,
				    "name": "歌词唱透了心声，回忆模糊了眼眸",
				    "copywriter": "",
				    "picUrl": "https://p2.music.126.net/pa1t9G_Mt2xJm_xqUUjvIw==/109951163676905233.jpg",
				    "canDislike": true,
				    "trackNumberUpdateTime": 1687945378874,
				    "playCount": 69736672,
				    "trackCount": 514,
				    "highQuality": false,
				    "alg": "alg_high_quality"    
				}        
			],
			dayRecommendList: [
				{
					"id": 159400773,
					"name": "JJ的咖啡调调, Vol. 2",
					"picUrl": "http://p2.music.126.net/4x-65bnidSKyEMDBmGtn8g==/109951168466764238.jpg"
				},
				{
					"id": 160760191,
					"name": "我们的歌",
					"picUrl": "http://p2.music.126.net/Gm2v1KrDe2TwplzxcmTxYg==/109951168428025131.jpg"
				},
				{
					"id": 78938226,
					"name": "听闻余生",
					"picUrl": "http://p2.music.126.net/DK1_4sP_339o5rowMdPXdw==/109951164071024476.jpg"
				},
				{
					"id": 129849508,
					"name": "时光背面的我",
					"picUrl": "http://p2.music.126.net/VOcPF6uCGAlwESFyyGqHrg==/109951166141514551.jpg"
				},
				{
					"id": 160760191,
					"name": "我们的歌",
					"picUrl": "http://p2.music.126.net/Gm2v1KrDe2TwplzxcmTxYg==/109951168428025131.jpg"
				},
				{
					"id": 78938226,
					"name": "听闻余生",
					"picUrl": "http://p2.music.126.net/DK1_4sP_339o5rowMdPXdw==/109951164071024476.jpg"
				},
				{
					"id": 129849508,
					"name": "时光背面的我",
					"picUrl": "http://p2.music.126.net/VOcPF6uCGAlwESFyyGqHrg==/109951166141514551.jpg"
				}
			],
			dayRecommendMusicList: [],
			newSongList: [],
			hotSingerList: [],
			selectData: [],
		};
	},
	components: {
		songList,
		musicList
	},
	computed: {
		cookie() {
			return this.$store.state.cookie;
		},
		height() {
			let height = this.CustomBar / (uni.upx2px(this.CustomBar) / this.CustomBar) + 220;
			return `calc(100%  - ${height}rpx)`;
		}
	},
	onShow() {
		// this.getDayRecommendData();
		// this.getDayRecommendMusicData();
	},
	created() {
		// this.getData();
	},
	onPullDownRefresh() {
		// this.getData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		getData() {
			this.getBannerData();
			this.getRecommendData();
			this.getNewSongData();
			this.getSelectionData();
			this.getHotSingerData();
		},

		//播放全部 猜你喜欢
		handlePlay(key) {
			const list = this[key].map(item => {
				return {
					src: '',
					title: item.name,
					singer: getName(item),
					coverImgUrl: getImage(item),
					id: item.id
				};
			});
			this.$store.dispatch('playAllMUsic', list);
		},

		handleNative(val) {
			uni.navigateTo({
				url: val
			});
		},

		// 获取轮播图数据
		async getBannerData() {
			const data = await this.$api.getBanner();
			
			this.swiperList = data.banners || [];
		},

		//获取推荐歌单数据
		async getRecommendData() {
			const data = await this.$api.getRecommendList();
			
			this.recommendList = data.result.slice(0, 8);
		},

		//获取猜你喜欢歌曲
		async getDayRecommendData() {
			const { data } = await this.$api.getDayRecommendList();
			console.log('data recommend');
			console.log(data);
			this.dayRecommendList = data.dailySongs;
		},

		//获取推荐歌单
		async getDayRecommendMusicData() {
			const data = await this.$api.getDayRecommendMusicList();
			this.dayRecommendMusicList = data.recommend || [];
		},

		//获取新歌数据
		async getNewSongData() {
			const data = await this.$api.getNewSongList();
			this.newSongList = data.result.slice(0, 9);
		},

		//获取网友精选歌单
		async getSelectionData() {
			const data = await this.$api.getSelectionData();
			this.selectData = data.playlists || [];
		},

		//获取热门歌手数据
		async getHotSingerData() {
			const data = await this.$api.getHotSingerList();
			this.hotSingerList = (data.artists || []).slice(0, 10);
		},

		toSearch() {
			uni.navigateTo({
				url: '../search/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-black {
	background-color: #000000;
}
.recommend-container {
	position: relative;
	background-color: #000000;
	height: 100%;
	padding-bottom: 100px;

	.main-container {
		position: relative;
		.banner-wrapper {
			box-sizing: border-box;
			padding: 10px;
			.banner-img {
				height: 158px;
				border-radius: 6px;
			}
		}
		.list-wrapper {
			margin-top: 8px;
			padding-bottom: 12px;
			.list-item {
				text-align: center;
				font-size: 24rpx;
			}
			.list-ico {
				font-size: 72rpx;
				margin-bottom: 6px;
			}
			.list-title {
				font-size: 28rpx;
			}
		}

		.music-wrapper {
			margin-top: 5px;
			background: #000000;
			box-sizing: border-box;
			padding: 15px;
			
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}
	
	.knowledge-list {
		margin-top: 1rem;
		
	  .space-x-14 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 0.88rem;
	    }
	    .space-y-8 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-top: 0.5rem;
	      }
	      .font_4 {
	        font-size: 0.88rem;
	        font-family: PingFangSC;
	        line-height: 0.81rem;
	        color: #ffffff;
	      }
	      .knowledge-item-title {
	        opacity: 0.8;
	      }
	      .knowledge-item-desc {
	        color: #4d4b5e;
	        font-size: 0.63rem;
	        font-family: PingFangSC;
	        line-height: 0.88rem;
	      }
	    }
	    .image_12 {
	      margin-right: 1.25rem;
	      width: 3.75rem;
	      height: 3.75rem;
	    }
	  }
	  
	  .knowledge-item {
		  margin-left: 3px;
		  margin-bottom: 20px;
	  }
	}
}
</style>