创建开发分支
This commit is contained in:
parent
27dce4d7a7
commit
2f9ba66e75
30
.gitignore
vendored
30
.gitignore
vendored
|
|
@ -1,30 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
33
README.md
33
README.md
|
|
@ -1,33 +0,0 @@
|
|||
# qingcheng-Web
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
1
greenOrange/components.d.ts
vendored
1
greenOrange/components.d.ts
vendored
|
|
@ -30,6 +30,7 @@ declare module 'vue' {
|
|||
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -22,10 +22,17 @@
|
|||
</template>
|
||||
<a-menu-item key="/project">接单管理</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item key="/applicationRecord">
|
||||
<CommentOutlined />
|
||||
<span>结算管理</span>
|
||||
</a-menu-item>
|
||||
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
<CommentOutlined />
|
||||
<span>结算管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="/applicationRecord">推广码申请记录</a-menu-item>
|
||||
<a-menu-item key="/settlementRecord">提现申请记录</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
// 时间处理
|
||||
import router from "../router";
|
||||
|
||||
export const formatTime = (row: any) => {
|
||||
let data = row.value;
|
||||
return data.slice(0, 16).replace('T', '~');
|
||||
}
|
||||
|
||||
export const backPage = () => {
|
||||
router.back()
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// // src/utils/crypto.ts
|
||||
// import JSEncrypt from 'jsencrypt'
|
||||
//
|
||||
// export function rsaEncrypt(password: string): string {
|
||||
// const encryptor = new JSEncrypt()
|
||||
//
|
||||
// // 强化公钥校验
|
||||
// const publicKey = import.meta.env.VITE_RSA_PUBLIC_KEY?.trim()
|
||||
//
|
||||
// if (!publicKey || !publicKey.startsWith('-----BEGIN PUBLIC KEY-----')) {
|
||||
// throw new Error('无效的RSA公钥配置')
|
||||
// }
|
||||
//
|
||||
// encryptor.setPublicKey(publicKey)
|
||||
//
|
||||
// const encrypted = encryptor.encrypt(password)
|
||||
//
|
||||
// if (!encrypted) {
|
||||
// throw new Error('加密失败，请检查公钥格式')
|
||||
// }
|
||||
//
|
||||
// return encrypted
|
||||
// }
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
// 基础版本（无UI框架依赖）
|
||||
type MessageType = 'success' | 'error' | 'warning' | 'info'
|
||||
type MessageOptions = {
|
||||
duration?: number
|
||||
showClose?: boolean
|
||||
}
|
||||
|
||||
// 消息队列（防止重复提示）
|
||||
let messageQueue = new Set<string>()
|
||||
|
||||
export const showMessage = (
|
||||
message: string,
|
||||
type: MessageType = 'info',
|
||||
options: MessageOptions = {}
|
||||
): void => {
|
||||
// 防重复机制
|
||||
if (messageQueue.has(message)) return
|
||||
messageQueue.add(message)
|
||||
|
||||
// 创建消息容器
|
||||
const messageEl = document.createElement('div')
|
||||
messageEl.className = `message ${type}`
|
||||
messageEl.innerHTML = `
|
||||
<span class="icon">${type === 'error' ? '❗' : '💡'}</span>
|
||||
<span>${message}</span>
|
||||
${options.showClose ? '<button class="close">×</button>' : ''}
|
||||
`
|
||||
|
||||
// 样式注入
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
.message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.success { border-left: 4px solid #67c23a; }
|
||||
.error { border-left: 4px solid #f56c6c; }
|
||||
.warning { border-left: 4px solid #e6a23c; }
|
||||
.close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
|
||||
// 添加到DOM
|
||||
document.body.appendChild(messageEl)
|
||||
|
||||
// 自动移除
|
||||
setTimeout(() => {
|
||||
messageEl.remove()
|
||||
style.remove()
|
||||
messageQueue.delete(message)
|
||||
}, options.duration || 3000)
|
||||
|
||||
// 手动关闭
|
||||
messageEl.querySelector('.close')?.addEventListener('click', () => {
|
||||
messageEl.remove()
|
||||
style.remove()
|
||||
messageQueue.delete(message)
|
||||
})
|
||||
}
|
||||
|
||||
// 快捷方法
|
||||
export const message = {
|
||||
success: (msg: string, opts?: MessageOptions) => showMessage(msg, 'success', opts),
|
||||
error: (msg: string, opts?: MessageOptions) => showMessage(msg, 'error', opts),
|
||||
warning: (msg: string, opts?: MessageOptions) => showMessage(msg, 'warning', opts),
|
||||
info: (msg: string, opts?: MessageOptions) => showMessage(msg, 'info', opts)
|
||||
}
|
||||
|
|
@ -1,38 +1,93 @@
|
|||
<template>
|
||||
<div class="edit-page">
|
||||
<h1>文章编辑</h1>
|
||||
<div class="image-container">
|
||||
<!-- 本地服务器图片 -->
|
||||
<div class="image-box">
|
||||
<h3>本地服务器图片</h3>
|
||||
<img
|
||||
src="http://localhost:3456/file/download/view=project-LGFZOJYQ"
|
||||
alt="本地服务器图片"
|
||||
class="responsive-image"
|
||||
>
|
||||
</div>
|
||||
|
||||
<RichTextEditor
|
||||
:context="initialContent"
|
||||
:disable="isDisabled"
|
||||
@content-change="handleContentChange"
|
||||
/>
|
||||
|
||||
<button @click="saveContent">保存内容</button>
|
||||
<!-- 网络图片 -->
|
||||
<div class="image-box">
|
||||
<h3>网络图片示例</h3>
|
||||
<img
|
||||
src="https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=75398285,2076154952&fm=253&gp=0.jpg"
|
||||
alt="示例网络图片"
|
||||
class="responsive-image"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import RichTextEditor from './components/RichTextEditor.vue'
|
||||
|
||||
const initialContent = ref('<p>初始内容</p>') // 从接口获取
|
||||
const isDisabled = ref(false)
|
||||
|
||||
const handleContentChange = (html) => {
|
||||
console.log('最新内容:', html)
|
||||
// 可在此处实时保存草稿
|
||||
}
|
||||
|
||||
const saveContent = () => {
|
||||
// 提交到后端接口
|
||||
axios.post('/api/save', { content: initialContent.value })
|
||||
<script>
|
||||
export default {
|
||||
name: 'ImageViewer',
|
||||
// 可以在这里添加数据属性来动态设置图片URL
|
||||
data() {
|
||||
return {
|
||||
// 示例：动态图片URL
|
||||
dynamicImageUrl: 'https://example.com/your-image.jpg'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.image-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.image-box:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.image-box h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.responsive-image:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.image-url {
|
||||
margin-top: 15px;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
background: #f9f9f9;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<h2>欢迎登录青橙校园管理端</h2>
|
||||
<div class="input-box">
|
||||
|
||||
<input type="text" placeholder="账户" v-model="userAccount"/>
|
||||
<input type="text" placeholder="账号" v-model="userAccount"/>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
|
||||
|
|
|
|||
|
|
@ -142,46 +142,61 @@
|
|||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-container">
|
||||
<div class="rich-text-columns">
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">结算说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.settlementDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.settlementDesc = html"
|
||||
/>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">结算说明</span>
|
||||
<div class="rich-text-editor">
|
||||
<QuillEditor
|
||||
v-model:content="formData.settlementDesc"
|
||||
contentType="html"
|
||||
:options="editorOptions"
|
||||
@change="onContentChange"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectDesc = html"
|
||||
/>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目说明</span>
|
||||
<div class="rich-text-editor">
|
||||
<QuillEditor
|
||||
v-model:content="formData.projectDesc"
|
||||
contentType="html"
|
||||
:options="editorOptions"
|
||||
@change="onContentChange"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目流程</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectFlow"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectFlow = html"
|
||||
/>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目流程</span>
|
||||
<div class="rich-text-editor">
|
||||
<QuillEditor
|
||||
v-model:content="formData.projectFlow"
|
||||
contentType="html"
|
||||
:options="editorOptions"
|
||||
@change="onContentChange"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">申请推广码说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.applyPromoCodeDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.applyPromoCodeDesc = html"
|
||||
/>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">申请推广码说明</span>
|
||||
<div class="rich-text-editor">
|
||||
<QuillEditor
|
||||
v-model:content="formData.applyPromoCodeDesc"
|
||||
contentType="html"
|
||||
:options="editorOptions"
|
||||
@change="onContentChange"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -195,13 +210,39 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, nextTick,ref } from 'vue';
|
||||
import RichTextEditor from '../components/RichTextEditor.vue';
|
||||
// import { QuillEditor } from '@vueup/vue-quill';
|
||||
import axios from 'axios';
|
||||
import { QuillEditor } from '@vueup/vue-quill';
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import router from "../../router";
|
||||
|
||||
// 添加 Quill 配置类型
|
||||
interface QuillOptions {
|
||||
theme: string;
|
||||
modules: {
|
||||
toolbar: Array<any[] | object>;
|
||||
};
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
// 定义富文本编辑器配置
|
||||
const editorOptions: QuillOptions = {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
[{ script: 'sub' }, { script: 'super' }],
|
||||
['link', 'image', 'video'],
|
||||
['clean']
|
||||
]
|
||||
},
|
||||
placeholder: '请输入内容...'
|
||||
};
|
||||
|
||||
// 接口定义
|
||||
interface ProjectForm {
|
||||
projectName: string;
|
||||
projectImage: string;
|
||||
|
|
@ -214,7 +255,6 @@ interface ProjectForm {
|
|||
projectFlow: string;
|
||||
applyPromoCodeDesc: string;
|
||||
}
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
|
|
@ -266,7 +306,18 @@ const formData = reactive<ProjectForm>({
|
|||
projectImage: ''
|
||||
});
|
||||
|
||||
|
||||
// 内容变化处理
|
||||
const onContentChange = () => {
|
||||
// 更新预览内容
|
||||
const phoneContent = document.querySelector('.phone-content');
|
||||
if (phoneContent) {
|
||||
// 添加平滑滚动效果
|
||||
phoneContent.scrollTo({
|
||||
top: phoneContent.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
|
|
@ -317,7 +368,13 @@ const handleSubmit = async () => {
|
|||
}
|
||||
} catch (error) {
|
||||
console.error('请求失败：', error);
|
||||
|
||||
if (axios.isAxiosError(error)) {
|
||||
// 显示详细错误信息
|
||||
const msg = error.response?.data?.message || error.message;
|
||||
alert(`请求错误（${error.response?.status}）：${msg}`);
|
||||
} else {
|
||||
alert('未知错误');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -493,91 +550,39 @@ const handleSubmit = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
.rich-text-container {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.rich-text-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 修正列宽分配 */
|
||||
gap: 1rem; /* 减小间距 */
|
||||
align-items: start; /* 顶部对齐 */
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* 减小标签与编辑器间距 */
|
||||
height: 100%; /* 保持等高布局 */
|
||||
|
||||
}
|
||||
.rich-text-group:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1440px) {
|
||||
.rich-text-columns {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: repeat(2, 1fr); /* 更早切换为2列 */
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
.rich-text-editor {
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
/* 新增焦点状态 */
|
||||
&:focus-within {
|
||||
border-color: #6366f1 !important;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 调整标签与编辑器间距 */
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
/* 新增标签焦点状态联动 */
|
||||
&:focus-within .label-text {
|
||||
color: #6366f1;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
.rich-text-editor:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
/* 保持与其他输入组件的一致性 */
|
||||
.rich-text-group .label-text {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #3b4151;
|
||||
padding-left: 0.2rem;
|
||||
transition: color 0.3s ease;
|
||||
.ql-toolbar {
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ql-editor.ql-blank::before {
|
||||
color: #94a3b8;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 手机预览样式 */
|
||||
.phone-preview-container {
|
||||
|
|
@ -588,8 +593,8 @@ const handleSubmit = async () => {
|
|||
|
||||
.phone-frame {
|
||||
position: relative;
|
||||
width: 316px;
|
||||
height: 630px;
|
||||
width: 320px;
|
||||
height: 640px;
|
||||
background: #000;
|
||||
border-radius: 40px;
|
||||
padding: 15px;
|
||||
|
|
@ -706,9 +711,6 @@ const handleSubmit = async () => {
|
|||
font-size: 0.9rem;
|
||||
color: #4a5568;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.phone-section-content * {
|
||||
|
|
@ -740,7 +742,10 @@ const handleSubmit = async () => {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* 动画效果 */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import {ref, onMounted} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
import { reactive } from 'vue';
|
||||
|
|
@ -9,7 +9,7 @@ const columns = [
|
|||
{
|
||||
title: '项目明细ID',
|
||||
dataIndex: 'id',
|
||||
width: 20,
|
||||
width: 50,
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
|
|
@ -18,7 +18,7 @@ const columns = [
|
|||
title: '项目明细名称',
|
||||
dataIndex: 'projectDetailName',
|
||||
key: 'projectDetailName',
|
||||
width: 20,
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
|
|
@ -48,14 +48,14 @@ const columns = [
|
|||
title: '项目ID',
|
||||
dataIndex: 'projectId',
|
||||
key: 'projectId',
|
||||
width: 70,
|
||||
width: 50,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 70,
|
||||
width: 50,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
|
@ -76,6 +76,10 @@ const loading = ref(false);
|
|||
const error = ref("");
|
||||
const searchId = ref(""); // 新增搜索ID绑定
|
||||
|
||||
// 新增变量保存原始数据
|
||||
const originalTableData = ref<ProjectDetail[]>([]);
|
||||
|
||||
// 修改 getMoneyDetail 方法
|
||||
const getMoneyDetail = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
|
|
@ -93,6 +97,8 @@ const getMoneyDetail = async (id: string | number) => {
|
|||
|
||||
if (response.code === 1) {
|
||||
tableData.value = response.data;
|
||||
// 保存原始数据
|
||||
originalTableData.value = response.data;
|
||||
} else {
|
||||
error.value = "获取项目详情失败";
|
||||
tableData.value = [];
|
||||
|
|
@ -105,6 +111,38 @@ const getMoneyDetail = async (id: string | number) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 修改搜索处理方法 - 前端过滤
|
||||
const handleIdSearch = (value: string) => {
|
||||
if (!value.trim()) {
|
||||
// 如果搜索值为空，显示所有数据
|
||||
tableData.value = [...originalTableData.value];
|
||||
return;
|
||||
}
|
||||
|
||||
const id = Number(value);
|
||||
if (isNaN(id)) {
|
||||
message.warning("ID必须为数字");
|
||||
return;
|
||||
}
|
||||
|
||||
// 前端过滤逻辑
|
||||
const filtered = originalTableData.value.filter(item => item.id === id);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
message.warning("未找到匹配的项目明细");
|
||||
tableData.value = [];
|
||||
} else {
|
||||
tableData.value = filtered;
|
||||
}
|
||||
};
|
||||
|
||||
// 修改重置方法
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
// 重置时显示所有原始数据
|
||||
tableData.value = [...originalTableData.value];
|
||||
};
|
||||
|
||||
// 新增根据明细ID查询的方法
|
||||
const queryDetailById = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
|
@ -135,31 +173,6 @@ const queryDetailById = async (id: string | number) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 新增搜索处理方法
|
||||
const handleIdSearch = async (value: string) => {
|
||||
if (!value.trim()) {
|
||||
message.warning("请输入有效的项目明细ID");
|
||||
return;
|
||||
}
|
||||
|
||||
const id = Number(value);
|
||||
if (isNaN(id)) {
|
||||
message.warning("ID必须为数字");
|
||||
return;
|
||||
}
|
||||
|
||||
await queryDetailById(id);
|
||||
};
|
||||
|
||||
// 修改重置方法
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
// 重置时重新加载原始项目数据
|
||||
if (projectId.value) {
|
||||
getMoneyDetail(projectId.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化逻辑
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
|
|
@ -262,6 +275,14 @@ const openAddDrawer = () => {
|
|||
|
||||
// 提交新增请求
|
||||
const handleAddSubmit = async () => {
|
||||
if (
|
||||
addFormState.projectSettlementPrice === 0 ||
|
||||
addFormState.projectMinSettlementPrice === 0 ||
|
||||
addFormState.maxCommissionRate === 0
|
||||
) {
|
||||
message.error("结算价、最小结算价和抽成比例不能为0");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
|
|
@ -308,6 +329,14 @@ const goAddProject = () => {
|
|||
|
||||
// 修改handleSubmit方法
|
||||
const handleSubmit = async () => {
|
||||
if (
|
||||
formState.projectSettlementPrice === 0 ||
|
||||
formState.projectMinSettlementPrice === 0 ||
|
||||
formState.maxCommissionRate === 0
|
||||
) {
|
||||
message.error("结算价、最小结算价和抽成比例不能为0");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
|
|
@ -350,6 +379,14 @@ const handleSubmit = async () => {
|
|||
};
|
||||
|
||||
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
// 返回上一级方法
|
||||
const goBack = () => {
|
||||
router.go(-1); // 返回上一页
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -365,7 +402,9 @@ const handleSubmit = async () => {
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="goAddProject">新增项目明细</a-button>
|
||||
|
|
@ -411,6 +450,12 @@ const handleSubmit = async () => {
|
|||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="table-footer">
|
||||
<a-button @click="goBack" class="back-button">返回</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
|
|
@ -441,6 +486,8 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="formState.projectSettlementPrice"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
|
@ -448,6 +495,8 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="formState.projectMinSettlementPrice"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
|
@ -455,6 +504,8 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="formState.maxCommissionRate"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:max="100"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
|
@ -486,6 +537,8 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="addFormState.projectSettlementPrice"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
|
@ -493,6 +546,8 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="addFormState.projectMinSettlementPrice"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
|
@ -500,11 +555,13 @@ const handleSubmit = async () => {
|
|||
<a-input-number
|
||||
v-model:value="addFormState.maxCommissionRate"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:max="100"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
<a-button class="custom-button" html-type="submit">提交</a-button>
|
||||
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
|
|
@ -609,4 +666,22 @@ const handleSubmit = async () => {
|
|||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
/* 新增表格页脚样式 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* 调整分页器位置 */
|
||||
:deep(.ant-table-pagination.ant-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import { message } from "ant-design-vue";
|
||||
|
|
@ -190,7 +190,13 @@ const updateProject = () => {
|
|||
isEditing.value = true;
|
||||
};
|
||||
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
// 返回上一级方法
|
||||
const goBack = () => {
|
||||
router.go(-1); // 返回上一页
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -209,6 +215,7 @@ const updateProject = () => {
|
|||
<!-- {{ statusMap[projectData.projectStatus]?.text }}-->
|
||||
<!-- </div>-->
|
||||
<a-button class="custom-button" @click="updateProject">编辑项目</a-button>
|
||||
<a-button class="custom-button" @click="goBack">返回</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
|
|
@ -260,7 +267,10 @@ const updateProject = () => {
|
|||
<div v-if="isEditing && projectData" class="add-project-container">
|
||||
<a-form ref="formRef" :model="projectData" layout="vertical" @submit.prevent="finishEditing">
|
||||
<div class="form-section">
|
||||
<h2>项目基本信息</h2>
|
||||
<div class="form-header">
|
||||
<h2>项目基本信息</h2>
|
||||
<a-button class="custom-button" @click="isEditing = false">返回</a-button>
|
||||
</div>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="项目名称">
|
||||
|
|
@ -374,6 +384,27 @@ const updateProject = () => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 原有样式保持不变 */
|
||||
.project-detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
|
|
@ -659,4 +690,6 @@ const updateProject = () => {
|
|||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import {ref, onMounted, reactive} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
import router from "../../router";
|
||||
|
||||
// 修改表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '项目通知ID',
|
||||
|
|
@ -56,14 +54,20 @@ interface ProjectNotification {
|
|||
|
||||
const route = useRoute();
|
||||
const projectId = ref<string | number>("");
|
||||
const tableData = ref<ProjectNotification[]>([]);
|
||||
const originalTableData = ref<ProjectNotification[]>([]);
|
||||
const searchedData = ref<ProjectNotification[]>([]); // 存储搜索结果
|
||||
const displayData = ref<ProjectNotification[]>([]); // 实际显示的数据
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const searchId = ref("");
|
||||
// 新增搜索处理方法
|
||||
const handleIdSearch = async (value: string) => {
|
||||
if (!value.trim()) {
|
||||
message.warning("请输入有效的项目明细ID");
|
||||
|
||||
// 修改搜索处理方法，不再调用后端接口
|
||||
const handleIdSearch = () => {
|
||||
const value = searchId.value.trim();
|
||||
|
||||
if (!value) {
|
||||
message.warning("请输入有效的项目通知ID");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -73,46 +77,25 @@ const handleIdSearch = async (value: string) => {
|
|||
return;
|
||||
}
|
||||
|
||||
await queryDetailById(id);
|
||||
};
|
||||
// 新增根据明细ID查询的方法
|
||||
const queryDetailById = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
const response:any = await myAxios.post(
|
||||
"/projectNotification/queryById", // 使用文档中的接口路径
|
||||
{ id }, // 请求参数
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
// 在原始数据中过滤
|
||||
const result = originalTableData.value.filter(item => item.id === id);
|
||||
|
||||
if (response.code === 1) {
|
||||
tableData.value = [response.data];
|
||||
} else {
|
||||
message.error(response.message || "查询失败");
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
message.error("查询请求失败");
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
if (result.length === 0) {
|
||||
message.warning("未找到匹配的项目通知ID");
|
||||
}
|
||||
|
||||
// 更新显示数据为搜索结果
|
||||
searchedData.value = result;
|
||||
displayData.value = result;
|
||||
};
|
||||
// 修改重置方法
|
||||
|
||||
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
// 重置时重新加载原始项目数据
|
||||
if (projectId.value) {
|
||||
getNotifications (projectId.value);
|
||||
}
|
||||
displayData.value = originalTableData.value;
|
||||
searchedData.value = [];
|
||||
};
|
||||
// 初始化逻辑
|
||||
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
}
|
||||
|
|
@ -122,10 +105,7 @@ onMounted(() => {
|
|||
getNotifications(projectId.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 修改主查询方法
|
||||
const getNotifications = async (id: string | number) => {
|
||||
console.log(id)
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
|
|
@ -139,31 +119,29 @@ const getNotifications = async (id: string | number) => {
|
|||
}
|
||||
}
|
||||
);
|
||||
console.log(response)
|
||||
if (response.code === 1) {
|
||||
tableData.value = response.data;
|
||||
originalTableData.value = response.data;
|
||||
displayData.value = response.data; // 初始显示所有数据
|
||||
} else {
|
||||
error.value = "获取通知列表失败";
|
||||
tableData.value = [];
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = "数据加载失败，请重试";
|
||||
tableData.value = [];
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 修改初始化逻辑
|
||||
onMounted(() => {
|
||||
if (projectId.value) {
|
||||
getNotifications(projectId.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 修改编辑相关代码
|
||||
const drawerVisible = ref(false);
|
||||
const formState = reactive({
|
||||
|
|
@ -254,6 +232,15 @@ const deleteNotification = async (id: number) => {
|
|||
const goAddProjectNotice=()=>{
|
||||
router.push('/addprojectNotice')
|
||||
}
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
// 返回上一级方法
|
||||
const goBack = () => {
|
||||
router.go(-1); // 返回上一页
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -268,7 +255,9 @@ const goAddProjectNotice=()=>{
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="goAddProjectNotice">新增项目通知</a-button>
|
||||
|
|
@ -279,7 +268,7 @@ const goAddProjectNotice=()=>{
|
|||
<!-- 修改表格模板 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:data-source="displayData"
|
||||
:scroll="{ x: 1200, y: 450 }"
|
||||
:loading="loading"
|
||||
bordered
|
||||
|
|
@ -297,6 +286,11 @@ const goAddProjectNotice=()=>{
|
|||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="table-footer">
|
||||
<a-button @click="goBack" class="back-button">返回</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 修改抽屉表单 -->
|
||||
|
|
@ -440,4 +434,22 @@ const goAddProjectNotice=()=>{
|
|||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
/* 新增表格页脚样式 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* 调整分页器位置 */
|
||||
:deep(.ant-table-pagination.ant-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -69,50 +69,14 @@ interface PromoCode {
|
|||
|
||||
const route = useRoute();
|
||||
const projectId = ref<string | number>("");
|
||||
const tableData = ref<PromoCode[]>([]);
|
||||
const originalTableData = ref<PromoCode[]>([]); // 存储所有原始数据
|
||||
const displayData = ref<PromoCode[]>([]); // 实际显示的数据
|
||||
const loading = ref(false);
|
||||
const searchId = ref("");
|
||||
const previewVisible = ref(false);
|
||||
const previewImage = ref("");
|
||||
|
||||
const queryPromoCodeById = async (id: number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
const response: any = await myAxios.post(
|
||||
"/promoCode/queryById",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(response);
|
||||
|
||||
if (response.code === 1) {
|
||||
// 修改这里：判断data是否为null或undefined
|
||||
if (response.data) {
|
||||
tableData.value = [response.data]; // 单个结果转为数组
|
||||
} else {
|
||||
tableData.value = []; // 设置为空数组
|
||||
message.info("未找到对应的推广码数据");
|
||||
}
|
||||
} else {
|
||||
message.error(response.message || "未找到推广码");
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("查询错误:", err);
|
||||
message.error("查询失败，请检查网络");
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 主查询方法
|
||||
// 主查询方法 - 获取项目所有推广码
|
||||
const getPromoCodes = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
|
|
@ -130,24 +94,25 @@ const getPromoCodes = async (id: string | number) => {
|
|||
console.log(response);
|
||||
|
||||
if (response.code === 1) {
|
||||
// 修改这里：确保data是数组，即使为null也转为空数组
|
||||
tableData.value = Array.isArray(response.data) ? response.data : [];
|
||||
// 确保data是数组，即使为null也转为空数组
|
||||
const data = Array.isArray(response.data) ? response.data : [];
|
||||
originalTableData.value = data;
|
||||
displayData.value = data; // 初始显示所有数据
|
||||
} else {
|
||||
message.error(response.message || "获取数据失败");
|
||||
tableData.value = [];
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("查询错误:", err);
|
||||
message.error("数据加载失败，请重试");
|
||||
tableData.value = [];
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 初始化逻辑
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
|
|
@ -159,12 +124,11 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
// 修改搜索处理 - 前端过滤
|
||||
const handleIdSearch = () => {
|
||||
const value = searchId.value.trim();
|
||||
|
||||
|
||||
|
||||
// 处理搜索
|
||||
const handleIdSearch = (value: string) => {
|
||||
if (!value.trim()) {
|
||||
if (!value) {
|
||||
message.warning("请输入有效的推广码ID");
|
||||
return;
|
||||
}
|
||||
|
|
@ -175,15 +139,21 @@ const handleIdSearch = (value: string) => {
|
|||
return;
|
||||
}
|
||||
|
||||
queryPromoCodeById(id);
|
||||
// 在前端原始数据中过滤
|
||||
const result = originalTableData.value.filter(item => item.id === id);
|
||||
|
||||
if (result.length === 0) {
|
||||
message.warning("未找到匹配的推广码ID");
|
||||
}
|
||||
|
||||
// 更新显示数据
|
||||
displayData.value = result;
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
// 重置搜索 - 显示所有数据
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
if (projectId.value) {
|
||||
getPromoCodes(projectId.value); // 重新加载项目数据
|
||||
}
|
||||
displayData.value = originalTableData.value;
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
|
|
@ -210,6 +180,17 @@ const openAddDrawer = () => {
|
|||
|
||||
// 提交新增请求
|
||||
const handleAddSubmit = async () => {
|
||||
// 如果有文件需要上传
|
||||
if (fileList.value.length > 0) {
|
||||
const imageUrl = await handleUpload();
|
||||
if (!imageUrl) {
|
||||
message.error('图片上传失败，无法提交');
|
||||
return;
|
||||
}
|
||||
// 更新表单中的图片URL
|
||||
addFormState.promoCodeImage = imageUrl;
|
||||
}
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
|
|
@ -232,8 +213,8 @@ const handleAddSubmit = async () => {
|
|||
if (res.code === 1) {
|
||||
message.success('新增成功');
|
||||
addDrawerVisible.value = false;
|
||||
await getPromoCodes(projectId.value); // 刷新列表
|
||||
// 重置表单（保留项目ID）
|
||||
await getPromoCodes(projectId.value);
|
||||
// 重置表单和文件列表
|
||||
Object.assign(addFormState, {
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
|
|
@ -241,6 +222,7 @@ const handleAddSubmit = async () => {
|
|||
promoCodeStatus: false,
|
||||
projectId: Number(projectId.value)
|
||||
});
|
||||
fileList.value = [];
|
||||
} else {
|
||||
message.error(res.message || '新增失败');
|
||||
}
|
||||
|
|
@ -259,8 +241,8 @@ const deletePromoCode = async (id: number) => {
|
|||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/delete", // 根据接口文档的路径
|
||||
{ id }, // 请求参数
|
||||
"/promoCode/delete",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
|
|
@ -271,12 +253,8 @@ const deletePromoCode = async (id: number) => {
|
|||
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功');
|
||||
// 根据当前查看模式刷新
|
||||
if (searchId.value) {
|
||||
await queryPromoCodeById(Number(searchId.value));
|
||||
} else {
|
||||
await getPromoCodes(projectId.value);
|
||||
}
|
||||
// 刷新数据
|
||||
await getPromoCodes(projectId.value);
|
||||
} else {
|
||||
message.error(res.message || '删除失败');
|
||||
}
|
||||
|
|
@ -330,6 +308,17 @@ const handleEdit = async (id: number) => {
|
|||
};
|
||||
|
||||
const handleEditSubmit = async () => {
|
||||
// 如果有文件需要上传
|
||||
if (fileList.value.length > 0) {
|
||||
const imageUrl = await handleUpload();
|
||||
if (!imageUrl) {
|
||||
message.error('图片上传失败，无法提交');
|
||||
return;
|
||||
}
|
||||
// 更新表单中的图片URL
|
||||
editFormState.promoCodeImage = imageUrl;
|
||||
}
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
|
|
@ -353,6 +342,8 @@ const handleEditSubmit = async () => {
|
|||
message.success('编辑成功');
|
||||
editDrawerVisible.value = false;
|
||||
await getPromoCodes(projectId.value);
|
||||
// 重置文件列表
|
||||
fileList.value = [];
|
||||
} else {
|
||||
message.error(res.message || '编辑失败');
|
||||
}
|
||||
|
|
@ -361,7 +352,6 @@ const handleEditSubmit = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -370,12 +360,127 @@ const goBack = () => {
|
|||
router.go(-1); // 返回上一页
|
||||
};
|
||||
|
||||
// 添加文件上传相关状态
|
||||
const fileList = ref<any[]>([]);
|
||||
const uploading = ref(false);
|
||||
|
||||
// 图片上传处理
|
||||
const handleUpload = async () => {
|
||||
const formData = new FormData();
|
||||
fileList.value.forEach(file => {
|
||||
formData.append('file', file);
|
||||
});
|
||||
formData.append('biz', 'project'); // 添加biz参数
|
||||
|
||||
try {
|
||||
uploading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/file/upload",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Authorization': storedToken,
|
||||
'AflatScript': 'required', // 添加AflatScript头部
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success('上传成功');
|
||||
// 将返回的文件路径保存到表单中
|
||||
addFormState.promoCodeImage = res.data;
|
||||
return res.data;
|
||||
} else {
|
||||
message.error(res.message || '上传失败');
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error);
|
||||
message.error('上传失败');
|
||||
return null;
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
// 文件上传前的处理
|
||||
const beforeUpload = (file: any) => {
|
||||
// 检查文件类型
|
||||
const isImage = file.type.includes('image');
|
||||
if (!isImage) {
|
||||
message.error('只能上传图片文件!');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件大小 (限制为5MB)
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
message.error('图片大小不能超过5MB!');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 添加到文件列表
|
||||
fileList.value = [file];
|
||||
return false; // 手动上传
|
||||
};
|
||||
|
||||
// 清除文件
|
||||
const clearFile = () => {
|
||||
fileList.value = [];
|
||||
};
|
||||
|
||||
// 添加批量选择相关状态
|
||||
const selectedRowKeys = ref<number[]>([]); // 存储选中的行ID
|
||||
const batchDeleteLoading = ref(false); // 批量删除加载状态
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedKeys: number[]) => {
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
},
|
||||
};
|
||||
|
||||
// 批量删除方法
|
||||
const batchDelete = async () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请至少选择一条记录');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
batchDeleteLoading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/delBatch",
|
||||
{ ids: selectedRowKeys.value }, // 发送选中ID数组
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success(`成功删除 ${selectedRowKeys.value.length} 条记录`);
|
||||
// 刷新数据
|
||||
await getPromoCodes(projectId.value);
|
||||
// 清空选择
|
||||
selectedRowKeys.value = [];
|
||||
} else {
|
||||
message.error(res.message || '批量删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('批量删除操作失败');
|
||||
} finally {
|
||||
batchDeleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 修改后的搜索框 -->
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
|
|
@ -386,11 +491,31 @@ const goBack = () => {
|
|||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddCode">新增推广码</a-button>
|
||||
|
||||
<!-- 添加批量删除按钮 -->
|
||||
<a-popconfirm
|
||||
title="确定要删除选中的推广码吗？"
|
||||
@confirm="batchDelete"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
type="danger"
|
||||
:disabled="selectedRowKeys.length === 0"
|
||||
:loading="batchDeleteLoading"
|
||||
>
|
||||
批量删除 ({{ selectedRowKeys.length }})
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-form-item label="当前项目ID">
|
||||
<a-tag color="blue">{{ projectId }}</a-tag>
|
||||
</a-form-item>
|
||||
|
|
@ -401,12 +526,13 @@ const goBack = () => {
|
|||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:data-source="displayData"
|
||||
:scroll="{ x: 1000, y: 550 }"
|
||||
:loading="loading"
|
||||
bordered
|
||||
rowKey="id"
|
||||
locale="{ emptyText: '暂无数据' }"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'promoCodeStatus'">
|
||||
|
|
@ -475,15 +601,30 @@ const goBack = () => {
|
|||
<a-input v-model:value="addFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="推广码图片URL">
|
||||
<a-input v-model:value="addFormState.promoCodeImage" placeholder="请输入图片URL" />
|
||||
<a-form-item label="推广码图片">
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:remove="clearFile"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="addFormState.promoCodeImage">
|
||||
已上传图片:
|
||||
<a :href="addFormState.promoCodeImage" target="_blank">查看</a>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="addFormState.promoCodeStatus">
|
||||
<a-select-option :value="false">空闲</a-select-option>
|
||||
<a-select-option :value="true">占用</a-select-option>
|
||||
</a-select>
|
||||
<span class="ant-form-text">空闲</span>
|
||||
<!-- 隐藏真实字段，通过响应式数据固定传递false -->
|
||||
<input type="hidden" :value="false" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="项目ID">
|
||||
|
|
@ -494,14 +635,19 @@ const goBack = () => {
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button class="custom-button" html-type="submit">提交</a-button>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
html-type="submit"
|
||||
:loading="uploading"
|
||||
>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 编辑推广码抽屉 -->
|
||||
<a-drawer
|
||||
title="编辑推广码"
|
||||
|
|
@ -524,11 +670,31 @@ const goBack = () => {
|
|||
<a-form-item label="推广链接">
|
||||
<a-input v-model:value="editFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
<a-form-item label="推广码图片URL">
|
||||
<a-input v-model:value="editFormState.promoCodeImage" />
|
||||
<a-form-item label="推广码图片">
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:remove="clearFile"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="editFormState.promoCodeImage">
|
||||
当前图片:
|
||||
<a :href="editFormState.promoCodeImage" target="_blank">查看</a>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="editFormState.promoCodeStatus">
|
||||
<span class="ant-form-text">
|
||||
{{ editFormState.promoCodeStatus ? '占用' : '空闲' }}
|
||||
</span>
|
||||
<!-- 隐藏可编辑的选择框，防止修改 -->
|
||||
<a-select v-model:value="editFormState.promoCodeStatus" :disabled="true" style="display: none">
|
||||
<a-select-option :value="false">空闲</a-select-option>
|
||||
<a-select-option :value="true">占用</a-select-option>
|
||||
</a-select>
|
||||
|
|
@ -540,13 +706,20 @@ const goBack = () => {
|
|||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
html-type="submit"
|
||||
:loading="uploading"
|
||||
>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" @click="editDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -657,4 +830,34 @@ const goBack = () => {
|
|||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-select-picture-card i) {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-select-picture-card .ant-upload-text) {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/*批量删除按钮操作*/
|
||||
.batch-delete-button {
|
||||
margin-left: 10px;
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.batch-delete-button:hover {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 添加选择计数样式 */
|
||||
.selection-count {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,301 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>结算记录</div>
|
||||
<div class="container">
|
||||
<!-- 搜索和筛选区域 -->
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="申请记录ID">
|
||||
<a-input-number
|
||||
v-model:value="searchParams.id"
|
||||
placeholder="请输入申请记录ID"
|
||||
:min="1"
|
||||
style="width: 300px;"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-button
|
||||
type="primary"
|
||||
class="custom-button"
|
||||
@click="applyFilters"
|
||||
>
|
||||
查询
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
class="custom-button"
|
||||
@click="resetSearch"
|
||||
>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:dataSource="filteredData"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 格式化金额显示 -->
|
||||
<template v-if="column.dataIndex === 'withdrawnAmount'">
|
||||
¥{{ record.withdrawnAmount.toFixed(2) }}
|
||||
</template>
|
||||
|
||||
<!-- 状态标签 -->
|
||||
<template v-if="column.dataIndex === 'withdrawalStatus'">
|
||||
<a-tag :color="getStatusColor(record.withdrawalStatus)">
|
||||
{{ formatStatus(record.withdrawalStatus) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="viewDetails(record)"
|
||||
>
|
||||
查看详情
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// 提现申请记录接口类型
|
||||
interface WithdrawalRecord {
|
||||
id: number;
|
||||
withdrawnAmount: number;
|
||||
withdrawalStatus: string;
|
||||
// 根据实际接口返回添加更多字段
|
||||
}
|
||||
|
||||
// 表格列定义
|
||||
const columns = ref([
|
||||
{
|
||||
title: '提现申请记录ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '提现金额',
|
||||
dataIndex: 'withdrawnAmount',
|
||||
key: 'withdrawnAmount',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'withdrawalStatus',
|
||||
key: 'withdrawalStatus',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
const allData = ref<WithdrawalRecord[]>([]); // 存储所有数据
|
||||
const filteredData = ref<WithdrawalRecord[]>([]); // 存储过滤后的数据
|
||||
const loading = ref(false);
|
||||
|
||||
// 搜索参数
|
||||
const searchParams = reactive({
|
||||
id: undefined as number | undefined,
|
||||
withdrawalStatus: ''
|
||||
});
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
});
|
||||
|
||||
// 获取状态标签颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
switch(status) {
|
||||
case 'processing': return 'blue';
|
||||
case 'success': return 'green';
|
||||
case 'failed': return 'red';
|
||||
default: return 'gray';
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化状态显示
|
||||
const formatStatus = (status: string) => {
|
||||
switch(status) {
|
||||
case 'processing': return '处理中';
|
||||
case 'success': return '已完成';
|
||||
case 'failed': return '已拒绝';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取提现申请记录数据
|
||||
const fetchData = async () => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// 请求所有数据（不分页）
|
||||
const requestParams = {
|
||||
pagesize: 1000, // 获取足够大的数据量
|
||||
current: 1
|
||||
};
|
||||
|
||||
const response: any = await myAxios.post('/withdrawalApply/page',
|
||||
requestParams,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken,
|
||||
'AfterScript': 'required-script'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
console.log('接口响应:', response);
|
||||
|
||||
if (response.code === 1) {
|
||||
allData.value = response.data.records || [];
|
||||
applyFilters(); // 获取数据后立即应用过滤
|
||||
} else {
|
||||
message.error(response.message || '获取数据失败');
|
||||
allData.value = [];
|
||||
filteredData.value = [];
|
||||
pagination.total = 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求失败:', error);
|
||||
message.error('请求数据失败，请稍后重试');
|
||||
allData.value = [];
|
||||
filteredData.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 应用过滤条件
|
||||
const applyFilters = () => {
|
||||
let result = [...allData.value];
|
||||
|
||||
// 根据ID过滤
|
||||
if (searchParams.id) {
|
||||
result = result.filter(item => item.id === searchParams.id);
|
||||
}
|
||||
|
||||
// 根据状态过滤
|
||||
if (searchParams.withdrawalStatus) {
|
||||
result = result.filter(item => item.withdrawalStatus === searchParams.withdrawalStatus);
|
||||
}
|
||||
|
||||
// 更新分页信息
|
||||
pagination.total = result.length;
|
||||
pagination.current = 1;
|
||||
|
||||
// 应用分页
|
||||
applyPagination(result);
|
||||
};
|
||||
|
||||
// 应用分页
|
||||
const applyPagination = (data: WithdrawalRecord[]) => {
|
||||
const start = (pagination.current - 1) * pagination.pageSize;
|
||||
const end = start + pagination.pageSize;
|
||||
filteredData.value = data.slice(start, end);
|
||||
};
|
||||
|
||||
// 处理表格变化（分页）
|
||||
const handleTableChange: TableProps['onChange'] = (pag) => {
|
||||
if (pag) {
|
||||
pagination.current = pag.current!;
|
||||
pagination.pageSize = pag.pageSize!;
|
||||
applyFilters(); // 重新应用分页
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetails = (record: WithdrawalRecord) => {
|
||||
message.info(`查看提现申请详情 ID: ${record.id}`);
|
||||
// 实际项目中可以跳转到详情页
|
||||
// router.push({ path: '/withdrawal-detail', query: { id: record.id } });
|
||||
};
|
||||
|
||||
// 重置搜索条件
|
||||
const resetSearch = () => {
|
||||
searchParams.id = undefined;
|
||||
searchParams.withdrawalStatus = '';
|
||||
applyFilters(); // 重置后重新应用过滤
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式保持不变 */
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 橙色按钮样式 */
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 表格样式调整 */
|
||||
:deep(.ant-table-thead) > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #f9f9f9 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<div class="search-container">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="ID">
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px;"
|
||||
placeholder="请输入用户ID"
|
||||
placeholder="请输入手机号"
|
||||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
@search="handlePhoneSearch"
|
||||
v-model:value="searchPhone"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
:maxlength="11"
|
||||
max="19999999999"
|
||||
@input="handleSearchPhoneInput"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="showModal">新增用户</a-button>
|
||||
|
|
@ -77,7 +82,7 @@
|
|||
</a-form-item>
|
||||
|
||||
<!-- 修改账户表单项 -->
|
||||
<a-form-item label="账户" name="userAccount">
|
||||
<a-form-item label="账号" name="userAccount">
|
||||
<a-input
|
||||
v-model:value="formData.userAccount"
|
||||
:maxlength="11"
|
||||
|
|
@ -130,12 +135,12 @@
|
|||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 数据-->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 1700, y: 550 }"
|
||||
:scroll="{ x: 1400, y: 550 }"
|
||||
:loading="loading"
|
||||
:row-selection="rowSelection"
|
||||
:pagination="pagination"
|
||||
|
|
@ -153,8 +158,8 @@
|
|||
<a-space :size="16">
|
||||
<!-- 修改showDrawer调用，传入当前用户记录 -->
|
||||
<a class="action-btn" @click="showDrawer(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="action-btn" type="link" @click="deleteUser(record.id)">删除</a>
|
||||
<a-divider type="vertical" v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'"/>
|
||||
<a class="action-btn" type="link" @click="deleteUser(record.id)" v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'">删除</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -171,7 +176,7 @@
|
|||
<div class="header">
|
||||
<a-avatar :size="128" :src="selectedUser.userAvatar" class="avatar" />
|
||||
<a-button
|
||||
v-if="store.loginUser.userRole === 'boss'"
|
||||
v-if="store.loginUser.userRole === 'boss' && selectedUser?.userRole === 'admin'"
|
||||
@click="toggleEditMode"
|
||||
class="custom-button"
|
||||
>
|
||||
|
|
@ -260,21 +265,13 @@
|
|||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="邀请码">
|
||||
<a-input v-model:value="editForm.invitationCode" />
|
||||
</a-form-item>
|
||||
<a-form-item label="身份">
|
||||
<a-select v-model:value="editForm.userRole">
|
||||
<a-select v-model:value="editForm.userRole" disabled>
|
||||
<a-select-option value="user">普通用户</a-select-option>
|
||||
<a-select-option value="admin">管理员</a-select-option>
|
||||
<a-select-option value="boss">老板</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级用户ID">
|
||||
<a-input-number v-model:value="editForm.parentUserId" :min="0" />
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 6 }">
|
||||
<a-button class="custom-button" @click="handleSave">保存修改</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -498,7 +495,12 @@ const formRules = {
|
|||
]
|
||||
}
|
||||
|
||||
|
||||
const handleSearchPhoneInput = (e: any) => {
|
||||
const value = e.target.value;
|
||||
// 过滤非数字字符并截取前11位
|
||||
const filteredValue = value.replace(/\D/g, '').slice(0, 11);
|
||||
searchPhone.value = filteredValue;
|
||||
};
|
||||
|
||||
// 实时校验逻辑
|
||||
const formData = ref({
|
||||
|
|
@ -536,22 +538,21 @@ const handlePasswordInput = (e: any) => {
|
|||
formData.value.userPassword = e.target.value.slice(0, 10);
|
||||
}
|
||||
const loading = ref(false);
|
||||
// const total = ref(0);
|
||||
const searchId = ref(""); // 新增ID搜索参数
|
||||
|
||||
const searchParams = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole:null
|
||||
userRole:null,
|
||||
phoneNumber:null
|
||||
});
|
||||
//用户表
|
||||
const columns = [
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'id',
|
||||
width: 20,
|
||||
width: 50,
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
|
|
@ -561,14 +562,14 @@ const columns = [
|
|||
title: '头像',
|
||||
dataIndex: 'userAvatar',
|
||||
key: 'userAvatar',
|
||||
width: 20,
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'userAccount',
|
||||
width: 30,
|
||||
width: 90,
|
||||
key: 'userAccount',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
|
|
@ -576,7 +577,7 @@ const columns = [
|
|||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickName',
|
||||
width: 40,
|
||||
width: 70,
|
||||
key: 'nickName',
|
||||
align: 'center'
|
||||
},
|
||||
|
|
@ -584,21 +585,21 @@ const columns = [
|
|||
title: '身份',
|
||||
dataIndex: 'userRole',
|
||||
key: 'userRole',
|
||||
width: 30,
|
||||
width: 50,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phoneNumber',
|
||||
key: 'phoneNumber',
|
||||
width: 70,
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '邀请码',
|
||||
dataIndex: 'invitationCode',
|
||||
key: 'invitationCode',
|
||||
width: 40,
|
||||
width: 70,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
|
|
@ -612,7 +613,7 @@ const columns = [
|
|||
title: '操作',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 40,
|
||||
width: 90,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
|
@ -741,22 +742,54 @@ interface User {
|
|||
|
||||
const tableData = ref<User[]>([]); // 明确元素类型为User[]
|
||||
|
||||
const handleIdSearch = async () => {
|
||||
if (!searchId.value) {
|
||||
message.warning('请输入用户ID');
|
||||
const searchPhone = ref(""); // 手机号搜索参数
|
||||
|
||||
// 修改5: 删除原有的searchId变量
|
||||
// const searchId = ref(""); // 删除这行
|
||||
|
||||
// 修改6: 替换原有的handleIdSearch方法
|
||||
const handlePhoneSearch = async () => {
|
||||
if (!searchPhone.value) {
|
||||
message.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
|
||||
message.warning('请输入有效的11位手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
const res: { code: number; data: User;message:any } = await myAxios.post("/userInfo/queryById", // 修改此处地址
|
||||
{ id: parseInt(searchId.value) },
|
||||
|
||||
// 修改7: 使用phoneNumber作为查询参数
|
||||
const res: { code: number; data: any; message: any } = await myAxios.post(
|
||||
"/userInfo/page",
|
||||
{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
phoneNumber: searchPhone.value
|
||||
},
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
console.log(res)
|
||||
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = [res.data];
|
||||
tableData.value = res.data.records.map((item: any) => {
|
||||
if (item.parentUserId === -1) {
|
||||
item.parentUserId = '无';
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||
};
|
||||
});
|
||||
// 更新分页信息
|
||||
pagination.value.total = res.data.total;
|
||||
pagination.value.current = res.data.current;
|
||||
pagination.value.pageSize = res.data.size;
|
||||
} else {
|
||||
message.error(res.message || '查询失败');
|
||||
}
|
||||
|
|
@ -767,6 +800,23 @@ const handleIdSearch = async () => {
|
|||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 修改8: 更新reset方法
|
||||
const reset = () => {
|
||||
searchPhone.value = ""; // 清空手机号搜索
|
||||
searchParams.value = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole: null,
|
||||
phoneNumber: null
|
||||
};
|
||||
getUserList(); // 重新加载列表
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 删除用户
|
||||
const selectedRowKeys = ref<number[]>([]);
|
||||
|
||||
|
|
@ -1038,18 +1088,7 @@ const handleSubmit = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// 重置按钮
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
searchParams.value = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole: null
|
||||
};
|
||||
getUserList();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -1089,7 +1128,6 @@ const reset = () => {
|
|||
}
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.view-mode {
|
||||
display: flex;
|
||||
|
|
@ -1328,23 +1366,6 @@ const reset = () => {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,781 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>工作详情</div>
|
||||
<form @submit.prevent="handleSubmit" class="modern-form">
|
||||
<h2 class="form-title">新建推广项目</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<!-- 左列 - 手机预览区域 -->
|
||||
<div class="form-column phone-preview-container">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-header">
|
||||
<div class="phone-camera"></div>
|
||||
<div class="phone-speaker"></div>
|
||||
</div>
|
||||
|
||||
<div class="phone-screen">
|
||||
<div class="phone-content">
|
||||
<!-- 项目信息 -->
|
||||
<div class="phone-project-info">
|
||||
<h2 class="phone-project-title">{{ formData.projectName }}</h2>
|
||||
<div class="phone-project-image" :style="{ backgroundImage: `url(${formData.projectImage})` }"></div>
|
||||
<p class="phone-project-desc">{{ formData.projectDescription }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 富文本内容区域 -->
|
||||
<div class="phone-sections">
|
||||
<!-- 结算说明 -->
|
||||
<div class="phone-section">
|
||||
<h3 class="phone-section-title">结算说明</h3>
|
||||
<div class="phone-section-content" v-html="formData.settlementDesc"></div>
|
||||
</div>
|
||||
|
||||
<!-- 项目说明 -->
|
||||
<div class="phone-section">
|
||||
<h3 class="phone-section-title">项目说明</h3>
|
||||
<div class="phone-section-content" v-html="formData.projectDesc"></div>
|
||||
</div>
|
||||
|
||||
<!-- 项目流程 -->
|
||||
<div class="phone-section">
|
||||
<h3 class="phone-section-title">项目流程</h3>
|
||||
<div class="phone-section-content" v-html="formData.projectFlow"></div>
|
||||
</div>
|
||||
|
||||
<!-- 申请推广码说明 -->
|
||||
<div class="phone-section">
|
||||
<h3 class="phone-section-title">申请推广码说明</h3>
|
||||
<div class="phone-section-content" v-html="formData.applyPromoCodeDesc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-home-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右列 - 富文本编辑区域 -->
|
||||
<div class="form-column">
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目名称</span>
|
||||
<input
|
||||
v-model="formData.projectName"
|
||||
type="text"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入项目名称"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目图片</span>
|
||||
<div class="file-upload">
|
||||
<input
|
||||
type="file"
|
||||
class="file-input"
|
||||
accept="image/*"
|
||||
@change="handleFileUpload"
|
||||
ref="fileInput"
|
||||
>
|
||||
<div class="upload-button" @click="fileInput?.click()">
|
||||
<span v-if="!formData.projectImage">点击上传图片</span>
|
||||
<span v-else class="file-name">已选择：{{ fileName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">结算周期（天）</span>
|
||||
<input
|
||||
v-model.number="formData.projectSettlementCycle"
|
||||
type="number"
|
||||
min="1"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入结算周期"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">最大推广人数</span>
|
||||
<input
|
||||
v-model.number="formData.maxPromoterCount"
|
||||
type="number"
|
||||
min="1"
|
||||
class="input-field"
|
||||
required
|
||||
placeholder="请输入最大人数"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目状态</span>
|
||||
<div class="select-wrapper">
|
||||
<select
|
||||
v-model="formData.projectStatus"
|
||||
class="select-field"
|
||||
>
|
||||
<option value="running">运行中</option>
|
||||
<option value="full">人数已满</option>
|
||||
<option value="paused">已暂停</option>
|
||||
</select>
|
||||
<div class="select-arrow">▼</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-text">项目简介</span>
|
||||
<textarea
|
||||
v-model="formData.projectDescription"
|
||||
class="textarea-field"
|
||||
placeholder="请输入详细的项目描述..."
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-container">
|
||||
<div class="rich-text-columns">
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">结算说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.settlementDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.settlementDesc = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectDesc = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">项目流程</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.projectFlow"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.projectFlow = html"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rich-text-group">
|
||||
<span class="label-text">申请推广码说明</span>
|
||||
<RichTextEditor
|
||||
v-model="formData.applyPromoCodeDesc"
|
||||
:disable="false"
|
||||
@content-change="(html:any) => formData.applyPromoCodeDesc = html"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">
|
||||
<span>立即创建</span>
|
||||
<div class="button-sparkles"></div>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, nextTick,ref } from 'vue';
|
||||
import RichTextEditor from '../components/RichTextEditor.vue';
|
||||
// import { QuillEditor } from '@vueup/vue-quill';
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import router from "../../router";
|
||||
|
||||
|
||||
interface ProjectForm {
|
||||
projectName: string;
|
||||
projectImage: string;
|
||||
projectSettlementCycle: number;
|
||||
maxPromoterCount: number;
|
||||
projectStatus: 'running' | 'full' | 'paused';
|
||||
projectDescription: string;
|
||||
settlementDesc: string;
|
||||
projectDesc: string;
|
||||
projectFlow: string;
|
||||
applyPromoCodeDesc: string;
|
||||
}
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
// 重命名局部变量避免冲突（修复错误❷）
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('biz', 'project');
|
||||
uploadFormData.append('file', file);
|
||||
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post('/file/upload', uploadFormData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
|
||||
if (res.code === 1) {
|
||||
// 正确访问响应式对象
|
||||
formData.projectImage = res.data;
|
||||
fileName.value = file.name;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败：', error);
|
||||
alert('文件上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 添加文件名响应式变量
|
||||
const fileName = ref('');
|
||||
|
||||
// 响应式表单数据
|
||||
const formData = reactive<ProjectForm>({
|
||||
projectName: '',
|
||||
projectSettlementCycle: 2,
|
||||
maxPromoterCount: 200,
|
||||
projectStatus: 'running',
|
||||
projectDescription: '',
|
||||
settlementDesc: '',
|
||||
projectDesc: '',
|
||||
projectFlow: '',
|
||||
applyPromoCodeDesc: '',
|
||||
projectImage: ''
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// 初始处理
|
||||
nextTick(() => {
|
||||
// 为手机预览添加初始样式
|
||||
const phoneScreen = document.querySelector('.phone-screen');
|
||||
if (phoneScreen) {
|
||||
// 添加阴影和动画效果
|
||||
phoneScreen.classList.add('animate-fade-in');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
console.log(formData.valueOf())
|
||||
|
||||
const res:any = await myAxios.post(`/project/add`,
|
||||
JSON.stringify(formData),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
alert('项目创建成功！');
|
||||
router.back();
|
||||
|
||||
Object.assign(formData, {
|
||||
projectName: '',
|
||||
projectSettlementCycle: 2,
|
||||
maxPromoterCount: 200,
|
||||
projectStatus: 'running',
|
||||
projectDescription: '',
|
||||
settlementDesc: '',
|
||||
projectDesc: '',
|
||||
projectFlow: '',
|
||||
applyPromoCodeDesc: '',
|
||||
projectImage: ''
|
||||
});
|
||||
} else {
|
||||
alert(`创建失败：${res.data.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求失败：', error);
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modern-form {
|
||||
max-width: 90%;
|
||||
margin: 2rem auto;
|
||||
padding: 2.5rem;
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
display: block;
|
||||
margin-bottom: 0.6rem;
|
||||
color: #4a5568;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-field,
|
||||
.select-wrapper,
|
||||
.textarea-field {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input-field:focus,
|
||||
.select-wrapper:focus-within,
|
||||
.textarea-field:focus {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.file-upload {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: #f8fafc;
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-button:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.textarea-field {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.button-sparkles {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-radius: 50%;
|
||||
animation: sparkle 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0% { transform: scale(0) translate(0,0); }
|
||||
50% { transform: scale(1) translate(100px, -50px); }
|
||||
100% { transform: scale(0) translate(200px, -100px); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modern-form {
|
||||
padding: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-container {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.rich-text-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 修正列宽分配 */
|
||||
gap: 1rem; /* 减小间距 */
|
||||
align-items: start; /* 顶部对齐 */
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* 减小标签与编辑器间距 */
|
||||
height: 100%; /* 保持等高布局 */
|
||||
|
||||
}
|
||||
.rich-text-group:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1440px) {
|
||||
.rich-text-columns {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: repeat(2, 1fr); /* 更早切换为2列 */
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rich-text-columns {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-group {
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 320px;
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
/* 新增焦点状态 */
|
||||
&:focus-within {
|
||||
border-color: #6366f1 !important;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 调整标签与编辑器间距 */
|
||||
.rich-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
/* 新增标签焦点状态联动 */
|
||||
&:focus-within .label-text {
|
||||
color: #6366f1;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 保持与其他输入组件的一致性 */
|
||||
.rich-text-group .label-text {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #3b4151;
|
||||
padding-left: 0.2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
/* 手机预览样式 */
|
||||
.phone-preview-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
position: relative;
|
||||
width: 316px;
|
||||
height: 630px;
|
||||
background: #000;
|
||||
border-radius: 40px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 0 12px #1f1f1f, 0 0 30px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.phone-header {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 180px;
|
||||
height: 25px;
|
||||
background: #000;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.phone-camera {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #15294c;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.phone-speaker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #1f1f1f;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.phone-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phone-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.phone-home-button {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #1f1f1f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phone-project-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.phone-project-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.phone-project-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.phone-project-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #4a5568;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.phone-sections {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.phone-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.phone-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #2c3e50;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.phone-section-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4a5568;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.phone-section-content * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.phone-section-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.phone-section-content h1,
|
||||
.phone-section-content h2,
|
||||
.phone-section-content h3 {
|
||||
color: #2c3e50;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.phone-section-content p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.phone-section-content ul,
|
||||
.phone-section-content ol {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.file-upload {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: #f8fafc;
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-button:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
//加密
|
||||
// "module": "ES2020",
|
||||
// "types": ["vite/client"],
|
||||
// "moduleResolution": "node",
|
||||
// "target": "ES2020",
|
||||
// "strict": true,
|
||||
// "module": "ES2020",
|
||||
// "types": ["vite/client"],
|
||||
// "moduleResolution": "node",
|
||||
// "target": "ES2020",
|
||||
// "strict": true,
|
||||
|
||||
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"typeRoots": ["node_modules/@types", "src/types"],
|
||||
"baseUrl": "http://localhost:3456",
|
||||
"paths": {
|
||||
"@wangeditor/editor-for-vue": ["node_modules/@wangeditor/editor-for-vue/dist/src/index.d.ts"],
|
||||
"@wangeditor/editor-for-vue": ["./node_modules/@wangeditor/editor-for-vue/dist/src/index.d.ts"] // ✅ 添加相对路径前缀
|
||||
},
|
||||
"skipLibCheck": true,
|
||||
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "node",
|
||||
//"moduleResolution": "bundler",
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
|
|
@ -34,6 +28,6 @@
|
|||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/imageurl.ts","./src/api/myaxios.ts","./src/router/index.ts","./src/router/routes.ts","./src/store/index.ts","./src/store/userstore.ts","./src/types/wangeditor.d.ts","./src/utils/tableconfig.ts","./src/utils/crypto.ts","./src/utils/message.ts","./src/app.vue","./src/layout/managelayout.vue","./src/layout/manage/manageheader.vue","./src/layout/manage/managesidebar.vue","./src/view/index.vue","./src/view/login.vue","./src/view/test.vue","./src/view/community/community.vue","./src/view/components/richtexteditor.vue","./src/view/course/linkedcourse.vue","./src/view/course/localcurriculum.vue","./src/view/order/orderdetail.vue","./src/view/order/ordersort.vue","./src/view/project/addproject.vue","./src/view/project/addprojectnotice.vue","./src/view/project/moneydetail.vue","./src/view/project/project.vue","./src/view/project/projectdetail.vue","./src/view/project/projectnotice.vue","./src/view/project/promotioncode.vue","./src/view/settlement/applicationrecord.vue","./src/view/settlement/settlementrecord.vue","./src/view/userlist/userlist.vue","./src/view/work/workdetail.vue","./src/view/work/worklist.vue"],"version":"5.6.3"}
|
||||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/imageurl.ts","./src/api/myaxios.ts","./src/router/index.ts","./src/router/routes.ts","./src/store/index.ts","./src/store/userstore.ts","./src/types/wangeditor.d.ts","./src/app.vue","./src/layout/managelayout.vue","./src/layout/manage/manageheader.vue","./src/layout/manage/managesidebar.vue","./src/view/index.vue","./src/view/login.vue","./src/view/test.vue","./src/view/community/community.vue","./src/view/components/richtexteditor.vue","./src/view/course/linkedcourse.vue","./src/view/course/localcurriculum.vue","./src/view/order/orderdetail.vue","./src/view/order/ordersort.vue","./src/view/project/addproject.vue","./src/view/project/addprojectnotice.vue","./src/view/project/moneydetail.vue","./src/view/project/project.vue","./src/view/project/projectdetail.vue","./src/view/project/projectnotice.vue","./src/view/project/promotioncode.vue","./src/view/settlement/applicationrecord.vue","./src/view/settlement/settlementrecord.vue","./src/view/userlist/userlist.vue","./src/view/work/workdetail.vue","./src/view/work/worklist.vue"],"version":"5.6.3"}
|
||||
|
|
@ -30,11 +30,6 @@ export default defineConfig({
|
|||
],
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['@wangeditor/editor-for-vue']
|
||||
}
|
||||
}
|
||||
// optimizeDeps: {
|
||||
// include: [
|
||||
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||
|
|
|
|||
|
|
@ -31,11 +31,6 @@ export default defineConfig({
|
|||
],
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['@wangeditor/editor-for-vue']
|
||||
}
|
||||
}
|
||||
// optimizeDeps: {
|
||||
// include: [
|
||||
// "@surely-vue/table" // 显式包含依赖进行预构建
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1853
package-lock.json
generated
1853
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
29
package.json
29
package.json
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"name": "qingcheng-web",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.1",
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"typescript": "~5.8.0",
|
||||
"vite": "^6.2.4",
|
||||
"vite-plugin-vue-devtools": "^7.7.2",
|
||||
"vue-tsc": "^2.2.8"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
85
src/App.vue
85
src/App.vue
|
|
@ -1,85 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
|
|
@ -1,35 +0,0 @@
|
|||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
14
src/main.ts
14
src/main.ts
|
|
@ -1,14 +0,0 @@
|
|||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"extends": "@tsconfig/node22/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*",
|
||||
"eslint.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user