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