Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-09-05 18:24:18 +08:00
commit 8cd8086ec2
14 changed files with 129 additions and 5332 deletions

View File

@ -4,7 +4,7 @@
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface"> <el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio> <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group> </el-radio-group>
<el-form-item v-if="typeList.includes('size')" label="字号" label-width="40" class="mb-0 w word-size"> <el-form-item v-if="typeList.includes('size')" label="字号" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="size" :max="100"></slider> <slider v-model="size" :max="100"></slider>
</el-form-item> </el-form-item>
</div> </div>
@ -39,10 +39,4 @@ const font_weight = [
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.word-size {
:deep(.el-form-item__label) {
color: #999;
font-size: 1.2rem;
}
}
</style> </style>

View File

@ -48,7 +48,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { common_styles_computer, radius_computer, get_math } from '@/utils'; import { common_styles_computer, radius_computer, get_math } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep, throttle } from 'lodash';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, EffectCoverflow } from 'swiper/modules'; import { Autoplay, EffectCoverflow } from 'swiper/modules';
import 'swiper/css'; import 'swiper/css';
@ -164,7 +164,10 @@ watchEffect(() => {
length: carousel_length length: carousel_length
}; };
// key // key
// ,
throttle(() => {
carouselKey.value = get_math(); carouselKey.value = get_math();
}, 1000);
} }
//#endregion //#endregion
}); });

View File

@ -149,7 +149,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer } from '@/utils'; import { common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep, throttle } from 'lodash';
import ShopAPI from '@/api/shop'; import ShopAPI from '@/api/shop';
const props = defineProps({ const props = defineProps({
@ -449,7 +449,10 @@ watchEffect(() => {
notice_length: notice_length, notice_length: notice_length,
}; };
// key // key
// ,
throttle(() => {
carouselKey.value = get_math(); carouselKey.value = get_math();
}, 1000);
} }
}); });
//#endregion //#endregion

View File

