ソースを参照

我的问卷首页静态页完成

htc 1 日 前
コミット
8eb5bf015a

+ 3 - 9
components/pageEmpty/index.vue

@@ -1,16 +1,12 @@
 <template>
-	<div class="page-empty" :style="{'height':height,'margin-top':marginTop}">
-		<u-empty text="暂无数据" textSize="26rpx" width="332rpx" height="332rpx" mode="order" :icon="imgBase+'img_empty.jpg'"></u-empty>
+	<div class="page-empty adffcacjc" :style="{'margin-top':marginTop}">
+		<u-empty text="暂无数据" textSize="32rpx" text-color="#999999" width="332rpx" height="332rpx" mode="order" :icon="imgBase+'recharge_empty.png'"></u-empty>
 	</div>
 </template>
 
 <script>
 	export default {
 		props:{
-			height:{
-				typeof: String,
-				default: '100vh'
-			},
 			marginTop:{
 				typeof: String,
 				default: '0px'
@@ -30,8 +26,6 @@
 <style scoped lang="less">
 	.page-empty{
 		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		height: 100%;
 	}
 </style>

+ 11 - 0
pages.json

@@ -92,6 +92,17 @@
 		}
 	],
 	"subPackages": [
+		{
+			"root": "pagesHome",
+			"pages": [
+				{
+					"path": "questionnaire",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		},
 		{
 			"root": "pagesPublish",
 			"pages": [

+ 2 - 2
pages/home.vue

@@ -66,7 +66,7 @@
 					<image :src="imgBase+'home_img_baogao.png'"></image>
 					<text>PREILL报告</text>
 				</div>
-				<div class="common-menu-pre adffcac">
+				<div class="common-menu-pre adffcac" @click="toTurn('/pagesHome/questionnaire')">
 					<image :src="imgBase+'home_img_guanli.png'"></image>
 					<text>问卷管理</text>
 				</div>
@@ -152,7 +152,7 @@
 		methods:{
 			toTurn(url){
 				if(!url) return 
-				if(url!=='/pages/dialog'&&!this.isLogin()) return
+				// if(url!=='/pages/dialog'&&!this.isLogin()) return
 				uni.navigateTo({
 					url
 				})

+ 171 - 0
pagesHome/components/createList.vue

@@ -0,0 +1,171 @@
+<template>
+	<view class="qbox adffc">
+		<div class="list" v-if="list.length">
+			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
+				<up-list-item class="list-item" v-for="(item, index) in list" :key="index">
+					<image class="expand" :src="imgBase+'questionnaire_icon_down.png'"></image>
+					<div class="title">{{item.title||''}}</div>
+					<div class="name">团队名称:{{item.teamName||''}}</div>
+					<div class="progress adfacjb">
+						<div class="progress-left adfac">
+							<div class="progress-left-text">作答进度:</div>
+							<div class="progress-left-box">
+								<div class="progress-left-box-current" :style="{'width':(item.yzdNum/item.sum*100)+'%'}"></div>
+							</div>
+						</div>
+						<div class="progress-right"><span>{{item.yzdNum}}/</span>{{item.sum}}</div>
+					</div>
+					<div class="bottom adfacjb">
+						<div class="bottom-left">截止时间:{{item.endTime}}</div>
+						<div class="bottom-right" v-if="item.status===0">立即作答</div>
+						<div class="bottom-right" v-else-if="item.status===1">生成报告</div>
+						<div class="bottom-right" v-else-if="item.status===2">发送报告</div>
+					</div>
+				</up-list-item>
+			</up-list>
+		</div>
+		<div class="empty" v-else>
+			<page-empty></page-empty>
+		</div>
+	</view>
+</template>
+
+<script>
+	import PageEmpty from '@/components/pageEmpty/index.vue'
+	export default {
+		components:{ PageEmpty },
+		props:{
+			list:{
+				typeof:Array,
+				default:[]
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			scrolltolower(){
+				this.$emit('scrolltolower')
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.qbox{
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		
+		.list{
+			flex: 1;
+			margin-top: 20rpx;
+			overflow: hidden;
+			&-item{
+				width: 100%;	
+				background: #FFFFFF;
+				border-radius: 24rpx;
+				margin-top: 20rpx;
+				padding: 36rpx 24rpx 19rpx;
+				box-sizing: border-box;
+				position: relative;
+				display: block;
+			
+				.expand{
+					width: 32rpx;
+					height: 32rpx;
+					position: absolute;
+					top: 36rpx;
+					right: 32rpx;
+				}
+				
+				.title{
+					width: calc(100% - 128rpx);
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					line-height: 32rpx;
+				}
+				
+				.name{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #667E90;
+					line-height: 24rpx;
+					margin-top: 35rpx;
+				}
+				
+				.progress{
+					margin-top: 36rpx;
+					&-left{
+						width: calc(100% - 95rpx);
+						&-text{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #667E90;
+							line-height: 24rpx;
+						}
+						&-box{
+							flex: 1;
+							position: relative;
+							height: 12rpx;
+							background: #F0F2F8;
+							border-radius: 6rpx;
+							&-current{
+								height: 12rpx;
+								background: #7CC5C5;
+								border-radius: 6rpx;
+								position: absolute;
+								top: 0;
+								left: 0;
+							}
+						}
+					}
+					&-right{
+						font-size: 24rpx;
+						line-height: 24rpx;
+						color: #95A5B1;
+						span{
+							font-size: 24rpx;
+							line-height: 24rpx;
+							color: #002846;
+						}
+					}
+				}
+				
+				.bottom{
+					margin-top: 30rpx;
+					border-top: 1rpx solid #EFEFEF;
+					padding-top: 20rpx;
+					&-left{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #667E90;
+						line-height: 24rpx;
+					}
+					&-right{
+						border-radius: 32rpx;
+						background: rgba(144, 74, 135, .11);
+						padding: 19rpx 22rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #761E6A;
+						line-height: 26rpx;
+						letter-spacing: 2rpx;
+					}
+				}
+			}
+		}
+		
+		.empty{
+			flex: 1;
+		}
+	}
+</style>

+ 156 - 0
pagesHome/components/receiveList.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="qbox adffc">
+		<view class="list" v-if="list.length">
+			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
+				<up-list-item class="list-item" v-for="(item, index) in list" :key="index">
+					<view class="status adf" :class="{'dwc':item.status===0,'ywc':item.status===1}">
+						<image :src="imgBase+'questionnaire_icon_dwc.png'" v-if="item.status===0"></image>
+						<image :src="imgBase+'questionnaire_icon_ywc.png'" v-else-if="item.status===1"></image>
+						<text>{{item.status===0?'待完成':item.status===1?'已完成':''}}</text>
+					</view>
+					<image class="expand" :src="imgBase+'questionnaire_icon_down.png'"></image>
+					<view class="title">{{item.title||''}}</view>
+					<view class="name">团队名称:{{item.teamName||''}}</view>
+					<view class="bottom adfacjb">
+						<view class="bottom-left">截止时间:{{item.endTime}}</view>
+						<view class="bottom-right" v-if="item.status===0">立即作答</view>
+						<view class="bottom-right" v-else-if="item.status===1">查看报告</view>
+					</view>
+				</up-list-item>
+			</up-list>
+		</view>
+		<view class="empty" v-else>
+			<page-empty></page-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import PageEmpty from '@/components/pageEmpty/index.vue'
+	export default {
+		components:{ PageEmpty },
+		props:{
+			list:{
+				typeof:Array,
+				default:[]
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			scrolltolower(){
+				this.$emit('scrolltolower')
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.qbox{
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		
+		.list{
+			flex: 1;
+			margin-top: 20rpx;
+			overflow: hidden;
+			&-item{
+				width: 100%;	
+				background: #FFFFFF;
+				border-radius: 24rpx;
+				margin-top: 20rpx;
+				padding: 99rpx 24rpx 19rpx;
+				box-sizing: border-box;
+				position: relative;
+				display: block;
+				
+				.status{
+					width: 164rpx;
+					height: 80rpx;
+					padding: 14rpx 0 0 15rpx;
+					box-sizing: border-box;
+					position: absolute;
+					left: 0;
+					top: 0;
+					image{
+						width: 26rpx;
+						height: 26rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 24rpx;
+						margin-left: 12rpx;
+					}
+					&.dwc{
+						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/questionnaire_dwc.png') no-repeat;
+						background-size: 100% 100%;
+					}
+					&.ywc{
+						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/questionnaire_ywc.png') no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+			
+				.expand{
+					width: 32rpx;
+					height: 32rpx;
+					position: absolute;
+					top: 24rpx;
+					right: 32rpx;
+				}
+				
+				.title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					line-height: 32rpx;
+				}
+				
+				.name{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #667E90;
+					line-height: 24rpx;
+					margin-top: 32rpx;
+				}
+				
+				.bottom{
+					margin-top: 30rpx;
+					border-top: 1rpx solid #EFEFEF;
+					padding-top: 20rpx;
+					&-left{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #667E90;
+						line-height: 24rpx;
+					}
+					&-right{
+						border-radius: 32rpx;
+						background: rgba(144, 74, 135, .11);
+						padding: 19rpx 22rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #761E6A;
+						line-height: 26rpx;
+						letter-spacing: 2rpx;
+					}
+				}
+			}
+		}
+		
+		.empty{
+			flex: 1;
+		}
+	}
+</style>

+ 160 - 0
pagesHome/questionnaire.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='我的问卷' bgColor="transparent"></cus-header>
+		<image class="top_bg" :src="imgBase+'questionnaire_top_bg.png'" mode="widthFix"></image>
+		<div class="tab adfac">
+			<div class="tab-pre" :class="{'active':tindex===0}" @click="changeTab(0)">我收到的</div>
+			<div class="tab-pre" :class="{'active':tindex===1}" @click="changeTab(1)">我创建的</div>
+		</div>
+		<div class="query adfacjb">
+			<u-icon name="search" size="38rpx" color="#B3BFC8"></u-icon>
+			<div class="query-inp">
+				<u-input v-model="keyword" border="none" fontSize="26rpx" color="#002846" clearable
+				 placeholder="请输入团队名称查询" @confirm="getList"></u-input>
+			</div>
+		</div>
+		<div class="box">
+			<template v-if="tindex===0">
+				<receive-list :list="receiveList" @scrolltolower="receiveScrolltolower"></receive-list>
+			</template>
+			<template v-else-if="tindex===1">
+				<create-list :list="createList" @scrolltolower="createScrolltolower"></create-list>
+			</template>
+		</div>
+	</view>
+</template>
+
+<script>
+	import ReceiveList from './components/receiveList.vue'
+	import CreateList from './components/createList.vue'
+	export default {
+		components:{ ReceiveList, CreateList },
+		data(){
+			return {
+				tindex:0,
+				keyword:'',
+				receiveList:[
+					{
+						status:0,
+						title:'GW+MC PREILL36测评题库版本',
+						teamName:'甜梦巧克力有限公司',
+						endTime:'2025-05-28 24:00:00'
+					},
+					{
+						status:1,
+						title:'GW+MC PREILL36测评题库版本',
+						teamName:'甜梦巧克力有限公司',
+						endTime:'2025-05-28 24:00:00'
+					},
+				],
+				createList:[
+					{
+						status:0,
+						title:'GW+MC PREILL36测评题库版本',
+						teamName:'甜梦巧克力有限公司',
+						yzdNum:0,
+						sum:1,
+						endTime:'2025-05-28 24:00:00'
+					},
+					{
+						status:1,
+						title:'GW+MC PREILL36测评题库版本',
+						teamName:'甜梦巧克力有限公司',
+						yzdNum:5,
+						sum:15,
+						endTime:'2025-05-28 24:00:00'
+					},
+					{
+						status:2,
+						title:'GW+MC PREILL36测评题库版本',
+						teamName:'甜梦巧克力有限公司',
+						yzdNum:15,
+						sum:15,
+						endTime:'2025-05-28 24:00:00'
+					},
+				],
+			}
+		},
+		methods:{
+			changeTab(index){
+				this.tindex = index;
+			},
+			getReceiveList(){
+				
+			},
+			getCreateList(){
+				
+			},
+			receiveScrolltolower(){
+				console.log(1);
+			},
+			createScrolltolower(){
+				console.log(2);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.default_page{
+		padding: 0 24rpx 40rpx;
+		background: #F7F7F7;
+		box-sizing: border-box;
+		
+		.top_bg{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	
+		.query{
+			width: calc(100% - 12rpx);
+			margin: 40rpx 6rpx 0;
+			height: 72rpx;
+			background: #FFFFFF;
+			border-radius: 36rpx;
+			padding: 0 36rpx;
+			box-sizing: border-box;
+			position: relative;
+			&-inp{
+				width: calc(100% - 55rpx);
+			}
+		}
+	
+		.box{
+			flex: 1;
+		}
+	
+		.tab{
+			margin-top: 20rpx;
+			position: relative;
+			&-pre{
+				width: 50%;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 30rpx;
+				color: #002846;
+				line-height: 42rpx;
+				text-align: center;
+				&.active{
+					font-weight: bold;
+					font-size: 32rpx;
+					line-height: 45rpx;
+					position: relative;
+					&::after{
+						content: '';
+						width: 48rpx;
+						height: 6rpx;
+						background: #904A87;
+						border-radius: 9rpx;
+						position: absolute;
+						left: 50%;
+						margin-left: -24rpx;
+						bottom: -22rpx;
+					}
+				}
+			}
+		}
+	}
+</style>