shouye xiugai
This commit is contained in:
parent
552d0dfbf0
commit
750ff19690
@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="video-item" v-if="item" @click="toDetailsPage">
|
<view class="video-item" v-if="item" @click="toDetailsPage">
|
||||||
<image class="head" :src="item.article_pic"></image>
|
<image class="head" :src="item.article_pic" v-if="item.type == 1" ></image>
|
||||||
|
<view class="header_fist" v-else>
|
||||||
|
<view class="backes">111</view>
|
||||||
|
<image class="head" :src="item.article_pic" ></image>
|
||||||
|
</view>
|
||||||
<view class="title" v-if="!isguanzhu">{{ item.article_title }}</view>
|
<view class="title" v-if="!isguanzhu">{{ item.article_title }}</view>
|
||||||
<view class="jianjie">{{ item.article_content }}</view>
|
<view class="jianjie">{{ item.article_content }}</view>
|
||||||
<view class="user">
|
<view class="user">
|
||||||
@ -163,6 +167,16 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.header_fist{
|
||||||
|
position: relative;
|
||||||
|
.backes{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
background: #000000;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
@ -186,6 +200,7 @@ export default {
|
|||||||
this.$u.api.articleLike({
|
this.$u.api.articleLike({
|
||||||
article_id: this.item.article_id,
|
article_id: this.item.article_id,
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
if(res.errCode == 0) {
|
if(res.errCode == 0) {
|
||||||
this.$emit("getArticlelist");
|
this.$emit("getArticlelist");
|
||||||
}
|
}
|
||||||
@ -195,6 +210,7 @@ export default {
|
|||||||
this.$u.api.articleCollect({
|
this.$u.api.articleCollect({
|
||||||
article_id: this.item.article_id,
|
article_id: this.item.article_id,
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
if(res.errCode == 0) {
|
if(res.errCode == 0) {
|
||||||
this.$emit("getArticlelist");
|
this.$emit("getArticlelist");
|
||||||
}
|
}
|
||||||
@ -205,12 +221,16 @@ export default {
|
|||||||
article_id: this.item.article_id,
|
article_id: this.item.article_id,
|
||||||
member_id: this.item.member_id,
|
member_id: this.item.member_id,
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
if(res.errCode == 0) {
|
if(res.errCode == 0) {
|
||||||
this.$emit("getArticlelist");
|
this.$emit("getArticlelist");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toDetailsPage() {
|
toDetailsPage() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageB/photo/index',
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -1,253 +1,269 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index">
|
<view class="index">
|
||||||
<view class="top">
|
<view class="top">
|
||||||
<view class="sosuo"></view>
|
<view class="sosuo"></view>
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
<u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
|
<u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
|
||||||
'background-color':'#FF780F',
|
'background-color':'#FF780F',
|
||||||
'bottom':'10rpx'
|
'bottom':'10rpx'
|
||||||
}"
|
}"
|
||||||
inactive-color="#333"
|
inactive-color="#333" :active-item-style="{
|
||||||
:active-item-style="{
|
|
||||||
'color':'#333'
|
'color':'#333'
|
||||||
}"
|
}" :bold="false"
|
||||||
:bold="false"
|
@change="dianji"></u-tabs>
|
||||||
@change="dianji"></u-tabs>
|
</view>
|
||||||
</view>
|
<view class="sosuo"></view>
|
||||||
<view class="sosuo"></view>
|
</view>
|
||||||
</view>
|
<swiper class="card" @change="dianji" :current="num">
|
||||||
<swiper class="card" @change="dianji" :current="num">
|
<swiper-item>
|
||||||
<swiper-item>
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
<view class="box">
|
||||||
<view class="box">
|
<!-- <indexad style="width:690rpx"></indexad> -->
|
||||||
<!-- <indexad style="width:690rpx"></indexad> -->
|
|
||||||
<u-swiper mode="dot" :list="indexImageSwiper" name="adv_code"></u-swiper>
|
<u-swiper mode="dot" :list="indexImageSwiper" name="adv_code"></u-swiper>
|
||||||
<view class="list">
|
<view class="list">
|
||||||
<view >
|
<view>
|
||||||
<videoItem v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
|
<videoItem v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item"
|
||||||
</view>
|
@getArticlelist="getArticlelist"></videoItem>
|
||||||
<view style="margin-left:20rpx">
|
</view>
|
||||||
<videoItem v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
|
<view style="margin-left:20rpx">
|
||||||
</view>
|
<videoItem v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item"
|
||||||
</view>
|
@getArticlelist="getArticlelist"></videoItem>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
</swiper-item>
|
</view>
|
||||||
<swiper-item>
|
</scroll-view>
|
||||||
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
</swiper-item>
|
||||||
<view class="box">
|
<swiper-item>
|
||||||
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
<view class="list">
|
<view class="box">
|
||||||
<view >
|
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
|
||||||
<zhiboItem v-for="item in 10"></zhiboItem>
|
<view class="list">
|
||||||
</view>
|
<view>
|
||||||
<view style="margin-left:20rpx">
|
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||||
<zhiboItem v-for="item in 10"></zhiboItem>
|
</view>
|
||||||
</view>
|
<view style="margin-left:20rpx">
|
||||||
</view>
|
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
<view class="box">
|
<view class="box">
|
||||||
<view class="tuijian">
|
<view class="tuijian">
|
||||||
<view class="title" @click="toSearchPage">
|
<view class="title" @click="toSearchPage">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<view></view>
|
<view></view>
|
||||||
<text>推荐达人</text>
|
<text>推荐达人</text>
|
||||||
</view>
|
</view>
|
||||||
<image class="right" src="/static/image/common/1.png"></image>
|
<image class="right" src="/static/image/common/1.png"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="tuijianlist">
|
<view class="tuijianlist">
|
||||||
<!-- <darenItem style="margin-right:23rpx"></darenItem>
|
<!-- <darenItem style="margin-right:23rpx"></darenItem>
|
||||||
<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"></darenItem>
|
<darenItem v-for="item in recommendList.slice(0,3)" :key="item.id" :info="item"></darenItem>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="list">
|
<view class="list">
|
||||||
<view >
|
<view>
|
||||||
<!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
|
<!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
|
||||||
<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
|
<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id"
|
||||||
</view>
|
:item="item" @getArticlelist="getArticlelist"></videoItem>
|
||||||
<view style="margin-left:20rpx">
|
</view>
|
||||||
<!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
|
<view style="margin-left:20rpx">
|
||||||
<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
|
<!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
|
||||||
</view>
|
<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id"
|
||||||
</view>
|
:item="item" @getArticlelist="getArticlelist"></videoItem>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.index{
|
.index {
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
.top{
|
|
||||||
padding: 0 30rpx;
|
.top {
|
||||||
display: flex;
|
padding: 0 30rpx;
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
width: 100%;
|
justify-content: space-between;
|
||||||
height: 88rpx;
|
width: 100%;
|
||||||
align-items: center;
|
height: 88rpx;
|
||||||
flex-shrink: 0;
|
align-items: center;
|
||||||
.sosuo{
|
flex-shrink: 0;
|
||||||
width: 32rpx;
|
|
||||||
height: 32rpx;
|
.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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import videoItem from "@/components/index/video-item/index"
|
import videoItem from "@/components/index/video-item/index"
|
||||||
import zhiboItem from "@/components/index/zhibo-item/index"
|
import zhiboItem from "@/components/index/zhibo-item/index"
|
||||||
import indexad from "@/components/index/ad/index"
|
import indexad from "@/components/index/ad/index"
|
||||||
import darenItem from "@/components/index/daren-item/index"
|
import darenItem from "@/components/index/daren-item/index"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"index",
|
name: "index",
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
list:[
|
list: [{
|
||||||
{
|
|
||||||
name: '发现'
|
name: '发现'
|
||||||
}, {
|
}, {
|
||||||
name: '直播'
|
name: '直播'
|
||||||
}, {
|
}, {
|
||||||
name: '关注'
|
name: '关注'
|
||||||
|
}],
|
||||||
|
num: 0,
|
||||||
|
page: 0, // 0即第一页
|
||||||
|
articleList: [],
|
||||||
|
recommendList: [], // 推荐达人
|
||||||
|
indexImageSwiper: [],
|
||||||
|
zhiboImageSwiper: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
videoItem,
|
||||||
|
zhiboItem,
|
||||||
|
indexad,
|
||||||
|
darenItem
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getArticlelist();
|
||||||
|
this.getRecommendList();
|
||||||
|
this.getSwiper();
|
||||||
|
this.getZhiBoSwiper();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getSwiper() {
|
||||||
|
this.$u.api.getIndexSwiper().then(res => {
|
||||||
|
if (res.errCode == 0) {
|
||||||
|
this.indexImageSwiper = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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
|
||||||
}
|
}
|
||||||
],
|
},
|
||||||
num:0,
|
getArticlelist() {
|
||||||
page: 0, // 0即第一页
|
this.$u.api.getArticlelist({
|
||||||
articleList: [],
|
page: this.page,
|
||||||
recommendList: [], // 推荐达人
|
is_video_img: 0, // 查询视频1 图文2 都查0
|
||||||
indexImageSwiper: [],
|
}).then(res => {
|
||||||
zhiboImageSwiper: [],
|
console.log('37647744ghj',res)
|
||||||
}
|
if (res.errCode == 0) {
|
||||||
},
|
this.articleList = res.data.list;
|
||||||
components:{
|
}
|
||||||
videoItem,
|
})
|
||||||
zhiboItem,
|
},
|
||||||
indexad,
|
getRecommendList() {
|
||||||
darenItem
|
this.$u.api.getRecommendList().then(res => {
|
||||||
},
|
console.log(res)
|
||||||
onShow(){
|
if (res.errCode == 0) {
|
||||||
this.getArticlelist();
|
this.recommendList = res.data.list;
|
||||||
this.getRecommendList();
|
}
|
||||||
this.getSwiper();
|
})
|
||||||
this.getZhiBoSwiper();
|
},
|
||||||
},
|
toSearchPage() {
|
||||||
methods:{
|
uni.navigateTo({
|
||||||
getSwiper() {
|
url: '/pageB/follow/index'
|
||||||
this.$u.api.getIndexSwiper().then(res => {
|
})
|
||||||
if(res.errCode == 0) {
|
},
|
||||||
this.indexImageSwiper = res.data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
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 => {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toSearchPage() {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pageB/follow/index'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
Loading…
Reference in New Issue
Block a user