magicsound/pages/index/index.vue

<template>

	<view class="">

		<view class="content" :style="'paddingTop: '+systemBarHeight + 'px; height:' +subtractedHeight+'px'">

			<view class=""
				style="display: flex; flex-direction: row; height: 45rpx; width: 100%; align-items: center; justify-content: space-between;"
				:style="{ marginTop: systemBarHeight + 'px' }">

				<img src="/static/image/ic_music.png" style="width: 165.28rpx; height: 40.97rpx; margin-left: 36rpx;"
					alt="" />
			</view>

			<view class="" style="width: 100vw; margin-top: 50rpx; padding-left: 36rpx;">
				<v-tabs v-model="current" bgColor="#0E0A10" color="#999999" activeColor="#FFFFFF" lineColor="#FFFFFF"
					fontSize="38rpx" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>
			<view class="" style="height: 100%; width: 100%; margin-top: 50rpx;">
				<swiper style="height: 100%;" :current="current" @change="swiperChange">

					<swiper-item class="" style="width: 100%; height: 100%; overflow: auto;"
						v-for="(item,index) in tabs" :key="index">

						<view class="" v-for="(item,index) in musicList" @click="toMusicPlay(item)"
							style="display: flex; justify-content: center; margin-bottom: 28rpx; position: relative;">
							<view class=""
								style="background-color: #302D4EFF; width: 683.33rpx; height: 213.89rpx; border-radius: 10rpx; display: flex; flex-direction: row; align-items: center;">

								<view class=""
									style="width: 152rpx; height: 152rpx; background-color: #3c3a3eFF; display: flex; position: relative; align-items: center; justify-content: center; margin-left: 24rpx;">
									<image :src="item.coverImage"
										style="width: 152rpx; height: 152rpx; position: absolute;" mode=""></image>
									<img src="/static/image/ic_play.png"
										style="width: 45rpx; height: 45rpx; position: absolute;" alt="" />
								</view>

								<view class=""
									style="display: flex; flex-direction: column; margin-left: 42rpx; width: 35%;">

									<text style="font-size: 33rpx; color: white;">{{item.title}}</text>

									<text
										style="font-size: 27rpx; color: #9C9090FF; margin-top: 18rpx;">{{item.authorName}}</text>

									<view class=""
										style="display: flex; flex-direction: row; align-items: center; margin-top: 20rpx;">
										<image src="../../static/image/ic_like.png" style="width: 16rpx; height: 16rpx;"
											mode=""></image>
										<text
											style="color: white; font-size: 22rpx; margin-left: 9rpx;">{{item.likeCount}}</text>

										<image src="../../static/image/ic_collect.png"
											style="width: 16rpx; height: 16rpx; margin-left: 34rpx;" mode=""></image>
										<text
											style="color: white; font-size: 22rpx; margin-left: 9rpx;">{{item.favoritesCount}}</text>
									</view>
								</view>

								<view class="" style="width: 176.39rpx; height: 68.06rpx; background-image: linear-gradient(to left, #a541ffFF, #3fbbfeFF); 
									border-radius: 33rpx; margin-left: 15rpx; display: flex; align-items: center; justify-content: center;">
									<text style="font-size: 28rpx; color: white;">制作同款</text>
								</view>



							</view>

						</view>



					</swiper-item>

				</swiper>
			</view>


		</view>

	</view>


</template>

<script>
	const app = getApp();
	import {
		AppServer
	} from '../../modules/api/AppServer';
	export default {
		data() {
			return {
				systemBarHeight: 0,
				subtractedHeight: 0,
				tabs: ["推荐"],
				current: 0,
				musicGenresList: [],
				musicList: [] //音乐列表
			}
		},
		onShow() {
			this.getMusicGenresList();
		},
		onLoad() {
			this.autoLogin();
			this.systemBarHeight = getApp().globalData.statusBarHeight;
			this.subtractedHeight = getApp().globalData.windowHeight;
		},
		methods: {

			changeTab(index) {
				this.current = index
				console.log('当前选中索引：changeTab' + index)
			},

			swiperChange(e) {
				this.current = e.detail.current
				console.log('当前选中索引：swiperChange' + this.current)

				this.getMusicGenresInfo();
			},

			//获取音乐分类
			getMusicGenresList() {
				var that = this;
				var appserver = new AppServer();
				appserver.GetMusicGenresList().then(data => {
					console.log("getMusicGenresList", data.data);
					that.musicGenresList = data.data;
					let _tabs = [];
					for (var i = 0; i < data.data.length; i++) {
						_tabs.push(data.data[i].genreName);
						console.log("data[i].genreName", data.data[i].genreName);
					}
					that.tabs = _tabs;
					console.log("that.tabs", that.tabs);
					this.getMusicGenresInfo();
				});
			},

			//获取音乐列表
			getMusicGenresInfo() {
				var that = this;
				var appserver = new AppServer();
				console.log("this.musicGenresList[this.current]", this.musicGenresList[this.current].id);
				appserver.GetMusicGenresInfo(this.musicGenresList[this.current].id).then(data => {
					that.musicList = data.data;
				});
			},

			toMusicPlay(item) {

				let loginValue = uni.getStorageSync("isLoginKey");

				if (!loginValue) {
					//跳转进入登录页
					uni.navigateTo({
						url: "/pages/login/Loginpage",
						success: () => {}
					})
				}


				uni.navigateTo({
					url: '/pages/music/MusicPlayPage?musicUrl=' + item.musicAddress + '&musicName=' +
						item.title + '&lyrics=' + item.lyrics + '&isPublic=' + item.isPublic + '&state=' +
						item.state + '&id=' + item.id + '&isLikes=' + item.isLikes + '&isFavorites=' +
						item.isFavorites + '&coverImage=' + item.coverImage
				});
			},

			async autoLogin() {

				var loginRes = await uni.login();
				// AccountLogIn
				var appserver = new AppServer();
				var data = await appserver.AccountLogIn(loginRes.code)
				console.log(data);
				uni.setStorageSync("token", "Bearer " + data.data.token);
				uni.setStorageSync("isLoginKey", true);
				// uni.getStorageSync("isLoginKey");
				uni.setStorageSync("userData", data);

				var userInfo = await wx.getUserInfo({
					withCredentials: true
				})

			}


		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #0E0A10;
	}
</style>