From 314afc18a710c4528a82993d0bafcc34626a2c9c Mon Sep 17 00:00:00 2001
From: gao1021514 <1328969651@qq.com>
Date: Sat, 28 May 2022 23:53:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=89=BA=E6=9C=AF=E5=AE=B6=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E9=80=BB=E8=BE=91=E8=A1=A5=E5=85=A8=EF=BC=8C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E6=8E=A5=E5=8F=A3=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=EF=BC=8C=E9=83=A8=E5=88=86icon=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/creator/creator.vue   | 198 ++++++++++++++++++++++--------------
 pages/creator/imgDetail.vue | 188 ++++++++++++++++++++++++++++++----
 2 files changed, 293 insertions(+), 93 deletions(-)

diff --git a/pages/creator/creator.vue b/pages/creator/creator.vue
index 84a1cbd..1092dd5 100644
--- a/pages/creator/creator.vue
+++ b/pages/creator/creator.vue
@@ -1,72 +1,68 @@
 <template>
-	<view class="content">
+	<view class="creator">
 		<view>
-			<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="indicatorDots">
+			<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration"
+				:indicator-dots="indicatorDots">
 				<swiper-item v-for="(item, index) in banner" :key="index">
 					<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image>
 				</swiper-item>
 			</swiper>
 		</view>
-		
+
 		<view class="list">
 			<view v-for="(item, index) in userImgList" :key="index" class="list-item">
 				<!-- 展示用户相关信息 -->
-					<template>
-						<view class="fb-d-r fb-j-sb fb-a-c">
-							<view class="fb-d-r fb-a-c head-box">
-								<image class="head" :src="item.img"></image>
-								<view class="ml-10">
-									<view class="">
-										<text class="">{{item.username}}</text>
-									</view>
-								
-									<view class="fb-d-r fb-j-sb">
-										<view class="">
-											<text>图标</text>  <text>11111</text>
-										</view>
-										<view class="">
-											<text>图标</text>  <text>11111</text>
-										</view>
-										<view class="">
-											<text>图标</text>  <text>11111</text>
-										</view>
-									</view>
-									
-								</view>
-							</view>
-							
+				<view class="fb-d-r fb-j-sb fb-a-c list-top">
+					<view class="fb-d-r fb-a-c head-box" @click="toUserDetail(item)">
+						<image class="head" :src="item.img"></image>
+						<view class="ml-10">
 							<view class="">
-								jiantou
+								<text class="">{{item.username}}</text>
 							</view>
-						</view>
-					    
-					</template>
-				<!-- 	展示用户对应三张图 -->
-					<template>
-						<view class="fb-d-r fb-j-sb img-box">
-							<view v-for="(pic,param) in item.imgList" :key="param" >
-								<image class="threeImg" @click="linkTo(item)" :src="pic.imgUrl"></image>
+							<view class="fb-d-r fb-j-sb">
+								<view class="imgLength-box">
+									<image class="img-icon" src="../../static/imgLength.png" mode=""></image>
+									<text>11111</text>
+								</view>
+								<view class="imgLength-box">
+									<image class="img-icon" src="../../static/collectLength.png" mode=""></image>
+									<text>11111</text>
+								</view>
+								<view class="imgLength-box">
+									<image class="img-icon" src="../../static/likeLength.png" mode=""></image>
+									<text>11111</text>
+								</view>
 							</view>
 						</view>
