psy_web_share/pages/toutiao/index.vue

<template>
	<view class="bg">
		<view class="search_bar">
			<image class="search_icon"
				src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/search_icon.png"
				mode="widthFix"></image> <input type="text" :value="searchKey" @input="searchHandle">
		</view>
		<view class="banner1">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/banner1.png"
				mode="widthFix">
			</image>
			<text>客服电话：18513669826</text>
		</view>
		<view class="menu_bar">
			<view class="menu_item" v-for="item in menuList" @click="goDetail(item)">
				<image :src="item.imageUrl" class="menu_icon" mode="widthFix" />
				<view class="menu_name">{{ item.name }}</view>
			</view>
		</view>
		<view class="list_title">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/edit_icon.png"
				mode="widthFix"></image>
			<text>推荐测试</text>
		</view>
		<view class="list_wrap">
			<view class="list_item" v-for="item in searchList" @click="goDetail(item)">
				<view class="list_item_head">
					<image :src="item.imageUrl" mode="widthFix"></image>
				</view>
				<view class="list_item_body">
					<view class="item_top">
						<view class="list_item_title">{{item.name}}</view>
						<view class="list_item_flag">
							<image v-if="item.zybg"
								src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/zybg.png"
								mode="widthFix"></image>
							<image v-if="item.qltj"
								src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/qltj.png"
								mode="widthFix"></image>
						</view>
						<view class="list_item_desc">{{getDesc(item.desc)}}</view>
					</view>
					<view class="list_item_operate">
						<view class="item_price"><text class="zkj">{{item.zkj}}</text><text
								class="yj">{{item.yj}}</text></view>
						<view class="btn_test">去测一测</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//防抖
	let timer_debounce = null
	const debounce = function(func, wait) {
		if (timer_debounce) {
			clearTimeout(timer_debounce)
			timer_debounce = null;
		}
		timer_debounce = setTimeout(() => {
			func.apply(this, arguments)
		}, wait)
	}

	export default {
		data() {
			return {
				menuList: [{
						name: '标准情商测试',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item1.png',
						pageUrl: '/newScale/EQtest/index'
					},
					{
						name: 'MBTI人格测试',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item2.png',
						pageUrl: '/newScale/Mbti/index'
					}, {
						name: '家庭关系测试',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item3.png',
						pageUrl: '/newScale/Family/index'
					},
					{
						name: '睡眠质量测试',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item4.png',
						pageUrl: '/newScale/Sleep/index'
					}
				],

				scaleList: [{
						name: 'MBTI十六型人格测试',
						desc: '对同一事物，不同的人有不同的角度和感受。想知道你的情商有多高吗？为了不影响测试结果，请您如实回答以下问题，选择最符合自己的选项',
						qltj: true,
						zybg: true,
						zkj: '￥19.9',
						yj: '￥29.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item1.png',
						pageUrl: '/newScale/EQtest/index',
					},
					{
						name: '在婚姻里，你有安全感吗？',
						desc: '有很多人觉得单身的日子孤独寂寞，看到身边结了婚的朋友很和睦幸福的样子，就会很羡慕，寄希望于婚姻，希望婚姻能够帮助自己赶走孤独寂寞的滋味，能够带给自己足够的安全感。婚姻是一份爱和责任，能够带给每个人的感受不同，至于安全感，当然也是不一样的。',
						qltj: true,
						zybg: true,
						zkj: '￥0.01',
						yj: '￥9.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item2.png',
						pageUrl: '/newScale/Marriage/index'
					}, {
						name: '看一下自己的“神经”是否正常',
						desc: '本量表含有20道关于一般焦虑症状的问题，请仔细阅读每一道题及其选项，选出您认为最...',
						qltj: true,
						zybg: true,
						zkj: '￥0.01',
						yj: '￥9.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item3.png',
						pageUrl: '/newScale/Mental/index'
					},
					{
						name: '标准情商测试',
						desc: '对同一事物，不同的人有不同的角度和感受。想知道你的情商有多高吗？为了不影响测试结果，请您如实回答以下问题，选择最符合自己的选项',
						qltj: true,
						zybg: true,
						zkj: '￥9.9',
						yj: '￥19.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item4.png',
						pageUrl: '/newScale/EQtest/index'
					},
					{
						name: '你让异性的心动指数有多高',
						desc: '爱情是一件很美好的事情，也是一件很奇妙的事情。社交心理学讲，一段关系的产生，往往从人的第一印象开始。如果你给对方的印象还不错，将来无论你发生什么错误，都会认为是意外，但是如果你给对方留下的是坏印象，那么对方就会觉得你就是这种常犯错误的人。测试下你让异性的心动指数有多高吧～',
						qltj: true,
						zybg: true,
						zkj: '￥0.01',
						yj: '￥9.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item5.png',
						pageUrl: '/newScale/Charm/index',
					},
					{
						name: '你是否正在逐渐老化',
						desc: '老化是指：“到达成熟期之后，身心各方面的技能减缓、衰退的现象。”',
						qltj: true,
						zybg: true,
						zkj: '￥0.01',
						yj: '￥9.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item6.png',
						pageUrl: '/newScale/Senile/index'
					}, {
						name: '职业心理年龄测试',
						desc: '打拼职场心态很关键，心态好，才能更好地工作。成熟的职业心理是事业成功的有力保障。相比起你的生理年龄，你的职场心理年龄多大了？是否已经足够成熟？',
						qltj: true,
						zybg: true,
						zkj: '￥0.01',
						yj: '￥9.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item7.png',
						pageUrl: '/newScale/Career/index'
					},
					{
						name: '睡眠质量测试',
						desc: '指导语决定睡眠是否充足，除了量的要求外，更重要的还有质的要求。睡眠质的含义主要是睡眠深度，与慢波睡眠和快波睡眠两者比例相关，特别是深慢波睡眠对改善大脑疲劳有重要作用。睡眠的质量一般可用以下标准来衡量：（1）、入睡快，上床后10-30分钟左右入睡；（2）、睡眠深，呼吸深长不易惊醒；（3）、无起夜或很少起夜，无惊梦现象，醒后能很快忘记梦境；（4）、早晨醒后，精神好，起床快；（5）、白天神清脑爽，不困倦，工作效率高。',
						qltj: true,
						zybg: true,
						zkj: '￥9.9',
						yj: '￥19.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item8.png',
						pageUrl: '/newScale/Sleep/index'
					},
					{
						name: '工作倦怠量表(MBI-GS)',
						desc: '请仔细阅读下面的每一条陈述，选择合适的选项。',
						qltj: true,
						zybg: true,
						zkj: '￥19.9',
						yj: '￥29.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item9.png',
						pageUrl: '/newScale/Burnout/index',
					},
					{
						name: '你的家庭关系健康吗？',
						desc: '下面是一些对家庭的描述，请仔细阅读每一项，并根据近2月您对您家庭的看法，在四个可能的答案中选出形容您家庭最接近的答案。要求年龄在12岁以上的家庭成员都要完成FAD问卷。1非常同意（或很像我家）2同意（或像我家） 3不同意（或不像我家）4完全不同意（或完全不像我家）',
						qltj: true,
						zybg: true,
						zkj: '￥19.9',
						yj: '￥29.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item10.png',
						pageUrl: '/newScale/Family/index'
					}, {
						name: '你的婚姻质量有多高？',
						desc: '下面是对婚姻状况的描述，请根据您的实际情况选择相应的答案。',
						qltj: true,
						zybg: true,
						zkj: '￥19.9',
						yj: '￥29.9',
						imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item11.png',
						pageUrl: '/newScale/MarriageQuality/index'
					}
				],
				searchKey: '',
				searchList: [],
				os: ''
			}
		},
		onReady() {
			this.searchList = this.scaleList;
			this.os = uni.getSystemInfoSync().osName;
		},
		methods: {
			changeHandle(e) {
				let {
					index
				} = e.detail
				uni.navigateTo({
					url: this.menuList[index].pageUrl
				})
			},
			goDetail(item) {
				console.log(this.os);
				if (this.os == 'ios') {
					uni.showToast({
						title: 'iOS暂不支持购买'
					})
					return
				}
				uni.navigateTo({
					url: item.pageUrl
				})
			},
			searchHandle(e) {
				this.searchKey = e.detail.value;
				debounce(this.searchFnc, 500);
			},
			searchFnc() {
				debugger
				let temp = [];
				this.scaleList.forEach(item => {
					if (item.name.indexOf(this.searchKey) >= 0) {
						temp.push(item);
					}
				})
				this.searchList = temp;
			},
			getDesc(res) {
				return res.length > 45 ? `${res.slice(0, 45)}...` : res;
			}
		}
	}
