装修相关

admin/src/components/image-contain/index.vue

@@ -1,5 +1,11 @@
 <template>
-    <el-image :style="styles" v-bind="props"> </el-image>
+    <el-image :style="styles" v-bind="props">
+        <template v-slot:error>
+            <div class="text-tx-secondary flex items-center justify-center bg-white h-full">
+                <icon name="el-icon-Picture" :size="30" />
+            </div>
+        </template>
+    </el-image>
 </template>
 
 <script lang="ts" setup>

admin/src/components/link/custom-link.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="custom-link mt-[60px]">
+        <div class="flex flex-wrap items-center">
+            自定义链接
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    :model-value="modelValue.path"
+                    placeholder="请输入链接地址"
+                    @input="handleInput"
+                />
+            </div>
+        </div>
+        <div class="form-tips">
+            请填写完整的带有“https://”或“http://”的链接地址，链接的域名必须在微信公众平台设置业务域名
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+
+defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: Link): void
+}>()
+
+const handleInput = (value: string) => {
+    emit('update:modelValue', {
+        path: value,
+        type: LinkTypeEnum.CUSTOM_LINK
+    })
+}
+</script>

admin/src/components/link/index.ts

@@ -0,0 +1,11 @@
+export enum LinkTypeEnum {
+    'SHOP_PAGES' = 'shop',
+    'CUSTOM_LINK' = 'custom'
+}
+
+export interface Link {
+    path: string
+    name?: string
+    type: string
+    params?: Record<string, any>
+}

admin/src/components/link/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="link flex">
+        <el-menu
+            :default-active="activeMenu"
+            class="w-[160px] min-h-[400px] link-menu"
+            @select="handleSelect"
+        >
+            <el-menu-item v-for="(item, index) in menus" :index="item.type" :key="index">
+                <span>{{ item.name }}</span>
+            </el-menu-item>
+        </el-menu>
+        <div class="flex-1 pl-4">
+            <shop-pages v-model="activeLink" v-if="LinkTypeEnum.SHOP_PAGES == activeMenu" />
+            <custom-link v-model="activeLink" v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+import ShopPages from './shop-pages.vue'
+import CustomLink from './custom-link.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object as PropType<Link>
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const activeLink = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+const menus = ref([
+    {
+        name: '商城页面',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        name: '自定义链接',
+        type: LinkTypeEnum.CUSTOM_LINK
+    }
+])
+const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES)
+
+const handleSelect = (index: string) => {
+    activeMenu.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.link-menu {
+    --el-menu-item-height: 40px;
+    :deep(.el-menu-item) {
+        border-color: transparent;
+        &.is-active {
+            border-right-width: 2px;
+            border-color: var(--el-color-primary);
+            background-color: var(--el-color-primary-light-9);
+        }
+    }
+}
+</style>

admin/src/components/link/picker.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="link-picker">
+        <popup width="700px" title="链接选择" @confirm="handleConfirm">
+            <template v-slot:trigger>
+                <div class="cursor-pointer">
+                    <slot>
+                        <el-input
+                            :model-value="modelValue?.name ?? modelValue?.path"
+                            placeholder="请选择链接"
+                            readonly
+                        >
+                            <template #suffix>
+                                <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
+                                <icon
+                                    v-else
+                                    name="el-icon-Close"
+                                    @click.stop="emit('update:modelValue', {})"
+                                />
+                            </template>
+                        </el-input>
+                    </slot>
+                </div>
+            </template>
+            <link-content v-model="activeLink" />
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Link } from '.'
+import LinkContent from './index.vue'
+const props = defineProps({
+    modelValue: {
+        type: Object
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+const activeLink = ref<Link>()
+const handleConfirm = () => {
+    emit('update:modelValue', activeLink.value)
+}
+watch(
+    () => props.modelValue,
+    (value) => {
+        activeLink.value = value as Link
+    },
+    {
+        immediate: true
+    }
+)
+</script>

admin/src/components/link/shop-pages.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="shop-pages">
+        <div class="link-list flex flex-wrap">
+            <div
+                class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer"
+                v-for="(item, index) in linkList"
+                :class="{ 'border-primary text-primary': modelValue.path == item.path }"
+                :key="index"
+                @click="handleSelect(item)"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+
+defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: Link): void
+}>()
+
+const linkList = ref([
+    {
+        path: '/pages/index/index',
+        name: '商城首页',
+        type: LinkTypeEnum.SHOP_PAGES
+    }
+])
+
+const handleSelect = (value: Link) => {
+    emit('update:modelValue', value)
+}
+</script>

admin/src/components/material/picker.vue

@@ -41,7 +41,8 @@
                         v-show="showUpload"
                         :class="{
                             'is-disabled': disabled,
-                            'is-one': limit == 1
+                            'is-one': limit == 1,
+                            [uploadClass]: true
                         }"
                     >
                         <slot name="upload">
@@ -123,6 +124,10 @@ export default defineComponent({
         hiddenUpload: {
             type: Boolean,
             default: false
+        },
+        uploadClass: {
+            type: String,
+            default: ''
         }
     },
 
@@ -269,8 +274,8 @@ export default defineComponent({
         }
     }
     .material-upload {
-        .upload-btn {
-            @apply box-border rounded border-br border-dashed border flex flex-col justify-center items-center;
+        :deep(.upload-btn) {
+            @apply text-tx-secondary box-border rounded border-br border-dashed border flex flex-col justify-center items-center;
         }
     }
 }