-						
-					</template>
+					</view>
+					<image class="jiantou" src="../../static/jiantou-right.png" mode=""></image>
+				</view>
+				<!-- 	展示用户对应三张图 -->
+				<view class="fb-d-r fb-j-sb img-box">
+					<view v-for="(pic,param) in item.imgList" :key="param">
+						<image class="threeImg" @click="linkTo(pic)" :src="pic.imgUrl"></image>
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {getBannerList,getUserImgList} from '@/api/creator.js' 
+	import {
+		getBannerList,
+		getUserImgList
+	} from '@/api/creator.js'
 	export default {
 		data() {
 			return {
 				banner: [],
-				userImgList:[],
+				userImgList: [],
 				autoplay: true,
 				interval: 2000,
 				duration: 1000,
 				indicatorDots: true,
-				
+
 			}
 		},
 		onLoad() {
@@ -74,85 +70,136 @@
 			this.getUserImgList();
 		},
 		methods: {
-			linkTo(item){
-				console.log(item.bannerImg)
-				uni.showModal({
-					content: '跳转啦', 
-					showCancel: false
-				});
+			// 跳转用户详情页
+			toUserDetail(item){
+				if (item) {
+					uni.setStorage({
+						key: 'userDetail',
+						data: item,
+						success() {
+							uni.redirectTo({
+								url: '../creator/userDetail'
+							})
+						}
+					})
+				} 
+			},
+			// 跳转图片详情页
+			linkTo(item) {
+				console.log(item)
+				if (item.id) {
+					uni.setStorage({
+						key: 'detailId',
+						data: item.id,
+						success() {
+							console.log(111111)
+							uni.redirectTo({
+								url: '../creator/imgDetail'
+							})
+						}
+					})
+				}
 			},
-			
-			getUserDetails(item){
+
+			getUserDetails(item) {
 				//TODO 点击跳转对应用户详情页面
 				console.log(item);
 			},
-			
-			async getBanner(){
+
+			async getBanner() {
 				const res = await getBannerList()
-				if(res.data.code === 200){
+				if (res.data.code === 200) {
 					this.banner = res.data.data
-				}else{
+				} else {
 					uni.showModal({
-						content: 'banner加载失败！', 
+						content: 'banner加载失败！',
 						showCancel: false
 					});
 				}
 			},
-			
-			async getUserImgList(){
+
+			async getUserImgList() {
 				const res = await getUserImgList()
-				if(res.data.code === 200){
+				if (res.data.code === 200) {
 					this.userImgList = res.data.data
-					console.log('userListImg',this.userImgList)
-				}else{
+					console.log('userListImg', this.userImgList)
+				} else {
 					uni.showModal({
-						content: '用户图片列表加载失败！', 
+						content: '用户图片列表加载失败！',
 						showCancel: false
 					});
 				}
 			}
-			
+
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.content {
+	.creator {
 		padding: 20rpx;
 		background-color: #ffffff;
 		font-size: 22rpx;
+
 		.list {
 			margin-top: 20rpx;
+
 			&-item {
 				padding: 5rpx;
 				margin-top: 20rpx;
 			}
+			.list-top{
+				margin-bottom: 20rpx;
+			}
 			.head-box {
 				flex: .8;
+
 				&>.ml-10 {
 					flex: 1;
+					height: 40px;
+					padding: 4rpx 0;
+					display: flex;
+					flex-direction:column;
+					justify-content: space-between;
+					.imgLength-box {
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+						.img-icon {
+							width: 30rpx;
+							height: 30rpx;
+						}
+					}
+
 				}
 			}
-				
+
+			.jiantou {
+				width: 40rpx;
+				height: 40rpx;
+			}
+
 			.img-box {
 				margin-top: 10rpx;
-				>view {
+				display: flex;
+				justify-content: flex-start;
+				view {
 					width: 32%;
 					image {
 						border-radius: 8rpx;
-						width: 100%;
+						width: calc(100% - 12rpx);
 					}
 				}
 			}
 		}
 	}
-	
+
 	.swiper-box {
 		height: 250rpx;
 		// border: 2rpx solid #18BC37;
 		border-radius: 8rpx;
 		overflow: hidden;
-		
+
 	}
 
 	.swiper-item {
@@ -171,25 +218,24 @@
 		width: 100%;
 		height: 100%;
 	}
-	
 	.head {
 		// flex: 1;
 		// display: flex;
-		width:80rpx;
-		height:80rpx;
+		width: 80rpx;
+		height: 80rpx;
 		border-radius: 50%;
 		// justify-content: space-between;
 		// align-items: flex-end;
 	}
-	
+
 	.userName {
-		
+
 		margin-left: 10rpx;
-		
+
 	}
-	
+
 	.threeImg {
-		height:300rpx;
-		width:200rpx;
+		height: 300rpx;
+		width: 200rpx;
 	}
 </style>
diff --git a/pages/creator/imgDetail.vue b/pages/creator/imgDetail.vue
index 94b631e..c45395e 100644
--- a/pages/creator/imgDetail.vue
+++ b/pages/creator/imgDetail.vue
@@ -3,22 +3,26 @@
 		<image class="main-img" :src="detailMsg.imgUrl" mode=""></image>
 		<view class="toolbar">
 			<view class="toolbar-box">
-				<text>热门</text>
+				<image v-if="detailMsg.isHot ==='0'" src="../../static/hot-not.png" mode=""></image>
+				<image v-else src="../../static/hot-yes.png" mode=""></image>
 			</view>
-			<view class="toolbar-box">
-				<text>下载</text>
+			<view class="toolbar-box" @click="download">
+				<image v-if="isDownload" src="../../static/download-select.png" mode=""></image>
+				<image v-else src="../../static/download.png" mode=""></image>
 				<text>下载{{detailMsg.downloadNum}}</text>
 			</view>
-			<view class="toolbar-box">
-				<text>喜欢</text>
+			<view class="toolbar-box" @click="likeCollect('isLike')">
+				<image v-if="isLike" src="../../static/like-select.png" mode=""></image>
+				<image v-else src="../../static/like.png" mode=""></image>
 				<text>喜欢{{detailMsg.greatNum}}</text>
 			</view>
-			<view class="toolbar-box">
-				<text>收藏</text>
+			<view class="toolbar-box" @click="likeCollect('isCollect')">
+				<image v-if="isCollect" src="../../static/collect-select.png" mode=""></image>
+				<image v-else src="../../static/collect.png" mode=""></image>
 				<text>收藏{{detailMsg.collectionNum}}</text>
 			</view>
-			<view class="toolbar-box">
-				<text>分享</text>
+			<view class="toolbar-box" @click="share">
+				<image src="../../static/share.png" mode=""></image>
 			</view>
 		</view>
 	</view>
@@ -26,12 +30,22 @@
 
 <script>
 	import {
-		detailsTiktokImg
+		detailsTiktokImg, // 获取图片详情
+		judgeTiktokLike, // 查询是否点赞过
+		judgeTiktokCollect, // 查询是否收藏过
+		tiktokLike, // 点赞
+		tiktokUnLike, // 取消点赞
+		tiktokCollect, // 收藏
+		tiktokUnCollect, // 取消收藏
 	} from '@/api/creator.js'
 	export default {
 		data() {
 			return {
-				detailMsg: {}
+				detailMsg: {}, // 图片信息
+				userInfo: {}, // 登录用户信息
+				isDownload: false, // 是否已下载
+				isLike: false, // 是否点赞/喜欢
+				isCollect: false, // 是否收藏
 			}
 		},
 		created() {
@@ -43,17 +57,139 @@
 			})
 		},
 		methods: {
+			// 图片详情
 			async getImgDetail(id) {
 				const res = await detailsTiktokImg(id)
 				if (res.data.code === 200) {
 					this.detailMsg = res.data.data
 					console.log('图片详情', this.detailMsg)
+					uni.getStorage({
+						key: 'userInfo',
+						success: res => {
+							this.userInfo = res.data
+							console.log('userInfo', this.userInfo)
+							this.searchIsLike()
+							this.searchisCollect()
+						}
+					})
 				} else {
 					uni.showToast({
 						title: '请输入艺术家代号',
 						icon: 'error'
 					})
 				}
+			},
+			// 查询是否点赞
+			async searchIsLike() {
+				const params = {
+					imgId: this.detailMsg.id,
+					userId: this.userInfo.id
+				}
+				console.log('params', this.detailMsg, params)
+				const res = await judgeTiktokLike(params)
+				if (res.data.code === 200) {
+					this.isLike = res.data.data
+				} else {
+					uni.showToast({
+						title: res.data.msg,
+						icon: 'error'
+					})
+				}
+			},
+			// 查询是否收藏过
+			async searchisCollect() {
+				const params = {
+					imgId: this.detailMsg.id,
+					userId: this.userInfo.id
+				}
+				const res = await judgeTiktokCollect(params)
+				if (res.data.code === 200) {
+					this.isCollect = res.data.data
+				} else {
+					uni.showToast({
+						title: res.data.msg,
+						icon: 'error'
+					})
+				}
+			},
+			// 点赞/收藏
+			async likeCollect(val) {
+				const params = {
+					imgId: this.detailMsg.id,
+					userId: this.userInfo.id
+				}
+				if (val === 'isLike') {
+					this.isLike = !this.isLike
+					console.log('this.isLike', this.isLike)
+					if (this.isLike) {
+						//点赞
+						console.log('点赞')
+						const res = await tiktokLike(params)
+						if (res.data.code === 200) {
+							this.detailMsg.greatNum += 1
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'error'
+							})
+						}
+					} else {
+						//取消点赞
+						console.log('取消点赞')
+						const res = await tiktokUnLike(params)
+						if (res.data.code === 200) {
+							this.detailMsg.greatNum -= 1
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'error'
+							})
+						}
+					}
+				} else if (val === 'isCollect') {
+					this.isCollect = !this.isCollect
+					if (this.isCollect) {
+						//收藏
+						console.log('收藏')
+						const res = await tiktokCollect(params)
+						if (res.data.code === 200) {
+							this.detailMsg.collectionNum += 1
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'error'
+							})
+						}
+					} else {
+						//取消收藏
+						console.log('取消收藏')
+						const res = await tiktokUnCollect(params)
+						if (res.data.code === 200) {
+							this.detailMsg.collectionNum -= 1
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: 'error'
+							})
+						}
+					}
+				}
+
+
+			},
+			// 下载
+			download() {
+				this.isDownload = true
+				this.detailMsg.downloadNum += 1
+				uni.showToast({
+					title: '下载',
+				})
+			},
+			// 分享
+			share() {
+				uni.showToast({
+					title: '分享',
+				})
 			}
 		}
 	}
@@ -65,26 +201,44 @@
 		width: 100vw;
 		overflow: hidden;
 		position: relative;
+
 		.main-img {
 			width: 100%;
-			height:100%;
+			height: 100%;
 		}
-		.toolbar{
+
+		.toolbar {
 			width: 60px;
 			height: 360px;
-			background-color: rgba(255,255,255,0.2);
+			background-color: rgba(255, 255, 255, 0.2);
 			position: absolute;
 			bottom: 76px;
 			right: 10px;
 			border-radius: 60px;
-			.toolbar-box{
+			padding-top: 40rpx;
+
+			.toolbar-box {
 				height: 60px;
-				text{
+				text-align: center;
+				margin-bottom: 40rpx;
+
+				text {
 					display: block;
 					text-align: center;
-					line-height: 30px;
+					line-height: 60rpx;
 					font-size: 12px;
 				}
+
+				image {
+					width: 50rpx;
+					height: 50rpx;
+					margin: 0 auto;
+				}
+			}
+
+			.toolbar-box:first-child {
+				line-height: 40rpx;
+				height: 40rpx;
 			}
 		}
 	}