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

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

v1.0.0
sws 2024-08-21 18:40:07 +08:00
parent 4fbf12a98c ce1ab2c000
commit 1eab0ad1d5
14 changed files with 268 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/base/drag/index.vue
View File

@ -4,7 +4,8 @@
<li v-for="(item, index) in from" :key="item.id" :class="className" class="flex gap-y-16 re" @click="on_click(item, index)">
<el-icon class="iconfont icon-drag size-16 cursor-move" />
<slot :row="item" :index="index" />
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16" @click="remove(index)" />
<el-icon v-if="isShowEdit" class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="edit(index)" />
<el-icon v-if="type == 'line'" class="iconfont icon-del-o size-16 do-not-trigger" @click="remove(index)" />
<el-icon v-if="type == 'card'" class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
</li>
</TransitionGroup>
@ -13,16 +14,18 @@
<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus';
const emits = defineEmits(['click', 'remove', 'onSort']);
const emits = defineEmits(['click', 'remove', 'edit', 'onSort']);
interface Props {
data: any; // 拖拽列表数据
type?: string; // card: 卡片区域 line: 一行
spaceCol?: number; // 上下间距
iconPosition?: string; // top/bottom/center
isShowEdit?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
type: () => 'line',
isShowEdit: false,
spaceCol: () => 5,
iconPosition: 'center',
});
@ -41,7 +44,7 @@ if (props.type == 'card') {
className.value = 'align-c';
}
const from = ref(props.data);
const from = computed(() => props.data);
const on_click = (item: any, index: number) => {
emits('click', item, index);
@ -50,6 +53,9 @@ const on_click = (item: any, index: number) => {
const remove = (index: number) => {
emits('remove', index);
};
const edit = (index: number) => {
emits('edit', index);
};
// 拖拽更新之后用户更新数据
const on_sort = () => {
emits('onSort', from);
@ -64,7 +70,7 @@ const on_sort = () => {
.size-16 {
font-size: 1.6rem !important;
}
.icon-del-o {
.icon-del-o, .icon-commodity-edit {
cursor: pointer;
}
.cursor-move {

76
src/components/common/drag-group/index.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<drag :data="drag_list" :space-col="20" :is-show-edit="true" @remove="remove" @on-sort="on_sort" @edit="edit">
<template #default="{ row, index }">
<upload v-model="row.new_url" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.link[imgParams]" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<template v-if="index === edit_index">
<el-input v-model="row.new_title" placeholder="请输入链接" type="textarea" class="flex-1 do-not-trigger" :rows="2"></el-input>
</template>
<template v-else>
<div class="flex-1 flex-width text-line-2 size-12 self-s">{{ row.new_title }}</div>
</template>
</template>
</drag>
</template>
<script lang="ts" setup>
interface Props {
list: any[];
imgParams: string;
}
const props = withDefaults(defineProps<Props>(), {
imgParams: 'cover',
isouterClick: false,
});
const drag_list = ref(props.list);
watchEffect(() => {
drag_list.value = props.list;
});
onMounted(() => {
// 监听点击事件
document.addEventListener('click', outerClick);
});
onUnmounted(() => {
// 移除监听事件
document.removeEventListener('click', outerClick);
});
const edit_index = ref(-1);
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
edit_index.value = -1;
}
};
const emits = defineEmits(['remove', 'onsort']);
const remove = (index: number) => {
if (edit_index.value === index) {
edit_index.value = -1;
}
emits('remove', index);
}
const on_sort = (item: any) => {
emits('onsort', item);
}
const edit = (index: number) => {
if (edit_index.value === index) {
edit_index.value = -1;
} else {
edit_index.value = index;
}
}
</script>
<style lang="scss" scoped>
.img {
width: 4rem;
height: 4rem;
}
</style>

2
src/components/common/product-show-config/index.vue
View File

@ -71,6 +71,8 @@ const base_list = {
{ name: '商品销量', value: '3' },
{ name: '商品评分', value: '4' },
{ name: '商品原价', value: '5' },
{ name: '售价单位', value: '6' },
{ name: '原价单位', value: '7' },
],
shopping_button_list: [
{ name: '购买', value: '0' },

8
src/components/common/url-value/url-value-dialog.vue
View File

@ -14,27 +14,35 @@
</el-menu>
</div>
<div class="right-content flex-1">
<!-- 商城链接/插件 -->
<template v-if="link_select == 'shop' || link_select == 'plugins'">
<link-list :key="link_select" v-model="link_value" :type="link_select" :reset="reset_compontent"></link-list>
</template>
<!-- 商品分类 -->
<template v-else-if="link_select == 'goods-category'">
<link-goods-category v-model="link_value" :reset="reset_compontent"></link-goods-category>
</template>
<!-- 商品搜索 -->
<template v-else-if="link_select == 'goods-search'">
<link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change"></link-goods-search>
</template>
<!-- 商品页面 -->
<template v-else-if="link_select == 'goods'">
<link-goods v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-goods>
</template>
<!-- 文章页面 -->
<template v-else-if="link_select == 'article'">
<link-articles v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-articles>
</template>
<!-- diy页面/页面设计/自定义页面 -->
<template v-else-if="link_select == 'diy' || link_select == 'design' || link_select == 'custom-view'">
<link-table :key="link_select" v-model="link_value" :multiple="multiple" :type="link_select" :reset="reset_compontent"></link-table>
</template>
<!-- 品牌 -->
<template v-else-if="link_select == 'brand'">
<link-brand v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-brand>
</template>
<!-- 自定义链接 -->
<template v-else-if="link_select == 'custom-url'">
<link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></link-custom>
</template>

88
src/components/model-data-magic/components/product-list-show.vue
View File

@ -2,29 +2,68 @@
<template v-if="props.outerflex == 'row'">
<div class="flex-row gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 half-width h">
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</template>
<template v-else-if="actived != 7 || props.num !== 1">
<div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
<div v-for="(item, index) in split_list" :key="index" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
<div class="w h re">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="isShow.includes('1')" class="price-suspension">¥{{ '51' }}</div>
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
</template>
<div v-if="isShow.includes('1')" class="price-suspension text-line-1">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="isShow.includes('2')">
{{ item.show_price_unit }}
</template>
</div>
</div>
<div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">{{ item.title }}</div>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-for="(item, index) in split_list" :key="index" class="flex-col w h">
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</template>
@ -33,11 +72,24 @@
<template v-else>
<div class="flex-col gap-20 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c w h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
<div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h">
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" fit="contain" class="img" :style="contentImgRadius"></el-image>
</template>
<template v-else>
<image-empty :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">{{ item.title }}</div>
<div v-if="isShow.includes('1')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('2')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div>
</template>
@ -84,7 +136,7 @@ watchEffect(() => {
}
}
.identifying {
font-size: 2rem;
font-size: 1.4rem;
color: #EA3323;
.num {
font-size: 0.9rem;

51
src/components/model-data-magic/components/tabs-content.vue
View File

@ -34,31 +34,19 @@
</card-container>
<card-container v-else class="mb-8">
<div class="mb-12">商品设置</div>
<drag :key="form.product_list" :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
<template #default="{ row }">
<upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<div class="flex-1 flex-width">
<url-value v-model="row.href"></url-value>
</div>
</template>
</drag>
<drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
<el-form-item label="展示信息">
<el-form-item label="展示信息" label-width="60">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</card-container>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -71,7 +59,7 @@ const props = defineProps({
}
});
const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }]
const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }, { name: '售价单位', value: '2' }]
const form = ref(props.value);
@ -87,22 +75,31 @@ const img_remove = (index: number) => {
const product_list_remove = (index: number) => {
form.value.product_list.splice(index, 1);
};
const product_list_add = () => {
form.value.product_list.push({
id: get_math(),
src: 'carousel',
new_src: [],
href: {},
});
};
// 拖拽更新之后，更新数据
const product_list_sort = (new_list: any) => {
form.value.product_list = new_list;
form.value.product_list = cloneDeep(new_list);
}
watchEffect(() => {
form.value = props.value;
})
});
const product_list_add = () => {
url_value_dialog_visible.value = true;
};
// 打开弹出框
const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
item.forEach((item: any) => {
form.value.product_list.push({
id: get_math(),
new_url: [],
new_title: item.title,
link: item,
});
});
};
</script>
<style lang="scss" scoped>
.card.mb-8 {

6
src/components/model-data-magic/index.vue
View File

@ -244,7 +244,11 @@ const text_style = (typeface: string, size: number, color: string) => {
const commodity_list = (list: any[], num: number) => {
if (list.length > 0) {
// 深拷贝一下，确保不会出现问题
const commodity_list = cloneDeep(list);
const commodity_list = cloneDeep(list).map((item: any) => ({
...item.link,
title: item.new_title,
new_url: item.new_url,
}));
// 存储数据显示
let nav_list = [];
// 拆分的数量

29
src/components/model-shop-list/index.vue
View File

@ -10,8 +10,8 @@
</template>
<template v-else>
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_src)">
<image-empty v-model="item.new_src[0]" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
<template v-if="!isEmpty(item.new_url)">
<image-empty v-model="item.new_url[0]" :class="`flex-img${product_style} flex align-c jc-c`" :style="content_img_radius"></image-empty>
</template>
<template v-else-if="!isEmpty(item.images)">
<el-image :src="item.images" :class="`flex-img${product_style} flex align-c jc-c`" fit="contain" class="img"></el-image>
@ -31,8 +31,14 @@
</div>
<div v-if="!['3','4','5'].includes(form.product_style)" class="flex-col gap-5 oh">
<div :class="[form.is_price_solo ? 'flex-row align-c nowrap': 'flex-col gap-5']">
<div v-if="is_show('2')" class="num" :style="`color: ${ new_style.shop_price_color }`"><span class="identifying">{{ item.show_price_symbol }}</span><span :style="trends_config('price')">{{ item.min_price }}</span><span class="identifying">{{ item.show_price_unit }}</span></div>
<div v-if="show_content && is_show('5')" class="size-10 flex"><span class="original-price-left"></span><span class="original-price flex-1 text-line-1">{{ item.show_original_price_symbol }}{{ item.min_original_price }}{{ item.show_original_price_unit }}</span></div>
<div v-if="is_show('2')" class="num" :style="`color: ${ new_style.shop_price_color }`"><span class="identifying">{{ item.show_price_symbol }}</span><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('6')" class="identifying">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('5')" class="size-10 flex"><span class="original-price-left"></span><span class="original-price flex-1 text-line-1">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('7')">
{{ item.show_original_price_unit }}
</template>
</span></div>
</div>
<div class="flex-row jc-sb align-e">
<div>
@ -85,7 +91,7 @@
</template>
<script setup lang="ts">
import { common_styles_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { isEmpty, cloneDeep } from 'lodash';
import ShopAPI from '@/api/shop';
const props = defineProps({
@ -112,7 +118,7 @@ const { form, new_style } = toRefs(state);
interface product_list {
title: string;
images: string;
new_src: string[];
new_url: string[];
min_original_price: string;
show_original_price_symbol: string;
show_original_price_unit: string;
@ -130,9 +136,10 @@ const default_list = {
show_price_unit: "",
sales_count: "1000",
images: '',
new_src: []
new_url: []
}
const list = ref<product_list[]>([]);
const get_products = () => {
const { goods_category_ids, goods_brand_ids, number, sort, sort_rules } = form.value;
const params = {
@ -152,10 +159,15 @@ const get_products = () => {
}
});
};
watchEffect(() => {
if (form.value.product_check == '0') {
if (!isEmpty(form.value.product_list)) {
list.value = form.value.product_list;
list.value = cloneDeep(form.value.product_list).map((item: any) => ({
...item.link,
title: item.new_title,
new_url: item.new_url,
}));
} else {
list.value = Array(4).fill(default_list);
}
@ -356,6 +368,7 @@ const style_container = computed(() => {
}
.flex-img0 {
height: auto;
max-height: 12rem;
width: 11rem;
}
.flex-img1 {

16
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -19,21 +19,7 @@
</el-form-item>
<template v-if="form.product_check === '0'">
<div class="nav-list">
<drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
<template #default="{ row }">
<upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<div class="flex-1 flex-width">
<url-value v-model="row.href"></url-value>
</div>
</template>
</drag>
<drag-group :list="form.product_list" img-params="images" @onsort="product_list_sort" @remove="product_list_remove"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
</div>
</template>

36
src/components/model-shop-list/model-shop-list-styles.vue
View File

@ -3,24 +3,6 @@
<el-form :model="form" label-width="70">
<card-container class="mb-8">
<div class="mb-12">商品样式</div>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="product_style == '5'" label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="商品名称">
<text-size-type v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size"></text-size-type>
</el-form-item>
@ -45,6 +27,24 @@
<el-form-item label="评分颜色">
<color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(product_style)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<el-form-item v-if="product_style == '5'" label="内容宽度">
<slider v-model="form.content_outer_width" :max="1000"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">
<div class="mb-12">购物车按钮</div>

17
src/components/model-shop-tabs/index.vue
View File

@ -26,15 +26,16 @@ const state = reactive({
const { form, new_style } = toRefs(state);
const tabs_list = ref({
content: {
...toRefs(form.value),
...toRefs(form.value.tabs_list[0]),
},
style: {
...toRefs(new_style.value),
}
content: {
...toRefs(form.value),
...toRefs(form.value.tabs_list[0]),
},
style: {
...toRefs(new_style.value),
}
)
})
console.log(tabs_list.value);
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>

37
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -40,19 +40,7 @@
</el-form-item>
<template v-if="row.product_check === '0'">
<div class="nav-list">
<drag :data="row.product_list" :space-col="20" @remove="product_list_remove($event, index)" @on-sort="product_list_sort($event, index)">
<template #default="scoped">
<upload v-model="scoped.row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="scoped.row.url" fit="contain" class="img">
<template #error>
<div class="bg-f5 flex-row jc-c align-c radius h w">
<icon name="error-img" size="16" color="9"></icon>
</div>
</template>
</el-image>
<url-value v-model="scoped.row.href"></url-value>
</template>
</drag>
<drag-group :list="row.product_list" img-params="images" @onsort="product_list_sort($event, index)" @remove="product_list_remove($event, index)"></drag-group>
<el-button class="mtb-20 w" @click="product_add(index)">+添加</el-button>
</div>
</template>
@ -90,6 +78,7 @@
</card-container>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form"></product-show-config>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</el-form>
</div>
</template>
@ -202,14 +191,24 @@ const product_list_remove = (index: number, product_index: number) => {
const product_list_sort = (item: any, index: number) => {
form.value.tabs_list[index].product_list = item;
};
let click_index = 0;
const product_add = (index: number) => {
form.value.tabs_list[index].product_list.push({
id: get_math(),
src: 'carousel',
new_src: [],
href: '',
click_index = index;
url_value_dialog_visible.value = true;
};
// 打开弹出框
const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
item.forEach((item: any) => {
form.value.tabs_list[click_index].product_list.push({
id: get_math(),
new_url: [],
new_title: item.title,
link: item,
});
});
// emit('update:value', form);
};
</script>
<style lang="scss" scoped>

4
src/layout/components/main/default/shop-list.ts
View File

@ -5,7 +5,8 @@ interface DefaultProductList {
product_check: string;
goods_category_ids: string[];
goods_brand_ids: string[];
product_list: [];
product_show_list: string[];
product_list: string[];
is_price_solo: boolean;
number: number;
sort: string;
@ -45,6 +46,7 @@ const defaultProductList: DefaultProductList = {
content: {
product_style: '0',
product_check: '0',
product_show_list: [],
product_list: [],
goods_category_ids: [],
goods_brand_ids: [],

3
src/styles/lib.scss
View File

@ -311,5 +311,8 @@ $line: 5;
-webkit-line-clamp: #{$i};
line-clamp: #{$i}; // 添加标准属性以增加兼容性
-webkit-box-orient: vertical;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
}