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 .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; |
||||
} |
} |
||||
|
|
||||
|
|||||
@ -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": { |
"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: 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 |