221 lines
9.6 KiB
Vue
221 lines
9.6 KiB
Vue
|
<template>
|
||
|
|
<view class="waper">
|
||
|
|
<u-navbar :autoBack="true" :bgColor="scrollTop > 20 ? '#fff' : 'transparent'" :left-icon-color="scrollTop > 20 ? '#303133' : '#FFF'">
|
||
|
|
<view slot='center' class="navbar_title">{{scrollTop > 20 ? '文创特产' : ''}}</view>
|
||
|
|
</u-navbar>
|
||
|
|
<view class="banner">
|
||
|
|
<swiper :autoplay="true" :interval="5000" :duration="1000">
|
||
|
|
<swiper-item>
|
||
|
|
<image src="https://common/shop_bg.png" mode=""></image>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
<view class="waper_box">
|
||
|
|
<view class="search">
|
||
|
|
<view class="icon">
|
||
|
|
<u-icon name="search" color="#999" size="40rpx"></u-icon>
|
||
|
|
</view>
|
||
|
|
<input type="text" placeholder="搜索商品/关键词" v-model="title" placeholder-class="placeholder" @input="setTitle" />
|
||
|
|
</view>
|
||
|
|
<view class="hot" v-if="recommendList.length > 0">
|
||
|
|
<view class="home_title">
|
||
|
|
<view class="left">
|
||
|
|
<view>口碑榜</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="32rpx" top="2rpx"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="hot_waper">
|
||
|
|
<scroll-view scroll-x="true">
|
||
|
|
<navigator hover-class="none" class="list" v-for="(i, index) in recommendList" :key="index" :url="'/pages/shop/detail?id=' + i.id">
|
||
|
|
<image :src="$utils.setImgUrl(i.image)" mode=""></image>
|
||
|
|
<view class="title">{{i.title}}</view>
|
||
|
|
<view class="money">
|
||
|
|
<text>￥</text>
|
||
|
|
<text>{{i.price}}</text>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list_box">
|
||
|
|
<scroll-view scroll-x="true">
|
||
|
|
<view class="menu">
|
||
|
|
<view v-for="(i, index) in menu" :key="index" :class="{active: menuIndex === i.id}" @click="tabMenu(i)">
|
||
|
|
{{i.name}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<view class="list_waper">
|
||
|
|
<navigator class="list" v-for="(i, index) in list" :key="index" hover-class="none" :url="'/pages/shop/detail?id=' + i.id">
|
||
|
|
<view class="img">
|
||
|
|
<image :src="$utils.setImgUrl(i.image)" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<view class="info">
|
||
|
|
<view>{{i.title}}</view>
|
||
|
|
<view>
|
||
|
|
<text>{{i.price}}</text>
|
||
|
|
<text>已售{{(i.showSales ? i.showSales : 0) + i.sales}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
<view class="null" v-if="list.length == 0">~ 暂无数据 ~</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
scrollTop: 0,
|
||
|
|
menu: [],
|
||
|
|
menuIndex: '',
|
||
|
|
list: [],
|
||
|
|
total: 0,
|
||
|
|
title: '',
|
||
|
|
categoryList: [],
|
||
|
|
recommendList: [],
|
||
|
|
page: 1,
|
||
|
|
loding: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll (e) {
|
||
|
|
this.scrollTop = e.scrollTop;
|
||
|
|
},
|
||
|
|
onReachBottom () {
|
||
|
|
if (this.loding) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (this.list.length >= this.total) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.page ++;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
async onLoad () {
|
||
|
|
let config = uni.getStorageSync('configData');;
|
||
|
|
let category = await this.$shop.getCategoryList({ pid: 0, scenicId: this.$scenicId, storeId: 1 });
|
||
|
|
let arr = [{ name: '全部商品', id: '' }];
|
||
|
|
category.data.forEach((item) => {
|
||
|
|
arr.push({ name: item.name, id: item.id })
|
||
|
|
})
|
||
|
|
this.menu = arr;
|
||
|
|
let shop = await this.$shop.getGoodsList({ pageNum: 1, pageSize: 3, flag: 'recommend' });
|
||
|
|
this.recommendList = shop.rows;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setTitle () {
|
||
|
|
this.page = 1;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
async getList () {
|
||
|
|
this.loding = true;
|
||
|
|
let data = { pageNum: this.page, pageSize: 10 };
|
||
|
|
if (this.menuIndex) data.categoryIds = this.menuIndex;
|
||
|
|
if (this.title) data.title = this.title;
|
||
|
|
let info = await this.$shop.getGoodsList(data);
|
||
|
|
this.total = info.total;
|
||
|
|
if (this.page == 1) this.list = [];
|
||
|
|
this.list = this.list.concat(info.rows);
|
||
|
|
this.loding = false;
|
||
|
|
},
|
||
|
|
tabMenu (info) {
|
||
|
|
this.menuIndex = info.id;
|
||
|
|
this.page = 1;
|
||
|
|
this.getList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.banner{
|
||
|
|
width: 100%; height: 588rpx;
|
||
|
|
swiper{ width: 100%; height: 100%; }
|
||
|
|
}
|
||
|
|
.waper_box{
|
||
|
|
width: 100%; background: #FFFFFF; border-radius: 30rpx 30rpx 0 0; box-sizing: border-box; padding: 70rpx 24rpx; margin-top: -98rpx; position: relative; z-index: 5;
|
||
|
|
.search{
|
||
|
|
width: 100%; height: 80rpx; border-radius: 40rpx; box-sizing: border-box; padding-left: 82rpx; padding-right: 32rpx; position: relative; background: #F6F6F6; margin-bottom: 40rpx;
|
||
|
|
.icon{ position: absolute; left: 32rpx; top: 50%; transform: translateY(-50%); }
|
||
|
|
input{ width: 100%; height: 100%; font-size: 28rpx; color: rgba(0,0,0,0.25); }
|
||
|
|
.placeholder{ color: #999; }
|
||
|
|
}
|
||
|
|
.hot{
|
||
|
|
width: 100%;
|
||
|
|
.home_title{
|
||
|
|
width: 100%; display: flex; justify-content: space-between; align-items: center; height: 50rpx;
|
||
|
|
.left{
|
||
|
|
view{ line-height: 53rpx; color: rgba(0,0,0,0.85); font-size: 36rpx; font-weight: 500; position: relative; z-index: 3; }
|
||
|
|
}
|
||
|
|
.right{ display: flex; align-items: center; }
|
||
|
|
}
|
||
|
|
.hot_waper{
|
||
|
|
width: 100%; margin-top: 20rpx; box-sizing: border-box;
|
||
|
|
scroll-view{ width: 100%; white-space: nowrap; }
|
||
|
|
.list{
|
||
|
|
width: 220rpx; height: 100%; display: inline-block; vertical-align: top; margin-right: 21rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,0.05); border-radius: 10rpx; padding-bottom: 14rpx; margin-bottom: 32rpx;
|
||
|
|
&:last-child{ margin-right: 0; }
|
||
|
|
image{ width: 220rpx; height: 220rpx; vertical-align: top; border-radius: 10rpx 10rpx 0 0; }
|
||
|
|
.title{ margin-top: 12rpx; height: 42rpx; line-height: 42rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding: 0 20rpx; }
|
||
|
|
.money{
|
||
|
|
margin-top: 4rpx; height: 38rpx; display: flex; align-items: flex-end; padding: 0 20rpx;
|
||
|
|
text{
|
||
|
|
color: #FF3333;
|
||
|
|
&:first-child{ font-size: 24rpx; position: relative; top: -2rpx; }
|
||
|
|
&:last-child{ font-size: 32rpx; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list_box{
|
||
|
|
width: 100%;
|
||
|
|
.menu{
|
||
|
|
width: 100%; display: flex; align-items: flex-end; flex-wrap: nowrap;
|
||
|
|
view{
|
||
|
|
vertical-align: top; margin-right: 36rpx; height: 42rpx; line-height: 33rpx; color: rgba(0,0,0,0.45); font-size: 28rpx; white-space: nowrap;
|
||
|
|
&.active{
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: rgba(0,0,0,0.85);
|
||
|
|
line-height: 42rpx;
|
||
|
|
height: 53rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list_waper{
|
||
|
|
width: 100%; font-size: 0;
|
||
|
|
.list{
|
||
|
|
width: 341rpx; display: inline-block; vertical-align: top; background: #fff; margin-right: 20rpx; margin-top: 22rpx; border-radius: 10rpx; overflow: hidden;box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.05);
|
||
|
|
&:nth-child(2n){ margin-right: 0; }
|
||
|
|
.img{
|
||
|
|
width: 100%; height: 316rpx;
|
||
|
|
}
|
||
|
|
.info{
|
||
|
|
width: 100%; height: 196rpx; box-sizing: border-box; padding: 19rpx 24rpx 25rpx;
|
||
|
|
view{
|
||
|
|
&:nth-child(1){ line-height: 40rpx; height: 80rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
||
|
|
&:nth-child(2){
|
||
|
|
height: 44rpx; margin-top: 24rpx; display: flex; justify-content: space-between; align-items: flex-end;
|
||
|
|
text{
|
||
|
|
&:first-child{
|
||
|
|
color: #FF3333; font-size: 40rpx; font-weight: bold; padding-left: 24rpx; position: relative;
|
||
|
|
&::after{ content: "￥"; color: #FD3306; font-weight: normal; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
|
||
|
|
}
|
||
|
|
&:last-child{ color: rgba(0,0,0,0.45); font-size: 28rpx; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.null{ text-align: center; color: rgba(0,0,0,0.45); font-size: 28rpx; padding: 40rpx 0; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|