93 changed files with 4172 additions and 1299 deletions
@ -0,0 +1,38 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
const serviceTitle = '/img' |
||||
|
//GET 传参需要用 params
|
||||
|
//POST 传参需要用 data
|
||||
|
|
||||
|
//获取banner列表
|
||||
|
export function tiktokUserImgs() { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}/img/mini/tiktok/tiktokUserImgs`, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
// 近期精选图片列表
|
||||
|
export function imgLists(data) { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}/img/mini/tiktok/imgLists`, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
//用户详情页-根据搜索码查询用户图片列表
|
||||
|
export function tiktokUserDetails(data) { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}/img/mini/tiktok/tiktokUserImgsDetails`, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 用户授权登录
|
||||
|
export function loginTiktok(data) { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}/img/mini/tiktok/loginTiktok`, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,358 @@ |
|||||
|
<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(detailMsg.imgUrl)"> |
||||
|
<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(url) { |
||||
|
this.isDownload = true |
||||
|
this.detailMsg.downloadNum += 1 |
||||
|
uni.showLoading({ |
||||
|
title: '正在保存图片...' |
||||
|
}); |
||||
|
//获取用户的当前设置。获取相册权限 |
||||
|
uni.getSetting({ |
||||
|
success: (res) => { |
||||
|
//如果没有相册权限 |
||||
|
if (!res.authSetting["scope.writePhotosAlbum"]) { |
||||
|
//向用户发起授权请求 |
||||
|
tt.authorize({ |
||||
|
scope: "scope.album", |
||||
|
success: () => { |
||||
|
//授权成功保存图片到系统相册 |
||||
|
uni.downloadFile({ |
||||
|
url, |
||||
|
success: (res) => { |
||||
|
console.log('下载路径', res) |
||||
|
if (res.statusCode === 200) { |
||||
|
uni.saveImageToPhotosAlbum({ |
||||
|
//图片路径，不支持网络图片路径 |
||||
|
filePath: res.tempFilePath, |
||||
|
success: (res) => { |
||||
|
console.log( |
||||
|
'success', |
||||
|
res) |
||||
|
|
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
console.log('fail', |
||||
|
res) |
||||
|
return uni |
||||
|
.showToast({ |
||||
|
title: res |
||||
|
.errMsg, |
||||
|
}); |
||||
|
}, |
||||
|
complete: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
if (res.errMsg !== |
||||
|
"saveImageToPhotosAlbum:ok" |
||||
|
) { |
||||
|
return uni |
||||
|
.showToast({ |
||||
|
title: "下载失败！", |
||||
|
}); |
||||
|
} else { |
||||
|
return uni |
||||
|
.showToast({ |
||||
|
title: "下载成功！", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: "下载失败！", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//授权失败 |
||||
|
fail: () => { |
||||
|
uni.hideLoading(); |
||||
|
uni.showModal({ |
||||
|
title: "您已拒绝获取相册权限", |
||||
|
content: "是否进入权限管理，调整授权？", |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
||||
|
uni.openSetting({ |
||||
|
success: ( |
||||
|
res) => { |
||||
|
console |
||||
|
.log( |
||||
|
res |
||||
|
.authSetting |
||||
|
); |
||||
|
}, |
||||
|
}); |
||||
|
} else if (res.cancel) { |
||||
|
return uni.showToast({ |
||||
|
title: "已取消！", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
//如果已有相册权限，直接保存图片到系统相册 |
||||
|
uni.saveImageToPhotosAlbum({ |
||||
|
filePath: url, |
||||
|
success: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
return uni.showToast({ |
||||
|
title: "保存成功！", |
||||
|
}); |
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
console.log(res.errMsg); |
||||
|
return uni.showToast({ |
||||
|
title: res.errMsg, |
||||
|
}); |
||||
|
}, |
||||
|
//无论成功失败都走的回调 |
||||
|
complete: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: (res) => {}, |
||||
|
}); |
||||
|
}, |
||||
|
// 分享 |
||||
|
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> |
||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<view class="userDetail"> |
||||
|
<view class="avatar-box"> |
||||
|
<view class="avatar-top"> |
||||
|
<view class="avatar-left-box"> |
||||
|
<image :src="userMsg.img" mode=""></image> |
||||
|
<text>{{userMsg.username}}</text> |
||||
|
</view> |
||||
|
<view class="avatar-right-box"> |
||||
|
<image src="../../static/img/share.svg" mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="avatar-box-text"> |
||||
|
个性签名 |
||||
|
</view> |
||||
|
<view class="avatar-box-tag"> |
||||
|
<view class="avatar-box-tag-left"> |
||||
|
<view class="tag-left-box"> |
||||
|
<text>112</text> |
||||
|
<text>作品</text> |
||||
|
</view> |
||||
|
<view class="tag-left-box"> |
||||
|
<text>112</text> |
||||
|
<text>收藏</text> |
||||
|
</view> |
||||
|
<view class="tag-left-box"> |
||||
|
<text>112</text> |
||||
|
<text>喜欢</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="avatar-box-tag-right"> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="middle"> |
||||
|
<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text" |
||||
|
activeColor="#11A8FD"></uni-segmented-control> |
||||
|
</view> |
||||
|
<view class="bottom"> |
||||
|
<image :src="item.imgUrl" mode="" v-for="(item,index) in userMsg.imgList" :key="index" |
||||
|
:style="'width:'+imgWidth+';height:'+imgHeight" @click="targetDetail(item)"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
tiktokUserDetails |
||||
|
} from '@/api/creator.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userMsg: {}, |
||||
|
current: 0, |
||||
|
arrList: ['背景图', '头像', '表情包'], |
||||
|
imgWidth: 0, // 图片宽 |
||||
|
imgHeight: 0, // 图片高 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
uni.getSystemInfo({ |
||||
|
success: res => { |
||||
|
console.log(res) |
||||
|
this.imgWidth = res.windowWidth - 60 + 'rpx' |
||||
|
this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx' |
||||
|
} |
||||
|
}) |
||||
|
uni.getStorage({ |
||||
|
key: 'userDetail', |
||||
|
success: res => { |
||||
|
console.log('getStorage', res) |
||||
|
this.userMsg = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
onClickItem(e) { |
||||
|
console.log('点击', e) |
||||
|
}, |
||||
|
// 前往详情页 |
||||
|
targetDetail(item) { |
||||
|
console.log('跳转', item) |
||||
|
if (item.id) { |
||||
|
uni.setStorage({ |
||||
|
key: 'detailId', |
||||
|
data: item.id, |
||||
|
success() { |
||||
|
console.log(111111) |
||||
|
uni.redirectTo({ |
||||
|
url: './imgDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.userDetail { |
||||
|
.avatar-box { |
||||
|
padding: 20rpx 20rpx; |
||||
|
background: #11A8FD; |
||||
|
|
||||
|
.avatar-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 120rpx; |
||||
|
|
||||
|
.avatar-left-box { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 80rpx; |
||||
|
} |
||||
|
|
||||
|
text { |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.avatar-right-box { |
||||
|
image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.avatar-box-text { |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.avatar-box-tag { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 24rpx; |
||||
|
|
||||
|
.avatar-box-tag-left { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
|
||||
|
.tag-left-box { |
||||
|
width: 120rpx; |
||||
|
|
||||
|
text { |
||||
|
display: block; |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
text:last-child { |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.middle { |
||||
|
.segmented-control { |
||||
|
border-radius: 8rpx 8rpx 0 0; |
||||
|
background-color: rgba(17, 168, 253, 0.1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
image { |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<template> |
||||
|
<view class="choiceness"> |
||||
|
<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" |
||||
|
@confirm="search" /> |
||||
|
<view class="choiceness-list"> |
||||
|
<view class="imgList1"> |
||||
|
<view class="first-box" :style="'width:'+imgWidth"> |
||||
|
热门作品 |
||||
|
</view> |
||||
|
<image v-for="(item,index) in imgList1" :key='index' class="img-box" |
||||
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)" |
||||
|
mode=""></image> |
||||
|
</view> |
||||
|
<view class="imgList2"> |
||||
|
<image v-for="(item,index) in imgList2" :key='index' class="img-box" |
||||
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
imgLists |
||||
|
} from '@/api/index.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
imgList1: [], //图片列表 |
||||
|
imgList2: [], //图片列表 |
||||
|
imgWidth: 0, // 图片宽 |
||||
|
imgHeight: 0, // 图片高 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
uni.getSystemInfo({ |
||||
|
success: res => { |
||||
|
console.log(res) |
||||
|
this.imgWidth = res.windowWidth - 60 + 'rpx' |
||||
|
this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx' |
||||
|
this.getImgList() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 图片列表分类实现瀑布流 |
||||
|
async getImgList() { |
||||
|
const res = await imgLists() |
||||
|
if (res.data.code === 200) { |
||||
|
for (let i = 0; i < res.data.rows.length; i++) { |
||||
|
if (i % 2 == 0) { |
||||
|
this.imgList2.push(res.data.rows[i]) |
||||
|
} else { |
||||
|
this.imgList1.push(res.data.rows[i]) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 前往详情页 |
||||
|
targetDetail(item) { |
||||
|
console.log('跳转', item) |
||||
|
if (item.id) { |
||||
|
uni.setStorage({ |
||||
|
key: 'detailId', |
||||
|
data: item.id, |
||||
|
success() { |
||||
|
console.log(111111) |
||||
|
uni.redirectTo({ |
||||
|
url: '../creator/imgDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// onUnload() { |
||||
|
// uni.switchTab({ |
||||
|
// url: '/pages/index/index' |
||||
|
// }) |
||||
|
// }, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.choiceness { |
||||
|
padding-right: 40rpx; |
||||
|
padding-top: 40rpx; |
||||
|
|
||||
|
.uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.choiceness-list { |
||||
|
display: flex; |
||||
|
|
||||
|
.first-box { |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 16px; |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
color: #fff; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
height: 60rpx; |
||||
|
background-color: #11A8FD; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,45 +1,245 @@ |
|||||
<template> |
<template> |
||||
<view class="container"> |
<view class="container"> |
||||
|
<view class="top"> |
||||
<!-- <view> |
<image class="back-img" src="../../static/img/start.gif" mode=""></image> |
||||
<cover-image class="img" src="/static/logo.png"></cover-image> |
<view class="top-bottom"> |
||||
</view> --> |
</view> |
||||
|
<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" |
||||
<view> |
@confirm="search" /> |
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" |
<text>大家都在搜</text> |
||||
cancelButton="none" @confirm="search" /> |
<view class="user-list"> |
||||
|
<view class="user-list-box" v-for="(item,index) in userList" :key='item.id' |
||||
|
@click="goUserDetail(item.scanCode)"> |
||||
|
<image :src="item.img" mode=""></image> |
||||
|
<text>{{item.tiktokNumber}}</text> |
||||
|
</view> |
||||
|
<view class="user-list-box" v-for="(item,index) in userList" :key='item.id'> |
||||
|
<image :src="item.img" mode=""></image> |
||||
|
<text>{{item.tiktokNumber}}</text> |
||||
|
</view> |
||||
|
<view class="user-list-box" v-for="(item,index) in userList" :key='item.id'> |
||||
|
<image :src="item.img" mode=""></image> |
||||
|
<text>{{item.tiktokNumber}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
|
<view class="middle"> |
||||
|
<text>近期精选</text> |
||||
|
<image src="../../static/img/slide-top.svg" mode=""></image> |
||||
<view> |
|
||||
|
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { |
||||
|
tiktokUserImgs, |
||||
|
tiktokUserDetails, |
||||
|
loginTiktok |
||||
|
} from '@/api/index.js' |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
userList: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
const userInfo = uni.getStorageSync('userInfo') |
||||
|
if (!userInfo) { |
||||
|
console.log('havent userInfo') |
||||
|
this.getUserInfo() |
||||
|
} else { |
||||
|
console.log('have userInfo') |
||||
|
} |
||||
|
this.getUserList() |
||||
|
}, |
||||
|
onPageScroll(e) { |
||||
|
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
||||
|
console.log('e.scrollTop', e.scrollTop) |
||||
|
if (e.scrollTop > 200) { |
||||
|
uni.redirectTo({ |
||||
|
url: './choiceness' |
||||
|
}) |
||||
} |
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
// 搜索 |
||||
search(res) { |
search(res) { |
||||
uni.showToast({ |
if (res.value) { |
||||
title: '搜索：' + res.value, |
console.log('search', res.value) |
||||
icon: 'none' |
this.goUserDetail(res.value) |
||||
}) |
} else { |
||||
|
uni.showToast({ |
||||
|
title: '请输入艺术家代号', |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
}, |
}, |
||||
} |
// 获取用户信息 |
||||
|
getUserInfo() { |
||||
|
tt.login({ |
||||
|
force: true, |
||||
|
success: res => { |
||||
|
tt.getUserInfo({ |
||||
|
withCredentials: true, |
||||
|
success: userInfo => { |
||||
|
const params = { |
||||
|
code: res.code, |
||||
|
encryptedData: userInfo.encryptedData, |
||||
|
iv: userInfo.iv |
||||
|
} |
||||
|
// 用户授权登录 |
||||
|
loginTiktok(params).then(res => { |
||||
|
if (res.data.code === 200) { |
||||
|
uni.setStorage({ |
||||
|
key: 'userInfo', |
||||
|
data: res.data.data.userInfo, |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}).catch(res => {}) |
||||
|
console.log(`getUserInfo 调用成功`, userInfo); |
||||
|
}, |
||||
|
fail(userInfo) { |
||||
|
console.log(`getUserInfo 调用失败`); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
fail(res) { |
||||
|
console.log(`login 调用失败`); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
// 获取推荐用户列表 |
||||
|
async getUserList() { |
||||
|
const res = await tiktokUserImgs() |
||||
|
if (res.data.code === 200) { |
||||
|
this.userList = res.data.data |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
console.log('getUserList', res) |
||||
|
}, |
||||
|
// 前往用户空间 |
||||
|
async goUserDetail(scanCode) { |
||||
|
if (scanCode) { |
||||
|
const res = await tiktokUserDetails({ |
||||
|
scanCode |
||||
|
}) |
||||
|
console.log('tiktokUserDetails', res) |
||||
|
if (res.data.code === 200) { |
||||
|
uni.setStorage({ |
||||
|
key: 'userDetail', |
||||
|
data: res.data.data, |
||||
|
success() { |
||||
|
uni.redirectTo({ |
||||
|
url: '../creator/userDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '搜索码不能为空', |
||||
|
icon: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 滚动监听 |
||||
|
handleScroll() { |
||||
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop |
||||
|
console.log(scrollTop) |
||||
|
}, |
||||
|
}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="less"> |
||||
.container { |
.container { |
||||
padding: 20px; |
.top { |
||||
font-size: 14px; |
width: 100vw; |
||||
line-height: 24px; |
|
||||
|
image { |
||||
|
width: 100vw; |
||||
|
height: 400rpx; |
||||
|
} |
||||
|
|
||||
|
.uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
margin: 0 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
>text { |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
padding-top: 40rpx; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.user-list { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.user-list-box { |
||||
|
width: 140rpx; |
||||
|
padding: 20rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
image { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 100rpx; |
||||
|
} |
||||
|
|
||||
|
text { |
||||
|
font-size: 24rpx; |
||||
|
color: #1E1E1E; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.middle { |
||||
|
text-align: center; |
||||
|
height: calc(100vh - 248rpx); |
||||
|
padding-top: 40rpx; |
||||
|
|
||||
|
text { |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
<view class="content data-v-5830ad60"><view class="data-v-5830ad60"><swiper class="swiper-box data-v-5830ad60" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="{{indicatorDots}}"><block tt:for="{{banner}}" tt:for-item="item" tt:for-index="index" tt:key="index"><swiper-item class="data-v-5830ad60"><image class="img data-v-5830ad60" src="{{item.bannerImg}}" data-event-opts="{{[['tap',[['linkTo',['$0'],[[['banner','',index]]]]]]]}}" bindtap="__e"></image></swiper-item></block></swiper></view><view class="list data-v-5830ad60"><block tt:for="{{userImgList}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view class="list-item data-v-5830ad60"><view class="fb-d-r fb-j-sb fb-a-c data-v-5830ad60"><view class="fb-d-r fb-a-c head-box data-v-5830ad60"><image class="head data-v-5830ad60" src="{{item.img}}"></image><view class="ml-10 data-v-5830ad60"><view class="data-v-5830ad60"><text class="data-v-5830ad60">{{item.username}}</text></view><view class="fb-d-r fb-j-sb data-v-5830ad60"><view class="data-v-5830ad60"><text class="data-v-5830ad60">图标</text><text class="data-v-5830ad60">11111</text></view><view class="data-v-5830ad60"><text class="data-v-5830ad60">图标</text><text class="data-v-5830ad60">11111</text></view><view class="data-v-5830ad60"><text class="data-v-5830ad60">图标</text><text class="data-v-5830ad60">11111</text></view></view></view></view><view class="data-v-5830ad60">jiantou</view></view><view class="fb-d-r fb-j-sb img-box data-v-5830ad60"><block tt:for="{{item.imgList}}" tt:for-item="pic" tt:for-index="param" tt:key="param"><view class="data-v-5830ad60"><image class="threeImg data-v-5830ad60" src="{{pic.imgUrl}}" data-event-opts="{{[['tap',[['linkTo',['$0'],[[['userImgList','',index]]]]]]]}}" bindtap="__e"></image></view></block></view></view></block></view></view> |
<view class="creator data-v-5830ad60"><view class="data-v-5830ad60"><swiper class="swiper-box data-v-5830ad60" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="{{indicatorDots}}"><block tt:for="{{banner}}" tt:for-item="item" tt:for-index="index" tt:key="index"><swiper-item class="data-v-5830ad60"><image class="img data-v-5830ad60" src="{{item.bannerImg}}" data-event-opts="{{[['tap',[['linkTo',['$0'],[[['banner','',index]]]]]]]}}" bindtap="__e"></image></swiper-item></block></swiper></view><view class="list data-v-5830ad60"><block tt:for="{{userImgList}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view class="list-item data-v-5830ad60"><view class="fb-d-r fb-j-sb fb-a-c list-top data-v-5830ad60"><view data-event-opts="{{[['tap',[['toUserDetail',['$0'],[[['userImgList','',index]]]]]]]}}" class="fb-d-r fb-a-c head-box data-v-5830ad60" bindtap="__e"><image class="head data-v-5830ad60" src="{{item.img}}"></image><view class="ml-10 data-v-5830ad60"><view class="data-v-5830ad60"><text class="data-v-5830ad60">{{item.username}}</text></view><view class="fb-d-r fb-j-sb data-v-5830ad60"><view class="imgLength-box data-v-5830ad60"><image class="img-icon data-v-5830ad60" src="../../static/imgLength.png" mode></image><text class="data-v-5830ad60">11111</text></view><view class="imgLength-box data-v-5830ad60"><image class="img-icon data-v-5830ad60" src="../../static/collectLength.png" mode></image><text class="data-v-5830ad60">11111</text></view><view class="imgLength-box data-v-5830ad60"><image class="img-icon data-v-5830ad60" src="../../static/likeLength.png" mode></image><text class="data-v-5830ad60">11111</text></view></view></view></view><image class="jiantou data-v-5830ad60" src="../../static/jiantou-right.png" mode></image></view><view class="fb-d-r fb-j-sb img-box data-v-5830ad60"><block tt:for="{{item.imgList}}" tt:for-item="pic" tt:for-index="param" tt:key="param"><view class="data-v-5830ad60"><image class="threeImg data-v-5830ad60" src="{{pic.imgUrl}}" data-event-opts="{{[['tap',[['linkTo',['$0'],[[['userImgList','',index],['imgList','',param]]]]]]]}}" bindtap="__e"></image></view></block></view></view></block></view></view> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": true, |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<view class="imgDetail"><image class="main-img" src="{{detailMsg.imgUrl}}" mode></image><view class="toolbar"><view class="toolbar-box"><block tt:if="{{detailMsg.isHot==='0'}}"><image src="../../static/hot-not.png" mode></image></block><block tt:else><image src="../../static/hot-yes.png" mode></image></block></view><view data-event-opts="{{[['tap',[['download',['$0'],['detailMsg.imgUrl']]]]]}}" class="toolbar-box" bindtap="__e"><block tt:if="{{isDownload}}"><image src="../../static/download-select.png" mode></image></block><block tt:else><image src="../../static/download.png" mode></image></block><text>{{"下载"+detailMsg.downloadNum}}</text></view><view data-event-opts="{{[['tap',[['likeCollect',['isLike']]]]]}}" class="toolbar-box" bindtap="__e"><block tt:if="{{isLike}}"><image src="../../static/like-select.png" mode></image></block><block tt:else><image src="../../static/like.png" mode></image></block><text>{{"喜欢"+detailMsg.greatNum}}</text></view><view data-event-opts="{{[['tap',[['likeCollect',['isCollect']]]]]}}" class="toolbar-box" bindtap="__e"><block tt:if="{{isCollect}}"><image src="../../static/collect-select.png" mode></image></block><block tt:else><image src="../../static/collect.png" mode></image></block><text>{{"收藏"+detailMsg.collectionNum}}</text></view><view data-event-opts="{{[['tap',[['share',['$event']]]]]}}" class="toolbar-box" bindtap="__e"><image src="../../static/share.png" mode></image></view></view></view> |
||||
@ -0,0 +1,41 @@ |
|||||
|
.imgDetail { |
||||
|
height: 100vh; |
||||
|
width: 100vw; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
.imgDetail .main-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.imgDetail .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; |
||||
|
} |
||||
|
.imgDetail .toolbar .toolbar-box { |
||||
|
height: 60px; |
||||
|
text-align: center; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
.imgDetail .toolbar .toolbar-box text { |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
line-height: 60rpx; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.imgDetail .toolbar .toolbar-box image { |
||||
|
width: 50rpx; |
||||
|
height: 50rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.imgDetail .toolbar .toolbar-box:first-child { |
||||
|
line-height: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": true, |
||||
|
"usingComponents": { |
||||
|
"uni-segmented-control": "/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<view class="userDetail"><view class="avatar-box"><view class="avatar-top"><view class="avatar-left-box"><image src="{{userMsg.img}}" mode></image><text>{{userMsg.username}}</text></view><view class="avatar-right-box"><image src="../../static/img/share.svg" mode></image></view></view><view class="avatar-box-text">个性签名</view><view class="avatar-box-tag"><view class="avatar-box-tag-left"><view class="tag-left-box"><text>112</text><text>作品</text></view><view class="tag-left-box"><text>112</text><text>收藏</text></view><view class="tag-left-box"><text>112</text><text>喜欢</text></view></view><view class="avatar-box-tag-right"></view></view></view><view class="middle"><uni-segmented-control vue-id="b78c2d26-1" current="{{current}}" values="{{arrList}}" styleType="text" activeColor="#11A8FD" data-event-opts="{{[['^clickItem',[['onClickItem']]]]}}" bind:clickItem="__e" bind:__l="__l"></uni-segmented-control></view><view class="bottom"><block tt:for="{{userMsg.imgList}}" tt:for-item="item" tt:for-index="index" tt:key="index"><image style="{{('width:'+imgWidth+';height:'+imgHeight)}}" src="{{item.imgUrl}}" mode data-event-opts="{{[['tap',[['targetDetail',['$0'],[[['userMsg.imgList','',index]]]]]]]}}" bindtap="__e"></image></block></view></view> |
||||
@ -0,0 +1,71 @@ |
|||||
|
.userDetail .avatar-box { |
||||
|
padding: 20rpx 20rpx; |
||||
|
background: #11A8FD; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 120rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-top .avatar-left-box { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-top .avatar-left-box image { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 80rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-top .avatar-left-box text { |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-top .avatar-right-box image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-text { |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-tag { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 24rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box { |
||||
|
width: 120rpx; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box text { |
||||
|
display: block; |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.userDetail .avatar-box .avatar-box-tag .avatar-box-tag-left .tag-left-box text:last-child { |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.userDetail .middle .segmented-control { |
||||
|
border-radius: 8rpx 8rpx 0 0; |
||||
|
background-color: rgba(17, 168, 253, 0.1); |
||||
|
} |
||||
|
.userDetail .bottom { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.userDetail .bottom image { |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "近期精选", |
||||
|
"enablePullDownRefresh": true, |
||||
|
"usingComponents": { |
||||
|
"uni-search-bar": "/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<view class="choiceness"><uni-search-bar class="uni-mt-10" vue-id="d8b33852-1" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar><view class="choiceness-list"><view class="imgList1"><view class="first-box" style="{{('width:'+imgWidth)}}">热门作品</view><block tt:for="{{imgList1}}" tt:for-item="item" tt:for-index="index" tt:key="index"><image class="img-box" style="{{('width:'+imgWidth+';height:'+imgHeight)}}" src="{{item.imgUrl}}" mode data-event-opts="{{[['tap',[['targetDetail',['$0'],[[['imgList1','',index]]]]]]]}}" bindtap="__e"></image></block></view><view class="imgList2"><block tt:for="{{imgList2}}" tt:for-item="item" tt:for-index="index" tt:key="index"><image class="img-box" style="{{('width:'+imgWidth+';height:'+imgHeight)}}" src="{{item.imgUrl}}" mode></image></block></view></view></view> |
||||
@ -0,0 +1,35 @@ |
|||||
|
.choiceness { |
||||
|
padding-right: 40rpx; |
||||
|
padding-top: 40rpx; |
||||
|
} |
||||
|
.choiceness .uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.choiceness .uni-searchbar .uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
.choiceness .choiceness-list { |
||||
|
display: flex; |
||||
|
} |
||||
|
.choiceness .choiceness-list .first-box { |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 16px; |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
color: #fff; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
height: 60rpx; |
||||
|
background-color: #11A8FD; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.choiceness .choiceness-list image { |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
<view class="container"><view><uni-search-bar class="uni-mt-10" vue-id="8dda190e-1" radius="5" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar></view><view></view></view> |
<view class="container"><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" vue-id="8dda190e-1" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none" data-event-opts="{{[['^confirm',[['search']]]]}}" bind:confirm="__e" bind:__l="__l"></uni-search-bar><text>大家都在搜</text><view class="user-list"><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view data-event-opts="{{[['tap',[['goUserDetail',['$0'],[[['userList','id',item.id,'scanCode']]]]]]]}}" class="user-list-box" bindtap="__e"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block><block tt:for="{{userList}}" tt:for-item="item" tt:for-index="index" tt:key="id"><view class="user-list-box"><image src="{{item.img}}" mode></image><text>{{item.tiktokNumber}}</text></view></block></view></view><view class="middle"><text>近期精选</text><image src="../../static/img/slide-top.svg" mode></image></view></view> |
||||
@ -1,7 +1,61 @@ |
|||||
|
.container .top { |
||||
.container { |
width: 100vw; |
||||
padding: 20px; |
} |
||||
font-size: 14px; |
.container .top image { |
||||
line-height: 24px; |
width: 100vw; |
||||
|
height: 400rpx; |
||||
|
} |
||||
|
.container .top .uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
margin: 0 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.container .top .uni-searchbar .uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
.container .top > text { |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
padding-top: 40rpx; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
.container .top .user-list { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
.container .top .user-list .user-list-box { |
||||
|
width: 140rpx; |
||||
|
padding: 20rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.container .top .user-list .user-list-box image { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 100rpx; |
||||
|
} |
||||
|
.container .top .user-list .user-list-box text { |
||||
|
font-size: 24rpx; |
||||
|
color: #1E1E1E; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.container .middle { |
||||
|
text-align: center; |
||||
|
height: calc(100vh - 248rpx); |
||||
|
padding-top: 40rpx; |
||||
|
} |
||||
|
.container .middle text { |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
display: block; |
||||
|
} |
||||
|
.container .middle image { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
} |
} |
||||
|
|
||||
|
|||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
<view><text>这是我的收藏</text></view> |
<view><text>这是我的收藏</text><block tt:for="{{myCollection}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view><image src="{{item.imgUrl}}"></image></view></block></view> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,23 +1,8 @@ |
|||||
{ |
{ |
||||
"setting": { |
"setting": { |
||||
"urlCheck": false |
"urlCheck": false, |
||||
}, |
"es6": true |
||||
"appid": "ttc408b2b55b364f6601", |
}, |
||||
"projectname": "app", |
"appid": "ttc408b2b55b364f6601", |
||||
"condition": { |
"projectname": "app" |
||||
"miniprogram": { |
} |
||||
"list": [ |
|
||||
{ |
|
||||
"id": 1651737979264, |
|
||||
"name": "1", |
|
||||
"pathName": "pages/creator/creator", |
|
||||
"query": "", |
|
||||
"scene": "990001", |
|
||||
"launchFrom": "scan", |
|
||||
"location": "qr_code" |
|
||||
} |
|
||||
], |
|
||||
"current": 1651737979264 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"usingComponents": {}, |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<view class="{{(('segmented-control')+' '+(styleType==='text'?'segmented-control--text':'segmented-control--button'))}}" style="{{'border-color:'+(styleType==='text'?'':activeColor)+';'}}"><block tt:for="{{values}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view data-event-opts="{{[['tap',[['_onClick',[index]]]]]}}" class="{{((((('segmented-control__item')+' '+(styleType==='text'?'':'segmented-control__item--button'))+' '+(index===currentIndex&&styleType==='button'?'segmented-control__item--button--active':''))+' '+(index===0&&styleType==='button'?'segmented-control__item--button--first':''))+' '+(index===values.length-1&&styleType==='button'?'segmented-control__item--button--last':''))}}" style="{{'background-color:'+(index===currentIndex&&styleType==='button'?activeColor:'')+';'+('border-color:'+(index===currentIndex&&styleType==='text'||styleType==='button'?activeColor:'transparent')+';')}}" bindtap="__e"><view><text class="{{(('segmented-control__text')+' '+(styleType==='text'&&index===currentIndex?'segmented-control__item--text':''))}}" style="{{'color:'+(index===currentIndex?styleType==='text'?activeColor:'#fff':styleType==='text'?'#000':activeColor)+';'}}">{{item}}</text></view></view></block></view> |
||||
@ -0,0 +1,45 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
/* 水平间距 */ |
||||
|
/* 水平间距 */ |
||||
|
.segmented-control { |
||||
|
display: flex; |
||||
|
box-sizing: border-box; |
||||
|
flex-direction: row; |
||||
|
height: 36px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.segmented-control__item { |
||||
|
display: inline-flex; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.segmented-control__item--button { |
||||
|
border-style: solid; |
||||
|
border-top-width: 1px; |
||||
|
border-bottom-width: 1px; |
||||
|
border-right-width: 1px; |
||||
|
border-left-width: 0; |
||||
|
} |
||||
|
.segmented-control__item--button--first { |
||||
|
border-left-width: 1px; |
||||
|
border-top-left-radius: 5px; |
||||
|
border-bottom-left-radius: 5px; |
||||
|
} |
||||
|
.segmented-control__item--button--last { |
||||
|
border-top-right-radius: 5px; |
||||
|
border-bottom-right-radius: 5px; |
||||
|
} |
||||
|
.segmented-control__item--text { |
||||
|
border-bottom-style: solid; |
||||
|
border-bottom-width: 2px; |
||||
|
padding: 6px 0; |
||||
|
} |
||||
|
.segmented-control__text { |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
Loading…
Reference in new issue