aaa
This commit is contained in:
王子琦
67
pc-web/src/App.vue
Normal file
67
pc-web/src/App.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<el-container class="layout">
|
||||
<!-- <el-header class="layout__header" height="64px">
|
||||
<div class="logo">业务登记系统</div>
|
||||
</el-header> -->
|
||||
<el-container>
|
||||
<el-aside width="200px" v-if="false" class="layout__aside">
|
||||
<el-menu router :default-active="$route.path" class="layout__menu">
|
||||
<el-menu-item index="/">
|
||||
<i class="el-icon-house"></i>
|
||||
<span>首页</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="/about">
|
||||
<i class="el-icon-info"></i>
|
||||
<span>关于</span>
|
||||
</el-menu-item> -->
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-main class="layout__main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.layout__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.layout__aside {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.layout__menu {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layout__main {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.layout__header-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
47
pc-web/src/api/client.js
Normal file
47
pc-web/src/api/client.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import axios from 'axios'
|
||||
|
||||
function normalizeApiBaseUrl(configuredBaseUrl) {
|
||||
if (!configuredBaseUrl) return '/api'
|
||||
|
||||
if (/^https?:\/\//i.test(configuredBaseUrl)) {
|
||||
try {
|
||||
const url = new URL(configuredBaseUrl)
|
||||
if (
|
||||
process.env.NODE_ENV === 'production' &&
|
||||
(url.hostname === 'localhost' || url.hostname === '127.0.0.1')
|
||||
) {
|
||||
return '/api'
|
||||
}
|
||||
return configuredBaseUrl
|
||||
} catch (e) {
|
||||
return '/api'
|
||||
}
|
||||
}
|
||||
|
||||
return configuredBaseUrl
|
||||
}
|
||||
|
||||
const baseURL = normalizeApiBaseUrl(process.env.VUE_APP_API_BASE_URL)
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL
|
||||
})
|
||||
|
||||
export function buildPdfUrl(fileName) {
|
||||
if (!fileName) return ''
|
||||
const name = String(fileName)
|
||||
if (/^https?:\/\//i.test(name)) return name
|
||||
|
||||
const encodedName = encodeURIComponent(name)
|
||||
const configuredBaseUrl = normalizeApiBaseUrl(process.env.VUE_APP_API_BASE_URL)
|
||||
if (configuredBaseUrl && /^https?:\/\//i.test(configuredBaseUrl)) {
|
||||
try {
|
||||
const url = new URL(configuredBaseUrl)
|
||||
return `${url.origin}/pdf/${encodedName}`
|
||||
} catch (e) {
|
||||
return `/pdf/${encodedName}`
|
||||
}
|
||||
}
|
||||
|
||||
return `/pdf/${encodedName}`
|
||||
}
|
||||
5
pc-web/src/api/pdfs.js
Normal file
5
pc-web/src/api/pdfs.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { apiClient as client } from './client'
|
||||
|
||||
export function fetchPdfs() {
|
||||
return client.get('/pdfs').then(res => res.data)
|
||||
}
|
||||
49
pc-web/src/api/registrations.js
Normal file
49
pc-web/src/api/registrations.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { apiClient as client } from './client'
|
||||
|
||||
export function fetchRegistrations() {
|
||||
return client.get('/registrations').then(res => res.data)
|
||||
}
|
||||
|
||||
export function fetchRegistration(id) {
|
||||
return client.get(`/registrations/${id}`).then(res => res.data)
|
||||
}
|
||||
|
||||
export function createRegistration(payload) {
|
||||
return client.post('/registrations', payload).then(res => res.data)
|
||||
}
|
||||
|
||||
export function updateRegistration(id, payload) {
|
||||
return client.put(`/registrations/${id}`, payload).then(res => res.data)
|
||||
}
|
||||
|
||||
export function deleteRegistration(id) {
|
||||
return client.delete(`/registrations/${id}`).then(res => res.data)
|
||||
}
|
||||
|
||||
export function sendSmsToUserPhone(id) {
|
||||
return client.get(`/registrations/sendSms/${id}`).then(res => res.data)
|
||||
}
|
||||
|
||||
export function searchRegistrations(params = {}) {
|
||||
return client
|
||||
.get('/registrations/search', {
|
||||
params: {
|
||||
customerName: params.customerName,
|
||||
contact: params.contact,
|
||||
serviceType: params.serviceType,
|
||||
powerType: params.powerType,
|
||||
status: params.status,
|
||||
urlPath: params.urlPath
|
||||
}
|
||||
})
|
||||
.then(res => res.data)
|
||||
}
|
||||
|
||||
export function searchByPhone(phoneNumber) {
|
||||
return searchRegistrations({ contact: phoneNumber, status: '已登记' })
|
||||
}
|
||||
|
||||
|
||||
export function serchUrlPath(urlPath) {
|
||||
return client.get(`/registrations/getPdfPath/${urlPath}`).then(res => res.data)
|
||||
}
|
||||
BIN
pc-web/src/assets/logo.png
Normal file
BIN
pc-web/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
59
pc-web/src/components/HelloWorld.vue
Normal file
59
pc-web/src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
14
pc-web/src/main.js
Normal file
14
pc-web/src/main.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import FastClick from 'fastclick'
|
||||
FastClick.attach(document.body);
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
42
pc-web/src/router/index.js
Normal file
42
pc-web/src/router/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: () => import('../views/Register.vue')
|
||||
},
|
||||
{
|
||||
path: '/phone-query',
|
||||
name: 'PhoneQuery',
|
||||
component: () => import('../views/PhoneQuery.vue')
|
||||
},
|
||||
{
|
||||
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(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
},
|
||||
{
|
||||
path: '/getfile/:urlPath',
|
||||
name: 'GetFile',
|
||||
component: () => import('../views/GetFile.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
5
pc-web/src/views/About.vue
Normal file
5
pc-web/src/views/About.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
27
pc-web/src/views/CatchAll.vue
Normal file
27
pc-web/src/views/CatchAll.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="catch-all">
|
||||
<h1>URL 后缀捕获页面</h1>
|
||||
<p>当前 URL 参数: <strong>{{ $route.params.pathMatch }}</strong></p>
|
||||
<p>完整路径: <strong>{{ fullPath }}</strong></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CatchAll',
|
||||
computed: {
|
||||
fullPath() {
|
||||
return this.$route.fullPath
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('URL 后缀参数:', this.$route.params.pathMatch)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.catch-all {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
51
pc-web/src/views/GetFile.vue
Normal file
51
pc-web/src/views/GetFile.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="get-file">
|
||||
<loading :active="isLoading" :is-full-page="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading from "vue-loading-overlay";
|
||||
import "vue-loading-overlay/dist/vue-loading.css";
|
||||
import { serchUrlPath } from "../api/registrations";
|
||||
import { buildPdfUrl } from "../api/client";
|
||||
|
||||
export default {
|
||||
name: "GetFile",
|
||||
components: {
|
||||
Loading,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fileSuffix() {
|
||||
return this.$route.params.urlPath;
|
||||
},
|
||||
fullPath() {
|
||||
return this.$route.fullPath;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
serchUrlPath(this.fileSuffix).then((res) => {
|
||||
if (res != null && res.length > 1) {
|
||||
window.location.href = buildPdfUrl(res);
|
||||
} else {
|
||||
this.isLoading = false;
|
||||
alert("请访问短信提供的链接！");
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.get-file {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
761
pc-web/src/views/Home.vue
Normal file
761
pc-web/src/views/Home.vue
Normal file
@@ -0,0 +1,761 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- <el-row :gutter="16" class="home__summary">
|
||||
<el-col :md="6" :sm="12" :xs="24" v-for="item in summaryCards" :key="item.label">
|
||||
<el-card shadow="hover" class="home__card">
|
||||
<div class="home__card-title">{{ item.label }}</div>
|
||||
<div class="home__card-value">{{ item.value }}</div>
|
||||
<div class="home__card-footer">
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{ item.sub }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-dialog
|
||||
:visible.sync="qrDialogVisible"
|
||||
title="登记信息二维码"
|
||||
width="320px"
|
||||
center
|
||||
>
|
||||
<div style="text-align: center;">
|
||||
<canvas ref="qrCanvas"></canvas>
|
||||
<p style="margin-top: 12px; color: #909399; font-size: 12px;">扫描二维码查看登记信息</p>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="showDialog"
|
||||
title="文件列表"
|
||||
:fullscreen="isMobile"
|
||||
:width="isMobile ? '100%' : '1000px'"
|
||||
:top="isMobile ? '0' : '15vh'"
|
||||
>
|
||||
<div v-loading="pdfLoading" style="min-height: 120px;">
|
||||
<el-empty v-if="!pdfLoading && pdfFiles.length === 0" description="暂无PDF文件" />
|
||||
<div v-else>
|
||||
<div class="home__pdf-search">
|
||||
<el-input v-model="pdfSearchKeyword" size="large" placeholder="搜索文件名" />
|
||||
</div>
|
||||
|
||||
<el-empty v-if="!pdfLoading && filteredPdfFiles.length === 0" description="无匹配文件" />
|
||||
<el-table
|
||||
:height="isMobile ? null : 500"
|
||||
v-else
|
||||
:data="filteredPdfFiles"
|
||||
size="mini"
|
||||
border
|
||||
style="width: 100%;"
|
||||
@row-click="handlePdfRowClick"
|
||||
>
|
||||
<el-table-column label="选择" width="60" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-radio v-model="selectedFileName" :label="scope.row.name"> </el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="文件名" min-width="420">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
:href="pdfHref(scope.row)"
|
||||
type="primary"
|
||||
@click.native.prevent="openPdf(scope.row)"
|
||||
>
|
||||
{{ scope.row.name }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" width="120" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="openPdf(scope.row)">打开</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="confirmSaveData">确认登记</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-card class="home__card home__table-card">
|
||||
<div slot="header" class="home__card-header">
|
||||
<span class="home__card-header-title">登记列表</span>
|
||||
<div class="home__header-actions">
|
||||
<!-- <el-button size="mini" class="home__header-action home__header-action--pdf" @click="openPdfDialog">文件列表</el-button> -->
|
||||
<el-button size="small" type="primary" class="home__header-action" @click="loadData" :loading="loading">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading">
|
||||
<el-table v-if="!isMobile" height="650px" border align="center" :data="tableData" stripe size="medium">
|
||||
<!-- <el-table-column prop="id" label="ID" width="80" /> -->
|
||||
<el-table-column align="center" prop="registerTime" label="登记时间" min-width="180" />
|
||||
|
||||
<el-table-column align="center" prop="customerName" label="客户名称*" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="isEditable(scope.row)">
|
||||
<el-input v-model="scope.row.customerNameDraft" size="mini" />
|
||||
</template>
|
||||
<template v-else>{{ scope.row.customerName }}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="contact" label="联系方式*" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="isEditable(scope.row)">
|
||||
<el-input v-model="scope.row.contactDraft" size="mini" />
|
||||
</template>
|
||||
<template v-else><div >{{ scope.row.contact }}</div></template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="serviceType" label="服务类型*" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="isEditable(scope.row)">
|
||||
<el-select
|
||||
v-model="scope.row.serviceTypeDraft"
|
||||
size="mini"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in serviceTypeOptions"
|
||||
:key="opt"
|
||||
:label="opt"
|
||||
:value="opt"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>{{ scope.row.serviceType }}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="powerType" label="办电类型*" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="isEditable(scope.row)">
|
||||
<el-select
|
||||
v-model="scope.row.powerTypeDraft"
|
||||
size="mini"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in powerTypeOptions"
|
||||
:key="opt"
|
||||
:label="opt"
|
||||
:value="opt"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>{{ scope.row.powerType }}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="status" label="状态" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusType(scope.row.status)" disable-transitions>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="note" label="备注" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="isEditable(scope.row)">
|
||||
<el-input v-model="scope.row.noteDraft" size="mini" />
|
||||
</template>
|
||||
<template v-else>{{ scope.row.note }}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="二维码" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click="showQrCode(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
v-if="isEditable(scope.row)"
|
||||
:loading="isSaving(scope.row)"
|
||||
:disabled="isSaving(scope.row) || !canSave(scope.row)"
|
||||
@click="openFileDialog(scope.row)"
|
||||
>
|
||||
登记
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
title="确定要删除这条记录吗？"
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
style="flex: 1;"
|
||||
@confirm="deleteRow(scope.row)"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
class="home__danger-text"
|
||||
type="text"
|
||||
size="mini"
|
||||
:loading="isDeleting(scope.row)"
|
||||
:disabled="isSaving(scope.row) || isDeleting(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
v-if="!isEditable(scope.row)"
|
||||
@click="sendSms(scope.row.id)"
|
||||
>
|
||||
发送文件通知
|
||||
</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-else class="home__mobile-list">
|
||||
<el-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
|
||||
<el-card v-else v-for="row in tableData" :key="row.id" class="home__mobile-card">
|
||||
<div class="home__mobile-card-header">
|
||||
<div class="home__mobile-card-time">{{ row.registerTime }}</div>
|
||||
<el-tag size="mini" :type="statusType(row.status)" disable-transitions>{{ row.status }}</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-field">
|
||||
<div class="home__mobile-label">客户名称*</div>
|
||||
<div class="home__mobile-value">
|
||||
<el-input v-if="isEditable(row)" v-model="row.customerNameDraft" size="small" />
|
||||
<span v-else>{{ row.customerName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-field">
|
||||
<div class="home__mobile-label">联系方式*</div>
|
||||
<div class="home__mobile-value">
|
||||
<el-input v-if="isEditable(row)" v-model="row.contactDraft" size="small" />
|
||||
<span v-else>{{ row.contact }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-field">
|
||||
<div class="home__mobile-label">服务类型*</div>
|
||||
<div class="home__mobile-value">
|
||||
<el-select
|
||||
v-if="isEditable(row)"
|
||||
v-model="row.serviceTypeDraft"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option v-for="opt in serviceTypeOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
<span v-else>{{ row.serviceType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-field">
|
||||
<div class="home__mobile-label">办电类型*</div>
|
||||
<div class="home__mobile-value">
|
||||
<el-select
|
||||
v-if="isEditable(row)"
|
||||
v-model="row.powerTypeDraft"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option v-for="opt in powerTypeOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
<span v-else>{{ row.powerType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-field">
|
||||
<div class="home__mobile-label">备注</div>
|
||||
<div class="home__mobile-value">
|
||||
<el-input v-if="isEditable(row)" v-model="row.noteDraft" size="small" />
|
||||
<span v-else>{{ row.note }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home__mobile-actions">
|
||||
<el-button
|
||||
v-if="isEditable(row)"
|
||||
type="primary"
|
||||
size="medium "
|
||||
:loading="isSaving(row)"
|
||||
style="flex: 1;"
|
||||
:disabled="isSaving(row) || !canSave(row)"
|
||||
@click="openFileDialog(row)"
|
||||
>
|
||||
登记
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
title="确定要删除这条记录吗？"
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
@confirm="deleteRow(row)"
|
||||
>
|
||||
|
||||
<el-button
|
||||
slot="reference"
|
||||
type="danger"
|
||||
size="medium "
|
||||
style="flex: 1;"
|
||||
:loading="isDeleting(row)"
|
||||
:disabled="isSaving(row) || isDeleting(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<!-- <div v-else class="home__mobile-actions">
|
||||
<el-button type="primary" size="mini" plain @click="showQrCode(row)">
|
||||
查看二维码
|
||||
</el-button>
|
||||
</div> -->
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { buildPdfUrl } from '@/api/client'
|
||||
import Qrcode from'qrcode'
|
||||
export default {
|
||||
name: 'Home',
|
||||
data() {
|
||||
|
||||
return {
|
||||
showDialog:false,
|
||||
qrDialogVisible: false,
|
||||
pdfLoading: false,
|
||||
pdfFiles: [],
|
||||
pdfSearchKeyword: '',
|
||||
loading: false,
|
||||
savingId: null,
|
||||
deletingId: null,
|
||||
windowWidth: typeof window !== 'undefined' ? window.innerWidth : 1024,
|
||||
serviceTypeOptions: ['办电类','咨询类'],
|
||||
powerTypeOptions: ['高压新装、增容', '低压居民新装、增容', '低压非居民新装、增容','低压分布式电源新装、增容','个人电动汽车充电桩','新户通电','电能表校验','低压公共汽车充电桩业务','改压','小区配套新装'],
|
||||
summaryCards: [
|
||||
|
||||
],
|
||||
tableData: [],
|
||||
savedData:undefined,
|
||||
selectedFileName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.windowWidth <= 768
|
||||
},
|
||||
filteredPdfFiles() {
|
||||
const keyword = (this.pdfSearchKeyword || '').trim().toLowerCase()
|
||||
if (!keyword) return this.pdfFiles || []
|
||||
return (this.pdfFiles || []).filter(item => String(item.name || '').toLowerCase().includes(keyword))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
mounted() {
|
||||
this._onResize = () => {
|
||||
this.windowWidth = window.innerWidth
|
||||
}
|
||||
window.addEventListener('resize', this._onResize, { passive: true })
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this._onResize)
|
||||
},
|
||||
methods: {
|
||||
async confirmSaveData(){
|
||||
const data = this.savedData;
|
||||
await this.saveRow(data)
|
||||
this.showDialog = false
|
||||
},
|
||||
handlePdfRowClick(row) {
|
||||
if (!row) return
|
||||
this.selectedFileName = row.name || ''
|
||||
},
|
||||
openFileDialog(data){
|
||||
this.savedData = data;
|
||||
this.selectedFileName = '';
|
||||
this.pdfSearchKeyword = ''
|
||||
this.openPdfDialog();
|
||||
},
|
||||
async sendSms(id){
|
||||
const { sendSmsToUserPhone } = await import('@/api/registrations')
|
||||
|
||||
this.$confirm('是否确认发送文件通知', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: this.isMobile ? 'home__message-box--mobile-center' : undefined
|
||||
}).then(async() => {
|
||||
await sendSmsToUserPhone(id)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '发送成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
async openPdfDialog() {
|
||||
this.showDialog = true
|
||||
this.pdfSearchKeyword = ''
|
||||
await this.loadPdfFiles()
|
||||
},
|
||||
async loadPdfFiles() {
|
||||
this.pdfLoading = true
|
||||
try {
|
||||
const { fetchPdfs } = await import('@/api/pdfs')
|
||||
const list = await fetchPdfs()
|
||||
this.pdfFiles = (list || []).map(item => ({
|
||||
name: item.name,
|
||||
url: item.url
|
||||
}))
|
||||
} catch (err) {
|
||||
this.$message.error('加载PDF列表失败')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
} finally {
|
||||
this.pdfLoading = false
|
||||
}
|
||||
},
|
||||
openPdf(file) {
|
||||
const url = this.pdfHref(file)
|
||||
if (url && url !== '#') window.location.href = url
|
||||
},
|
||||
pdfHref(row) {
|
||||
return buildPdfUrl(row && row.name) || (row && row.url) || '#'
|
||||
},
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const { fetchRegistrations } = await import('@/api/registrations')
|
||||
const list = await fetchRegistrations()
|
||||
this.tableData = (list || []).map(item => ({
|
||||
id: item.id,
|
||||
customerName: item.customerName,
|
||||
customerNameDraft: item.customerName,
|
||||
contact: item.contact,
|
||||
contactDraft: item.contact,
|
||||
serviceType: item.serviceType,
|
||||
serviceTypeDraft: item.serviceType,
|
||||
powerType: item.powerType,
|
||||
powerTypeDraft: item.powerType,
|
||||
registerTime: item.registerTime,
|
||||
note: item.note,
|
||||
noteDraft: item.note,
|
||||
status: item.status
|
||||
}))
|
||||
} catch (err) {
|
||||
this.$message.error('加载登记数据失败')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
isEditable(row) {
|
||||
return row.status === '待登记'
|
||||
},
|
||||
isSaving(row) {
|
||||
return this.savingId === row.id
|
||||
},
|
||||
isDeleting(row) {
|
||||
return this.deletingId === row.id
|
||||
},
|
||||
canSave(row) {
|
||||
const customerName = (row.customerNameDraft || '').trim()
|
||||
const contact = (row.contactDraft || '').trim()
|
||||
const serviceType = (row.serviceTypeDraft || '').trim()
|
||||
const powerType = (row.powerTypeDraft || '').trim()
|
||||
return Boolean(customerName && contact && serviceType && powerType)
|
||||
},
|
||||
async deleteRow(row) {
|
||||
const id = row && row.id
|
||||
if (!id) return
|
||||
this.deletingId = id
|
||||
try {
|
||||
const { deleteRegistration } = await import('@/api/registrations')
|
||||
await deleteRegistration(id)
|
||||
|
||||
this.tableData = (this.tableData || []).filter(item => item.id !== id)
|
||||
if (this.savedData && this.savedData.id === id) {
|
||||
this.showDialog = false
|
||||
this.savedData = undefined
|
||||
this.selectedFileName = ''
|
||||
}
|
||||
this.$message.success('已删除')
|
||||
} catch (err) {
|
||||
this.$message.error('删除失败')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
} finally {
|
||||
this.deletingId = null
|
||||
}
|
||||
},
|
||||
async saveRow(row) {
|
||||
const customerName = (row.customerNameDraft || '').trim()
|
||||
const contact = (row.contactDraft || '').trim()
|
||||
const serviceType = (row.serviceTypeDraft || '').trim()
|
||||
const powerType = (row.powerTypeDraft || '').trim()
|
||||
|
||||
if (!customerName) {
|
||||
this.$message.warning('客户名称为必填')
|
||||
return
|
||||
}
|
||||
if (!contact) {
|
||||
this.$message.warning('联系方式为必填')
|
||||
return
|
||||
}
|
||||
if (!serviceType) {
|
||||
this.$message.warning('服务类型为必填')
|
||||
return
|
||||
}
|
||||
if (!powerType) {
|
||||
this.$message.warning('办电类型为必填')
|
||||
return
|
||||
}
|
||||
|
||||
this.savingId = row.id
|
||||
try {
|
||||
const { updateRegistration } = await import('@/api/registrations')
|
||||
const payload = {
|
||||
id: row.id,
|
||||
customerName,
|
||||
contact,
|
||||
serviceType,
|
||||
powerType,
|
||||
registerTime: row.registerTime,
|
||||
note: row.noteDraft,
|
||||
status: '已登记',
|
||||
fileName: this.selectedFileName
|
||||
}
|
||||
await updateRegistration(row.id, payload)
|
||||
row.customerNameDraft = customerName
|
||||
row.contactDraft = contact
|
||||
row.serviceTypeDraft = serviceType
|
||||
row.powerTypeDraft = powerType
|
||||
row.customerName = customerName
|
||||
row.contact = contact
|
||||
row.serviceType = serviceType
|
||||
row.powerType = powerType
|
||||
row.note = row.noteDraft
|
||||
row.status = '已登记'
|
||||
this.$message.success('已登记')
|
||||
} catch (err) {
|
||||
this.$message.error('保存失败')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
} finally {
|
||||
this.savingId = null
|
||||
}
|
||||
},
|
||||
statusType(status) {
|
||||
const map = {
|
||||
待登记: 'warning',
|
||||
已登记: 'success',
|
||||
已完成: 'success',
|
||||
已关闭: 'info'
|
||||
}
|
||||
return map[status] || 'default'
|
||||
},
|
||||
async showQrCode(row) {
|
||||
this.qrDialogVisible = true
|
||||
await this.$nextTick()
|
||||
const canvas = this.$refs.qrCanvas
|
||||
if (!canvas) return
|
||||
const qrContent = [
|
||||
`客户名称: ${row.customerName || ''}`,
|
||||
`联系方式: ${row.contact || ''}`,
|
||||
`服务类型: ${row.serviceType || ''}`,
|
||||
`办电类型: ${row.powerType || ''}`,
|
||||
`登记时间: ${row.registerTime || ''}`,
|
||||
`状态: ${row.status || ''}`,
|
||||
`备注: ${row.note || ''}`
|
||||
].join('\n')
|
||||
try {
|
||||
await Qrcode.toCanvas(canvas, qrContent, {
|
||||
width: 240,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#ffffff'
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
this.$message.error('生成二维码失败')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home__danger-text {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
:global(.home__message-box--mobile-center) {
|
||||
margin-top: 0 !important;
|
||||
width: calc(100% - 32px);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.home__pdf-search {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.home__card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.home__card-header-title {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home__header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.home__summary {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home__card {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.home__card-title {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home__card-value {
|
||||
margin-top: 12px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.home__card-footer {
|
||||
margin-top: 8px;
|
||||
color: #67c23a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.home__table-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.home__header-action {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.home__header-action--pdf {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.home__mobile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home__mobile-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.home__mobile-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.home__mobile-card-time {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home__mobile-field {
|
||||
display: grid;
|
||||
grid-template-columns: 86px 1fr;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.home__mobile-label {
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.home__mobile-value {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
line-height: 28px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.home__mobile-link {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.home__mobile-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home__card {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.home__header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home__header-actions ::v-deep .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home__table-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
pc-web/src/views/PhoneQuery.vue
Normal file
200
pc-web/src/views/PhoneQuery.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="phone-query">
|
||||
<div class="phone-query__container">
|
||||
<div class="phone-query__icon">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
<h2 class="phone-query__title">业务办理告知</h2>
|
||||
<!-- <p class="phone-query__subtitle">输入手机号查询相关文件</p> -->
|
||||
<el-card class="phone-query__card" shadow="hover">
|
||||
<el-form :model="form" ref="formRef">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
|
||||
size="large"
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleQuery"
|
||||
class="phone-query__btn"
|
||||
>
|
||||
<i v-if="!loading" class="el-icon-search"></i>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { buildPdfUrl } from '@/api/client'
|
||||
export default {
|
||||
name: "PhoneQuery",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
phone: "",
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async handleQuery() {
|
||||
const phone = (this.form.phone || "").trim();
|
||||
if (!phone) {
|
||||
this.$message.warning("请输入手机号");
|
||||
return;
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
this.$message.warning("请输入正确的手机号");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
try {
|
||||
const { searchByPhone } = await import("@/api/registrations");
|
||||
let data = await searchByPhone(phone);
|
||||
if (data != null && data.length > 0) {
|
||||
data = data[0]
|
||||
if (data.status == "待登记") {
|
||||
this.$message.warning("暂未查询到相关信息");
|
||||
} else if (data.status == "已登记") {
|
||||
const { fileName } = data;
|
||||
if (fileName == null) {
|
||||
this.$message.warning("未查询到相关信息");
|
||||
}else{
|
||||
window.location.href = buildPdfUrl(fileName)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
this.$message.warning("暂未查询到相关信息");
|
||||
}
|
||||
|
||||
// TODO: 调用查询接口
|
||||
// window.location.href = "/pdf/1.pdf";
|
||||
} catch (err) {
|
||||
this.$message.error("查询失败");
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.phone-query {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.phone-query__container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phone-query__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.phone-query__icon i {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone-query__title {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.phone-query__subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.phone-query__card {
|
||||
width: 360px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.phone-query__card ::v-deep .el-card__body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.phone-query__card ::v-deep .el-input__inner {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.phone-query__card ::v-deep .el-input__prefix {
|
||||
left: 12px;
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.phone-query__card ::v-deep .el-input--prefix .el-input__inner {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.phone-query__btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.phone-query__btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.phone-query__btn i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.phone-query__card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.phone-query__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.phone-query__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.phone-query__icon i {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
pc-web/src/views/Register.vue
Normal file
252
pc-web/src/views/Register.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<div class="register__container">
|
||||
<div class="register__icon">
|
||||
<i :class="submitted ? 'el-icon-check' : 'el-icon-edit-outline'"></i>
|
||||
</div>
|
||||
<h2 class="register__title">{{ submitted ? '提交成功' : '咨询信息登记' }}</h2>
|
||||
<p class="register__subtitle">{{ submitted ? '我们已收到您的信息' : '请填写您的姓名和联系电话' }}</p>
|
||||
|
||||
<el-card v-if="!submitted" class="register__card" shadow="hover">
|
||||
<!-- 成功状态 -->
|
||||
<div v-if="submitted" class="register__success">
|
||||
<div class="register__success-icon">
|
||||
<i class="el-icon-circle-check"></i>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="register__btn register__btn--success"
|
||||
@click="resetForm"
|
||||
>
|
||||
继续登记
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form v-if="!submitted" :model="form" ref="formRef">
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入姓名"
|
||||
|
||||
size="large"
|
||||
prefix-icon="el-icon-user"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
|
||||
size="large"
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
class="register__btn"
|
||||
>
|
||||
<i v-if="!loading" class="el-icon-check"></i>
|
||||
确定
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
phone: ''
|
||||
},
|
||||
loading: false,
|
||||
submitted: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleSubmit() {
|
||||
const name = (this.form.name || '').trim()
|
||||
const phone = (this.form.phone || '').trim()
|
||||
|
||||
if (!name) {
|
||||
this.$message.warning('请填写姓名')
|
||||
return
|
||||
}
|
||||
if (!phone) {
|
||||
this.$message.warning('请填写联系电话')
|
||||
return
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
this.$message.warning('请填写有效联系电话')
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
const { createRegistration } = await import('@/api/registrations')
|
||||
await createRegistration({
|
||||
customerName: name,
|
||||
contact: phone
|
||||
})
|
||||
this.$message.success('提交成功')
|
||||
this.submitted = true
|
||||
} catch (err) {
|
||||
this.$message.error('网络错误，请检查连接')
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.form.name = ''
|
||||
this.form.phone = ''
|
||||
this.submitted = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.register {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register__container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.register__icon i {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.register__title {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.register__subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.register__card {
|
||||
width: 360px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.register__card ::v-deep .el-card__body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.register__card ::v-deep .el-input__inner {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.register__card ::v-deep .el-input__prefix {
|
||||
left: 12px;
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.register__card ::v-deep .el-input--prefix .el-input__inner {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.register__btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.register__btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.register__btn i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.register__btn--success {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
}
|
||||
|
||||
.register__success {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.register__success-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 24px;
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
border: 2px solid rgba(22, 163, 74, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.register__success-icon i {
|
||||
font-size: 36px;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.register__card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.register__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.register__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.register__icon i {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user