jiazhipeng
1 day ago
4 changed files with 311 additions and 1 deletions
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
|||
<view class="main-container"> |
|||
<view class="flex flex-between"> |
|||
<view class="main-title"> |
|||
<view class="header-left-line" style="width: 6rpx;height: 20rpx;"></view> |
|||
商品列表 |
|||
</view> |
|||
<view class="sort-area"> |
|||
<view :class="['sort-item',search==0?'active':'']" @click="changeSearch(0)">综合</view> |
|||
<view :class="['sort-item',search==2?'active':'']" @click="changeSearch(2)">销量</view> |
|||
<view :class="['sort-item',(search==3||search==4)?'active':'']" class="sort-item" @click="changeSearch(search==3?4:3)"> |
|||
<text>价格{{search==3?"从低到高":search==4?"从高到低":""}}</text> |
|||
<view class="search-item"> |
|||
<view class="rotate-90"> |
|||
<uni-icons type="left" size="11" :color="search==3?'#71873D':'#A0A0A0'"></uni-icons> |
|||
</view> |
|||
<view class="rotate-90"> |
|||
<uni-icons type="right" size="11" :color="search==4?'#71873D':'#A0A0A0'"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-container flex-between" style="align-items: flex-start;"> |
|||
<view v-for="(column, indexs) in 2" :key="indexs"> |
|||
<view class="column-product" v-if="index % 2 == indexs" @click="gotoDetailByType(item)" :key="index" |
|||
v-for="(item,index) in list"> |
|||
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title">{{item.title}}</view> |
|||
<view class="tags no-scrollbar" v-if="item.display_tags"> |
|||
<view class="tag-item" v-for="(tag,tagIndex) in item.display_tags.split(',')">{{tag}}</view> |
|||
</view> |
|||
<view class="flex-between" style="margin-top: 17rpx;"> |
|||
<view v-html="formatePrice(item.price/100)"></view> |
|||
<view class="btn">已售{{item.sales_number}}件</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- <image @click="returnTop" v-show="showGoTop" class="back-img" |
|||
src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: '', |
|||
finish:false, |
|||
list: [], |
|||
showGoTop: false, |
|||
|
|||
search: 0, |
|||
|
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.getHeadImg(2406) |
|||
this.getGoods() |
|||
}, |
|||
onReady() { |
|||
}, |
|||
methods: { |
|||
productInit () { |
|||
let _this = this |
|||
let typeList = [650,651,647,649,653,654,656] |
|||
// 获取所有农产品子类目 pid_type 20 |
|||
Promise.all( |
|||
typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list')) |
|||
).then(typeRes => { |
|||
typeRes.forEach(type => { |
|||
if (type.data.length>0) { |
|||
typeList = typeList.concat(type.data.map(x=>x.id)) |
|||
} |
|||
}) |
|||
this.typeList = typeList |
|||
this.getGoods() |
|||
}) |
|||
}, |
|||
|
|||
getHeadImg (id) { |
|||
this.Post({id},'/api/multimedia/detail').then(res => { |
|||
this.headImg = res.data.head_img |
|||
uni.setNavigationBarTitle({ |
|||
title:res.data.title |
|||
}) |
|||
}); |
|||
}, |
|||
// 产品列表 |
|||
getGoods() { |
|||
let param = {} |
|||
// if (search == 1) { param = {order: 'asc',sort:'sales_number'} } |
|||
if (this.search == 2) { param = {order: 'desc',sort:'p.sales_number'} } |
|||
if (this.search == 3) { param = {order: 'asc',sort:'p.price'} } |
|||
if (this.search == 4) { param = {order: 'desc',sort:'p.price'} } |
|||
|
|||
this.Post({ |
|||
// tag_id: 119, |
|||
tag_id: 120, |
|||
offset: this.list.length, |
|||
limit: 4, |
|||
...param, |
|||
},'/api/product/get_product_by_tag_subject').then(res => { |
|||
if (res.data.list.length < 4) { |
|||
this.finish = true |
|||
} |
|||
this.list = this.list.concat(res.data.list||[]) |
|||
}) |
|||
}, |
|||
|
|||
changeSearch (value) { |
|||
this.search = value |
|||
this.list = [] |
|||
this.getGoods() |
|||
}, |
|||
|
|||
returnTop(){ |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 200, |
|||
}) |
|||
}, |
|||
}, |
|||
onPageScroll(res) { |
|||
this.showGoTop = res.scrollTop > 200 ? true : false; |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(()=>{ |
|||
if(!this.finish) this.getGoods() |
|||
},500) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 100%; |
|||
} |
|||
|
|||
.main-container{ |
|||
width: 100%; |
|||
margin-top: -100rpx; |
|||
padding: 0 26rpx 60rpx; |
|||
position: relative; |
|||
.main-title{ |
|||
font-weight: 500; |
|||
font-size: 29rpx; |
|||
color: #363636; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.sort-area{ |
|||
display: flex; |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #A0A0A0; |
|||
.sort-item{ |
|||
padding-left: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.sort-item.active{ |
|||
color: #71873D; |
|||
} |
|||
|
|||
.search-item{ |
|||
padding-left: 9rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
line-height: 0.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.product-container{ |
|||
padding:18rpx 0 0; |
|||
} |
|||
|
|||
.column-product{ |
|||
width: 339rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 21rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 21rpx; |
|||
.img{ |
|||
width: 339rpx; |
|||
height: 339rpx; |
|||
border-radius: 21rpx 21rpx 0rpx 0rpx; |
|||
} |
|||
.title{ |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #393939; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
flex: 1; |
|||
height: fit-content; |
|||
padding: 0rpx 15rpx 15rpx; |
|||
} |
|||
.price{ |
|||
font-weight: 500; |
|||
font-size: 34rpx; |
|||
color: #FF0000; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.btn{ |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #A0A0A0; |
|||
.sale-num{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.tags{ |
|||
display: flex; |
|||
margin-top: 17rpx; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
.tag-item{ |
|||
border-radius: 3rpx 3rpx 3rpx 3rpx; |
|||
border: 1rpx solid #798B41; |
|||
font-weight: 400; |
|||
font-size: 21rpx; |
|||
color: #798B41; |
|||
padding: 4rpx 10rpx; |
|||
margin-right: 8rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
|
|||
.bottom-img{ |
|||
width: 123.95rpx; |
|||
height: 103.06rpx; |
|||
margin: 74rpx auto 0; |
|||
display: block; |
|||
} |
|||
.back-img{ |
|||
position: fixed; |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
bottom: 66rpx; |
|||
right: 26rpx; |
|||
} |
|||
.rotate-90 { |
|||
transform: rotate(90deg); |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue