bnyer-cloud-tiktok/pages/creator/imgDetail.vue

<template>
	<view class="imgDetail">
		<image class="main-img" :src="detailMsg.imgUrl" mode=""></image>
		<view class="toolbar">
			<view class="toolbar-box">
				<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" @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" @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" @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" @click="share">
				<image src="../../static/share.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detailsTiktokImg, // 获取图片详情
		judgeTiktokLike, // 查询是否点赞过
		judgeTiktokCollect, // 查询是否收藏过
		tiktokLike, // 点赞
		tiktokUnLike, // 取消点赞
		tiktokCollect, // 收藏
		tiktokUnCollect, // 取消收藏
	} from '@/api/creator.js'
	export default {
		data() {
			return {
				detailMsg: {}, // 图片信息
				userInfo: {}, // 登录用户信息
				isDownload: false, // 是否已下载
				isLike: false, // 是否点赞/喜欢
				isCollect: false, // 是否收藏
			}
		},
		created() {
			uni.getStorage({
				key: 'detailId',
				success: res => {
					this.getImgDetail(res.data)
				}
			})
		},
		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: '分享',
				})
			}
		}
	}
</script>

<style lang="less">
	.imgDetail {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		position: relative;

		.main-img {
			width: 100%;
			height: 100%;
		}

		.toolbar {
			width: 60px;
			height: 360px;
			background-color: rgba(255, 255, 255, 0.2);
			position: absolute;
			bottom: 76px;
			right: 10px;
			border-radius: 60px;
			padding-top: 40rpx;

			.toolbar-box {
				height: 60px;
				text-align: center;
				margin-bottom: 40rpx;

				text {
					display: block;
					text-align: center;
					line-height: 60rpx;
					font-size: 12px;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin: 0 auto;
				}
			}

			.toolbar-box:first-child {
				line-height: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>