deming/pages/index/index.vue
2020-08-05 21:06:29 +08:00

360 lines
9.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="status_bar"></view>
<view class="index">
<view class="top">
<view class="sosuo"></view>
<view class="tabs">
<u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
'background-color':'#FF780F',
'bottom':'10rpx'
}"
inactive-color="#333" :active-item-style="{
'color':'#333'
}" :bold="false"
@change="dianji"></u-tabs>
</view>
<view class="sosuo"></view>
</view>
<swiper class="card" @change="dianji" :current="num">
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
<view class="box">
<!-- <indexad style="width:690rpx"></indexad> -->
<u-swiper mode="dot" :list="indexImageSwiper" name="adv_code" @click="clickFImage"></u-swiper>
<view class="list">
<view>
<videoItem v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item"
@getArticlelist="getArticlelist"></videoItem>
</view>
<view style="margin-left:20rpx">
<videoItem v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item"
@getArticlelist="getArticlelist"></videoItem>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
<view class="box">
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code" @click="clickSImage($event, 2)"></u-swiper>
<view class="list">
<view>
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => !(index&1))" :zid="item.live_id" :rid="item.chatroom_id"
:key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
</view>
<view style="margin-left:20rpx">
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => index&1)" :zid="item.live_id" :rid="item.chatroom_id"
:key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
<view class="box">
<view class="tuijian">
<view class="title" @click="toSearchPage">
<view class="left">
<view></view>
<text>推荐达人</text>
</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view>
<view class="tuijianlist">
<!-- <darenItem style="margin-right:23rpx"></darenItem>
<darenItem style="margin-right:23rpx"></darenItem> -->
<darenItem v-for="item in recommendList.slice(0,3)" :key="item.id" :info="item" v-on:pChangeType="changeType"></darenItem>
</view>
</view>
<view class="rec-list">
<view class="rec-box">
<!-- {{ fansList }} -->
<videoItem isguanzhu="true" v-for="item in fansList" :key="item.article_id"
:item="item"></videoItem>
<view class="no-data" v-show="!fansList.length">您还没有关注哦赶紧去点点关注</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<style lang="scss" scoped>
.index {
width: 750rpx;
display: flex;
flex-direction: column;
height: 100vh;
.top {
padding: 0 30rpx;
display: flex;
justify-content: space-between;
width: 100%;
height: 88rpx;
align-items: center;
flex-shrink: 0;
.sosuo {
width: 32rpx;
height: 32rpx;
}
.tabs {
width: 334rpx;
/deep/ .u-tab-item {
font-weight: bold;
}
}
}
.card {
height: 100%;
width: 100%;
.box {
width: 100%;
padding: 0 30rpx;
}
.list {
display: flex;
}
}
.tuijian {
width: 750rpx;
margin-left: -30rpx;
height: 400rpx;
background-color: #ececec;
padding: 30rpx;
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
>view {
width: 6rpx;
height: 30rpx;
background-color: #FF780F;
}
>text {
font-size: 30rpx;
color: 30rpx;
margin-left: 14rpx;
}
}
.right {
width: 14rpx;
height: 24rpx;
}
}
.tuijianlist {
width: 100%;
height: 282rpx;
margin-top: 30rpx;
display: flex;
>view:not(:last-child) {
margin-right: 23rpx;
}
}
}
.rec-list {
width: 100%;
.rec-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.no-data {
margin: 200rpx auto 0;
}
}
}
}
</style>
<script>
import videoItem from "@/components/index/video-item/index"
import zhiboItem from "@/components/index/zhibo-item/index"
import indexad from "@/components/index/ad/index"
import darenItem from "@/components/index/daren-item/index"
export default {
name: "index",
data() {
return {
list: [{
name: '发现'
}, {
name: '直播'
}, {
name: '关注'
}],
num: 0,
page: 0, // 0即第一页
articleList: [],
recommendList: [], // 推荐达人
indexImageSwiper: [],
zhiboImageSwiper: [],
tabLiveLists: [],
fansList: [], // 关注的发现列表
}
},
components: {
videoItem,
zhiboItem,
indexad,
darenItem
},
onShow() {
this.getArticlelist();
this.getRecommendList();
this.getSwiper();
this.getZhiBoSwiper();
this.tabLiveList();
this.getFollowList();
},
onPullDownRefresh() {
this.getArticlelist();
// this.getManicureList({ load: 'reload' });
},
methods: {
// 列表
tabLiveList() {
this.$u.api.tabLiveList().then((res) => {
console.log(res)
this.tabLiveLists = res.data;
})
},
// 轮播图
getSwiper() {
this.$u.api.getIndexSwiper().then(res => {
if (res.errCode == 0) {
this.indexImageSwiper = res.data;
}
})
},
// 关注
changeType(member_id) {
console.log(member_id);
// this.$emit("pChangeType");
this.$u.api.attentionMember({
member_id: member_id
}).then((res) => {
console.log(res)
this.getRecommendList();
this.getFollowList(); // 刷新发现的列表
})
},
getZhiBoSwiper() {
this.$u.api.getZhiBoSwiper().then(res => {
if (res.errCode == 0) {
this.zhiboImageSwiper = res.data;
}
})
},
// 切换导航
dianji(a) {
console.log(a);
if (typeof a == "object") {
this.num = a.detail.current
} else {
this.num = a
}
},
// 发现别表
getArticlelist() {
this.$u.api.getArticlelist({
page: this.page,
is_video_img: 0, // 查询视频1 图文2 都查0
}).then(res => {
// uni.stopPullDownRefresh();
// console.log('37647744ghj', res)
if (res.errCode == 0) {
this.articleList = res.data.list;
}
})
},
// 达人列表
getRecommendList() {
this.$u.api.getRecommendList().then(res => {
console.log(res)
if (res.errCode == 0) {
this.recommendList = res.data.list;
}
})
},
// 关注发现列表
getFollowList() {
this.$u.post("article/attentionArticleList",{
page: 0,
}).then(res => {
if (res.errCode == 0) {
this.fansList = res.data.list;
}
// console.log(res);
})
},
toSearchPage() {
console.log("22");
uni.navigateTo({
url: '/pageB/follow/index'
});
},
clickFImage(index) {
const item = this.indexImageSwiper[index];
console.log(item);
this.activityLink({
type: item.url_type,
id: item.info_id
});
},
clickSImage(index) {
const item = this.zhiboImageSwiper[index];
console.log(item);
this.activityLink({
type: item.url_type,
id: item.info_id
});
},
activityLink({
type,
id
}) {
console.log(type,id);
if (type == 0) return false;
// type 1 商品详情页, 2 店铺详情页
const url = type == 1 ? 'pageB/sdetails/index' : 'pageC/merchant/index';
let params = {
id: id
};
// type: 1 // 商品详情 1普通 2拼团 3秒杀 4优惠券
if (type == 1) Object.assign(params, {
type: 1
});
this.$u.route({
url: url,
params: params
})
},
},
}
</script>