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.
625 lines
14 KiB
625 lines
14 KiB
<template>
|
|
<BaseContainer class="store" :fixedNav="false">
|
|
<view class="header"
|
|
:style="'padding-top:' + (menutop * 2 + 58 + 18) + 'rpx;'">
|
|
<view class="search"
|
|
@click="getsearch()"
|
|
:style="{background: scrollTop > 10 ? '#f5f5f5' : 'transparent', paddingTop: (menutop * 2) + 'rpx', paddingBottom: '20rpx', height: (menutop * 2 + 58 + 20) + 'rpx'}"
|
|
>
|
|
<view>
|
|
<image class="image_icon" :src="getImgPath('/public/images/icon.png')" mode="aspectFill" />
|
|
<view class="name">
|
|
搜索商品
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 0 30rpx;">
|
|
<view class="swiper-box">
|
|
<swiper class="custom-banner" indicator-dots autoplay
|
|
@click="handleBannerClick" @change="getChangeImage">
|
|
<swiper-item v-for="(item, index) in banner" :key="index" :data-url="item.url" class="swiper-item">
|
|
<image :data-url="item.url" mode="aspectFill" :src="item.pic" :alt="item.title" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="tab-bar-placeholder">
|
|
<view class="flex tab-content">
|
|
<view :data-idx="index" class="tab-item" v-for="(item, index) in categoryList" :key="item.id" @click="handleCateClick(item)">
|
|
<image v-if="item.id > 0" :src="item.pic" mode="aspectFill"></image>
|
|
<image v-else :src="getImgPath('/static/frontend/more.png')" mode="aspectFill"></image>
|
|
<view>{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 广告 -->
|
|
<advert />
|
|
<view class="goods-section">
|
|
<view class="goods-title">精品推荐</view>
|
|
<view class="list">
|
|
<navigator hover-class="none" v-for="item in goodsList" :key="item.id" class="item flex"
|
|
:url="'/pages/store/detail?id=' + item.id">
|
|
<view class="image">
|
|
<image mode="aspectFit" class="img" :src="item.image" alt="" />
|
|
</view>
|
|
<view class="text">
|
|
<view class="title">{{ item.store_name }}</view>
|
|
<view class="group">
|
|
<view class="group-l">
|
|
<view class="price">
|
|
￥<span class="num">{{ item.price }}</span>
|
|
</view>
|
|
<view class="sale">已售{{ item.sales }}件</view>
|
|
</view>
|
|
<view class="group-r">
|
|
<view class="auth-btn flex">
|
|
<image src="@/static/images/store/icon.png" mode="aspectFill"></image>
|
|
正版授权
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view v-if="goodsList.length && !loading" class="finished">{{ loadTitle }}</view>
|
|
<view v-if="finished && !goodsList.length" class="empty">
|
|
<image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无商品" />
|
|
<view>暂无商品</view>
|
|
</view>
|
|
<!-- <view style="height: var(--tab-bar-height)"></view> -->
|
|
</view>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getGoodsCateList, getGoodsList, getRecommendGoodsList, getIndexData } from "@/api/store";
|
|
import RecommendPoster from "@/components/RecommendPoster/index.vue";
|
|
import Advert from '@/components/Advert/index.vue';
|
|
|
|
export default {
|
|
components: {
|
|
RecommendPoster,
|
|
Advert,
|
|
},
|
|
data() {
|
|
const systemInfo = this.$util.getSystemInfo();
|
|
const { statusBarHeight } = systemInfo;
|
|
return {
|
|
advertList: [
|
|
{
|
|
"id": 46,
|
|
"title": "广告1",
|
|
"url": "#",
|
|
"banner": "https://mytest101011.oss-cn-shenzhen.aliyuncs.com/d588f202305161726583206.png",
|
|
"sort": "0"
|
|
}
|
|
],
|
|
statusBarHeight,
|
|
banner: [],
|
|
categoryList: [],
|
|
goodsList: [],
|
|
activeId: 0,
|
|
loadTitle: "",
|
|
page: 1,
|
|
limit: 16,
|
|
loading: false,
|
|
finished: false,
|
|
isFixed: false,
|
|
offsetTop: 0,
|
|
offsetHeight: 0,
|
|
tabBarFixed: false,
|
|
tabBarTopSize: 0,
|
|
color_one: '',
|
|
color_two: '',
|
|
menutop: 10,
|
|
scrollTop: 0,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.handlePageScroll = this.$util.debounce(this.handlePageScroll, 30);
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
/* #ifdef MP-WEIXIN || MP-KUAISHOU */
|
|
this.menutop = menuButtonInfo.top;
|
|
/* #endif */
|
|
/* #ifdef APP-PLUS */
|
|
let platform = uni.getSystemInfoSync().platform
|
|
if(platform === 'ios'){
|
|
this.menutop = 60;
|
|
}else{
|
|
this.menutop = 40;
|
|
}
|
|
/* #endif */
|
|
/* #ifdef MP-TOUTIAO */
|
|
this.menutop = 10;
|
|
/* #endif */
|
|
this.getGoodsCateList();
|
|
// this.getGoodsList();
|
|
this.getRecommendGoodsList();
|
|
this.getIndexData();
|
|
},
|
|
onReachBottom() {
|
|
// this.getGoodsList();
|
|
},
|
|
onPageScroll({ scrollTop }) {
|
|
this.scrollTop = scrollTop;
|
|
this.handlePageScroll(scrollTop);
|
|
},
|
|
onShareAppMessage() {
|
|
return {};
|
|
},
|
|
onShareTimeline() {
|
|
return {};
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
getsearch() {
|
|
uni.navigateTo({
|
|
url:'/pages/store/goodsList'
|
|
})
|
|
},
|
|
handlePageScroll(scrollTop) {
|
|
console.log(scrollTop);
|
|
this.tabBarFixed = scrollTop + this.statusBarHeight >= this.tabBarTopSize;
|
|
},
|
|
async getIndexData() {
|
|
try {
|
|
const { data } = await getIndexData();
|
|
this.banner = data;
|
|
if(!this.color_one && !this.color_two){
|
|
this.color_one = this.banner[0].color_one;
|
|
this.color_two = this.banner[0].color_two;
|
|
}
|
|
} catch (err) { }
|
|
},
|
|
// 点击轮播图
|
|
handleBannerClick(e) {
|
|
|
|
if (e.target.dataset.url === undefined) return;
|
|
uni.navigateTo({
|
|
url: e.target.dataset.url,
|
|
});
|
|
},
|
|
getChangeImage(e) {
|
|
this.banner.forEach((item, index) => {
|
|
if (index == e.detail.current) {
|
|
this.color_one = item.color_one;
|
|
this.color_two = item.color_two;
|
|
}
|
|
});
|
|
},
|
|
// 获取分类
|
|
async getGoodsCateList() {
|
|
try {
|
|
const { data } = await getGoodsCateList();
|
|
console.log(data);
|
|
this.categoryList = data.category_list.concat([
|
|
{
|
|
name: "全部",
|
|
id: 0,
|
|
},
|
|
]);
|
|
} catch (err) { }
|
|
},
|
|
async getRecommendGoodsList() {
|
|
// if (this.loading || this.finished) {
|
|
// return;
|
|
// }
|
|
this.loadTitle = "";
|
|
this.loading = true;
|
|
|
|
try {
|
|
const { data } = await getRecommendGoodsList({});
|
|
console.log('recommendGoodsList', data);
|
|
this.goodsList = data;
|
|
console.log(this.goodsList);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
this.loading = false;
|
|
},
|
|
// 获取商品列表
|
|
async getGoodsList() {
|
|
if (this.loading || this.finished) {
|
|
return;
|
|
}
|
|
this.loadTitle = "";
|
|
this.loading = true;
|
|
|
|
try {
|
|
const { data } = await getGoodsList({
|
|
cId: this.activeId,
|
|
page: this.page++,
|
|
limit: this.limit,
|
|
});
|
|
|
|
this.goodsList = this.goodsList.concat(data);
|
|
console.log(this.goodsList);
|
|
this.finished = data.length < this.limit;
|
|
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
this.loading = false;
|
|
},
|
|
// 点击商品分类
|
|
handleCateClick(item) {
|
|
if (item.name === '全部') {
|
|
console.log(1);
|
|
uni.navigateTo({
|
|
url: '/pages/store/goodsCate'
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/store/goodsList?categoryId=${item.id}`
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
page{
|
|
background: #F7F8F9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.goods-section{
|
|
width: 690rpx;
|
|
border-radius: 24rpx;
|
|
margin: auto;
|
|
.goods-title {
|
|
padding-left: 23rpx;
|
|
position: relative;
|
|
color: #333;
|
|
font-size: 34rpx;
|
|
line-height: 74rpx;
|
|
margin-bottom: 33rpx;
|
|
margin-top: 48rpx;
|
|
&:before {
|
|
content: '';
|
|
background: linear-gradient(0deg, #24a9e1, #0f74bb);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.advert {
|
|
background: transparent;
|
|
padding: 0;
|
|
>image {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
}
|
|
}
|
|
swiper {
|
|
|
|
/deep/ {
|
|
.wx-swiper-dots-horizontal,
|
|
.uni-swiper-dots-horizontal {
|
|
left: 70%;
|
|
}
|
|
|
|
.wx-swiper-dot,
|
|
.uni-swiper-dot {
|
|
width: 12rpx;
|
|
height: 8rpx;
|
|
background: #8ab1ff;
|
|
border-radius: 4rpx;
|
|
float: left;
|
|
}
|
|
|
|
.wx-swiper-dot-active,
|
|
.uni-swiper-dot-active {
|
|
width: 24rpx;
|
|
height: 8rpx;
|
|
background: #FFFFFF !important;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.nothing {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.swiper-box {
|
|
|
|
/* #ifndef MP-TOUTIAO */
|
|
height: 306rpx;
|
|
/* #endif */
|
|
|
|
}
|
|
|
|
.custom-banner {
|
|
width: 690rpx;
|
|
height: 290rpx;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-item {
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.swiper-item image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
swiper {
|
|
|
|
/deep/ {
|
|
.wx-swiper-dots-horizontal,
|
|
.uni-swiper-dots-horizontal {
|
|
bottom: 60rpx;
|
|
}
|
|
|
|
.wx-swiper-dot,
|
|
.uni-swiper-dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 5rpx;
|
|
margin-right: 5rpx;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.wx-swiper-dot-active,
|
|
.uni-swiper-dot-active {
|
|
width: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
width: 690rpx;
|
|
margin: 30rpx auto 22rpx;
|
|
background: #fff;
|
|
flex-wrap: wrap;
|
|
padding-top: 30rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.tab-item {
|
|
width: 25%;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
font-weight: 400;
|
|
color: #666;
|
|
margin-bottom: 50rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
>image {
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
margin-bottom: 11rpx;
|
|
}
|
|
>view {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
/* #ifdef MP-KUAISHOU */
|
|
.swiper-item{
|
|
padding: 0 !important;
|
|
}
|
|
/* #endif */
|
|
.store{
|
|
// padding-bottom: calc(var(--tab-bar-height) + 60rpx);
|
|
background: linear-gradient(to top, transparent 0%, #f6f6f6 70%, #D3F2FF 80%, #53B2F5 100%);
|
|
}
|
|
.store .header {
|
|
z-index: 99;
|
|
width: 100%;
|
|
}
|
|
.store .header .search {width: 100%;
|
|
font-size: 26rpx;
|
|
color: #aaa;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
>view {
|
|
width: 90%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 40rpx;
|
|
height: 100%;
|
|
margin-left: 5%;
|
|
/* #ifdef MP-WEIXIN */
|
|
width: 65%;
|
|
/* #endif */
|
|
}
|
|
.iconfont2,
|
|
.iconfont {
|
|
margin-right: 16rpx;
|
|
font-size: 28rpx;
|
|
;
|
|
line-height: 1;
|
|
color: #aaa;
|
|
}
|
|
|
|
.image_icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
.name {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
/* 商品列表 */
|
|
.store .finished,
|
|
.store .loading {
|
|
font-size: 28rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.store .fa-spin {
|
|
|
|
animation: fa-spin 1s infinite linear;
|
|
}
|
|
|
|
.store .empty {
|
|
margin-top: 100rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.store .empty image {
|
|
display: block;
|
|
width: 414rpx;
|
|
height: 305rpx;
|
|
margin: 0 auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.store .banner {
|
|
position: relative;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.store .banner .swiper-container {
|
|
width: 710rpx;
|
|
height: 310rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.store .banner image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.store .nothing {
|
|
display: block;
|
|
width: 414rpx;
|
|
margin: 30rpx auto;
|
|
pointer-events: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.store .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.store .list .item {
|
|
width: 334rpx;
|
|
height: 455rpx;
|
|
margin-bottom: 20rpx;
|
|
background: #fff;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 25rpx;
|
|
&:nth-child(2n + 1) {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.store .list .image {
|
|
width: 250rpx;
|
|
height: 225rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.store .list .image .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: scale-down;
|
|
pointer-events: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.store .list .text {
|
|
flex: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.store .list .title {
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
line-height: 35rpx;
|
|
height: 70rpx;
|
|
color: #333;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.store .list .group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.store .list .price {
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #F8473E;
|
|
}
|
|
|
|
.store .list .price .num {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.store .list .sale {
|
|
font-size: 20rpx;
|
|
line-height: 20rpx;
|
|
color: #999;
|
|
margin-top: 7rpx;
|
|
}
|
|
.store .list .auth-btn {
|
|
width: 130rpx;
|
|
height: 39rpx;
|
|
border-radius: 6rpx;
|
|
border: 1px solid #0F74BB;
|
|
justify-content: center;
|
|
color: #0F74BB;
|
|
font-size: 20rpx;
|
|
line-height: 39rpx;
|
|
image {
|
|
width: 20rpx;
|
|
height: 23rpx;
|
|
margin-right: 8rpx;
|
|
margin-top: 7rpx;
|
|
}
|
|
}
|
|
</style> |