Skip to content

F
factory_front
Commit 42894f5e by qinjianhui
Options

fix: 样式修改

parent ef957654
Showing with 105 additions and 134 deletions
components.d.ts
...@@ -21,7 +21,6 @@ declare module 'vue' { ...@@ -21,7 +21,6 @@ declare module 'vue' {
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
...@@ -33,7 +32,6 @@ declare module 'vue' { ...@@ -33,7 +32,6 @@ declare module 'vue' {
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
......
src/components/CommonCard.vue
...@@ -76,36 +76,40 @@ import type { TypesettingListData } from '../types/api/typesetting' ...@@ -76,36 +76,40 @@ import type { TypesettingListData } from '../types/api/typesetting'
// 定义通用字段接口，用于处理动态属性 // 定义通用字段接口，用于处理动态属性
interface CommonFields { interface CommonFields {
[key: string]: unknown; [key: string]: unknown
variantImage?: string; variantImage?: string
mainImage?: string; mainImage?: string
sku?: string; sku?: string
productName?: string; productName?: string
} }
// 定义图片列表项接口 // 定义图片列表项接口
interface ImageListItem { interface ImageListItem {
[key: string]: unknown; [key: string]: unknown
imagePath?: string; imagePath?: string
} }
// 创建一个工具类型，用于使用字符串索引访问对象属性 // 创建一个工具类型，用于使用字符串索引访问对象属性
type IndexableObject = Record<string, unknown>; type IndexableObject = Record<string, unknown>
// 扩展现有类型以确保它们有通用字段 // 扩展现有类型以确保它们有通用字段
type CardItem = PodProductList | CardOrderData | TypesettingListData | CommonFields; type CardItem =
| PodProductList
| CardOrderData
| TypesettingListData
| CommonFields
// 定义 props 类型 // 定义 props 类型
interface Props { interface Props {
cardItem: CardItem; cardItem: CardItem
active?: boolean; active?: boolean
showSelectIcon?: boolean; showSelectIcon?: boolean
showSku?: boolean; showSku?: boolean
showProductInfo?: boolean; showProductInfo?: boolean
showImageList?: boolean; showImageList?: boolean
imageField?: string; imageField?: string
imageListField?: string; imageListField?: string
imagePathField?: string; imagePathField?: string
} }
// 定义默认值 // 定义默认值
...@@ -122,45 +126,45 @@ const props = withDefaults(defineProps<Props>(), { ...@@ -122,45 +126,45 @@ const props = withDefaults(defineProps<Props>(), {
// 获取主图片源 // 获取主图片源
const mainImageSrc = computed<string>(() => { const mainImageSrc = computed<string>(() => {
const item = props.cardItem as IndexableObject; const item = props.cardItem as IndexableObject
// 使用索引访问避免联合类型的属性访问问题 // 使用索引访问避免联合类型的属性访问问题
if ( if (
props.imageField === 'variantImage' && props.imageField === 'variantImage' &&
typeof item[props.imageField] === 'string' typeof item[props.imageField] === 'string'
) { ) {
return item[props.imageField] as string; return item[props.imageField] as string
} }
if ( if (
props.imageField === 'mainImage' && props.imageField === 'mainImage' &&
typeof item[props.imageField] === 'string' typeof item[props.imageField] === 'string'
) { ) {
return item[props.imageField] as string; return item[props.imageField] as string
} }
// 默认返回空字符串 // 默认返回空字符串
return ''; return ''
}) })
// 获取图片列表 // 获取图片列表
const imageList = computed<ImageListItem[]>(() => { const imageList = computed<ImageListItem[]>(() => {
const item = props.cardItem as IndexableObject; const item = props.cardItem as IndexableObject
const list = item[props.imageListField]; const list = item[props.imageListField]
return Array.isArray(list) ? list as ImageListItem[] : []; return Array.isArray(list) ? (list as ImageListItem[]) : []
}) })
// 判断是否有图片列表 // 判断是否有图片列表
const hasImageList = computed<boolean>(() => { const hasImageList = computed<boolean>(() => {
return imageList.value.length > 0; return imageList.value.length > 0
}) })
// 获取图片列表项的图片路径 // 获取图片列表项的图片路径
function getItemImagePath(item: IndexableObject): string { function getItemImagePath(item: IndexableObject): string {
return (item[props.imagePathField] as string) || ''; return (item[props.imagePathField] as string) || ''
} }
const copy = (text: string) => { const copy = (text: string) => {
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text)
ElMessage.success('复制成功'); ElMessage.success('复制成功')
} }
</script> </script>
...@@ -174,11 +178,16 @@ const copy = (text: string) => { ...@@ -174,11 +178,16 @@ const copy = (text: string) => {
.commodity-card-image { .commodity-card-image {
position: relative; position: relative;
border: 1px solid #eee;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.img_top_left { .img_top_left {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
display: flex;
align-items: center;
gap: 4px;
} }
.img_top_right { .img_top_right {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment