新增：开发者中心功能、md编辑器等。
This commit is contained in:
466
pages/developer/[id].vue
Normal file
466
pages/developer/[id].vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 my-20">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 插件编辑 </span>
|
||||
</template>
|
||||
|
||||
<div class="login-layout mt-10 sm:w-screen-xl w-full">
|
||||
<el-form :model="form" label-width="auto" size="large">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="border-card"
|
||||
class="demo-tabs bg-white"
|
||||
>
|
||||
<el-tab-pane label="基本信息" name="info">
|
||||
<el-form-item label="插件ID" class="px-4" label-width="100" label-position="left">
|
||||
<el-input disabled v-model="form.websiteId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="插件标识" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.websiteCode" :disabled="form.websiteCode != ''"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="插件名称" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.websiteName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="域名" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.domain" placeholder="访问域名"/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="后台管理" class="px-4" label-width="100" label-position="left">-->
|
||||
<!-- <el-input v-model="form.adminUrl" placeholder="site.websoft.top"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="插件描述" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.comments" type="textarea" placeholder="插件描述" :rows="4"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" class="px-4" label-width="100" label-position="left">
|
||||
<el-select
|
||||
v-model="form.websiteType"
|
||||
multiple
|
||||
placeholder="选择类型(多选)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in types"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="交付方式" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.deliveryMethod" placeholder="交付方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计费方式" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.chargingMethod" placeholder="计费方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="插件价格" class="px-4" label-width="100" label-position="left">
|
||||
<el-input v-model="form.price" placeholder="插件价格"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="插件图标" class="px-4" label-width="100" label-position="left">
|
||||
<el-upload
|
||||
v-model:file-list="avatar"
|
||||
action="https://common-api.websoft.top/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="avatarRemove"
|
||||
:on-success="avatarSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item class="px-4" label-width="100" label-position="left">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="插件截屏" name="files">
|
||||
<el-upload
|
||||
v-model:file-list="files"
|
||||
action="https://common-api.websoft.top/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="8"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="filesRemove"
|
||||
:on-success="filesSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<el-form-item class="px-4" label-width="100" label-position="left">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="详细介绍" name="content">
|
||||
<!-- 编辑器 -->
|
||||
<MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<el-form-item class="my-4" label-position="left">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="评论管理" name="comments">
|
||||
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="插件设置" name="setting">
|
||||
<el-form-item label="允许展示到插件市场" class="px-4" label-width="200" label-position="left">
|
||||
<el-switch v-model="form.market" title="允许展示到插件市场" @change="onSubmit"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否推荐" class="px-4" label-width="200" label-position="left">
|
||||
<el-switch disabled v-model="form.official" @change="onSubmit"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="官方插件" class="px-4" label-width="200" label-position="left">
|
||||
<el-switch disabled v-model="form.official" @change="onSubmit"/>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="统计信息" name="statistic">
|
||||
<Statistic :form="form"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="操作日志" name="log">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in logs"
|
||||
:key="index"
|
||||
:timestamp="activity.timestamp"
|
||||
>
|
||||
{{ activity.content }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
|
||||
import type {UploadProps, UploadUserFile} from 'element-plus'
|
||||
import {useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import {ref} from 'vue'
|
||||
import {getNavIdByParamsId} from "~/utils/common";
|
||||
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
||||
import {getCmsWebsiteAll, updateCmsWebsite, updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
|
||||
import Comments from "./components/Comments.vue";
|
||||
import type {CompanyComment} from "~/api/system/companyComment/model";
|
||||
import {MdEditor} from 'md-editor-v3';
|
||||
import 'md-editor-v3/lib/style.css';
|
||||
import {uploadOss} from "~/api/system/file";
|
||||
import Statistic from "./components/Statistic.vue";
|
||||
|
||||
|
||||
// 配置信息
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const tenantId = localStorage.getItem('ServerTenantId')
|
||||
const token = useToken();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const website = useWebsite()
|
||||
const user = useUser();
|
||||
const navId = ref();
|
||||
const activeIndex = ref('');
|
||||
const avatar = ref<UploadUserFile[]>([])
|
||||
const files = ref<UploadUserFile[]>([])
|
||||
const srcList = ref<string[]>([])
|
||||
const dialogImageUrl = ref('')
|
||||
const content = ref('');
|
||||
const dialogVisible = ref(false)
|
||||
const activeName = ref('info')
|
||||
const comments = ref<CompanyComment[]>([]);
|
||||
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<CmsWebsite>({
|
||||
// 站点ID
|
||||
websiteId: undefined,
|
||||
// 网站名称
|
||||
websiteName: undefined,
|
||||
// 网站标识
|
||||
websiteCode: undefined,
|
||||
// 网站LOGO
|
||||
websiteIcon: undefined,
|
||||
// 网站LOGO
|
||||
websiteLogo: undefined,
|
||||
// 网站LOGO(深色模式)
|
||||
websiteDarkLogo: undefined,
|
||||
// 网站类型
|
||||
websiteType: undefined,
|
||||
// 评分
|
||||
rate: undefined,
|
||||
// 点赞数
|
||||
likes: undefined,
|
||||
// 访问量
|
||||
clicks: undefined,
|
||||
// 下载量
|
||||
downloads: undefined,
|
||||
// 网站截图
|
||||
files: undefined,
|
||||
// 网站关键词
|
||||
keywords: undefined,
|
||||
// 域名前缀
|
||||
prefix: undefined,
|
||||
// 绑定域名
|
||||
domain: undefined,
|
||||
// 是否官方
|
||||
official: undefined,
|
||||
// 是否显示在插件市场
|
||||
market: undefined,
|
||||
// 全局样式
|
||||
style: undefined,
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 插件版本 10免费版 20专业版 30永久授权
|
||||
version: undefined,
|
||||
// 应用价格
|
||||
price: undefined,
|
||||
// 交付方式
|
||||
deliveryMethod: undefined,
|
||||
// 计费方式
|
||||
chargingMethod: undefined,
|
||||
// 服务到期时间
|
||||
expirationTime: undefined,
|
||||
// 模版ID
|
||||
templateId: undefined,
|
||||
// 行业类型(父级)
|
||||
industryParent: undefined,
|
||||
// 行业类型(子级)
|
||||
industryChild: undefined,
|
||||
// 企业ID
|
||||
companyId: undefined,
|
||||
// 所在国家
|
||||
country: undefined,
|
||||
// 所在省份
|
||||
province: undefined,
|
||||
// 所在城市
|
||||
city: undefined,
|
||||
// 所在辖区
|
||||
region: undefined,
|
||||
// 经度
|
||||
longitude: undefined,
|
||||
// 纬度
|
||||
latitude: undefined,
|
||||
// 街道地址
|
||||
address: undefined,
|
||||
// 联系电话
|
||||
phone: undefined,
|
||||
// 电子邮箱
|
||||
email: undefined,
|
||||
// ICP备案号
|
||||
icpNo: undefined,
|
||||
// 公安备案
|
||||
policeNo: undefined,
|
||||
// 插件介绍
|
||||
content: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 是否推荐
|
||||
recommend: undefined,
|
||||
// 运行状态
|
||||
running: undefined,
|
||||
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
||||
status: undefined,
|
||||
// 维护说明
|
||||
statusText: undefined,
|
||||
// 关闭说明
|
||||
statusClose: undefined,
|
||||
// 状态图标
|
||||
statusIcon: undefined,
|
||||
// 全局样式
|
||||
styles: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
// 网站配置
|
||||
config: undefined,
|
||||
topNavs: undefined,
|
||||
bottomNavs: undefined,
|
||||
loginUser: undefined
|
||||
});
|
||||
|
||||
const logs = [
|
||||
{
|
||||
content: '发布插件',
|
||||
timestamp: '2018-04-15',
|
||||
},
|
||||
{
|
||||
content: '更新',
|
||||
timestamp: '2018-04-13',
|
||||
},
|
||||
{
|
||||
content: '更新',
|
||||
timestamp: '2018-04-11',
|
||||
},
|
||||
]
|
||||
|
||||
const types = [
|
||||
{
|
||||
value: '网站',
|
||||
label: '网站',
|
||||
},
|
||||
{
|
||||
value: '小程序',
|
||||
label: '小程序',
|
||||
},
|
||||
{
|
||||
value: 'MacOS',
|
||||
label: 'MacOS',
|
||||
},
|
||||
{
|
||||
value: 'Windows',
|
||||
label: 'Windows',
|
||||
},
|
||||
{
|
||||
value: 'App',
|
||||
label: 'App',
|
||||
},
|
||||
]
|
||||
|
||||
useHead({
|
||||
title: `用户中心`,
|
||||
meta: [{name: website.value.keywords, content: website.value.comments}]
|
||||
});
|
||||
|
||||
const onDone = (index: string) => {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
const reload = async () => {
|
||||
getCmsWebsiteAll(navId.value).then(data => {
|
||||
// 获取栏目信息
|
||||
assignFields(data)
|
||||
// 插件头像
|
||||
avatar.value = []
|
||||
if (data.websiteLogo) {
|
||||
avatar.value.push({
|
||||
uid: form.websiteId,
|
||||
url: data.websiteLogo,
|
||||
name: '插件头像',
|
||||
})
|
||||
}
|
||||
|
||||
// 插件截图
|
||||
files.value = []
|
||||
if (data.files) {
|
||||
const imgArr = JSON.parse(data.files);
|
||||
imgArr.map((item: any) => {
|
||||
files.value.push({
|
||||
uid: form.websiteId,
|
||||
url: item,
|
||||
name: '插件截图',
|
||||
})
|
||||
srcList.value.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
if(data.websiteType){
|
||||
form.websiteType = JSON.parse(data.websiteType)
|
||||
}
|
||||
|
||||
// 设置页面标题
|
||||
useSeoMeta({
|
||||
description: data.comments || data.websiteName,
|
||||
keywords: data.websiteName,
|
||||
titleTemplate: `${data?.websiteName}` + ' - %s',
|
||||
})
|
||||
|
||||
|
||||
// 加载评论
|
||||
|
||||
}).catch(err => {
|
||||
console.log(err, '加载失败...')
|
||||
})
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.websiteLogo = '';
|
||||
}
|
||||
|
||||
const avatarSuccess = (e: any) => {
|
||||
form.websiteLogo = e.data.downloadUrl
|
||||
}
|
||||
|
||||
const filesRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.files = JSON.stringify('');
|
||||
}
|
||||
|
||||
const filesSuccess = (e: any) => {
|
||||
srcList.value.push(e.data.downloadUrl)
|
||||
}
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 图片上传
|
||||
const onUploadImg = async (files: any, callback: any) => {
|
||||
const res = await Promise.all(
|
||||
files.map((file: any) => {
|
||||
return new Promise((rev, rej) => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
uploadOss(file).then((res: any) => rev(res))
|
||||
.catch((error: any) => rej(error));
|
||||
});
|
||||
})
|
||||
);
|
||||
console.log(res, '上次')
|
||||
callback(res.map((item) => item.url));
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
form.files = undefined;
|
||||
if (srcList.value.length > 0) {
|
||||
form.files = JSON.stringify(srcList.value)
|
||||
}
|
||||
if(form.websiteType){
|
||||
form.websiteType = JSON.stringify(form.websiteType)
|
||||
}
|
||||
updateCmsWebsiteAll(form).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(id) => {
|
||||
navId.value = getNavIdByParamsId(id);
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
82
pages/developer/components/AppInfo.vue
Normal file
82
pages/developer/components/AppInfo.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div v-if="form" class="app-info flex justify-around items-center">
|
||||
<div class="item text-center">
|
||||
<div class="rate text-gray-400">评分</div>
|
||||
<div class="text-2xl font-bold">3.1</div>
|
||||
<el-rate v-model="form.rate" disabled size="small"/>
|
||||
</div>
|
||||
<el-divider class="opacity-40" style="height: 40px" direction="vertical" />
|
||||
<div class="item text-center flex flex-col items-center">
|
||||
<div class="text-gray-400">插件ID</div>
|
||||
<el-icon size="24" class="py-1"><Cpu /></el-icon>
|
||||
<span class="text-gray-500">{{ form.websiteId }}</span>
|
||||
</div>
|
||||
<el-divider class="opacity-40" style="height: 40px" direction="vertical" />
|
||||
<nuxt-link :to="`https://${form.domain}`" class="item text-center flex flex-col items-center">
|
||||
<div class="text-gray-400">域名</div>
|
||||
<el-icon size="24" class="py-1"><Compass /></el-icon>
|
||||
<span class="text-gray-500">{{ form.domain }}</span>
|
||||
</nuxt-link>
|
||||
<el-divider class="opacity-40" style="height: 40px" direction="vertical" />
|
||||
<nuxt-link :to="`https://${form.tenantId}.wsdns.cn`" class="item text-center flex flex-col items-center">
|
||||
<div class="text-gray-400">开发者</div>
|
||||
<el-icon size="24" class="py-1"><Avatar /></el-icon>
|
||||
<span class="text-gray-500">{{'WebSoft Inc.'}}</span>
|
||||
</nuxt-link>
|
||||
<el-divider class="opacity-40" style="height: 40px" direction="vertical" />
|
||||
<div class="item text-center flex flex-col items-center">
|
||||
<div class="text-gray-400">下载次数</div>
|
||||
<!-- <div>#<span class="text-2xl font-bold">13</span></div>-->
|
||||
<el-icon size="24" class="py-1"><Download /></el-icon>
|
||||
<span class="text-gray-500">{{ form.downloads }}</span>
|
||||
</div>
|
||||
<el-divider class="opacity-40" style="height: 40px" direction="vertical" />
|
||||
<div class="item text-center">
|
||||
<div class="text-gray-400">大小</div>
|
||||
<div class="text-2xl font-bold">26</div>
|
||||
<span class="text-gray-400">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View, Menu, Search,Compass, Cpu,Monitor, Download, Platform, Avatar } from '@element-plus/icons-vue'
|
||||
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
||||
import {getTenantIdByDomain} from "~/api/cms/cmsDomain";
|
||||
import {listTenant} from "~/api/system/tenant";
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: CmsWebsite;
|
||||
value?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', where: any): void
|
||||
}>()
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<any>({
|
||||
keywords: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
status: 0,
|
||||
parentId: undefined,
|
||||
categoryId: undefined,
|
||||
lang: i18n.locale.value
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
|
||||
}
|
||||
reload();
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
195
pages/developer/components/Comments.vue
Normal file
195
pages/developer/components/Comments.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<el-descriptions title="评分及评价">
|
||||
<template #extra>
|
||||
<el-button type="text" @click="onComplaint">投诉</el-button>
|
||||
<el-button type="text" @click="onComments">发表评论</el-button>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
<form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
class="w-full sm:py-2"
|
||||
size="large"
|
||||
status-icon
|
||||
>
|
||||
<template v-if="comments && comments.length > 0">
|
||||
<div class="w-full">
|
||||
<div v-for="(item,index) in comments" :key="index"
|
||||
class="flex flex-col border-b-2 border-gray-200 pb-2 mb-3"
|
||||
style="border-bottom:1px solid #f3f3f3">
|
||||
<el-space class="user-info flex items-start" style="align-items:normal">
|
||||
<div class="avatar">
|
||||
<el-avatar :src="item.logo"/>
|
||||
</div>
|
||||
<div class="nickname flex flex-col">
|
||||
<el-space class="text-sm text-gray-900">
|
||||
<span class="font-bold">{{ item.tenantName }}</span>
|
||||
<el-rate v-model="item.rate" disabled size="small"/>
|
||||
</el-space>
|
||||
<span class="text-xs text-gray-400">{{ item.createTime }}</span>
|
||||
<div class="comments py-2" v-html="item.comments"></div>
|
||||
<template v-if="item.children" v-for="(sub,index2) in item.children" :key="index2">
|
||||
<el-space class="text-sm text-gray-900">
|
||||
<el-avatar :src="sub.logo" size="small"/>
|
||||
<span class="font-bold">{{ sub.tenantName }}</span>
|
||||
<span class="text-xs text-gray-400">{{ sub.createTime }}</span>
|
||||
</el-space>
|
||||
<div class="comments py-2" v-html="sub.comments"></div>
|
||||
</template>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination flex justify-center">
|
||||
<el-pagination background layout="prev, pager, next" size="small" :total="count" @change="onPageChange"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
暂无用户评论
|
||||
</template>
|
||||
|
||||
<!-- 发表评论 -->
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="发表评论"
|
||||
align-center
|
||||
width="500"
|
||||
:before-close="() => visible = false"
|
||||
>
|
||||
<el-form-item prop="rate">
|
||||
<el-rate v-model="form.rate" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="comments">
|
||||
<el-input v-model="form.comments" :rows="5" type="textarea"
|
||||
placeholder="最多300字，支持 markdown 语法。请认真填写评论内容，以便于帮助作者更好完善插件，如需反馈问题，请到下方插件提问进行提交。"/>
|
||||
</el-form-item>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(formRef)">
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 发起投诉 -->
|
||||
<el-dialog
|
||||
v-model="visible2"
|
||||
title="为什么举报此内容?"
|
||||
align-center
|
||||
width="500"
|
||||
:before-close="() => visible2 = false"
|
||||
>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="与我无关" value="与我无关"/>
|
||||
<el-checkbox label="文章过时" value="文章过时"/>
|
||||
<el-checkbox label="标题有误" value="标题有误"/>
|
||||
<el-checkbox label="图像质量差或视觉缺陷" value="图像质量差或视觉缺陷"/>
|
||||
<el-checkbox label="垃圾邮件" value="垃圾邮件"/>
|
||||
<el-checkbox label="成人或违法违规内容" value="成人或违法违规内容"/>
|
||||
<el-checkbox label="侵犯知识产权" value="侵犯知识产权"/>
|
||||
</el-checkbox-group>
|
||||
<div class="py-3">
|
||||
<el-input v-model="form.comments" :rows="5" type="textarea"
|
||||
placeholder="在此处输入反馈。请记住不要包含个人信息，如电话号码。"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(formRef)">
|
||||
提交
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {FullScreen} from '@element-plus/icons-vue'
|
||||
import type {ApiResult} from "~/api";
|
||||
import type {FormInstance, FormRules} from "element-plus";
|
||||
import {useClientRequest} from "~/composables/useClientRequest";
|
||||
import {reactive, ref} from "vue";
|
||||
import useFormData from "~/utils/use-form-data";
|
||||
import type {CompanyComment} from "~/api/system/companyComment/model";
|
||||
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
companyId?: number;
|
||||
comments?: CompanyComment[];
|
||||
count?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const visible = ref<boolean>(false);
|
||||
const visible2 = ref<boolean>(false);
|
||||
const checkList = ref<string[]>([]);
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', page: number): void
|
||||
}>()
|
||||
|
||||
// 配置信息
|
||||
const {form, resetFields} = useFormData<CompanyComment>({
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
userId: undefined,
|
||||
companyId: undefined,
|
||||
rate: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
});
|
||||
|
||||
const rules = reactive<FormRules<any>>({
|
||||
rate: [
|
||||
{required: true, message: '请输入评分', trigger: 'blur'},
|
||||
],
|
||||
comments: [
|
||||
{required: true, message: '请输入手机号码', trigger: 'blur'},
|
||||
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
|
||||
],
|
||||
})
|
||||
|
||||
const onComments = () => {
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
const onComplaint = () => {
|
||||
visible2.value = true;
|
||||
}
|
||||
|
||||
const onPageChange = (page: number) => {
|
||||
emit('done', page)
|
||||
}
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
if (form.rate === 0) {
|
||||
ElMessage.error('还没有评分哦!')
|
||||
return false;
|
||||
}
|
||||
form.companyId = Number(getIdBySpm(5));
|
||||
useClientRequest<ApiResult<any>>(`/system/company-comment`, {
|
||||
method: 'POST',
|
||||
body: form
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success(res.message)
|
||||
visible.value = false
|
||||
resetFields();
|
||||
emit('done',0)
|
||||
} else {
|
||||
return ElMessage.error(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
102
pages/developer/components/PageBanner.vue
Normal file
102
pages/developer/components/PageBanner.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="banner m-auto relative sm:flex">
|
||||
<div class="md:w-screen-xl m-auto py-10">
|
||||
<div class="gap-8 sm:gap-y-16 lg:items-center" v-if="form">
|
||||
<div class="w-full sm:px-0 px-4">
|
||||
<div class="flex flex-1">
|
||||
<template v-if="form.websiteLogo">
|
||||
<el-image :src="form.websiteLogo" shape="square"
|
||||
class="hidden-sm-and-down bg-white w-[128px] h-[128px] cursor-pointer rounded-avatar shadow-sm hover:shadow mr-6"/>
|
||||
</template>
|
||||
<div class="title flex flex-col">
|
||||
<h1
|
||||
class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl lg:text-3xl">
|
||||
<el-space>
|
||||
<span>{{ form.websiteName }}</span>
|
||||
</el-space>
|
||||
</h1>
|
||||
<div class="my-1 text-sm text-gray-500 w-auto sm:max-w-3xl max-w-xs flex-1 dark:text-gray-400">
|
||||
{{ form?.comments || desc }}
|
||||
</div>
|
||||
<el-space class="btn">
|
||||
<nuxt-link target="_blank"><el-button type="primary" round>获取</el-button></nuxt-link>
|
||||
</el-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {ApiResult} from "~/api";
|
||||
import type {Company} from "~/api/system/company/model";
|
||||
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
||||
|
||||
const token = useToken();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: CmsWebsite;
|
||||
value?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void
|
||||
}>()
|
||||
|
||||
const onBuy = (item: Company) => {
|
||||
// if(item.type === 1){
|
||||
// // 插件
|
||||
// openSpmUrl(`/product/checkout`,item,item.productId)
|
||||
// }else {
|
||||
// // 产品
|
||||
// openSpmUrl(`/product/create`,item,item.productId)
|
||||
// }
|
||||
if (!token.value || token.value == '') {
|
||||
ElMessage.error('请先登录');
|
||||
setTimeout(() => {
|
||||
navigateTo(`/product/create`)
|
||||
}, 500)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 安装插件
|
||||
const installPlug = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '安装中...'
|
||||
})
|
||||
useClientRequest<ApiResult<any>>(`/system/menu/install`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
companyId: getIdBySpm(5)
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
setTimeout(() => {
|
||||
ElMessage.success(res.message);
|
||||
loading.close()
|
||||
emit('done')
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.rounded-avatar {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.rounded-avatar-xs {
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
45
pages/developer/components/SearchBar.vue
Normal file
45
pages/developer/components/SearchBar.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-space class="flex items-center">
|
||||
<el-input v-model="where.keywords" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="reload"/>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: CmsArticle;
|
||||
value?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', where: any): void
|
||||
}>()
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<any>({
|
||||
keywords: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
status: 0,
|
||||
parentId: undefined,
|
||||
categoryId: undefined,
|
||||
lang: i18n.locale.value
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
navigateTo(`/search/${where.keywords}`)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
74
pages/developer/components/Statistic.vue
Normal file
74
pages/developer/components/Statistic.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-row :gutter="24" class="mb-10">
|
||||
<el-col :span="6">
|
||||
<el-statistic title="浏览" :value="38"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="销量" :value="2"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="下载次数" :value="54" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="营业额(元)" :value="outputValue"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="24" class="mb-10">
|
||||
<el-col :span="6">
|
||||
<el-statistic title="总浏览" :value="268500"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="总销量" :value="1253"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="总下载次数" :value="outputValue*128"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-statistic title="总销售额(元)" :value="562" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {Search} from '@element-plus/icons-vue'
|
||||
import { useTransition } from '@vueuse/core'
|
||||
import { ChatLineRound, Male } from '@element-plus/icons-vue'
|
||||
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
desc?: string;
|
||||
buyUrl?: string;
|
||||
form?: CmsArticle;
|
||||
value?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', where: any): void
|
||||
}>()
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<any>({
|
||||
keywords: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
status: 0,
|
||||
parentId: undefined,
|
||||
categoryId: undefined,
|
||||
lang: i18n.locale.value
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
navigateTo(`/search/${where.keywords}`)
|
||||
}
|
||||
const source = ref(0)
|
||||
const outputValue = useTransition(source, {
|
||||
duration: 1500,
|
||||
})
|
||||
source.value = 1720
|
||||
</script>
|
||||
98
pages/developer/index.vue
Normal file
98
pages/developer/index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
|
||||
<!-- 主体部分 -->
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-20">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 开发者中心 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-space class="flex items-center">
|
||||
</el-space>
|
||||
</template>
|
||||
<el-row :gutter="24" id="container" class="clearfix">
|
||||
<el-col v-for="(item,index) in list" :key="index" :span="8" class="left mb-8">
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px' }" class=" hover:bg-white cursor-pointer">
|
||||
<nuxt-link :to="`/developer/${item.websiteId}`">
|
||||
<div class="flex-1 px-4 py-5 sm:p-4 !p-4">
|
||||
<div class="text-gray-700 dark:text-white text-base font-semibold flex gap-1.5">
|
||||
<el-avatar
|
||||
:src="item.websiteLogo" shape="square" :size="55" style="background-color: white;"/>
|
||||
<div class="flex-1 text-lg cursor-pointer flex flex-col">
|
||||
{{ item.websiteName }}
|
||||
<div class="flex justify-between items-center">
|
||||
<sapn class="text-xs text-gray-400 font-normal line-clamp-1">{{ item.comments || '暂无描述' }}</sapn>
|
||||
<el-button size="small" round>编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-image pt-3">
|
||||
<el-image v-if="item.files" :src="`${JSON.parse(item.files)[0]}`" class="w-full h-1/2 max-h-[220px]" />
|
||||
<el-image v-else class="w-full h-[220px]" />
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-page-header>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
|
||||
import {pageCmsWebsiteAll} from "~/api/cms/cmsWebsite";
|
||||
import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
// 页面信息
|
||||
const list = ref<CmsWebsite[]>([]);
|
||||
const total = ref(0);
|
||||
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<CmsWebsiteParam>({
|
||||
keywords: '',
|
||||
page: 1,
|
||||
limit: 12,
|
||||
status: undefined,
|
||||
recommend: undefined,
|
||||
categoryId: undefined,
|
||||
userId: Number(localStorage.getItem('UserId')),
|
||||
lang: undefined
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 加载页面数据
|
||||
const reload = async () => {
|
||||
await pageCmsWebsiteAll(where).then(response => {
|
||||
if(response?.list){
|
||||
list.value = response?.list;
|
||||
total.value = response.count;
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
* @param data
|
||||
*/
|
||||
const search = (data: CmsArticleParam) => {
|
||||
where.page = data.page;
|
||||
reload();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(id) => {
|
||||
// navId.value = getNavIdByParamsId(id);
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user