bnyer
/
bnyer-cloud-tiktok
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

艺术家列表接口逻辑补全，详情页接口交互实现，部分icon替换

feature-1.0
gao1021514 4 years ago
parent
e0dfcadbbe
commit
314afc18a7
2 changed files with 293 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      pages/creator/creator.vue
  2. 188
      pages/creator/imgDetail.vue

198
pages/creator/creator.vue
View File

@ -1,72 +1,68 @@
<template> <template>
<view class="content"> <view class="creator">
<view> <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"> <swiper-item v-for="(item, index) in banner" :key="index">
<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image> <image class="img" @click="linkTo(item)" :src="item.bannerImg"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<view class="list"> <view class="list">
<view v-for="(item, index) in userImgList" :key="index" class="list-item"> <view v-for="(item, index) in userImgList" :key="index" class="list-item">
<!-- 展示用户相关信息 --> <!-- 展示用户相关信息 -->
<template> <view class="fb-d-r fb-j-sb fb-a-c list-top">
<view class="fb-d-r fb-j-sb fb-a-c"> <view class="fb-d-r fb-a-c head-box" @click="toUserDetail(item)">
<view class="fb-d-r fb-a-c head-box"> <image class="head" :src="item.img"></image>
<image class="head" :src="item.img"></image> <view class="ml-10">
<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=""> <view class="">
jiantou <text class="">{{item.username}}</text>
</view> </view>
</view> <view class="fb-d-r fb-j-sb">
<view class="imgLength-box">
</template> <image class="img-icon" src="../../static/imgLength.png" mode=""></image>
<!-- 展示用户对应三张图 --> <text>11111</text>
<template> </view>
<view class="fb-d-r fb-j-sb img-box"> <view class="imgLength-box">
<view v-for="(pic,param) in item.imgList" :key="param" > <image class="img-icon" src="../../static/collectLength.png" mode=""></image>
<image class="threeImg" @click="linkTo(item)" :src="pic.imgUrl"></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>
</view> </view>
</view>
</template> <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> </view>
</view> </view>
</template> </template>
<script> <script>
import {getBannerList,getUserImgList} from '@/api/creator.js' import {
getBannerList,
getUserImgList
} from '@/api/creator.js'
export default { export default {
data() { data() {
return { return {
banner: [], banner: [],
userImgList:[], userImgList: [],
autoplay: true, autoplay: true,
interval: 2000, interval: 2000,
duration: 1000, duration: 1000,
indicatorDots: true, indicatorDots: true,
} }
}, },
onLoad() { onLoad() {
@ -74,85 +70,136 @@
this.getUserImgList(); this.getUserImgList();
}, },
methods: { methods: {
linkTo(item){ // 跳转用户详情页
console.log(item.bannerImg) toUserDetail(item){
uni.showModal({ if (item) {
content: '跳转啦', uni.setStorage({
showCancel: false 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 点击跳转对应用户详情页面 //TODO 点击跳转对应用户详情页面
console.log(item); console.log(item);
}, },
async getBanner(){ async getBanner() {
const res = await getBannerList() const res = await getBannerList()
if(res.data.code === 200){ if (res.data.code === 200) {
this.banner = res.data.data this.banner = res.data.data
}else{ } else {
uni.showModal({ uni.showModal({
content: 'banner加载失败！', content: 'banner加载失败！',
showCancel: false showCancel: false
}); });
} }
}, },
async getUserImgList(){ async getUserImgList() {
const res = await getUserImgList() const res = await getUserImgList()
if(res.data.code === 200){ if (res.data.code === 200) {
this.userImgList = res.data.data this.userImgList = res.data.data
console.log('userListImg',this.userImgList) console.log('userListImg', this.userImgList)
}else{ } else {
uni.showModal({ uni.showModal({
content: '用户图片列表加载失败！', content: '用户图片列表加载失败！',
showCancel: false showCancel: false
}); });
} }
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content { .creator {
padding: 20rpx; padding: 20rpx;
background-color: #ffffff; background-color: #ffffff;
font-size: 22rpx; font-size: 22rpx;
.list { .list {
margin-top: 20rpx; margin-top: 20rpx;
&-item { &-item {
padding: 5rpx; padding: 5rpx;
margin-top: 20rpx; margin-top: 20rpx;
} }
.list-top{
margin-bottom: 20rpx;
}
.head-box { .head-box {
flex: .8; flex: .8;
&>.ml-10 { &>.ml-10 {
flex: 1; 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 { .img-box {
margin-top: 10rpx; margin-top: 10rpx;
>view { display: flex;
justify-content: flex-start;
view {
width: 32%; width: 32%;
image { image {
border-radius: 8rpx; border-radius: 8rpx;
width: 100%; width: calc(100% - 12rpx);
} }
} }
} }
} }
} }
.swiper-box { .swiper-box {
height: 250rpx; height: 250rpx;
// border: 2rpx solid #18BC37; // border: 2rpx solid #18BC37;
border-radius: 8rpx; border-radius: 8rpx;
overflow: hidden; overflow: hidden;
} }
.swiper-item { .swiper-item {
@ -171,25 +218,24 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.head { .head {
// flex: 1; // flex: 1;
// display: flex; // display: flex;
width:80rpx; width: 80rpx;
height:80rpx; height: 80rpx;
border-radius: 50%; border-radius: 50%;
// justify-content: space-between; // justify-content: space-between;
// align-items: flex-end; // align-items: flex-end;
} }
.userName { .userName {
margin-left: 10rpx; margin-left: 10rpx;
} }
.threeImg { .threeImg {
height:300rpx; height: 300rpx;
width:200rpx; width: 200rpx;
} }
</style> </style>

188
pages/creator/imgDetail.vue
View File

@ -3,22 +3,26 @@
<image class="main-img" :src="detailMsg.imgUrl" mode=""></image> <image class="main-img" :src="detailMsg.imgUrl" mode=""></image>
<view class="toolbar"> <view class="toolbar">
<view class="toolbar-box"> <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>
<view class="toolbar-box"> <view class="toolbar-box" @click="download">
<text>下载</text> <image v-if="isDownload" src="../../static/download-select.png" mode=""></image>
<image v-else src="../../static/download.png" mode=""></image>
<text>下载{{detailMsg.downloadNum}}</text> <text>下载{{detailMsg.downloadNum}}</text>
</view> </view>
<view class="toolbar-box"> <view class="toolbar-box" @click="likeCollect('isLike')">
<text>喜欢</text> <image v-if="isLike" src="../../static/like-select.png" mode=""></image>
<image v-else src="../../static/like.png" mode=""></image>
<text>喜欢{{detailMsg.greatNum}}</text> <text>喜欢{{detailMsg.greatNum}}</text>
</view> </view>
<view class="toolbar-box"> <view class="toolbar-box" @click="likeCollect('isCollect')">
<text>收藏</text> <image v-if="isCollect" src="../../static/collect-select.png" mode=""></image>
<image v-else src="../../static/collect.png" mode=""></image>
<text>收藏{{detailMsg.collectionNum}}</text> <text>收藏{{detailMsg.collectionNum}}</text>
</view> </view>
<view class="toolbar-box"> <view class="toolbar-box" @click="share">
<text>分享</text> <image src="../../static/share.png" mode=""></image>
</view> </view>
</view> </view>
</view> </view>
@ -26,12 +30,22 @@
<script> <script>
import { import {
detailsTiktokImg detailsTiktokImg, // 获取图片详情
judgeTiktokLike, // 查询是否点赞过
judgeTiktokCollect, // 查询是否收藏过
tiktokLike, // 点赞
tiktokUnLike, // 取消点赞
tiktokCollect, // 收藏
tiktokUnCollect, // 取消收藏
} from '@/api/creator.js' } from '@/api/creator.js'
export default { export default {
data() { data() {
return { return {
detailMsg: {} detailMsg: {}, // 图片信息
userInfo: {}, // 登录用户信息
isDownload: false, // 是否已下载
isLike: false, // 是否点赞/喜欢
isCollect: false, // 是否收藏
} }
}, },
created() { created() {
@ -43,17 +57,139 @@
}) })
}, },
methods: { methods: {
// 图片详情
async getImgDetail(id) { async getImgDetail(id) {
const res = await detailsTiktokImg(id) const res = await detailsTiktokImg(id)
if (res.data.code === 200) { if (res.data.code === 200) {
this.detailMsg = res.data.data this.detailMsg = res.data.data
console.log('图片详情', this.detailMsg) console.log('图片详情', this.detailMsg)
uni.getStorage({
key: 'userInfo',
success: res => {
this.userInfo = res.data
console.log('userInfo', this.userInfo)
this.searchIsLike()
this.searchisCollect()
}
})
} else { } else {
uni.showToast({ uni.showToast({
title: '请输入艺术家代号', title: '请输入艺术家代号',
icon: 'error' 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; width: 100vw;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.main-img { .main-img {
width: 100%; width: 100%;
height:100%; height: 100%;
} }
.toolbar{
.toolbar {
width: 60px; width: 60px;
height: 360px; height: 360px;
background-color: rgba(255,255,255,0.2); background-color: rgba(255, 255, 255, 0.2);
position: absolute; position: absolute;
bottom: 76px; bottom: 76px;
right: 10px; right: 10px;
border-radius: 60px; border-radius: 60px;
.toolbar-box{ padding-top: 40rpx;
.toolbar-box {
height: 60px; height: 60px;
text{ text-align: center;
margin-bottom: 40rpx;
text {
display: block; display: block;
text-align: center; text-align: center;
line-height: 30px; line-height: 60rpx;
font-size: 12px; font-size: 12px;
} }
image {
width: 50rpx;
height: 50rpx;
margin: 0 auto;
}
}
.toolbar-box:first-child {
line-height: 40rpx;
height: 40rpx;
} }
} }
} }

Write Preview
Loading…
Cancel
Save