积分公示

This commit is contained in:
liuye
2023-04-14 10:18:57 +08:00
parent 5c7fc681ec
commit c683d3770c

View File

@@ -0,0 +1,173 @@
<template>
<div class="pointsPublicity">
<div class="header">
<img :src="`${cdn}/publicity-header.png`" alt="">
<div class="title">第五网格积分公示</div>
</div>
<div class="list-content" v-if="list.length">
<div class="item" v-for="(item, index) in list" :key="index">
<span class="blue-tips"></span>
<p class="title">家事</p>
<div class="item-info">
<p class="mini-title">个人与家庭相关事</p>
<div class="text-flex">
<p>个人卫生勤洗头爱干净衣冠整洁</p>
<div>
<img :src="`${cdn}/star-icon.png`" alt="">+{{item.integral}}
</div>
</div>
</div>
<div class="item-info">
<p class="mini-title">个人与家庭相关事</p>
<div class="text-flex">
<p>个人卫生勤洗头爱干净衣冠整洁</p>
<div>
<img :src="`${cdn}/star-icon.png`" alt="">+50
</div>
</div>
</div>
<div class="item-info">
<p class="mini-title">个人与家庭相关事</p>
<div class="text-flex">
<p>个人卫生勤洗头爱干净衣冠整洁</p>
<div>
<img :src="`${cdn}/star-icon.png`" alt="">+50
</div>
</div>
</div>
</div>
</div>
<AiEmpty v-else></AiEmpty>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'pointsPublicity',
appName: '积分公示',
data() {
return {
cdn: "https://cdn.cunwuyun.cn/fengdu",
list: [],
current: 1
}
},
computed: {
...mapState(['user']),
},
onLoad(option) {
this.getList()
},
methods: {
getList() {
this.$instance.post(`/app/appintegralpublicityinfo/list?current=${this.current}&girdId=`).then(res => {
if (res.code === 0) {
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
}
})
}
},
onReachBottom() {
this.current++
this.getList()
}
}
</script>
<style lang="scss" scoped>
uni-page-body{
background-color: #fff;
}
.pointsPublicity {
.header {
// position: fixed;
// top: 0;
// left: 0;
width: 100%;
img {
width: 100%;
height: 216px;
}
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #222;
line-height: 40px;
padding: 38px 32px;
}
}
.list-content {
padding: 0 32px;
.item {
width: 100%;
background: #FFF;
box-shadow: inset 0 0 0 0 #EEEEEE;
padding: 32px;
box-sizing: border-box;
position: relative;
margin-bottom: 24px;
.blue-tips {
position: absolute;
top: 34px;
left: 0;
width: 8px;
height: 36px;
background: #2D7DFF;
border-radius: 4px;
}
.title {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #333;
line-height: 40px;
word-break: break-all;
}
.item-info {
width: 100%;
padding: 32px 0;
border-top: 1px solid #eee;
.mini-title {
font-family: PingFangSC-Regular;
font-size: 34px;
color: #333;
line-height: 40px;
word-break: break-all;
margin-bottom: 14px;
}
.text-flex {
display: flex;
width: 100%;
p {
width: calc(100% - 160px);
font-family: PingFangSC-Regular;
font-size: 26px;
color: #666;
word-break: break-all;
}
div {
width: 160px;
text-align: right;
font-family: DINAlternate-Bold;
font-weight: 700;
font-size: 30px;
color: #FF7109;
img {
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: bottom;
}
}
}
}
.item-info:nth-of-type(2) {
border-top: 0;
}
}
}
}
</style>