修改搜索逻辑处理
于肖磊
parent
daf9f03186
commit
17bd2b7e77
8
App.vue
8
App.vue
|
|
@ -7,12 +7,12 @@
|
|||
data: {
|
||||
// 基础配置
|
||||
// 数据接口请求地址
|
||||
// request_url: 'http://shopxo.com/',
|
||||
request_url:'https://new.shopxo.vip/',
|
||||
request_url: 'http://shopxo.com/',
|
||||
// request_url:'https://new.shopxo.vip/',
|
||||
|
||||
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
|
||||
// static_url: 'http://shopxo.com/',
|
||||
static_url:'https://new.shopxo.vip/',
|
||||
static_url: 'http://shopxo.com/',
|
||||
// static_url:'https://new.shopxo.vip/',
|
||||
|
||||
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
|
||||
system_type: 'default',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event">
|
||||
<!-- 头部小程序兼容 -->
|
||||
<view class="pr header">
|
||||
<componentDiyHeader :propkey="header_data.id" :propValue="header_data.com_data" :propScrollTop="scroll_top" @immersion-model-call-back="immersion_model_call_back" @search_tap="search_tap"></componentDiyHeader>
|
||||
<componentDiyHeader :propkey="header_data.id" :propValue="header_data.com_data" :propScrollTop="scroll_top" @immersion-model-call-back="immersion_model_call_back"></componentDiyHeader>
|
||||
</view>
|
||||
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
|
||||
<view v-for="item in tabs_data" :key="item.key">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:1;')">
|
||||
<!-- 基础组件 -->
|
||||
<template v-if="item.is_enable == '1'">
|
||||
<componentDiySearch v-if="item.key == 'search'" :propkey="item.id" :propValue="item.com_data" @search_tap="search_tap"></componentDiySearch>
|
||||
<componentDiySearch v-if="item.key == 'search'" :propkey="item.id" :propValue="item.com_data"></componentDiySearch>
|
||||
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propkey="item.id" :propValue="item.com_data" @video_play="video_play"></componentDiyCarousel>
|
||||
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propkey="item.id" :propValue="item.com_data"></componentDiyNavGroup>
|
||||
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propkey="item.id" :propValue="item.com_data"></componentDiyUserInfo>
|
||||
|
|
@ -73,22 +73,6 @@
|
|||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<view class="search-popup">
|
||||
<!-- 搜索 -->
|
||||
<uni-popup ref="searchPopup" type="center" border-radius="50rpx" :mask-click="false">
|
||||
<view class="flex-col align-c jc-c gap-10 ht-auto" :style="{'width': search_width }">
|
||||
<view class="bg-white padding-xxxxl wh-auto flex-col gap-10" style="box-sizing: border-box;border-radius: 20rpx;">
|
||||
<componentSearch :propFocus="is_focus" propClass="br" propSize="md" propPadding="18rpx 20rpx 0px" :propPlaceholder="search_form.tips" :propIsBtn="true" :propIsOnEvent="true" :propIsIconOnEvent="true" @onicon="onicon" @onsearch="onsearch"></componentSearch>
|
||||
<view v-if="hot_word_list.length > 0">
|
||||
<view class="search-hot flex-row align-c gap-10 bg-white flex-wrap box-shadow-md">
|
||||
<view v-for="(item, index) in hot_word_list" :key="index" class="text-size-md" :style="{ color: !isEmpty(search_hot_words_color) ? search_hot_words_color : item.color }" :data-value="item.value" @tap.stop="serch_url_event">{{ item.value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" propContainerDisplay="flex" @tap="search_close"></iconfont>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前diy页面底部菜单（非公共底部菜单） -->
|
||||
|
|
@ -260,11 +244,6 @@
|
|||
video_src: '',
|
||||
popup_width: '0rpx',
|
||||
popup_height: '0rpx',
|
||||
search_form: {},
|
||||
hot_word_list: [],
|
||||
search_hot_words_color: '',
|
||||
search_width: sys_width * 0.9 + 'px',
|
||||
is_focus: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -549,32 +528,6 @@
|
|||
});
|
||||
this.$refs.searchPopup.open();
|
||||
},
|
||||
search_close() {
|
||||
this.setData({
|
||||
is_focus: false
|
||||
});
|
||||
this.$refs.searchPopup.close();
|
||||
},
|
||||
onsearch(val) {
|
||||
this.serch_url_open(val);
|
||||
},
|
||||
onicon() {
|
||||
if (!isEmpty(this.search_form.icon_link)) {
|
||||
this.search_close();
|
||||
app.globalData.url_open(this.search_form.icon_link.page);
|
||||
}
|
||||
},
|
||||
serch_url_event(e) {
|
||||
this.serch_url_open(e.currentTarget.dataset.value);
|
||||
},
|
||||
serch_url_open(url) {
|
||||
if (!isEmpty(e.currentTarget.dataset.value)) {
|
||||
this.search_close();
|
||||
app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + e.currentTarget.dataset.value);
|
||||
} else {
|
||||
app.globalData.showToast('请输入搜索关键字', 'error');
|
||||
}
|
||||
},
|
||||
video_play(url, width, height) {
|
||||
this.setData({
|
||||
video_src: url,
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
|
||||
<template v-if="['3', '5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" @search_tap="search_tap"></componentDiySearch>
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" @search_tap="search_tap"></componentDiySearch>
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
|
@ -217,10 +217,6 @@
|
|||
})
|
||||
.exec();
|
||||
},
|
||||
// 搜索回调
|
||||
search_tap(form, list, color) {
|
||||
this.$emit('search_tap', form, list, color);
|
||||
},
|
||||
// 位置回调
|
||||
user_back_choice_location(e) {
|
||||
console.log('选择位置回调', e);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="wh-auto ht-auto re oh" :style="com_style">
|
||||
<view class="wh-auto ht-auto re oh" :style="com_style" :data-value="form.link && form.link.page" @tap="url_event">
|
||||
<div class="wh-auto ht-auto" :style="com_img_style"></div>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -72,7 +72,10 @@
|
|||
background_img_style: form?.background_img_style || '2'
|
||||
}
|
||||
return background_computer(data);
|
||||
}
|
||||
},
|
||||
url_event(e) {
|
||||
this.$emit('url_event', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view :style="style_container">
|
||||
<view :style="style_img_container">
|
||||
<view class="search wh-auto pr" :style="style">
|
||||
<view class="box oh flex-row align-c gap-10 bg-white" :style="box_style" @tap="search_tap">
|
||||
<view class="box oh flex-row align-c gap-10" :style="box_style" @tap="search_tap">
|
||||
<view class="search-icon" @tap.stop="search_icon_tap">
|
||||
<template v-if="form.is_icon_show == '1'">
|
||||
<template v-if="form.icon_img.length > 0">
|
||||
|
|
@ -17,21 +17,31 @@
|
|||
</template>
|
||||
</template>
|
||||
</view>
|
||||
<text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
|
||||
</view>
|
||||
<view v-if="form.is_search_show == '1'" class="pa search-botton flex-row align-c jc-c z-i" :style="search_button" @tap.stop="url_event">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
|
||||
</template>
|
||||
<template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
|
||||
<image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="heightFix"></image>
|
||||
<template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
|
||||
<swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :vertical="true" :duration="500" class="swiper_style" @change="slideChange">
|
||||
<swiper-item v-for="(item, index) in form.hot_word_list" :key="index" class="flex-row align-c" :style="{ color: !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : item.color }" :data-value="item.value" @tap.stop="serch_event">{{ item.value }}</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
|
||||
<iconfont :name="!isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="28rpx" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
<text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="form.is_search_show == '1'" class="pa search-outer-botton flex-row align-c jc-c">
|
||||
<view class="search-botton flex-row align-c jc-c z-i" :style="search_button" @tap.stop="serch_button_event">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
|
||||
</template>
|
||||
<template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
|
||||
<image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="heightFix"></image>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
|
||||
<iconfont :name="!isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="28rpx" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -72,6 +82,7 @@ export default {
|
|||
search_button_radius: '',
|
||||
box_style: '',
|
||||
search_button: '',
|
||||
keywords: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -111,14 +122,23 @@ export default {
|
|||
return common_styles;
|
||||
},
|
||||
get_box_style(new_style, form) {
|
||||
let style = `border: 1px solid ${new_style.search_border}; ${radius_computer(new_style.search_border_radius)};box-sizing: border-box;`;
|
||||
let style = `background: ${ new_style?.search_bg_color || '#fff' };border: 1px solid ${new_style.search_border}; ${radius_computer(new_style.search_border_radius)};box-sizing: border-box;`;
|
||||
if (form.is_center == '1') {
|
||||
style += `justify-content: center;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
search_tap() {
|
||||
this.$emit('search_tap', this.form, this.form.hot_word_list, this.new_style.hot_words_color);
|
||||
app.globalData.url_open('/pages/goods-search-start/goods-search-start?keywords=' + this.keywords);
|
||||
},
|
||||
serch_event() {
|
||||
app.globalData.url_open('/pages/goods-search-start/goods-search-start?keywords=' + this.keywords);
|
||||
},
|
||||
serch_button_event() {
|
||||
if (!isEmpty(this.keywords)) {
|
||||
app.globalData.url_open('pages/goods-search/goods-search?keywords=' + this.keywords);
|
||||
}
|
||||
app.globalData.url_open('/pages/goods-search-start/goods-search-start?keywords=' + this.keywords);
|
||||
},
|
||||
get_search_button(new_style) {
|
||||
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_button_radius } = new_style;
|
||||
|
|
@ -130,7 +150,7 @@ export default {
|
|||
background_img: search_botton_background_img,
|
||||
background_img_style: search_botton_background_img_style,
|
||||
};
|
||||
style += gradient_computer(data) + background_computer(data) + `color: ${this.new_style.button_inner_color};`;
|
||||
style += gradient_computer(data) + background_computer(data) + `color: ${new_style.button_inner_color};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
@ -141,6 +161,12 @@ export default {
|
|||
}
|
||||
app.globalData.url_open(this.form.icon_link.page);
|
||||
},
|
||||
slideChange(e) {
|
||||
let actived_index = e.target.current;
|
||||
this.setData({
|
||||
keywords: this.form.hot_word_list[actived_index].value,
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -151,6 +177,10 @@ export default {
|
|||
height: 64rpx;
|
||||
padding: 12rpx 30rpx;
|
||||
}
|
||||
.swiper_style {
|
||||
height: 64rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
height: 100%;
|
||||
|
|
@ -160,19 +190,19 @@ export default {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.search-botton {
|
||||
height: 56rpx;
|
||||
top: 4rpx;
|
||||
.search-outer-botton {
|
||||
height: 64rpx;
|
||||
top: 0;
|
||||
right: 4rpx;
|
||||
|
||||
.img {
|
||||
.search-botton {
|
||||
height: 56rpx;
|
||||
min-width: 6rpx;
|
||||
max-width: 20rpx;
|
||||
.img {
|
||||
height: 56rpx;
|
||||
min-width: 6rpx;
|
||||
max-width: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue