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.
435 lines
9.1 KiB
435 lines
9.1 KiB
<template> |
|
<view class="zhanguan"> |
|
展馆建设中 |
|
</view> |
|
<view class="mychangping"> |
|
<view class="mychangping_top"> |
|
<view> |
|
<image src="../../static/usercpicon.png"></image> |
|
<view class="wdcp">我的藏品</view> |
|
<view style="margin-left: 10rpx;" class="nums">{{zhongsu}}</view> |
|
</view> |
|
<view> |
|
<view> |
|
<view @click="zhankai">{{type==1?'全部':type==2?'衍生品':type==3?'版权品':''}}</view> |
|
<view v-if="sfsaixuan"> |
|
<view @click="xzxx(1)" :class="type==1?'xzxx':''">全部</view> |
|
<view @click="xzxx(2)" :class="type==2?'xzxx':''">衍生品</view> |
|
<view @click="xzxx(3)" :class="type==3?'xzxx':''">版权品</view> |
|
</view> |
|
</view> |
|
<view @click="qiehuansj"> |
|
时间 |
|
<text v-if="datetype==1">↑</text> |
|
<text v-else-if="datetype==2">↓</text> |
|
</view> |
|
</view> |
|
<!-- <image src="../../static/youshou.png"></image> --> |
|
</view> |
|
<scroll-view class="scv1" scroll-y="true" @scrolltoupper='init' @scrolltolower='jiazai'> |
|
<view class="mychangping_content"> |
|
<view @click="goxiangqin(item)" v-for="item in list"> |
|
<image :src="item.tupian"></image> |
|
<view class="nicheng">{{item.collectionName}}</view> |
|
<!-- <view class="bianhao" v-if="item.collnum==1">{{item.collectorNumber}}</view> --> |
|
<!-- <view v-if="item.collnum>1" class="xilie">系列</view> --> |
|
<view class="fensu">{{item.collnum+'份'}}</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
<tabber selecttb='3'></tabber> |
|
</template> |
|
|
|
<script> |
|
import {criticismmycollection} from '@/api/user.js' |
|
import tabber from '../../components/tabber/tabber.vue' |
|
import {ref,reactive,toRefs} from 'vue' |
|
export default { |
|
components:{ |
|
tabber |
|
}, |
|
setup() { |
|
let sfsaixuan=ref(false) |
|
let obj=reactive({ |
|
users:[], |
|
list:[], |
|
total:0 |
|
}) |
|
let type=ref(1) |
|
let datetype=ref(2); |
|
let zhongsu=ref(0) |
|
obj.users=uni.getStorageSync('users') |
|
let page=1 |
|
function init(){ |
|
page=1 |
|
uni.showLoading({ |
|
title:'加载中' |
|
}) |
|
criticismmycollection({pageNum:page,pageSize:10,type:type.value,datetype:datetype.value}).then(res=>{ |
|
uni.hideLoading() |
|
obj.list=res.rows |
|
obj.list.map(item=>{ |
|
if(item.surfacePlot){ |
|
item.tupian=item.surfacePlot |
|
}else{ |
|
item.tupian=item.imagePath |
|
} |
|
return item |
|
}) |
|
// zhongsu.value=res.total |
|
if(res.rows.length>0){ |
|
zhongsu.value=res.rows[0].issue |
|
}else{ |
|
zhongsu.value=0 |
|
} |
|
}) |
|
} |
|
function jiazai(){ |
|
page++ |
|
uni.showLoading({ |
|
title:'加载中' |
|
}) |
|
criticismmycollection({pageNum:page,pageSize:10,type:type.value,datetype:datetype.value}).then(res=>{ |
|
uni.hideLoading() |
|
if(res.rows==0){ |
|
uni.showToast({ |
|
title:'已经到底啦', |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
page-- |
|
return |
|
} |
|
// zhongsu.value=res.total |
|
let value=res.rows |
|
value.map(item=>{ |
|
if(item.surfacePlot){ |
|
item.tupian=item.surfacePlot |
|
}else{ |
|
item.tupian=item.imagePath |
|
} |
|
return item |
|
}) |
|
value.map(item=>{ |
|
obj.list.push(item) |
|
}) |
|
// this.obj.list=res.data |
|
}) |
|
} |
|
init() |
|
function goxiangqin(item){ |
|
if(item.collnum>1){ |
|
uni.navigateTo({ |
|
url:'/pages/mydetailslist/mydetailslist?id='+item.collectionId |
|
}) |
|
}else{ |
|
uni.navigateTo({ |
|
url:'../mydetils/mydetils?id='+item.id |
|
}) |
|
} |
|
} |
|
|
|
function qiehuansj(){ |
|
if(datetype.value==1){ |
|
datetype.value=2 |
|
}else if(datetype.value==2){ |
|
datetype.value=1 |
|
} |
|
init() |
|
} |
|
function zhankai(){ |
|
sfsaixuan.value=!sfsaixuan.value |
|
} |
|
function xzxx(val){ |
|
type.value=val |
|
sfsaixuan.value=false |
|
init() |
|
} |
|
return { |
|
xzxx, |
|
zhankai, |
|
sfsaixuan, |
|
qiehuansj, |
|
type, |
|
datetype, |
|
zhongsu, |
|
init, |
|
jiazai, |
|
goxiangqin, |
|
obj, |
|
...toRefs(obj) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.zhanguan{ |
|
width: 100%; |
|
height: 20vh; |
|
text-align: center; |
|
line-height: 20vh; |
|
color: #ffffff; |
|
font-size: 45upx; |
|
} |
|
.scv1{ |
|
width: 100%; |
|
height:62vh; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
page{ |
|
padding-bottom: 140upx; |
|
} |
|
.mychangping{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-top: 30upx; |
|
>.mychangping_top{ |
|
width: 680upx; |
|
display: flex; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
align-items: center; |
|
margin-bottom: 40upx; |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
>image{ |
|
width: 32upx; |
|
height: 32upx; |
|
margin-right: 5upx; |
|
} |
|
.wdcp{ |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
.nums{ |
|
width: 70upx; |
|
height: 32upx; |
|
background: rgba(255, 255, 255, 0.2); |
|
border-radius: 48upx; |
|
font-size: 24upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
align-items: center; |
|
background-color: #ffffff60; |
|
padding: 10upx 30upx; |
|
border-radius: 30upx; |
|
box-sizing: border-box; |
|
>view:nth-of-type(1){ |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
margin-right: 30upx; |
|
color: #FFFFFF; |
|
font-size: 30upx; |
|
border-right: 1upx solid #0f0f0f; |
|
padding-right: 20upx; |
|
>view:nth-of-type(1){ |
|
font-size: 26upx; |
|
color: #0f0f0f; |
|
} |
|
>view:nth-of-type(2){ |
|
position: absolute; |
|
top: 60upx; |
|
right: 0; |
|
z-index: 999; |
|
width: 150upx; |
|
background-color: #ffffffaf; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
font-size: 26upx; |
|
>view{ |
|
padding: 10upx 0; |
|
color: #000; |
|
} |
|
.xzxx{ |
|
color: #570CDC; |
|
} |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
font-size: 26upx; |
|
color: #0f0f0f; |
|
>text{ |
|
font-size: 25upx; |
|
} |
|
} |
|
} |
|
} |
|
.mychangping_content{ |
|
width: 680upx; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
margin: auto; |
|
|
|
|
|
>view{ |
|
width: 328upx; |
|
display: flex; |
|
flex-direction: column; |
|
margin-bottom: 20upx; |
|
position: relative; |
|
.xilie{ |
|
position: absolute; |
|
left: 20upx; |
|
top: 15upx; |
|
background-color: #00000070; |
|
color: #ffffff; |
|
font-size: 20upx; |
|
padding: 8upx 30upx; |
|
border-radius: 90upx; |
|
} |
|
.fensu{ |
|
position: absolute; |
|
right: 10upx; |
|
top: 15upx; |
|
// width: 120upx; |
|
font-size: 24upx; |
|
color: #ffffff; |
|
background-color: #00000050; |
|
// background: linear-gradient(0deg, #22c1c2 0%, #6feebc 100%) ; |
|
padding: 6upx 23upx; |
|
border-radius: 50upx; |
|
display: inline-block; |
|
} |
|
>image{ |
|
width: 328upx; |
|
height: 328upx; |
|
margin-bottom: 10upx; |
|
border-radius: 5upx; |
|
} |
|
>.nicheng{ |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
// margin-bottom: 5upx; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
// margin-bottom: 20upx; |
|
display: inline-block; |
|
} |
|
>.bianhao{ |
|
width: 286upx; |
|
height: 34upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
border-radius: 34upx; |
|
font-size: 22upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 30upx; |
|
box-sizing: border-box; |
|
// justify-content: center; |
|
} |
|
} |
|
} |
|
} |
|
.user_top{ |
|
width: 100%; |
|
// height: 554upx; |
|
background-image: url('@/static/beijintua.png'); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-top: 100upx; |
|
box-sizing: border-box; |
|
padding-bottom: 20upx; |
|
>.user_top_one{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 20upx; |
|
>view{ |
|
&:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
>view{ |
|
color: #ffffff; |
|
&:nth-of-type(1){ |
|
position: relative; |
|
margin-right: 28upx; |
|
} |
|
.onenic{ |
|
font-size: 28upx; |
|
margin-bottom: 5upx; |
|
} |
|
.dids{ |
|
font-size: 26upx |
|
} |
|
.tubiao{ |
|
width: 108upx; |
|
height: 108upx; |
|
border-radius: 50%; |
|
} |
|
.quer{ |
|
position: absolute; |
|
top: 0upx; |
|
right: 0upx; |
|
width: 24upx; |
|
height: 27upx; |
|
} |
|
} |
|
} |
|
>.setic{ |
|
width: 40upx; |
|
height: 40upx; |
|
} |
|
} |
|
} |
|
>.user_top_buttons{ |
|
width: 680upx; |
|
height: 392upx; |
|
background: rgba(255,255,255,0.1000); |
|
border-radius: 12upx; |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
justify-content: space-around; |
|
>view{ |
|
width:123upx; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 25upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
// margin-right: 37upx; |
|
// margin-left: 30upx; |
|
margin: 0 20upx; |
|
&:nth-of-type(4n){ |
|
margin-right: 30upx; |
|
} |
|
>image{ |
|
width: 80upx; |
|
height: 80upx; |
|
margin-bottom: 20upx; |
|
} |
|
} |
|
} |
|
>view{ |
|
width: 680upx; |
|
} |
|
} |
|
</style>
|
|
|