sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改输入框显示问题

master
于肖磊 2024-09-27 16:59:50 +08:00
parent 97d3e18307
commit a6eb0b9b21
4 changed files with 205 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/diy/carousel.vue
View File

@ -20,7 +20,7 @@
</swiper-item>
</block>
<block v-else>
<swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }">
<swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }" :data-value="item.carousel_link.page" @tap="url_open">
<view class="wh-auto ht-auto pr" :style="img_style">
<imageEmpty :propImageSrc="item.carousel_img[0]" :propStyle="img_style" :propImgFit="img_fit" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>

24
components/diy/header.vue
View File

@ -4,18 +4,18 @@
<view class="header-content flex-row align-c">
<view class="model-top flex-1">
<view class="roll pr z-i">
<view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
<view class="model-head pr padding-horizontal-sm flex-row align-c" :style="header_style">
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.content.theme)">
<view class="logo-outer-style">
<imageEmpty :propImageSrc="form.content.logo[0].url" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
<imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
</view>
</template>
<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" :isPageSettings="true"></componentDiySearch>
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
</view>
</template>
</view>
@ -27,11 +27,11 @@
</view>
<template v-if="['5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
</view>
</template>
</view>
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
@ -43,6 +43,7 @@
</view>
</view>
</view>
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
</view>
</template>
@ -50,6 +51,7 @@
const app = getApp();
import componentDiySearch from '@/components/diy/search';
import imageEmpty from '@/components/diy/modules/image-empty';
import hotWordList from '@/components/diy/modules/hot-word-list';
import { isEmpty, background_computer, gradient_computer } from '@/common/js/common/common.js';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -66,9 +68,11 @@
components: {
componentDiySearch,
imageEmpty,
hotWordList,
},
data() {
return {
is_click: false,
form: {},
new_style: {},
position: '',
@ -126,6 +130,16 @@
go_map_event() {
console.log('地图方法');
},
search_tap(value) {
this.setData({
is_click: value
})
},
search_hot_close() {
this.setData({
is_click: false
})
},
url_event(e) {
app.globalData.url_event(e);
},

74
components/diy/modules/hot-word-list.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<view class="search-hot-location flex-col align-c jc-c">
<view class="search-hot flex-row align-c gap-10 bg-white flex-wrap box-shadow-md">
<view v-for="(item, index) in propValue" :key="index" class="text-size-md" :style="{ color: !isEmpty(prophotWordsColor) ? prophotWordsColor : item.color }" :data-value="item.value" @tap.stop="url_event">{{ item.value }}</view>
</view>
<view class="flex-col align-c">
<view class="icon-top" />
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" @tap="search_hot_close"></iconfont>
</view>
</view>
</template>
<script>
const app = getApp();
import { isEmpty} from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Array,
default: () => {
return [];
},
},
prophotWordsColor: {
type: String,
default: () => {
return '';
},
}
},
data() {
return {};
},
methods: {
isEmpty,
search_hot_close() {
this.$emit('search_hot_close');
},
url_event(e) {
if (!isEmpty(e.currentTarget.dataset.value)) {
app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + e.currentTarget.dataset.value);
}
}
},
};
</script>
<style scoped lang="scss">
.search-hot {
width: 100%;
padding: 20rpx;
min-height: 20rpx;
transition: all 1s;
}
.search-hot-location {
padding-left: 20rpx;
padding-right: 20rpx;
width: 100%;
position: absolute;
z-index: 1;
box-sizing: content-box;
}
// 阴影
.box-shadow-md {
box-shadow: 0 16rpx 32rpx -16rpx rgba(50, 55, 58, 0.1);
}
.icon-top {
width: 4rpx;
height: 20rpx;
background: #666;
position: relative;
bottom: -1px;
}
</style>

139
components/diy/search.vue
View File

@ -1,41 +1,71 @@
<template>
<view :style="style_container">
<view :style="style" class="flex-row align-c">
<view class="search wh-auto pr">
<view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<view class="img-box">
<image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
</view>
<view :class="[{'bg-white wh-auto ht-auto oh': is_click }]">
<view :style="style_container" :class="[{'bg-white': is_click }]">
<template v-if="!is_click">
<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">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<view class="img-box" @tap="search_icon_tap">
<image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
</view>
</template>
<template v-else>
<view @tap="search_icon_tap">
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="28rpx" :color="new_style.icon_color"></iconfont>
</view>
</template>
</template>
<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 h flex-row align-c jc-c" :style="search_button">
<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>
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="'28rpx'" :color="new_style.icon_color"></iconfont>
<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"></iconfont>
</view>
</template>
</template>
<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>
<view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button">
<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'"></iconfont>
</view>
</template>
</template>
<template v-else>
<view class="search wh-auto pr">
<view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
<input :focus="is_click" type="text" name="title" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :placeholder="form.tips" @input="search_input" />
</view>
<view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :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>
<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"></iconfont>
</view>
</template>
</view>
</view>
</view>
</template>
</view>
<hotWordList v-if="is_click && !propIsPageSettings" :propValue="form.hot_word_list" :prophotWordsColor="new_style.hot_words_color" @search_hot_close="search_hot_close"></hotWordList>
</view>
</template>
<script>
const app = getApp();
import { background_computer, common_styles_computer, gradient_computer, radius_computer, isEmpty } from '@/common/js/common/common.js';
import hotWordList from '@/components/diy/modules/hot-word-list';
export default {
components: {
hotWordList
},
props: {
propValue: {
type: Object,
@ -47,9 +77,15 @@
type: Boolean,
default: false,
},
propIsClick: {
type: Boolean,
default: false,
}
},
data() {
return {
is_click: false,
search_content: '',
form: {},
new_style: {},
style: '',
@ -59,6 +95,16 @@
search_button: '',
};
},
watch: {
propIsClick: {
handler(new_value) {
this.setData({
is_click: new_value
});
},
immediate: true
}
},
created() {
this.setData({
form: this.propValue.content,
@ -88,15 +134,29 @@
return common_styles;
},
get_box_style() {
let style = `border: 1px solid ${this.new_style.search_border}; ${radius_computer(this.new_style.search_border_radius)};`;
let style = `border: 1px solid ${this.new_style.search_border}; ${radius_computer(this.new_style.search_border_radius)};box-sizing: border-box;`;
if (this.form.is_center == '1') {
style += `justify-content: center;`;
}
return style;
},
search_tap() {
if (this.propIsPageSettings) {
this.$emit('search_tap', true);
} else {
this.setData({
is_click: true,
})
}
},
search_hot_close() {
this.setData({
is_click: false
})
},
get_search_button() {
let style = this.search_button_radius;
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = this.new_style;
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_button_radius } = this.new_style;
let style = radius_computer(search_button_radius);
if (this.form.search_type != 'img') {
const data = {
color_list: search_botton_color_list,
@ -108,6 +168,28 @@
}
return style;
},
search_input(e) {
this.setData({
search_content: e.detail.value
})
},
search_icon_tap() {
if (!isEmpty(this.form.icon_src)) {
app.globalData.url_open(this.form.icon_src.page);
}
},
url_event() {
if (!isEmpty(this.search_content)) {
if (this.propIsPageSettings) {
this.$emit('search_tap', false);
} else {
this.setData({
is_click: false,
})
}
app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + this.search_content);
}
}
},
};
</script>
@ -115,6 +197,7 @@
<style lang="scss" scoped>
.search {
.box {
height: 64rpx;
padding: 12rpx 30rpx;
}
.img-box {