</script>

<style scoped>
	.grid-item-box {
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		text-align: center;
	}

	.grid-item-box image {
		width: 340rpx;
	}

	.menu_icon {
		width: 66rpx;
		height: 66rpx;
	}

	.bg {
		box-sizing: border-box;
		width: 100%;
		padding-top: 40rpx;
		min-height: 100vh;
		background: #FFFFFF url(https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/index_bg.png) no-repeat;
		background-size: 100% auto;
		padding-bottom: 100rpx;
	}

	.search_bar {
		width: 703rpx;
		height: 63rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 31rpx;
		border: 1px solid #FFFFFF;
		margin: 0 auto 21rpx;
		position: relative;
	}

	.search_icon {
		width: 31rpx;
		position: absolute;
		left: 23rpx;
		top: 17rpx;
	}

	.search_bar input {
		width: 80%;
		height: 63rpx;
		margin-left: 80rpx;
	}

	.banner1 {
		width: 703rpx;
		margin: 0 auto;
		position: relative;
	}

	.banner1 image {
		width: 100%;
	}

	.banner1 text {
		position: absolute;
		bottom: 14rpx;
		left: 173rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: 600;
		font-size: 36rpx;
		font-style: italic;
		color: #FFAE00;
		letter-spacing: 4rpx;
	}

	.menu_bar {
		width: 702rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin: 0 auto;
	}

	.menu_item {
		flex: 1;
		text-align: center;
	}

	.menu_name {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #333333;
	}

	.list_title {
		margin: 31rpx 0 0 31rpx;
		display: flex;
		align-items: center;
	}

	.list_title text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		margin-left: 10rpx;
	}

	.list_title image {
		width: 31rpx;
	}

	.list_item {
		width: 702rpx;
		min-height: 226rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 14rpx;
	}

	.list_item_head {
		width: 200rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.list_item_head image {
		width: 100%;
	}

	.list_item_body {
		flex: 1;
		min-height: 226rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list_item_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #333333;
	}

	.list_item_flag image {
		width: 105rpx;
		margin-right: 8rpx;
	}

	.list_item_desc {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: 400;
		font-size: 18rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.list_item_operate {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn_test {
		width: 120rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #004AFF;
		border-radius: 22rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.item_price .zkj {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: 400;
		font-size: 32rpx;
		color: #FF6600;
		line-height: 57rpx;
	}

	.item_price .yj {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 57rpx;
		text-decoration-line: line-through;
		margin-left: 10rpx;
	}

	.banner1 text {}
</style>