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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 112
      pages/creator/creator.vue
  2. 178
      pages/creator/imgDetail.vue

112
pages/creator/creator.vue
View File

@ -1,7 +1,8 @@
<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>
@ -11,52 +12,47 @@
<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">
<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="">
<text class="">{{item.username}}</text>
</view>
<view class="fb-d-r fb-j-sb">
<view class="">
<text>图标</text> <text>11111</text>
<view class="imgLength-box">
<image class="img-icon" src="../../static/imgLength.png" mode=""></image>
<text>11111</text>
</view>
<view class="">
<text>图标</text> <text>11111</text>
<view class="imgLength-box">
<image class="img-icon" src="../../static/collectLength.png" mode=""></image>
<text>11111</text>
</view>
<view class="">
<text>图标</text> <text>11111</text>
<view class="imgLength-box">
<image class="img-icon" src="../../static/likeLength.png" mode=""></image>
<text>11111</text>
</view>
</view>
</view>
</view>
<view class="">
jiantou
</view>
<image class="jiantou" src="../../static/jiantou-right.png" mode=""></image>
</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>
<image class="threeImg" @click="linkTo(pic)" :src="pic.imgUrl"></image>
</view>
</view>
</template>
</view>
</view>
</view>
</template>
<script>
import {getBannerList,getUserImgList} from '@/api/creator.js'
import {
getBannerList,
getUserImgList
} from '@/api/creator.js'
export default {
data() {
return {
@ -74,12 +70,35 @@
this.getUserImgList();
},
methods: {
// 跳转用户详情页
toUserDetail(item){
if (item) {
uni.setStorage({
key: 'userDetail',
data: item,
success() {
uni.redirectTo({
url: '../creator/userDetail'
})
}
})
}
},
// 跳转图片详情页
linkTo(item) {
console.log(item.bannerImg)
uni.showModal({
content: '跳转啦',
showCancel: false
});
console.log(item)
if (item.id) {
uni.setStorage({
key: 'detailId',
data: item.id,
success() {
console.log(111111)
uni.redirectTo({
url: '../creator/imgDetail'
})
}
})
}
},
getUserDetails(item) {
@ -117,30 +136,58 @@
</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);
}
}
}
@ -171,7 +218,6 @@
width: 100%;
height: 100%;
}
.head {
// flex: 1;
// display: flex;

178
pages/creator/imgDetail.vue
View File

@ -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,10 +201,12 @@
width: 100vw;
overflow: hidden;
position: relative;
.main-img {
width: 100%;
height: 100%;
}
.toolbar {
width: 60px;
height: 360px;
@ -77,14 +215,30 @@
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: 30px;
line-height: 60rpx;
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