frontend_h5/treegitee/pages/activity/index.vue

131 lines
3.2 KiB
Vue

<template>
<view class="content" v-if="istrue">
<!-- t4 -->
<view class="plr20 t3">
<view v-if="hotActivity.length!=0" class="flex_column flex_items">
<view v-for="(item,index) in hotActivity" :key="index" class="pb30 bbe9s mt30" style="width: 100%;">
<view class="flex_between flex_items" style="width: 100%;">
<view class="flex_start flex_items">
<image :src="item.banner" style="width: 72rpx;height: 72rpx;border-radius: 50%;" mode="">
</image>
<view class="flex_column ml20">
<text class="f30" style="color: #333;">{{item.active_name}}</text>
<text v-if="item.rule" class="f24 mt10"
style="color: #898989;">{{item.rule.rate}}</text>
</view>
</view>
<view @click="getp(item.id,item.active_type)" class="flex_items flex_center"
style="width: 144rpx;height: 48rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);box-shadow: 0rpx 4rpx 12rpx 0rpx #FFC79F;border-radius: 24rpx">
<text class="f24" style="color: #fff;">立即参与</text>
</view>
</view>
<u-line-progress class="mt20" :percentage="item.process_rate" inactiveColor="#F8DDC5"
activeColor="#F9535A"></u-line-progress>
</view>
</view>
<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
<text>--暂无数据--</text>
</view>
</view>
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
</view>
</template>
<script>
export default {
data() {
return {
istrue: false,
hotActivity: [],
form: {
page: 1,
pageSize: 10
}
}
},
onLoad() {
this.getData()
},
methods: {
getData() {
uni.showLoading({
title: "加载中..."
})
this.api.getactivit(this.form).then((res) => {
console.log(res)
if (res.data.code == 200) {
//数据请求完成之后停止下拉刷新
uni.stopPullDownRefresh();
uni.hideLoading()
if (res.data.data.data.length == 0) {
uni.showToast({
title: "暂无数据",
icon: "none"
})
this.istrue = true
return false
}
res.data.data.data.forEach((item, index) => {
item.rule = JSON.parse(item.rule)
});
for (let i = 0; i < res.data.data.data.length; i++) {
this.hotActivity.push(res.data.data.data[i])
}
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
this.istrue = true
})
},
getp(id, types) {
if (types == 2) {
uni.navigateTo({
url: "/pages/turntable/index?id=" + id
})
} else if (types == 3) {
uni.navigateTo({
url: "/pages/scap/index?id=" + id
})
} else if (types == 5) {
uni.navigateTo({
url: "/pages/around/index?id=" + id
})
} else if (types == 6) {
uni.navigateTo({
url: "/pages/answer/index?id=" + id
})
} else {}
}
},
onReachBottom() {
uni.showLoading({
title: "加载中..."
})
this.form.page += 1
this.getData()
},
onPullDownRefresh() {
this.form.page = 1
this.hotActivity = []
this.getData()
}
}
</script>
<style>
.z5 {
height: 260rpx;
width: 100%;
position: relative;
}
.z4 {
height: 192rpx;
width: 48%;
position: relative;
}
</style>