功能实现

pages/index/home.vue

@@ -0,0 +1,172 @@
+<template>
+	<view :style="vuex_skin">
+		<view style="padding: 30rpx 30rpx 10rpx;">
+			<u-swiper :list="swiperList" border-radius="12" height="300"></u-swiper>
+		</view>
+		<view class="">
+			<view class="cu-list grid col-4 no-border" style="border-radius:20rpx ;">
+				<view class="cu-item" @click.stop="$jump(item.path)" v-for="(item,index) in gridList"
+					:key="index">
+					<view class="grid-icon">
+						<image style="width: 88rpx;height: 88rpx;" :src="item.icon" />
+					</view>
+					<text style="color: #222222;font-size: 26rpx;">{{item.name}}</text>
+					<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="" style="height: 20rpx;background-color: #f8f8f8"></view>
+		<view style="padding: 30rpx 30rpx 0">
+			<u-search placeholder="搜索关键词或编号" height="70" @search="searchWorks" v-model="keyword" :show-action="false"></u-search>
+		</view>
+		<view class="padding-30">
+			<view class="text-bold" style="font-size: 34rpx;">
+				{{vuex_page_interface_show.indexTitle}}
+			</view>
+			<view  @click="$jump('/pages/activity/activityDetail?id='+item.id)" class="card shadow" v-for="(item,index) in worksList" :key="item.id">
+				<view v-if="index==0" class="center bg-img rank-tag" style="background-image: url(../../static/icon/ph1.png)">
+					<text>1</text>
+				</view>
+				<view v-if="index==1" class="center bg-img rank-tag" style="background-image: url(../../static/icon/ph2.png)">
+					<text>2</text>
+				</view>
+				<view v-if="index==2" class="center bg-img rank-tag" style="background-image: url(../../static/icon/ph3.png)">
+					<text>3</text>
+				</view>
+		
+				<view class="left">
+					<image :src="item.imgUrl" mode=""></image>
+				</view>
+				<view class="right">
+					<view class="flex-direction flex">
+						<text class="title">{{item.title}}</text>
+						 <rich-text class="desc text-cut-2" :nodes="decodeURIComponent(item.content)"></rich-text>
+					</view>
+					<view class="bottom">
+						<view class="flex margin-top-10">
+							<image class="center" style="width: 30rpx;height: 30rpx;" src="../../static/icon/remen.png">
+							</image>
+							<text style="color: #353535;margin-left: 6rpx;font-size:28rpx;">{{item.voteCount}}</text>
+						</view>
+						<view class="cu-btn round sm line-base">
+							去助力
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: '',
+		async mounted() {
+			console.log(2);
+			await this.initWorksList();
+		},
+		methods :{
+			async initWorksList(){
+				const { defaultActiveId:activeId }= this.$store.state['vuex_active_setting'];
+				this.$api.activity.getWorksList({ activeId }).then(res => {
+						this.worksList = res.data.data;
+					});
+				},
+			searchWorks(value){
+				this.$api.activity.searchWork(value).then(res => {
+					this.worksList = res.data.data;
+				})
+			}
+		},
+		data() {
+			return {
+				worksList: [],
+				swiperList: ['https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/70c8b355db774f85ab9f8d4f6289df69-banner.jpg'],
+				gridList: [{
+						icon: '/static/grid/jieshao.png',
+						name: "活动介绍",
+						path:"/pages/introduce/introduce"
+					}, {
+						icon: '/static/grid/baoming.png',
+						name: "我要代言",
+					},
+					{
+						icon: '/static/grid/rank.png',
+						name: "排行榜",
+						path:"/pages/rank/rank"
+					},
+					{
+						icon: '/static/grid/more.png',
+						name: "更多活动",
+					}
+				]
+			};
+		}
+	};
+</script>
+
+<style>
+	page {
+		background-color: #FFFFFF;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.shadow {
+		box-shadow: #f8f8f8 0px 0px 10rpx 10rpx
+	}
+
+	.rank-tag {
+		color: #FFFFFF;
+		width: 40rpx;
+		height: 46rpx;
+		position: absolute;
+		left: 10rpx;
+		top: 0rpx;
+		z-index: 999;
+	}
+	.card {
+		position: relative;
+		margin-top: 30rpx;
+		border-radius: 10rpx;
+		padding: 15rpx;
+		display: flex;
+
+		.left {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			image {
+				width: 210rpx;
+				height: 210rpx;
+				border-radius: 10rpx;
+			}
+		}
+
+		.right {
+			margin-left: 20rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+
+			.title {
+				font-weight: 800;
+				color: #353535;
+				font-size: 32rpx;
+			}
+
+			.desc {
+				color: #888888;
+				line-height: 40rpx;
+				padding-top: 20rpx;
+				font-size: 26rpx;
+			}
+
+			.bottom {
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+	}
+</style>