Skip to content

S
study
Commit 75c7ab62 authored by Damon's avatar Damon
Browse files
Options

feat(search): 搜索结果页

parent bbb295be
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 7 deletions
src/components/answer-sheet/index.vue
View file @ 75c7ab62
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
></view> ></view>
<view class="text">{{ item.text }}</view> <view class="text">{{ item.text }}</view>
</view> </view>
<view class="btn" v-if="rightKey.length > 1"> <view class="btn" v-if="rightKey.length > 1 && btnStatus">
<view <view
:class="['confirm', { active: getCheckedNum }]" :class="['confirm', { active: getCheckedNum }]"
@click="confirmMultiple" @click="confirmMultiple"
...@@ -59,6 +59,10 @@ export default { ...@@ -59,6 +59,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
btnStatus: {
type: Boolean,
default: true,
}
}, },
data() { data() {
return { return {
......
src/pages/search/detail.vue
View file @ 75c7ab62
<template> <template>
<view class="search"> <view class="search">
<u-navbar
back-icon-color="#333333"
background="transparent"
title=" "
titleColor="#191C27"
:border-bottom="false"
title-bold
></u-navbar>
<view class="search-bar">
<u-search
:clearabled="true"
:action-style="searchStyle"
bg-color="#fff"
v-model="keyword"
:show-action="false"
@custom="search"
@search="search"
></u-search>
<view class="title"
>共找到含有<text>“{{ keyword }}”</text>相关试题<text>10</text>道</view
>
<view class="result">
<u-collapse :item-style="itemStyle" event-type="close">
<u-collapse-item
:ref="`collapse${index}`"
:index="index"
@change="itemChange"
v-for="(item, index) in lists"
:key="index"
>
<view slot="title-all" class="u-flex head">
<view class="titles">
<text>{{ titleType[item.type - 1] }}</text
>{{ item.title }}
</view>
<view class="u-flex arrow" v-show="index !== arrIndex">
<text>展开</text>
<u-icon name="arrow-down" color="#9EA5BB"></u-icon>
</view>
</view>
<view class="u-flex subject">
<view class="content">
<answer-sheet
ref="answerSheet"
:answerList="item.answerList"
:rightKey="item.rightKey"
:multiple="item.type === 3"
:submitStatus="item.submitStatus"
:btnStatus="false"
@change="answerChange"
></answer-sheet>
</view>
<view class="explain">
<answer-explanation
:answer="item.answer"
:explain="item.explain"
></answer-explanation>
</view>
</view>
<view class="u-flex opera">
<view class="opera-list" @click="collection(item)">
<u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text>
</view>
<view class="opera-list" @click="arrowUp(index)">
<text>收起</text>
<u-icon name="arrow-up" color="#9EA5BB"></u-icon>
</view>
</view>
</u-collapse-item>
</u-collapse>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import answerSheet from '@/components/answer-sheet/index.vue'
import answerExplanation from '@/components/answer-explanation/index.vue'
export default { export default {
components: {
answerSheet,
answerExplanation,
},
data() { data() {
return { return {
keyword: '' itemStyle: {
background: '#fff',
padding: '0rpx 20rpx',
margin: '20rpx 0',
},
titleType: ['单选题', '判断题', '多选题'],
keyword: '',
lists: [
{
type: 1,
title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
answerList: [
{
sort: 'A',
text: '正确',
checked: true,
confirm: true,
},
{
sort: 'B',
text: '错误',
},
],
answer: 'A',
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 0,
rightKey: ['A'],
submitStatus: true,
},
{
type: 2,
title:
'空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
answerList: [
{
sort: 'A',
text: '正确',
},
{
sort: 'B',
text: '错误',
checked: true,
confirm: true,
},
],
answer: 'B',
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 1,
rightKey: ['B'],
submitStatus: true,
},
{
type: 3,
title: '西林电桥采用正接线及反接线时,其测试原理相同',
answerList: [
{
sort: 'A',
text: '影响',
},
{
sort: 'B',
text: '影响很小',
checked: true,
confirm: true,
},
{
sort: 'C',
text: '影响很大',
checked: true,
confirm: true,
},
{
sort: 'D',
text: '无影响',
},
],
answer: 'B，C',
explain:
'双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
index: 2,
rightKey: ['B', 'C'],
submitStatus: true,
},
{
type: 2,
title: '测试标题测试标题测试标题测试标题',
answerList: [
{
sort: 'A',
text: '是',
},
{
sort: 'B',
text: '否',
checked: true,
confirm: true,
},
],
answer: 'B',
explain: '测试内容测试内容测试内容测试内容测试内容测试内容',
index: 3,
rightKey: ['B'],
submitStatus: true,
},
],
arrIndex: null,
} }
}, },
computed: { onLoad(e) {
this.keyword = e ? decodeURIComponent(e.keyword) : ''
}, },
computed: {},
methods: { methods: {
itemChange(e) {
this.arrIndex = e.show ? e.index : null
},
search(val) {
this.keyword = val
let history = this.searchHistory
history.unshift(val)
if (history.length > 9) {
history.splice(9, 1)
}
this.$u.vuex('searchHistory', history)
},
collection(item) {
console.log("item", item)
},
arrowUp(index) {
this.$refs[`collapse${index}`][0].headClick()
}
}, },
} }
</script> </script>
...@@ -28,5 +235,82 @@ export default { ...@@ -28,5 +235,82 @@ export default {
background-size: 100% 520rpx; background-size: 100% 520rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0 20rpx; padding: 0 20rpx;
.title {
color: #191c27;
font-size: 32rpx;
font-weight: bold;
margin-top: 30rpx;
text {
color: #2953ff;
}
}
.result {
.head {
width: 100%;
height: 60rpx;
overflow: hidden;
.titles {
color: #191c27;
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
height: 60rpx;
overflow: hidden;
flex: 1;
text {
background: #9ea5bb;
color: #fff;
padding: 8rpx 20rpx;
margin-right: 10rpx;
font-size: 20rpx;
border-radius: 50rpx;
}
}
.arrow {
padding-left: 20rpx;
text {
color: #2953ff;
font-size: 28rpx;
padding-right: 10rpx;
}
}
}
.subject {
flex-flow: column;
.type {
width: 100%;
text-align: left;
padding: 20rpx 0;
}
.content {
width: 100%;
}
.explain,
.btn {
width: 100%;
padding-top: 50rpx;
}
}
.opera {
padding: 20rpx 0;
justify-content: space-between;
color: #5a6073;
font-size: 28rpx;
.opera-list {
display: flex;
&:nth-of-type(1) {
text {
padding-left: 10rpx;
}
}
&:nth-of-type(2) {
text {
padding-right: 10rpx;
color: #2953ff;
}
}
}
}
}
} }
</style> </style>
src/pages/search/index.vue
View file @ 75c7ab62
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<u-navbar <u-navbar
back-icon-color="#333333" back-icon-color="#333333"
background="transparent" background="transparent"
title="搜索" title=" "
titleColor="#191C27" titleColor="#191C27"
:border-bottom="false" :border-bottom="false"
title-bold title-bold
...@@ -63,7 +63,10 @@ export default { ...@@ -63,7 +63,10 @@ export default {
methods: { methods: {
search(val) { search(val) {
this.keyword = val this.keyword = val
this.history.push(val) this.history.unshift(val)
if(this.history.length > 9){
this.history.splice(9, 1)
}
this.$u.vuex('searchHistory', this.history) this.$u.vuex('searchHistory', this.history)
this.toSearchDetail(val) this.toSearchDetail(val)
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment