nc.963.cn/pages/test-detail/test-detail.vue

<template>
	<view class="main-page">
		<view class="header">
			<view class="banner">
				<image :src="img" mode="aspectFill"></image>
			</view>
			<view class="text">
				<p>{{ list.name }}</p>
				<view class="text-deta">{{ list.content }}</view>
				<view class="prce-li">
					<view>{{ list.price }}<a>元</a></view>
					<view><i></i>精选{{ list.question_number }}道题 | 已测{{ list.test_number }}人</view>
				</view>
			</view>
		</view>
		<view class="list-li" v-if="likeList.length > 0">
			<list :List="likeList"></list>
		</view>
		<view id="foot-box" class="cu-bar bg-white shadow">
			<view class="action" @click="toHome">
				<view class="cuIcon-cu-image">
					<image src="../../static/img/homes.png"></image>
				</view>
				<view class="text">首页</view>
			</view>
			<view class="action" @click="godetail">
				<view class="btns">立即测评</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getquestionList,gettextList } from '../../api/test.js';
import list from '@/components/list/list';
export default {
	components: {
		list
	},
	data() {
		return {
			id: '',
			list: {},
			likeList: [],
			img: ''
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.img = option.img;
		// 获取当前题的详情
		getquestionList({name_id:option.id}).then(res => {
			if (res.code == 1) {
				this.list = res.data[0].test_name
			}
		})
		this.getLikelist();
	},
	methods: {
		// 获取喜欢的列表数据
		getLikelist(){
			gettextList({nav_id:this.id}).then(res => {
				if (res.code == 1) {
					this.likeList = res.data.list
				}
			})
		},
		// 立即测评
		godetail() {
			uni.navigateTo({
				url:'/pages/test/test?id='+this.id+'&time='+this.list.time
			})
		},
		// 去首页
		toHome(){
			uni.navigateTo({
				url: '../home/home'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F7F7;
		padding-bottom: 120upx;
		.header{
			width: 100%;
			background-color: #FFFFFF;
			.banner{
				width: 100%;
				height: 320upx;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.text{
				padding: 36upx 32upx 28upx 32upx;
				p{
					font-size: 36upx;
					font-weight: bold;
					color: #333334;
				}
				.text-deta{
					font-size: 28upx;
					font-weight: 400;
					margin-top: 10upx;
					color: #848484;
					line-height: 48upx;
				}
			}
			.prce-li{
				overflow: hidden;
				margin-top: 20upx;
				view{
					display: inline-block;
					&:nth-child(1){
						width: 20%;
						color: #FA564C;
						font-size: 32upx;
						font-weight: 600;
						a{
							font-weight: 500;
							margin-left: 5upx;
							font-size: 20upx;
						}
					}
					&:nth-child(2){
						width: 80%;
						text-align: right;
						color: #848484;
						font-size: 28upx;
						i{
							width: 20upx;
							height: 20upx;
							background: #EFD140;
							border-radius: 50%;
							margin-right: 10upx;
							display: inline-block;
						}
					}
				}
			}
		}
		.list-li{
			padding: 32upx 32upx 0upx 32upx;
			margin-top: 20upx;
			
			background-color: #FFFFFF;
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 120upx;
			line-height: 120upx;
			background: #FFFFFF;
			box-shadow: 0upx -2upx 8upx rgba(0, 0, 0, 0.08);
			view{
				// height: 120upx;
				// line-height: 120upx;
				display: inline-block;
				image{
					width: 54upx;
					height: 54upx;
					display: block;
				}
				span{
					color: #EFD140;
					display: block;
					font-size: 20upx;
				}
				&:nth-child(1){
					width: 20%;
					text-align: center;
				}
				&:nth-child(2){
					width: 60%;
					a{
						height: 80upx;
						font-size: 32upx;
						color: #292929;
						line-height: 80upx;
						text-align: center;
						background: #EFD140;
						opacity: 1;
						border-radius: 40upx;
					}
					
				}
			}
		}
		.cu-bar view{
			display: block;
		}
		.cu-bar uni-image{
			max-height: 200upx;
		}
		.cu-bar .action:first-child{
			// margin-left: 80upx;
			width: 20%;
			text-align: center;
		}
		.cu-bar .action:last-child{
			width: 80%;
		}
		#foot-box{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120upx;
			// line-height: 120upx;
			background: #FFFFFF;
			box-shadow: 0upx -2upx 8upx rgba(0, 0, 0, 0.08);
			image{
				width: 54upx;
				height: 54upx;
				margin-top: 10upx;
			}
			.text{
				text-align: center;
				font-size: 20upx;
				font-weight: 400;
				color: #EFD140;
			}
			.btns{
				width: 100%;
				height: 80upx;
				line-height: 80upx;
				margin-top: 20upx;
				text-align: center;
				color: #292929;
				background: #EFD140;;
				border-radius: 40upx;
			}
		}
	}
</style>