@ -26,7 +26,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { common_styles_computer, radius_computer, get_math } from '@/utils'; import { common_styles_computer, radius_computer, get_math } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep, throttle } from 'lodash';
const props = defineProps({ const props = defineProps({
value: { value: {
@ -141,7 +141,10 @@ watch(props.value, (val) => {
is_roll: display_is_roll, is_roll: display_is_roll,
}; };
// key // key
// ,
throttle(() => {
carouselKey.value = get_math(); carouselKey.value = get_math();
}, 1000);
} }
nextTick(() => { nextTick(() => {
if (!isEmpty(bannerImg.value)) { if (!isEmpty(bannerImg.value)) {

View File

@ -42,7 +42,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, radius_computer } from '@/utils'; import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, radius_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash'; import { isEmpty, cloneDeep, throttle } from 'lodash';
const props = defineProps({ const props = defineProps({
value: { value: {
@ -134,7 +134,10 @@ watchEffect(() => {
notice_length: notice_length notice_length: notice_length
}; };
// key // key
// ,
throttle(() => {
carouselKey.value = get_math(); carouselKey.value = get_math();
}, 1000);
} }
//#endregion //#endregion
}); });

View File

@ -15,10 +15,10 @@
<template v-if="!isEmpty(substance.icon_class)"> <template v-if="!isEmpty(substance.icon_class)">
<el-form-item label="左侧图标"> <el-form-item label="左侧图标">
<div class="flex-col w gap-10"> <div class="flex-col w gap-10">
<el-form-item label="大小" label-width="40" class="word-size"> <el-form-item label="大小" label-width="40" class="form-item-child-label">
<slider v-model="form.icon_size" :max="100"></slider> <slider v-model="form.icon_size" :max="100"></slider>
</el-form-item> </el-form-item>
<el-form-item label="颜色" label-width="40" class="word-size"> <el-form-item label="颜色" label-width="40" class="form-item-child-label">
<color-picker v-model="form.icon_color" default-color="#999"></color-picker> <color-picker v-model="form.icon_color" default-color="#999"></color-picker>
</el-form-item> </el-form-item>
</div> </div>
@ -27,10 +27,10 @@
<template v-else> <template v-else>
<el-form-item label="左侧图片"> <el-form-item label="左侧图片">
<div class="flex-col w gap-10"> <div class="flex-col w gap-10">
<el-form-item label="宽度" label-width="40" class="word-size"> <el-form-item label="宽度" label-width="40" class="form-item-child-label">
<slider v-model="form.title_width" :max="1000"></slider> <slider v-model="form.title_width" :max="1000"></slider>
</el-form-item> </el-form-item>
<el-form-item label="高度" label-width="40" class="word-size"> <el-form-item label="高度" label-width="40" class="form-item-child-label">
<slider v-model="form.title_height" :max="1000"></slider> <slider v-model="form.title_height" :max="1000"></slider>
</el-form-item> </el-form-item>
</div> </div>
@ -125,10 +125,4 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
flex-direction: column; flex-direction: column;
} }
} }
.word-size {
:deep(.el-form-item__label) {
color: #999;
font-size: 1.2rem;
}
}
</style> </style>

View File

@ -54,7 +54,7 @@
<!-- 标题 --> <!-- 标题 -->
<div :style="trends_config('title')" class="text-line-2">{{ item.title }}</div> <div :style="trends_config('title')" class="text-line-2">{{ item.title }}</div>
<!-- 进度条 --> <!-- 进度条 -->
<div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6"> <!-- <div v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<div class="re flex-1"> <div class="re flex-1">
<div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div> <div class="slide-bottom" :style="`background: ${new_style.progress_bg_color}`"></div>
<div class="slide-top" :style="` width: 51%; ${slide_active_color}`"> <div class="slide-top" :style="` width: 51%; ${slide_active_color}`">
@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span> <span class="size-10" :style="`color: ${new_style.progress_text_color}`">已抢51%</span>
</div> </div> -->
</div> </div>
<div class="flex-row align-e gap-10 jc-sb"> <div class="flex-row align-e gap-10 jc-sb">
<div class="flex-col gap-5"> <div class="flex-col gap-5">
@ -160,7 +160,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, padding_computer, radius_computer } from '@/utils'; import { background_computer, common_styles_computer, get_math, gradient_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash'; import { isEmpty, throttle } from 'lodash';
import SeckillAPI from '@/api/seckill'; import SeckillAPI from '@/api/seckill';
import { online_url } from '@/utils'; import { online_url } from '@/utils';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
@ -434,7 +434,10 @@ watchEffect(() => {
// //
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.carousel_col; slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.carousel_col;
// key // key
// ,
throttle(() => {
carouselKey.value = get_math(); carouselKey.value = get_math();
}, 1000);
}); });
// //

View File

@ -38,7 +38,6 @@
<el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input> <el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</template> </template>
</card-container> </card-container>
<div class="divider-line"></div> <div class="divider-line"></div>
@ -162,7 +161,7 @@ const change_shop_type = () => {
}; };
// //
const change_style = (val: any): void => { const change_style = (val: any): void => {
form.value.theme = val; form.value.shop_style_type = val;
if (!is_revise.value) { if (!is_revise.value) {
if (['3'].includes(val) && form.value.shop_type == 'text') { if (['3'].includes(val) && form.value.shop_type == 'text') {
form.value.shop_type = 'icon'; form.value.shop_type = 'icon';

View File

@ -50,12 +50,6 @@
</template> </template>
<card-container> <card-container>
<div class="mb-12">商品样式</div> <div class="mb-12">商品样式</div>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<el-form-item label="商品名称"> <el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group> <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item> </el-form-item>
@ -65,6 +59,25 @@
<el-form-item label="原价价格"> <el-form-item label="原价价格">
<color-picker v-model="form.original_price_color"></color-picker> <color-picker v-model="form.original_price_color"></color-picker>
</el-form-item> </el-form-item>
<el-form-item label="秒杀角标">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
<el-radio v-for="item in base_list.location_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<el-form-item label="文字" label-width="40" class="form-item-child-label">
<color-picker v-model="form.seckill_subscript_text_color"></color-picker>
</el-form-item>
<el-form-item label="背景" label-width="40" class="form-item-child-label">
<color-picker v-model="form.seckill_subscript_bg_color"></color-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<el-form-item label="内间距"> <el-form-item label="内间距">
<padding :value="form.shop_padding"></padding> <padding :value="form.shop_padding"></padding>
</el-form-item> </el-form-item>
@ -79,19 +92,6 @@
<slider v-model="form.content_outer_height" :max="1000"></slider> <slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item> </el-form-item>
</template> </template>
<el-form-item label="秒杀角标">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
<el-radio v-for="item in base_list.location_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<el-form-item label="文字" style="color: #333;" label-width="40">
<color-picker v-model="form.seckill_subscript_text_color"></color-picker>
</el-form-item>
<el-form-item label="背景" style="color: #333;" label-width="40">
<color-picker v-model="form.seckill_subscript_bg_color"></color-picker>
</el-form-item>
</div>
</el-form-item>
</card-container> </card-container>
<!-- 秒杀按钮 --> <!-- 秒杀按钮 -->
<template v-if="data.is_shop_show == '1'"> <template v-if="data.is_shop_show == '1'">

View File

@ -205,3 +205,10 @@ p {
--el-loading-spinner-size: 13rem; --el-loading-spinner-size: 13rem;
--el-loading-fullscreen-spinner-size: 13rem; --el-loading-fullscreen-spinner-size: 13rem;
} }
// el-form-item form-item label
.form-item-child-label {
.el-form-item__label {
color: #999;
font-size: 1.2rem;
}
}

View File

@ -319,3 +319,51 @@
cursor: pointer; cursor: pointer;
} }
} }
.layout-toggle-bar {
cursor: pointer;
height: 6.4rem;
width: 2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 3;
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
position: absolute;
width: 0.2rem;
border-radius: 0.2rem;
height: 3rem;
left: 1rem;
background: #e6e6e6;
transition: 1s ease;
}
.layout-toggle-bar-bottom {
top: 2.6rem;
}
}
.layout-toggle-bar-close:hover {
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
background: $cr-main;
transition: 1s ease;
}
.layout-toggle-bar-top {
transform: rotate(12deg) scale(1.05) translateY(-0.2rem);
}
.layout-toggle-bar-bottom {
transform: rotate(-12deg) scale(1.05) translateY(0.2rem);
}
}
.layout-toggle-bar-open:hover {
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
background: $cr-main;
transition: 1s ease;
}
.layout-toggle-bar-top {
transform: rotate(-12deg) scale(1.05) translateY(-0.2rem);
}
.layout-toggle-bar-bottom {
transform: rotate(12deg) scale(1.05) translateY(0.2rem);
}
}

