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.

142 lines
2.5 KiB

1 year ago
<template>
<view class="bg">
1 year ago
<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
1 year ago
<img :src="showImg('/uploads/20240826/97282395bdd31e0b1fe20e5356cc4fc4.png')" class="topImg" />
<view class="item" v-for="item in list" :key="item.id">
<image class="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.low_money/100}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[], //列表
finished: false,
}
},
onReady() {
this.getList()
},
methods: {
// 根据产品分类获取产品列表
getList(){
this.Post({
type_id: 17,
offset: this.list.length,
limit: 10,
lon: uni.getStorageSync('location').lon || '',
lat: uni.getStorageSync('location').lat || '',
},'/api/goods/getGoodsByType').then(res => {
this.list = [...this.list, ...res.data];
if (res.data.length < 10) {
this.finished = true
}
})
},
},
onReachBottom() {
setTimeout(() => {
if (!this.finished) this.getList()
},1000)
}
}
</script>
<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;
1 year ago
font-size: 40rpx;
1 year ago
z-index: 2;
}
.topImg {
width: 750rpx;
height: 440rpx;
}
.item {
width: 697rpx;
height: 227rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
border-radius: 13rpx;
margin: 26.67rpx auto 0;
display: flex;
}
.img {
width: 280rpx;
height: 227rpx;
background: #87CD93;
border-radius: 13rpx;
margin-right: 20.67rpx;
flex-shrink: 0;
}
.content {
width: 370rpx;
padding: 20.67rpx 0 24rpx 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.title {
font-family: PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
width: 367rpx;
}
.bottom {
width: 370rpx;
display: flex;
justify-content: flex-end;
}
.price {
font-family: PingFang SC;
font-weight: bold;
font-size: 33.33rpx;
color: #F02A2A;
display: flex;
align-items: baseline;
}
.price::before{
content: '¥';
font-size: 24rpx;
}
.price::after{
content: '起';
font-size: 24rpx;
color: #666;
font-weight: 500;
}
</style>