activeAnalysis
This commit is contained in:
liuye
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="AppActive">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
|
||||
<div class="dataTop">
|
||||
<div class="dataLeft">活动列表</div>
|
||||
|
||||
<div class="dataRight">
|
||||
<span>共</span>
|
||||
<span class="specialColor">{{ total }}</span>
|
||||
<span>个活动</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="datas.length > 0">
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="toDetail(item, 1)">
|
||||
<template #custom>
|
||||
<div class="left">
|
||||
<div class="titles">{{ item.title }}</div>
|
||||
|
||||
<div class="nums">
|
||||
<span class="specialColor">{{ item.realNum }}人</span>
|
||||
<span>已报名</span>
|
||||
</div>
|
||||
|
||||
<div class="times">
|
||||
<span class="timesCont">{{ item.beginTime }}</span>
|
||||
|
||||
<span>至 {{ item.endTime }}</span>
|
||||
</div>
|
||||
|
||||
<div class="areaNmae" v-if="item.areaName || item.address">{{ item.areaName }}{{ item.address }}</div>
|
||||
</div>
|
||||
|
||||
<img :src="items.url" alt="" v-for="(items, index) in JSON.parse(item.url || '[]')" :key="index" @click.stop="previewImage(JSON.parse(item.url || '[]'), item.url[0].url)" />
|
||||
|
||||
<div class="hints" :style="{ background: item.status == 0 ? '#000000' : item.status == 1 ? '#42D784' : '#E4E4E4' }">{{ $dict.getLabel('villageActivityStatus', item.status) }}</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
</template>
|
||||
|
||||
<AiEmpty description="暂无数据" v-else></AiEmpty>
|
||||
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
|
||||
</AiFixedBtn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppWechatActivities',
|
||||
appName: '企微活动',
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
tabList: [{ name: '全部活动'}, { name: '报名中'}],
|
||||
currentTabs: 0,
|
||||
current: 1,
|
||||
size: 6,
|
||||
total: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
watch: {},
|
||||
onLoad() {
|
||||
this.$dict.load(['villageActivityStatus']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
|
||||
uni.$on('updateList', () => {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '企微活动'
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/appvillageactivityinfo/listUp', null, {
|
||||
params: {
|
||||
size: this.size,
|
||||
current: this.current,
|
||||
createUserId: this.currentTabs == 1 ? this.user.id : '',
|
||||
areaId: this.user.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.$forceUpdate()
|
||||
|
||||
this.total = res.data.total
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.datas = []
|
||||
this.current = 1
|
||||
this.currentTabs = index
|
||||
this.getList()
|
||||
},
|
||||
|
||||
toAdd() {
|
||||
uni.navigateTo({ url: `./Add` })
|
||||
},
|
||||
|
||||
toDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}&createUserId=${item.createUserId}` })
|
||||
},
|
||||
|
||||
previewImage(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map((v) => v.url),
|
||||
current: img,
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.AppActive {
|
||||
height: 100%;
|
||||
// background: #f3f6f9;
|
||||
|
||||
.dataTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 48px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 32px;
|
||||
.dataLeft {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dataRight {
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
.specialColor {
|
||||
color: #4181ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
.start {
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
.fill {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// align-items: center;
|
||||
.left {
|
||||
width: calc(100% - 205px);
|
||||
// background: pink;
|
||||
.titles {
|
||||
margin-bottom: 8px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nums {
|
||||
margin-top: 8px;
|
||||
.specialColor {
|
||||
color: #4181ff;
|
||||
}
|
||||
}
|
||||
.times {
|
||||
margin-top: 8px;
|
||||
.timesCont {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.areaNmae {
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
width: 182px;
|
||||
height: 182px;
|
||||
}
|
||||
|
||||
.hints {
|
||||
position: absolute;
|
||||
right: 52px;
|
||||
width: 96px;
|
||||
height: 44px;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiFixedBtn {
|
||||
.movableArea {
|
||||
.addBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
background: #fff;
|
||||
color: #1365dd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user