Merge remote-tracking branch 'yudao/master'
dhb52
2 years ago
commit
c2038b95bf
@ -0,0 +1,65 @@
|
||||
/*
|
||||
* @Author: zyna
|
||||
* @Date: 2023-11-05 13:34:41
|
||||
* @LastEditTime: 2023-11-11 16:20:19
|
||||
* @FilePath: \yudao-ui-admin-vue3\src\api\crm\contact\index.ts
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface ContactVO {
|
||||
name: string
|
||||
nextTime: Date
|
||||
mobile: string
|
||||
telephone: string
|
||||
email: string
|
||||
post: string
|
||||
customerId: number
|
||||
address: string
|
||||
remark: string
|
||||
ownerUserId: string
|
||||
lastTime: Date
|
||||
id: number
|
||||
parentId: number
|
||||
qq: number
|
||||
webchat: string
|
||||
sex: number
|
||||
policyMakers: boolean
|
||||
creatorName: string
|
||||
updateTime?: Date
|
||||
createTime?: Date
|
||||
customerName: string
|
||||
}
|
||||
|
||||
// 查询crm联系人列表
|
||||
export const getContactPage = async (params) => {
|
||||
return await request.get({ url: `/crm/contact/page`, params })
|
||||
}
|
||||
|
||||
// 查询crm联系人详情
|
||||
export const getContact = async (id: number) => {
|
||||
return await request.get({ url: `/crm/contact/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增crm联系人
|
||||
export const createContact = async (data: ContactVO) => {
|
||||
return await request.post({ url: `/crm/contact/create`, data })
|
||||
}
|
||||
|
||||
// 修改crm联系人
|
||||
export const updateContact = async (data: ContactVO) => {
|
||||
return await request.put({ url: `/crm/contact/update`, data })
|
||||
}
|
||||
|
||||
// 删除crm联系人
|
||||
export const deleteContact = async (id: number) => {
|
||||
return await request.delete({ url: `/crm/contact/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出crm联系人 Excel
|
||||
export const exportContact = async (params) => {
|
||||
return await request.download({ url: `/crm/contact/export-excel`, params })
|
||||
}
|
||||
export const simpleAlllist = async () => {
|
||||
return await request.get({ url: `/crm/contact/simpleAlllist` })
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface CustomerLimitConfigVO {
|
||||
id?: number
|
||||
type?: number
|
||||
userIds?: string
|
||||
deptIds?: string
|
||||
maxCount?: number
|
||||
dealCountEnabled?: boolean
|
||||
}
|
||||
|
||||
// 查询客户限制配置列表
|
||||
export const getCustomerLimitConfigPage = async (params) => {
|
||||
return await request.get({ url: `/crm/customer-limit-config/page`, params })
|
||||
}
|
||||
|
||||
// 查询客户限制配置详情
|
||||
export const getCustomerLimitConfig = async (id: number) => {
|
||||
return await request.get({ url: `/crm/customer-limit-config/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增客户限制配置
|
||||
export const createCustomerLimitConfig = async (data: CustomerLimitConfigVO) => {
|
||||
return await request.post({ url: `/crm/customer-limit-config/create`, data })
|
||||
}
|
||||
|
||||
// 修改客户限制配置
|
||||
export const updateCustomerLimitConfig = async (data: CustomerLimitConfigVO) => {
|
||||
return await request.put({ url: `/crm/customer-limit-config/update`, data })
|
||||
}
|
||||
|
||||
// 删除客户限制配置
|
||||
export const deleteCustomerLimitConfig = async (id: number) => {
|
||||
return await request.delete({ url: `/crm/customer-limit-config/delete?id=` + id })
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface CustomerPoolConfigVO {
|
||||
enabled?: boolean
|
||||
contactExpireDays?: number
|
||||
dealExpireDays?: number
|
||||
notifyEnabled?: boolean
|
||||
notifyDays: number
|
||||
}
|
||||
|
||||
// 获取客户公海规则设置
|
||||
export const getCustomerPoolConfig = async () => {
|
||||
return await request.get({ url: `/crm/customer-pool-config/get` })
|
||||
}
|
||||
|
||||
// 更新客户公海规则设置
|
||||
export const updateCustomerPoolConfig = async (data: ConfigVO) => {
|
||||
return await request.put({ url: `/crm/customer-pool-config/update`, data })
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface ProductVO {
|
||||
id: number
|
||||
name: string
|
||||
no: string
|
||||
unit: string
|
||||
price: number
|
||||
status: number
|
||||
categoryId: number
|
||||
description: string
|
||||
ownerUserId: number
|
||||
}
|
||||
|
||||
// 查询产品列表
|
||||
export const getProductPage = async (params) => {
|
||||
return await request.get({ url: `/crm/product/page`, params })
|
||||
}
|
||||
|
||||
// 查询产品详情
|
||||
export const getProduct = async (id: number) => {
|
||||
return await request.get({ url: `/crm/product/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增产品
|
||||
export const createProduct = async (data: ProductVO) => {
|
||||
return await request.post({ url: `/crm/product/create`, data })
|
||||
}
|
||||
|
||||
// 修改产品
|
||||
export const updateProduct = async (data: ProductVO) => {
|
||||
return await request.put({ url: `/crm/product/update`, data })
|
||||
}
|
||||
|
||||
// 删除产品
|
||||
export const deleteProduct = async (id: number) => {
|
||||
return await request.delete({ url: `/crm/product/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出产品 Excel
|
||||
export const exportProduct = async (params) => {
|
||||
return await request.download({ url: `/crm/product/export-excel`, params })
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Demo01ContactVO {
|
||||
id: number
|
||||
name: string
|
||||
sex: number
|
||||
birthday: Date
|
||||
description: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
// 查询示例联系人分页
|
||||
export const getDemo01ContactPage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo01-contact/page`, params })
|
||||
}
|
||||
|
||||
// 查询示例联系人详情
|
||||
export const getDemo01Contact = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo01-contact/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增示例联系人
|
||||
export const createDemo01Contact = async (data: Demo01ContactVO) => {
|
||||
return await request.post({ url: `/infra/demo01-contact/create`, data })
|
||||
}
|
||||
|
||||
// 修改示例联系人
|
||||
export const updateDemo01Contact = async (data: Demo01ContactVO) => {
|
||||
return await request.put({ url: `/infra/demo01-contact/update`, data })
|
||||
}
|
||||
|
||||
// 删除示例联系人
|
||||
export const deleteDemo01Contact = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo01-contact/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出示例联系人 Excel
|
||||
export const exportDemo01Contact = async (params) => {
|
||||
return await request.download({ url: `/infra/demo01-contact/export-excel`, params })
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Demo02CategoryVO {
|
||||
id: number
|
||||
name: string
|
||||
parentId: number
|
||||
}
|
||||
|
||||
// 查询示例分类列表
|
||||
export const getDemo02CategoryList = async (params) => {
|
||||
return await request.get({ url: `/infra/demo02-category/list`, params })
|
||||
}
|
||||
|
||||
// 查询示例分类详情
|
||||
export const getDemo02Category = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo02-category/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增示例分类
|
||||
export const createDemo02Category = async (data: Demo02CategoryVO) => {
|
||||
return await request.post({ url: `/infra/demo02-category/create`, data })
|
||||
}
|
||||
|
||||
// 修改示例分类
|
||||
export const updateDemo02Category = async (data: Demo02CategoryVO) => {
|
||||
return await request.put({ url: `/infra/demo02-category/update`, data })
|
||||
}
|
||||
|
||||
// 删除示例分类
|
||||
export const deleteDemo02Category = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo02-category/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出示例分类 Excel
|
||||
export const exportDemo02Category = async (params) => {
|
||||
return await request.download({ url: `/infra/demo02-category/export-excel`, params })
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Demo03StudentVO {
|
||||
id: number
|
||||
name: string
|
||||
sex: number
|
||||
birthday: Date
|
||||
description: string
|
||||
}
|
||||
|
||||
// 查询学生分页
|
||||
export const getDemo03StudentPage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo03-student/page`, params })
|
||||
}
|
||||
|
||||
// 查询学生详情
|
||||
export const getDemo03Student = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo03-student/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增学生
|
||||
export const createDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.post({ url: `/infra/demo03-student/create`, data })
|
||||
}
|
||||
|
||||
// 修改学生
|
||||
export const updateDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.put({ url: `/infra/demo03-student/update`, data })
|
||||
}
|
||||
|
||||
// 删除学生
|
||||
export const deleteDemo03Student = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出学生 Excel
|
||||
export const exportDemo03Student = async (params) => {
|
||||
return await request.download({ url: `/infra/demo03-student/export-excel`, params })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生课程） ====================
|
||||
|
||||
// 获得学生课程分页
|
||||
export const getDemo03CoursePage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-course/page`, params })
|
||||
}
|
||||
// 新增学生课程
|
||||
export const createDemo03Course = async (data) => {
|
||||
return await request.post({ url: `/infra/demo03-student/demo03-course/create`, data })
|
||||
}
|
||||
|
||||
// 修改学生课程
|
||||
export const updateDemo03Course = async (data) => {
|
||||
return await request.put({ url: `/infra/demo03-student/demo03-course/update`, data })
|
||||
}
|
||||
|
||||
// 删除学生课程
|
||||
export const deleteDemo03Course = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo03-student/demo03-course/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 获得学生课程
|
||||
export const getDemo03Course = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-course/get?id=` + id })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生班级） ====================
|
||||
|
||||
// 获得学生班级分页
|
||||
export const getDemo03GradePage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-grade/page`, params })
|
||||
}
|
||||
// 新增学生班级
|
||||
export const createDemo03Grade = async (data) => {
|
||||
return await request.post({ url: `/infra/demo03-student/demo03-grade/create`, data })
|
||||
}
|
||||
|
||||
// 修改学生班级
|
||||
export const updateDemo03Grade = async (data) => {
|
||||
return await request.put({ url: `/infra/demo03-student/demo03-grade/update`, data })
|
||||
}
|
||||
|
||||
// 删除学生班级
|
||||
export const deleteDemo03Grade = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo03-student/demo03-grade/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 获得学生班级
|
||||
export const getDemo03Grade = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-grade/get?id=` + id })
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Demo03StudentVO {
|
||||
id: number
|
||||
name: string
|
||||
sex: number
|
||||
birthday: Date
|
||||
description: string
|
||||
}
|
||||
|
||||
// 查询学生分页
|
||||
export const getDemo03StudentPage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo03-student/page`, params })
|
||||
}
|
||||
|
||||
// 查询学生详情
|
||||
export const getDemo03Student = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo03-student/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增学生
|
||||
export const createDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.post({ url: `/infra/demo03-student/create`, data })
|
||||
}
|
||||
|
||||
// 修改学生
|
||||
export const updateDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.put({ url: `/infra/demo03-student/update`, data })
|
||||
}
|
||||
|
||||
// 删除学生
|
||||
export const deleteDemo03Student = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出学生 Excel
|
||||
export const exportDemo03Student = async (params) => {
|
||||
return await request.download({ url: `/infra/demo03-student/export-excel`, params })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生课程） ====================
|
||||
|
||||
// 获得学生课程列表
|
||||
export const getDemo03CourseListByStudentId = async (studentId) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生班级） ====================
|
||||
|
||||
// 获得学生班级
|
||||
export const getDemo03GradeByStudentId = async (studentId) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Demo03StudentVO {
|
||||
id: number
|
||||
name: string
|
||||
sex: number
|
||||
birthday: Date
|
||||
description: string
|
||||
}
|
||||
|
||||
// 查询学生分页
|
||||
export const getDemo03StudentPage = async (params) => {
|
||||
return await request.get({ url: `/infra/demo03-student/page`, params })
|
||||
}
|
||||
|
||||
// 查询学生详情
|
||||
export const getDemo03Student = async (id: number) => {
|
||||
return await request.get({ url: `/infra/demo03-student/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增学生
|
||||
export const createDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.post({ url: `/infra/demo03-student/create`, data })
|
||||
}
|
||||
|
||||
// 修改学生
|
||||
export const updateDemo03Student = async (data: Demo03StudentVO) => {
|
||||
return await request.put({ url: `/infra/demo03-student/update`, data })
|
||||
}
|
||||
|
||||
// 删除学生
|
||||
export const deleteDemo03Student = async (id: number) => {
|
||||
return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 导出学生 Excel
|
||||
export const exportDemo03Student = async (params) => {
|
||||
return await request.download({ url: `/infra/demo03-student/export-excel`, params })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生课程） ====================
|
||||
|
||||
// 获得学生课程列表
|
||||
export const getDemo03CourseListByStudentId = async (studentId) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
|
||||
}
|
||||
|
||||
// ==================== 子表（学生班级） ====================
|
||||
|
||||
// 获得学生班级
|
||||
export const getDemo03GradeByStudentId = async (studentId) => {
|
||||
return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface Favorite {
|
||||
id?: number
|
||||
userId?: string // 用户编号
|
||||
spuId?: number | null // 商品 SPU 编号
|
||||
}
|
||||
|
||||
// 获得 ProductFavorite 列表
|
||||
export const getFavoritePage = (params: PageParam) => {
|
||||
return request.get({ url: '/product/favorite/page', params })
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface DiyPageVO {
|
||||
id?: number
|
||||
templateId?: number
|
||||
name: string
|
||||
remark: string
|
||||
previewImageUrls: string[]
|
||||
property: string
|
||||
}
|
||||
|
||||
// 查询装修页面列表
|
||||
export const getDiyPagePage = async (params: any) => {
|
||||
return await request.get({ url: `/promotion/diy-page/page`, params })
|
||||
}
|
||||
|
||||
// 查询装修页面详情
|
||||
export const getDiyPage = async (id: number) => {
|
||||
return await request.get({ url: `/promotion/diy-page/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增装修页面
|
||||
export const createDiyPage = async (data: DiyPageVO) => {
|
||||
return await request.post({ url: `/promotion/diy-page/create`, data })
|
||||
}
|
||||
|
||||
// 修改装修页面
|
||||
export const updateDiyPage = async (data: DiyPageVO) => {
|
||||
return await request.put({ url: `/promotion/diy-page/update`, data })
|
||||
}
|
||||
|
||||
// 删除装修页面
|
||||
export const deleteDiyPage = async (id: number) => {
|
||||
return await request.delete({ url: `/promotion/diy-page/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 获得装修页面属性
|
||||
export const getDiyPageProperty = async (id: number) => {
|
||||
return await request.get({ url: `/promotion/diy-page/get-property?id=` + id })
|
||||
}
|
||||
|
||||
// 更新装修页面属性
|
||||
export const updateDiyPageProperty = async (data: DiyPageVO) => {
|
||||
return await request.put({ url: `/promotion/diy-page/update-property`, data })
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import request from '@/config/axios'
|
||||
import { DiyPageVO } from '@/api/mall/promotion/diy/page'
|
||||
|
||||
export interface DiyTemplateVO {
|
||||
id?: number
|
||||
name: string
|
||||
used: boolean
|
||||
usedTime?: Date
|
||||
remark: string
|
||||
previewImageUrls: string[]
|
||||
property: string
|
||||
}
|
||||
|
||||
export interface DiyTemplatePropertyVO extends DiyTemplateVO {
|
||||
pages: DiyPageVO[]
|
||||
}
|
||||
|
||||
// 查询装修模板列表
|
||||
export const getDiyTemplatePage = async (params: any) => {
|
||||
return await request.get({ url: `/promotion/diy-template/page`, params })
|
||||
}
|
||||
|
||||
// 查询装修模板详情
|
||||
export const getDiyTemplate = async (id: number) => {
|
||||
return await request.get({ url: `/promotion/diy-template/get?id=` + id })
|
||||
}
|
||||
|
||||
// 新增装修模板
|
||||
export const createDiyTemplate = async (data: DiyTemplateVO) => {
|
||||
return await request.post({ url: `/promotion/diy-template/create`, data })
|
||||
}
|
||||
|
||||
// 修改装修模板
|
||||
export const updateDiyTemplate = async (data: DiyTemplateVO) => {
|
||||
return await request.put({ url: `/promotion/diy-template/update`, data })
|
||||
}
|
||||
|
||||
// 删除装修模板
|
||||
export const deleteDiyTemplate = async (id: number) => {
|
||||
return await request.delete({ url: `/promotion/diy-template/delete?id=` + id })
|
||||
}
|
||||
|
||||
// 使用装修模板
|
||||
export const useDiyTemplate = async (id: number) => {
|
||||
return await request.put({ url: `/promotion/diy-template/use?id=` + id })
|
||||
}
|
||||
|
||||
// 获得装修模板属性
|
||||
export const getDiyTemplateProperty = async (id: number) => {
|
||||
return await request.get<DiyTemplatePropertyVO>({
|
||||
url: `/promotion/diy-template/get-property?id=` + id
|
||||
})
|
||||
}
|
||||
|
||||
// 更新装修模板属性
|
||||
export const updateDiyTemplateProperty = async (data: DiyTemplateVO) => {
|
||||
return await request.put({ url: `/promotion/diy-template/update-property`, data })
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface DemoTransferVO {
|
||||
price: number
|
||||
type: number
|
||||
userName: string
|
||||
alipayLogonId: string
|
||||
openid: string
|
||||
}
|
||||
|
||||
// 创建示例转账单
|
||||
export function createDemoTransfer(data: DemoTransferVO) {
|
||||
return request.post({
|
||||
url: '/pay/demo-transfer/create',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得示例订单分页
|
||||
export function getDemoTransferPage(query: PageParam) {
|
||||
return request.get({
|
||||
url: '/pay/demo-transfer/page',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface TransferVO {
|
||||
appId: number
|
||||
channelCode: string
|
||||
merchantTransferId: string
|
||||
type: number
|
||||
price: number
|
||||
subject: string
|
||||
userName: string
|
||||
alipayLogonId: string
|
||||
openid: string
|
||||
}
|
||||
|
||||
// 新增转账单
|
||||
export const createTransfer = async (data: TransferVO) => {
|
||||
return await request.post({ url: `/pay/transfer/create`, data })
|
||||
}
|
||||
|
||||
// 查询转账单列表
|
||||
export const getTransferPage = async (params) => {
|
||||
return await request.get({ url: `/pay/transfer/page`, params })
|
||||
}
|
||||
|
||||
export const getTransfer = async (id: number) => {
|
||||
return await request.get({ url: '/pay/transfer/get?id=' + id })
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-input v-model="color">
|
||||
<template #prepend>
|
||||
<el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { PREDEFINE_COLORS } from '@/utils/color'
|
||||
|
||||
// 颜色输入框
|
||||
defineOptions({ name: 'ColorInput' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.string.def('')
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const color = computed({
|
||||
get: () => {
|
||||
return props.modelValue
|
||||
},
|
||||
set: (val: string) => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input-group__prepend) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-aside class="editor-left" width="261px">
|
||||
<el-scrollbar>
|
||||
<el-collapse v-model="extendGroups">
|
||||
<el-collapse-item
|
||||
v-for="group in groups"
|
||||
:key="group.name"
|
||||
:name="group.name"
|
||||
:title="group.name"
|
||||
>
|
||||
<draggable
|
||||
class="component-container"
|
||||
ghost-class="draggable-ghost"
|
||||
item-key="index"
|
||||
:list="group.components"
|
||||
:sort="false"
|
||||
:group="{ name: 'component', pull: 'clone', put: false }"
|
||||
:clone="handleCloneComponent"
|
||||
:animation="200"
|
||||
:force-fallback="true"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div>
|
||||
<div class="drag-placement">组件放置区域</div>
|
||||
<div class="component">
|
||||
<Icon :icon="element.icon" :size="32" />
|
||||
<span class="mt-4px text-12px">{{ element.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable'
|
||||
import { componentConfigs } from '../components/mobile/index'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { DiyComponent, DiyComponentLibrary } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 组件库 */
|
||||
defineOptions({ name: 'ComponentLibrary' })
|
||||
|
||||
// 组件列表
|
||||
const props = defineProps<{
|
||||
list: DiyComponentLibrary[]
|
||||
}>()
|
||||
const groups = reactive<any[]>([])
|
||||
// 展开的折叠面板
|
||||
const extendGroups = reactive<string[]>([])
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
// 清除旧数据
|
||||
extendGroups.length = 0
|
||||
groups.length = 0
|
||||
// 重新生成数据
|
||||
props.list.forEach((group) => {
|
||||
// 是否展开分组
|
||||
if (group.extended) {
|
||||
extendGroups.push(group.name)
|
||||
}
|
||||
// 查找组件
|
||||
const components = group.components
|
||||
.map((name) => componentConfigs[name] as DiyComponent<any>)
|
||||
.filter((component) => component)
|
||||
if (components.length > 0) {
|
||||
groups.push({
|
||||
name: group.name,
|
||||
components
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
// 克隆组件
|
||||
const handleCloneComponent = (component: DiyComponent<any>) => {
|
||||
return cloneDeep(component)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.editor-left {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
|
||||
|
||||
:deep(.el-collapse) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__wrap) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
line-height: 32px;
|
||||
background-color: var(--el-bg-color-page);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.component-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component {
|
||||
display: flex;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
cursor: move;
|
||||
border-right: 1px solid var(--el-border-color-lighter);
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
margin-bottom: 4px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.component.active,
|
||||
.component:hover {
|
||||
color: var(--el-color-white);
|
||||
background: var(--el-color-primary);
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.component:nth-of-type(3n) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 拖拽占位提示，默认不显示 */
|
||||
.drag-placement {
|
||||
display: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.drag-area {
|
||||
/* 拖拽到手机区域时的样式 */
|
||||
.draggable-ghost {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
/* 条纹背景 */
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#91a8d5 0,
|
||||
#91a8d5 10%,
|
||||
#94b4eb 10%,
|
||||
#94b4eb 50%,
|
||||
#91a8d5 50%,
|
||||
#91a8d5 60%,
|
||||
#94b4eb 60%,
|
||||
#94b4eb
|
||||
);
|
||||
background-size: 1rem 1rem;
|
||||
transition: all 0.5s;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: #5487df;
|
||||
}
|
||||
|
||||
/* 拖拽时隐藏组件 */
|
||||
.component {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 拖拽时显示占位提示 */
|
||||
.drag-placement {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 轮播图属性 */
|
||||
export interface CarouselProperty {
|
||||
// 类型：默认 | 卡片
|
||||
type: 'default' | 'card'
|
||||
// 指示器样式：点 | 数字
|
||||
indicator: 'dot' | 'number'
|
||||
// 是否自动播放
|
||||
autoplay: boolean
|
||||
// 播放间隔
|
||||
interval: number
|
||||
// 轮播内容
|
||||
items: CarouselItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
// 轮播内容属性
|
||||
export interface CarouselItemProperty {
|
||||
// 类型：图片 | 视频
|
||||
type: 'img' | 'video'
|
||||
// 图片链接
|
||||
imgUrl: string
|
||||
// 视频链接
|
||||
videoUrl: string
|
||||
// 跳转链接
|
||||
url: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'Carousel',
|
||||
name: '轮播图',
|
||||
icon: 'system-uicons:carousel',
|
||||
property: {
|
||||
type: 'default',
|
||||
indicator: 'dot',
|
||||
autoplay: false,
|
||||
interval: 3,
|
||||
items: [
|
||||
{ type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg', videoUrl: '' },
|
||||
{ type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg', videoUrl: '' }
|
||||
] as CarouselItemProperty[],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<CarouselProperty>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<!-- 无图片 -->
|
||||
<div
|
||||
class="h-250px flex items-center justify-center bg-gray-3"
|
||||
v-if="property.items.length === 0"
|
||||
>
|
||||
<Icon icon="tdesign:image" class="text-gray-8 text-120px!" />
|
||||
</div>
|
||||
<div v-else class="relative">
|
||||
<el-carousel
|
||||
height="174px"
|
||||
:type="property.type === 'card' ? 'card' : ''"
|
||||
:autoplay="property.autoplay"
|
||||
:interval="property.interval * 1000"
|
||||
:indicator-position="property.indicator === 'number' ? 'none' : undefined"
|
||||
@change="handleIndexChange"
|
||||
>
|
||||
<el-carousel-item v-for="(item, index) in property.items" :key="index">
|
||||
<el-image class="h-full w-full" :src="item.imgUrl" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div
|
||||
v-if="property.indicator === 'number'"
|
||||
class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
|
||||
>{{ currentIndex }} / {{ property.items.length }}</div
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { CarouselProperty } from './config'
|
||||
|
||||
/** 轮播图 */
|
||||
defineOptions({ name: 'Carousel' })
|
||||
|
||||
defineProps<{ property: CarouselProperty }>()
|
||||
|
||||
const currentIndex = ref(0)
|
||||
const handleIndexChange = (index: number) => {
|
||||
currentIndex.value = index + 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,29 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 分割线属性 */
|
||||
export interface DividerProperty {
|
||||
// 高度
|
||||
height: number
|
||||
// 线宽
|
||||
lineWidth: number
|
||||
// 边距类型
|
||||
paddingType: 'none' | 'horizontal'
|
||||
// 颜色
|
||||
lineColor: string
|
||||
// 类型
|
||||
borderType: 'solid' | 'dashed' | 'dotted' | 'none'
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'Divider',
|
||||
name: '分割线',
|
||||
icon: 'tdesign:component-divider-vertical',
|
||||
property: {
|
||||
height: 30,
|
||||
lineWidth: 1,
|
||||
paddingType: 'none',
|
||||
lineColor: '#dcdfe6',
|
||||
borderType: 'solid'
|
||||
}
|
||||
} as DiyComponent<DividerProperty>
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center"
|
||||
:style="{
|
||||
height: property.height + 'px'
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="w-full"
|
||||
:style="{
|
||||
borderTopStyle: property.borderType,
|
||||
borderTopColor: property.lineColor,
|
||||
borderTopWidth: `${property.lineWidth}px`,
|
||||
margin: property.paddingType === 'none' ? '0' : '0px 16px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DividerProperty } from './config'
|
||||
|
||||
/** 页面顶部导航栏 */
|
||||
defineOptions({ name: 'Divider' })
|
||||
|
||||
defineProps<{ property: DividerProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<el-form label-width="80px" :model="formData">
|
||||
<el-form-item label="高度" prop="height">
|
||||
<el-slider v-model="formData.height" :min="1" :max="100" show-input input-size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择样式" prop="borderType">
|
||||
<el-radio-group v-model="formData!.borderType">
|
||||
<el-tooltip
|
||||
placement="top"
|
||||
v-for="(item, index) in BORDER_TYPES"
|
||||
:key="index"
|
||||
:content="item.text"
|
||||
>
|
||||
<el-radio-button :label="item.type">
|
||||
<Icon :icon="item.icon" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<template v-if="formData.borderType !== 'none'">
|
||||
<el-form-item label="线宽" prop="lineWidth">
|
||||
<el-slider v-model="formData.lineWidth" :min="1" :max="30" show-input input-size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="左右边距" prop="paddingType">
|
||||
<el-radio-group v-model="formData!.paddingType">
|
||||
<el-tooltip content="无边距" placement="top">
|
||||
<el-radio-button label="none">
|
||||
<Icon icon="tabler:box-padding" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="左右留边" placement="top">
|
||||
<el-radio-button label="horizontal">
|
||||
<Icon icon="vaadin:padding" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色">
|
||||
<!-- 分割线颜色 -->
|
||||
<ColorInput v-model="formData.lineColor" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DividerProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'DividerProperty' })
|
||||
const props = defineProps<{ modelValue: DividerProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
//线类型
|
||||
const BORDER_TYPES = [
|
||||
{
|
||||
icon: 'vaadin:line-h',
|
||||
text: '实线',
|
||||
type: 'solid'
|
||||
},
|
||||
{
|
||||
icon: 'tabler:line-dashed',
|
||||
text: '虚线',
|
||||
type: 'dashed'
|
||||
},
|
||||
{
|
||||
icon: 'tabler:line-dotted',
|
||||
text: '点线',
|
||||
type: 'dotted'
|
||||
},
|
||||
{
|
||||
icon: 'entypo:progress-empty',
|
||||
text: '无',
|
||||
type: 'none'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,27 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 图片展示属性 */
|
||||
export interface ImageBarProperty {
|
||||
// 图片链接
|
||||
imgUrl: string
|
||||
// 跳转链接
|
||||
url: string
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'ImageBar',
|
||||
name: '图片展示',
|
||||
icon: 'ep:picture',
|
||||
property: {
|
||||
imgUrl: '',
|
||||
url: '',
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<ImageBarProperty>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<!-- 无图片 -->
|
||||
<div class="h-50px flex items-center justify-center bg-gray-3" v-if="!property.imgUrl">
|
||||
<Icon icon="ep:picture" class="text-gray-8 text-30px!" />
|
||||
</div>
|
||||
<el-image class="min-h-30px" v-else :src="property.imgUrl" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ImageBarProperty } from './config'
|
||||
|
||||
/** 图片展示 */
|
||||
defineOptions({ name: 'ImageBar' })
|
||||
|
||||
defineProps<{ property: ImageBarProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 图片 */
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<el-form label-width="80px" :model="formData">
|
||||
<el-form-item label="上传图片" prop="imgUrl">
|
||||
<UploadImg
|
||||
v-model="formData.imgUrl"
|
||||
draggable="false"
|
||||
height="80px"
|
||||
width="100%"
|
||||
class="min-w-80px"
|
||||
>
|
||||
<template #tip> 建议宽度750 </template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接" prop="url">
|
||||
<el-input placeholder="链接" v-model="formData.url" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ImageBarProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
|
||||
// 图片展示属性面板
|
||||
defineOptions({ name: 'ImageBarProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: ImageBarProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,48 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 广告魔方属性 */
|
||||
export interface MagicCubeProperty {
|
||||
// 上圆角
|
||||
borderRadiusTop: number
|
||||
// 下圆角
|
||||
borderRadiusBottom: number
|
||||
// 间隔
|
||||
space: number
|
||||
// 导航菜单列表
|
||||
list: MagicCubeItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 广告魔方项目属性 */
|
||||
export interface MagicCubeItemProperty {
|
||||
// 图标链接
|
||||
imgUrl: string
|
||||
// 链接
|
||||
url: string
|
||||
// 宽
|
||||
width: number
|
||||
// 高
|
||||
height: number
|
||||
// 上
|
||||
top: number
|
||||
// 左
|
||||
left: number
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MagicCube',
|
||||
name: '广告魔方',
|
||||
icon: 'bi:columns',
|
||||
property: {
|
||||
borderRadiusTop: 0,
|
||||
borderRadiusBottom: 0,
|
||||
space: 0,
|
||||
list: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MagicCubeProperty>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||
<el-text tag="p"> 魔方设置 </el-text>
|
||||
<el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
|
||||
<MagicCubeEditor
|
||||
class="m-y-16px"
|
||||
v-model="formData.list"
|
||||
:rows="4"
|
||||
:cols="4"
|
||||
@hot-area-selected="handleHotAreaSelected"
|
||||
/>
|
||||
<template v-for="(hotArea, index) in formData.list" :key="index">
|
||||
<template v-if="selectedHotAreaIndex === index">
|
||||
<el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
|
||||
<UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="链接" :prop="`list[${index}].url`">
|
||||
<el-input v-model="hotArea.url" placeholder="请输入链接" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<el-form-item label="上圆角" prop="borderRadiusTop">
|
||||
<el-slider
|
||||
v-model="formData.borderRadiusTop"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下圆角" prop="borderRadiusBottom">
|
||||
<el-slider
|
||||
v-model="formData.borderRadiusBottom"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔" prop="space">
|
||||
<el-slider
|
||||
v-model="formData.space"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
|
||||
|
||||
/** 广告魔方属性面板 */
|
||||
defineOptions({ name: 'MagicCubeProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: MagicCubeProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
// 选中的热区
|
||||
const selectedHotAreaIndex = ref(-1)
|
||||
const handleHotAreaSelected = (_: any, index: number) => {
|
||||
selectedHotAreaIndex.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,78 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
/** 宫格导航属性 */
|
||||
export interface MenuGridProperty {
|
||||
// 列数
|
||||
column: number
|
||||
// 导航菜单列表
|
||||
list: MenuGridItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 宫格导航项目属性 */
|
||||
export interface MenuGridItemProperty {
|
||||
// 图标链接
|
||||
iconUrl: string
|
||||
// 标题
|
||||
title: string
|
||||
// 标题颜色
|
||||
titleColor: string
|
||||
// 副标题
|
||||
subtitle: string
|
||||
// 副标题颜色
|
||||
subtitleColor: string
|
||||
// 链接
|
||||
url: string
|
||||
// 角标
|
||||
badge: {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 角标文字
|
||||
text: string
|
||||
// 角标文字颜色
|
||||
textColor: string
|
||||
// 角标背景颜色
|
||||
bgColor: string
|
||||
}
|
||||
}
|
||||
|
||||
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
|
||||
title: '标题',
|
||||
titleColor: '#333',
|
||||
subtitle: '副标题',
|
||||
subtitleColor: '#bbb',
|
||||
badge: {
|
||||
show: false,
|
||||
textColor: '#fff',
|
||||
bgColor: '#FF6000'
|
||||
}
|
||||
} as MenuGridItemProperty
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MenuGrid',
|
||||
name: '宫格导航',
|
||||
icon: 'bi:grid-3x3-gap',
|
||||
property: {
|
||||
column: 3,
|
||||
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8,
|
||||
marginLeft: 8,
|
||||
marginRight: 8,
|
||||
padding: 8,
|
||||
paddingTop: 8,
|
||||
paddingRight: 8,
|
||||
paddingBottom: 8,
|
||||
paddingLeft: 8,
|
||||
borderRadius: 8,
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
borderBottomLeftRadius: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MenuGridProperty>
|
||||
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="relative flex flex-col items-center p-b-14px p-t-20px"
|
||||
:style="{ width: `${100 * (1 / property.column)}%` }"
|
||||
>
|
||||
<!-- 右上角角标 -->
|
||||
<span
|
||||
v-if="item.badge?.show"
|
||||
class="absolute left-50% top-10px z-1 h-20px rounded-50% p-x-6px text-center text-12px leading-20px"
|
||||
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
|
||||
>
|
||||
{{ item.badge.text }}
|
||||
</span>
|
||||
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
|
||||
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
|
||||
{{ item.subtitle }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MenuGridProperty } from './config'
|
||||
/** 宫格导航 */
|
||||
defineOptions({ name: 'MenuGrid' })
|
||||
defineProps<{ property: MenuGridProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,47 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
/** 列表导航属性 */
|
||||
export interface MenuListProperty {
|
||||
// 导航菜单列表
|
||||
list: MenuListItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 列表导航项目属性 */
|
||||
export interface MenuListItemProperty {
|
||||
// 图标链接
|
||||
iconUrl: string
|
||||
// 标题
|
||||
title: string
|
||||
// 标题颜色
|
||||
titleColor: string
|
||||
// 副标题
|
||||
subtitle: string
|
||||
// 副标题颜色
|
||||
subtitleColor: string
|
||||
// 链接
|
||||
url: string
|
||||
}
|
||||
|
||||
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
|
||||
title: '标题',
|
||||
titleColor: '#333',
|
||||
subtitle: '副标题',
|
||||
subtitleColor: '#bbb'
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MenuList',
|
||||
name: '列表导航',
|
||||
icon: 'fa-solid:list',
|
||||
property: {
|
||||
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MenuListProperty>
|
||||
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="min-h-42px flex flex-col">
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
|
||||
>
|
||||
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
|
||||
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="item-center flex flex-row justify-center gap-4px">
|
||||
<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
|
||||
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MenuListProperty } from './config'
|
||||
/** 列表导航 */
|
||||
defineOptions({ name: 'MenuList' })
|
||||
defineProps<{ property: MenuListProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item + .item {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
/** 菜单导航属性 */
|
||||
export interface MenuSwiperProperty {
|
||||
// 布局： 图标+文字 | 图标
|
||||
layout: 'iconText' | 'icon'
|
||||
// 行数
|
||||
row: number
|
||||
// 列数
|
||||
column: number
|
||||
// 导航菜单列表
|
||||
list: MenuSwiperItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 菜单导航项目属性 */
|
||||
export interface MenuSwiperItemProperty {
|
||||
// 图标链接
|
||||
iconUrl: string
|
||||
// 标题
|
||||
title: string
|
||||
// 标题颜色
|
||||
titleColor: string
|
||||
// 链接
|
||||
url: string
|
||||
// 角标
|
||||
badge: {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 角标文字
|
||||
text: string
|
||||
// 角标文字颜色
|
||||
textColor: string
|
||||
// 角标背景颜色
|
||||
bgColor: string
|
||||
}
|
||||
}
|
||||
|
||||
export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
|
||||
title: '标题',
|
||||
titleColor: '#333',
|
||||
badge: {
|
||||
show: false,
|
||||
textColor: '#fff',
|
||||
bgColor: '#FF6000'
|
||||
}
|
||||
} as MenuSwiperItemProperty
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MenuSwiper',
|
||||
name: '菜单导航',
|
||||
icon: 'bi:grid-3x2-gap',
|
||||
property: {
|
||||
layout: 'iconText',
|
||||
row: 1,
|
||||
column: 3,
|
||||
list: [cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MenuSwiperProperty>
|
||||
@ -0,0 +1,38 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 顶部导航栏属性 */
|
||||
export interface NavigationBarProperty {
|
||||
// 页面标题
|
||||
title: string
|
||||
// 页面描述
|
||||
description: string
|
||||
// 顶部导航高度
|
||||
navBarHeight: number
|
||||
// 页面背景颜色
|
||||
backgroundColor: string
|
||||
// 页面背景图片
|
||||
backgroundImage: string
|
||||
// 样式类型：默认 | 沉浸式
|
||||
styleType: 'default' | 'immersion'
|
||||
// 常驻显示
|
||||
alwaysShow: boolean
|
||||
// 是否显示返回按钮
|
||||
showGoBack: boolean
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'NavigationBar',
|
||||
name: '顶部导航栏',
|
||||
icon: 'tabler:layout-navbar',
|
||||
property: {
|
||||
title: '页面标题',
|
||||
description: '',
|
||||
navBarHeight: 35,
|
||||
backgroundColor: '#fff',
|
||||
backgroundImage: '',
|
||||
styleType: 'default',
|
||||
alwaysShow: true,
|
||||
showGoBack: true
|
||||
}
|
||||
} as DiyComponent<NavigationBarProperty>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div
|
||||
class="navigation-bar"
|
||||
:style="{
|
||||
height: `${property.navBarHeight}px`,
|
||||
backgroundColor: property.backgroundColor,
|
||||
backgroundImage: `url(${property.backgroundImage})`
|
||||
}"
|
||||
>
|
||||
<!-- 左侧 -->
|
||||
<div class="left">
|
||||
<Icon icon="ep:arrow-left" v-show="property.showGoBack" />
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div
|
||||
class="center"
|
||||
:style="{
|
||||
height: `${property.navBarHeight}px`,
|
||||
lineHeight: `${property.navBarHeight}px`
|
||||
}"
|
||||
>
|
||||
{{ property.title }}
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { NavigationBarProperty } from './config'
|
||||
|
||||
/** 页面顶部导航栏 */
|
||||
defineOptions({ name: 'NavigationBar' })
|
||||
|
||||
defineProps<{ property: NavigationBarProperty }>()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.navigation-bar {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
/* 左边 */
|
||||
.left {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 右边 */
|
||||
.right {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<el-form label-width="80px" :model="formData" :rules="rules">
|
||||
<el-form-item label="页面标题" prop="title">
|
||||
<el-input v-model="formData!.title" placeholder="页面标题" maxlength="25" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="页面描述" prop="description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData!.description"
|
||||
placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式" prop="styleType">
|
||||
<el-radio-group v-model="formData!.styleType">
|
||||
<el-radio label="default">默认</el-radio>
|
||||
<el-radio label="immersion">沉浸式</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'immersion'">
|
||||
<el-radio-group v-model="formData!.alwaysShow">
|
||||
<el-radio :label="false">关闭</el-radio>
|
||||
<el-radio :label="true">开启</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="高度" prop="navBarHeight">
|
||||
<el-slider
|
||||
v-model="formData!.navBarHeight"
|
||||
:max="100"
|
||||
:min="35"
|
||||
show-input
|
||||
input-size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回按钮" prop="showGoBack">
|
||||
<el-switch v-model="formData!.showGoBack" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色" prop="backgroundColor">
|
||||
<ColorInput v-model="formData!.backgroundColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景图片" prop="backgroundImage">
|
||||
<UploadImg v-model="formData!.backgroundImage" :limit="1">
|
||||
<template #tip>建议宽度 750px</template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NavigationBarProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'NavigationBarProperty' })
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const props = defineProps<{ modelValue: NavigationBarProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,39 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 公告栏属性 */
|
||||
export interface NoticeBarProperty {
|
||||
// 图标地址
|
||||
iconUrl: string
|
||||
// 公告内容列表
|
||||
contents: NoticeContentProperty[]
|
||||
// 背景颜色
|
||||
backgroundColor: string
|
||||
// 文字颜色
|
||||
textColor: string
|
||||
}
|
||||
|
||||
/** 内容属性 */
|
||||
export interface NoticeContentProperty {
|
||||
// 内容文字
|
||||
text: string
|
||||
// 链接地址
|
||||
url: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'NoticeBar',
|
||||
name: '公告栏',
|
||||
icon: 'ep:bell',
|
||||
property: {
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
|
||||
contents: [
|
||||
{
|
||||
text: '',
|
||||
url: ''
|
||||
}
|
||||
],
|
||||
backgroundColor: '#fff',
|
||||
textColor: '#333'
|
||||
}
|
||||
} as DiyComponent<NoticeBarProperty>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center p-y-4px text-12px"
|
||||
:style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
|
||||
>
|
||||
<el-image :src="property.iconUrl" class="h-18px" />
|
||||
<el-divider direction="vertical" />
|
||||
<el-carousel height="24px" direction="vertical" :autoplay="true" class="flex-1 p-r-8px">
|
||||
<el-carousel-item v-for="(item, index) in property.contents" :key="index">
|
||||
<div class="h-24px truncate leading-24px">{{ item.text }}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<Icon icon="ep:arrow-right" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NoticeBarProperty } from './config'
|
||||
|
||||
/** 公告栏 */
|
||||
defineOptions({ name: 'NoticeBar' })
|
||||
|
||||
defineProps<{ property: NoticeBarProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,23 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 页面设置属性 */
|
||||
export interface PageConfigProperty {
|
||||
// 页面描述
|
||||
description: string
|
||||
// 页面背景颜色
|
||||
backgroundColor: string
|
||||
// 页面背景图片
|
||||
backgroundImage: string
|
||||
}
|
||||
|
||||
// 定义页面组件
|
||||
export const component = {
|
||||
id: 'PageConfig',
|
||||
name: '页面设置',
|
||||
icon: 'ep:document',
|
||||
property: {
|
||||
description: '',
|
||||
backgroundColor: '#f5f5f5',
|
||||
backgroundImage: ''
|
||||
}
|
||||
} as DiyComponent<PageConfigProperty>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-form label-width="80px" :model="formData" :rules="rules">
|
||||
<el-form-item label="页面描述" prop="description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData!.description"
|
||||
placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色" prop="backgroundColor">
|
||||
<ColorInput v-model="formData!.backgroundColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景图片" prop="backgroundImage">
|
||||
<UploadImg v-model="formData!.backgroundImage" :limit="1">
|
||||
<template #tip>建议宽度 750px</template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PageConfigProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'PageConfigProperty' })
|
||||
// 表单校验
|
||||
const rules = {}
|
||||
|
||||
const props = defineProps<{ modelValue: PageConfigProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,97 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 商品卡片属性 */
|
||||
export interface ProductCardProperty {
|
||||
// 布局类型：单列大图 | 单列小图 | 双列
|
||||
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
|
||||
// 商品字段
|
||||
fields: {
|
||||
// 商品名称
|
||||
name: ProductCardFieldProperty
|
||||
// 商品简介
|
||||
introduction: ProductCardFieldProperty
|
||||
// 商品价格
|
||||
price: ProductCardFieldProperty
|
||||
// 商品市场价
|
||||
marketPrice: ProductCardFieldProperty
|
||||
// 商品销量
|
||||
salesCount: ProductCardFieldProperty
|
||||
// 商品库存
|
||||
stock: ProductCardFieldProperty
|
||||
}
|
||||
// 角标
|
||||
badge: {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 角标图片
|
||||
imgUrl: string
|
||||
}
|
||||
// 按钮
|
||||
btnBuy: {
|
||||
// 类型：文字 | 图片
|
||||
type: 'text' | 'img'
|
||||
// 文字
|
||||
text: string
|
||||
// 文字按钮：背景渐变起始颜色
|
||||
bgBeginColor: string
|
||||
// 文字按钮：背景渐变结束颜色
|
||||
bgEndColor: string
|
||||
// 图片按钮：图片地址
|
||||
imgUrl: string
|
||||
}
|
||||
// 上圆角
|
||||
borderRadiusTop: number
|
||||
// 下圆角
|
||||
borderRadiusBottom: number
|
||||
// 间距
|
||||
space: number
|
||||
// 商品编号列表
|
||||
spuIds: number[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
// 商品字段
|
||||
export interface ProductCardFieldProperty {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 颜色
|
||||
color: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'ProductCard',
|
||||
name: '商品卡片',
|
||||
icon: 'system-uicons:carousel',
|
||||
property: {
|
||||
layoutType: 'oneColBigImg',
|
||||
fields: {
|
||||
name: { show: true, color: '#000' },
|
||||
introduction: { show: true, color: '#999' },
|
||||
price: { show: true, color: '#ff3000' },
|
||||
marketPrice: { show: true, color: '#c4c4c4' },
|
||||
salesCount: { show: true, color: '#c4c4c4' },
|
||||
stock: { show: false, color: '#c4c4c4' }
|
||||
},
|
||||
badge: { show: false, imgUrl: '' },
|
||||
btnBuy: {
|
||||
type: 'text',
|
||||
text: '立即购买',
|
||||
// todo: @owen 根据主题色配置
|
||||
bgBeginColor: '#FF6000',
|
||||
bgEndColor: '#FE832A',
|
||||
imgUrl: ''
|
||||
},
|
||||
borderRadiusTop: 8,
|
||||
borderRadiusBottom: 8,
|
||||
space: 8,
|
||||
spuIds: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '',
|
||||
marginLeft: 8,
|
||||
marginRight: 8,
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<ProductCardProperty>
|
||||
@ -0,0 +1,43 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 搜索框属性 */
|
||||
export interface SearchProperty {
|
||||
height: number // 搜索栏高度
|
||||
showScan: boolean // 显示扫一扫
|
||||
borderRadius: number // 框体样式
|
||||
placeholder: string // 占位文字
|
||||
placeholderPosition: PlaceholderPosition // 占位文字位置
|
||||
backgroundColor: string // 框体颜色
|
||||
textColor: string // 字体颜色
|
||||
hotKeywords: string[] // 热词
|
||||
style: ComponentStyle
|
||||
}
|
||||
|
||||
// 文字位置
|
||||
export type PlaceholderPosition = 'left' | 'center'
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'SearchBar',
|
||||
name: '搜索框',
|
||||
icon: 'ep:search',
|
||||
property: {
|
||||
height: 28,
|
||||
showScan: false,
|
||||
borderRadius: 0,
|
||||
placeholder: '搜索商品',
|
||||
placeholderPosition: 'left',
|
||||
backgroundColor: 'rgb(238, 238, 238)',
|
||||
textColor: 'rgb(150, 151, 153)',
|
||||
hotKeywords: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8,
|
||||
paddingTop: 8,
|
||||
paddingRight: 8,
|
||||
paddingBottom: 8,
|
||||
paddingLeft: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<SearchProperty>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div
|
||||
class="search-bar"
|
||||
:style="{
|
||||
color: property.textColor
|
||||
}"
|
||||
>
|
||||
<!-- 搜索框 -->
|
||||
<div
|
||||
class="inner"
|
||||
:style="{
|
||||
height: `${property.height}px`,
|
||||
background: property.backgroundColor,
|
||||
borderRadius: `${property.borderRadius}px`
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="placeholder"
|
||||
:style="{
|
||||
justifyContent: property.placeholderPosition
|
||||
}"
|
||||
>
|
||||
<Icon icon="ep:search" />
|
||||
<span>{{ property.placeholder || '搜索商品' }}</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- 搜索热词 -->
|
||||
<span v-for="(keyword, index) in property.hotKeywords" :key="index">{{ keyword }}</span>
|
||||
<!-- 扫一扫 -->
|
||||
<Icon icon="ant-design:scan-outlined" v-show="property.showScan" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SearchProperty } from './config'
|
||||
/** 搜索框 */
|
||||
defineOptions({ name: 'SearchBar' })
|
||||
defineProps<{ property: SearchProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-bar {
|
||||
/* 搜索框 */
|
||||
.inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 28px;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<el-text tag="p"> 搜索热词 </el-text>
|
||||
<el-text type="info" size="small"> 拖动左侧的小圆点可以调整热词顺序 </el-text>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||
<div v-if="formData.hotKeywords.length">
|
||||
<VueDraggable
|
||||
:list="formData.hotKeywords"
|
||||
item-key="index"
|
||||
handle=".drag-icon"
|
||||
:forceFallback="true"
|
||||
:animation="200"
|
||||
>
|
||||
<template #item="{ index }">
|
||||
<div class="mb-4px flex flex-row items-center gap-4px rounded bg-gray-100 p-8px">
|
||||
<Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
|
||||
<el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
|
||||
<Icon icon="ep:delete" class="text-red-500" @click="deleteHotWord(index)" />
|
||||
</div>
|
||||
</template>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<el-form-item label-width="0">
|
||||
<el-button @click="handleAddHotWord" type="primary" plain class="m-t-8px w-full">
|
||||
添加热词
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="框体样式">
|
||||
<el-radio-group v-model="formData!.borderRadius">
|
||||
<el-tooltip content="方形" placement="top">
|
||||
<el-radio-button :label="0">
|
||||
<Icon icon="tabler:input-search" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="圆形" placement="top">
|
||||
<el-radio-button :label="10">
|
||||
<Icon icon="iconoir:input-search" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示文字" prop="placeholder">
|
||||
<el-input v-model="formData.placeholder" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文本位置" prop="placeholderPosition">
|
||||
<el-radio-group v-model="formData!.placeholderPosition">
|
||||
<el-tooltip content="居左" placement="top">
|
||||
<el-radio-button label="left">
|
||||
<Icon icon="ant-design:align-left-outlined" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="居中" placement="top">
|
||||
<el-radio-button label="center">
|
||||
<Icon icon="ant-design:align-center-outlined" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="扫一扫" prop="showScan">
|
||||
<el-switch v-model="formData!.showScan" />
|
||||
</el-form-item>
|
||||
<el-form-item label="框体高度" prop="height">
|
||||
<el-slider v-model="formData!.height" :max="50" :min="28" show-input input-size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="框体颜色" prop="backgroundColor">
|
||||
<ColorInput v-model="formData.backgroundColor" />
|
||||
</el-form-item>
|
||||
<el-form-item class="lef" label="文本颜色" prop="textColor">
|
||||
<ColorInput v-model="formData.textColor" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VueDraggable from 'vuedraggable'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
|
||||
|
||||
/** 搜索框属性面板 */
|
||||
defineOptions({ name: 'SearchProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: SearchProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
/* 添加热词 */
|
||||
const handleAddHotWord = () => {
|
||||
formData.value.hotKeywords.push('')
|
||||
}
|
||||
/* 删除热词 */
|
||||
const deleteHotWord = (index: number) => {
|
||||
formData.value.hotKeywords.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,97 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 底部导航菜单属性 */
|
||||
export interface TabBarProperty {
|
||||
// 选项列表
|
||||
items: TabBarItemProperty[]
|
||||
// 主题
|
||||
theme: string
|
||||
// 样式
|
||||
style: TabBarStyle
|
||||
}
|
||||
|
||||
// 选项属性
|
||||
export interface TabBarItemProperty {
|
||||
// 标签文字
|
||||
text: string
|
||||
// 链接
|
||||
url: string
|
||||
// 默认图标链接
|
||||
iconUrl: string
|
||||
// 选中的图标链接
|
||||
activeIconUrl: string
|
||||
}
|
||||
|
||||
// 样式
|
||||
export interface TabBarStyle {
|
||||
// 背景类型
|
||||
bgType: 'color' | 'img'
|
||||
// 背景颜色
|
||||
bgColor: string
|
||||
// 图片链接
|
||||
bgImg: string
|
||||
// 默认颜色
|
||||
color: string
|
||||
// 选中的颜色
|
||||
activeColor: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'TabBar',
|
||||
name: '底部导航',
|
||||
icon: 'fluent:table-bottom-row-16-filled',
|
||||
property: {
|
||||
theme: 'red',
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
color: '#282828',
|
||||
activeColor: '#fc4141'
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: '首页',
|
||||
url: '/pages/index/index',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png'
|
||||
},
|
||||
{
|
||||
text: '分类',
|
||||
url: '/pages/index/category?id=3',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png'
|
||||
},
|
||||
{
|
||||
text: '购物车',
|
||||
url: '/pages/index/cart',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png'
|
||||
},
|
||||
{
|
||||
text: '我的',
|
||||
url: '/pages/index/user',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
} as DiyComponent<TabBarProperty>
|
||||
|
||||
export const THEME_LIST = [
|
||||
{ id: 'red', name: '中国红', icon: 'icon-park-twotone:theme', color: '#d10019' },
|
||||
{ id: 'orange', name: '桔橙', icon: 'icon-park-twotone:theme', color: '#f37b1d' },
|
||||
{ id: 'gold', name: '明黄', icon: 'icon-park-twotone:theme', color: '#fbbd08' },
|
||||
{ id: 'green', name: '橄榄绿', icon: 'icon-park-twotone:theme', color: '#8dc63f' },
|
||||
{ id: 'cyan', name: '天青', icon: 'icon-park-twotone:theme', color: '#1cbbb4' },
|
||||
{ id: 'blue', name: '海蓝', icon: 'icon-park-twotone:theme', color: '#0081ff' },
|
||||
{ id: 'purple', name: '姹紫', icon: 'icon-park-twotone:theme', color: '#6739b6' },
|
||||
{ id: 'brightRed', name: '嫣红', icon: 'icon-park-twotone:theme', color: '#e54d42' },
|
||||
{ id: 'forestGreen', name: '森绿', icon: 'icon-park-twotone:theme', color: '#39b54a' },
|
||||
{ id: 'mauve', name: '木槿', icon: 'icon-park-twotone:theme', color: '#9c26b0' },
|
||||
{ id: 'pink', name: '桃粉', icon: 'icon-park-twotone:theme', color: '#e03997' },
|
||||
{ id: 'brown', name: '棕褐', icon: 'icon-park-twotone:theme', color: '#a5673f' },
|
||||
{ id: 'grey', name: '玄灰', icon: 'icon-park-twotone:theme', color: '#8799a3' },
|
||||
{ id: 'gray', name: '草灰', icon: 'icon-park-twotone:theme', color: '#aaaaaa' },
|
||||
{ id: 'black', name: '墨黑', icon: 'icon-park-twotone:theme', color: '#333333' }
|
||||
]
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="tab-bar">
|
||||
<div
|
||||
class="tab-bar-bg"
|
||||
:style="{
|
||||
background:
|
||||
property.style.bgType === 'color'
|
||||
? property.style.bgColor
|
||||
: `url(${property.style.bgImg})`,
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}"
|
||||
>
|
||||
<div v-for="(item, index) in property.items" :key="index" class="tab-bar-item">
|
||||
<img :src="index === 0 ? item.activeIconUrl : item.iconUrl" alt="" />
|
||||
<span :style="{ color: index === 0 ? property.style.activeColor : property.style.color }">
|
||||
{{ item.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { TabBarProperty } from './config'
|
||||
|
||||
/** 页面底部导航栏 */
|
||||
defineOptions({ name: 'TabBar' })
|
||||
|
||||
defineProps<{ property: TabBarProperty }>()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tab-bar {
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
|
||||
.tab-bar-bg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
|
||||
.tab-bar-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="tab-bar">
|
||||
<!-- 表单 -->
|
||||
<el-form :model="formData" label-width="80px">
|
||||
<el-form-item label="主题" prop="theme">
|
||||
<el-select v-model="formData!.theme" @change="handleThemeChange">
|
||||
<el-option
|
||||
v-for="(theme, index) in THEME_LIST"
|
||||
:key="index"
|
||||
:label="theme.name"
|
||||
:value="theme.id"
|
||||
>
|
||||
<template #default>
|
||||
<div class="flex items-center justify-between">
|
||||
<Icon :icon="theme.icon" :color="theme.color" />
|
||||
<span>{{ theme.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="默认颜色">
|
||||
<ColorInput v-model="formData!.style.color" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选中颜色">
|
||||
<ColorInput v-model="formData!.style.activeColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="导航背景">
|
||||
<el-radio-group v-model="formData!.style.bgType">
|
||||
<el-radio-button label="color">纯色</el-radio-button>
|
||||
<el-radio-button label="img">图片</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择颜色" v-if="formData!.style.bgType === 'color'">
|
||||
<ColorInput v-model="formData!.style.bgColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择图片" v-if="formData!.style.bgType === 'img'">
|
||||
<UploadImg v-model="formData!.style.bgImg" width="100%" height="50px" class="min-w-200px">
|
||||
<template #tip> 建议尺寸 375 * 50 </template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
|
||||
<el-text tag="p">图标设置</el-text>
|
||||
<el-text type="info" size="small"> 拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44 </el-text>
|
||||
<draggable
|
||||
:list="formData!.items"
|
||||
item-key="index"
|
||||
:forceFallback="true"
|
||||
:animation="200"
|
||||
handle=".drag-icon"
|
||||
class="m-t-8px"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px">
|
||||
<div class="flex flex-col items-start justify-between">
|
||||
<Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
|
||||
<Icon
|
||||
icon="ep:delete"
|
||||
class="cursor-pointer text-red-5"
|
||||
@click="handleDeleteItem(index)"
|
||||
v-if="formData.items.length > 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="m-b-8px flex items-center justify-around">
|
||||
<div class="flex flex-col items-center justify-between">
|
||||
<UploadImg
|
||||
v-model="element.iconUrl"
|
||||
width="40px"
|
||||
height="40px"
|
||||
:show-delete="false"
|
||||
:show-btn-text="false"
|
||||
/>
|
||||
<el-text size="small">默认图片</el-text>
|
||||
</div>
|
||||
<div>
|
||||
<UploadImg
|
||||
v-model="element.activeIconUrl"
|
||||
width="40px"
|
||||
height="40px"
|
||||
:show-delete="false"
|
||||
:show-btn-text="false"
|
||||
/>
|
||||
<el-text>选中图片</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item prop="text" label-width="0" class="m-b-8px!">
|
||||
<el-input v-model="element.text" placeholder="请输入文字" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="url" label-width="0" class="m-b-0!">
|
||||
<el-input v-model="element.url" placeholder="请选择链接" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<el-form-item label-width="0">
|
||||
<!-- 添加导航按钮 -->
|
||||
<el-tooltip content="最多添加5个">
|
||||
<el-button
|
||||
@click="handleAddItem"
|
||||
class="m-b-16px w-full"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="formData!.items.length >= 5"
|
||||
>
|
||||
添加导航
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable' //拖拽组件
|
||||
import { TabBarItemProperty, TabBarProperty, THEME_LIST } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 底部导航栏
|
||||
defineOptions({ name: 'TabBarProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: TabBarProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
/** 添加导航项 */
|
||||
const handleAddItem = () => {
|
||||
formData?.value?.items?.push({} as TabBarItemProperty)
|
||||
}
|
||||
/** 删除导航项 */
|
||||
const handleDeleteItem = (index: number) => {
|
||||
formData?.value?.items?.splice(index, 1)
|
||||
}
|
||||
|
||||
// 要的主题
|
||||
const handleThemeChange = () => {
|
||||
const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme)
|
||||
if (theme?.color) {
|
||||
formData.value.style.activeColor = theme.color
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,65 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 标题栏属性 */
|
||||
export interface TitleBarProperty {
|
||||
// 主标题
|
||||
title: string
|
||||
// 副标题
|
||||
description: string
|
||||
// 标题大小
|
||||
titleSize: number
|
||||
// 描述大小
|
||||
descriptionSize: number
|
||||
// 标题粗细
|
||||
titleWeight: number
|
||||
// 显示位置
|
||||
position: 'left' | 'center'
|
||||
// 描述粗细
|
||||
descriptionWeight: number
|
||||
// 标题颜色
|
||||
titleColor: string
|
||||
// 描述颜色
|
||||
descriptionColor: string
|
||||
// 背景颜色
|
||||
backgroundColor: string
|
||||
// 底部分割线
|
||||
showBottomBorder: false
|
||||
// 查看更多
|
||||
more: {
|
||||
// 是否显示查看更多
|
||||
show: false
|
||||
// 样式选择
|
||||
type: 'text' | 'icon' | 'all'
|
||||
// 自定义文字
|
||||
text: string
|
||||
// 链接
|
||||
url: string
|
||||
}
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'TitleBar',
|
||||
name: '标题栏',
|
||||
icon: 'material-symbols:line-start',
|
||||
property: {
|
||||
title: '主标题',
|
||||
description: '副标题',
|
||||
titleSize: 16,
|
||||
descriptionSize: 12,
|
||||
titleWeight: 400,
|
||||
position: 'left',
|
||||
descriptionWeight: 200,
|
||||
titleColor: 'rgba(50, 50, 51, 10)',
|
||||
descriptionColor: 'rgba(150, 151, 153, 10)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 10)',
|
||||
showBottomBorder: false,
|
||||
more: {
|
||||
//查看更多
|
||||
show: false,
|
||||
type: 'icon',
|
||||
text: '查看更多',
|
||||
url: ''
|
||||
}
|
||||
}
|
||||
} as DiyComponent<TitleBarProperty>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div
|
||||
class="title-bar"
|
||||
:style="{
|
||||
background: property.backgroundColor,
|
||||
borderBottom: property.showBottomBorder ? '1px solid #F9F9F9' : '1px solid #fff'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
:style="{
|
||||
fontSize: `${property.titleSize}px`,
|
||||
fontWeight: property.titleWeight,
|
||||
color: property.titleColor,
|
||||
textAlign: property.position
|
||||
}"
|
||||
v-if="property.title"
|
||||
>
|
||||
{{ property.title }}
|
||||
</div>
|
||||
<!-- 副标题 -->
|
||||
<div
|
||||
:style="{
|
||||
fontSize: `${property.descriptionSize}px`,
|
||||
fontWeight: property.descriptionWeight,
|
||||
color: property.descriptionColor,
|
||||
textAlign: property.position
|
||||
}"
|
||||
class="m-t-8px"
|
||||
v-if="property.description"
|
||||
>
|
||||
{{ property.description }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 更多 -->
|
||||
<div
|
||||
class="more"
|
||||
v-show="property.more.show"
|
||||
:style="{
|
||||
color: property.more.type === 'text' ? '#38f' : ''
|
||||
}"
|
||||
>
|
||||
{{ property.more.type === 'icon' ? '' : property.more.text }}
|
||||
<Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { TitleBarProperty } from './config'
|
||||
|
||||
/** 标题栏 */
|
||||
defineOptions({ name: 'TitleBar' })
|
||||
|
||||
defineProps<{ property: TitleBarProperty }>()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 更多 */
|
||||
.more {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
font-size: 10px;
|
||||
color: #969799;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<section class="title-bar">
|
||||
<el-form label-width="85px" :model="formData" :rules="rules">
|
||||
<el-form-item label="主标题" prop="title">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入主标题"
|
||||
show-word-limit
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题" prop="description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.description"
|
||||
placeholder="请输入副标题"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示位置" prop="position">
|
||||
<el-radio-group v-model="formData!.position">
|
||||
<el-tooltip content="居左" placement="top">
|
||||
<el-radio-button label="left">
|
||||
<Icon icon="ant-design:align-left-outlined" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="居中" placement="top">
|
||||
<el-radio-button label="center">
|
||||
<Icon icon="ant-design:align-center-outlined" />
|
||||
</el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题大小" prop="titleSize">
|
||||
<el-slider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题大小" prop="descriptionSize">
|
||||
<el-slider
|
||||
v-model="formData.descriptionSize"
|
||||
:max="60"
|
||||
:min="10"
|
||||
show-input
|
||||
input-size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题粗细" prop="titleWeight">
|
||||
<el-slider
|
||||
v-model="formData.titleWeight"
|
||||
:min="100"
|
||||
:max="900"
|
||||
:step="100"
|
||||
show-input
|
||||
input-size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题粗细" prop="descriptionWeight">
|
||||
<el-slider
|
||||
v-model="formData.descriptionWeight"
|
||||
:min="100"
|
||||
:max="900"
|
||||
:step="100"
|
||||
show-input
|
||||
input-size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题颜色" prop="titleColor">
|
||||
<ColorInput v-model="formData.titleColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题颜色" prop="descriptionColor">
|
||||
<ColorInput v-model="formData.descriptionColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色" prop="backgroundColor">
|
||||
<ColorInput v-model="formData.backgroundColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="底部分割线" prop="showBottomBorder">
|
||||
<el-switch v-model="formData!.showBottomBorder" />
|
||||
</el-form-item>
|
||||
<el-form-item label="查看更多" prop="more.show">
|
||||
<el-checkbox v-model="formData.more.show" />
|
||||
</el-form-item>
|
||||
<!-- 更多样式选择 -->
|
||||
<template v-if="formData.more.show">
|
||||
<el-form-item label="样式" prop="more.type">
|
||||
<el-radio-group v-model="formData.more.type">
|
||||
<el-radio label="text">文字</el-radio>
|
||||
<el-radio label="icon">图标</el-radio>
|
||||
<el-radio label="all">文字+图标</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
|
||||
<el-input v-model="formData.more.text" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接" prop="more.url">
|
||||
<el-input v-model="formData.more.url" placeholder="请输入跳转链接" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</section>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { TitleBarProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'TitleBarProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: TitleBarProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
// 表单校验
|
||||
const rules = {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,37 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 视频播放属性 */
|
||||
export interface VideoPlayerProperty {
|
||||
// 视频链接
|
||||
videoUrl: string
|
||||
// 封面链接
|
||||
posterUrl: string
|
||||
// 是否自动播放
|
||||
autoplay: boolean
|
||||
// 组件样式
|
||||
style: VideoPlayerStyle
|
||||
}
|
||||
|
||||
// 视频播放样式
|
||||
export interface VideoPlayerStyle extends ComponentStyle {
|
||||
// 视频高度
|
||||
height: number
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'VideoPlayer',
|
||||
name: '视频播放',
|
||||
icon: 'ep:video-play',
|
||||
property: {
|
||||
videoUrl: '',
|
||||
posterUrl: '',
|
||||
autoplay: false,
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8,
|
||||
height: 300
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<VideoPlayerProperty>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="w-full" :style="{ height: `${property.style.height}px` }">
|
||||
<el-image class="w-full w-full" :src="property.posterUrl" v-if="property.posterUrl" />
|
||||
<video
|
||||
v-else
|
||||
class="w-full w-full"
|
||||
:src="property.videoUrl"
|
||||
:poster="property.posterUrl"
|
||||
:autoplay="property.autoplay"
|
||||
controls
|
||||
></video>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { VideoPlayerProperty } from './config'
|
||||
|
||||
/** 视频播放 */
|
||||
defineOptions({ name: 'VideoPlayer' })
|
||||
|
||||
defineProps<{ property: VideoPlayerProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 图片 */
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<template #style="{ formData }">
|
||||
<el-form-item label="高度" prop="height">
|
||||
<el-slider
|
||||
v-model="formData.height"
|
||||
:max="500"
|
||||
:min="100"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form label-width="80px" :model="formData">
|
||||
<el-form-item label="上传视频" prop="videoUrl">
|
||||
<UploadFile
|
||||
v-model="formData.videoUrl"
|
||||
:file-type="['mp4']"
|
||||
:limit="1"
|
||||
:file-size="100"
|
||||
class="min-w-80px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传封面" prop="posterUrl">
|
||||
<UploadImg
|
||||
v-model="formData.posterUrl"
|
||||
draggable="false"
|
||||
height="80px"
|
||||
width="100%"
|
||||
class="min-w-80px"
|
||||
>
|
||||
<template #tip> 建议宽度750 </template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动播放" prop="autoplay">
|
||||
<el-switch v-model="formData.autoplay" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ComponentContainerProperty>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VideoPlayerProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
|
||||
// 视频播放属性面板
|
||||
defineOptions({ name: 'VideoPlayerProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: VideoPlayerProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<el-input v-model="valueRef" v-bind="$attrs">
|
||||
<template #append>
|
||||
<el-color-picker v-model="colorRef" :predefine="PREDEFINE_COLORS" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { PREDEFINE_COLORS } from '@/utils/color'
|
||||
|
||||
/**
|
||||
* 带颜色选择器输入框
|
||||
*/
|
||||
defineOptions({ name: 'InputWithColor' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.string.def('').isRequired,
|
||||
color: propTypes.string.def('').isRequired
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: string) => {
|
||||
if (val === unref(valueRef)) return
|
||||
valueRef.value = val
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'update:color'])
|
||||
|
||||
// 输入框的值
|
||||
const valueRef = ref(props.modelValue)
|
||||
watch(
|
||||
() => valueRef.value,
|
||||
(val: string) => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
)
|
||||
// 颜色
|
||||
const colorRef = ref(props.color)
|
||||
watch(
|
||||
() => colorRef.value,
|
||||
(val: string) => {
|
||||
emit('update:color', val)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0;
|
||||
.el-color-picker__trigger {
|
||||
padding: 0;
|
||||
border-left: none;
|
||||
border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
import CrmTeam from './CrmTeamList.vue'
|
||||
|
||||
enum CrmBizTypeEnum {
|
||||
CRM_LEADS = 1, // 线索
|
||||
CRM_CUSTOMER = 2, // 客户
|
||||
CRM_CONTACTS = 3, // 联系人
|
||||
CRM_BUSINESS = 5, // 商机
|
||||
CRM_CONTRACT = 6 // 合同
|
||||
}
|
||||
|
||||
enum CrmPermissionLevelEnum {
|
||||
OWNER = 1, // 负责人
|
||||
READ = 2, // 读
|
||||
WRITE = 3 // 写
|
||||
}
|
||||
|
||||
export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue