<template>
|
<view class="search" v-if="show" @click="close">
|
<view class="search_box" @click.stop="test">
|
<view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-if="status === 0">
|
<view class="icon">
|
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="search_box_item_right">
|
<text v-if="name1">{{name1}}</text>
|
<input type="text" class="search_box_item_right_ipt" :focus="focus" v-model="category" @input="inputCategory(name1 ? 2 : 1)" placeholder-class="placeholder" placeholder="搜索" />
|
</view>
|
</view>
|
<view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-else>
|
<view class="icon">
|
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="search_box_item_right">
|
<text>{{categoryName}}</text>
|
<input type="text" focus v-model="category" @input="inputCategory(name1 ? 2 : 1)" placeholder-class="placeholder" placeholder="搜索" />
|
</view>
|
</view>
|
<view class="search_box_item_xl" v-if="searchData && searchData.length > 0">
|
<view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
|
<view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb">
|
|
<span :style="{color: fontColorIndex === i ? fontColor : ''}">{{item.name}}</span>
|
</view>
|
<span v-if="item.price">￥{{ item.price }}</span>
|
</view>
|
</view>
|
|
<!-- <view class="search_box_item" v-if="status == 0">
|
<view class="icon">
|
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
|
</view>
|
<input type="text" :focus="status === 0" v-model="category" @input="inputCategory" placeholder-class="placeholder" placeholder="搜索" />
|
</view>
|
<view class="search_box_item">
|
<view class="icon">
|
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
|
</view>
|
<input type="text" :focus="status !== 0" v-model="name" @input="inputName" placeholder-class="placeholder" placeholder="搜索" />
|
</view>
|
<view class="search_box_item_xl" v-if="searchData && searchData.length > 0">
|
<view class="search_box_item_xl_item" v-for="(item, index) in searchData" :key="index">
|
<view class="search_box_item_xl_item_name" @click="clickItem(item, index)">{{ item.name }}</view><span v-if="item.price">￥{{ item.price }}</span>
|
</view>
|
</view> -->
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { listForH5 } from '@/apis/index.js'
|
export default {
|
data() {
|
return {
|
category: '',
|
categoryId: '',
|
name: '',
|
show: false,
|
type: '',
|
typeName: '', // left right
|
searchData: [],
|
name1: '',
|
name2: '',
|
|
index: 0,
|
focus: true,
|
fontColorIndex: ''
|
}
|
},
|
props: {
|
categoryList: {
|
type: Array,
|
default: []
|
},
|
shopList: {
|
type: Array,
|
default: []
|
},
|
status: {
|
type: Number
|
},
|
search: {
|
type: Object | null
|
},
|
categoryName: {
|
type: Number | String
|
},
|
categoryid: {
|
type: Number | String
|
},
|
|
fontColor:{
|
type: Number | String
|
}
|
},
|
watch: {
|
show: {
|
handler(news, old) {
|
if (news) {
|
this.category = ''
|
this.name = ''
|
this.searchData = []
|
this.name1 = ''
|
this.name2 = ''
|
}
|
}
|
}
|
},
|
methods: {
|
aaa(index) {
|
this.fontColorIndex = index
|
},
|
bbb() {
|
this.fontColorIndex = ''
|
},
|
percentage(bgColor, alpha) {
|
let res = +(alpha * 2.55).toFixed(0)
|
return bgColor + res.toString(16)
|
},
|
confirm() {
|
if (this.type === 2) {
|
console.log('type')
|
this.name = this.searchData[this.index].name
|
this.$emit('result', this.searchData[this.index])
|
this.show = false
|
this.index = 0
|
return
|
} else if (this.categoryName) {
|
console.log('categoryName')
|
this.name = this.searchData[this.index].name
|
this.$emit('result', this.searchData[this.index])
|
this.show = false
|
this.index = 0
|
return
|
} else {
|
this.focus = false
|
console.log('else')
|
this.name1 = this.searchData[this.index].name
|
this.category = ''
|
this.categoryId = this.searchData[this.index].id
|
this.searchData = [];
|
this.$nextTick(() => {
|
setTimeout(() =>{
|
this.focus = true
|
}, 500)
|
})
|
this.index = 0
|
}
|
},
|
changeTop() {
|
if (this.index === 0) return
|
this.index -= 1
|
},
|
changeBottom() {
|
if (this.searchData.length - 1 === this.index) return
|
this.index += 1
|
},
|
getShop(keyword) {
|
listForH5({
|
categoryId: this.categoryid || this.categoryId,
|
keyword
|
}).then(res => {
|
this.searchData = res.data
|
})
|
},
|
inputName() {
|
if (this.status === 1 || this.status === 2) {
|
this.category = this.categoryName
|
}
|
if (!this.category && this.name) {
|
this.type = 1
|
let arr = this.shopList.map(item => {
|
if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
|
return item
|
}
|
})
|
arr = arr.filter(Boolean);
|
return arr;
|
} else if (this.category && this.name) {
|
this.type = 2
|
let arr = this.shopList.map(item => {
|
if (item.categoryName == this.category) {
|
return item
|
}
|
})
|
arr = arr.filter(Boolean);
|
let arrOne = arr.map(item => {
|
if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
|
return item
|
}
|
})
|
arrOne = arrOne.filter(Boolean);
|
this.searchData = arrOne;
|
} else {
|
this.searchData = [];
|
}
|
},
|
inputCategory(type) {
|
// this.name = ''
|
// this.type = 1
|
if (this.status === 0) {
|
this.type = type
|
// 品类搜索
|
if (type === 1) {
|
if (!this.category) {
|
this.searchData = []
|
return
|
}
|
let arr = this.categoryList.map(item => {
|
if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
|
return item
|
}
|
})
|
arr = arr.filter(Boolean);
|
this.searchData = arr;
|
} else if (type === 2) {
|
if (!this.category) {
|
this.searchData = []
|
return
|
}
|
this.getShop(this.category)
|
// let arr = this.shopList.map(item => {
|
// if (item.categoryName == this.name1) {
|
// return item
|
// }
|
// })
|
// arr = arr.filter(Boolean);
|
// let arrOne = arr.map(item => {
|
// if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
|
// return item
|
// }
|
// })
|
// arrOne = arrOne.filter(Boolean);
|
// this.searchData = arrOne;
|
} else {
|
this.searchData = []
|
}
|
} else {
|
if (!this.category) {
|
this.searchData = []
|
return
|
}
|
|
this.getShop(this.category)
|
|
// let arr = this.shopList.map(item => {
|
// if (item.categoryName == this.categoryName) {
|
// return item
|
// }
|
// })
|
// arr = arr.filter(Boolean);
|
// let arrOne = arr.map(item => {
|
// if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
|
// return item
|
// }
|
// })
|
// arrOne = arrOne.filter(Boolean);
|
// this.searchData = arrOne;
|
}
|
|
|
// if (this.category && !this.name) {
|
// let arr = this.categoryList.map(item => {
|
// if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
|
// return item
|
// }
|
// })
|
// arr = arr.filter(Boolean);
|
// this.searchData = arr;
|
// } else {
|
// this.searchData = [];
|
// }
|
// console.log(this.searchData)
|
},
|
clickItem(item, index) {
|
if (this.type === 2) {
|
console.log('type')
|
this.name = item.name
|
this.$emit('result', item)
|
this.show = false
|
this.index = 0
|
return
|
} else if (this.categoryName) {
|
console.log('categoryName')
|
this.name = item.name
|
this.$emit('result', item)
|
this.show = false
|
this.index = 0
|
return
|
} else {
|
console.log('else')
|
this.focus = false
|
this.name1 = item.name
|
this.category = ''
|
this.categoryId = item.id
|
// this.category = item.name
|
this.searchData = [];
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.focus = true
|
}, 800)
|
})
|
this.index = 0
|
}
|
},
|
open(type) {
|
this.typeName = type
|
this.show = true
|
},
|
close() {
|
this.show = false
|
},
|
test() {
|
return false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search {
|
position: fixed;
|
z-index: 4;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.search_box {
|
width: 660px;
|
height: auto;
|
display: flex;
|
flex-direction: column;
|
.search_box_item_xl::-webkit-scrollbar {
|
width: 6px;
|
background: rgba(255,255,255,0.5);
|
border-radius: 4px;
|
}
|
.search_box_item_xl::-webkit-scrollbar-thumb {
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
background: rgba(255,255,255,0.8);
|
}
|
.search_box_item_xl {
|
width: 100%;
|
max-height: 60px;
|
min-height: 240px;
|
overflow-y: scroll;
|
background: rgba(5,35,102,0.7);
|
border-radius: 8px;
|
// display: flex;
|
// flex-direction: column;
|
.search_box_item_xl_item {
|
width: 100%;
|
height: 40px;
|
// line-height: 52px;
|
// font-size: 28px;
|
// font-family: PingFangSC-Regular, PingFang SC;
|
// font-weight: 400;
|
// color: #FFFFFF;
|
padding: 0 24px;
|
cursor: pointer;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
// &:hover {
|
// span {
|
// color: #FFF200;
|
// }
|
// }
|
.active {
|
color: #FFF200 !important;
|
}
|
.search_box_item_xl_item_name {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
// &:hover {
|
// color: #FFF200;
|
// }
|
}
|
span {
|
flex-shrink: 0;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-left: 10px;
|
}
|
}
|
}
|
.search_box_item {
|
width: 100%;
|
height: 72px;
|
background: rgba(5,35,102,0.7);
|
border-radius: 32px;
|
display: flex;
|
align-items: center;
|
padding: 0 30px;
|
box-sizing: border-box;
|
margin-bottom: 16px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.search_box_item_right {
|
display: flex;
|
align-items: center;
|
text {
|
flex-shrink: 0;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-right: 10px;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.icon {
|
width: 20px;
|
height: 20px;
|
flex-shrink: 0;
|
margin-right: 18px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.placeholder {
|
height: 62px;
|
line-height: 62px;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: rgba(255,255,255,0.5);
|
}
|
}
|
}
|
}
|
</style>
|
