240 lines
6.5 KiB
Vue
240 lines
6.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<!-- 顶部自定义导航 -->
|
|||
|
|
<tn-nav-bar fixed :bottomShadow="false" backTitle=" ">
|
|||
|
|
<view class="">
|
|||
|
|
<text class="tn-text-lg">题目搜索</text>
|
|||
|
|
<text class="tn-text-xl tn-padding-left-sm tn-icon-group-circle"></text>
|
|||
|
|
</view>
|
|||
|
|
</tn-nav-bar>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<view class="cu-bar search bg-white">
|
|||
|
|
<view class="search-form round">
|
|||
|
|
<text class="cuIcon-search"></text>
|
|||
|
|
<input v-model="keyword" @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> -->
|
|||
|
|
<mp-html :content="formatRichtext(item.material_parent.title)" style="font-size: 36rpx; font-weight: bold;"></mp-html>
|
|||
|
|
</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> -->
|
|||
|
|
<mp-html :content="formatRichtext(item.title)" style="font-size: 36rpx; font-weight: bold;"></mp-html>
|
|||
|
|
</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
|
|||
|
|
>
|
|||
|
|
<mp-html :content="option.key+':'+option.value"></mp-html>
|
|||
|
|
<!-- {{ option.key }}:<mp-html :content="option.value"></mp-html> -->
|
|||
|
|
<!-- {{ 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">
|
|||
|
|
<!-- <rich-text :nodes="formatRichtext(item.explain)" style="border-top: solid 1px #ccc;width: 100%;display: block;" v-if="item.explain"></rich-text> -->
|
|||
|
|
<mp-html :content="formatRichtext(item.explain)" style="border-top: solid 1px #ccc;width: 100%;display: block;" v-if="item.explain"></mp-html>
|
|||
|
|
</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
|
|||
|
|
this.search()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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>
|