问答列表,我的提问页

pages-question/hasQuestion.vue

@@ -1,6 +1,14 @@
 <template>
-  <view>
-      我要提问
+  <view class="hasquestion-wrap">
+    <view class="title">问题描述</view>
+    <textarea
+      v-model="text"
+      placeholder="请输入问题描述"
+      placeholder-class="textarea-placeholder"
+    />
+    <view class="btn-wrap">
+      <view class="btn" @click="handleClick">完成</view> 
+    </view>
   </view>
 </template>
 
@@ -8,15 +16,51 @@
 export default {
   data() {
     return {
-
+      text:''
     };
   },
   methods: {
-
+    handleClick(){
+      const pages = getCurrentPages()
+      console.log(pages)
+      pages[pages.length-2].data.changeSelect('me')
+      uni.navigateBack({delta:1})
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
-
+.hasquestion-wrap{
+  padding:40rpx 34rpx;
+  .title{
+    margin-bottom: 20rpx;
+    font-size: 32rpx;
+    color: #333333;
+  }
+  textarea{
+    width:100%;
+    height:294rpx;
+    box-sizing: border-box;
+    padding:30rpx;
+    border:1rpx solid #BEBEBE;
+    border-radius: 8rpx;
+  }
+  .btn-wrap{
+    margin-top: 120rpx;
+    text-align: center;
+    .btn{
+      display: inline-block;
+      width:390rpx;
+      height:80rpx;
+      background-color: #E6B77D;
+      border-radius: 40rpx;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      text-align: center;
+      line-height: 80rpx;
+    }
+  }
+  
+}
 </style>

pages/question/question.vue

@@ -1,29 +1,35 @@
 <template>
 	<view class="question-wrap">
 		<view class="question-top">
-			<text>热门问答</text>
-			<van-checkbox class="auth-box" shape="square" v-if="vistor.premission.seeAuth" :value="onlySeeAuth"
-				@change="handleAuthChange" checked-color="#D5AD79" icon-size="16px">
-				<view class="text">只看我的{{ vistor.type === 1 ? '回答' : '提问' }}</view>
-			</van-checkbox>
-			<image src="../../static/chart/menu.png" mode="widthFix" class="menu-icon" v-if="vistor.premission.option"
+			<text class="text" :class="{'active':selectType==='all'}" @click="changeSelect('all')">热门问答</text>		
+			<view class="text" :class="{'active':selectType==='me'}" @click="changeSelect('me')">我的{{ vistor.type === 1 ? '回答' : '提问' }}</view>
+			<template>
+			<image src="../../static/chart/menu.png" mode="widthFix" class="menu-icon"
 				@click="showPopup" />
-			<van-popup :show="isPopupShow" position="bottom" closeable :close-on-click-overlay="true"
+			筛选	
+			</template>
+			
+			<van-popup :show="isPopupShow" position="bottom"  round  :close-on-click-overlay="false"
 				@close="isPopupShow = false" :style="{ height: '30%' }">
-				<view class="pop-title">全部筛选</view>
-				<view class="pop-option-list">
-					<van-collapse :value="activeNames" @change="changeSelecOption">
-						<van-collapse-item :title="item.title" :name="index" v-for="(item, index) in optionList"
-							:key="index">
-							<view class="option-btn-wrap">
-								<view class="option-btn" v-for="(i, _index) in item.btnList" :key="_index">
-									{{ i.name }}
+				<view class="pop-wrap">
+					<view class="pop-top">
+						<text>全部筛选</text>
+						<text @click="isPopupShow=false">取消</text>
+					</view>	
+					<view class="pop-option-list">
+						<van-collapse :value="activeName" @change="changeSelecOption" accordion :border="false">
+							<van-collapse-item :border="false" :title="item.title" :name="index" v-for="(item, index) in optionList"
+								:key="index">
+								<view class="option-btn-wrap">
+									<view class="option-btn" @click="selectName=i.name" :class="{'active':selectName===i.name}" v-for="(i, _index) in item.btnList" :key="_index">
+										{{ i.name }}
+									</view>
 								</view>
-							</view>
-
-						</van-collapse-item>
-					</van-collapse>
-				</view>
+							</van-collapse-item>
+						</van-collapse>
+					</view>
+					<view class="pop-btn" @click="changeSelect('name')">完成</view>
+				</view>	
 			</van-popup>
 		</view>
 		<view class="question-list">
@@ -36,15 +42,15 @@
 						<view class="answer-info">
 							<text class="name">{{ item.answer.name }}</text>
 							<text class="group">弘则{{ item.answer.group }}组研究员</text>
-							<text class="label">#{{ item.label }}</text>
+							<text class="label">{{ item.label }}</text>
 						</view>
 						<view class="answer" @click="handleAudio(item)">
-							{{ item.answer.isplay ? '暂停' : '播放' }}
+							<text>{{ item.answer.isplay ? '暂停' : '播放' }}</text>
 							<template v-if="item.answer.isplay || item.answer.ispause">
-								{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}
+								<text>{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}</text>
 							</template>
 							<template v-else>
-								{{ item.answer.audioTime }}
+								<text>{{ item.answer.audioTime }}</text>
 							</template>
 
 						</view>
@@ -86,6 +92,7 @@ export default {
 			isPopupShow: false,//弹出层是否展示
 			optionList: varietyData,
 			activeNames: [],//collapse
+			activeName:'',
 			innerAudio: null,//该页面的音频
 			vistor: {//用户信息
 				type: 1,//1研究员,2客户
@@ -110,11 +117,16 @@ export default {
 				mobile: "",
 				customer_info:{}
 			},
+			selectType:'all',
+			selectName:'宏观'
 		}
 	},
 	onLoad() {
 		this.initAudio()
 		this.getVistor()
+	},
+	onShow() {
+		
 	},
 	ononUnload() {
 		this.destoryAudio()
@@ -135,12 +147,12 @@ export default {
 		getVistor() {
 			this.vistor = {
 				type: 2,
-				status: '冻结',
+				status: '正式',
 				premission: {
-					seeAuth: false,//只看我的筛选框
-					option: false,//弹窗筛选框
-					isApply: false,//之前是否提交过申请
-					canPlay: false,//是否能够播放音频
+					seeAuth: true,//只看我的筛选框
+					option: true,//弹窗筛选框
+					isApply: true,//之前是否提交过申请
+					canPlay: true,//是否能够播放音频
 				}
 			}
 		},
@@ -188,7 +200,7 @@ export default {
 		handleCallPhone(mobile) {
 
 		},
-		//申请
+		//申请权限
 		async handleApply() {
 			if (this.pupData.customer_info.has_apply) {//已经申请过
 				this.pupData.content = `<p>您已提交过申请，请耐心等待</p>`
@@ -231,10 +243,14 @@ export default {
 				audioCurrentUrl: source
 			}
 		},
-		//点击'只看我的
-		handleAuthChange(e) {
-			this.onlySeeAuth = e.detail
-			console.log('ok')
+		//点击'热门回答'/'只看我的'/筛选弹窗的按钮
+		changeSelect(type) {
+			if(type!=='name'){
+				this.selectType = type
+			}else{
+				this.isPopupShow = false
+			}
+			//getData()
 		},
 		//点击筛选
 		showPopup() {
@@ -244,7 +260,7 @@ export default {
 		changeBtnShow() {
 		},
 		changeSelecOption(e) {
-			this.activeNames = e.detail
+			this.activeName = e.detail
 		},
 		//点击某条音频
 		handleAudio(item) {
@@ -298,11 +314,26 @@ export default {
 
 <style lang="scss">
 .question-wrap {
-
+	.van-popup--bottom{
+		padding-bottom: 0 !important;
+	}
 	/deep/ .van-cell__title,
 	.van-cell__value {
 		flex: none !important;
 	}
+	.van-collapse-item{
+		&.van-hairline--top{
+			&::after{
+				border: none !important;
+			}
+		}
+		.van-cell{
+			padding-left:0 !important;
+		}
+	}
+	.van-collapse-item__content{
+		padding:0;
+	}
 }
 
 page {
@@ -311,20 +342,31 @@ page {
 </style>
 <style lang="scss" scoped>
 .question-wrap {
-	padding: 0 30rpx;
-
+	padding: 0 30rpx 80rpx 30rpx;
+	background-color: #FFFFFF;
 	.question-top {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		height: 100rpx;
-		border-bottom: 1rpx solid black;
 		background-color: white;
 		position: sticky;
 		top: 0;
 		left: 0;
 		z-index: 99;
-
+		.text{
+			width:240rpx;
+			height:70rpx;
+			line-height: 70rpx;
+			background-color: #F5F5F5;
+			border-radius: 4rpx;
+			color:#666666;
+			text-align: center;
+			&.active{
+				color:#E3B377;
+				background-color: #FDF8F2;
+			}
+		}
 		.auth-box {
 			flex: 1;
 		}
@@ -332,49 +374,97 @@ page {
 		.menu-icon {
 			width: 40rpx;
 		}
-
-		.pop-title {
-			text-align: center;
-		}
-
-		.pop-option-list {
-			.option-btn-wrap {
+		.pop-wrap{
+			padding: 50rpx 34rpx 0 34rpx;
+			.pop-top {
 				display: flex;
-				flex-wrap: wrap;
+				justify-content: space-between;
+				text{
+					font-size: 32rpx;
+					&:first-child{	
+						color: #000000;
+					}
+					&:last-child{
+						color: #E3B377;
+					}
+				}
+			}
 
-				.option-btn {
-					min-width: 100rpx;
-					text-align: center;
-					color: black;
-					background-color: gray;
-					border-radius: 5rpx;
-					margin: 10rpx 10rpx 0 0;
+			.pop-option-list {
+				.option-btn-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					margin-bottom: 20rpx;
+					.option-btn {
+						width: 215rpx;
+						height:76rpx;
+						line-height: 76rpx;
+						text-align: center;
+						color: black;
+						background-color: #F6F6F6;
+						border-radius: 4rpx;
+						margin: 10rpx 10rpx 0 0;
+						&.active{
+							background-color: #FAEEDE;
+						}
+					}
 				}
 			}
+			.pop-btn{
+				height:80rpx;
+				margin:0 -34rpx;
+				text-align: center;
+				line-height: 80rpx;
+				color:#FFFFFF;
+				background-color: #E6B77D;
+			}
 		}
+		
 	}
 
 	.question-list {
 		.question-item {
 			margin-bottom: 20rpx;
-
+			&::after{
+				content: '';
+				display: block;
+				height:10rpx;
+				margin:0 -30rpx;
+				background-color: #F9F9F9;
+			}
+			&:last-child{
+				&::after{
+					background-color: #FFFFFF;
+				}
+			}
 			.item-title {
 				display: block;
+				font-size: 32rpx;
+				color:#333333
 			}
 
 			.item-time {
-				color: gray;
+				color: #999999;
+				font-size: 24rpx;
+				margin:20rpx 0;
+				display: block;
 			}
 
 			.item-answer {
 				display: flex;
-
+				width:100%;
+				height: 213rpx;
+				background-color: #FDF8F2;
+				box-sizing: border-box;
+				padding:20rpx;
+				align-items: center;
+				position:relative;
 				.answer-img {
-					width: 75rpx;
-					height: 75rpx;
-					border: 1rpx solid black;
+					width: 146rpx;
+					height: 146rpx;
+					border: 4rpx solid #FFFFFF;
 					border-radius: 50%;
-					margin-right: 50rpx;
+					margin-right: 20rpx;
 				}
 
 				.answer-other {
@@ -383,24 +473,42 @@ page {
 
 					.answer-info {
 						.name {
-							color: black;
+							color: #333333;
+							font-size: 28rpx;
+							margin-right: 20rpx;
 						}
 
 						.group {
-							color: grey;
+							color: #999999;
+							font-size: 24rpx;
 						}
 
 						.label {
-							color: orange;
+							position: absolute;
+							right:0;
+							top:0;
+							width: 90rpx;
+							height:41rpx;
+							font-size: 24rpx;
+							text-align: center;
+							line-height: 41rpx;
+							background-color: #333333;
+							color: #E4B478;
 						}
 					}
 				}
 
 				.answer {
-					width: 420rpx;
-					height: 50rpx;
-					border-radius: 10rpx;
-					border: 1rpx solid black;
+					margin-top: 20rpx;
+					width: 340rpx;
+					height: 74rpx;
+					box-sizing: border-box;
+					padding:20rpx 30rpx;
+					border-radius: 37rpx;
+					background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
+					display: flex;
+					justify-content: space-between;
+					color: #FFFFFF;
 				}
 			}
 		}
@@ -408,16 +516,15 @@ page {
 
 	.topage-btn {
 		position: fixed;
-		width: 220rpx;
-		height: 64rpx;
+		left:0;
+		right:0;
+		bottom: 0;
+		height: 80rpx;
 		text-align: center;
-		line-height: 64rpx;
-		left: 50%;
-		margin-left: -110rpx;
-		bottom: 220rpx;
-		background-color: orange;
-		color: white;
-
+		line-height: 80rpx;
+		background-color: #333333;
+		box-shadow: 0px 4px 20px 1px rgba(160, 126, 84, 0.25);
+		color: #E3B377;
 	}
 }
 </style>