This commit is contained in:
lnn19986213 2024-05-08 16:35:48 +08:00
parent d0ed08d2ce
commit 0c4f73bb85
2 changed files with 163 additions and 70 deletions

View File

@ -8,7 +8,7 @@
<u-search height=42 margin="0 0 12px 0" searchIconColor="#251B1D" shape="square" :showAction="false" <u-search height=42 margin="0 0 12px 0" searchIconColor="#251B1D" shape="square" :showAction="false"
v-model="artValue" placeholder="请输入关键字" @search='search'></u-search> v-model="artValue" placeholder="请输入关键字" @search='search'></u-search>
</view> </view>
<!-- <u-tabs @click="clickTabs" :list="list1" :activeStyle="{ <!-- <u-tabs @click="clickTabs" :list="list1" :activeStyle="{
color: '#251B1D', color: '#251B1D',
fontWeight: 'bold', fontWeight: 'bold',
@ -18,12 +18,14 @@
transform: 'scale(1)' transform: 'scale(1)'
}" itemStyle="height: 50px;"> }" itemStyle="height: 50px;">
</u-tabs> --> </u-tabs> -->
<view class="goodPart"> <view class="goodPart" :style="{'height': 'calc(100vh - '+topPartHeight+'px)'}">
<scroll-view class="gpLeft" scroll-y="true"> <scroll-view class="gpLeft" scroll-y="true">
<view :class="fil == '1'?'gplItem_C':'gplItem'" @click="Clickfilter" style="display: flex;"> <view :class="fil == '1'?'gplItem_C':'gplItem'" @click="Clickfilter" style="display: flex;">
<image src="../../static/shop/hot.png" style="height: 32rpx; width: 32rpx; margin: 6rpx 6rpx 0 24rpx;"></image>热门 <image src="../../static/shop/hot.png"
style="height: 32rpx; width: 32rpx; margin: 6rpx 6rpx 0 24rpx;"></image>热门
</view> </view>
<view v-for="(item,index) in list1" :key="index" @click="chooseOneType(item.value,index)" :class="typeO == index?'gplItem_C':'gplItem'"> <view v-for="(item,index) in list1" :key="index" @click="chooseOneType(item.value,index)"
:class="typeO == index?'gplItem_C':'gplItem'">
{{item.name}} {{item.name}}
</view> </view>
</scroll-view> </scroll-view>
@ -37,13 +39,16 @@
全部作品 全部作品
<view class="line"></view> <view class="line"></view>
</view> </view>
<view v-for="(item,index) in list2" :key="index" @click="chooseTwoType(item.value,index)" :class="typeT == index?'gprtItem_C':'gprtItem'"> <view v-for="(item,index) in list2" :key="index" @click="chooseTwoType(item.value,index)"
:class="typeT == index?'gprtItem_C':'gprtItem'">
{{item.name}} {{item.name}}
<view class="line"></view> <view class="line"></view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="artworks" scroll-y="true" @scrolltolower="lower"> <scroll-view class="artworks" scroll-y="true" @scrolltolower="lower" @scroll="scroll"
<u-empty v-if="workList.length < 1" mode="data" icon="../../static/orderE.png" text='暂无数据' marginTop="120"> :scroll-top="scrollTop">
<u-empty v-if="workList.length < 1" mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png" text='暂无数据' marginTop="120">
</u-empty> </u-empty>
<view class="art_item" v-for="(v, i) in workList" :key="i"> <view class="art_item" v-for="(v, i) in workList" :key="i">
<view class="art_item_top"> <view class="art_item_top">
@ -63,14 +68,16 @@
</view> </view>
<view class="sub_title" style="overflow: hidden;"> <view class="sub_title" style="overflow: hidden;">
<view style="float: left; width: 40%">{{ v.typeName }}-{{ v.typesName }}作品</view> <view style="float: left; width: 40%">{{ v.typeName }}-{{ v.typesName }}作品</view>
<view style="float: right; width: 60%; display: flex; flex-wrap: wrap; justify-content: flex-end;"> <view
style="float: right; width: 60%; display: flex; flex-wrap: wrap; justify-content: flex-end;">
<view class="tag" v-for="(a,b) in v.workTag" :key="b"> <view class="tag" v-for="(a,b) in v.workTag" :key="b">
{{a}} {{a}}
</view> </view>
</view> </view>
</view> </view>
<view class="img_box"> <view class="img_box">
<view v-if="v.user" class=" puber" @click="toUser(v.user.id,v.user.images,v.user.userName,v.isFollow)"> <view v-if="v.user" class=" puber"
@click="toUser(v.user.id,v.user.images,v.user.userName,v.isFollow)">
<view class="avtor"> <view class="avtor">
<image :src="v.user.images" mode=""></image> <image :src="v.user.images" mode=""></image>
</view> </view>
@ -83,7 +90,7 @@
{{ v.userNames }} {{ v.userNames }}
</view> </view>
</view> </view>
<view class="time"> <view class="time">
{{ v.releaseDate }} {{ v.releaseDate }}
</view> </view>
@ -93,7 +100,7 @@
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
@ -104,6 +111,9 @@
data() { data() {
return { return {
load: true, load: true,
statusHeight: 0,
titleHeight: 50,
topPartHeight: 0,
artValue: '', artValue: '',
type: '', type: '',
types: '', types: '',
@ -122,9 +132,22 @@
sonId: '', sonId: '',
sonNum: '', sonNum: '',
// //
requestStatus: false requestStatus: false,
scrollTop: 0,
old: {
scrollTop: 0
}
}; };
}, },
onReady() {
const systemMsg = uni.getSystemInfoSync();
this.statusHeight = systemMsg.statusBarHeight
// #ifdef MP-WEIXIN
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
// #endif
this.topPartHeight = this.statusHeight + this.titleHeight + 12
},
// //
onPullDownRefresh() { onPullDownRefresh() {
this.pages = 1 this.pages = 1
@ -143,11 +166,11 @@
name: '全部', name: '全部',
type: '', type: '',
}], }],
this.pages = 1 this.pages = 1
this.getType() this.getType()
}, },
onShow() { onShow() {
if(this.sonId){ if (this.sonId) {
this.getSonData() this.getSonData()
} }
}, },
@ -175,7 +198,7 @@
// //
getTypeE() { getTypeE() {
let _this = this let _this = this
this.http.request('/workType/'+ this.type, {}, "GET").then(res => { this.http.request('/workType/' + this.type, {}, "GET").then(res => {
if (res.code == 200) { if (res.code == 200) {
res.data.forEach(function(item) { res.data.forEach(function(item) {
_this.list2.push({ _this.list2.push({
@ -209,12 +232,11 @@
if (res.code == 200) { if (res.code == 200) {
_this.workList = res.data.records _this.workList = res.data.records
_this.workList.forEach(function(item) { _this.workList.forEach(function(item) {
console.log(1) if (item.user) {
if(item.user){
if (item.user.images) { if (item.user.images) {
// let img = JSON.parse(item.user.images) // let img = JSON.parse(item.user.images)
// item.user.images = img[0] // item.user.images = img[0]
}else{ } else {
item.user.images = '../../static/txIcon.png' item.user.images = '../../static/txIcon.png'
} }
} }
@ -222,14 +244,15 @@
if (item.file) { if (item.file) {
let fileArr = item.file.split(',') let fileArr = item.file.split(',')
let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1) let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1)
if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs == 'gif' || gs == 'tif' || gs == 'tiff') { if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs ==
'gif' || gs == 'tif' || gs == 'tiff') {
item.file = fileArr[0] item.file = fileArr[0]
} else if (gs == 'pdf') { } else if (gs == 'pdf') {
item.file = '../../static/fileImg/pdfS.png' item.file = '../../static/fileImg/pdfS.png'
} }
} }
if (item.workTag.length > 3) { if (item.workTag.length > 3) {
let tags = item.workTag.slice(0,3) let tags = item.workTag.slice(0, 3)
item.workTag = tags item.workTag = tags
} }
}) })
@ -249,6 +272,11 @@
}, },
// //
getMoreData() { getMoreData() {
if (this.requestStatus) {
// return
return false;
}
this.requestStatus = true;
const _this = this const _this = this
this.http.request('/works/list', { this.http.request('/works/list', {
page: this.pages, page: this.pages,
@ -259,25 +287,39 @@
}, "GET").then(res => { }, "GET").then(res => {
if (res.data.records.length > 0) { if (res.data.records.length > 0) {
res.data.records.forEach(function(item) { res.data.records.forEach(function(item) {
if (item.user.images != undefined) { if (item.user) {
let img = JSON.parse(item.user.images) if (item.user.images) {
item.user.images = img[0] // let img = JSON.parse(item.user.images)
// item.user.images = img[0]
} else {
item.user.images = '../../static/txIcon.png'
}
} }
// //
if (item.file != undefined) { if (item.file) {
let fileArr = item.file.split(',') let fileArr = item.file.split(',')
let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1) let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1)
if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs == 'gif' || gs == 'tif' || gs == 'tiff') { if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs ==
'gif' || gs == 'tif' || gs == 'tiff') {
item.file = fileArr[0] item.file = fileArr[0]
} else if (gs == 'pdf') { } else if (gs == 'pdf') {
item.file = '../../static/fileImg/pdfS.png' item.file = '../../static/fileImg/pdfS.png'
} }
}
if (item.workTag.length > 3) {
let tags = item.workTag.slice(0, 3)
item.workTag = tags
} }
_this.workList.push(item) _this.workList.push(item)
}) })
} else { } else {
this.pages-- this.pages--
} }
setTimeout(() => {
//
// requestStatus
this.requestStatus = false;
}, 500);
}).catch(e => { }).catch(e => {
uni.showToast({ uni.showToast({
@ -287,7 +329,7 @@
}) })
}, },
// //
like(val1, val2,num) { like(val1, val2, num) {
if (val2) { if (val2) {
this.workList[num].isGreat = false this.workList[num].isGreat = false
this.http.request('/worksGreat/delGreat?type=1&workId=' + val1, "POST").then(res => { this.http.request('/worksGreat/delGreat?type=1&workId=' + val1, "POST").then(res => {
@ -317,7 +359,7 @@
} }
}, },
// //
toDetail(val,num) { toDetail(val, num) {
this.sonId = val this.sonId = val
this.sonNum = num this.sonNum = num
uni.navigateTo({ uni.navigateTo({
@ -325,10 +367,10 @@
}) })
}, },
// //
chooseOneType(item,index) { chooseOneType(item, index) {
if(index == 0){ if (index == 0) {
this.type = '' this.type = ''
}else{ } else {
this.type = item this.type = item
this.getTypeE() this.getTypeE()
} }
@ -339,26 +381,29 @@
this.list2 = [] this.list2 = []
this.orderBy = '' this.orderBy = ''
this.pages = 1 this.pages = 1
this.goTop()
this.getData() this.getData()
}, },
// //
chooseTwoType(val,val2) { chooseTwoType(val, val2) {
this.types = val this.types = val
this.typeT = val2 this.typeT = val2
this.orderBy = '' this.orderBy = ''
this.pages = 1 this.pages = 1
this.goTop()
this.getData() this.getData()
}, },
search() { search() {
this.pages = 1 this.pages = 1
this.getData() this.getData()
}, },
toUser(val1,val2,val3,val4){ toUser(val1, val2, val3, val4) {
uni.navigateTo({ uni.navigateTo({
url: "/pagesA/my/myWorks?id=" + val1 + '&userName=' + val3 + '&userImg=' + val2 + '&isFollow=' + val4 url: "/pagesA/my/myWorks?id=" + val1 + '&userName=' + val3 + '&userImg=' + val2 +
'&isFollow=' + val4
}) })
}, },
Clickfilter(){ Clickfilter() {
let _this = this let _this = this
if (this.fil == 0) { if (this.fil == 0) {
this.fil = 1 this.fil = 1
@ -367,6 +412,7 @@
this.type = '' this.type = ''
this.types = '' this.types = ''
this.list2 = [] this.list2 = []
this.goTop()
this.http.request('/works/hot', {}, "GET").then(res => { this.http.request('/works/hot', {}, "GET").then(res => {
if (res.code == 200) { if (res.code == 200) {
_this.workList = res.data _this.workList = res.data
@ -374,18 +420,19 @@
if (item.user.images) { if (item.user.images) {
// let img = JSON.parse(item.user.images) // let img = JSON.parse(item.user.images)
// item.user.images = img[0] // item.user.images = img[0]
}else{ } else {
item.images = '../../static/txIcon.png' item.images = '../../static/txIcon.png'
} }
// //
if (item.file) { if (item.file) {
let fileArr = item.file.split(',') let fileArr = item.file.split(',')
let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1) let gs = fileArr[0].substr(fileArr[0].lastIndexOf(".") + 1)
if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs == 'gif' || gs == 'tif' || gs == 'tiff') { if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs ==
'gif' || gs == 'tif' || gs == 'tiff') {
item.file = fileArr[0] item.file = fileArr[0]
} else if (gs == 'pdf') { } else if (gs == 'pdf') {
item.file = '../../static/fileImg/pdfS.png' item.file = '../../static/fileImg/pdfS.png'
} }
} }
}) })
} }
@ -395,10 +442,10 @@
icon: "none", icon: "none",
}); });
}) })
} }
}, },
lower(){ lower() {
if(this.fil == 0){ if (this.fil == 0) {
this.pages++ this.pages++
this.getMoreData(); this.getMoreData();
} }
@ -415,6 +462,17 @@
icon: "none", icon: "none",
}); });
}) })
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// view
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
} }
} }
} }
@ -427,6 +485,7 @@
background-color: transparent !important; background-color: transparent !important;
bottom: 2px !important; bottom: 2px !important;
} }
.search_box { .search_box {
width: calc(100% - 32px); width: calc(100% - 32px);
margin: 0 16px; margin: 0 16px;
@ -441,24 +500,25 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.goodPart { .goodPart {
width: 750rpx; width: 750rpx;
background: #F8F8F8; background: #F8F8F8;
height: calc(100vh - 100px); height: calc(100vh - 100px);
overflow: hidden; overflow: hidden;
.gpLeft { .gpLeft {
width: 168rpx; width: 168rpx;
height: 100%; height: 100%;
float: left; float: left;
.gplItem { .gplItem {
width: 168rpx; width: 168rpx;
padding: 20rpx 0; padding: 20rpx 0;
font-size: 30rpx; font-size: 30rpx;
text-align: center; text-align: center;
} }
.gplItem_C { .gplItem_C {
width: 162rpx; width: 162rpx;
padding: 20rpx 0; padding: 20rpx 0;
@ -467,41 +527,44 @@
text-align: center; text-align: center;
background: #E8E8E8; background: #E8E8E8;
border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0;
border-left: 6rpx solid #99241B ; border-left: 6rpx solid #99241B;
} }
} }
.gpRight { .gpRight {
width: 546rpx; width: 546rpx;
height: 100%; height: 100%;
float: left; float: left;
.gprTop { .gprTop {
width: 100%; width: 100%;
height: 70rpx; height: 70rpx;
padding: 10px 0; padding: 10px 0;
overflow: hidden; overflow: hidden;
.gprtItem { .gprtItem {
height: 64rpx; height: 64rpx;
line-height: 64rpx; line-height: 64rpx;
padding: 0 30rpx; padding: 0 30rpx;
margin: 0 10rpx; margin: 0 10rpx;
float: left; float: left;
.line{
.line {
width: calc(100% - 40rpx); width: calc(100% - 40rpx);
min-width: 36rpx; min-width: 36rpx;
margin: 0 auto; margin: 0 auto;
height: 6rpx; height: 6rpx;
} }
} }
.gprtItem_C { .gprtItem_C {
height: 64rpx; height: 64rpx;
line-height: 64rpx; line-height: 64rpx;
padding: 0 30rpx; padding: 0 30rpx;
margin: 0 10rpx; margin: 0 10rpx;
float: left; float: left;
.line{
.line {
width: calc(100% - 40rpx); width: calc(100% - 40rpx);
min-width: 36rpx; min-width: 36rpx;
margin: 0 auto; margin: 0 auto;
@ -510,20 +573,22 @@
} }
} }
} }
.artworks { .artworks {
background-color: #ffffff; background-color: #ffffff;
height: calc(100% - 55px); height: calc(100% - 55px);
margin-left: 16rpx; margin-left: 16rpx;
.art_item { .art_item {
margin: 8px 0; margin: 8px 0;
border: 1px solid transparent; border: 1px solid transparent;
.art_item_top { .art_item_top {
position: relative; position: relative;
height: 192px; height: 192px;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
.like { .like {
position: absolute; position: absolute;
top: calc(100% - 40px); top: calc(100% - 40px);
@ -536,21 +601,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.img { .img {
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url(../../static/spaceHeart.png) center/100% no-repeat; background: url(../../static/spaceHeart.png) center/100% no-repeat;
float: left; float: left;
} }
.img_selected { .img_selected {
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url(../../static/redHerart.png) center/100% no-repeat; background: url(../../static/redHerart.png) center/100% no-repeat;
float: left; float: left;
} }
.select_num { .select_num {
float: left; float: left;
margin-left: 10rpx; margin-left: 10rpx;
@ -558,6 +623,7 @@
} }
} }
} }
.art_item_bott { .art_item_bott {
.title { .title {
margin-top: 12px; margin-top: 12px;
@ -565,14 +631,14 @@
font-weight: 600; font-weight: 600;
color: #251B1D; color: #251B1D;
} }
.sub_title { .sub_title {
font-size: 12px; font-size: 12px;
color: #AFADB0; color: #AFADB0;
margin-top: 12px; margin-top: 12px;
margin-bottom: 16px; margin-bottom: 16px;
.tag{ .tag {
// width: 80rpx; // width: 80rpx;
text-align: center; text-align: center;
border: 1rpx solid #AFADB0; border: 1rpx solid #AFADB0;
@ -582,16 +648,16 @@
padding: 4rpx 10rpx; padding: 4rpx 10rpx;
} }
} }
.img_box { .img_box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.puber { .puber {
display: flex; display: flex;
align-items: center; align-items: center;
.avtor { .avtor {
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
@ -599,24 +665,22 @@
height: 24px; height: 24px;
margin-right: 4px; margin-right: 4px;
} }
.autor { .autor {
color: #251B1D; color: #251B1D;
font-size: 12px; font-size: 12px;
} }
} }
.time { .time {
color: #AFADB0; color: #AFADB0;
font-size: 12px; font-size: 12px;
} }
} }
} }
} }
} }
} }
} }
</style>
</style>

View File

@ -46,7 +46,8 @@
<view class="line"></view> <view class="line"></view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="artworks" scroll-y="true" @scrolltolower="lower"> <scroll-view class="artworks" scroll-y="true" @scrolltolower="lower" @scroll="scroll"
:scroll-top="scrollTop">
<u-empty v-if="workList.length < 1" icon="http://cdn.uviewui.com/uview/empty/data.png"> <u-empty v-if="workList.length < 1" icon="http://cdn.uviewui.com/uview/empty/data.png">
</u-empty> </u-empty>
<view class="art_item" v-for="(v,i) in workList" :key="i" @click="goOrderDet(v.id)"> <view class="art_item" v-for="(v,i) in workList" :key="i" @click="goOrderDet(v.id)">
@ -117,6 +118,10 @@
orderBy: '', orderBy: '',
lineBg: '../../static/scrollLine.png', lineBg: '../../static/scrollLine.png',
typesOf: '', typesOf: '',
scrollTop: 0,
old: {
scrollTop: 0
}
}; };
}, },
onReady() { onReady() {
@ -229,6 +234,11 @@
}, },
// //
getMoreData() { getMoreData() {
if (this.requestStatus) {
// return
return false;
}
this.requestStatus = true;
let _this = this let _this = this
this.http.request('/goods/list', { this.http.request('/goods/list', {
page: this.pages, page: this.pages,
@ -256,6 +266,11 @@
if (res.data.records.length == 0) { if (res.data.records.length == 0) {
this.pages-- this.pages--
} }
setTimeout(() => {
//
// requestStatus
this.requestStatus = false;
}, 500);
} }
}).catch(e => { }).catch(e => {
uni.showToast({ uni.showToast({
@ -280,6 +295,7 @@
this.list2 = [] this.list2 = []
this.orderBy = '' this.orderBy = ''
this.pages = 1 this.pages = 1
this.goTop()
this.getData() this.getData()
}, },
// //
@ -288,6 +304,7 @@
this.typeT = val2 this.typeT = val2
this.orderBy = '' this.orderBy = ''
this.pages = 1 this.pages = 1
this.goTop()
this.getData() this.getData()
}, },
changeTypesOf(val) { changeTypesOf(val) {
@ -301,7 +318,7 @@
name: '全部', name: '全部',
type: '', type: '',
}], }],
this.list2 = [] this.list2 = []
this.orderBy = '' this.orderBy = ''
this.pages = 1 this.pages = 1
this.getType() this.getType()
@ -319,6 +336,7 @@
this.types = '' this.types = ''
this.list2 = [] this.list2 = []
this.pages = 1 this.pages = 1
this.goTop()
this.getData() this.getData()
} }
}, },
@ -335,6 +353,17 @@
lower() { lower() {
this.pages++ this.pages++
this.getMoreData(); this.getMoreData();
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// view
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
} }
} }
} }