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.
386 lines
8.7 KiB
386 lines
8.7 KiB
<template>
|
|
<view class="container">
|
|
<view class="top">
|
|
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" >
|
|
<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration" circular>
|
|
<swiper-item v-for="(item, index) in banner" :key="index">
|
|
<view class="swiper-item" :class="'swiper-item' + index">
|
|
<!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
|
|
<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
</view>
|
|
|
|
<view class="middle">
|
|
<view class="middle-div">
|
|
<view class="middle-btn-item" v-for="(val, i) in funcList" :index="i" :key="i">
|
|
<view class="grid-item-box" @click="change(val.url)">
|
|
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
|
<text class="text uni-white">{{ val.title }}</text>
|
|
<image :src="val.icon" class="iconImage" mode="aspectFill" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="foot">
|
|
<view class="foot-title">我的作品</view>
|
|
<view class="foot-div">
|
|
<view class="grid-item-box uni-white" v-for="(params, v) in list" :index="v" :key="v" @click="clickCategoryItem(params.typeId, v)">
|
|
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
|
<view class="icom-div">
|
|
<!-- <image :src="params.icon" class="listIconImage" mode="aspectFill" />-->
|
|
<uni-icons class="listIconImage" custom-prefix="iconfont" :type="params.icon" size="30" :color="iconColor"></uni-icons>
|
|
</view>
|
|
<text class="text uni-white">{{ params.text }}</text>
|
|
<text class="text uni-secondary-color">{{ params.num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryCreatorTypeImgNum,
|
|
listBanner
|
|
} from '@/api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
iconColor: '#0b6375',
|
|
userInfo:{},
|
|
banner:[
|
|
{
|
|
bannerImg: "/static/material.png"
|
|
}
|
|
],
|
|
current: 0,
|
|
mode: 'default',
|
|
dotsStyles: {
|
|
backgroundColor: 'rgba(255, 255, 255, .5)',
|
|
border: '1px rgba(0, 0, 0, .3) solid',
|
|
color: '#fff',
|
|
selectedBackgroundColor: 'rgba(11, 99, 117, .9)',
|
|
selectedBorder: '1px rgba(0, 0, 0, .9) solid',
|
|
bottom: 50
|
|
},
|
|
swiperDotIndex: 0,
|
|
autoplay: true,
|
|
interval: 5000,
|
|
duration: 500,
|
|
pageUrl:'',
|
|
funcList: [{
|
|
title: '素材管理',
|
|
url: '/pages/index/material/material',
|
|
icon: '/static/material.png'
|
|
}, {
|
|
title: '上传素材',
|
|
url: '/pages/index/upload/upload',
|
|
icon: '/static/upload.png'
|
|
}],
|
|
list: [{
|
|
typeId: 1,
|
|
text: '头像',
|
|
num: '0',
|
|
icon: 'icon-touxiang'
|
|
},
|
|
{
|
|
typeId: 2,
|
|
text: 'Gif动图',
|
|
num: '0',
|
|
icon: 'icon-GIF'
|
|
},
|
|
{
|
|
typeId: 3,
|
|
text: '手机壁纸',
|
|
num: '0',
|
|
icon: 'icon-shouji'
|
|
},
|
|
{
|
|
typeId: 4,
|
|
text: '背景图',
|
|
num: '0',
|
|
icon: 'icon-pengyouquan'
|
|
},
|
|
{
|
|
typeId: 5,
|
|
text: '表情包',
|
|
num: '0',
|
|
icon: 'icon-xiaolian'
|
|
},
|
|
{
|
|
typeId: 6,
|
|
text: 'iwatch',
|
|
num: '0',
|
|
icon: 'icon-watch'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
created(){
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
uni.showModal({
|
|
content: '艺术家账户过期,请重新登录！',
|
|
showCancel: false,
|
|
success() {
|
|
//没有缓存则跳转登录页面
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.userInfo = userInfo;
|
|
this.queryCreatorTypeImgNum();
|
|
this.getBanner();
|
|
}
|
|
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
onShow(){
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (userInfo) {
|
|
this.queryCreatorTypeImgNum();
|
|
this.getBanner();
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (userInfo) {
|
|
this.queryCreatorTypeImgNum();
|
|
this.getBanner();
|
|
}
|
|
},
|
|
methods: {
|
|
changeSwiper(e){
|
|
this.current = e.detail.current;
|
|
},
|
|
change(e) {
|
|
// this.pageUrl = this.funcList[e.detail.index].url
|
|
/** 跳转指定页面*/
|
|
uni.navigateTo({
|
|
url: e
|
|
// url: this.pageUrl
|
|
});
|
|
},
|
|
clickCategoryItem(id, index) {
|
|
/** 跳转指定页面*/
|
|
uni.navigateTo({
|
|
url: `/pages/index/material/material?categoryId=${id}&categoryIndex=${index}`,
|
|
});
|
|
},
|
|
clickItem(e) {
|
|
this.swiperDotIndex = e
|
|
},
|
|
// 跳转banner详情页
|
|
linkTo(item) {
|
|
/*if (item.id) {
|
|
uni.navigateTo({
|
|
url: '../index/banner'
|
|
});
|
|
}*/
|
|
},
|
|
|
|
// 获取banner列表
|
|
async getBanner() {
|
|
let that = this;
|
|
const res = await listBanner()
|
|
if (res.data.code === 200) {
|
|
that.banner = res.data.data
|
|
console.log('banner',that.banner)
|
|
} else {
|
|
uni.showModal({
|
|
content: 'banner加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
// 查询艺术家图片分类数量
|
|
async queryCreatorTypeImgNum() {
|
|
let that = this;
|
|
const res = await queryCreatorTypeImgNum(that.userInfo.id)
|
|
// console.log('res',res)
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data;
|
|
that.list[0] = {...that.list[0], num: data.headerInfo.headNum, typeId: data.headerInfo.typeId}
|
|
that.list[1] = {...that.list[1], num: data.gifInfo.gifNum, typeId: data.gifInfo.typeId}
|
|
that.list[2] = {...that.list[2], num: data.backInfo.backNum, typeId: data.backInfo.typeId}
|
|
that.list[3] = {...that.list[3], num: data.friendInfo.friendNum, typeId: data.friendInfo.typeId}
|
|
that.list[4] = {...that.list[4], num: data.emoInfo.emoNum, typeId: data.emoInfo.typeId}
|
|
that.list[5] = {...that.list[5], num: data.watchInfo.watchNum, typeId: data.watchInfo.typeId}
|
|
//console.log('list',that.list)
|
|
} else {
|
|
uni.showModal({
|
|
content: '图片分页数量加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container{
|
|
font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
|
|
}
|
|
.img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.grid-item-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swiper-box {
|
|
height: 50vh;
|
|
}
|
|
|
|
.swiper-item {
|
|
background-color: rgba(255, 255, 255, .3);
|
|
}
|
|
|
|
|
|
/* #ifndef APP-NVUE */
|
|
::v-deep .image img {
|
|
-webkit-user-drag: none;
|
|
-khtml-user-drag: none;
|
|
-moz-user-drag: none;
|
|
-o-user-drag: none;
|
|
// user-drag: none;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
@media screen and (min-width: 375rpx) {
|
|
.uni-swiper-dot-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
// margin: 0 auto;
|
|
// margin-top: 8rpx;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
background: $uni-bg-color;
|
|
border-top: 2rpx solid $uni-bg-color;
|
|
position: relative;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 50vh;
|
|
}
|
|
|
|
.middle {
|
|
position: absolute;
|
|
top: calc(50vh - 60rpx);
|
|
left: 0;
|
|
right: 0;
|
|
|
|
.middle-div {
|
|
width: 670rpx;
|
|
min-height: calc(20vh - 30rpx);
|
|
margin: 0 auto;
|
|
background: $uni-bg-base-color;
|
|
border-radius: 20rpx;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.middle-btn-item {
|
|
width: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
.grid-item-box {
|
|
height: 100%;
|
|
|
|
.text {
|
|
font-size: 36rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.iconImage {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.foot {
|
|
width: 670rpx;
|
|
margin: 0 auto;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
min-height: calc(30vh - 30rpx);
|
|
margin-top: calc(20vh - 40rpx);
|
|
|
|
.foot-title {
|
|
height: 28rpx;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
color: $uni-white;
|
|
background: $uni-primary;
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
|
|
.foot-div {
|
|
height: 100%;
|
|
padding-top: 40rpx;
|
|
background: #1d2734;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.grid-item-box {
|
|
width: 170rpx;
|
|
height: 50%;
|
|
margin-bottom: 40rpx;
|
|
|
|
.icom-div {
|
|
//background: #0a6375;
|
|
border-radius: 24rpx;
|
|
|
|
.listIconImage {
|
|
height: 80rpx;
|
|
width: 80rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|