bnyer-cloud-tiktok/pages/index/index.vue

<template>
	<view class="container">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item style="background-color: aqua;">
					<view class="swiper-item">A</view>
				</swiper-item>
				<swiper-item style="background-color: indianred;">
					<view class="swiper-item">B</view>
				</swiper-item>
				<swiper-item style="background-color: pink;">
					<view class="swiper-item">C</view>
				</swiper-item>
			</swiper>
			<view class="headImg" @click="showDrawer('showLeft')">
				头像
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view :class="isLeftActive ? 'active_txt' : ''" @click="checkBtn(1)">
					最新
				</view>
				<view class="top_middle">
					|
				</view>
				<view :class="isRightActive ? 'active_txt' : ''" @click="checkBtn(2)">
					最热
				</view>
			</view>
			<view class="middle_box">
				<view class="middle" v-for="(item,index) in hotCreatorList" :key="index">
					<view class="middle_top">
						<img :src="item.img" class="avatar" alt="">
						<view class="middle_top_center">
							<view class="name">{{item.scanCode}}</view>
							<view class="level">1级艺术家</view>
						</view>
						<view class="middle_top_right" @click="goCreatorDetail(item.scanCode)" alt="">...</view>
					</view>
					<view class="middle_center">
						分享一下今天的创作
					</view>
					<view class="middle_bottom">
						<img :src="item.img" alt="">
					</view>
				</view>
			</view>
		</view>
		<view class="example-body">
			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
				<view class="drawer_content">
					<view class="drawer_content_top">
						<image :src="userInfo.img" mode=""></image>
						<view class="drawer_content_main">
							<view class="userName">
								{{userInfo.username}}
							</view>
							<view class="leave">
								1级艺术家
							</view>
							<view class="progress-box">
								<progress :percent="20" activeColor="#ffd9d9" backgroundColor="#c1c1c1"
									stroke-width="6" />
								<text>20/100</text>
							</view>
							<view class="sign">
								距离升级还差80点灵感值
							</view>
						</view>
					</view>
					<view class="drawer_content_menu">
						<view class="menu_list" v-for="(item,index) in menuList" :key="index" @click="targetPage(item)">
							<view class="sign_img">
								图标
							</view>
							<view class="menu_title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<view class="close" @click="closeDrawer('showLeft')">
					关闭
				</view>
			</uni-drawer>
		</view>
		<!-- 		<view v-if="!showChoiceness">
			<view class="top">
				<image class="back-img" src="../../static/img/start.gif" mode=""></image>
				<view class="top-bottom">
				</view>
				<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none"
					@confirm="search" />
				<text>热门艺术家</text>
				<view class="user-list">
					<view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
						@click="goCreatorDetail(item.scanCode)">
						<image :src="item.img" mode=""></image>
						<text>{{item.scanCode}}</text>
					</view>
				</view>
			</view>
			<view class="middle">
				<text>近期精选</text>
				<image src="../../static/img/slide-top.svg" mode=""></image>
			</view>
		</view>
		<Choiceness v-else></Choiceness> -->
	</view>
</template>

<script>
	import {
		listHotCreator,
		creatorDetails
	} from '@/api/index.js'
	import {loginTiktok} from '@/api/auth.js'
	import Choiceness from './choiceness.vue'
	export default {
		data() {
			return {
				hotCreatorList: [],
				isTarget: true,
				showChoiceness: false,
				isLeftActive: false,
				isRightActive: false,
				userInfo: {}, // 用户信息
				menuList: [ // 抽屉菜单
					{
						title: '我的好友'
					},
					{
						title: '我的订单'
					},
					{
						title: '我的收藏'
					},
					{
						title: '反馈意见'
					},
					{
						title: '联系客服'
					},
				],
			}
		},
		components: {
			Choiceness,
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.showChoiceness = false
			uni.stopPullDownRefresh()
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				this.getUserInfo()
			} else {
				console.log('have userInfo')
			}
			this.checkBtn(1)
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件

			if (e.scrollTop > 160) {
				this.showChoiceness = true
				// uni.redirectTo({
				// 	url: '../index/choiceness'
				// })
			}
		},
		methods: {
			// 打开窗口
			showDrawer(e) {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo) {
					console.log('havent userInfo')
					this.getUserInfo()
				} else {
					this.userInfo = userInfo
				}
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			targetPage(item) {
				switch (item.title) {
					case '我的好友':
						console.log('我的好友')
						break;
					case '我的订单':
						console.log('我的订单')
						break;
					case '我的收藏':
						uni.navigateTo({
							url: '../userInfo/myCollection/myCollection'
						})
						break;
					case '反馈意见':
						uni.navigateTo({
							url: '../userInfo/question/question'
						})
						break;
					case '联系客服':
						uni.navigateTo({
							url: '../userInfo/contactUs/contactUs'
						})
						break;
				}
			},
			checkBtn(num) {
				if (num === 1) {
					this.isLeftActive = true
					this.isRightActive = false
					this.getHotCreatorList()
				} else if (num === 2) {
					this.isLeftActive = false
					this.isRightActive = true
					this.getHotCreatorList()
				}
			},
			// 搜索
			search(res) {
				if (res.value) {
					console.log('search', res.value)
					this.goCreatorDetail(res.value)
				} else {
					uni.showToast({
						title: '请输入艺术家代号',
						icon: 'none'
					})
				}

			},
			// 获取用户信息
			getUserInfo() {
				uni.login({
					force: true,
					success: res => {
						uni.getUserInfo({
							withCredentials: true,
							success: userInfo => {
								const params = {
									code: res.code,
									encryptedData: userInfo.encryptedData,
									iv: userInfo.iv
								}
								// 用户授权登录
								loginTiktok(params).then(res => {
									if (res && res.data.code === 200) {
										uni.setStorage({
											key: 'userInfo',
											data: res.data.data.userInfo,
										})
										uni.setStorage({
											key: 'platform',
											data: res.data.data.platform,
										})
										uni.setStorage({
											key: 'token',
											data: res.data.data.access_token
										})
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								}).catch(res => {})
								console.log(`getUserInfo 调用成功`, userInfo);
							},
							fail(userInfo) {
								console.log(`getUserInfo 调用失败`);
							},
						});
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				});

			},
			// 获取热门艺术家列表
			async getHotCreatorList() {
				const res = await listHotCreator()
				if (res && res.data.code === 200) {
					this.hotCreatorList = res.data.data
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				console.log('getHotCreatorList', res)
			},
			// 前往艺术家空间
			async goCreatorDetail(scanCode) {
				if (scanCode) {
					const res = await creatorDetails({
						scanCode
					})
					console.log('creatorDetails', res)
					if (res && res.data.code === 200) {
						uni.setStorage({
							key: 'creatorDetail',
							data: res.data.data,
							success() {
								uni.navigateTo({
									url: '../creator/creatorDetail'
								})
							}
						})

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '搜索码不能为空',
						icon: 'none'
					})
				}
			},
			// 滚动监听
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				console.log(scrollTop)
			},
		},
	}
