xiaochengxu/components/CommonQuestion/CommonQuestion.vue

<!--常见疑问-->
<template name="CommonQuestion">
	<view class="main">
		<view class="top">
			<text class="top_title">常见疑问</text>
			<image class="imageOfWenti" src="@/static/images/mainview/wenti.png" mode="aspectFit"/>
			<view class="top_change_area" @click="getRandomShowItems">
				<image src="@/static/images/mainview/huan.png" class="imageOfHuan" mode="aspectFit">
				<text class="text_huan">换一换</text>	
			</view>
			<u-line color="#E2E2E2" length="662rpx" customStyle="position: absolute;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="99rpx 0 0 0"></u-line>
		</view>
		<view class="cell_group">
			<u-skeleton v-if="mainPageData.question.length == 0"
				rows="4"
				:loading="true"
				:title="false"
				rowsHeight="80rpx"
				rowsWidth="702rpx"
			></u-skeleton>
			<view class="cell_item" v-for="(item,index) in questions" :key="index" v-else>
				<view style="width: 100%;height: 80rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;"
							@click="onTouchThisItem(index)"
							>
					<text class="content_title">{{item.title}}</text>
					<u-icon name="arrow-right" customStyle="margin-right: 20rpx;"/>
				</view>
				<u-line color="#E2E2E2" length="662rpx" customStyle="border: 1px solid #E2E2E2;margin-left:20rpx;" :hairline="true"></u-line>
			</view>
			
		</view>
	</view>
</template>

<script>
	var mainPageData	= getApp().globalData.mainPageData;
	var questions 		= [];
	var arr				= Array.from(mainPageData.question);
	if(arr.length > 4){
		//取前面三个
		for(let i = 0;i<4;i++){
			questions.push(arr[i]);
		}
	}else{
		questions		= arr;
	}
	export default {
		name:"CommonQuestion",
		data() {
			return {
				mainPageData,
				questions,
			};
		},
		mounted() {
			this.getRandomShowItems();
		},
		methods:{
			/**
			 * 获取随机显示的内容
			 */
			getRandomShowItems(){
				this.questions 	= [];
				var arr			= [];
				arr				= Array.from(this.mainPageData.question);
				var last		= 4;
				var len			= arr.length;
				if(len < last){
					this.questions	= arr;
					return;
				}
				while(last > 0){
					len			= arr.length;
					if(len == 0){
						break;
					}
					var index	= this.$utils.random(0,len);
					this.questions.push(arr[index]);
					arr.splice(index,1);
					last 		-= 1;
					//console.log(last);
				}
			},		

			onTouchThisItem(index){
				var data = this.questions[index];
				console.log("点击了问题：",data);
				getApp().globalData.showingSkipData = data;
				uni.navigateTo({
					url:'/pages/SkipView/SkipView'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 702rpx;
		height: 460rpx;
		position: relative;
		
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
	}
	.top{
		width: 702rpx;
		height: 99rpx;
		border-radius: 20rpx;
		position: relative;
		//background-color: #8DC63F;
	}
	.top_title{
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: relative;
		left: 16rpx;
		top: 24rpx;
	}
	.imageOfWenti{
		width: 37rpx;
		height: 37rpx;
		position: absolute;
		top: 32rpx;
		left: 174rpx;
	}
	///顶部点击换一换的区域
	.top_change_area{
		width: 132rpx;
		height: 99rpx;
		border-radius: 20rpx;
		//background-color: #A5673F;
		position: absolute;
		top: 0;
		right: 0;
	}
	.imageOfHuan{
		width: 32rpx;
		height: 27rpx;
		position: absolute;
		right: 99rpx;
		top: 36rpx;
	}
	///换一换
	.text_huan{
		width: 66rpx;
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		top: 34rpx;
		right: 22rpx;
	}
	.cell_group{
		width: 702rpx;
		height: 341rpx;
		//background-color: #39B54A;
		position: relative;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cell_item{
		width: 702rpx;
		height: 85rpx;
		//background-color: #0081FF;
		border-radius: 20rpx;
		position: relative;
	}
	.content_title{
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		margin-left: 20rpx;
	}
</style>