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.
368 lines
8.2 KiB
368 lines
8.2 KiB
<template> |
|
<view class="content_index"> |
|
<search_bar @toPage="toList"></search_bar> |
|
<view class="tabs"> |
|
<tabs activeColor="#FE5353" :tabList="tabList" :tabIndex="swiperIndex" @change="swiperChange"></tabs> |
|
</view> |
|
<view class="swiper_view" :style="'height:'+screenHeight+'px'"> |
|
<swiper :duration="1000" :current="swiperIndex" @change="swiperChange"> |
|
<swiper-item> |
|
<view class="goods_list"> |
|
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData"> |
|
<view class="menu_view"> |
|
<div class="menu_view_item" @click="menu(item)" v-for="(item,index) in menus" |
|
:key="index"> |
|
<img class="menu_view_item_img" :src="item.imgUrl" /> |
|
<text class="menu_view_item_text">{{item.name}}</text> |
|
</div> |
|
</view> |
|
<view class="menu_view_title">实时热销榜</view> |
|
<view class="goods_list_item" v-for="(item,index) in recommentList.obj" :key="index"> |
|
<good :search_id="search_id" :data="item" :pid="pid"></good> |
|
</view> |
|
<uni-load-more :status="recommentList.moreStatus" color="#FE5353"></uni-load-more> |
|
</scroll-view> |
|
</view> |
|
</swiper-item> |
|
<swiper-item v-for="(ite,inde) in goodList" :key="inde"> |
|
<view class="goods_list"> |
|
<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData"> |
|
<view class="goods_list_item" v-for="(item,index) in ite.obj" :key="index"> |
|
<good :search_id="search_id" :data="item" :pid="pid"></good> |
|
</view> |
|
<uni-load-more :status="ite.obj.moreStatus" color="#FE5353"></uni-load-more> |
|
</scroll-view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import good from './good_com/good.vue' |
|
import tabs from './good_com/tabs.vue' |
|
import search_bar from './good_com/search_bar.vue' |
|
|
|
import { |
|
checkAuthority |
|
} from './utils/util.js' |
|
|
|
const pddApi = uniCloud.importObject('pdd-serve') |
|
export default { |
|
components: { |
|
good, |
|
tabs, |
|
search_bar, |
|
}, |
|
data() { |
|
return { |
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, |
|
swiperIndex: 0, |
|
PageScrollTop: 0, |
|
screenHeight: 100, |
|
search_id: '', |
|
goodList: [], |
|
recommentList: { |
|
obj: [], |
|
page: 1, |
|
pageSize: 20, |
|
moreStatus: '' |
|
}, |
|
pid: '', |
|
tabList: [{ |
|
id: '', |
|
name: '推荐' |
|
}, { |
|
id: 1, |
|
name: '食品' |
|
}, |
|
{ |
|
id: 743, |
|
name: '男装' |
|
}, |
|
{ |
|
id: 14, |
|
name: '女装' |
|
}, |
|
{ |
|
id: 18, |
|
name: '电器' |
|
}, |
|
{ |
|
id: 1281, |
|
name: '鞋包' |
|
}, |
|
{ |
|
id: 1282, |
|
name: '内衣' |
|
}, |
|
{ |
|
id: 16, |
|
name: '美妆' |
|
}, |
|
|
|
{ |
|
id: 13, |
|
name: '水果' |
|
}, |
|
{ |
|
id: 818, |
|
name: '家纺' |
|
}, |
|
{ |
|
id: 2478, |
|
name: '文具' |
|
}, |
|
{ |
|
id: 1451, |
|
name: '运动' |
|
}, |
|
|
|
{ |
|
id: 15, |
|
name: '百货' |
|
}, |
|
{ |
|
id: 4, |
|
name: '母婴' |
|
}, |
|
{ |
|
id: 2048, |
|
name: '汽车' |
|
}, |
|
{ |
|
id: 1917, |
|
name: '家装' |
|
}, |
|
{ |
|
id: 2974, |
|
name: '家具' |
|
} |
|
], |
|
menus: [{ |
|
imgUrl: 'static/ddk/image/miaosha.png', |
|
name: '限时秒杀', |
|
id: 4 |
|
}, |
|
{ |
|
imgUrl: 'static/ddk/image/butie.png', |
|
name: '百亿补贴', |
|
id: 39996 |
|
}, |
|
{ |
|
imgUrl: 'static/ddk/image/lingquan.png', |
|
name: '领券中心', |
|
id: 40000 |
|
}, |
|
{ |
|
imgUrl: 'static/ddk/image/chongzhi.png', |
|
name: '充值中心', |
|
id: 39997 |
|
}, |
|
|
|
] |
|
} |
|
}, |
|
|
|
onLoad(e) { |
|
this.pid = e.p_id |
|
this.initList(); |
|
uni.getSystemInfo({ |
|
success: res => { |
|
this.screenHeight = res.screenHeight - uni.upx2px(220) //将px 转换rpx |
|
} |
|
}); |
|
}, |
|
watch: { |
|
swiperIndex(val) { |
|
if (val > 0) { |
|
if (this.goodList[val - 1].obj.length == 0) { |
|
this.goodList[val - 1].page = 1; |
|
} |
|
} else { |
|
if (this.recommentList.obj.length == 0) { |
|
this.recommentList.page = 1; |
|
} |
|
this.recommentList.page = 1; |
|
} |
|
this.loadData() |
|
} |
|
}, |
|
methods: { |
|
menu(item) { |
|
checkAuthority(this.pid).then(res => { |
|
if (res.mobile_url) { |
|
uni.setStorageSync('webUrl', res.mobile_url) |
|
// #ifndef MP |
|
uni.navigateTo({ |
|
url: '/uni_modules/aliea-goods/pages/webview/webview' |
|
}) |
|
// #endif |
|
|
|
// #ifdef MP |
|
uni.navigateToMiniProgram({ |
|
appId: data.we_app_info.app_id, |
|
path: data.we_app_info.page_path |
|
}) |
|
// #endif |
|
} else { |
|
this.doMenu(item) |
|
} |
|
}) |
|
}, |
|
doMenu(item) { |
|
pddApi.pindao_resource(item.id, this.pid).then(res => { |
|
let data = res.data.resource_url_response |
|
uni.setStorageSync('webUrl', data.single_url_list.mobile_url) |
|
// #ifndef MP |
|
uni.navigateTo({ |
|
url: '/uni_modules/aliea-goods/pages/webview/webview' |
|
}) |
|
// #endif |
|
|
|
// #ifdef MP |
|
uni.navigateToMiniProgram({ |
|
appId: data.we_app_info.app_id, |
|
path: data.we_app_info.page_path |
|
}) |
|
// #endif |
|
}) |
|
}, |
|
initList() { |
|
for (let i = 1; i < this.tabList.length; i++) { |
|
this.goodList.push({ |
|
obj: [], |
|
page: 1, |
|
pageSize: 20, |
|
moreStatus: '' |
|
}) |
|
} |
|
this.loadData() |
|
}, |
|
loadData(e) { |
|
if (this.swiperIndex === 0) { |
|
if (this.recommentList.moreStatus === 'loading' || |
|
this.recommentList.moreStatus === 'refreshing') { |
|
return; |
|
} |
|
|
|
pddApi.goodsRecommend('', '', this.pid, this.recommentList.obj.length).then(res => { |
|
let list = [] |
|
list = res.data.goods_basic_detail_response.list |
|
this.recommentList.obj.concat(list) |
|
this.search_id = res.data.goods_basic_detail_response.search_id |
|
if (list.length == 0) { |
|
this.this.recommentList.moreStatus = 'noMore' |
|
return |
|
} |
|
this.recommentList.moreStatus = '' |
|
this.recommentList.page++; |
|
this.recommentList.obj = this.recommentList.obj.concat(list); |
|
}).catch((res) => { |
|
this.goodList[this.swiperIndex].moreStatus = 'error' |
|
}); |
|
} else { |
|
if (this.goodList[this.swiperIndex - 1].moreStatus === 'loading' || |
|
this.goodList[this.swiperIndex - 1].moreStatus === 'refreshing') { |
|
return; |
|
} |
|
|
|
pddApi.goodsSearch('', '', this.tabList[this.swiperIndex].id, this.pid, |
|
this.goodList[this.swiperIndex - 1].page, |
|
this.goodList[this.swiperIndex - 1].pageSize).then(res => { |
|
let list = [] |
|
list = res.data.goods_search_response.goods_list |
|
this.search_id = res.data.goods_search_response.search_id |
|
if (list.length == 0) { |
|
this.goodList[this.swiperIndex - 1].moreStatus = 'noMore' |
|
return |
|
} |
|
this.goodList[this.swiperIndex - 1].moreStatus = '' |
|
this.goodList[this.swiperIndex - 1].page++; |
|
this.goodList[this.swiperIndex - 1].obj = this.goodList[this.swiperIndex - 1].obj.concat( |
|
list); |
|
}).catch((res) => { |
|
this.goodList[this.swiperIndex - 1].moreStatus = 'error' |
|
}); |
|
} |
|
}, |
|
toList(e) { |
|
let url = '/uni_modules/aliea-goods/pages/goods/goodList?key_word=' + e.keyword |
|
if (this.pid) { |
|
url += '&p_id=' + this.pid |
|
} |
|
uni.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
swiperChange(e) { |
|
this.swiperIndex = e.detail.current; |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.content_index { |
|
width: 100%; |
|
height: 100%; |
|
|
|
.tabs { |
|
width: 100%; |
|
} |
|
|
|
.swiper_view { |
|
position: fixed; |
|
background-color: antiquewhite; |
|
width: 100%; |
|
|
|
uni-swiper { |
|
width: 100%; |
|
height: 100%; |
|
|
|
.goods_list { |
|
height: 100%; |
|
|
|
.goods_list_item { |
|
width: 355rpx; |
|
display: inline-block; |
|
margin: 10rpx; |
|
border-radius: 20rpx; |
|
} |
|
|
|
.menu_view { |
|
|
|
width: 750rpx; |
|
padding: 10rpx; |
|
// margin-top: 10rpx; |
|
border-radius: 20rpx; |
|
|
|
.menu_view_item { |
|
background-color: #fff; |
|
display: inline-block; |
|
text-align: center; |
|
width: 162.5rpx; |
|
padding: 20rpx 10rpx; |
|
|
|
.menu_view_item_img { |
|
width: 90rpx; |
|
height: 90rpx; |
|
} |
|
|
|
.menu_view_item_text { |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
.menu_view_title { |
|
padding: 15rpx; |
|
font-weight: bold; |
|
background-color: #fff; |
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
</style>
|
|
|