</script>

<style lang="less">
	.container {
		height: 100vh;

		.banner {
			height: 80vh;
			position: relative;

			.swiper {
				height: 100% !important;
			}

			.headImg {
				position: absolute;
				top: 40rpx;
				left: 40rpx;
				display: inline-block;
				background-color: white;
			}
		}

		.content {
			min-height: calc(100vh - 80vh + 40rpx);
			max-height: calc(80vh + 40rpx);
			background-color: white;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
			top: -40rpx;
			padding: 20px 30px;

			.top {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 18px;

				view {
					font-size: 14px;
					color: #9f9f9f;
				}

				.active_txt {
					color: #000000;
					font-weight: bold;
				}

				.top_middle {
					padding: 0 14rpx;
				}
			}

			.middle_box {
				overflow-y: auto;
				max-height: calc(80vh - 40px);
			}

			.middle {
				padding-bottom: 10px;

				.middle_top {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					width: 100%;

					.avatar {
						width: 66px;
						height: 66px;
						border-radius: 66px;
					}

					.middle_top_center {
						padding-left: 24px;

						.name {
							font-size: 14px;
							color: black;
							font-weight: bold;
							margin-bottom: 6rpx;
						}

						.level {
							font-size: 13px;
							color: #404040;
						}
					}

					.middle_top_right {
						position: absolute;
						right: 0;
					}
				}

				.middle_center {
					color: #404040;
					font-size: 14px;
					padding-left: 90px;
					padding-bottom: 10px;
				}

				.middle_bottom {
					padding-left: 90px;

					img {
						width: 94px;
						height: 94px;
					}
				}
			}
		}

		.example-body {
			.uni-drawer__content {
				border-radius: 0 40px 0 0;
				display: flex;

				.drawer_content {
					flex: 9;
					padding-top: 20rpx;
					padding-left: 20rpx;

					.drawer_content_top {
						display: flex;
						justify-content: flex-start;
						margin-bottom: 185rpx;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 80rpx;
							margin-right: 20rpx;
						}

						.drawer_content_main {
							.userName {
								font-size: 16px;
								padding-bottom: 6rpx;
							}

							.leave {
								font-size: 12px;
								color: #404040;
								padding-bottom: 12rpx;
							}

							.progress-box {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								progress {
									width: 268rpx;
									border-radius: 6px;
								}

								text {
									font-size: 12px;
									color: #c1c1c1;
									padding-left: 20rpx;
								}
							}

							.sign {
								font-size: 12px;
								color: #404040;
							}
						}
					}

					.drawer_content_menu {
						.menu_list {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							cursor: pointer;

							.sign_img {
								width: 80rpx;
								height: 80rpx;
								margin: 0 30rpx;
							}

							.menu_title {
								border-top: 3px solid #d8d8d8;
								font-size: 16px;
								height: 50px;
								line-height: 50px;
								padding: 0 20px;
							}
						}

						.menu_list:last-child {
							.menu_title {
								border-bottom: 3px solid #d8d8d8;
							}
						}
					}
				}

				.close {
					flex: 1;
					display: flex;
					align-items: center;
				}
			}
		}

	}
</style>