You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
641 lines
17 KiB
641 lines
17 KiB
<template>
|
|
<view class="more-search">
|
|
<view class="more-search-input">
|
|
<view class="flex al-item-center j-between">
|
|
<input type="text" @confirm="search" v-model="searchValue" :placeholder="placeholderTex" class="input" />
|
|
<view class="input-tex-btn text-center" :style="{'background-color': t('color1')}" @click="search">搜索</view>
|
|
</view>
|
|
<view class="shop-stor flex al-item-center j-evenly" v-show="opsType === 'goods'">
|
|
<text class="shop-tex" :class="shopSort == 1 ? 'shop-atv': ''" @tap="sortNav(1)">品牌店</text>
|
|
<text class="shop-tex" :class="shopSort == 2 ? 'shop-atv': ''" @tap="sortNav(2)">专营店</text>
|
|
</view>
|
|
</view>
|
|
<view :style="{'height': searchHeight + 'px'}"></view>
|
|
<view class="more-search-record" :style="{'top': searchHeight + 'px'}">
|
|
<!-- {{recordList}} -->
|
|
<view class="record-title font-w">
|
|
已添加的{{opsType == 'topic'? '话题':'商品'}}（{{recordList.length}}/5）
|
|
</view>
|
|
<view class="record-content">
|
|
<block v-for="(item, ixd) in recordList" :key="item.id">
|
|
<view class="more-search-record-t" >
|
|
<text class="txt">{{item.name}}</text>
|
|
<text class="record-icon iconfont icon-shanchu1" @click="delRecord(ixd, item.id)"></text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view :style="{'height': recordHeight + 'px'}"></view>
|
|
<view v-if="opsType == 'goods'" style="padding-top: 10rpx;">
|
|
<block v-for="(item,idx) in searchTopicList" :key="idx">
|
|
<view class="more-search-list" :class="item.checked == true ? 'more-search-list-show':''" @click="handleDetail(item.name, item.id, idx)" >
|
|
<view class="more-search-list-c">
|
|
<view class="more-search-list-c-t" v-if="item.business">
|
|
<image class="batle-img" :src="item.business.logo" mode=""></image>
|
|
<text>{{item.business.name}}</text>
|
|
</view>
|
|
<view class="more-search-list-c-c">
|
|
<image class="list-img" v-if="item.pic" :src="item.pic" mode=""></image>
|
|
<image class="list-img" v-else :src="item.cover_pic" mode=""></image>
|
|
<view class="more-search-list-c-c-r">
|
|
<text class="list-c-c-r-til">{{item.name}}</text>
|
|
<text class="list-c-c-r-price" v-if="item.sell_price">¥{{item.sell_price}}</text>
|
|
<text class="list-c-c-r-price" v-else>¥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view v-else style="padding-top: 10rpx;">
|
|
<block v-for="(item,idx) in searchTopicList" :key="idx">
|
|
<view class="more-search-list" :class="item.checked == true ? 'more-search-list-show':''" @click="handleDetail(item.topic_name, item.id, idx)">
|
|
<view class="more-search-list-c">
|
|
<!-- <view class="more-search-list-c-t">
|
|
<image class="batle-img" :src="item.business.logo" mode=""></image>
|
|
<text>{{item.topic_name}}</text>
|
|
</view> -->
|
|
<view class="more-search-list-c-c">
|
|
<!-- <image class="list-img" :src="item.pic" mode=""></image> -->
|
|
<view class="jin">
|
|
#
|
|
</view>
|
|
<view class="more-search-list-c-c-r">
|
|
<text class="list-c-c-r-til">{{item.topic_name}}</text>
|
|
<!-- <text class="list-c-c-r-price">¥{{item.sell_price}}</text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="show-t" v-show="showText_box">
|
|
<view class="">{{showText_t}}</view>
|
|
<view class="">{{showText_b}}</view>
|
|
</view>
|
|
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="!isData"></nomore>
|
|
<nodata v-if="!nodata"></nodata>
|
|
<view style="height: 204rpx;"></view>
|
|
<view class="flex_box">
|
|
<button type="default" :style="{'background-color': t('color1')}" @click="submit">确认</button>
|
|
</view>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
searchValue: '',
|
|
// uni.getStorageSync('goods_type_arr')||
|
|
recordList:[],
|
|
searchBoxList: [],
|
|
searchTopicList: [],
|
|
placeholderTex: '请输入搜索内容',
|
|
opsType: '',
|
|
pages: 1,
|
|
isData: true,
|
|
searchHeight: 0, // 搜索高度
|
|
recordHeight: 0, // 记录高度
|
|
nodata: true,
|
|
showText_box: false,
|
|
showText_t: '',
|
|
showText_b: '',
|
|
shopSort: 1,
|
|
|
|
timeou: null,
|
|
timeouTow: null,
|
|
arrRecordList: [],
|
|
isSearch: false
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
this.opsType = options.type
|
|
if(options.records && this.opsType == 'goods') {
|
|
this.recordList = JSON.parse(options.records)
|
|
}
|
|
if(uni.getStorageSync('is_more_record_goods') && this.opsType == 'goods') {
|
|
this.recordList = uni.getStorageSync('is_more_record_goods')
|
|
}else if(uni.getStorageSync('is_more_record_topic') && this.opsType == 'topic') {
|
|
this.recordList = uni.getStorageSync('is_more_record_topic')
|
|
}
|
|
if(this.opsType == 'topic') {
|
|
|
|
this.arrRecordList = JSON.parse(options.topicArr)
|
|
|
|
}else {
|
|
this.arrRecordList = JSON.parse(options.goodsArr)
|
|
}
|
|
this.getSearchTopicList()
|
|
|
|
|
|
},
|
|
|
|
onUnload() {
|
|
clearTimeout(this.timeou)
|
|
clearTimeout(this.timeouTow)
|
|
},
|
|
onReady() {
|
|
let quert = uni.createSelectorQuery()
|
|
quert.select('.more-search-input').boundingClientRect()
|
|
quert.select('.more-search-record').boundingClientRect()
|
|
quert.exec(res =>{
|
|
let boheight = null
|
|
res.forEach((item,idx) => {
|
|
if(idx == 0) {
|
|
this.searchHeight = item.height
|
|
}else if(idx == 1) {
|
|
this.recordHeight = item.height
|
|
}
|
|
boheight += item.height
|
|
})
|
|
})
|
|
},
|
|
// 到底触发
|
|
onReachBottom(e) {
|
|
// console.log(e, '----')
|
|
if (this.isData) {
|
|
this.pages++
|
|
this.getSearchTopicList()
|
|
}
|
|
},
|
|
methods: {
|
|
// 商品时选择的---店铺
|
|
sortNav(num) {
|
|
|
|
this.shopSort = num
|
|
this.isSearch = false
|
|
this.isData = true
|
|
this.nodata = true
|
|
this.pages = 1
|
|
this.searchBoxList = []
|
|
// this.recordList = []
|
|
this.searchTopicList = []
|
|
this.getSearchTopicList()
|
|
},
|
|
recordStyle() {
|
|
if(this.timeou) {
|
|
clearTimeout(this.timeou)
|
|
}
|
|
let quert = uni.createSelectorQuery()
|
|
this.timeou = setTimeout(() => {
|
|
quert.select('.more-search-record').boundingClientRect()
|
|
quert.exec(res =>{
|
|
this.recordHeight = res[0].height
|
|
})
|
|
}, 100)
|
|
|
|
},
|
|
submit(){
|
|
uni.setStorageSync('is_more_show_'+this.opsType,true)
|
|
if(this.opsType == 'goods') {
|
|
uni.setStorageSync('is_more_record_goods',this.recordList)
|
|
}else {
|
|
uni.setStorageSync('is_more_record_topic',this.recordList)
|
|
}
|
|
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
// 搜索
|
|
search() {
|
|
if(this.recordList.length > 0) {
|
|
this.arrRecordList = this.recordList
|
|
}
|
|
this.isSearch = true
|
|
this.nodata = true
|
|
this.isData = true
|
|
this.pages = 1
|
|
this.searchBoxList = []
|
|
this.searchTopicList = []
|
|
this.getSearchTopicList()
|
|
|
|
},
|
|
delRecord(idx, ndx) {
|
|
|
|
this.searchTopicList.forEach((item, idx) => {
|
|
if(ndx == item.id) {
|
|
item.checked = false
|
|
}
|
|
})
|
|
this.recordList.splice(idx, 1)
|
|
let idarr = []
|
|
this.recordList.forEach(item => {
|
|
idarr.push(item.id)
|
|
})
|
|
if(this.opsType == 'topic') {
|
|
uni.setStorageSync('topic_type_id', idarr)
|
|
}else {
|
|
uni.setStorageSync('goods_type_id', idarr)
|
|
|
|
}
|
|
this.recordStyle()
|
|
},
|
|
handleDetail(name, id, idx) {
|
|
|
|
if(this.showText_box == true) {
|
|
return
|
|
}
|
|
this.searchTopicList[idx].checked = !this.searchTopicList[idx].checked
|
|
let indarr = []
|
|
this.recordList.forEach(item => {
|
|
indarr.push(item.id)
|
|
})
|
|
let timeout
|
|
if (timeout) {
|
|
clearTimeout(timeout)
|
|
}
|
|
if(this.recordList.length == 5 && this.searchTopicList[idx].checked) {
|
|
this.showText_box = true
|
|
if (this.opsType == 'topic') {
|
|
// app.error('最多添加5个话题标签,可删除已选标签，再次添加')
|
|
this.showText_t = '最多添加5个话题标签'
|
|
this.showText_b = '可删除已选标签，再次添加'
|
|
timeout = setTimeout(() => {
|
|
this.showText_box = false
|
|
}, 1500)
|
|
}else {
|
|
this.showText_t = '最多添加5个商品'
|
|
this.showText_b = '可删除已选商品，再次添加'
|
|
timeout = setTimeout(() => {
|
|
this.showText_box = false
|
|
}, 1500)
|
|
// app.error('最多添加5个商品,可删除已选商品，再次添加')
|
|
}
|
|
if(indarr.includes(id)) {
|
|
|
|
}else {
|
|
this.searchTopicList[idx].checked = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.searchTopicList[idx].checked) {
|
|
if(this.recordList.length >= 0 && this.recordList.length<= 4) {
|
|
if(this.recordList.every((item,index)=>{return item.id !== id})){
|
|
this.recordList.unshift({name: name, id: id, sign: this.shopSort == 1 ? 0 : 1})
|
|
}
|
|
}
|
|
}else {
|
|
if (this.recordList.length > 0 ) {
|
|
this.recordList.forEach((data, nx) => {
|
|
if(id == data.id) {
|
|
this.recordList.splice(nx, 1)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
let idarr = []
|
|
this.recordList.forEach(item => {
|
|
if(this.opsType == 'topic') {
|
|
idarr.push(item.id)
|
|
}else {
|
|
idarr.push(item.sign + '_' + item.id)
|
|
}
|
|
|
|
})
|
|
|
|
idarr = [... new Set(idarr)]
|
|
|
|
if(this.opsType == 'topic') {
|
|
uni.setStorageSync('topic_type_id', idarr)
|
|
}else {
|
|
uni.setStorageSync('goods_type_id', idarr)
|
|
}
|
|
|
|
this.recordStyle()
|
|
},
|
|
|
|
// 话题-带货- 搜索
|
|
getSearchTopicList() {
|
|
if(this.recordList.length) {
|
|
this.arrRecordList = this.recordList
|
|
}
|
|
this.loading = true
|
|
let url = this.shopSort == 1 ? 'ApiShop/getGoodsList' : 'ApiShop/getSaasGoodsList'
|
|
if(this.opsType == 'topic'){
|
|
url = 'ApiZhiwei/topicReleaseList'
|
|
}
|
|
|
|
app.post(url, {pagenum: this.pages,keyword:this.searchValue,topic_name:this.searchValue}, (res) => {
|
|
this.loading = false
|
|
if(res.data.length > 0) {
|
|
this.searchTopicList = [...this.searchTopicList,...res.data]
|
|
}else if(res.data.length == 0 && this.searchTopicList.length > 0) {
|
|
this.isData =false
|
|
}else if(res.data.length == 0 && this.searchTopicList.length == 0) {
|
|
this.nodata = false
|
|
}
|
|
this.searchTopicList.forEach((item,idx) => {
|
|
item.checked = false
|
|
})
|
|
if(this.recordList.length > 0 && this.arrRecordList.length == 0 ) {
|
|
for(let i =0; i < this.recordList.length; i++) {
|
|
const index = this.searchTopicList.findIndex((item) => {return item.id === this.recordList[i].id})
|
|
this.searchTopicList.forEach((data,idx) => {
|
|
if(idx == index) {
|
|
data.checked = true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
if(this.arrRecordList.length > 0) {
|
|
if(this.recordList.length == 0) {
|
|
for(let i =0; i < this.arrRecordList.length; i++) {
|
|
const index = this.searchTopicList.findIndex((item) => {return this.opsType == 'topic' ? item.id === this.arrRecordList[i] : (this.shopSort == 1 ? '0_'+item.id : '1_'+item.id) === this.arrRecordList[i]})
|
|
this.searchTopicList.forEach((data,idx) => {
|
|
if(idx == index) {
|
|
data.checked = true
|
|
if(!this.isSearch && this.opsType == 'topic') {
|
|
this.recordList.unshift({name: this.opsType == 'topic'? data.topic_name : data.name, id: data.id})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}else {
|
|
if(this.opsType == 'topic') {
|
|
for(let i =0; i < this.arrRecordList.length; i++) {
|
|
const index = this.searchTopicList.findIndex((item) => {return item.id === this.arrRecordList[i].id })
|
|
this.searchTopicList.forEach((data,idx) => {
|
|
if(idx == index) {
|
|
data.checked = true
|
|
}
|
|
})
|
|
}
|
|
}else {
|
|
for(let i =0; i < this.arrRecordList.length; i++) {
|
|
const index = this.searchTopicList.findIndex((item) => {return (this.shopSort == 1 ? '0_'+item.id : '1_'+item.id) === ( this.recordList.length > 0 ? this.arrRecordList[i].sign + '_' + this.arrRecordList[i].id : this.arrRecordList[i] ) })
|
|
this.searchTopicList.forEach((data,idx) => {
|
|
if(idx == index) {
|
|
data.checked = true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
})
|
|
if(this.timeouTow) {
|
|
clearTimeout(this.timeouTow)
|
|
}
|
|
// this.timeouTow = setTimeout(() =>{
|
|
// this.recordStyle()
|
|
// }, 200)
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flex_box{
|
|
width: 100%;
|
|
height: 204rpx;
|
|
padding: 0 20rpx;
|
|
position: fixed;
|
|
// right: 20rpx;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
background-color: #FFF;
|
|
// border-radius: 40rpx 40rpx 0 0 ;
|
|
|
|
button{
|
|
margin-top: 30rpx;
|
|
background-color: #d6a662;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
// margin-right: 20rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
.jin{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #efbd6f;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
.more-search {
|
|
.more-search-input {
|
|
width: 100%;
|
|
padding: 20rpx 40rpx;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
background-color: #FFF;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 12;
|
|
|
|
.input {
|
|
font-size: 30rpx;
|
|
}
|
|
.input-tex-btn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
// padding: 10rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
color: #fff;
|
|
|
|
}
|
|
.shop-stor{
|
|
margin-top: 10rpx;
|
|
border-top: 2rpx solid #cccc;
|
|
padding-top: 10rpx;
|
|
}
|
|
.shop-tex {
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
background-color: #969696;
|
|
color: #fff;
|
|
|
|
}
|
|
.shop-atv {
|
|
background-color: #CE0000;
|
|
}
|
|
// .shop-atv::after {
|
|
// content: '';
|
|
// width: 100%;
|
|
// height: 4rpx;
|
|
// position: absolute;
|
|
// left: 0;
|
|
// top: 48rpx;
|
|
// border-radius: 90rpx;
|
|
// background-color: #CE0000;
|
|
// }
|
|
}
|
|
.more-search-record {
|
|
width: 100%;
|
|
padding: 30rpx 0rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction:column;
|
|
background-color: #f6f6f6;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 22;
|
|
|
|
.record-title {
|
|
padding: 0 20rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
.record-content {
|
|
|
|
flex-wrap: nowrap;
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
scrollbar-width: none; /* firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
}
|
|
.record-content::-webkit-scrollbar {
|
|
display: none; /* Chrome Safari */
|
|
}
|
|
.more-search-record-t {
|
|
width: 220rpx;
|
|
height: 60rpx;
|
|
margin: 30rpx 0 0 20rpx;
|
|
padding: 6rpx 24rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
background-color: #f1c98b;
|
|
// width:;
|
|
.txt{
|
|
text-align: center;
|
|
flex: 1;
|
|
// max-width: 600rpx;
|
|
overflow: hidden; /*超出长度的文字隐藏*/
|
|
text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
|
|
white-space: nowrap; /*强制不换行*/
|
|
}
|
|
.record-icon {
|
|
padding-left: 12rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-search-list-show {
|
|
box-shadow: 0 0 10px 0 #efbd6f4d;
|
|
}
|
|
.more-search-list {
|
|
margin: 0 20rpx 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
.more-search-list-c {
|
|
padding: 0 20rpx;
|
|
|
|
.more-search-list-c-t {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
.batle-img {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.more-search-list-c-c {
|
|
padding: 30rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.list-img {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.more-search-list-c-c-r {
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-c-c-r-til {
|
|
line-height: 40rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-c-c-r-price {
|
|
padding-top: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topic-search-list-b {
|
|
margin: 0 20rpx 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
.topic-search-list {
|
|
padding:20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.topic-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.topic-search-list-c {
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.show-t {
|
|
min-width: 400rpx;
|
|
padding: 30rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fff;
|
|
// text-align: center;
|
|
line-height: 50rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 40%;
|
|
z-index: 33;
|
|
transform: translate(-50%, -50%);
|
|
background-color: #595959cc;
|
|
}
|
|
</style>
|
|
|