You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
558 lines
12 KiB
558 lines
12 KiB
<template>
|
|
<view class="container">
|
|
<view class="banner">
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item style="background-color: aqua;">
|
|
<view class="swiper-item">A</view>
|
|
</swiper-item>
|
|
<swiper-item style="background-color: indianred;">
|
|
<view class="swiper-item">B</view>
|
|
</swiper-item>
|
|
<swiper-item style="background-color: pink;">
|
|
<view class="swiper-item">C</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="headImg" @click="showDrawer('showLeft')">
|
|
头像
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="top">
|
|
<view :class="isLeftActive ? 'active_txt' : ''" @click="checkBtn(1)">
|
|
最新
|
|
</view>
|
|
<view class="top_middle">
|
|
|
|
|
</view>
|
|
<view :class="isRightActive ? 'active_txt' : ''" @click="checkBtn(2)">
|
|
最热
|
|
</view>
|
|
</view>
|
|
<view class="middle_box">
|
|
<view class="middle" v-for="(item,index) in hotCreatorList" :key="index">
|
|
<view class="middle_top">
|
|
<img :src="item.img" class="avatar" alt="">
|
|
<view class="middle_top_center">
|
|
<view class="name">{{item.scanCode}}</view>
|
|
<view class="level">1级艺术家</view>
|
|
</view>
|
|
<view class="middle_top_right" @click="goCreatorDetail(item.scanCode)" alt="">...</view>
|
|
</view>
|
|
<view class="middle_center">
|
|
分享一下今天的创作
|
|
</view>
|
|
<view class="middle_bottom">
|
|
<img :src="item.img" alt="">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="example-body">
|
|
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
|
<view class="drawer_content">
|
|
<view class="drawer_content_top">
|
|
<image :src="userInfo.img" mode=""></image>
|
|
<view class="drawer_content_main">
|
|
<view class="userName">
|
|
{{userInfo.username}}
|
|
</view>
|
|
<view class="leave">
|
|
1级艺术家
|
|
</view>
|
|
<view class="progress-box">
|
|
<progress :percent="20" activeColor="#ffd9d9" backgroundColor="#c1c1c1"
|
|
stroke-width="6" />
|
|
<text>20/100</text>
|
|
</view>
|
|
<view class="sign">
|
|
距离升级还差80点灵感值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="drawer_content_menu">
|
|
<view class="menu_list" v-for="(item,index) in menuList" :key="index" @click="targetPage(item)">
|
|
<view class="sign_img">
|
|
图标
|
|
</view>
|
|
<view class="menu_title">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="close" @click="closeDrawer('showLeft')">
|
|
关闭
|
|
</view>
|
|
</uni-drawer>
|
|
</view>
|
|
<!-- <view v-if="!showChoiceness">
|
|
<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" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none"
|
|
@confirm="search" />
|
|
<text>热门艺术家</text>
|
|
<view class="user-list">
|
|
<view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
|
|
@click="goCreatorDetail(item.scanCode)">
|
|
<image :src="item.img" mode=""></image>
|
|
<text>{{item.scanCode}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="middle">
|
|
<text>近期精选</text>
|
|
<image src="../../static/img/slide-top.svg" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<Choiceness v-else></Choiceness> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listHotCreator,
|
|
creatorDetails
|
|
} from '@/api/index.js'
|
|
import {loginTiktok} from '@/api/auth.js'
|
|
import Choiceness from './choiceness.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
hotCreatorList: [],
|
|
isTarget: true,
|
|
showChoiceness: false,
|
|
isLeftActive: false,
|
|
isRightActive: false,
|
|
userInfo: {}, // 用户信息
|
|
menuList: [ // 抽屉菜单
|
|
{
|
|
title: '我的好友'
|
|
},
|
|
{
|
|
title: '我的订单'
|
|
},
|
|
{
|
|
title: '我的收藏'
|
|
},
|
|
{
|
|
title: '反馈意见'
|
|
},
|
|
{
|
|
title: '联系客服'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
components: {
|
|
Choiceness,
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.showChoiceness = false
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
created() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
console.log('havent userInfo')
|
|
this.getUserInfo()
|
|
} else {
|
|
console.log('have userInfo')
|
|
}
|
|
this.checkBtn(1)
|
|
},
|
|
onPageScroll(e) {
|
|
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
|
|
|
if (e.scrollTop > 160) {
|
|
this.showChoiceness = true
|
|
// uni.redirectTo({
|
|
// url: '../index/choiceness'
|
|
// })
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开窗口
|
|
showDrawer(e) {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
console.log('havent userInfo')
|
|
this.getUserInfo()
|
|
} else {
|
|
this.userInfo = userInfo
|
|
}
|
|
this.$refs[e].open()
|
|
},
|
|
// 关闭窗口
|
|
closeDrawer(e) {
|
|
this.$refs[e].close()
|
|
},
|
|
// 抽屉状态发生变化触发
|
|
change(e, type) {
|
|
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
|
this[type] = e
|
|
},
|
|
targetPage(item) {
|
|
switch (item.title) {
|
|
case '我的好友':
|
|
console.log('我的好友')
|
|
break;
|
|
case '我的订单':
|
|
console.log('我的订单')
|
|
break;
|
|
case '我的收藏':
|
|
uni.navigateTo({
|
|
url: '../userInfo/myCollection/myCollection'
|
|
})
|
|
break;
|
|
case '反馈意见':
|
|
uni.navigateTo({
|
|
url: '../userInfo/question/question'
|
|
})
|
|
break;
|
|
case '联系客服':
|
|
uni.navigateTo({
|
|
url: '../userInfo/contactUs/contactUs'
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
checkBtn(num) {
|
|
if (num === 1) {
|
|
this.isLeftActive = true
|
|
this.isRightActive = false
|
|
this.getHotCreatorList()
|
|
} else if (num === 2) {
|
|
this.isLeftActive = false
|
|
this.isRightActive = true
|
|
this.getHotCreatorList()
|
|
}
|
|
},
|
|
// 搜索
|
|
search(res) {
|
|
if (res.value) {
|
|
console.log('search', res.value)
|
|
this.goCreatorDetail(res.value)
|
|
} else {
|
|
uni.showToast({
|
|
title: '请输入艺术家代号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
},
|
|
// 获取用户信息
|
|
getUserInfo() {
|
|
uni.login({
|
|
force: true,
|
|
success: res => {
|
|
uni.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,
|
|
})
|
|
uni.setStorage({
|
|
key: 'platform',
|
|
data: res.data.data.platform,
|
|
})
|
|
uni.setStorage({
|
|
key: 'token',
|
|
data: res.data.data.access_token
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(res => {})
|
|
console.log(`getUserInfo 调用成功`, userInfo);
|
|
},
|
|
fail(userInfo) {
|
|
console.log(`getUserInfo 调用失败`);
|
|
},
|
|
});
|
|
},
|
|
fail(res) {
|
|
console.log(`login 调用失败`);
|
|
},
|
|
});
|
|
|
|
},
|
|
// 获取热门艺术家列表
|
|
async getHotCreatorList() {
|
|
const res = await listHotCreator()
|
|
if (res.data.code === 200) {
|
|
this.hotCreatorList = res.data.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
console.log('getHotCreatorList', res)
|
|
},
|
|
// 前往艺术家空间
|
|
async goCreatorDetail(scanCode) {
|
|
if (scanCode) {
|
|
const res = await creatorDetails({
|
|
scanCode
|
|
})
|
|
console.log('creatorDetails', res)
|
|
if (res.data.code === 200) {
|
|
uni.setStorage({
|
|
key: 'creatorDetail',
|
|
data: res.data.data,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: '../creator/creatorDetail'
|
|
})
|
|
}
|
|
})
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '搜索码不能为空',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 滚动监听
|
|
handleScroll() {
|
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
console.log(scrollTop)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.container {
|
|
height: 100vh;
|
|
|
|
.banner {
|
|
height: 80vh;
|
|
position: relative;
|
|
|
|
.swiper {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.headImg {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
left: 40rpx;
|
|
display: inline-block;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
min-height: calc(100vh - 80vh + 40rpx);
|
|
max-height: calc(80vh + 40rpx);
|
|
background-color: white;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
position: relative;
|
|
top: -40rpx;
|
|
padding: 20px 30px;
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
|
|
view {
|
|
font-size: 14px;
|
|
color: #9f9f9f;
|
|
}
|
|
|
|
.active_txt {
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top_middle {
|
|
padding: 0 14rpx;
|
|
}
|
|
}
|
|
|
|
.middle_box {
|
|
overflow-y: auto;
|
|
max-height: calc(80vh - 40px);
|
|
}
|
|
|
|
.middle {
|
|
padding-bottom: 10px;
|
|
|
|
.middle_top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.avatar {
|
|
width: 66px;
|
|
height: 66px;
|
|
border-radius: 66px;
|
|
}
|
|
|
|
.middle_top_center {
|
|
padding-left: 24px;
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
color: black;
|
|
font-weight: bold;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.level {
|
|
font-size: 13px;
|
|
color: #404040;
|
|
}
|
|
}
|
|
|
|
.middle_top_right {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.middle_center {
|
|
color: #404040;
|
|
font-size: 14px;
|
|
padding-left: 90px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.middle_bottom {
|
|
padding-left: 90px;
|
|
|
|
img {
|
|
width: 94px;
|
|
height: 94px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.example-body {
|
|
.uni-drawer__content {
|
|
border-radius: 0 40px 0 0;
|
|
display: flex;
|
|
|
|
.drawer_content {
|
|
flex: 9;
|
|
padding-top: 20rpx;
|
|
padding-left: 20rpx;
|
|
|
|
.drawer_content_top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-bottom: 185rpx;
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 80rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.drawer_content_main {
|
|
.userName {
|
|
font-size: 16px;
|
|
padding-bottom: 6rpx;
|
|
}
|
|
|
|
.leave {
|
|
font-size: 12px;
|
|
color: #404040;
|
|
padding-bottom: 12rpx;
|
|
}
|
|
|
|
.progress-box {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
progress {
|
|
width: 268rpx;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
text {
|
|
font-size: 12px;
|
|
color: #c1c1c1;
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.sign {
|
|
font-size: 12px;
|
|
color: #404040;
|
|
}
|
|
}
|
|
}
|
|
|
|
.drawer_content_menu {
|
|
.menu_list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.sign_img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin: 0 30rpx;
|
|
}
|
|
|
|
.menu_title {
|
|
border-top: 3px solid #d8d8d8;
|
|
font-size: 16px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
.menu_list:last-child {
|
|
.menu_title {
|
|
border-bottom: 3px solid #d8d8d8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.close {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|