questionnaire/pages/index/index.vue

<template>
	<view class="page">
		<view class="header" :style="{height: CustomBar+'px', paddingTop: StatusBar+'px'}">
			问卷调查
		</view>
		<!-- 背景板 -->
		<image class="bgImg" src="../../static/image/bg2.png" mode=""></image>

		<!-- 图片 -->
		<view class="titleBox">
			<image class="img1" src="../../static/image/texttitle.png" mode=""></image>
			<image class="img2" src="../../static/image/sign.png" mode=""></image>
		</view>

		<!-- 内容 -->
		<view class="container">
			<!-- 循环 -->
			<view v-for="(data, index) in list" class="c-item" :key="index">
				<view class="lside">
					{{ data.surveyTitle }}
				</view>

				<view class="rside" @tap="toNextPage(data)">
					详情
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], // 问卷列表
			}
		},
		onLoad() {
			console.log(this.$request, this.$apiUrls)
			this.getframesurveylist()
		},

		methods: {
			// 问卷列表
			getframesurveylist() {
				this.$request.get(this.$apiUrls.getframesurveylist, { status: 0 }).then(res => {
					this.list = res.data
				})
			},
			// 跳转下一页
			toNextPage(data) {
				uni.navigateTo({
					url: `/pages/questionnaire/questionnaire?id=${data.surveyId}&name=${data.surveyTitle}&shareLogo=${data.shareLogo}&qrCode=${data.qrCode}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			flex-shrink: 0;
			width: 100%;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}


		.titleBox {
			flex-shrink: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.img1 {
				width: 420rpx;
				height: 88rpx;
			}

			.img2 {
				margin: 0 0 0 26rpx;
				width: 260rpx;
				height: 260rpx;
			}
		}

		.container {
			flex-grow: 1;
			padding: 0 30rpx;
			width: 100%;
			overflow-y: auto;

			.c-item {
				margin: 0 0 32rpx 0;
				padding: 0 30rpx;
				width: 100%;
				height: 168rpx;
				background: #EDFBF7;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lside {
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;
				}

				.rside {
					width: 160rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #3D78F6;
					border-radius: 8rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>