View File

@ -15,9 +15,9 @@
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
<div class="drawer-container" :style="`width: ${diy_data.length > 0 ? '12.8rem' : '0px'}`"> <div class="drawer-container" :style="`width: ${ drawer_selected ? '12.8rem' : '0px'}`">
<div class="drawer-content pt-5" :style="{ left: diy_data.length > 0 ? '0' : '-100%' }"> <div class="drawer-content pt-5" :style="{ left: drawer_selected ? '0' : '-100%' }">
<div class="size-14 cr-3 fw pl-12 drawer-title" :style="{ opacity: diy_data.length > 0 ? '1' : '0' }">已选组件({{ diy_data.length }})</div> <div class="size-14 cr-3 fw pl-12 drawer-title" :style="{ opacity: drawer_selected ? '1' : '0' }">已选组件({{ diy_data.length }})</div>
<div ref="left_scrollTop" class="drawer-drag-area"> <div ref="left_scrollTop" class="drawer-drag-area">
<VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" :on-sort="on_sort"> <VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" :on-sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col"> <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
@ -32,7 +32,11 @@
</div> </div>
</div> </div>
<!-- 视图渲染 --> <!-- 视图渲染 -->
<div class="main"> <div class="main re">
<div v-if="diy_data.length > 0" :class="['layout-toggle-bar', drawer_selected ? 'layout-toggle-bar-close' : 'layout-toggle-bar-open']" @click="toggle_drawer">
<div class="layout-toggle-bar-top"></div>
<div class="layout-toggle-bar-bottom"></div>
</div>
<div class="model"> <div class="model">
<div class="model-content"> <div class="model-content">
<div class="acticons"> <div class="acticons">
@ -248,7 +252,18 @@ watch(
footer_nav.value = newValue; footer_nav.value = newValue;
} }
); );
//
const drawer_selected = ref(false);
watchEffect(() => {
if (diy_data.value.length > 0) {
drawer_selected.value = true;
} else {
drawer_selected.value = false;
}
})
const toggle_drawer = () => {
drawer_selected.value = !drawer_selected.value;
};
// //
const emits = defineEmits(['rightUpdate', 'import', 'export']); const emits = defineEmits(['rightUpdate', 'import', 'export']);
const activeNames = reactive(['base', 'plugins', 'tool']); const activeNames = reactive(['base', 'plugins', 'tool']);

4
temp.d.ts vendored
View File

@ -1,4 +1,4 @@
const temp_token = '01e8d1181d53260607d2b0180a2ccc68' || ''; const temp_token = 'e9448c2efc2bf9234aac50306aaaa5ab' || '';
const temp_attachment_host = 'http://shopxo.com'; const temp_attachment_host = 'http://shopxo.com/public';
// 导出token // 导出token
export default { temp_token, temp_attachment_host }; export default { temp_token, temp_attachment_host };

5275
yarn.lock

File diff suppressed because it is too large Load Diff