theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

shouye xiugai

Browse Source
This commit is contained in:
zmr900709 2020-07-17 08:36:53 +08:00
parent 552d0dfbf0
commit 750ff19690
2 changed files with 268 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/index/video-item/index.vue
View File

@ -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',
});
}, },
}, },

120
pages/index/index.vue
View File

@ -7,11 +7,9 @@
'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>
@ -23,11 +21,13 @@
<!-- <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"
@getArticlelist="getArticlelist"></videoItem>
</view> </view>
<view style="margin-left:20rpx"> <view style="margin-left:20rpx">
<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"
@getArticlelist="getArticlelist"></videoItem>
</view> </view>
</view> </view>
</view> </view>
@ -38,7 +38,7 @@
<view class="box"> <view class="box">
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper> <u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
<view class="list"> <view class="list">
<view > <view>
<zhiboItem v-for="item in 10"></zhiboItem> <zhiboItem v-for="item in 10"></zhiboItem>
</view> </view>
<view style="margin-left:20rpx"> <view style="margin-left:20rpx">
@ -67,13 +67,15 @@
</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"
:item="item" @getArticlelist="getArticlelist"></videoItem>
</view> </view>
<view style="margin-left:20rpx"> <view style="margin-left:20rpx">
<!-- <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"
:item="item" @getArticlelist="getArticlelist"></videoItem>
</view> </view>
</view> </view>
</view> </view>
@ -85,12 +87,13 @@
</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{
.top {
padding: 0 30rpx; padding: 0 30rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -98,91 +101,103 @@
height: 88rpx; height: 88rpx;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
.sosuo{
.sosuo {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
.tabs{
.tabs {
width: 334rpx; width: 334rpx;
/deep/ .u-tab-item{
/deep/ .u-tab-item {
font-weight: bold; font-weight: bold;
} }
} }
} }
.card{
.card {
height: 100%; height: 100%;
width: 100%; width: 100%;
.box{
.box {
width: 100%; width: 100%;
padding: 0 30rpx; padding: 0 30rpx;
} }
.list{
.list {
display: flex; display: flex;
} }
} }
.tuijian{
.tuijian {
width: 750rpx; width: 750rpx;
margin-left: -30rpx; margin-left: -30rpx;
height: 400rpx; height: 400rpx;
background-color: #ececec; background-color: #ececec;
padding: 30rpx; padding: 30rpx;
.title{
.title {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.left{
.left {
display: flex; display: flex;
align-items: center; align-items: center;
>view{
>view {
width: 6rpx; width: 6rpx;
height: 30rpx; height: 30rpx;
background-color: #FF780F; background-color: #FF780F;
} }
>text{
>text {
font-size: 30rpx; font-size: 30rpx;
color: 30rpx; color: 30rpx;
margin-left: 14rpx; margin-left: 14rpx;
} }
} }
.right{
.right {
width: 14rpx; width: 14rpx;
height: 24rpx; height: 24rpx;
} }
} }
.tuijianlist{
.tuijianlist {
width: 100%; width: 100%;
height: 282rpx; height: 282rpx;
margin-top: 30rpx; margin-top: 30rpx;
display: flex; display: flex;
> view:not(:last-child) {
>view:not(:last-child) {
margin-right: 23rpx; 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,
num:0,
page: 0, // 0即第一页 page: 0, // 0即第一页
articleList: [], articleList: [],
recommendList: [], // 推荐达人 recommendList: [], // 推荐达人
@ -190,47 +205,48 @@ export default {
zhiboImageSwiper: [], zhiboImageSwiper: [],
} }
}, },
components:{ components: {
videoItem, videoItem,
zhiboItem, zhiboItem,
indexad, indexad,
darenItem darenItem
}, },
onShow(){ onShow() {
this.getArticlelist(); this.getArticlelist();
this.getRecommendList(); this.getRecommendList();
this.getSwiper(); this.getSwiper();
this.getZhiBoSwiper(); this.getZhiBoSwiper();
}, },
methods:{ methods: {
getSwiper() { getSwiper() {
this.$u.api.getIndexSwiper().then(res => { this.$u.api.getIndexSwiper().then(res => {
if(res.errCode == 0) { if (res.errCode == 0) {
this.indexImageSwiper = res.data; this.indexImageSwiper = res.data;
} }
}) })
}, },
getZhiBoSwiper() { getZhiBoSwiper() {
this.$u.api.getZhiBoSwiper().then(res => { this.$u.api.getZhiBoSwiper().then(res => {
if(res.errCode == 0) { if (res.errCode == 0) {
this.zhiboImageSwiper = res.data; this.zhiboImageSwiper = res.data;
} }
}) })
}, },
dianji(a){ dianji(a) {
// console.log(a) // console.log(a)
if(typeof a == "object"){ if (typeof a == "object") {
this.num = a.detail.current this.num = a.detail.current
}else{ } else {
this.num = a this.num = a
} }
}, },
getArticlelist () { getArticlelist() {
this.$u.api.getArticlelist({ this.$u.api.getArticlelist({
page: this.page, page: this.page,
is_video_img: 0, // 查询视频1 图文2 都查0 is_video_img: 0, // 查询视频1 图文2 都查0
}).then(res => { }).then(res => {
if(res.errCode == 0) { console.log('37647744ghj',res)
if (res.errCode == 0) {
this.articleList = res.data.list; this.articleList = res.data.list;
} }
}) })
@ -238,7 +254,7 @@ export default {
getRecommendList() { getRecommendList() {
this.$u.api.getRecommendList().then(res => { this.$u.api.getRecommendList().then(res => {
console.log(res) console.log(res)
if(res.errCode == 0) { if (res.errCode == 0) {
this.recommendList = res.data.list; this.recommendList = res.data.list;
} }
}) })
@ -249,5 +265,5 @@ export default {
}) })
}, },
}, },
} }
</script> </script>