后台pc相关设置

admin/src/api/channel/wx_op.ts

@@ -2,10 +2,10 @@ import request from '@/utils/request'
 
 // 微信开发平台配置保存
 export function setWxDevConfig(params: any) {
-    return request.post({ url: '/channel/wx/save', params })
+    return request.post({ url: '/api/channel/op/save', params })
 }
 
 // 微信开发平台配置详情
 export function getWxDevConfig() {
-    return request.get({ url: '/channel/wx/detail' })
+    return request.get({ url: '/channel/op/detail' })
 }

admin/src/main.ts

@@ -6,5 +6,6 @@ import './styles/index.scss'
 import 'virtual:svg-icons-register'
 
 const app = createApp(App)
+console.log(app)
 app.use(install)
 app.mount('#app')

admin/src/views/channel/wx_op.vue

@@ -3,14 +3,14 @@
         <el-card class="!border-none" shadow="never">
             <el-alert
                 type="warning"
-                title="温馨提示：填写微信开放平台开发配置，请前往微信开放平台创建应用并完成认证；APP应用配置主要用于APP微信登录和微信支付"
+                title="温馨提示：填写微信开放平台开发配置，请前往微信开放平台创建应用并完成认证；网站应用配置主要用于网站微信登录和微信支付"
                 :closable="false"
                 show-icon
             />
         </el-card>
         <el-form ref="formRef" :model="formData" label-width="160px">
             <el-card class="!border-none mt-4" shadow="never">
-                <div class="font-medium mb-7">APP应用</div>
+                <div class="font-medium mb-7">网站应用</div>
                 <el-form-item label="AppID" prop="appId">
                     <div class="w-80">
                         <el-input v-model="formData.appId" placeholder="请输入AppID" />
@@ -23,20 +23,15 @@
                         </div>
                     </div>
                 </el-form-item>
-                <el-form-item>
-                    <div class="form-tips">
-                        小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret
-                    </div>
-                </el-form-item>
             </el-card>
         </el-form>
-        <footer-btns v-perms="['channel:wx:save']">
+        <footer-btns v-perms="['channel:op:save']">
             <el-button type="primary" @click="handelSave">保存</el-button>
         </footer-btns>
     </div>
 </template>
 <script lang="ts" setup name="wxDevConfig">
