jiazhipeng
1 year ago
3 changed files with 251 additions and 23 deletions
@ -1,21 +1,167 @@ |
|||
<template> |
|||
<view></view> |
|||
<view class="bg"> |
|||
<!-- <span class="iconfont topLeft" @click="goBack"></span> --> |
|||
<img :src="showImg('/uploads/20240826/53bbad9d231e7e0eb2404efb0c0903f4.png')" class="topImg" /> |
|||
<view class="box"> |
|||
<view class="item" v-for="item in list" :key="item.id" @click="viewDetail(item)"> |
|||
<image class="item-img" :src="showImg(item.image)" mode=""></image> |
|||
<view class="content"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="bottom"> |
|||
<view class="price"> |
|||
{{item.money/100}} |
|||
</view> |
|||
<view class="buy"> |
|||
立即购买 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
list:[], |
|||
finished: false, |
|||
} |
|||
}, |
|||
onShow() { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/techanList' |
|||
}); |
|||
onReady() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
// 根据产品分类获取产品列表 |
|||
getList(){ |
|||
this.Post({ |
|||
type_id: 19, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
},'/api/goods/getGoodsByType').then(res => { |
|||
this.list = [...this.list, ...res.data]; |
|||
if (res.data.length < 10) { |
|||
this.finished = true |
|||
} |
|||
}) |
|||
}, |
|||
viewDetail(item) { |
|||
this.goOtherDetail(item) |
|||
if(!item.link_type) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/detail?id=' + item.id |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.finished) this.getList() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.bg { |
|||
background: #FFFFFF; |
|||
min-height: 100vh; |
|||
padding-bottom: 26rpx; |
|||
} |
|||
|
|||
.topLeft { |
|||
position: absolute; |
|||
left: 26rpx; |
|||
top: 101rpx; |
|||
font-size: 40rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 750rpx; |
|||
height: 440rpx; |
|||
} |
|||
|
|||
.box { |
|||
margin-top: 26.67rpx; |
|||
// border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.item { |
|||
margin-bottom: 22rpx; |
|||
width: 335rpx; |
|||
height: 497rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38); |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.item-img { |
|||
width: 100%; |
|||
height: 342rpx; |
|||
background: #87CD93; |
|||
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|||
} |
|||
|
|||
.content { |
|||
height: 145rpx; |
|||
padding: 0 13rpx 13.33rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #000000; |
|||
width: 291rpx; |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.price { |
|||
font-size: 34.67rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: bold; |
|||
color: #D60000; |
|||
} |
|||
.price::before { |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
.price::after { |
|||
content: '起'; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.buy { |
|||
width: 140rpx; |
|||
height: 42rpx; |
|||
background: #71B580; |
|||
border-radius: 21rpx; |
|||
text-align: center; |
|||
line-height: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
Loading…
Reference in new issue