gao1021514
4 years ago
@ -0,0 +1,20 @@ |
|||
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 |
|||
}) |
|||
} |
|||
@ -0,0 +1,110 @@ |
|||
<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" 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' |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
// 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> |
|||
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 958 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -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></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; |
|||
} |
|||
|
|||
@ -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 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><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 { |
|||
padding: 20px; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
.container .top { |
|||
width: 100vw; |
|||
} |
|||
.container .top image { |
|||
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; |
|||
} |
|||
|
|||
|
|||
@ -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> |
|||
@ -1,23 +1,8 @@ |
|||
{ |
|||
"setting": { |
|||
"urlCheck": false |
|||
}, |
|||
"appid": "ttc408b2b55b364f6601", |
|||
"projectname": "app", |
|||
"condition": { |
|||
"miniprogram": { |
|||
"list": [ |
|||
{ |
|||
"id": 1651737979264, |
|||
"name": "1", |
|||
"pathName": "pages/creator/creator", |
|||
"query": "", |
|||
"scene": "990001", |
|||
"launchFrom": "scan", |
|||
"location": "qr_code" |
|||
} |
|||
], |
|||
"current": 1651737979264 |
|||
} |
|||
} |
|||
} |
|||
"setting": { |
|||
"urlCheck": false, |
|||
"es6": true |
|||
}, |
|||
"appid": "ttc408b2b55b364f6601", |
|||
"projectname": "app" |
|||
} |
|||
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 958 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |