459 lines
10 KiB
Vue
459 lines
10 KiB
Vue
<template>
|
|
<view class="shop-page">
|
|
<view class="header" :style="{paddingTop:statusBarHeight}">
|
|
<view class="header-title">蜜丫妈妈</view>
|
|
<view class="header-search" @click="goSearch">
|
|
<image src="@/static/index/ss.png" mode="" class="header-img"></image>
|
|
搜索
|
|
</view>
|
|
<view class="header-name">商城</view>
|
|
</view>
|
|
<view class="header-swiper">
|
|
<swiper class="shop-banner-img" :indicator-dots="true" indicator-color="#fff">
|
|
<swiper-item v-for="(s,d) in rollingImgsList" :key="d">
|
|
<image :src="s.cover" mode="aspectFill" class="shop-banner-img" @click="goAd(s)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scroll" scroll-with-animation :class="{'scroll-top':scrollTop > 150}">
|
|
<view v-for="(item,index) in tabList" :key="item.id" class="tab-item" :class="{'active':index === tabIndex}"
|
|
@click="tabCk(index)">
|
|
<view class="tab-item-detail">
|
|
{{item.name}}
|
|
<image src="@/static/index/dj.png" mode="" class="tab-active" v-if="tabIndex === index"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="shop-main">
|
|
<swiper class="shop-list" @change="swiperChange" :current="tabIndex" :style="{ height: swiperHeight }" circular>
|
|
<template v-for="(v,i) in tabList">
|
|
<swiper-item class="shop-list-main" :key="i">
|
|
<view class="empty" v-if="list.length === 0">
|
|
<empty></empty>
|
|
</view>
|
|
<view class="shop-grid">
|
|
<view class="shop-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<image :src="item.coverResource.url" mode="" class="shop-img"></image>
|
|
<view class="shop-name">{{item.name}}</view>
|
|
<view class="shop-price">
|
|
<view class="price">¥{{item.price.sale}}</view>
|
|
<view class="price-dou">
|
|
积分{{item.point.mall | numberFormat(item.point.mall)}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</template>
|
|
</swiper>
|
|
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
|
</view>
|
|
<FloatWindowCom></FloatWindowCom>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/product/product"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FloatWindowCom from '@/pages/components/floatWindow.vue'
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { productTagsApi,productApi } from '@/API/product.js'
|
|
import { product,categories,rollingImgs } from '@/API/shop.js'
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
|
import reportClickFn from '@/utils/report.js'
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
statusBarHeight,
|
|
tabList: [],
|
|
tabIndex: 0,
|
|
scroll: 0,
|
|
list:[],
|
|
swiperHeight:'0rpx',
|
|
page:1,
|
|
rollingImgsList:[{
|
|
cover: "http://img2.baidu.com/it/u=147259493,3347073068&fm=253&app=138&f=JPEG?w=1067&h=800"
|
|
},
|
|
{
|
|
cover: "https://img0.baidu.com/it/u=1867724397,1737503093&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
|
|
},
|
|
{
|
|
cover: "http://img0.baidu.com/it/u=2195862473,1251618031&fm=253&app=138&f=JPEG?w=1201&h=800"
|
|
}],
|
|
scrollTop:0,
|
|
total:0
|
|
}
|
|
},
|
|
components:{FloatWindowCom},
|
|
onPageScroll(res) {
|
|
this.scrollTop = res.scrollTop
|
|
},
|
|
onShow() {
|
|
// reportClickFn('product_index_clk')
|
|
},
|
|
mounted() {
|
|
this.getProductTags()
|
|
},
|
|
methods: {
|
|
// 获取商品标签
|
|
getProductTags(){
|
|
productTagsApi().then(res => {
|
|
if(res.code === 200){
|
|
this.tabList = res.data
|
|
let ids = res.data[0] && res.data[0].id
|
|
this.getProduct(ids)
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取商品
|
|
getProduct(tagId){
|
|
productApi({page:this.page,size:10,tagId,}).then(res => {
|
|
uni.hideLoading()
|
|
if(res.code === 200){
|
|
this.total = res.data.total
|
|
if(this.page > 1){
|
|
this.list = [...this.list,...res.data.content]
|
|
}else{
|
|
this.list = res.data.content
|
|
}
|
|
let height = Math.ceil(this.list.length / 2) * 410;
|
|
|
|
if(height < 900){
|
|
this.swiperHeight = `1018rpx`
|
|
}else{
|
|
this.swiperHeight = `${height}rpx`
|
|
}
|
|
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
goAd(item){
|
|
// 0:内链,1:外链
|
|
if(item.linkType === 0){
|
|
uni.navigateTo({
|
|
url:`${item.link}`
|
|
})
|
|
}else if(item.linkType === 1){
|
|
window.open(item.link)
|
|
}
|
|
},
|
|
// 获取轮播
|
|
getRollingImgs(){
|
|
|
|
},
|
|
// 点击tabIndex
|
|
tabCk(index) {
|
|
this.tabIndex = index;
|
|
this.page = 1;
|
|
this.scroll = index * 80;
|
|
},
|
|
swiperChange(e){
|
|
this.tabIndex = e.target.current;
|
|
this.scroll = this.tabIndex * 80;
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.getProduct(this.tabList[this.tabIndex].id)
|
|
},
|
|
// 点击搜索
|
|
goSearch(){
|
|
uni.navigateTo({
|
|
url:`/pages/search/index`
|
|
})
|
|
},
|
|
// 查看详情
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url:`/pages/product/detail?id=${item.id}`
|
|
})
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
if(this.total == this.list.length){
|
|
return
|
|
}
|
|
this.page += 1;
|
|
this.getProduct(this.tabList[this.tabIndex].id)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
// background-color: #F9F6F7;
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.shop-page {
|
|
min-height: calc(100vh - var(--window-bottom));
|
|
.header {
|
|
position: fixed;
|
|
z-index: 10;
|
|
width: 100%;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #F9F6F7;
|
|
padding-bottom: 10rpx;
|
|
|
|
.header-title {
|
|
font-weight: 400;
|
|
font-size: 50rpx;
|
|
color: #000000;
|
|
font-family: YouSheBiaoTiHei;
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
.header-search {
|
|
margin-left: 45rpx;
|
|
position: relative;
|
|
width: 334rpx;
|
|
height: 65rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 33rpx;
|
|
font-size: 24rpx;
|
|
color: rgba(0,0,0,0.5);
|
|
padding-left: 60rpx;
|
|
padding-right: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.header-img {
|
|
position: absolute;
|
|
top: 18rpx;
|
|
left: 22rpx;
|
|
width: 29rpx;
|
|
height: 29rpx;
|
|
}
|
|
|
|
.header-input {
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
width: 334rpx;
|
|
height: 65rpx;
|
|
padding-left: 60rpx;
|
|
padding-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.header-name {
|
|
margin-left: 45rpx;
|
|
font-weight: bold;
|
|
font-size: 33rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.header-swiper{
|
|
padding-top: 130rpx;
|
|
margin-left: 26rpx;
|
|
.shop-banner-img {
|
|
width: 706rpx;
|
|
height: 256rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.scroll-view {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
padding-top: 46rpx;
|
|
z-index: 10;
|
|
// display: flex;
|
|
// align-items: center;
|
|
.tab-item {
|
|
display: inline-block;
|
|
color: #6D6D6D;
|
|
font-size: 32rpx;
|
|
margin-left: 54rpx;
|
|
.tab-item-detail{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.tab-active {
|
|
width: 42rpx;
|
|
height: 18rpx;
|
|
margin-top: 13rpx;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
font-size: 38rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.scroll-top{
|
|
position: fixed;
|
|
top: 100rpx;
|
|
left: 0;
|
|
background-color: #F9F6F7;
|
|
}
|
|
.header-fixed{
|
|
// position: sticky;
|
|
width:100%;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 999;
|
|
background-color: #70E3DE;
|
|
.shop-header {
|
|
width: 100%;
|
|
|
|
.search {
|
|
padding: 36rpx 32rpx 0 32rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.search-img {
|
|
position: absolute;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
left: 58rpx;
|
|
top: 50rpx;
|
|
}
|
|
|
|
.search-input {
|
|
width: 624rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
padding-left: 88rpx;
|
|
}
|
|
|
|
.search-classify {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.shop-main {
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F3 100%);
|
|
border-radius: 24rpx 24rpx 0px 0px;
|
|
margin-top: -5.7rpx;
|
|
// padding: 30rpx 32rpx;
|
|
// min-height: calc(100vh - 320rpx);
|
|
// margin-top: 20rpx;
|
|
|
|
|
|
.shop-list {
|
|
// overflow-y: scroll;
|
|
.shop-list-main{
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.empty{
|
|
padding-top: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.empty-img{
|
|
width: 120rpx;
|
|
height: 152rpx;
|
|
}
|
|
.empty-txt{
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
.shop-grid{
|
|
display: grid;
|
|
gap: 12rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 35rpx 22rpx;
|
|
background: linear-gradient(181deg, #FFEAEE 0%, rgba(247, 207, 215, 0) 100%);
|
|
border: 2rpx solid #FFFFFF;
|
|
border-bottom: none;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
.shop-item {
|
|
width: 347rpx;
|
|
height: 380rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx;
|
|
|
|
.shop-img {
|
|
width: 327rpx;
|
|
height: 272rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.shop-name {
|
|
padding: 0 10rpx;
|
|
margin-top: 15rpx;
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
width: 320rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// display: -webkit-box;
|
|
// -webkit-box-orient: vertical;
|
|
// -webkit-line-clamp: 2;
|
|
}
|
|
|
|
.shop-price {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
// margin-top: 12rpx;
|
|
padding: 0 14rpx;
|
|
|
|
.price {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
font-family: YouSheBiaoTiHei;
|
|
color: #FB2851;
|
|
}
|
|
|
|
.price-dou {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
color: rgba(0,0,0,0.6);
|
|
margin-left: 10rpx;
|
|
|
|
.dou-img {
|
|
margin-right: 6rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.no-data{
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0 30rpx 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|