-import { getWxDevConfig, setWxDevConfig } from '@/api/channel/wx_dev'
+import { getWxDevConfig, setWxDevConfig } from '@/api/channel/wx_op'
 import feedback from '@/utils/feedback'
 
 const formData = reactive({

admin/src/views/decoration/component/pages/preview-pc.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="pages-preview">
+        <div
+            v-for="(widget, index) in pageData"
+            :key="widget.id"
+            class="relative"
+            :class="{
+                'cursor-pointer': !widget?.disabled
+            }"
+            @click="handleClick(widget, index)"
+        >
+            <div
+                class="absolute w-full h-full z-[100] border-dashed"
+                :class="{
+                    select: index == modelValue,
+                    'border-[#dcdfe6] border-2': !widget?.disabled
+                }"
+                :style="widget.styles"
+            ></div>
+            <slot>
+                <component
+                    :is="widgets[widget?.name]?.content"
+                    :content="widget.content"
+                    :styles="widget.styles"
+                    :key="widget.id"
+                />
+            </slot>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import widgets from '../widgets'
+import type { PropType } from 'vue'
+
+defineProps({
+    pageData: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    modelValue: {
+        type: Number,
+        default: 0
+    }
+})
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: number): void
+}>()
+
+const handleClick = (widget: any, index: number) => {
+    if (widget.disabled) return
+    emit('update:modelValue', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.pages-preview {
+    width: 460px;
+    height: 360px;
+    background: url(../../image/pc_index.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .select {
+        @apply border-primary border-solid;
+    }
+}
+</style>

admin/src/views/decoration/component/widgets/banner/attr.vue

@@ -33,7 +33,15 @@
                                             />
                                         </el-form-item>
                                         <el-form-item class="mt-[18px]" label="图片链接">
-                                            <link-picker v-model="item.link" />
+                                            <link-picker
+                                                v-if="type == 'mobile'"
+                                                v-model="item.link"
+                                            />
+                                            <el-input
+                                                v-if="type == 'pc'"
+                                                placeholder="请输入链接"
+                                                v-model="item.link.path"
+                                            />
                                         </el-form-item>
                                     </div>
                                 </div>
@@ -63,6 +71,10 @@ const props = defineProps({
     styles: {
         type: Object as PropType<OptionsType['styles']>,
         default: () => ({})
+    },
+    type: {
+        type: String as PropType<'mobile' | 'pc'>,
+        default: 'mobile'
     }
 })
 

admin/src/views/decoration/component/widgets/banner/content.vue

@@ -1,7 +1,12 @@
 <template>
-    <div class="banner">
-        <div class="banner-image">
-            <decoration-img width="100%" height="170px" :src="getImage" fit="contain" />
+    <div class="banner" :style="styles">
+        <div class="banner-image w-full h-full">
+            <decoration-img
+                width="100%"
+                :height="styles.height || height"
+                :src="getImage"
+                fit="contain"
+            />
         </div>
     </div>
 </template>
@@ -18,6 +23,10 @@ const props = defineProps({
     styles: {
         type: Object as PropType<OptionsType['styles']>,
         default: () => ({})
+    },
+    height: {
+        type: String,
+        default: '170px'
     }
 })
 

admin/src/views/decoration/pc.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="decoration-pages min-w-[1100px]">
+        <el-card shadow="never" class="!border-none flex-1 flex" :body-style="{ flex: 1 }">
+            <div class="flex h-full items-start">
+                <Menu v-model="activeMenu" :menus="menus" />
+                <preview-pc class="mx-4" v-model="selectWidgetIndex" :pageData="getPageData" />
+                <attr-setting class="flex-1" :widget="getSelectWidget" type="pc" />
+            </div>
+        </el-card>
+        <footer-btns class="mt-4" :fixed="false" v-perms="['decorate:pages:save']">
+            <el-button type="primary" @click="setData">保存</el-button>
+        </footer-btns>
+    </div>
+</template>
+<script lang="ts" setup name="decorationPc">
+import Menu from './component/pages/menu.vue'
+import PreviewPc from './component/pages/preview-pc.vue'
+import AttrSetting from './component/pages/attr-setting.vue'
+import widgets from './component/widgets'
+import { getDecoratePages, setDecoratePages } from '@/api/decoration'
+import { getNonDuplicateID } from '@/utils/util'
+enum pagesTypeEnum {
+    HOME = '4'
+}
+
+const generatePageData = (widgetNames: string[]) => {
+    return widgetNames.map((widgetName) => {
+        const options = {
+            id: getNonDuplicateID(),
+            ...(widgets[widgetName]?.options() || {})
+        }
+        return options
+    })
+}
+
+const menus: Record<
+    string,
+    {
+        id: number
+        name: string
+        pageData: any[]
+    }
+> = reactive({
+    [pagesTypeEnum.HOME]: {
+        id: 4,
+        pageType: 4,
+        name: 'pc首页装修',
+        pageData: []
+    }
+})
+
+const activeMenu = ref('4')
+const selectWidgetIndex = ref(0)
+const getPageData = computed(() => {
+    return menus[activeMenu.value]?.pageData ?? []
+})
+const getSelectWidget = computed(() => {
+    return menus[activeMenu.value]?.pageData[selectWidgetIndex.value] ?? ''
+})
+
+const getData = async () => {
+    const data = await getDecoratePages({ id: activeMenu.value })
+    menus[String(data.id)].pageData = JSON.parse(data.pageData)
+    selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
+}
+
+const setData = async () => {
+    await setDecoratePages({
+        ...menus[activeMenu.value],
+        pageData: JSON.stringify(menus[activeMenu.value].pageData)
+    })
+    getData()
+}
+watch(
+    activeMenu,
+    () => {
+        selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
+        getData()
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+<style lang="scss" scoped>
+.decoration-pages {
+    min-height: calc(100vh - var(--navbar-height) - 80px);
+    @apply flex flex-col;
+}
+</style>

admin/src/views/setting/website/information.vue

@@ -52,6 +52,44 @@
                     </div>
                 </el-form-item>
             </el-card>
+            <el-card shadow="never" class="!border-none mt-4">
+                <div class="text-xl font-medium mb-[20px]">PC端设置</div>
+                <el-form-item label="PC端LOGO" prop="pcLogo">
+                    <div>
+                        <material-picker v-model="formData.pcLogo" :limit="1" />
+                        <div class="form-tips">建议尺寸：120*28px，支持jpg，jpeg，png格式</div>
+                    </div>
+                </el-form-item>
+                <el-form-item label="网站标题" prop="pcTitle">
+                    <div class="w-80">
+                        <el-input
+                            v-model.trim="formData.pcTitle"
+                            placeholder="请输入PC端网站标题"
+                            maxlength="30"
+                            show-word-limit
+                        />
+                    </div>
+                </el-form-item>
+                <el-form-item label="网站图标" prop="pcIco">
+                    <div>
+                        <material-picker v-model="formData.pcIco" :limit="1" />
+                        <div class="form-tips">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
+                    </div>
+                </el-form-item>
+                <el-form-item label="网站描述" prop="pcDesc">
+                    <div class="w-80">
+                        <el-input v-model.trim="formData.pcDesc" placeholder="请输入PC端网站描述" />
+                    </div>
+                </el-form-item>
+                <el-form-item label="网站关键词" prop="pcKeywords">
+                    <div class="w-80">
+                        <el-input
+                            v-model.trim="formData.pcKeywords"
+                            placeholder="请输入PC端网站关键词"
+                        />
+                    </div>
+                </el-form-item>
+            </el-card>
         </el-form>
         <footer-btns v-perms="['setting:website:save']">
             <el-button type="primary" @click="handleSubmit">保存</el-button>
@@ -73,7 +111,12 @@ const formData = reactive({
     logo: '', // 网站logo
     backdrop: '', // 登录页广告图
     shopName: '',
-    shopLogo: ''
+    shopLogo: '',
+    pcDesc: '',
+    pcIco: '',
+    pcKeywords: '',
+    pcLogo: '',
+    pcTitle: ''
 })
 
 // 表单验证
@@ -119,6 +162,27 @@ const rules = {
             message: '请选择商城LOGO',
             trigger: ['change']
         }
+    ],
+    pcLogo: [
+        {
+            required: true,
+            message: '请选择PC端LOGO',
+            trigger: ['change']
+        }
+    ],
+    pcTitle: [
+        {
+            required: true,
+            message: '请输入PC端网站标题',
+            trigger: ['blur']
+        }
+    ],
+    pcIco: [
+        {
+            required: true,
+            message: '请选择PC端网站图标',
+            trigger: ['change']
+        }
     ]
 }