kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

精选活动

Browse Source
This commit is contained in:
shijingjing
2023-04-06 10:56:30 +08:00
parent 913ffd6b9c
commit 0b9928e1e0
3 changed files with 165 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/project/fengdu/AppNewFarmerBank/AppNewFarmerBank.vue
View File

@@ -33,23 +33,27 @@
<div class="handpick" v-if="list.length">
<div class="title">
<h1>精选动态</h1>
<div class="more" v-if="list.length > 3" @click="toPages('./handpick')">
<div class="more" v-if="allList.length > 3" @click="toPages('./handpick')">
<span>更多</span>
<u-icon name="arrow-right" color="#687DA6" size="28"></u-icon>
</div>
</div>
<div class="list" v-if="list.length">
<div class="card" v-for="(item,index) in list" :key="index" @click="toPages(`./handpick?id=${item.id}`)">
<div class="card" v-for="(item,index) in list" :key="index">
<div class="top">
<div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
<div class="right">
<img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
<!-- https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png -->
<span>99+</span>
<div class="left" @click="toPages(`./pickDetail?id=${item.id}`)">{{ item.content }}</div>
<div class="right" @click="upCount(item.id,index)">
<img :src="item.upStatus==0? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png':'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png'" alt="">
<div>
<span>{{ item.upCount || 0 }}</span><span v-if="item.upCount > 99">+</span>
</div>
</div>
</div>
<div class="bottom">
<img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
<div class="imgs" v-if="item.images.length">
<image v-for="(img, i) in item.images" :key="i" class="banner" :src="img.url"/>
</div>
<div class="imgs" v-if="!item.images.length && item.videos.length">
<video v-for="(video, ins) in item.videos" :key="ins" class="file-img" :src="video.url"/>
</div>
</div>
</div>
@@ -68,6 +72,8 @@ export default {
status: null,
current: 1,
list: [],
allList: [],
flag: false,
}
},
computed: {
@@ -79,16 +85,45 @@ export default {
params: {
moduleId: moduleId,
current: this.current,
// areaId: this.user.areaId
areaId: this.user.areaId,
containContent: true,
}
}).then(res=> {
if(res?.data) {
this.list = res.data.records.length > 3 ? res.data.records.slice(2) : res.data.records
this.allList = res.data.records
let newList = res.data.records.length > 3 ? res.data.records.slice(0,3) : res.data.records
let mapList = newList.map(e=> {
return {
...e,
images: e?.files.filter(i=> i.name.split('.')[1]=='jpeg') || e?.files.filter(i => i.name.split('.')[1] == 'jpg') || e?.files.filter(i => i.name.split('.')[1] == 'png') || [],
videos: e?.files.filter(i => i.name.split('.')[1] == 'mp4') || [],
}
})
this.list = mapList.map(v=> {
return {
...v,
images: v.images.length > 3? v.images.slice(0, 3) : v.images,
videos: v.videos.length > 3? v.videos.slice(0, 3) : v.videos,
upStatus: 0
}
})
}
})
},
handleBannerClick() {
},
// 点赞
upCount(id,index) {
if (this.flag) return
this.flag = true
this.$instance.post(`/app/appcontentinfo/supportById?id=${id}`).then(res=> {
if(res?.code==0) {
this.list[index].upStatus = 1
this.$u.toast(`点赞成功`)
}
})
},
toPages(url,status) {
if(!this.user.idNumber) {
@@ -282,10 +317,20 @@ export default {
}
}
}
.bottom {
img {
width: 100%;
height: 202px;
.imgs {
display: flex;
flex-wrap: wrap;
background: #FFF;
image,
video {
width: 200px;
height: 200px;
margin: 0 12px 0 0;
}
image:nth-child(3n + 0),
video:nth-child(3n + 0) {
margin: 0;
}
}
}

101
src/project/fengdu/AppNewFarmerBank/handpick.vue
View File

@@ -1,35 +1,93 @@
<template>
<div class="handpick">
<div class="list">
<div class="list" v-for="(item,index) in list" :key="index">
<div class="top">
<div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
<div class="right">
<img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
<!-- https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png -->
<span>99+</span>
<div class="left" @click="$linkTo(`./pickDetail?id=${item.id}`)">{{ item.content }}</div>
<div class="right" @click="upCount(item.id, index)">
<img :src="item.upStatus == 0 ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png'" alt="">
<div>
<span>{{ item.upCount || 0 }}</span><span v-if="item.upCount > 99">+</span>
</div>
</div>
</div>
<div class="bottom" @click="$linkTo(`./pickDetail`)">
<img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
<div class="imgs" v-if="item.images.length" @click="$linkTo(`./pickDetail?id=${item.id}`)">
<image v-for="(img, i) in item.images" :key="i" class="banner" :src="img.url"/>
</div>
<div class="imgs" v-if="!item.images.length && item.videos.length" @click="$linkTo(`./pickDetail?id=${item.id}`)">
<video v-for="(video, ins) in item.videos" :key="ins" class="file-img" :src="video.url"/>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "handpick",
appName: "精选动态",
computed: {
...mapState(['user'])
},
data() {
return {
list: [],
flag: false,
}
},
methods: {
getList() {
}
getModule() {
this.$instance.post(`/app/appintegraluserapply/queryModuleByName`).then(res => {
if (res?.data) {
this.getList(res.data)
}
})
},
getList(moduleId) {
this.$instance.post(`/app/appcontentinfo/list-web`, null, {
params: {
moduleId: moduleId,
current: this.current,
areaId: this.user.areaId,
containContent: true,
}
}).then(res => {
if (res?.data) {
this.allList = res.data.records
let newList = this.current==1? res.data.records : [...this.list, ...res.data.records]
let mapList = newList.map(e => {
return {
...e,
images: e?.files.filter(i => i.name.split('.')[1] == 'jpeg') || e?.files.filter(i => i.name.split('.')[1] == 'jpg') || e?.files.filter(i => i.name.split('.')[1] == 'png') || [],
videos: e?.files.filter(i => i.name.split('.')[1] == 'mp4') || [],
}
})
this.list = mapList.map(v => {
return {
...v,
images: v.images.length > 3 ? v.images.slice(0, 3) : v.images,
videos: v.videos.length > 3 ? v.videos.slice(0, 3) : v.videos,
upStatus: 0
}
})
}
})
},
// 点赞
upCount(id,index) {
if (this.flag) return
this.flag = true
this.$instance.post(`/app/appcontentinfo/supportById?id=${id}`).then(res => {
if (res?.code == 0) {
this.list[index].upStatus = 1
this.$u.toast(`点赞成功`)
}
})
},
},
onShow() {
this.getModule()
},
onShow() {},
onReachBottom() {
this.current++
this.getList()
@@ -46,6 +104,7 @@ export default {
box-sizing: border-box;
background: #FFF;
border-radius: 12px;
margin-bottom: 24px;
.top {
display: flex;
justify-content: space-between;
@@ -71,10 +130,20 @@ export default {
}
}
}
.bottom {
img {
width: 100%;
height: 202px;
.imgs {
display: flex;
flex-wrap: wrap;
background: #FFF;
image,
video {
width: 200px;
height: 200px;
margin: 0 12px 0 0;
}
image:nth-child(3n + 0),
video:nth-child(3n + 0) {
margin: 0;
}
}
}

32
src/project/fengdu/AppNewFarmerBank/pickDetail.vue
View File

@@ -1,14 +1,9 @@
<template>
<div class="pickDetail">
<div class="container">
<div class="title">房前屋后卫生</div>
<p class="avatar">李维民</p>
<div class="content">
百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办午，
庆祝中国共产党成立100周年在国务院举办午，庆祝中7月1日上午，庆祝中国共产党成立100周年在国务院举办午，
庆祝中国共产党成立100周年在国务院举办午，
庆祝中7月1日上午，庆祝中国共产党成立100周年在国务院举办午，庆祝中国共产党成立100周年在国务院
</div>
<div class="title">{{ data.title }}</div>
<p class="avatar">{{ data.createUserName }}</p>
<div class="content">{{ data.content }}</div>
<div class="imgs" v-if="images.length">
<image v-for="(img, i) in images" @click="preview(img.url, images)" :key="i" class="banner" :src="img.url"/>
</div>
@@ -27,18 +22,31 @@ export default {
return {
images: [],
videos: [],
id: '',
data: {}
}
},
method: {
methods: {
getDetail() {
this.$instance.post(`/app/appcontentinfo/queryDetailById?id=${this.id}`).then(res=> {
if(res?.data) {
this.data = res.data
this.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.name.split('.')[1])))
this.videos = res.data.files.filter(e => (['mp4'].includes(e.name.split('.')[1])))
}
})
},
preview(url, imgs) {
uni.previewImage({
urls: imgs.map((v) => v.url),
current: url,
})
},
},
onLoad(o) {
this.id = o.id;
this.getDetail()
}
}
</script>
@@ -68,12 +76,12 @@ export default {
font-weight: 400;
color: #333333;
background: #FFF;
padding: 0;
}
.imgs {
display: flex;
flex-wrap: wrap;
padding: 20px 32px;
box-sizing: border-box;
margin-top: 24px;
background: #FFF;
image,