toupiaoh5/addons/exam/uniapp/pages/search/index.vue

<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="inputSearch" @confirm="search()" :adjust-position="false" type="text"
					placeholder="请输入题目关键词进行搜索" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-primary shadow-blur round" @click="search()">搜索</button>
			</view>
		</view>

		<view class="question-list">
			<view class="question-card" v-for="(item, index) in list" :key="index">
				<tui-card :title="{text: item.cates.name, size: 30, color: '#7A7A7A'}"
					:tag="{text: item.kind_text, size: 24}" :header="item.title">
					<template v-slot:body>
						<view class="m-lr-20">
							<view class="m-t-20" v-if="item.is_material_child && item.material_question_id && item.material_parent">
								<text>材料题干：</text>
								<rich-text :nodes="formatRichtext(item.material_parent.title)" style="font-size: 36rpx; font-weight: bold;"></rich-text>
							</view>
							
							<view class="m-t-20">
								<text>{{item.kind_text}}：</text>
								<rich-text :nodes="formatRichtext(item.title)" style="font-size: 36rpx; font-weight: bold;"></rich-text>
							</view>
							<view class="options">
								<view v-if="item.kind == 'FILL'" v-html="getFillAnswer(item)"></view>
								
								<view v-for="(option, i) in item.options_json" 
									:key="i"
									:class="item.answer.indexOf(option.key) > -1 ? ['text-green'] : []"
									v-else
								>
									{{ option.key }}:{{ option.value }} 
									<block v-if="item.options_img && item.options_img[i]">
										<image :src="item.options_img[i].value" @click="previewOptionImage(item.options_img[i].value)" class="option-img"></image>
									</block>
									
								</view>
							</view>
						</view>
					</template>
					<template v-slot:footer>
						<text class="margin-left-sm">解析：</text>
						<view class="explain" v-if="item.explain" v-html="item.explain">
							<rich-text :nodes="formatRichtext(item.explain)" style="border-top: solid 1px #ccc;width: 100%;display: block;" v-if="item.explain"></rich-text>
						</view>
						<view class="explain" v-else>无</view>
					</template>
				</tui-card>

			</view>

			<!-- 加载状态条 -->
			<view class="cu-load bg-grey" :class="loadFlag" v-show="has_more || loadFlag == 'over'"></view>
		</view>

		<tui-loading v-if="showLoading"></tui-loading>
		<tui-no-data imgUrl="/static/img/img_noorder_3x.png" v-if="showNodata">暂无数据</tui-no-data>

		<!--流量主组件-->
		<!-- #ifdef MP-WEIXIN -->
		<view :class="showNodata ? ['margin-top-100'] : ['margin-top-10']" v-show="false">
			<kz-ad ref="adSearch" kind="BANNER" :config="ad" field="question_search_banner"></kz-ad>
			<kz-ad ref="adSearch" kind="VIDEO" :config="ad" field="question_search_video"></kz-ad>
			<kz-ad ref="adSearch" kind="VIDEO_PATCH" :config="ad" field="question_search_video_patch"></kz-ad>
		</view>
		<!-- #endif -->

		<login ref="login"></login>
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: false,
				showNodata: true,
				keyword: '',
				list: [],
				loadFlag: 'loading',
				current_page: 1,
				has_more: false,
				ad: {}
			}
		},
		computed: {
			// 显示填空题答案
			getFillAnswer(item) {
				return function(item) {
					let answer = ''
					if (item.answer && item.kind == 'FILL') {
						try {
							answer = '';
							for (let i = 0; i < item.answer.length; i++) {
								answer += '填空位' + (i + 1) + '：' + item.answer[i].answers.join('、') + '<br>';
							}
						} catch (e) {
							console.log('answer', answer, e);
							return value;
						}
					}
					return answer
				}
			},
		},
		onLoad(e) {
			this.ad = this.utils.getData('ad')
			console.log('ad data', this.ad)
			// 插屏广告
			if (this.ad.question_search_cp_open == 1) {
				this.adUtils.interstitial.load(this.ad.question_search_cp)
				this.adUtils.interstitial.show()
			}
			if (e.keyword) {
				this.keyword = e.keyword
			}
		},
		async onReachBottom() {
			console.log("onReachBottom")
			if (this.has_more) {
				this.current_page++
				this.search()
			}
		},
		methods: {
			search() {
				if (!this.keyword) {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
					return
				}

				this.loadFlag = 'loading'
				this.has_more = true
				this.http('question/search', {
					keyword: this.keyword,
					page: this.current_page
				}, 'post').then(res => {
					console.log('search res', res)
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					} else {
						this.list = res.data.list.data //this.list.concat(res.data.list.data)

						this.current_page = res.data.list.current_page
						this.has_more = res.data.list.has_more
						this.loadFlag = !this.has_more ? 'over' : ''
						this.showNodata = !this.list.length
					}
				})
			},
			inputSearch(e) {
				console.log('input e', e)
				this.keyword = e.detail.value
			},
			// 试题标题
			formatRichtext(text) {
				if (text) {
					return this.utils.formatRichText(text)
				}
				return '无'
			},
			// 选项图片yulan
			previewOptionImage(src) {
				if (!src) {
					return
				}
				
				uni.previewImage({
					current: 0,
					urls: [src]
				});
			}
			
		}
	}
</script>

<style>
	.question-list {
		padding-bottom: 20rpx;
	}

	.question-card {
		margin: 20rpx 0;
	}

	.options {
		margin: 20rpx 0;
		line-height: 50rpx;
	}

	.explain {
		margin: 20rpx 0;
		padding: 15rpx;
		padding-top: 0rpx;
	}

	.margin-top-10 {
		margin-top: 10px;
	}

	.margin-top-100 {
		margin-top: 100%;
	}
	
	.option-img {
		width: 100rpx;
		height: 100rpx;
	}
</style>