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

1.辅助空白背景色默认改为透明色 

2.文本标题新增居中配置
3.image-empty组件默认加圆角
sws 2024-09-03
v1.0.0
sws 2024-09-03 16:58:55 +08:00
parent d6cda817e9
commit 76d28dd394
16 changed files with 238 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/image-empty/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" fit="cover" @load="on_load">
<el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h radius-sm" fit="cover" @load="on_load">
<template #error>
<div class="image-slot" :style="errorStyle">
<img :src="error_image" :style="errorImgStyle" />

2
src/components/common/url-value/link-articles.vue
View File

@ -23,7 +23,7 @@
<el-table-column prop="cover" label="文章">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.cover" class="img"></image-empty>
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>

2
src/components/common/url-value/link-brand.vue
View File

@ -23,7 +23,7 @@
<el-table-column prop="images" label="品牌">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.logo" class="img"></image-empty>
<image-empty v-if="scope.row.logo" v-model="scope.row.logo" class="img"></image-empty>
<div class="flex-1">{{ scope.row.name }}</div>
</div>
</template>

151
src/components/common/url-value/link-coupon.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<!-- 优惠券 -->
<div class="container">
<div class="flex-row jc-e gap-20 mb-20">
<el-select v-model="category_ids" class="search-w" placeholder="请选择" clearable @change="handle_search">
<el-option v-for="item in coupon_category_list" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
<template #suffix>
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
</template>
</el-input>
</div>
<div class="content">
<el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click" @select="handle_select" @select-all="handle_select">
<el-table-column v-if="multiple" type="selection" width="60" />
<el-table-column v-else label="#" width="60" type="">
<template #default="scope">
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" type="" />
<el-table-column prop="cover" label="名称">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="cover" label="类型">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="cover" label="优惠信息">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<template #empty>
<no-data></no-data>
</template>
</el-table>
<div class="mt-10 flex-row jc-e">
<el-pagination :current-page="page" background :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { commonStore } from '@/store';
const common_store = commonStore();
const props = defineProps({
// 重置
reset: {
type: Boolean,
default: () => false,
},
multiple: {
type: Boolean,
default: () => false,
},
});
watch(
() => props.reset,
(val) => {
if (val) {
init();
}
}
);
onMounted(() => {
init();
});
const modelValue = defineModel({ type: Object, default: {} });
const tableData = ref<pageLinkList[]>([]);
const search_value = ref('');
const init = () => {
template_selection.value = '';
category_ids.value = '';
search_value.value = '';
coupon_category_list.value = common_store.common.plugins.coupon.coupon.coupon_type_list;
get_list(1);
};
const handle_search = () => {
get_list(1);
};
const category_ids = ref('');
interface articleCategory {
id: string;
name: string;
url: string;
}
const coupon_category_list = ref<articleCategory[]>([]);
const template_selection = ref('');
//#region 分页 -----------------------------------------------start
// 当前页
const page = ref(1);
// 每页数量
const page_size = ref(30);
// 总数量
const data_total = ref(0);
// 查询文件
const get_list = (new_page: number) => {
let new_data = {
page: new_page,
keywords: search_value.value,
category_ids: category_ids.value,
page_size: page_size.value,
};
UrlValueAPI.getArticleList(new_data).then((res: any) => {
tableData.value = res.data.data_list;
data_total.value = res.data.data_total;
page.value = res.data.page;
});
};
//#region 分页 -----------------------------------------------end
const row_click = (row: any) => {
if (!props.multiple) {
const new_table_data = JSON.parse(JSON.stringify(tableData.value));
template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
modelValue.value = [row];
}
};
const handle_select = (selection: any) => {
modelValue.value = selection;
};
</script>
<style lang="scss" scoped>
.container {
.search-w {
width: 22.5rem;
}
.content {
:deep(.el-table__inner-wrapper:before) {
background-color: transparent;
}
.img {
width: 3.6rem;
}
}
}
</style>

2
src/components/common/url-value/link-goods-category.vue
View File

@ -19,7 +19,7 @@
<el-table-column prop="name" label="分类名称"></el-table-column>
<el-table-column prop="icon" label="分类图标">
<template #default="scope">
<image-empty v-model="scope.row.icon" class="img"></image-empty>
<image-empty v-if="scope.row.icon" v-model="scope.row.icon" class="img"></image-empty>
</template>
</el-table-column>
<template #empty>

