积分公示
This commit is contained in:
173
src/project/fengdu/AppRedemptionPoints/pointsPublicity.vue
Normal file
173
src/project/fengdu/AppRedemptionPoints/pointsPublicity.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user