新增

2026-03-01 14:17:59 +08:00
parent 65aa12f146
commit a07e844c47
6071 changed files with 777651 additions and 0 deletions
@@ -0,0 +1,145 @@
+<template>
+    <div class="article-list">
+        <el-form ref="formRef" :model="queryParams" :inline="true">
+            <el-form-item class="w-[280px]" label="文章名称">
+                <el-input
+                    v-model="queryParams.name"
+                    placeholder="请输入"
+                    clearable
+                    @keyup.enter="resetPage"
+                >
+                </el-input>
+                <el-button type="primary" class="ml-4" :icon="Search" @click="resetPage" />
+            </el-form-item>
+        </el-form>
+
+        <!-- 表格 -->
+        <el-table
+            size="large"
+            v-loading="pager.loading"
+            :data="pager.lists"
+            height="432px"
+            @row-click="handleSelectItem"
+        >
+            <el-table-column label="选择" min-width="50">
+                <template #default="{ row }">
+                    <div class="flex row-center">
+                        <el-checkbox
+                            :model-value="getSelectItem(row.id)"
+                            size="large"
+                            @change="handleSelectItem(row)"
+                        ></el-checkbox>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="文章名称" min-width="180">
+                <template #default="{ row }">
+                    <div class="flex items-center">
+                        <el-image
+                            fit="cover"
+                            :src="row.image"
+                            class="flex-none w-[58px] h-[58px]"
+                        />
+                        <div class="ml-4 overflow-hidden">
+                            <el-tooltip effect="dark" :content="row.title" placement="top">
+                                <div class="text-base line-clamp-2">
+                                    {{ row.title }}
+                                </div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="create_time" min-width="140" />
+        </el-table>
+
+        <div class="flex justify-end mt-4">
+            <pagination v-model="pager" @change="getLists" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue'
+import type { PropType } from 'vue'
+
+import { articleLists } from '@/api/article'
+import { usePaging } from '@/hooks/usePaging'
+
+import { LinkTypeEnum } from '.'
+
+//TODO TODO
+const props = defineProps({
+    modelValue: {
+        type: Object as PropType<any>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const selectData = ref<any>({
+    path: '/pages/news_detail/news_detail',
+    name: '',
+    query: {},
+    type: LinkTypeEnum.ARTICLE_LIST
+})
+
+const queryParams = reactive<any>({
+    name: '',
+    is_show: 1
+})
+
+const { pager, getLists, resetPage } = usePaging({
+    fetchFun: articleLists,
+    params: queryParams
+})
+
+const getSelectItem = (id: number) => {
+    return id == Number(selectData.value.id)
+}
+/**
+ * @description 选择
+ */
+const handleSelectItem = (event: any) => {
+    selectData.value = {
+        id: event.id,
+        name: event.title,
+        path: '/pages/news_detail/news_detail',
+        query: {
+            id: event.id
+        },
+        type: LinkTypeEnum.ARTICLE_LIST
+    }
+
+    emit('update:modelValue', selectData.value)
+}
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value.type != LinkTypeEnum.ARTICLE_LIST) {
+            return (selectData.value = {
+                id: '',
+                name: '',
+                path: '/pages/news_detail/news_detail',
+                type: LinkTypeEnum.SHOP_PAGES
+            })
+        }
+        selectData.value = value
+    },
+    {
+        immediate: true
+    }
+)
+
+getLists()
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input-group__append) {
+    .el-button {
+        margin: 0 0;
+    }
+}
+</style>
@@ -0,0 +1,45 @@
+<template>
+    <div class="custom-link h-[530px]">
+        <div class="text-xl font-medium">自定义链接</div>
+        <div class="flex flex-wrap items-center mt-4">
+            <div class="w-[86px] text-right">自定义链接</div>
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    class="max-w-[320px]"
+                    :model-value="modelValue.query?.url"
+                    placeholder="请输入链接地址"
+                    @input="handleInput"
+                />
+            </div>
+        </div>
+        <div class="form-tips ml-[101px] max-w-[320px]">
+            请填写完整的带有“https://”或“http://”的链接地址，链接的域名必须在微信公众平台设置业务域名
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import { type Link, LinkTypeEnum } 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: '/pages/webview/webview',
+        query: {
+            url: value
+        },
+        type: LinkTypeEnum.CUSTOM_LINK
+    })
+}
+</script>
@@ -0,0 +1,19 @@
+export enum MenuTypeEnum {
+    'SHOP_PAGES' = 'shop',
+    'APPTOOL' = 'application_tool',
+    'OTHER_LINK' = 'other_link'
+}
+
+export enum LinkTypeEnum {
+    'SHOP_PAGES' = 'shop',
+    'ARTICLE_LIST' = 'article',
+    'CUSTOM_LINK' = 'custom',
+    'MINI_PROGRAM' = 'mini_program'
+}
+
+export interface Link {
+    path: string
+    name?: string
+    type: string
+    query?: Record<string, any>
+}
@@ -0,0 +1,168 @@
+<template>
+    <div class="link flex">
+        <el-menu
+            :default-active="activeMenu"
+            class="flex-none w-[180px] min-h-[350px] link-menu"
+            :default-openeds="[
+                MenuTypeEnum.SHOP_PAGES,
+                MenuTypeEnum.APPTOOL,
+                MenuTypeEnum.OTHER_LINK
+            ]"
+            @select="handleSelect"
+        >
+            <el-sub-menu v-for="(item, index) in menus" :index="item.type" :key="index">
+                <template #title>
+                    <span>{{ item.name }}</span>
+                </template>
+                <el-menu-item
+                    v-for="(sitem, sindex) in item.children"
+                    :index="sitem.type"
+                    :key="sindex"
+                    style="min-width: 160px"
+                >
+                    <span>{{ sitem.name }}</span>
+                </el-menu-item>
+            </el-sub-menu>
+        </el-menu>
+        <div class="flex-1 ml-4 link-content">
+            <shop-pages v-model="activeLink" v-if="LinkTypeEnum.SHOP_PAGES == activeMenu" />
+            <article-list v-model="activeLink" v-if="LinkTypeEnum.ARTICLE_LIST == activeMenu" />
+            <custom-link v-model="activeLink" v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu" />
+            <mini-program v-model="activeLink" v-if="LinkTypeEnum.MINI_PROGRAM == activeMenu" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import { type Link, LinkTypeEnum, MenuTypeEnum } from '.'
+import ArticleList from './article-list.vue'
+import CustomLink from './custom-link.vue'
+import MiniProgram from './mini-program.vue'
+import ShopPages from './shop-pages.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        required: true
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const menus = ref([
+    {
+        name: '商城页面',
+        type: MenuTypeEnum.SHOP_PAGES,
+        children: [
+            {
+                name: '基础页面',
+                type: LinkTypeEnum.SHOP_PAGES,
+                link: {}
+            }
+        ]
+    },
+    {
+        name: '应用工具',
+        type: MenuTypeEnum.APPTOOL,
+        children: [
+            {
+                name: '文章资讯',
+                type: LinkTypeEnum.ARTICLE_LIST,
+                link: {}
+            }
+        ]
+    },
+    {
+        name: '其他',
+        type: MenuTypeEnum.OTHER_LINK,
+        children: [
+            {
+                name: '自定义链接',
+                type: LinkTypeEnum.CUSTOM_LINK,
+                link: {}
+            },
+            {
+                name: '跳转小程序',
+                type: LinkTypeEnum.MINI_PROGRAM,
+                link: {}
+            }
+        ]
+    }
+])
+
+const activeLink = computed({
+    get() {
+        let linkStoreage: any = {}
+        menus.value.forEach((item) => {
+            const res = item.children.find((citem) => citem.type == activeMenu.value)
+            if (res) linkStoreage = res
+        })
+        return linkStoreage.link
+    },
+    set(value) {
+        menus.value.forEach((item) => {
+            item.children.forEach((citem) => {
+                if (citem.type == activeMenu.value) {
+                    citem.link = value
+                }
+            })
+        })
+    }
+})
+
+const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES)
+
+const handleSelect = (index: string) => {
+    activeMenu.value = index
+}
+
+watch(
+    activeLink,
+    (value) => {
+        if (!value.type) return
+        emit('update:modelValue', value)
+    },
+    { deep: true }
+)
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        activeMenu.value = value.type
+        activeLink.value = value
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.link {
+    .link-menu {
+        --el-menu-item-height: 40px;
+        border-radius: 8px;
+        border: 1px solid var(--el-border-color);
+
+        :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);
+            }
+        }
+    }
+
+    .link-content {
+        padding: 20px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        border: 1px solid var(--el-border-color);
+    }
+}
+</style>
@@ -0,0 +1,116 @@
+<template>
+    <div class="mini-program h-[530px]">
+        <div class="text-xl font-medium">跳转小程序</div>
+        <div class="flex flex-wrap items-center mt-4">
+            <div class="w-[86px] text-right">小程序APPID</div>
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    class="max-w-[320px]"
+                    :model-value="modelValue.query?.appId"
+                    placeholder="请输入小程序appId"
+                    @input="(value) => handleInput('appId', value)"
+                />
+            </div>
+        </div>
+        <div class="flex flex-wrap items-center mt-4">
+            <div class="w-[86px] text-right">小程序路径</div>
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    class="max-w-[320px]"
+                    :model-value="modelValue.query?.path"
+                    placeholder="请输入小程序路径链接地址"
+                    @input="(value) => handleInput('path', value)"
+                />
+            </div>
+        </div>
+        <div class="flex flex-wrap items-center mt-4">
+            <div class="w-[86px] text-right">传递参数</div>
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    class="max-w-[320px]"
+                    :model-value="modelValue.query?.query"
+                    placeholder="请输入小程序跳转参数(选填)"
+                    @input="(value) => handleInput('query', value)"
+                />
+            </div>
+        </div>
+        <div class="form-tips ml-[100px] max-w-[320px]">
+            <div>示例：id=2&ustm=jiny&name=234</div>
+            <div class="text-error">
+                注意：不允许输入中文、特殊字符等。如果出现对不起，当前页面无法访问，大概率是跳转参数的问题！！
+            </div>
+        </div>
+        <div class="flex flex-wrap items-center mt-4">
+            <div class="w-[86px] text-right">小程序版本</div>
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-radio-group
+                    :model-value="modelValue.query?.env_version"
+                    @change="(value) => handleInput('env_version', value as string)"
+                >
+                    <el-radio value="release">正式版</el-radio>
+                    <el-radio value="trial">体验版</el-radio>
+                    <el-radio value="develop">开发版</el-radio>
+                </el-radio-group>
+            </div>
+        </div>
+
+        <div>
+            <div class="form-tips ml-[100px] max-w-[320px]">
+                <div class="mt-4">
+                    1.
+                    小程序APPID和小程序路径链接地址，小程序路径链接地址请填写小程序的页面路径，如：pages/index/index
+                </div>
+                <div class="mt-2">
+                    <span>2. 如果是H5(浏览器)中需要跳转到小程序，则需要以下配置---></span>
+                    <a
+                        href="https://mp.weixin.qq.com/"
+                        class="text-primary"
+                        target="_blank"
+                        rel="nofollow"
+                    >
+                        小程序管理后台 -&gt; 设置 -&gt; 隐私与安全 -&gt; 明文 scheme 拉起此小程序
+                        （点击跳转去配置）
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import { type Link, LinkTypeEnum } from '.'
+
+const props = defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: Link): void
+}>()
+
+const handleInput = (key: 'appId' | 'path' | 'env_version' | 'query', value: string) => {
+    emit('update:modelValue', {
+        ...props.modelValue,
+        name: '小程序跳转',
+        query: {
+            ...props.modelValue.query,
+            [key]: value
+        },
+        type: LinkTypeEnum.MINI_PROGRAM
+    })
+}
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (!value.query?.env_version) {
+            handleInput('env_version', 'release')
+        }
+    },
+    { immediate: true }
+)
+</script>
@@ -0,0 +1,88 @@
+<template>
+    <div class="link-picker flex-1" @click="!disabled && popupRef?.open()">
+        <el-input :model-value="getLink" placeholder="请选择链接" readonly :disabled="disabled">
+            <template #suffix>
+                <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
+                <icon
+                    v-else
+                    name="el-icon-Close"
+                    @click.stop="!disabled && emit('update:modelValue', {})"
+                />
+            </template>
+        </el-input>
+        <popup ref="popupRef" width="1050px" title="链接选择" @confirm="handleConfirm">
+            <link-content v-model="activeLink" />
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import Popup from '@/components/popup/index.vue'
+
+import { type Link, LinkTypeEnum } from '.'
+import LinkContent from './index.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES })
+const handleConfirm = () => {
+    emit('update:modelValue', activeLink.value)
+}
+
+const getLink = computed(() => {
+    switch (props.modelValue?.type) {
+        case LinkTypeEnum.SHOP_PAGES:
+            return props.modelValue.name
+        case LinkTypeEnum.ARTICLE_LIST:
+            return props.modelValue.name
+        case LinkTypeEnum.CUSTOM_LINK:
+            return props.modelValue.query?.url
+        default:
+            return props.modelValue?.name
+    }
+})
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value?.type) {
+            activeLink.value = value as Link
+        }
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style scoped lang="scss">
+.link-picker {
+    :deep(.el-input) {
+        &.is-disabled {
+            .el-input__inner {
+                cursor: not-allowed;
+            }
+            .el-input__suffix {
+                cursor: not-allowed;
+            }
+        }
+        .el-input__inner {
+            cursor: pointer;
+        }
+        .el-input__suffix {
+            cursor: pointer;
+        }
+    }
+}
+</style>
@@ -0,0 +1,110 @@
+<template>
+    <div class="shop-pages h-[530px]">
+        <div class="link-list flex flex-wrap">
+            <div
+                class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer mr-[10px] mb-[10px]"
+                v-for="(item, index) in linkList"
+                :class="{
+                    'border-primary text-primary':
+                        modelValue.path == item.path && modelValue.name == item.name
+                }"
+                :key="index"
+                @click="handleSelect(item)"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import { type Link, LinkTypeEnum } 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,
+        canTab: true
+    },
+    {
+        path: '/pages/news/news',
+        name: '文章资讯',
+        type: LinkTypeEnum.SHOP_PAGES,
+        canTab: true
+    },
+    {
+        path: '/pages/user/user',
+        name: '个人中心',
+        type: LinkTypeEnum.SHOP_PAGES,
+        canTab: true
+    },
+    {
+        path: '/pages/collection/collection',
+        name: '我的收藏',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/customer_service/customer_service',
+        name: '联系客服',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/user_set/user_set',
+        name: '个人设置',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/as_us/as_us',
+        name: '关于我们',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/user_data/user_data',
+        name: '个人资料',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/agreement/agreement',
+        name: '隐私政策',
+        query: {
+            type: 'privacy'
+        },
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/agreement/agreement',
+        name: '服务协议',
+        query: {
+            type: 'service'
+        },
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/search/search',
+        name: '搜索',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/packages/pages/user_wallet/user_wallet',
+        name: '我的钱包',
+        type: LinkTypeEnum.SHOP_PAGES
+    }
+])
+
+const handleSelect = (value: Link) => {
+    emit('update:modelValue', value)
+}
+</script>