修改问题处理
parent
d3bfa59699
commit
5892dd1e91
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',
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ export function gradient_handle (color_list, direction, is_return_all = true) {
|
|||
* @param {string[], string} path
|
||||
* @returns {string}
|
||||
*/
|
||||
export function padding_computer (new_style) {
|
||||
return `padding: ${new_style.padding_top * 2 || 0}rpx ${new_style.padding_right * 2 || 0}rpx ${new_style.padding_bottom * 2 || 0}rpx ${new_style.padding_left * 2 || 0}rpx;`;
|
||||
export function padding_computer (new_style, scale = 1) {
|
||||
return `padding: ${new_style.padding_top * scale * 2 || 0}rpx ${new_style.padding_right * scale * 2 || 0}rpx ${new_style.padding_bottom * scale * 2 || 0}rpx ${new_style.padding_left * scale * 2 || 0}rpx;`;
|
||||
}
|
||||
/**
|
||||
* 设置外边距的方法
|
||||
|
|
@ -124,8 +124,8 @@ export function margin_computer (new_style) {
|
|||
* @param {string[], string} path
|
||||
* @returns {string}
|
||||
*/
|
||||
export function radius_computer (new_style) {
|
||||
return `border-radius: ${new_style.radius_top_left * 2 || 0}rpx ${new_style.radius_top_right * 2 || 0}rpx ${new_style.radius_bottom_right * 2 || 0}rpx ${new_style.radius_bottom_left * 2 || 0}rpx;`;
|
||||
export function radius_computer (new_style, scale = 1) {
|
||||
return `border-radius: ${new_style.radius_top_left * scale * 2 || 0}rpx ${new_style.radius_top_right * scale * 2 || 0}rpx ${new_style.radius_bottom_right * scale * 2 || 0}rpx ${new_style.radius_bottom_left * scale * 2 || 0}rpx;`;
|
||||
}
|
||||
/**
|
||||
* 设置阴影样式
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
form: this.propValue.content,
|
||||
new_style: this.propValue.style,
|
||||
seat_list: this.get_seat_list(new_form),
|
||||
new_list: this.get_seat_list(new_form).concat(new_form.carousel_list),
|
||||
new_list: new_form.carousel_type == 'inherit' ? new_form.carousel_list : new_form.carousel_list.concat(this.get_seat_list(new_form)),
|
||||
popup_width: block * 16 * 2 + 'rpx',
|
||||
popup_height: block * 9 * 2 + 'rpx',
|
||||
style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 用于样式显示
|
||||
|
|
@ -219,14 +219,16 @@
|
|||
},
|
||||
slideChange(e) {
|
||||
let actived_index = e.target.current;
|
||||
if (e.target.current > this.form.carousel_list.length - 1) {
|
||||
const seat_length = this.seat_list.length;
|
||||
if (seat_length == 2 && e.target.current == 3) {
|
||||
actived_index = 1;
|
||||
} else if (seat_length == 3) {
|
||||
actived_index = 0;
|
||||
} else {
|
||||
actived_index = e.target.current - this.seat_list.length;
|
||||
if (this.form.carousel_type != 'inherit') {
|
||||
if (e.target.current > this.form.carousel_list.length - 1) {
|
||||
const seat_length = this.seat_list.length;
|
||||
if (seat_length == 2 && e.target.current == 3) {
|
||||
actived_index = 1;
|
||||
} else if (seat_length == 3) {
|
||||
actived_index = 0;
|
||||
} else {
|
||||
actived_index = e.target.current - this.seat_list.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@
|
|||
<view v-for="item in form.custom_list" :key="item.id" class="main-content"
|
||||
:style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height) }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
|
||||
<model-text :propkey="propkey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
|
||||
<model-image :propkey="propkey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content"></model-lines>
|
||||
<model-lines :propkey="propkey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
|
||||
<model-icon :propkey="propkey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
|
||||
<model-panel :propkey="propkey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
scale: 0,
|
||||
scale: 1,
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
div_width: 0,
|
||||
|
|
|
|||
|
|
@ -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"></componentDiyHeader>
|
||||
<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>
|
||||
</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"></componentDiySearch>
|
||||
<componentDiySearch v-if="item.key == 'search'" :propkey="item.id" :propValue="item.com_data" @search_tap="search_tap"></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>
|
||||
|
|
@ -74,9 +74,19 @@
|
|||
</view>
|
||||
</uni-popup>
|
||||
<!-- 搜索 -->
|
||||
<!-- <uni-popup ref="searchPopup" type="center" border-radius="20rpx" :mask-click="false">
|
||||
|
||||
</uni-popup> -->
|
||||
<uni-popup ref="searchPopup" type="center" border-radius="20rpx" :mask-click="false">
|
||||
<view class="flex-col align-c jc-c gap-10 ht-auto" :style="{'width': search_width }">
|
||||
<view class="bg-white padding-default wh-auto flex-col gap-10">
|
||||
<componentSearch :propFocus="true" 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" @tap="search_close"></iconfont>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -125,6 +135,10 @@
|
|||
import componentNoData from '@/components/no-data/no-data';
|
||||
import componentBottomLine from '@/components/bottom-line/bottom-line';
|
||||
import componentGoodsBuy from '@/components/goods-buy/goods-buy';
|
||||
import componentSearch from '@/components/search/search';
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var sys_width = app.globalData.window_width_handle(system.windowWidth);
|
||||
|
||||
// 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
// #ifdef MP-TOUTIAO
|
||||
|
|
@ -176,6 +190,7 @@
|
|||
componentNoData,
|
||||
componentBottomLine,
|
||||
componentGoodsBuy,
|
||||
componentSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -244,6 +259,10 @@
|
|||
video_src: '',
|
||||
popup_width: '0rpx',
|
||||
popup_height: '0rpx',
|
||||
search_form: {},
|
||||
hot_word_list: [],
|
||||
search_hot_words_color: '',
|
||||
search_width: sys_width * 0.9 + 'px'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -260,6 +279,7 @@
|
|||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
// 初始化配置
|
||||
init_config(status) {
|
||||
if ((status || false) == true) {
|
||||
|
|
@ -521,6 +541,37 @@
|
|||
this.$refs[`diy_goods_buy${this.goods_index}`][0].goods_cart_back_event(e);
|
||||
}
|
||||
},
|
||||
search_tap(form, list, color) {
|
||||
this.setData({
|
||||
search_form: form,
|
||||
hot_word_list: list,
|
||||
search_hot_words_color: color
|
||||
});
|
||||
this.$refs.searchPopup.open();
|
||||
},
|
||||
search_close() {
|
||||
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,
|
||||
|
|
@ -544,4 +595,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.search-style {
|
||||
border: 2rpx solid #eee;
|
||||
background: #eee;
|
||||
border-radius: 1000rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,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" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" @search_tap="search_tap"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" @search_tap="search_tap"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
|
@ -48,7 +48,6 @@
|
|||
</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>
|
||||
</view>
|
||||
<block v-if="!is_immersion_model">
|
||||
|
|
@ -101,7 +100,6 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
is_click: false,
|
||||
form: {},
|
||||
new_style: {},
|
||||
position: '',
|
||||
|
|
@ -217,15 +215,8 @@
|
|||
go_map_event() {
|
||||
console.log('地图方法');
|
||||
},
|
||||
search_tap(value) {
|
||||
this.setData({
|
||||
is_click: value,
|
||||
});
|
||||
},
|
||||
search_hot_close() {
|
||||
this.setData({
|
||||
is_click: false,
|
||||
});
|
||||
search_tap(form, list, color) {
|
||||
this.$emit('search_tap', form, list, color);
|
||||
},
|
||||
user_back_choice_location(e) {
|
||||
console.log('选择位置', e);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<template v-if="form.style_actived == 2">
|
||||
<view class="flex-row align-c jc-c style-size">
|
||||
<view v-for="(item, index) in form.img_magic_list" :key="index" class="three" :style="img_spacing" :data-value="item.img_link.page" @tap="url_event">
|
||||
<image :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
<image v-if="item.img.length > 0" :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -15,18 +15,18 @@
|
|||
<template v-else-if="form.style_actived == 8">
|
||||
<view class="flex-row align-c jc-c style-size flex-wrap">
|
||||
<view v-for="(item, index) in form.img_magic_list" :key="index" :class="[{ 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]" :style="img_spacing" :data-value="item.img_link.page" @tap="url_event">
|
||||
<image :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
<image v-if="item.img.length > 0" :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="form.style_actived == 10">
|
||||
<view v-for="(item, index) in form.img_magic_list" :key="index" class="cr-main" :style="img_spacing + selected_style(item)" :data-value="item.img_link.page" @tap="url_event">
|
||||
<image :src="item.img[0].url" class="dis-block wh-auto" mode="widthFix" :style="content_img_radius"></image>
|
||||
<image v-if="item.img.length > 0" :src="item.img[0].url" class="dis-block wh-auto" mode="widthFix" :style="content_img_radius"></image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected cr-main" :style="img_spacing + selected_style(item)" :data-value="item.img_link.page" @tap="url_event">
|
||||
<image :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
<image v-if="item.img.length > 0" :src="item.img[0].url" class="dis-block wh-auto ht-auto" mode="aspectFill" :style="content_img_radius"></image>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="img-outer pr oh flex-row align-c wh-auto ht-auto" :style="com_style" :data-value="form.icon_link.page" @tap="url_event">
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * 2 + 'rpx'"></iconfont>
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * propScale * 2 + 'rpx'"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -24,6 +24,10 @@
|
|||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -48,9 +52,9 @@
|
|||
});
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, this.propScale) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, this.propScale) };`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * 2 }rpx ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
style += `border: ${form.border_size * this.propScale * 2 }rpx ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
}
|
||||
if (form.icon_location == 'center') {
|
||||
style += `justify-content: center;`;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@
|
|||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -66,12 +70,12 @@
|
|||
}
|
||||
},
|
||||
get_image_style(form) {
|
||||
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius)};`;
|
||||
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, this.propScale)};`;
|
||||
},
|
||||
get_border_style(form) {
|
||||
let style = ``;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * 2}rpx ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius)};box-sizing: border-box;`;
|
||||
style += `border: ${form.border_size * this.propScale * 2}rpx ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius, this.propScale)};box-sizing: border-box;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -39,9 +43,9 @@
|
|||
},
|
||||
get_border_style(form) {
|
||||
if (form.line_settings === 'horizontal') {
|
||||
return `margin: 10rpx 0;border-bottom: ${form.line_size * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
return `margin: 10rpx 0;border-bottom: ${form.line_size * this.propScale * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
} else {
|
||||
return `margin: 0 10rpx;border-right: ${form.line_size * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
return `margin: 0 10rpx;border-right: ${form.line_size * this.propScale * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@
|
|||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -51,9 +55,9 @@
|
|||
});
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius)}; transform: rotate(${form.panel_rotate}deg);`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.propScale)}; transform: rotate(${form.panel_rotate}deg);`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * this.propScale * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
return text;
|
||||
},
|
||||
get_text_style(form) {
|
||||
let style = `font-size: ${form.text_size * 2}rpx;line-height: ${form.text_size * 2}rpx;color: ${form.text_color}; text-align: ${form.text_location}; transform: rotate(${form.text_rotate}deg);text-decoration: ${form.text_option};${padding_computer(form.text_padding)};box-sizing: border-box;`;
|
||||
let style = `font-size: ${form.text_size * this.propScale * 2}rpx;line-height: ${form.text_size * this.propScale * 2}rpx;color: ${form.text_color}; text-align: ${form.text_location}; transform: rotate(${form.text_rotate}deg);text-decoration: ${form.text_option};${padding_computer(form.text_padding, this.propScale)};box-sizing: border-box;`;
|
||||
if (form.text_weight == 'italic') {
|
||||
style += `font-style: italic`;
|
||||
} else if (form.text_weight == '500') {
|
||||
|
|
@ -77,9 +81,9 @@
|
|||
return style;
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius)}`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.propScale)}`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * this.propScale * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
}
|
||||
// 是富文本并且开启了上下滚动的开关
|
||||
if (form.is_rich_text == '1' && form.is_up_down == '1') {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view :class="['oh img_wh', propClass]" :style="empty_outer_style + propStyle">
|
||||
<image :src="img_url" @error="handleImageError" :mode="propImgFit" :style="empty_style" />
|
||||
<image :src="img_url" :mode="propImgFit" :style="empty_style" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,262 +1,189 @@
|
|||
<template>
|
||||
<view :class="[{ 'bg-white wh-auto ht-auto oh': is_click }]">
|
||||
<view :style="style_container" :class="[{ 'bg-white': is_click }]">
|
||||
<view :style="style_img_container">
|
||||
<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">
|
||||
<view class="search-icon" @tap="search_icon_tap">
|
||||
<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>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view>
|
||||
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="28rpx" :color="new_style.icon_color"></iconfont>
|
||||
</view>
|
||||
</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>
|
||||
<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 :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="search-icon" @tap.stop="search_icon_tap">
|
||||
<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>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</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 + search_box_style">
|
||||
<input :focus="is_click" type="text" name="title" :class="[propIsPageSettings ? 'text-size-xs text-line-1 wh-auto' : 'text-size-md text-line-1 wh-auto']" :placeholder="form.tips" @input="search_input" @confirm="url_event" />
|
||||
</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>
|
||||
<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>
|
||||
<iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="28rpx" :color="new_style.icon_color"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</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 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>
|
||||
<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>
|
||||
<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, common_img_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,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
propIsPageSettings: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
propIsClick: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
const app = getApp();
|
||||
import { background_computer, common_styles_computer, common_img_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,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
is_click: false,
|
||||
search_content: '',
|
||||
form: {},
|
||||
new_style: {},
|
||||
style: '',
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
search_button_radius: '',
|
||||
box_style: '',
|
||||
search_button: '',
|
||||
};
|
||||
propIsPageSettings: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
watch: {
|
||||
propIsClick: {
|
||||
handler(new_value) {
|
||||
this.setData({
|
||||
is_click: new_value,
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
propkey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
propkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search_content: '',
|
||||
form: {},
|
||||
new_style: {},
|
||||
style: '',
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
search_button_radius: '',
|
||||
box_style: '',
|
||||
search_button: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propkey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
init() {
|
||||
this.setData({
|
||||
form: this.propValue.content,
|
||||
new_style: this.propValue.style,
|
||||
});
|
||||
const { search_button_radius, common_style } = this.new_style;
|
||||
this.setData({
|
||||
style: this.get_style(), // 内部样式
|
||||
style_container: this.propIsPageSettings ? '' : common_styles_computer(common_style), // 全局样式
|
||||
style_img_container: this.propIsPageSettings ? '' : common_img_computer(common_style),
|
||||
search_button_radius: radius_computer(search_button_radius), // 按钮圆角
|
||||
box_style: this.get_box_style(), // 搜索框设置
|
||||
search_box_style: `border: 1px solid ${this.new_style.search_border == '#fff' ? '#eee' : this.new_style.search_border};`,
|
||||
search_button: this.get_search_button(), // 搜索按钮显示
|
||||
});
|
||||
},
|
||||
get_style() {
|
||||
let common_styles = '';
|
||||
if (this.new_style.text_style == 'italic') {
|
||||
common_styles += `font-style: italic`;
|
||||
} else if (this.new_style.text_style == '500') {
|
||||
common_styles += `font-weight: 500`;
|
||||
}
|
||||
return common_styles;
|
||||
},
|
||||
get_box_style() {
|
||||
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.setData({
|
||||
search_content: '',
|
||||
});
|
||||
this.$emit('search_tap', true);
|
||||
} else {
|
||||
this.setData({
|
||||
is_click: true,
|
||||
search_content: '',
|
||||
});
|
||||
}
|
||||
},
|
||||
search_hot_close() {
|
||||
this.setData({
|
||||
is_click: false,
|
||||
search_content: '',
|
||||
});
|
||||
},
|
||||
get_search_button() {
|
||||
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,
|
||||
direction: search_botton_direction,
|
||||
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};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
search_input(e) {
|
||||
this.setData({
|
||||
search_content: e.detail.value,
|
||||
});
|
||||
},
|
||||
search_icon_tap() {
|
||||
if (isEmpty(this.form.icon_src)) {
|
||||
this.search_tap();
|
||||
return;
|
||||
}
|
||||
app.globalData.url_open(this.form.icon_src.page);
|
||||
},
|
||||
url_event() {
|
||||
if (!isEmpty(this.search_content)) {
|
||||
const content = this.search_content;
|
||||
|
||||
if (this.propIsPageSettings) {
|
||||
this.setData({
|
||||
search_content: '',
|
||||
});
|
||||
this.$emit('search_tap', false);
|
||||
} else {
|
||||
this.setData({
|
||||
is_click: false,
|
||||
search_content: '',
|
||||
});
|
||||
}
|
||||
app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + content);
|
||||
} else {
|
||||
app.globalData.showToast('请输入搜索关键字', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
init() {
|
||||
const new_form = this.propValue.content;
|
||||
const new_style = this.propValue.style;
|
||||
const { search_button_radius, common_style } = new_style;
|
||||
this.setData({
|
||||
form: new_form,
|
||||
new_style: new_style,
|
||||
style: this.get_style(new_style), // 内部样式
|
||||
style_container: this.propIsPageSettings ? '' : common_styles_computer(common_style), // 全局样式
|
||||
style_img_container: this.propIsPageSettings ? '' : common_img_computer(common_style),
|
||||
search_button_radius: radius_computer(search_button_radius), // 按钮圆角
|
||||
box_style: this.get_box_style(new_style, new_form), // 搜索框设置
|
||||
search_box_style: `border: 1px solid ${new_style.search_border == '#fff' ? '#eee' : new_style.search_border};`,
|
||||
search_button: this.get_search_button(new_style), // 搜索按钮显示
|
||||
});
|
||||
},
|
||||
};
|
||||
get_style(new_style) {
|
||||
let common_styles = '';
|
||||
if (new_style.text_style == 'italic') {
|
||||
common_styles += `font-style: italic`;
|
||||
} else if (new_style.text_style == '500') {
|
||||
common_styles += `font-weight: 500`;
|
||||
}
|
||||
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;`;
|
||||
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);
|
||||
},
|
||||
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;
|
||||
let style = radius_computer(search_button_radius);
|
||||
if (this.form.search_type != 'img') {
|
||||
const data = {
|
||||
color_list: search_botton_color_list,
|
||||
direction: search_botton_direction,
|
||||
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};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
search_icon_tap() {
|
||||
if (isEmpty(this.form.icon_link)) {
|
||||
this.search_tap();
|
||||
return;
|
||||
}
|
||||
app.globalData.url_open(this.form.icon_link.page);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
.box {
|
||||
height: 64rpx;
|
||||
padding: 12rpx 30rpx;
|
||||
}
|
||||
.img-box {
|
||||
height: 100%;
|
||||
.img {
|
||||
height: 36rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search-botton {
|
||||
height: 56rpx;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
.img {
|
||||
height: 56rpx;
|
||||
min-width: 6rpx;
|
||||
max-width: 20rpx;
|
||||
}
|
||||
}
|
||||
.search-icon{
|
||||
position: relative;
|
||||
}
|
||||
.search-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
left: -10px
|
||||
.search {
|
||||
.box {
|
||||
height: 64rpx;
|
||||
padding: 12rpx 30rpx;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
height: 100%;
|
||||
|
||||
.img {
|
||||
height: 36rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.search-botton {
|
||||
height: 56rpx;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
|
||||
.img {
|
||||
height: 56rpx;
|
||||
min-width: 6rpx;
|
||||
max-width: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
left: -16px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -370,12 +370,11 @@
|
|||
}
|
||||
},
|
||||
updateCountdown() {
|
||||
const now = new Date();
|
||||
let endTime = this.seckill_time.endTime.replace(/-/g, '/');
|
||||
let endTime = this.seckill_time.endTime;
|
||||
if (this.seckill_time.status === 0) {
|
||||
endTime = this.seckill_time.startTime.replace(/-/g, '/');
|
||||
endTime = this.seckill_time.startTime;
|
||||
}
|
||||
const distance = new Date(endTime).getTime() - now.getTime();
|
||||
const distance = new Date(endTime).getTime() - new Date().getTime();
|
||||
// 如果倒计时结束,显示结束信息
|
||||
if (distance <= 1000) {
|
||||
clearInterval(this.intervalId);
|
||||
|
|
@ -425,7 +424,6 @@
|
|||
},
|
||||
get_layout_type(form) {
|
||||
let class_type = '';
|
||||
console.log(form.shop_style_type);
|
||||
switch (form.shop_style_type) {
|
||||
case '1':
|
||||
class_type = `flex-row bg-white oh`;
|
||||
|
|
@ -537,6 +535,7 @@
|
|||
.flex-img3 {
|
||||
background: #f4fcff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.slide-bottom {
|
||||
height: 20rpx;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view :class="theme_view">
|
||||
<view :class="'search-content pr round '+propSize" :style="'background:' + propBgColor + ';' + ((propBrColor || null) != null ? 'border:1px solid ' + propBrColor + ';' : '')">
|
||||
<view class="search-icon dis-inline-block pa" @tap="search_icon_event">
|
||||
<view class="search-icon dis-inline-block pa" :style="'padding:' + propPadding" @tap="search_icon_event">
|
||||
<iconfont :name="propIcon" :color="propIconColor" size="24rpx"></iconfont>
|
||||
</view>
|
||||
<input
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
:placeholder="(propPlaceholder || this.$t('search.search.660us5'))"
|
||||
:placeholder-class="propPlaceholderClass"
|
||||
:value="propDefaultValue"
|
||||
:focus="propFocus"
|
||||
@input="search_input_value_event"
|
||||
@confirm="search_submit_confirm_event"
|
||||
@focus="search_input_focus_event"
|
||||
|
|
@ -108,6 +109,14 @@
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propFocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
propPadding: {
|
||||
type: String,
|
||||
default: '14rpx 20rpx 0 20rpx;',
|
||||
},
|
||||
},
|
||||
// 属性值改变监听
|
||||
watch: {
|
||||
|
|
@ -190,7 +199,6 @@
|
|||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 14rpx 20rpx 0 20rpx;
|
||||
line-height: 28rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue