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.
351 lines
7.4 KiB
351 lines
7.4 KiB
<template>
|
|
<view>
|
|
<navbar></navbar>
|
|
|
|
<view class="wrap">
|
|
<view class="swiper">
|
|
<u-swiper
|
|
:list="banners"
|
|
:height="340"
|
|
:border-radius="0"
|
|
name="url"
|
|
bg-color="#fff"
|
|
></u-swiper>
|
|
</view>
|
|
<view class="grid">
|
|
<view
|
|
class="grid-item"
|
|
@tap="
|
|
$u.route({
|
|
url: '/package_sub/pages/Shop/Cart',
|
|
type: 'reLaunch',
|
|
})
|
|
"
|
|
>
|
|
<view class="grid-item__icon">
|
|
<image
|
|
src="~@/package_sub/static/Shop/cart.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
<view class="grid-item__name">购物车</view>
|
|
</view>
|
|
<view
|
|
class="grid-item"
|
|
@tap="
|
|
$u.route({
|
|
url: '/package_sub/pages/Shop/ProductList',
|
|
type: 'reLaunch',
|
|
})
|
|
"
|
|
>
|
|
<view class="grid-item__icon">
|
|
<image
|
|
src="~@/package_sub/static/Shop/fenlei.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
<view class="grid-item__name">更多分类</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="limit-sale">
|
|
<view class="limit-sale__title">
|
|
<text>特别推荐</text>
|
|
<text>精选好货推荐给你</text>
|
|
</view>
|
|
|
|
<scroll-view scroll-x="true" style="margin-top: 30rpx;">
|
|
<view class="limit-sale__wrap">
|
|
<view
|
|
class="product-item"
|
|
v-for="item in recommendPro.slice(0, 6)"
|
|
: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>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="recommend">
|
|
<view class="recommend-title">
|
|
<text>/</text>
|
|
<text>精品特卖</text>
|
|
<text>/</text>
|
|
</view>
|
|
<view class="recommend-wrap">
|
|
<view
|
|
class="product-item"
|
|
v-for="item in recommendPro"
|
|
: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>
|
|
|
|
<tabbar></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "./Tabbar.vue";
|
|
import navbar from "./Navbar.vue";
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
navbar,
|
|
},
|
|
data() {
|
|
return {
|
|
banners: [],
|
|
recommendPro: [],
|
|
};
|
|
},
|
|
methods: {
|
|
toDetail(item) {
|
|
this.$u.route({
|
|
url: "/package_sub/pages/Shop/ProductDetail",
|
|
params: {
|
|
id: item.id,
|
|
},
|
|
});
|
|
},
|
|
async getBanner() {
|
|
try {
|
|
const res = await this.$u.api.banner({
|
|
position: 3,
|
|
});
|
|
this.banners = res.map((i) => ({
|
|
...i,
|
|
url: i.image?.url ?? "",
|
|
}));
|
|
} catch (err) {}
|
|
},
|
|
async getRecommendPro() {
|
|
try {
|
|
const res = await this.$u.api.productList({
|
|
page: 1,
|
|
page_size: 8,
|
|
sort_name: "sort",
|
|
});
|
|
this.recommendPro = res.list?.data;
|
|
} catch (err) {}
|
|
},
|
|
},
|
|
created() {
|
|
this.getBanner();
|
|
this.getRecommendPro();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f7f7f7;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-swiper-indicator {
|
|
bottom: 38rpx !important;
|
|
}
|
|
.wrap {
|
|
.grid {
|
|
padding: 36rpx 0;
|
|
background: #fff;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 25%);
|
|
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&__icon {
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
image {
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
}
|
|
}
|
|
&__name {
|
|
font-size: 24rpx;
|
|
letter-spacing: 2rpx;
|
|
color: #323333;
|
|
padding-top: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.limit-sale {
|
|
margin-top: 32rpx;
|
|
background: #fff;
|
|
padding: 44rpx 30rpx;
|
|
|
|
&__title {
|
|
text:nth-child(1) {
|
|
font-size: 36rpx;
|
|
letter-spacing: 4rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
text:nth-child(2) {
|
|
font-size: 28rpx;
|
|
letter-spacing: 2rpx;
|
|
color: #999;
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
&__wrap {
|
|
display: flex;
|
|
|
|
.product-item {
|
|
background: #fff;
|
|
padding: 12rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.bottom {
|
|
padding-top: 16rpx;
|
|
}
|
|
&__img {
|
|
width: 219rpx;
|
|
height: 159rpx;
|
|
}
|
|
&__title {
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
max-width: 200rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
&__price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
color: red;
|
|
}
|
|
text:nth-child(1) {
|
|
font-size: 24rpx;
|
|
}
|
|
text:nth-child(2) {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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>
|