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.
373 lines
9.3 KiB
373 lines
9.3 KiB
<template>
|
|
<view class="choiceness">
|
|
<view class="status-choice-comp">
|
|
<view class="status-item uni-secondary-color" v-for="(val, i) in statusList"
|
|
:index="i" :key="i"
|
|
:class="statusCurrent === i ? 'status-active' : ''"
|
|
@click="onClickStatus({currentIndex: i})"
|
|
>
|
|
<view class="status-text">{{val}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="type-choice-comp">
|
|
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList"
|
|
:index="i" :key="i"
|
|
:class="typeCurrent === i ? 'type-active' : ''"
|
|
@click="onClickType({currentIndex: i})"
|
|
>
|
|
<view class="type-text">{{val}}</view>
|
|
</view>
|
|
</view>
|
|
<!--
|
|
<uni-segmented-control :current="statusCurrent" :values="statusList" :style-type="styleType"
|
|
:active-color="activeColor" @clickItem="onClickStatus" />
|
|
<uni-segmented-control :current="typeCurrent" :values="typeList" :style-type="styleType"
|
|
:active-color="activeColor" @clickItem="onClickType" />-->
|
|
<view class="choiceness-list">
|
|
<image v-for="(item,index) in creatorImgList" :key='index' class="img-box"
|
|
:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)"
|
|
mode=""></image>
|
|
<view class="ivOver" v-if="flag">-----已经到底啦-----</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listType,listTiktokImgIn
|
|
} from '@/api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusCurrent: 0,
|
|
activeColor: '#007aff',
|
|
styleType: 'text',
|
|
statusList: ['待审核','审核拒绝','已上架','已下架'],
|
|
typeList:[],
|
|
typeIdList:[],
|
|
typeCurrent: 0,
|
|
typeId: 1,
|
|
status: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
creatorImgList: [],
|
|
userInfo: {},
|
|
imgWidth: 0, // 图片宽
|
|
imgHeight: 0, // 图片高
|
|
flag: false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (option?.categoryId && option?.categoryIndex) {
|
|
this.statusCurrent = 2;
|
|
this.status = 2;
|
|
this.typeId = option.categoryId * 1;
|
|
this.typeCurrent = option.categoryIndex * 1;
|
|
}
|
|
if (option?.categoryId && option?.categoryIndex && option?.status) {
|
|
this.statusCurrent = option.status * 1;
|
|
this.status = option.status * 1;
|
|
}
|
|
this.listTiktokImgIn();
|
|
},
|
|
created(){
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
console.log('havent userInfo')
|
|
uni.showModal({
|
|
content: '艺术家账户过期,请重新登录！',
|
|
showCancel: false,
|
|
success() {
|
|
//没有缓存则跳转登录页面
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.userInfo = userInfo;
|
|
console.log('have userInfo')
|
|
}
|
|
this.queryListType();
|
|
this.imgWidth = 750/3-20 + 'rpx'
|
|
this.imgHeight = 750/3-20 + 'rpx'
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh(){
|
|
this.pageNum = 1
|
|
this.creatorImgList = []
|
|
this.listTiktokImgIn();
|
|
this.flag = false;
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
// 上划加载更多
|
|
onReachBottom() {
|
|
if (this.creatorImgList.length > this.pageSize*this.pageNum-1) {
|
|
this.flag = false;
|
|
this.pageNum += 1
|
|
this.listTiktokImgIn()
|
|
}else{
|
|
this.flag = true;
|
|
}
|
|
},
|
|
methods: {
|
|
// 前往详情页
|
|
targetDetail(item) {
|
|
//console.log('跳转', item)
|
|
let that = this;
|
|
if (item.id) {
|
|
uni.setStorage({
|
|
key: 'detailId',
|
|
data: item.id,
|
|
success() {
|
|
console.log(111111)
|
|
uni.navigateTo({
|
|
url: `/pages/index/material/imgDetail?categoryId=${that.typeId}&categoryIndex=${that.typeCurrent}&status=${that.status}`,
|
|
success:function(){
|
|
console.log('跳转成功!')
|
|
},
|
|
fail:function(){
|
|
console.log('跳转失败!')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
onClickStatus(e1){
|
|
let that = this;
|
|
that.flag = false;
|
|
that.creatorImgList = [];
|
|
that.status = e1.currentIndex;
|
|
that.statusCurrent = e1.currentIndex;
|
|
// that.typeCurrent = 0;
|
|
// that.typeId = that.typeIdList[0];
|
|
// console.log('status',that.status)
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
success() {
|
|
// 查询指定艺术家图片集合
|
|
const param = {
|
|
creatorId: that.userInfo.id,
|
|
typeId: that.typeId,
|
|
pageSize: that.pageSize,
|
|
pageNum: that.pageNum,
|
|
status: that.status
|
|
};
|
|
listTiktokImgIn(param).then(res => {
|
|
console.log('that.typeId',that.typeId);
|
|
console.log('that.status',that.status);
|
|
if(res.data.code === 200){
|
|
that.creatorImgList.push(...res.data.rows)
|
|
//console.log('调用成功1!', that.creatorImgList);
|
|
}else {
|
|
uni.showModal({
|
|
content: "艺术家图片列表数据加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
complete() {
|
|
uni.hideLoading();
|
|
},
|
|
});
|
|
},
|
|
onClickType(e2){
|
|
let that = this;
|
|
that.flag = false;
|
|
that.creatorImgList = [];
|
|
that.typeId = that.typeIdList[e2.currentIndex];
|
|
that.typeCurrent = e2.currentIndex;
|
|
//console.log('typeId',that.typeId)
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
success() {
|
|
// 查询指定艺术家图片集合
|
|
const param = {
|
|
creatorId: that.userInfo.id,
|
|
typeId: that.typeId,
|
|
pageSize: that.pageSize,
|
|
pageNum: that.pageNum,
|
|
status: that.status
|
|
};
|
|
listTiktokImgIn(param).then(res => {
|
|
// console.log('that.typeId',that.typeId);
|
|
// console.log('that.status',that.status);
|
|
if(res.data.code === 200){
|
|
that.creatorImgList.push(...res.data.rows)
|
|
// console.log(that.creatorImgList)
|
|
//console.log('调用成功2!', that.creatorImgList);
|
|
if(that.typeId === 1){
|
|
that.imgWidth = 750/3-20 + 'rpx'
|
|
that.imgHeight = 750/3-20 + 'rpx'
|
|
}else if(that.typeId === 2){
|
|
that.imgWidth = 750/3-30 + 'rpx'
|
|
that.imgHeight = 750/3+60 + 'rpx'
|
|
}else if(that.typeId === 3){
|
|
that.imgWidth = 750/3-30 + 'rpx'
|
|
that.imgHeight = 750/3+60 + 'rpx'
|
|
}else if(that.typeId === 4){
|
|
that.imgWidth = 750/3+100 + 'rpx'
|
|
that.imgHeight = 750/3 + 'rpx'
|
|
}else if(that.typeId === 5){
|
|
that.imgWidth = 750/3-20 + 'rpx'
|
|
that.imgHeight = 750/3-20 + 'rpx'
|
|
}else if(that.typeId === 6){
|
|
that.imgWidth = 750/3-20 + 'rpx'
|
|
that.imgHeight = 750/3-20 + 'rpx'
|
|
}
|
|
}else {
|
|
uni.showModal({
|
|
content: "艺术家图片列表数据加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
complete() {
|
|
uni.hideLoading();
|
|
|
|
},
|
|
});
|
|
},
|
|
|
|
// 获取图片分类列表
|
|
async queryListType() {
|
|
const res = await listType();
|
|
if (res.data.code === 200) {
|
|
for (let s of res.data.data) {
|
|
this.typeList.push(s.typeName);
|
|
this.typeIdList.push(s.id);
|
|
}
|
|
//console.log('typeList', this.typeList)
|
|
console.log('typeIdList', this.typeIdList)
|
|
} else {
|
|
uni.showModal({
|
|
content: "图片分类列表加载失败！",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
|
|
//查询指定艺术家图片集合
|
|
async listTiktokImgIn() {
|
|
let that = this;
|
|
const res = await listTiktokImgIn({
|
|
pageNum: that.pageNum,
|
|
pageSize: that.pageSize,
|
|
typeId: that.typeId,
|
|
status: that.status,
|
|
creatorId: that.userInfo.id
|
|
})
|
|
if (res.data.code === 200) {
|
|
that.creatorImgList.push(...res.data.rows)
|
|
console.log('creatorImgList',that.creatorImgList);
|
|
} else {
|
|
uni.showModal({
|
|
content: '艺术家图片列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.choiceness {
|
|
width: 750rpx;
|
|
padding-top: 20rpx;
|
|
background: #141b29;
|
|
min-height: 100vh;
|
|
|
|
.status-choice-comp {
|
|
background: #1d2734;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 40rpx;
|
|
|
|
.status-item {
|
|
font-size: 28rpx;
|
|
line-height: 68rpx;
|
|
height: 68rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.status-text {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.status-active {
|
|
background: #0a6375;
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.type-choice-comp {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
overflow: scroll;
|
|
padding-left: 40rpx;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
|
|
.type-item {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 20rpx;
|
|
flex-shrink: 0;
|
|
|
|
.type-text {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.type-active {
|
|
background: #0a6375;
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.choiceness-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
width: 750rpx;
|
|
//border: 1rpx solid blue;
|
|
|
|
|
|
.img-box {
|
|
margin-top: 10rpx;
|
|
margin-left: 16rpx;
|
|
//margin-right: 10rpx;
|
|
//margin:8rpx;
|
|
border-radius: 10rpx;
|
|
//border: 1rpx solid red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ivOver{
|
|
width: 100%;
|
|
height:50rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
background: #fff;
|
|
font-size: 20rpx;
|
|
}
|
|
</style>
|
|
|