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.
196 lines
4.3 KiB
196 lines
4.3 KiB
<template>
|
|
<view>
|
|
<navbar :use-search="false" title="搜索"></navbar>
|
|
|
|
<view class="wrap">
|
|
<view class="search">
|
|
<u-search placeholder="请输入搜索内容"
|
|
:height="68"
|
|
v-model="keyword"
|
|
@custom="getProducts(true)"
|
|
@search="getProducts(true)"></u-search>
|
|
</view>
|
|
|
|
<view class="recommend">
|
|
<view class="recommend-wrap">
|
|
<view
|
|
class="product-item"
|
|
v-for="item in products"
|
|
:key="item.id"
|
|
@tap="
|
|
$u.throttle(() => {
|
|
toDetail(item);
|
|
}, 500)
|
|
"
|
|
>
|
|
<view class="top">
|
|
<image
|
|
class="product-item__img"
|
|
:src="item.image ? item.image.url : ''"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="product-item__title">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="product-item__price">
|
|
<view>
|
|
<text>¥</text>
|
|
<text>{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" :margin-bottom="20" @loadmore="getProducts" />
|
|
|
|
<tabbar></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";
|
|
import navbar from "@/package_sub/pages/Shop/Navbar.vue";
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
tabbar
|
|
},
|
|
data() {
|
|
return {
|
|
status: 'loadmore',
|
|
keyword: '',
|
|
select: {
|
|
page: 1,
|
|
page_size: 8,
|
|
sort_name: "sort",
|
|
'filter[0][key]': 'name',
|
|
'filter[0][op]': 'like',
|
|
},
|
|
inputStyle: {
|
|
width: "600rpx",
|
|
fontSize: "28rpx",
|
|
fontWeight: "500",
|
|
},
|
|
products: [],
|
|
total: 0
|
|
};
|
|
},
|
|
methods: {
|
|
toDetail(item) {
|
|
this.$u.route({
|
|
url: "/package_sub/pages/Shop/ProductDetail",
|
|
params: {
|
|
id: item.id,
|
|
},
|
|
});
|
|
},
|
|
async getProducts(isRefresh = false) {
|
|
if(isRefresh) {
|
|
this.select.page = 1
|
|
this.status = 'loadmore'
|
|
}
|
|
try {
|
|
if(this.status === 'nomore') return
|
|
if(this.products.length >= this.total && this.products.length !== 0 && !isRefresh) {
|
|
this.status = 'nomore'
|
|
return
|
|
}
|
|
this.status = 'loading';
|
|
const res = await this.$u.api.productList({
|
|
...this.select,
|
|
'filter[0][value]': this.keyword
|
|
});
|
|
this.products.push(...res.list?.data);
|
|
this.total = res.list?.total;
|
|
++this.select.page;
|
|
this.status = 'loadmore'
|
|
} catch (err) {
|
|
console.error(err)
|
|
this.status = 'loadmore'
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.getProducts(true)
|
|
},
|
|
onReachBottom() {
|
|
this.getProducts()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search {
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
filter: drop-shadow(0 2rpx 4rpx #00000012);
|
|
}
|
|
|
|
.recommend {
|
|
margin-top: 38rpx;
|
|
padding-bottom: 60rpx;
|
|
|
|
&-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: red;
|
|
font-size: 40rpx;
|
|
letter-spacing: 5rpx;
|
|
font-weight: bold;
|
|
position: relative;
|
|
& > text:nth-child(2) {
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
&-wrap {
|
|
padding: 0 20rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 20rpx 56rpx;
|
|
margin-top: 36rpx;
|
|
|
|
.product-item {
|
|
background: #fff;
|
|
padding: 12rpx;
|
|
|
|
.bottom {
|
|
padding-top: 16rpx;
|
|
}
|
|
&__img {
|
|
width: 100%;
|
|
height: 266rpx;
|
|
}
|
|
&__title {
|
|
font-size: 25rpx;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
&__price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
color: red;
|
|
}
|
|
text:nth-child(1) {
|
|
font-size: 21rpx;
|
|
}
|
|
text:nth-child(2) {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|