2
src/components/common/url-value/link-goods.vue
View File

@ -24,7 +24,7 @@
<el-table-column prop="images" label="商品">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.images" class="img"></image-empty>
<image-empty v-if="scope.row.images" v-model="scope.row.images" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>

4
src/components/common/url-value/link-table.vue
View File

@ -17,10 +17,10 @@
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="80" type="" />
<el-table-column prop="logo" label="logo" width="100" type="">
<el-table-column prop="logo" label="封面" width="100" type="">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-model="scope.row.logo" class="img"></image-empty>
<image-empty v-if="scope.row.logo" v-model="scope.row.logo" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>

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

@ -46,6 +46,10 @@
<template v-else-if="link_select == 'custom-url'">
<link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></link-custom>
</template>
<!-- 优惠券链接 -->
<template v-else-if="link_select == 'coupon'">
<link-coupon v-model="link_value" :multiple="multiple" :reset="reset_compontent"></link-coupon>
</template>
</div>
</div>
<template #footer>
@ -131,6 +135,8 @@ const dialog_title = computed(() => {
name = '品牌';
} else if (props.type[0] == 'plugins') {
name = '插件';
} else if (props.type[0] == 'coupon') {
name = '优惠券';
}
return name + '链接';
} else {

2
src/components/model-auxiliary-blank/index.vue
View File

@ -22,7 +22,7 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const style = computed(() => `height: ${form.value.height}px;background: ${new_style.value.line_color || '#fff'};`);
const style = computed(() => `height: ${form.value.height}px;background: ${new_style.value.line_color || 'transparent'};`);
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
<style lang="scss" scoped></style>

18
src/components/model-coupon/index.vue
View File

@ -138,7 +138,8 @@ const props = defineProps({
},
});
const list = 10;
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
const style_container = ref('');
watch(
props.value,
@ -149,6 +150,21 @@ watch(
},
{ immediate: true, deep: true }
);
// watchEffect(() => {
// if (form.value.data_type == '0') {
// if (!isEmpty(form.value.data_list)) {
// list.value = cloneDeep(form.value.data_list).map((item: any) => ({
// ...item.data,
// title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
// new_cover: item.new_cover,
// }));
// } else {
// list.value = Array(4).fill(default_list);
// }
// } else {
// get_products();
// }
// });
const theme = computed(() => props.value?.content?.theme);
const theme_style = computed(() => {
const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);

2
src/components/model-coupon/model-coupon-content.vue
View File

@ -43,7 +43,7 @@
</card-container>
</el-form>
</div>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['coupon']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</template>
<script setup lang="ts">
import { online_url } from '@/utils';

26
src/components/model-text-title/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div :style="style_container">
<div class="re flex">
<div class="z-i pr-15" :style="title_style">{{ form.title || '标题'}}</div>
<div class="re flex" :class="title_center">
<div class="z-i pr-15" :style="title_style">{{ form.title || '标题' }}</div>
<div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show">
<div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
@ -37,8 +37,8 @@ const { form, new_style } = toRefs(state);
const keyword_list = computed(() => {
// 深拷贝一下，确保不会出现问题
const arry_list = cloneDeep(form.value.keyword_list);
return arry_list.filter((item: { is_show: boolean; }) => item.is_show);
})
return arry_list.filter((item: { is_show: boolean }) => item.is_show);
});
// 标题的设置
const title_style = computed(() => {
let common_styles = '';
@ -47,18 +47,22 @@ const title_style = computed(() => {
} else if (new_style.value.title_weight == '500') {
common_styles += `font-weight: 500`;
}
return `color:${ new_style.value.title_color }; font-size: ${ new_style.value.title_size }px; ${ common_styles }`;
})
return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
});
// 标题是否居中
const title_center = computed(() => {
return form.value.is_title_center ? 'jc-c' : '';
});
// 关键字设置
const keyword_style = computed(() => {
return `color:${ new_style.value.keyword_color }; font-size: ${ new_style.value.keyword_size }px;`;
})
return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
});
// 右边按钮设置
const right_style = computed(() => {
return `color:${ new_style.value.right_color }; font-size: ${ new_style.value.right_size }px;`;
})
return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
});
// 通用样式区
const style_container = computed(() => common_styles_computer(new_style.value.common_style))
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
<style lang="scss" scoped>
.right-0.abs {

24
src/components/model-text-title/model-text-title-content.vue
View File

@ -9,12 +9,18 @@
<el-form-item label="标题链接">
<url-value v-model="form.title_link"></url-value>
</el-form-item>
<el-form-item label="是否居中">
<el-radio-group v-model="form.is_title_center">
<el-radio :value="0">默认</el-radio>
<el-radio :value="1">居中</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">关键字设置</div>
<el-form-item label="关键字">
<el-radio-group v-model="form.keyword_show" class="ml-4">
<el-radio-group v-model="form.keyword_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
</el-radio-group>
@ -42,7 +48,7 @@
<card-container>
<div class="mb-12">更多设置</div>
<el-form-item label="右侧按钮">
<el-radio-group v-model="form.right_show" class="ml-4">
<el-radio-group v-model="form.right_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
</el-radio-group>
@ -60,7 +66,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from "@/utils";
import { get_math } from '@/utils';
const props = defineProps({
value: {
type: Object,
@ -69,7 +75,7 @@ const props = defineProps({
});
const state = reactive({
form: props.value
form: props.value,
});
const { form } = toRefs(state);
const add = () => {
@ -77,17 +83,17 @@ const add = () => {
id: get_math(),
notice_title: '',
notice_link: '',
is_show: true
})
}
is_show: true,
});
};
const remove = (index: number) => {
form.value.keyword_list.splice(index, 1);
}
};
// 拖拽更新之后，更新数据
const on_sort = (new_list: nav_group[]) => {
form.value.keyword_list = new_list;
}
};
</script>
<style lang="scss" scoped>
.card.mb-8 {

1
src/store/modules/common.ts
View File

@ -11,6 +11,7 @@ export const commonStore = defineStore('common', () => {
goods_category: [] as any[], //---- 商品分类
module_list: [] as any[], //---- 模块列表
page_link_list: [] as any[], //---- 页面链接
plugins: {} as any, //---- 插件
});
// 存储链接数据
const set_common = (data: any) => {

2
src/views/layout/components/main/default/auxiliary-blank.ts
View File

@ -13,7 +13,7 @@ const defaultSearch: defaultSearch = {
height: 50
},
style: {
line_color: 'rgba(204, 204, 204, 1)',
line_color: '',
common_style: defaultCommon,
},
};

44
src/views/layout/components/main/default/text-title.ts
View File

@ -1,5 +1,5 @@
import { get_math, padding_computer } from "@/utils";
import defaultCommon from "./index";
import { get_math, padding_computer } from '@/utils';
import defaultCommon from './index';
interface carousel_list {
id: string;
@ -9,22 +9,23 @@ interface carousel_list {
}
interface defaultSearch {
content: {
title: string,
title_link: object,
keyword_show: true,
keyword_list: carousel_list[]
right_show: true,
right_title: string,
right_link: object,
title: string;
title_link: object;
is_title_center: number;
keyword_show: true;
keyword_list: carousel_list[];
right_show: true;
right_title: string;
right_link: object;
};
style: {
title_color: string,
title_size: number,
title_weight: string,
keyword_color: string,
keyword_size: number,
right_color: string,
right_size: number,
title_color: string;
title_size: number;
title_weight: string;
keyword_color: string;
keyword_size: number;
right_color: string;
right_size: number;
common_style: object;
};
}
@ -32,6 +33,7 @@ const defaultSearch: defaultSearch = {
content: {
title: '',
title_link: {},
is_title_center: 0,
keyword_show: true,
right_show: true,
right_title: '更多',
@ -41,9 +43,9 @@ const defaultSearch: defaultSearch = {
id: get_math(),
title: '',
link: {},
is_show: true
}
]
is_show: true,
},
],
},
style: {
title_color: '#000',
@ -52,7 +54,7 @@ const defaultSearch: defaultSearch = {
keyword_color: '#000',
keyword_size: 12,
right_color: '#999',
right_size: 12,
right_size: 12,
common_style: {
...defaultCommon,
color_list: [{ color: '#fff', color_percentage: undefined }],
@ -61,7 +63,7 @@ const defaultSearch: defaultSearch = {
padding_bottom: 15,
padding_left: 15,
padding_right: 15,
}
},
},
};