397 lines
10 KiB
Vue
397 lines
10 KiB
Vue
<template>
|
||
<div class="AppNewFarmerBank">
|
||
<div class="swiper-content">
|
||
<img src="https://cdn.cunwuyun.cn/fengdu/img-gongdeyinhang.png" alt="">
|
||
</div>
|
||
<div class="welcome">
|
||
<div class="welcome-user">
|
||
<span class="name">{{ user.realName || user.nickName }}</span>，
|
||
<span v-if="!user.idNumber">欢迎来到功德银行！</span>
|
||
<span v-else>欢迎进入{{ user.areaName }}！</span>
|
||
|
||
</div>
|
||
<div class="signin" @click="toPages('./signIn',status)">{{ status==1? '已签到':'签到' }}</div>
|
||
</div>
|
||
<div class="card-list">
|
||
<div class="jfsq" @click="toPages('./integralApply')">
|
||
<p>积分申请</p>
|
||
<h4>好事自荐得积分</h4>
|
||
</div>
|
||
<div class="jsrw" @click="toPages('./integralTask')">
|
||
<p>积分任务</p>
|
||
<h4>完成任务得积分</h4>
|
||
</div>
|
||
<div class="jfph" @click="toPages('./integralRank')">
|
||
<p>积分排行</p>
|
||
<h4>社区荣誉榜</h4>
|
||
</div>
|
||
<div class="jfsc" @click="toPages('/mods/AppRedemptionPoints/AppRedemptionPoints')">
|
||
<p>积分商城</p>
|
||
<h4>兑换得好物</h4>
|
||
</div>
|
||
<div class="jfgs" @click="toPages('/mods/AppRedemptionPoints/pointsPublicity')">
|
||
<p>积分公示</p>
|
||
<h4>积分获取规则</h4>
|
||
</div>
|
||
<div class="wdjf" @click="toPages('/pages/AppMine/myIntegral')">
|
||
<p>我的积分</p>
|
||
<h4>积分获取一目了然</h4>
|
||
</div>
|
||
</div>
|
||
<div class="handpick" v-if="list.length">
|
||
<div class="title">
|
||
<h1>精选动态</h1>
|
||
<div class="more" v-if="allList.length > 3" @click="$linkTo('./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="$linkTo(`./pickDetail?id=${item.id}`)">
|
||
<div class="title-info" v-if="item.girdName">
|
||
{{item.girdName}}
|
||
</div>
|
||
<div class="top">
|
||
<div class="left" >
|
||
<div class="type-info">{{item.createUserName}}<span>{{item.title}}</span></div>
|
||
</div>
|
||
<div class="right" @click.stop="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="">
|
||
<span>{{ item.upCount || 0 }}</span><span v-if="item.upCount > 99">+</span>
|
||
</div>
|
||
</div>
|
||
<p class="content-info">{{item.content}}</p>
|
||
<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">
|
||
<image v-for="(video, ins) in item.videos" :key="ins" class="banner" :src="video.facePicture.toString()"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
name: "AppNewFarmerBank",
|
||
appName: "功德银行",
|
||
data() {
|
||
return {
|
||
status: null,
|
||
current: 1,
|
||
list: [],
|
||
allList: [],
|
||
flag: false,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
getList(moduleId) {
|
||
this.$instance.post(`/app/appcontentinfo/list-web`,null,{
|
||
params: {
|
||
moduleId: moduleId,
|
||
current: this.current,
|
||
girdId: this.user.girdId,
|
||
containContent: true,
|
||
}
|
||
}).then(res=> {
|
||
if(res?.data) {
|
||
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.postfix == '.jpg' || i.postfix == '.jpeg' || i.postfix == '.png')),
|
||
videos: e?.files.filter(i => (i.postfix == '.mp4' || i.postfix == '.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.flag = false
|
||
this.list[index].upStatus = 1
|
||
this.$u.toast(`点赞成功`)
|
||
}
|
||
}).finally(() => this.flag = false)
|
||
},
|
||
toPages(url,status) {
|
||
if(!this.user.areaId) {
|
||
this.$dialog.confirm({
|
||
content: '您只有完成信息认证后，才可进行相关操作。',
|
||
confirmText: '去认证'
|
||
}).then(() => {
|
||
this.$linkTo('/pages/AppMine/userInfo')
|
||
}).catch(() => {
|
||
})
|
||
} else {
|
||
if(!status) {
|
||
this.$linkTo(url)
|
||
} else {
|
||
// 停留
|
||
}
|
||
|
||
}
|
||
},
|
||
getStatus() {
|
||
this.$instance.post(`/app/appwechatsigninfo/checkSign`).then(res=> {
|
||
if(res?.data !== null) {
|
||
this.status = 1
|
||
}
|
||
})
|
||
},
|
||
getModule() {
|
||
this.$instance.post(`/app/appintegraluserapply/queryModuleByName`).then(res=> {
|
||
if(res?.data) {
|
||
this.getList(res.data)
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
this.getStatus()
|
||
this.getModule()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppNewFarmerBank {
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
.swiper-content {
|
||
width: 100%;
|
||
height: 332px;
|
||
padding: 32px 32px 0;
|
||
box-sizing: border-box;
|
||
background: #FFF;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
.welcome {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 120px;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
background: #FFF;
|
||
.signin {
|
||
width: 104px;
|
||
height: 52px;
|
||
line-height: 52px;
|
||
border: 2px solid #2D7DFF;
|
||
border-radius: 40px;
|
||
color: #2D7DFF;
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
}
|
||
.welcome-user {
|
||
width: calc(100% - 60px);
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
font-family: "PingFang SC";
|
||
.name {
|
||
color: #2D7DFF;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
background: #FFF;
|
||
padding: 0 32px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.jfsq {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshenqing.png') no-repeat ;
|
||
color: #DF863E;
|
||
}
|
||
.jsrw {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenrenwu.png') no-repeat;
|
||
color: #2D7DFF;
|
||
}
|
||
.jfph {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenpaihang.png') no-repeat;
|
||
color: #338A77;
|
||
}
|
||
.jfsc {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshangcheng.png') no-repeat;
|
||
color: #D9606E;
|
||
}
|
||
.jfgs {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifengongshi.png') no-repeat;
|
||
color: #484899;
|
||
}
|
||
.wdjf {
|
||
background: url('https://cdn.cunwuyun.cn/fengdu/img-wodejifen.png') no-repeat;
|
||
color: #DA9A07;
|
||
}
|
||
& > div:nth-child(2n+1) {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
div {
|
||
background-size: 100% 100%;
|
||
width: 328px;
|
||
height: 144px;
|
||
margin-bottom: 32px;
|
||
padding: 28px 32px;
|
||
box-sizing: border-box;
|
||
p {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
}
|
||
h4 {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.handpick {
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
.title {
|
||
margin: 32px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
h1 {
|
||
font-size: 34px;
|
||
font-weight: 500;
|
||
}
|
||
.more {
|
||
width: 200px;
|
||
color: #687DA6;
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
.card {
|
||
margin-bottom: 24px;
|
||
padding: 32px 24px;
|
||
box-sizing: border-box;
|
||
background: #FFF;
|
||
border-radius: 12px;
|
||
.title-info {
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 34px;
|
||
color: #333;
|
||
letter-spacing: 0;
|
||
line-height: 40px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.type-info {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 34px;
|
||
color: #687DA6;
|
||
line-height: 40px;
|
||
span {
|
||
display: inline-block;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 26px;
|
||
color: #666;
|
||
line-height: 40px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 28px;
|
||
.left {
|
||
width: calc(100% - 100px);
|
||
p {
|
||
overflow:hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
}
|
||
.right {
|
||
width: 100px;
|
||
text-align: right;
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
vertical-align: bottom;
|
||
}
|
||
span {
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
color: #687DA6;
|
||
}
|
||
}
|
||
}
|
||
.content-info {
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 28px;
|
||
color: #333;
|
||
line-height: 42px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|