479 lines
11 KiB
Vue
479 lines
11 KiB
Vue
<template>
|
|
<view class="shop-page">
|
|
<view class="header">
|
|
<view class="select-main">
|
|
<view class="search" @click="goSearch">
|
|
<image src="@/static/new/search.png" mode="aspectFit" class="search-icon"></image>
|
|
<view class="search-txt">请输入内容</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="tag" v-if="tabList.length > 0">
|
|
<!-- tag-active -->
|
|
<view class="tag-item" v-for="(item,index) in tabList" :key="item.id" :class="{'tag-active':index === tabIndex,paddingRights:index === tabList.length-1}" @click="tabCk(index)">
|
|
{{item.name}}
|
|
<view class="active" v-if="tabIndex === index"></view>
|
|
<view class="active-no" v-else></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="main" @scrolltolower="scrolltolower">
|
|
<swiper class="banner" :indicator-dots="true" indicator-color="#fff" v-if="rollingImgsList.length > 0">
|
|
<swiper-item v-for="(s,d) in rollingImgsList" :key="d">
|
|
<image v-if="s.coverResource" :src="s.coverResource.url" mode="aspectFill" class="banner-img" @click="goAd(s)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<view class="shop">
|
|
<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name">{{item.abbreviation}}</view>
|
|
<view class="point">
|
|
<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
|
|
{{item.point.mall}}
|
|
<!-- {{item.point.mall | numberFormat(item.point.mall)}} -->
|
|
</view>
|
|
<!-- <view class="price">¥{{item.price.sale}}</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
|
</scroll-view>
|
|
<!-- 是否有未开完的奖品 -->
|
|
<NoOpenCom></NoOpenCom>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/shop/index" v-if="visible"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FloatWindowCom from '@/pages/components/floatWindow.vue'
|
|
import NoOpenCom from '@/pages/index/components/noOpen.vue'
|
|
import {
|
|
myMixins
|
|
} from "@/mixins/mixins.js";
|
|
import {
|
|
productTagsApi,
|
|
productApi
|
|
} from '@/API/product.js'
|
|
import {
|
|
product,
|
|
categories,
|
|
rollingImgs,
|
|
productChannelApi,
|
|
tagsChannelApi,
|
|
tagsPointApi,
|
|
productChannelPointApi
|
|
} from '@/API/shop.js'
|
|
import {
|
|
popupAdApi
|
|
} from '@/API/user.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: [],
|
|
scrollTop: 0,
|
|
total: 0,
|
|
visible:false
|
|
}
|
|
},
|
|
components: {
|
|
FloatWindowCom,NoOpenCom
|
|
},
|
|
onPageScroll(res) {
|
|
this.scrollTop = res.scrollTop
|
|
},
|
|
onShow() {
|
|
uni.$on('updateTabData', (data) => {
|
|
this.visible = false
|
|
setTimeout(() => {
|
|
this.visible = true
|
|
},500)
|
|
});
|
|
// 积分商城埋点
|
|
reportClickFn('product_index_clk')
|
|
},
|
|
mounted() {
|
|
this.visible = true
|
|
this.getProductTags()
|
|
this.getPopupAd('MALL_CAROUSEL')
|
|
},
|
|
methods: {
|
|
// 获取商品标签
|
|
getProductTags() {
|
|
// tagsPointApi().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)
|
|
// }
|
|
// })
|
|
tagsChannelApi().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)
|
|
}
|
|
})
|
|
// 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)
|
|
// }
|
|
// })
|
|
},
|
|
// 获取广告弹窗/轮播
|
|
getPopupAd(type) {
|
|
// HOMEPAGE_CAROUSEL 轮播
|
|
// HOMEPAGE_POPUP 弹窗
|
|
popupAdApi({
|
|
type
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
if (type === 'MALL_CAROUSEL') {
|
|
this.rollingImgsList = res.data
|
|
}
|
|
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 获取商品
|
|
getProduct(tagId) {
|
|
// productChannelPointApi({
|
|
// page: this.page,
|
|
// size: 10,
|
|
// code,
|
|
// }).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)
|
|
// }
|
|
// })
|
|
productChannelApi({
|
|
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)
|
|
}
|
|
})
|
|
// 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) {
|
|
if (item.link) {
|
|
if (item.link.type === 'INSIDE') {
|
|
uni.navigateTo({
|
|
url: `${item.link.url}`
|
|
})
|
|
} else {
|
|
window.open(item.link.url)
|
|
}
|
|
}
|
|
},
|
|
// 获取轮播
|
|
getRollingImgs() {
|
|
|
|
},
|
|
// 点击tabIndex
|
|
tabCk(index) {
|
|
this.tabIndex = index;
|
|
this.page = 1;
|
|
this.getProduct(this.tabList[this.tabIndex].id)
|
|
},
|
|
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/shop/search`
|
|
})
|
|
},
|
|
// 查看详情
|
|
goDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/shop/detail?id=${item.id}`
|
|
})
|
|
},
|
|
scrolltolower(){
|
|
if (this.total == this.list.length) {
|
|
return
|
|
}
|
|
this.page += 1;
|
|
let id = ''
|
|
if(this.tabList.length > 0){
|
|
id = this.tabList[this.tabIndex].id
|
|
}
|
|
this.getProduct(id)
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
// if (this.total == this.list.length) {
|
|
// return
|
|
// }
|
|
// this.page += 1;
|
|
// this.getProduct(this.tabList[this.tabIndex].id)
|
|
},
|
|
onTabItemTap(){
|
|
// 商城tabbar点击次数
|
|
reportClickFn('product_tabbar');
|
|
console.log("我点击了商城的bar")
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.shop-page {
|
|
.header {
|
|
width: 100%;
|
|
height: 168rpx;
|
|
background-color: #fff;
|
|
.select-main{
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.search {
|
|
width: 686rpx;
|
|
height: 72rpx;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border-radius: 16rpx;
|
|
margin-left: 32rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
top: 12rpx;
|
|
left: 16rpx;
|
|
}
|
|
|
|
.search-txt {
|
|
font-size: 32rpx;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
padding-left: 72rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tag {
|
|
padding: 16rpx 0 0 0;
|
|
white-space: nowrap;
|
|
height: 96rpx;
|
|
|
|
.tag-item {
|
|
display: inline-block;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin-left: 48rpx;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// flex-direction: column;
|
|
max-width: 200rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
.active {
|
|
width: 48rpx;
|
|
height: 8rpx;
|
|
background: linear-gradient(90deg, #4FCDFD 0%, rgba(79, 205, 253, 0) 100%);
|
|
border-radius: 4rpx 0px 0px 4px;
|
|
margin: 0 auto;
|
|
}
|
|
.active-no{
|
|
width: 48rpx;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
.paddingRights{
|
|
padding-right: 40rpx;
|
|
}
|
|
|
|
.tag-active {
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
height: calc(100vh - 286rpx);
|
|
// margin-top: -20rpx;
|
|
|
|
.banner {
|
|
width: 750rpx;
|
|
height: 320rpx;
|
|
|
|
.banner-img {
|
|
width: 750rpx;
|
|
height: 320rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 22rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 24rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.item {
|
|
width: 340rpx;
|
|
// height: 436rpx;
|
|
padding-bottom: 12rpx;
|
|
background-color: #fff;
|
|
|
|
.shop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 340rpx;
|
|
height: 240rpx;
|
|
background-image: url('@/static/new/card-shop.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
|
|
border-radius: 8rpx 8rpx 0px 0px;
|
|
|
|
.shop-img {
|
|
// width: 192rpx;
|
|
height: 236rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
width: 304rpx;
|
|
height: 80rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin: 16rpx 0 0 16rpx;
|
|
}
|
|
|
|
.point {
|
|
margin: 8rpx 0 0 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
.point-icon {
|
|
margin-right: 8rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
margin-left: 16rpx;
|
|
height: 40rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |