@@ -1,5 +1,5 @@ | |||||
[*.{js,jsx,ts,tsx,vue}] | [*.{js,jsx,ts,tsx,vue}] | ||||
indent_style = space | indent_style = space | ||||
indent_size = 2 | |||||
indent_size = 4 | |||||
trim_trailing_whitespace = true | trim_trailing_whitespace = true | ||||
insert_final_newline = true | insert_final_newline = true |
@@ -0,0 +1 @@ | |||||
# 默认的全局配置文件,适用于所有环境。 |
@@ -0,0 +1,4 @@ | |||||
# 在Vue 项目中,环境变量名必须以 VUE_APP_ 开头,Vue CLI 才会识别并注入它们。 | |||||
# 开发环境的 API 地址 | |||||
# VUE_APP_API_HOST=http://192.168.110.230:9897/cqmz_test/ | |||||
VUE_APP_API_HOST=http://139.9.38.43:6009/cqmz |
@@ -0,0 +1,5 @@ | |||||
# 正式环境 | |||||
VUE_APP_API_HOST=https://www.jujiaservice.com/cqmz | |||||
# 测试环境 | |||||
# VUE_APP_API_HOST=http://139.9.38.43:6009/cqmz | |||||
BASE_URL:/wlq_plat/ |
@@ -12,7 +12,10 @@ module.exports = { | |||||
ecmaVersion: 2020 | ecmaVersion: 2020 | ||||
}, | }, | ||||
rules: { | rules: { | ||||
// 'no-console': 'off', | |||||
// 'some-other-rule': 'off' | |||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | ||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' | |||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | |||||
'vue/multi-word-component-names': 'off' | |||||
} | } | ||||
} | } |
@@ -22,3 +22,6 @@ npm run lint | |||||
### Customize configuration | ### Customize configuration | ||||
See [Configuration Reference](https://cli.vuejs.org/config/). | See [Configuration Reference](https://cli.vuejs.org/config/). | ||||
### 上线部署访问路径配置 | |||||
vue.config.js里的publicPath属性 |
@@ -1,5 +1,5 @@ | |||||
module.exports = { | module.exports = { | ||||
presets: [ | |||||
'@vue/cli-plugin-babel/preset' | |||||
] | |||||
presets: [ | |||||
'@vue/cli-plugin-babel/preset' | |||||
] | |||||
} | } |
@@ -8,13 +8,17 @@ | |||||
"lint": "vue-cli-service lint" | "lint": "vue-cli-service lint" | ||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"@element-plus/icons-vue": "^2.3.1", | |||||
"axios": "^1.7.7", | |||||
"core-js": "^3.8.3", | "core-js": "^3.8.3", | ||||
"element-plus": "^2.8.3", | |||||
"vue": "^3.2.13", | "vue": "^3.2.13", | ||||
"vue-class-component": "^8.0.0-0", | "vue-class-component": "^8.0.0-0", | ||||
"vue-router": "^4.0.3", | "vue-router": "^4.0.3", | ||||
"vuex": "^4.0.0" | "vuex": "^4.0.0" | ||||
}, | }, | ||||
"devDependencies": { | "devDependencies": { | ||||
"@types/axios": "^0.14.0", | |||||
"@typescript-eslint/eslint-plugin": "^5.4.0", | "@typescript-eslint/eslint-plugin": "^5.4.0", | ||||
"@typescript-eslint/parser": "^5.4.0", | "@typescript-eslint/parser": "^5.4.0", | ||||
"@vue/cli-plugin-babel": "~5.0.0", | "@vue/cli-plugin-babel": "~5.0.0", | ||||
@@ -29,9 +33,9 @@ | |||||
"eslint-plugin-import": "^2.25.3", | "eslint-plugin-import": "^2.25.3", | ||||
"eslint-plugin-node": "^11.1.0", | "eslint-plugin-node": "^11.1.0", | ||||
"eslint-plugin-promise": "^5.1.0", | "eslint-plugin-promise": "^5.1.0", | ||||
"eslint-plugin-vue": "^8.0.3", | |||||
"eslint-plugin-vue": "^8.0.1", | |||||
"less": "^4.0.0", | "less": "^4.0.0", | ||||
"less-loader": "^8.0.0", | "less-loader": "^8.0.0", | ||||
"typescript": "~4.5.5" | |||||
"typescript": "^5.1.6" | |||||
} | } | ||||
} | } |
@@ -5,9 +5,11 @@ | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||||
<title><%= htmlWebpackPlugin.options.title %></title> | |||||
<title>武隆区救助智慧终端</title> | |||||
<!-- <title><%= htmlWebpackPlugin.options.title %></title>--> | |||||
</head> | </head> | ||||
<body> | |||||
<body style="margin: 0"> | |||||
<noscript> | <noscript> | ||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | ||||
</noscript> | </noscript> | ||||
@@ -15,3 +17,6 @@ | |||||
<!-- built files will be auto injected --> | <!-- built files will be auto injected --> | ||||
</body> | </body> | ||||
</html> | </html> | ||||
<style> | |||||
</style> |
@@ -1,30 +1,20 @@ | |||||
<template> | <template> | ||||
<nav> | |||||
<router-link to="/">Home</router-link> | | |||||
<router-link to="/about">About</router-link> | |||||
</nav> | |||||
<router-view/> | |||||
<div > | |||||
<router-view/> | |||||
</div> | |||||
</template> | </template> | ||||
<style lang="less"> | <style lang="less"> | ||||
@import "./assets/less/index.less"; | |||||
#app { | #app { | ||||
font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
//font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||||
text-align: center; | |||||
color: #2c3e50; | |||||
} | } | ||||
nav { | |||||
padding: 30px; | |||||
a { | |||||
font-weight: bold; | |||||
color: #2c3e50; | |||||
&.router-link-exact-active { | |||||
color: #42b983; | |||||
} | |||||
} | |||||
} | |||||
</style> | </style> | ||||
<script setup lang="ts"> | |||||
</script> |
@@ -0,0 +1,76 @@ | |||||
/*超出显示... 一行*/ | |||||
.over-hidden_one { | |||||
overflow:hidden; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
} | |||||
/* 超出显示... 两行 */ | |||||
.over-hidden_two { | |||||
overflow: hidden; | |||||
display: -webkit-box; | |||||
-webkit-line-clamp: 2; | |||||
-webkit-box-orient: vertical; | |||||
} | |||||
/* 超出显示... 三行 */ | |||||
.over-hidden_three { | |||||
overflow: hidden; | |||||
display: -webkit-box; | |||||
-webkit-line-clamp: 3; | |||||
-webkit-box-orient: vertical; | |||||
} | |||||
*{ | |||||
box-sizing: border-box; | |||||
} | |||||
//初始化样式 | |||||
html, body, div, span, applet, object, iframe, | |||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||||
a, abbr, acronym, address, big, cite, code, | |||||
del, dfn, em, img, ins, kbd, q, s, samp, | |||||
small, strike, strong, sub, sup, tt, var, | |||||
b, u, i, center, | |||||
dl, dt, dd, ol, ul, li, | |||||
fieldset, form, label, legend, | |||||
table, caption, tbody, tfoot, thead, tr, th, td, | |||||
article, aside, canvas, details, embed, | |||||
figure, figcaption, footer, header, hgroup, | |||||
menu, nav, output, ruby, section, summary, | |||||
time, mark, audio, video { | |||||
margin: 0; | |||||
padding: 0; | |||||
border: 0; | |||||
font-size: 100%; | |||||
font: inherit; | |||||
vertical-align: baseline; | |||||
} | |||||
/* HTML5 display-role reset for older browsers */ | |||||
article, aside, details, figcaption, figure, | |||||
footer, header, hgroup, menu, nav, section { | |||||
display: block; | |||||
} | |||||
body { | |||||
line-height: 1; | |||||
} | |||||
ol, ul { | |||||
list-style: none; | |||||
} | |||||
blockquote, q { | |||||
quotes: none; | |||||
} | |||||
blockquote:before, blockquote:after, | |||||
q:before, q:after { | |||||
content: ''; | |||||
content: none; | |||||
} | |||||
table { | |||||
border-collapse: collapse; | |||||
border-spacing: 0; | |||||
} |
@@ -1,65 +0,0 @@ | |||||
<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-router" target="_blank" rel="noopener">router</a></li> | |||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</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-typescript" target="_blank" rel="noopener">typescript</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 lang="ts"> | |||||
import { Options, Vue } from 'vue-class-component' | |||||
@Options({ | |||||
props: { | |||||
msg: String | |||||
} | |||||
}) | |||||
export default class HelloWorld extends Vue { | |||||
msg!: string | |||||
} | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped lang="less"> | |||||
h3 { | |||||
margin: 40px 0 0; | |||||
} | |||||
ul { | |||||
list-style-type: none; | |||||
padding: 0; | |||||
} | |||||
li { | |||||
display: inline-block; | |||||
margin: 0 10px; | |||||
} | |||||
a { | |||||
color: #42b983; | |||||
} | |||||
</style> |
@@ -0,0 +1,23 @@ | |||||
<template> | |||||
<div class="back"> | |||||
<router-link to="/"><img src="../assets/images/btn_toHome.png" alt=""></router-link> | |||||
<router-link to="/policyQuery"><img src="../assets/images/btn_back.png" alt=""></router-link> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.back{ | |||||
margin-top: 1.2vw; | |||||
display: flex; | |||||
gap: 2vw; | |||||
//padding-left:71.87vw ; | |||||
img{ | |||||
width: 8.75vw; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,42 @@ | |||||
<template> | |||||
<div class="framework"> | |||||
<MyHeader :theme="headerThemte"></MyHeader> | |||||
<div class="body"> | |||||
<slot></slot> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import MyHeader from './header.vue' | |||||
export default { | |||||
components: { MyHeader }, | |||||
props: { | |||||
headerThemte: { | |||||
type: String, | |||||
default: 'blue' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
dayOfWeek: '' | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less" scoped> | |||||
.framework{ | |||||
//width: 100vw; | |||||
min-height: 100vh; | |||||
background-color: #f2f2f2; | |||||
.body{ | |||||
//background-color: #fff; | |||||
//height: 500px; | |||||
padding: 1.25vw 1.875vw 0; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,172 @@ | |||||
<template> | |||||
<div class="header" v-if="theme === 'blue' "> | |||||
<div class="header__left"> | |||||
<!-- 武隆区救助智慧终端--> | |||||
<router-link to="/"><img src="../assets/images/headerIcon.png" alt=""></router-link> | |||||
<router-link to="/"> | |||||
<router-link to="/"> | |||||
<span class="back">首页</span> | |||||
</router-link> | |||||
</router-link> | |||||
</div> | |||||
<div class="header__right"> | |||||
<span>{{ dayOfWeek }} <br>{{ formattedDate }}</span> | |||||
<span>{{ formattedTime }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="header2" v-if="theme === 'white' "> | |||||
<div class="header__left"> | |||||
<!-- 武隆区救助智慧终端--> | |||||
<router-link to="/"><img src="../assets/images/wl_icon.png" alt=""></router-link> | |||||
<router-link to="/"> | |||||
<span class="back">首页</span> | |||||
</router-link> | |||||
</div> | |||||
<div class="header__right"> | |||||
<span>{{ dayOfWeek }} <br>{{ formattedDate }}</span> | |||||
<span>{{ formattedTime }}</span> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script > | |||||
export default { | |||||
props: { | |||||
theme: { | |||||
type: String, | |||||
default: 'blue' | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
dayOfWeek: '', | |||||
formattedDate: '', | |||||
formattedTime: '' | |||||
} | |||||
}, | |||||
methods: { | |||||
// 获取时间 | |||||
updateDateTime () { | |||||
const now = new Date() | |||||
// 获取星期 | |||||
const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] | |||||
this.dayOfWeek = daysOfWeek[now.getDay()] | |||||
// 获取年月日 | |||||
const year = now.getFullYear() | |||||
const month = String(now.getMonth() + 1).padStart(2, '0') | |||||
const day = String(now.getDate()).padStart(2, '0') | |||||
this.formattedDate = `${year}-${month}-${day}` | |||||
// 获取小时和分钟 | |||||
const hours = String(now.getHours()).padStart(2, '0') | |||||
const minutes = String(now.getMinutes()).padStart(2, '0') | |||||
this.formattedTime = `${hours}:${minutes}` | |||||
} | |||||
}, | |||||
mounted () { | |||||
this.updateDateTime() | |||||
setInterval(this.updateDateTime, 1000) | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.header { | |||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3); | |||||
background:url("../assets/images/headerBg2.png"); | |||||
background-size: 100% 113%; | |||||
height: 3.906vw; | |||||
background-color: #fff; | |||||
color: #fff; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 35px; | |||||
&__left { | |||||
//height: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
gap: 1vw; | |||||
img { | |||||
width: 20.15vw; | |||||
} | |||||
.back{ | |||||
display: inline-block; | |||||
width: 3.85vw; | |||||
height: 1.96vw; | |||||
background-color: #E8F2FF; | |||||
color: #347BD5; | |||||
font-size: 0.9vw; | |||||
text-align: center; | |||||
line-height: 1.96vw; | |||||
border-radius: 4px; | |||||
} | |||||
} | |||||
&__right { | |||||
display: flex; | |||||
span:nth-child(1) { | |||||
//color: red; | |||||
text-align: right; | |||||
display: inline-block; | |||||
margin-right: 0.52vw; | |||||
font-size: 0.729vw; | |||||
line-height: 1vw; | |||||
} | |||||
span:nth-child(2) { | |||||
font-size: 2vw; | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
.header2 { | |||||
height: 3.906vw; | |||||
background-color: #fff; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 35px; | |||||
&__left { | |||||
//height: 100%; | |||||
img { | |||||
width: 20.15vw; | |||||
} | |||||
} | |||||
&__right { | |||||
display: flex; | |||||
span:nth-child(1) { | |||||
//color: red; | |||||
text-align: right; | |||||
display: inline-block; | |||||
margin-right: 0.52vw; | |||||
font-size: 0.729vw; | |||||
line-height: 1vw; | |||||
} | |||||
span:nth-child(2) { | |||||
font-size: 2vw; | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,81 @@ | |||||
<template> | |||||
<div class="radio"> | |||||
<div class="title">{{ title }}</div> | |||||
<el-radio-group v-model="radioValue" @change="onRadioChange"> | |||||
<el-radio :value="item.value" size="large" v-for="(item, index) in options" :key="index">{{ item.label }}</el-radio> | |||||
</el-radio-group> | |||||
</div> | |||||
</template> | |||||
<script>export default { | |||||
name: 'Radio', | |||||
model: { | |||||
prop: 'value', | |||||
event: 'change' | |||||
}, | |||||
props: { | |||||
value: { | |||||
type: [String, Number], | |||||
default: 1, | |||||
required: true | |||||
}, | |||||
options: { | |||||
type: Array, | |||||
default: () => [ | |||||
{ value: 1, label: '正常' }, | |||||
{ value: 2, label: '重度残疾' }, | |||||
{ value: 3, label: '残疾' } | |||||
] | |||||
}, | |||||
title: { | |||||
type: String, | |||||
default: '标题' | |||||
}, | |||||
width: { | |||||
type: String, | |||||
default: '20vw' | |||||
} | |||||
}, | |||||
emits: ['change'], | |||||
data () { | |||||
return { | |||||
radioValue: this.value | |||||
} | |||||
}, | |||||
watch: { | |||||
value (newValue) { | |||||
this.radioValue = newValue | |||||
} | |||||
}, | |||||
methods: { | |||||
onRadioChange (value) { | |||||
this.radioValue = value | |||||
this.$emit('change', value) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.radio{ | |||||
background-color: #DBECFF; | |||||
height: 5.76vw ; | |||||
padding: 0.83vw 1vw ; | |||||
border-radius: 4px; | |||||
width: v-bind(width); | |||||
.title{ | |||||
font-size: 0.93vw; | |||||
//margin: 1vw 0; | |||||
margin-bottom: 1vw; | |||||
} | |||||
:deep(.el-radio.el-radio--large .el-radio__label) { | |||||
font-size: 0.93vw; | |||||
} | |||||
:deep(.el-radio.el-radio--large .el-radio__inner) { | |||||
width: 0.93vw; | |||||
height: 0.93vw; | |||||
} | |||||
} | |||||
</style> |
@@ -3,4 +3,27 @@ import App from './App.vue' | |||||
import router from './router' | import router from './router' | ||||
import store from './store' | import store from './store' | ||||
createApp(App).use(store).use(router).mount('#app') | |||||
import ElementPlus from 'element-plus' | |||||
import 'element-plus/dist/index.css' | |||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' | |||||
import api from './utils/request' | |||||
import { utils } from '@/utils/utils' | |||||
import zhCn from 'element-plus/es/locale/lang/zh-cn' | |||||
// 创建应用实例 | |||||
const app = createApp(App) | |||||
// 全局注册 Element Plus 图标 | |||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { | |||||
app.component(key, component) | |||||
} | |||||
// 设置全局属性 | |||||
app.config.globalProperties.$http = api // axios | |||||
app.config.globalProperties.$utils = utils // 公共方法 | |||||
// 使用 store 和 router | |||||
app.use(store).use(router).use(ElementPlus, { locale: zhCn }) | |||||
// 挂载到 DOM | |||||
app.mount('#app') |
@@ -1,4 +1,4 @@ | |||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' | |||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' | |||||
import HomeView from '../views/HomeView.vue' | import HomeView from '../views/HomeView.vue' | ||||
const routes: Array<RouteRecordRaw> = [ | const routes: Array<RouteRecordRaw> = [ | ||||
@@ -10,15 +10,48 @@ const routes: Array<RouteRecordRaw> = [ | |||||
{ | { | ||||
path: '/about', | path: '/about', | ||||
name: '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/AboutView.vue') | |||||
component: () => import('../views/AboutView.vue') | |||||
}, | |||||
{ | |||||
path: '/rescueCalculation', | |||||
name: 'rescueCalculation', | |||||
component: () => import('@/views/rescueCalculation/RescueCalculation.vue') | |||||
}, | |||||
{ | |||||
path: '/infoFill', | |||||
name: 'infoFill', | |||||
component: () => import('@/views/rescueCalculation/InfoFill.vue') | |||||
}, | |||||
{ | |||||
path: '/results', | |||||
name: 'results', | |||||
component: () => import('@/views/rescueCalculation/Results.vue') | |||||
}, | |||||
{ | |||||
path: '/policyQuery', | |||||
name: 'policyQuery', | |||||
component: () => import('@/views/policy/policyQuery.vue') | |||||
}, | |||||
{ | |||||
path: '/policyDetail', | |||||
name: 'policyDetail', | |||||
component: () => import('@/views/policy/policyDetail.vue') | |||||
}, | |||||
{ | |||||
path: '/bailoutQuery', | |||||
name: 'bailoutQuery', | |||||
component: () => import('@/views/myBailout/BailoutQuery.vue') | |||||
}, | |||||
{ | |||||
path: '/difficult', | |||||
name: 'difficult', | |||||
component: () => import('@/views/rescueCalculation/difficult.vue') | |||||
} | } | ||||
] | ] | ||||
const router = createRouter({ | const router = createRouter({ | ||||
history: createWebHistory(process.env.BASE_URL), | |||||
history: createWebHashHistory(process.env.BASE_URL), | |||||
routes | routes | ||||
}) | }) | ||||
@@ -0,0 +1,91 @@ | |||||
import axios from 'axios' | |||||
import { ElMessage } from 'element-plus' // 假设你使用的是 Element Plus | |||||
// 判断当前环境 | |||||
// const isProduction = process.env.NODE_ENV === 'production' | |||||
// console.log(process.env.NODE_ENV, isProduction, 'process.env.NODE_ENV') | |||||
// const apiBaseUrl = isProduction ? 'https://api.example.com' : 'http://192.168.110.230:9897/cqmz_test/' | |||||
const apiBaseUrl = process.env.VUE_APP_API_HOST // 从环境变量中获取 API 基础 URL | |||||
// 创建 Axios 实例 | |||||
const instance = axios.create({ | |||||
baseURL: apiBaseUrl, // 你的 API 基础 URL | |||||
timeout: 60000 // 设置超时时间 | |||||
}) | |||||
// 请求拦截器 | |||||
instance.interceptors.request.use( | |||||
config => { | |||||
// 在发送请求之前做些什么,例如添加 token 到请求头 | |||||
const token = localStorage.getItem('token') | |||||
if (token) { | |||||
config.headers.Authorization = `Bearer ${token}` | |||||
} | |||||
return config | |||||
}, | |||||
error => { | |||||
// 请求错误时做些什么 | |||||
return Promise.reject(error) | |||||
} | |||||
) | |||||
// 响应拦截器 | |||||
instance.interceptors.response.use( | |||||
response => { | |||||
// 对响应数据做点什么 | |||||
return response.data | |||||
}, | |||||
error => { | |||||
// 对响应错误做些什么 | |||||
if (error.response) { | |||||
switch (error.response.status) { | |||||
case 400: | |||||
ElMessage.error('错误请求') | |||||
break | |||||
case 401: | |||||
ElMessage.error('未授权,请登录') | |||||
// 清除 token 并跳转到登录页面 | |||||
localStorage.removeItem('token') | |||||
// router.push('/login'); | |||||
break | |||||
case 403: | |||||
ElMessage.error('拒绝访问') | |||||
break | |||||
case 404: | |||||
ElMessage.error(`请求地址出错: ${error.response.config.url}`) | |||||
break | |||||
case 408: | |||||
ElMessage.error('请求超时') | |||||
break | |||||
case 500: | |||||
ElMessage.error('服务器内部错误') | |||||
break | |||||
case 501: | |||||
ElMessage.error('服务未实现') | |||||
break | |||||
case 502: | |||||
ElMessage.error('网关错误') | |||||
break | |||||
case 503: | |||||
ElMessage.error('服务不可用') | |||||
break | |||||
case 504: | |||||
ElMessage.error('网关超时') | |||||
break | |||||
case 505: | |||||
ElMessage.error('HTTP版本不受支持') | |||||
break | |||||
default: | |||||
ElMessage.error(`连接错误:${error.message}`) | |||||
} | |||||
} else if (error.request) { | |||||
ElMessage.error('无法连接到服务器,请检查网络') | |||||
} else { | |||||
ElMessage.error(`错误:${error.message}`) | |||||
} | |||||
return Promise.reject(error) | |||||
} | |||||
) | |||||
export default instance |
@@ -0,0 +1,7 @@ | |||||
export const utils = { | |||||
// 公共方法 | |||||
getImgUrl (attachId:string | number) { | |||||
// console.log('发起图片请求拉') | |||||
return process.env.VUE_APP_API_HOST + `/attach/showImg.do?attachId=${attachId + ''}&w=500&h=500"` | |||||
} | |||||
} |
@@ -1,18 +1,325 @@ | |||||
<template> | <template> | ||||
<div class="home"> | |||||
<img alt="Vue logo" src="../assets/logo.png"> | |||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> | |||||
</div> | |||||
<div class="home"> | |||||
<div class="header"> | |||||
<div class="header__left"> | |||||
<!-- 武隆区救助智慧终端--> | |||||
<img src="../assets/images/wl_icon.png" alt=""> | |||||
</div> | |||||
<div class="header__right"> | |||||
<span>{{ dayOfWeek }} <br>{{ formattedDate }}</span> | |||||
<span>{{ formattedTime }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="news"> | |||||
<div class="news__title over-hidden_one"> | |||||
市委常委会举行会议 深入学习贯彻习近平总书记重要讲话精神 研究部署进一步健全全面从严治党体系等工作步健全全面从严治党体系等工作 | |||||
</div> | |||||
<div class="news__content"> | |||||
<div class="news__left"> | |||||
<el-carousel height="26vw" :key="carouselKey"> | |||||
<el-carousel-item v-for="(item,index) in imgIdArr" :key="index"> | |||||
<img :src="this.$utils.getImgUrl(item)" alt=""> | |||||
</el-carousel-item> | |||||
</el-carousel> | |||||
</div> | |||||
<div class="news__right"> | |||||
<div class="news__nav"> | |||||
<div v-for="(item,index) in categories" :key="index" class="news__nav__item" :class=" {'news__nav__active' : navActive === item.ic_code}" | |||||
@click="changeNavActive(item.ic_code)">{{ item.ic_name }} | |||||
</div> | |||||
</div> | |||||
<ul class="news__list"> | |||||
<li v-for="(item,index) in listInfo" :key="index" @click="this.$router.push({name:'policyDetail',query:{ data_id: item.data_id}})"> | |||||
<span class="over-hidden_one">{{item.data_title}}</span> | |||||
<span>{{ item.data_create.slice(0,10) }}</span> | |||||
</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 重要政策图片--> | |||||
<div class="zyzc"> | |||||
<img src="../assets/images/zcjc.png" alt=""> | |||||
</div> | |||||
<!-- 政策查询--> | |||||
<div class="select"> | |||||
<router-link to="/policyQuery"><img src="../assets/images/jzzc.png" alt=""></router-link> | |||||
<router-link to="/rescueCalculation"><img src="../assets/images/jzcs.png" alt=""></router-link> | |||||
<router-link to="/bailoutQuery"><img src="../assets/images/wdjz.png" alt=""></router-link> | |||||
</div> | |||||
<!-- <img src="http://192.168.110.230:9897/cqmz_test/attach/showImg.do?attachId=1843832899329851392&w=500&h=500" alt="">--> | |||||
<!-- <img src="http://139.9.38.43:6009/cqmzattach/showImg.do?attachId=1844208813087653888&w=500&h=500" alt="">--> | |||||
<!-- 123--> | |||||
</div> | |||||
</template> | </template> | ||||
<script lang="ts"> | |||||
import { Options, Vue } from 'vue-class-component' | |||||
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src | |||||
<script> | |||||
export default { | |||||
data () { | |||||
return { | |||||
dayOfWeek: '', | |||||
formattedDate: '', | |||||
formattedTime: '', | |||||
navActive: 1, | |||||
categories: [], | |||||
listInfo: [], | |||||
page: 1, | |||||
pageSize: 7, | |||||
imgIdArr: [], | |||||
carouselKey: 0 | |||||
} | |||||
}, | |||||
methods: { | |||||
async getListInfo (code) { | |||||
const params = { | |||||
ic_code: code, | |||||
page: this.page, | |||||
pageSize: this.pageSize | |||||
@Options({ | |||||
components: { | |||||
HelloWorld | |||||
} | |||||
const { data } = await this.$http.get('api/pu/info/listInfo.do', { params }) | |||||
this.listInfo = data.rows | |||||
this.imgIdArr = [] | |||||
for (const item of data.rows) { | |||||
for (const item2 of item.data_pic_url) { | |||||
this.imgIdArr.push(item2) | |||||
} | |||||
} | |||||
this.carouselKey++ // 及时刷新图片 | |||||
console.log(this.imgIdArr, 'imgIdArr') | |||||
}, | |||||
async getCategories () { | |||||
const { data } = await this.$http.get('api/pu/info/getCategories.do') | |||||
this.categories = data.categories | |||||
this.navActive = data.categories[0].ic_code | |||||
await this.getListInfo(this.navActive) | |||||
}, | |||||
changeNavActive (num) { | |||||
this.navActive = num | |||||
this.getListInfo(num) | |||||
}, | |||||
// 获取时间 | |||||
updateDateTime () { | |||||
const now = new Date() | |||||
// 获取星期 | |||||
const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] | |||||
this.dayOfWeek = daysOfWeek[now.getDay()] | |||||
// 获取年月日 | |||||
const year = now.getFullYear() | |||||
const month = String(now.getMonth() + 1).padStart(2, '0') | |||||
const day = String(now.getDate()).padStart(2, '0') | |||||
this.formattedDate = `${year}-${month}-${day}` | |||||
// 获取小时和分钟 | |||||
const hours = String(now.getHours()).padStart(2, '0') | |||||
const minutes = String(now.getMinutes()).padStart(2, '0') | |||||
this.formattedTime = `${hours}:${minutes}` | |||||
} | |||||
}, | |||||
created () { | |||||
this.getCategories() | |||||
// 测试图片返回数据用 | |||||
// this.$http({ | |||||
// url: '/attach/showImg.do?attachId=1844205918350999552&w=500&h=500"', | |||||
// method: 'get', | |||||
// responseType: 'blob' | |||||
// | |||||
// }).then((res) => { | |||||
// console.log(res, 'resss') | |||||
// }) | |||||
}, | |||||
mounted () { | |||||
this.updateDateTime() | |||||
setInterval(this.updateDateTime, 1000) | |||||
} | } | ||||
}) | |||||
export default class HomeView extends Vue {} | |||||
} | |||||
</script> | </script> | ||||
<style lang="less" scoped> | |||||
.home { | |||||
min-height: 100vh; | |||||
background-color: #f2f2f2; | |||||
.header { | |||||
height: 3.906vw; | |||||
background-color: #fff; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 35px; | |||||
&__left { | |||||
//height: 100%; | |||||
img { | |||||
width: 20.15vw; | |||||
} | |||||
} | |||||
&__right { | |||||
display: flex; | |||||
span:nth-child(1) { | |||||
//color: red; | |||||
text-align: right; | |||||
display: inline-block; | |||||
margin-right: 0.52vw; | |||||
font-size: 0.729vw; | |||||
line-height: 1vw; | |||||
} | |||||
span:nth-child(2) { | |||||
font-size: 2vw; | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
.news { | |||||
width: 96.5vw; | |||||
background-color: #fff; | |||||
height: 33.13vw; | |||||
border-radius: 4px; | |||||
//border: 1px solid red; | |||||
margin: 1.3vw auto 0; | |||||
&__title { | |||||
font-size: 1.9vw; | |||||
font-weight: 700; | |||||
color: #347bd5; | |||||
text-align: center; | |||||
height: 4.16vw; | |||||
line-height: 4.16vw; | |||||
border-bottom: 1px solid #e7e7e7; | |||||
padding: 0 2.60vw; | |||||
} | |||||
&__content { | |||||
padding: 1.3vw; | |||||
padding-left: 3.3vw; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
} | |||||
&__left { | |||||
width: 46.8vw; | |||||
height: 26vw;; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
object-fit: cover; | |||||
} | |||||
} | |||||
&__right { | |||||
width: 41.3vw; | |||||
height: 26vw; | |||||
//border: 1px solid red; | |||||
} | |||||
&__nav { | |||||
font-weight: 600; | |||||
height: 3.02vw; | |||||
//border: 1px solid red; | |||||
background-color: #ecf1f5; | |||||
border-radius: 4px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
&__item { | |||||
border-radius: 4px; | |||||
width: 25%; | |||||
//border: 1px solid red; | |||||
text-align: center; | |||||
line-height: 3.02vw; | |||||
font-size: 0.9vw; | |||||
cursor: pointer; | |||||
} | |||||
&__active { | |||||
background-color: #347bd5; | |||||
color: #fff; | |||||
} | |||||
} | |||||
&__list { | |||||
padding-top: 1.5vw; | |||||
li { | |||||
cursor: pointer; | |||||
display: flex; | |||||
gap: 10px; | |||||
justify-content: space-between; | |||||
font-size: 1vw; | |||||
line-height: 3.1vw; | |||||
color: #333; | |||||
span:nth-child(1) { | |||||
flex: 1; | |||||
letter-spacing: 0.05vw | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.zyzc { | |||||
width: 96.5vw; | |||||
height: 6.14vw; | |||||
margin: 1.3vw auto 0; | |||||
//border:1px solid red; | |||||
img { | |||||
width: 100%; | |||||
} | |||||
} | |||||
.select { | |||||
width: 96.5vw; | |||||
height: 7.03vw; | |||||
margin: 1.3vw auto 0; | |||||
//border:1px solid red; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
img { | |||||
width: 31.25vw; | |||||
height: 100%; | |||||
background-color: #fff; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,305 @@ | |||||
<template> | |||||
<Framework> | |||||
<div class="bailout-query"> | |||||
<div class="bailout-query__fill"> | |||||
<h5>个人救助查询</h5> | |||||
<div class="input-row"> | |||||
<span>姓名:</span> | |||||
<input type="text" v-model="person_name" placeholder="请输入姓名"> | |||||
<span>身份证号:</span> | |||||
<input v-model="person_uid" placeholder="请输入身份证号"> | |||||
<div class="btn-search" @click="queryPaymentAmount">查询</div> | |||||
</div> | |||||
</div> | |||||
<div class="bailout-query__result"> | |||||
<div class="tip"> | |||||
<h5>当前情况</h5> | |||||
<span> <i>*</i>温馨提示:为避免信息泄漏,请查询完本人待遇后,点击“关闭”!</span> | |||||
</div> | |||||
<div class="money" > | |||||
<div class="center" style=""> | |||||
<div class="money-item" v-for="(item,index) in moneyDate.currtMx" :key="index" > | |||||
<span style="font-weight: 500">{{ item.archive_name }}:</span> | |||||
<span>{{ item.class_name }}</span> | |||||
<span style="color: #ff4f4f;margin-left: auto">{{item.amount}}</span> 元 | |||||
</div> | |||||
</div> | |||||
<div v-if="moneyDate.currtMx.length === 0 && !empty " style="text-align: center;font-size: 16px;color: #999;margin-top: 30px">暂无数据</div> | |||||
<div class="money-empty" v-if="empty"> | |||||
<img src="../../assets/images/search.png"> | |||||
<span>根据查询结果,你当前不享受民政救助政策!</span> | |||||
</div> | |||||
</div> | |||||
<div class="history"> | |||||
<h5>历史发放情况</h5> | |||||
<div class="table"> | |||||
<div class="table-center"> | |||||
<el-table v-if="!empty && moneyDate.hisMx.length > 0" :show-header="false" empty-text="暂无数据" border :data="moneyDate.hisMx" style="width: 100%"> | |||||
<el-table-column prop="archive_name" label="Date" align="center"/> | |||||
<el-table-column prop="class_name" label="Name" align="center"/> | |||||
<el-table-column prop="period_id" label="Address" width="150px" align="center"> | |||||
<template #default="scope"> | |||||
{{scope.row.period_id.slice(0,4)}}-{{scope.row.period_id.slice(4,6)}} | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column prop="amount" label="Address" width="200px" align="center"> | |||||
<template #default="scope"> | |||||
<i>{{scope.row.amount}}</i> 元 | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
</div> | |||||
<div v-if="moneyDate.hisMx.length === 0 && !empty " style="text-align: center;font-size: 16px;color: #999;margin-top: 100px">暂无数据</div> | |||||
<div class="table-empty" v-if="empty"> | |||||
<img src="../../assets/images/empty.png"> | |||||
<span>在本系统上线后,不存在你的历史发放记录!</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="btn-back"> | |||||
<router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Framework from '@/components/framework.vue' | |||||
import { ElMessage } from 'element-plus' | |||||
export default { | |||||
components: { Framework }, | |||||
data () { | |||||
return { | |||||
person_uid: '', // 510212196307160054 | |||||
person_name: '', | |||||
idNumber: '', | |||||
pageSize: 10, | |||||
currentPage: 100, | |||||
tableData: [ | |||||
{ | |||||
date: '2016-05-03', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-02', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-04', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-01', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-01', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-01', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
}, | |||||
{ | |||||
date: '2016-05-01', | |||||
name: 'Tom', | |||||
address: 'No. 189, Grove St, Los Angeles' | |||||
} | |||||
], | |||||
moneyDate: { | |||||
currtMx: [], | |||||
hisMx: [] | |||||
}, | |||||
empty: false | |||||
} | |||||
}, | |||||
methods: { | |||||
async queryPaymentAmount () { | |||||
if (this.person_uid === '') return ElMessage.error('请输入身份证号') | |||||
const params = { | |||||
person_uid: this.person_uid | |||||
} | |||||
const { data } = await this.$http.get('api/archive/queryPaymentAmount.do', { params }) | |||||
this.moneyDate = data | |||||
if (data.currtMx.length === 0 && data.hisMx.length === 0) { | |||||
this.empty = true | |||||
} else { | |||||
this.empty = false | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.bailout-query { | |||||
padding: 20px; | |||||
min-height: 854px; | |||||
background: #fff url("../../assets/images/bg2.png"); | |||||
background-size: 100% 100%; | |||||
&__fill { | |||||
height: 180px; | |||||
background: url("../../assets/images/bg3.png"); | |||||
background-size: 100% 100%; | |||||
h5 { | |||||
font-size: 28px; | |||||
color: #fff; | |||||
text-align: center; | |||||
padding: 32px 0; | |||||
} | |||||
.input-row { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin-top: 20px; | |||||
span { | |||||
width: 120px; | |||||
text-align: right; | |||||
color: #fff; | |||||
} | |||||
input { | |||||
width: 320px; | |||||
height: 40px; | |||||
border: 1px solid #fff; | |||||
border-radius: 5px; | |||||
padding-left: 10px; | |||||
outline: none; | |||||
} | |||||
.btn-search { | |||||
cursor: pointer; | |||||
color: #fff; | |||||
text-align: center; | |||||
line-height: 40px; | |||||
border-radius: 6px; | |||||
width: 80px; | |||||
height: 40px; | |||||
background: linear-gradient(to right, #FFBA76, #FF8000); | |||||
margin-left: 24px; | |||||
} | |||||
} | |||||
} | |||||
&__result { | |||||
margin: 35px auto 0; | |||||
.tip { | |||||
display: flex; | |||||
align-items: center; | |||||
gap: 15px; | |||||
h5 { | |||||
font-size: 24px; | |||||
color: #333; | |||||
} | |||||
span { | |||||
i { | |||||
color: #FF0000; | |||||
} | |||||
} | |||||
} | |||||
.money { | |||||
margin-top: 20px; | |||||
min-height: 156px; | |||||
border-radius: 8px; | |||||
border: 1px solid #D7D7D7; | |||||
padding: 20px 30px; | |||||
font-size: 24px; | |||||
color: #333; | |||||
line-height: 40px; | |||||
.center{ | |||||
width: 900px; margin: 0 auto | |||||
} | |||||
.money-item{ | |||||
display: flex; | |||||
width: 800px; | |||||
} | |||||
.money-empty{ | |||||
display: flex; | |||||
align-items: center; | |||||
font-size: 18px; | |||||
margin-left: 10px; | |||||
img{ | |||||
width: 240px; | |||||
height: 130px; | |||||
} | |||||
} | |||||
} | |||||
.history { | |||||
margin-top: 25px; | |||||
h5 { | |||||
font-size: 24px; | |||||
} | |||||
.table{ | |||||
margin-top: 12px; | |||||
min-height: 287px; | |||||
padding: 24px 30px ; | |||||
border: 1px solid #D7D7D7; | |||||
border-radius: 8px; | |||||
.table-center{ | |||||
width: 1400px; | |||||
margin: 0 auto; | |||||
} | |||||
} | |||||
.table-empty{ | |||||
display: flex; | |||||
align-items: center; | |||||
height: 287px; | |||||
font-size: 18px; | |||||
margin-left: 48px; | |||||
img{ | |||||
width: 200px; | |||||
height: 137px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.btn-back{ | |||||
display: flex; | |||||
justify-content: center; | |||||
margin-top: 35px; | |||||
img{ | |||||
width: 172px; | |||||
height: 78px | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,138 @@ | |||||
<template> | |||||
<Framework header-themte="white"> | |||||
<!-- showType 1和2的字段不同--> | |||||
<div class="policy-detail" v-if="showType === 1"> | |||||
<!-- <div class="policy-detail__header">--> | |||||
<!-- 详情--> | |||||
<!-- </div>--> | |||||
<div class="policy-detail__title"> | |||||
<h5>{{showInfo.data_title}}</h5> | |||||
<span>日期:{{ showInfo.data_create.slice(1,10) }} 来源:{{showInfo.data_party_name}}</span> | |||||
</div> | |||||
<div class="policy-detail__content" v-html="showInfo.data_content"> | |||||
</div> | |||||
</div> | |||||
<div class="policy-detail" v-if="showType === 2"> | |||||
<!-- <div class="policy-detail__header">--> | |||||
<!-- 详情--> | |||||
<!-- </div>--> | |||||
<div class="policy-detail__title"> | |||||
<h5>{{showInfo.title}}</h5> | |||||
<span>日期:{{ showInfo.policy_date }} 来源:{{showInfo.party_name}}</span> | |||||
</div> | |||||
<div class="policy-detail__content" v-html="showInfo.data_content"> | |||||
</div> | |||||
</div> | |||||
<div class="back"> | |||||
<router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link> | |||||
<router-link to="/policyQuery"><img src="../../assets/images/btn_back.png" alt=""></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script > | |||||
import Framework from '@/components/framework.vue' | |||||
export default { | |||||
components: { Framework }, | |||||
created () { | |||||
if (this.$route.query.type === 'policy') { | |||||
this.getPolicyDetail(this.$route.query.data_id) | |||||
this.showType = 2 | |||||
} else { | |||||
this.getShowInfo(this.$route.query.data_id) | |||||
this.showType = 1 | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
showType: 1, | |||||
showInfo: { | |||||
data_create: '' | |||||
}, | |||||
pageSize: 10, | |||||
currentPage: 100 | |||||
} | |||||
}, | |||||
methods: { | |||||
async getPolicyDetail (id) { | |||||
const params = { | |||||
data_id: id | |||||
} | |||||
const { data } = await this.$http.get('api/archive/policy/getPolicyDetail.do', { params }) | |||||
this.showInfo = data | |||||
}, | |||||
async getShowInfo (id) { | |||||
const params = { | |||||
data_id: id | |||||
} | |||||
const { data } = await this.$http.get('api/pu/info/showInfo.do', { params }) | |||||
this.showInfo = data.info | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.policy-detail{ | |||||
background-color: #fff; | |||||
min-height: 840px; | |||||
&__header { | |||||
width: 100%; | |||||
height: 56px; | |||||
line-height: 56px; | |||||
padding-left: 28px; | |||||
font-size: 24px; | |||||
color: #333; | |||||
border-bottom: 1px solid #F2F2F2; | |||||
} | |||||
&__title{ | |||||
width: 93.33vw; | |||||
margin: 0 auto; | |||||
padding: 22px; | |||||
text-align: center; | |||||
border-bottom: 1px solid #F2F2F2; | |||||
h5{ | |||||
font-size: 24px; | |||||
color: #333; | |||||
margin-bottom: 12px; | |||||
} | |||||
span{ | |||||
color: #999; | |||||
} | |||||
} | |||||
&__content{ | |||||
width: 85.41vw; | |||||
margin: 0 auto; | |||||
padding: 24px 0; | |||||
text-align: left; | |||||
line-height: 32px; | |||||
color: #333; | |||||
} | |||||
} | |||||
.back{ | |||||
margin-top: 30px; | |||||
display: flex; | |||||
gap: 40px; | |||||
justify-content: center; | |||||
text-align: center; | |||||
img{ | |||||
width: 168px | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,237 @@ | |||||
<template> | |||||
<Framework header-themte="white"> | |||||
<div class="policy-query"> | |||||
<div class="policy-query__title"> | |||||
救助政策 | |||||
</div> | |||||
<div class="policy-query__search"> | |||||
<input type="text" v-model="searchValue" placeholder="请输入关键字查询" @keyup.enter ="getPolicyList" > | |||||
<div class="search-btn" @click="getPolicyList"> <el-icon><Search /></el-icon> 查询</div> | |||||
</div> | |||||
<div class="policy-query__list"> | |||||
<div class="list-item" v-for="(item,index) in policyList" :key="index" @click="this.$router.push({name:'policyDetail',query:{ data_id: item.data_id,type:'policy'}})"> | |||||
<!-- <div class="tag tag1">--> | |||||
<!-- 城乡低保--> | |||||
<!-- </div>--> | |||||
<div class="type" v-if="item.policyTypeName || item.policy_type_name || item.policy_type_Name">{{ item.policyTypeName || item.policy_type_name || item.policy_type_Name }}</div> | |||||
<!-- 用于占位--> | |||||
<div v-else style="width: 78px"></div> | |||||
<div class="text over-hidden_one">{{item.title}}</div> | |||||
<div class="tag tag2" v-for="(item,index) in item.archive_type.split(',')" :key="index" :style="index%2 === 1? {backgroundColor: '#C4DEFF',color: '#347BD5'} : {} "> | |||||
{{ item }} | |||||
</div> | |||||
<!-- <div class="type" v-if="false">办事指南</div>--> | |||||
<div class="date"> | |||||
{{ item.policy_date }} | |||||
</div> | |||||
</div> | |||||
<div v-if="policyList.length === 0"> | |||||
<el-empty description="暂无数据" /> | |||||
</div> | |||||
</div> | |||||
<div class="policy-query__pagination"> | |||||
<el-pagination :page-sizes="[10, 20, 50, 100]" | |||||
background size="large" | |||||
layout="total, prev, pager, next,sizes" | |||||
:total="total" | |||||
v-model:current-page="currentPage" | |||||
v-model:page-size="pageSize" | |||||
@change = "paginationChange" | |||||
/> | |||||
</div> | |||||
</div> | |||||
<div class="btn"> | |||||
<router-link to="/"><img src="../../assets/images/close_btn.png" alt=""></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Framework from '@/components/framework.vue' | |||||
export default { | |||||
components: { Framework }, | |||||
created () { | |||||
this.getPolicyList() | |||||
}, | |||||
data () { | |||||
return { | |||||
total: 0, | |||||
pageSize: 10, | |||||
currentPage: 100, | |||||
pageNum: 1, | |||||
policyList: [], | |||||
searchValue: '' | |||||
} | |||||
}, | |||||
// 监听searchValue | |||||
watch: { | |||||
searchValue (newValue) { | |||||
if (newValue === '') { | |||||
this.pageNum = 1 | |||||
this.getPolicyList() | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
paginationChange (currentPage, pageSize) { | |||||
this.pageNum = currentPage | |||||
this.pageSize = pageSize | |||||
this.getPolicyList() | |||||
}, | |||||
async getPolicyList () { | |||||
const params = { | |||||
pageNum: this.pageNum, | |||||
pageSize: this.pageSize, | |||||
searchTitle: this.searchValue, | |||||
qry_archive_type: '', | |||||
partyId: '5001560001' | |||||
} | |||||
const { data } = await this.$http.get('/api/archive/policy/getPolicyList.do', { params }) | |||||
this.policyList = data.listData | |||||
this.total = data.total | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.policy-query { | |||||
width: 100%; | |||||
height: 870px; | |||||
background-color: #fff; | |||||
&__title { | |||||
width: 100%; | |||||
height: 56px; | |||||
line-height: 56px; | |||||
padding-left: 28px; | |||||
font-size: 24px; | |||||
color: #333; | |||||
border-bottom: 1px solid #F2F2F2; | |||||
} | |||||
&__search { | |||||
width: 1043px; | |||||
height: 56px; | |||||
margin: 0 auto; | |||||
border: 1px solid #D7D7D7; | |||||
border-radius: 28px; | |||||
margin-top: 36px; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding-left: 28px; | |||||
input{ | |||||
flex: 1; | |||||
outline: none; | |||||
border: 0; | |||||
border-radius: 29px; | |||||
font-size: 18px; | |||||
} | |||||
.search-btn{ | |||||
cursor: pointer; | |||||
width: 137px; | |||||
height: 56px; | |||||
background-color: #347BD5; | |||||
outline: none; | |||||
border: 0; | |||||
color: #fff; | |||||
border-radius: 28px; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
&__list{ | |||||
width: 1473px; | |||||
height: 622px; | |||||
padding: 26px; | |||||
border: 1px solid #D7D7D7; | |||||
margin: 20px auto; | |||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 36px; | |||||
//flex-wrap: wrap; | |||||
//justify-content: space-between; | |||||
.list-item{ | |||||
cursor: pointer; | |||||
display: flex; | |||||
gap: 15px; | |||||
align-items: center; | |||||
.tag{ | |||||
//width: 72px; | |||||
//height: 24px; | |||||
padding: 2px 8px; | |||||
font-size: 14px; | |||||
text-align: center; | |||||
line-height: 24px; | |||||
border-radius: 3px; | |||||
} | |||||
.tag1{ | |||||
background-color: #C4DEFF; | |||||
color: #347BD5; | |||||
} | |||||
.tag2{ | |||||
background-color: #FFDDC4; | |||||
color: #FF5205; | |||||
} | |||||
.text{ | |||||
width: 798px; | |||||
//flex: 1; | |||||
} | |||||
.type{ | |||||
color: #347BD5; | |||||
border: 1px solid #347BD5; | |||||
width: 78px; | |||||
height: 24px; | |||||
line-height: 24px; | |||||
text-align: center; | |||||
border-radius: 4px; | |||||
} | |||||
.date{ | |||||
margin-left: auto; | |||||
} | |||||
} | |||||
} | |||||
&__pagination{ | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
.btn{ | |||||
text-align: center; | |||||
margin-top: 20px; | |||||
img{ | |||||
cursor: pointer; | |||||
width: 172px; | |||||
height: 75px; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,413 @@ | |||||
<template> | |||||
<Framework> | |||||
<div class="info-fill"> | |||||
<div class="title">{{ title }}</div> | |||||
<div class="input"> | |||||
<span>请输入你的户籍人口</span> | |||||
<div class="num-step"> | |||||
<img @click="reduceFamily" src="../../assets/images/reduce.png" alt=""> | |||||
<input disabled v-model="population" type="text"> | |||||
<img @click="addFamily" src="../../assets/images/add.png" alt=""> | |||||
</div> | |||||
<span style="margin-left: 6.25vw">请输入你的家庭月收入</span> | |||||
<el-input v-model="income" placeholder="请输入"> | |||||
<template #suffix>元</template> | |||||
</el-input> | |||||
</div> | |||||
<div class="family"> | |||||
<div class="family__title"> | |||||
<img src="../../assets/images/file.png" alt=""> | |||||
家庭成员情况 | |||||
</div> | |||||
<div class="family__content"> | |||||
<div class="family__content__left"> | |||||
<div class="family-item" v-for="(item,index) in familyMember" :key="index"> | |||||
<div class="item-title">家庭成员{{ index + 1 }}</div> | |||||
<div class="item-radio"> | |||||
<Radio :value="item.bodyStatus" @change="(value)=>{item.bodyStatus = value}" | |||||
title="身体情况" :options="body" :width="'20vw'"></Radio> | |||||
<Radio :value="item.healthStatus" @change="(value)=>{item.healthStatus = value}" | |||||
title="健康状态" :options="health" :width="'16.95vw'"></Radio> | |||||
<Radio :value="item.otherStatus" @change="(value)=>{item.otherStatus = value}" | |||||
title="其他情况" :options="other" :width="'29.85vw'"></Radio> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="family__content__right"> | |||||
<div class="trivia"> | |||||
<img src="../../assets/images/book.png" alt=""> | |||||
<span>小知识</span> | |||||
</div> | |||||
<h5>1、残疾</h5> | |||||
<span>持有《残疾人证》。</span> | |||||
<h5>2、重度残疾</h5> | |||||
<span>持有《残疾人证》且残疾等级为一级或者二级。</span> | |||||
<h5>3、学龄前儿童</h5> | |||||
<span>6岁以下儿童。</span> | |||||
<h5>4、在校生</h5> | |||||
<span>在校接受全日制本科及以下学历教育。</span> | |||||
</div> | |||||
</div> | |||||
<!-- Radio--> | |||||
</div> | |||||
<div class="calculation"> | |||||
<!-- <router-link to="/results">--> | |||||
<img @click="beginCalc" src="../../assets/images/btn1.png" alt=""> | |||||
<!-- </router-link>--> | |||||
</div> | |||||
</div> | |||||
<div class="back"> | |||||
<router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link> | |||||
<router-link to="/rescueCalculation"><img src="../../assets/images/btn_back.png" alt=""></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Radio from '@/components/radio.vue' | |||||
import Framework from '../../components/framework.vue' | |||||
export default { | |||||
components: { | |||||
Framework, | |||||
Radio | |||||
}, | |||||
created () { | |||||
const type = this.$route.query.type | |||||
if (type === 'BLAN_SIDE') { | |||||
this.title = '农村低保测算' | |||||
this.archiveType = 'BLAN_SIDE' | |||||
} | |||||
}, | |||||
// 监听population | |||||
watch: { | |||||
population (newValue) { | |||||
if (newValue <= 1) { | |||||
this.population = 1 | |||||
} else if (newValue >= 10) { | |||||
this.population = 10 | |||||
} | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
archiveType: 'BLAN_CITY', | |||||
title: '城市低保测算', | |||||
radio1: 1, | |||||
radio2: 1, | |||||
population: 1, | |||||
income: 0, | |||||
body: [ | |||||
{ | |||||
value: 1, | |||||
label: '正常' | |||||
}, | |||||
{ | |||||
value: 2, | |||||
label: '重度残疾' | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: '残疾' | |||||
} | |||||
], | |||||
health: [ | |||||
{ | |||||
value: 1, | |||||
label: '正常' | |||||
}, | |||||
{ | |||||
value: 2, | |||||
label: '重度瘫痪' | |||||
} | |||||
], | |||||
other: [ | |||||
{ | |||||
value: 1, | |||||
label: '成年人' | |||||
}, | |||||
{ | |||||
value: 2, | |||||
label: '学龄前儿童' | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: '在校生' | |||||
}, | |||||
{ | |||||
value: 4, | |||||
label: '70岁以上老人' | |||||
} | |||||
], | |||||
familyMember: [ | |||||
{ | |||||
bodyStatus: 1, | |||||
healthStatus: 1, | |||||
otherStatus: 1 | |||||
} | |||||
] | |||||
} | |||||
}, | |||||
methods: { | |||||
beginCalc () { | |||||
const personList = [] | |||||
for (const item of this.familyMember) { | |||||
const person = { | |||||
age_id: '', | |||||
work_status_id: '' | |||||
} | |||||
// 身体情况 | |||||
if (item.bodyStatus === 1) { | |||||
person.is_disablity = '0' // 是否残疾 | |||||
person.is_sdisablity = '0'// 是否重残 | |||||
} else if (item.bodyStatus === 2) { | |||||
person.is_disablity = '1' | |||||
person.is_sdisablity = '1' // 是否重残 | |||||
} else if (item.bodyStatus === 3) { | |||||
person.is_disablity = '1'// 是否残疾 | |||||
person.is_sdisablity = '0' | |||||
} | |||||
// 健康状态 | |||||
if (item.healthStatus === 1) { | |||||
person.health_id = '29051' // 正常 | |||||
} else if (item.healthStatus === 2) { | |||||
person.health_id = '1510153855323340800' // 重度瘫痪 | |||||
} | |||||
// 其他情况 | |||||
if (item.otherStatus === 1) { | |||||
person.work_status_id = '22515' // 成年人 无业 | |||||
} else if (item.otherStatus === 2) { | |||||
person.work_status_id = '22520' // 学龄前儿童 | |||||
} else if (item.otherStatus === 3) { | |||||
person.work_status_id = '1510153579300388864' // 在校生 | |||||
} else if (item.otherStatus === 4) { | |||||
person.age_id = '1510154291249938432' // 70岁老人 | |||||
} | |||||
personList.push(person) | |||||
} | |||||
this.archiveAmountCalc(personList) | |||||
}, | |||||
async archiveAmountCalc (personList) { | |||||
const params = { | |||||
archive_type: this.archiveType, // 档案类型 | |||||
party_id: '5001560001', // 区划 : | |||||
family_ensure_count: this.population, // 人口数 | |||||
income_sum: this.income, // 收入: | |||||
personList: personList | |||||
} | |||||
const res = await this.$http.post('/api/archive/archiveAmountCalc.do', params) | |||||
if (res.code !== 200) return this.$message.error(res.msg) | |||||
this.toResults(res.data) | |||||
}, | |||||
toResults (data) { | |||||
data.type = this.archiveType | |||||
const params = JSON.stringify(data) | |||||
localStorage.setItem('calcData', params) | |||||
this.$router.push({ name: 'results' }) | |||||
}, | |||||
addFamily () { | |||||
if (this.population >= 10) return | |||||
this.population++ | |||||
this.familyMember.push({ | |||||
bodyStatus: 1, | |||||
healthStatus: 1, | |||||
otherStatus: 1 | |||||
}) | |||||
}, | |||||
reduceFamily () { | |||||
if (this.population <= 1) return | |||||
this.population-- | |||||
this.familyMember.pop() | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.info-fill { | |||||
min-height: 44.48vw; | |||||
background-color: #fff; | |||||
padding-bottom: 1.56vw; | |||||
.title { | |||||
height: 4.58vw; | |||||
border-bottom: 1px solid #D7D7D7; | |||||
color: #347BD5; | |||||
font-size: 1.46vw; | |||||
text-align: center; | |||||
line-height: 4.58vw; | |||||
} | |||||
.input { | |||||
height: 4.95vw; | |||||
//background-color: pink; | |||||
padding-left: 17.97vw; | |||||
//border: 1px solid red; | |||||
display: flex; | |||||
align-items: center; | |||||
gap: 0.8vw; | |||||
.num-step { | |||||
width: 9.37vw; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
img { | |||||
width: 1.77vw; | |||||
cursor: pointer; | |||||
} | |||||
input { | |||||
width: 4.17vw; | |||||
height: 2.5vw; | |||||
font-size: 1.46vw; | |||||
border: 1px solid #347BD5; | |||||
border-radius: 4px; | |||||
outline: none; | |||||
text-align: center; | |||||
} | |||||
} | |||||
span { | |||||
font-size: 1.25vw; | |||||
} | |||||
.el-input { | |||||
width: 13.26vw; | |||||
height: 2.5vw; | |||||
border: 1px solid #347BD5; | |||||
border-radius: 4px; | |||||
:deep(.el-input__wrapper) { | |||||
box-shadow: none; | |||||
font-size: 1.4vw; | |||||
} | |||||
} | |||||
} | |||||
.family { | |||||
padding: 0 2vw; | |||||
&__title { | |||||
height: 2.8vw; | |||||
display: flex; | |||||
align-items: center; | |||||
font-size: 1.2vw; | |||||
border-bottom: 1px solid #e5e5e5; | |||||
//background-color: pink; | |||||
img { | |||||
width: 1.66vw; | |||||
} | |||||
} | |||||
&__content { | |||||
display: flex; | |||||
&__left { | |||||
flex: 1; | |||||
.family-item { | |||||
} | |||||
.item-title { | |||||
margin: 0.98vw 0; | |||||
font-size: 0.98vw; | |||||
} | |||||
.item-radio { | |||||
display: flex; | |||||
gap: 1vw; | |||||
} | |||||
} | |||||
&__right { | |||||
width: 19.69vw; | |||||
height: 22.81vw; | |||||
border: 1px solid #D7D7D7; | |||||
margin: 2.9vw 0 0.6vw 0; | |||||
border-radius: 8px; | |||||
padding: 1vw; | |||||
.trivia { | |||||
display: flex; | |||||
align-items: center; | |||||
gap: 0.3vw; | |||||
font-size: 1.25vw; | |||||
img { | |||||
width: 1.66vw; | |||||
} | |||||
} | |||||
h5 { | |||||
font-size: 0.94vw; | |||||
font-weight: 500; | |||||
color: #333; | |||||
line-height: 1.87vw; | |||||
margin-top: 0.5vw; | |||||
} | |||||
span { | |||||
font-size: 0.83vw; | |||||
line-height: 1.87vw; | |||||
color: #333; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.calculation { | |||||
img { | |||||
width: 10.42vw; | |||||
margin-left: 35vw; | |||||
margin-top: 1.5vw; | |||||
} | |||||
} | |||||
} | |||||
.back { | |||||
margin-top: 1.2vw; | |||||
display: flex; | |||||
gap: 2vw; | |||||
padding-left: 71.87vw; | |||||
img { | |||||
width: 8.75vw; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,112 @@ | |||||
<template> | |||||
<Framework> | |||||
<div class="policy-query"> | |||||
<div class="please-select"> | |||||
请选择你要测算的救助类型 | |||||
</div> | |||||
<div class="select"> | |||||
<router-link to="/infoFill"><img src="../../assets/images/csdb.png"></router-link> | |||||
<router-link :to="{ name: 'infoFill', query: { type: 'BLAN_SIDE' }}"><img src="../../assets/images/ncdb.png"></router-link> | |||||
<router-link to="/difficult"><img src="../../assets/images/tkgy.png"></router-link> | |||||
</div> | |||||
<div class="tip"> | |||||
<div class="tip__title"> | |||||
<img src="../../assets/images/tip.png" alt=""> | |||||
<span>温馨提示</span> | |||||
</div> | |||||
<div class="tip__content"> | |||||
此工具根据相关政策文件进行的粗略测算,测算金额不是实际办理结果。 | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="btn"> | |||||
<router-link to="/"><img src="../../assets/images/close_btn.png"></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Framework from '../../components/framework.vue' | |||||
export default { | |||||
components: { Framework }, | |||||
data () { | |||||
return { | |||||
dayOfWeek: '', | |||||
formattedDate: '', | |||||
formattedTime: '', | |||||
navActive: 1 | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less" scoped> | |||||
.policy-query{ | |||||
height: 45vw; | |||||
background: url("../../assets/images/bg1.png") no-repeat; | |||||
background-size: contain; | |||||
padding: 1px; | |||||
//background-position: 50% 50%; /* 背景图像位于容器的中心位置 */ | |||||
.please-select{ | |||||
width: 26.04vw; | |||||
height: 1.56vw; | |||||
margin: 7.8vw auto 0; | |||||
background: url("../../assets/images/img1.png") no-repeat; | |||||
background-size: contain; | |||||
color: #347BD5; | |||||
text-align: center; | |||||
font-size: 1.458vw; | |||||
} | |||||
.select{ | |||||
width: 53.62vw; | |||||
height: 12.47vw; | |||||
margin: 4.42vw auto 0; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
img{ | |||||
height: 100%; | |||||
} | |||||
} | |||||
.tip{ | |||||
width: 52.62vw; | |||||
height: 7.55vw; | |||||
margin: 7.08vw auto 0; | |||||
background-color: #eff3f6; | |||||
border: 1px dashed #B7D7FF; | |||||
padding: 1.67vw 1.29vw; | |||||
&__title{ | |||||
display: flex; | |||||
align-items: center; | |||||
gap: 0.52vw; | |||||
font-size: 1.25vw; | |||||
color: #347BD5; | |||||
} | |||||
&__content{ | |||||
font-size: 0.94vw; | |||||
color: #333333; | |||||
margin-top: 1.04vw; | |||||
} | |||||
img{ | |||||
width: 1.67vw; | |||||
} | |||||
} | |||||
} | |||||
.btn{ | |||||
display: flex; | |||||
justify-content: center; | |||||
img{ | |||||
width: 8.75vw; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,145 @@ | |||||
<template> | |||||
<Framework> | |||||
<div class="result"> | |||||
<div class="result__title"> | |||||
<img src="@/assets/images/jsq.png" alt=""> | |||||
你的{{ title }}测算结果 | |||||
</div> | |||||
<div class="result__content"> | |||||
<div class="empty" v-if="calcData.amount_flag"> | |||||
<img src="../../assets/images/empty2.png" alt=""> | |||||
根据测算,你不满足政策条件! | |||||
</div> | |||||
<div v-else> | |||||
预估你领取 <br> | |||||
<div v-for="(item,index) in calcData.amount_mx" :key="index">{{ item.class_name }}:<span>{{item.amount}}元/月</span>;</div> | |||||
</div> | |||||
<img src="@/assets/images/result.png" alt=""> | |||||
</div> | |||||
<div class="result__tip"> | |||||
温馨提示:此工具根据相关政策文件进行的粗略测算,测算金额不是实际办理结果。 | |||||
</div> | |||||
<div class="result__btn"> | |||||
<router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link> | |||||
<router-link :to="{ name: backUrl, query: { type: calcData.type }}"> | |||||
<img src="../../assets/images/btn_back.png" alt=""> | |||||
</router-link> | |||||
</div> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Framework from '@/components/framework.vue' | |||||
export default { | |||||
components: { Framework }, | |||||
created () { | |||||
this.calcData = localStorage.getItem('calcData') | |||||
this.calcData = JSON.parse(this.calcData) | |||||
switch (this.calcData.type) { | |||||
case 'NTF': | |||||
this.title = '特困' | |||||
this.backUrl = 'difficult' | |||||
break | |||||
case 'BLAN_CITY': | |||||
this.title = '城市低保' | |||||
this.backUrl = 'infoFill' | |||||
break | |||||
case 'BLAN_SIDE': | |||||
this.title = '农村低保' | |||||
this.backUrl = 'infoFill' | |||||
break | |||||
} | |||||
}, | |||||
data () { | |||||
return { | |||||
title: '', | |||||
backUrl: '', | |||||
calcData: { | |||||
amount_flag: true | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.result { | |||||
height: 48.96vw; | |||||
background-color: #fff; | |||||
padding-left: 9.38vw; | |||||
padding-top: 9vw; | |||||
&__title { | |||||
display: flex; | |||||
font-size: 1.46vw; | |||||
color: #347BD5; | |||||
img { | |||||
width: 1.67vw; | |||||
} | |||||
} | |||||
&__content { | |||||
width: 77.6vw; | |||||
height: 12.16vw; | |||||
border: 1px solid #D7D7D7; | |||||
border-radius: 8px; | |||||
margin-top: 0.6vw; | |||||
padding: 1.4vw 2.1vw; | |||||
font-size: 0.83vw; | |||||
line-height: 2vw; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
span { | |||||
display: inline-block; | |||||
color: #FF0000; | |||||
font-size: 1.25vw; | |||||
} | |||||
img { | |||||
display: inline-block; | |||||
width: 18.65vw; | |||||
height: 18.65vw; | |||||
} | |||||
.empty { | |||||
font-size: 18px; | |||||
color: #333; | |||||
display: flex; | |||||
align-items: center; | |||||
img { | |||||
width: 215px; | |||||
height: 103px; | |||||
} | |||||
} | |||||
} | |||||
&__tip { | |||||
font-size: 0.83vw; | |||||
margin-top: 1vw; | |||||
color: #333; | |||||
} | |||||
&__btn { | |||||
margin-top: 3.02vw; | |||||
display: flex; | |||||
gap: 2vw; | |||||
img { | |||||
width: 8.75vw; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,214 @@ | |||||
<template> | |||||
<Framework> | |||||
<div class="difficult"> | |||||
<div class="difficult__title"> | |||||
特困供养测算 | |||||
</div> | |||||
<div class="difficult__select"> | |||||
<div class="item"> | |||||
<h5>供养方式:</h5> | |||||
<el-radio-group v-model="offerType"> | |||||
<el-radio value="28111" size="large">集中供养</el-radio> | |||||
<el-radio value="28110" size="large">分散供养</el-radio> | |||||
</el-radio-group> | |||||
</div> | |||||
<div class="item"> | |||||
<h5>户籍性质:</h5> | |||||
<el-radio-group v-model="accountsType"> | |||||
<el-radio value="1" size="large">城市户口</el-radio> | |||||
<el-radio value="0" size="large">农村户口</el-radio> | |||||
</el-radio-group> | |||||
</div> | |||||
</div> | |||||
<div class="difficult__select2"> | |||||
<div class="title"> | |||||
<img src="../../assets/images/file.png" alt=""> | |||||
自理情况 | |||||
</div> | |||||
<div class="select"> | |||||
<Radio v-for="(item,index ) in selfCare " :key="index" :value="item.value" @change="(value)=>{item.value = value}" :title="item.label" :options="options" :width="'20.83vw'"></Radio> | |||||
</div> | |||||
</div> | |||||
<div class="calculation"> | |||||
<img @click="beginCalc" src="../../assets/images/btn1.png" alt=""> | |||||
</div> | |||||
</div> | |||||
<div class="back"> | |||||
<router-link to="/"><img src="../../assets/images/btn_toHome.png" alt=""></router-link> | |||||
<router-link to="/rescueCalculation"><img src="../../assets/images/btn_back.png" alt=""></router-link> | |||||
</div> | |||||
</Framework> | |||||
</template> | |||||
<script> | |||||
import Framework from '@/components/framework.vue' | |||||
import Radio from '@/components/radio.vue' | |||||
export default { | |||||
components: { Radio, Framework }, | |||||
data () { | |||||
return { | |||||
offerType: '28111', | |||||
accountsType: '1', | |||||
selfCare: [ | |||||
{ | |||||
value: 1, | |||||
label: '自主吃饭' | |||||
}, | |||||
{ | |||||
value: 1, | |||||
label: '自主穿衣' | |||||
}, | |||||
{ | |||||
value: 1, | |||||
label: '自主上下床' | |||||
}, | |||||
{ | |||||
value: 1, | |||||
label: '自主如厕' | |||||
}, | |||||
{ | |||||
value: 1, | |||||
label: '自主室内行走' | |||||
}, | |||||
{ | |||||
value: 1, | |||||
label: '自主洗澡' | |||||
} | |||||
], | |||||
options: [ | |||||
{ value: 1, label: '是' }, | |||||
{ value: 2, label: '否' } | |||||
], | |||||
nurseType: '' | |||||
} | |||||
}, | |||||
methods: { | |||||
beginCalc () { | |||||
let count = 0 | |||||
for (const item of this.selfCare) { | |||||
if (item.value === 2) { | |||||
count++ | |||||
} | |||||
} | |||||
if (count === 0) { | |||||
this.nurseType = '28200' | |||||
} else if (count <= 3) { | |||||
this.nurseType = '28210' | |||||
} else if (count > 3) { | |||||
this.nurseType = '28211' | |||||
} | |||||
this.archiveAmountCalc() | |||||
}, | |||||
async archiveAmountCalc () { | |||||
const params = { | |||||
archive_type: 'NTF', // 档案类型 | |||||
party_id: '5001560001', // 区划 : | |||||
is_city: this.accountsType, | |||||
support_statu: this.offerType, // 供养方式 | |||||
nurse_type: this.nurseType, // 护理类型 | |||||
income_sum: '0' | |||||
} | |||||
const res = await this.$http.post('/api/archive/archiveAmountCalc.do', params) | |||||
if (res.code !== 200) return this.$message.error(res.msg) | |||||
this.toResults(res.data) | |||||
}, | |||||
toResults (data) { | |||||
data.type = 'NTF' | |||||
const params = JSON.stringify(data) | |||||
localStorage.setItem('calcData', params) | |||||
this.$router.push({ name: 'results' }) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
.difficult { | |||||
height: 44.47vw; | |||||
background-color: #fff; | |||||
&__title { | |||||
height: 4.68vw; | |||||
border-bottom: 1px solid #D7D7D7; | |||||
text-align: center; | |||||
line-height: 4.68vw; | |||||
font-size: 1.4vw; | |||||
color: #347BD5; | |||||
font-weight: 500; | |||||
} | |||||
&__select { | |||||
padding: 1.5vw 0; | |||||
//border: 1px solid red; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
gap: 11.77vw; | |||||
font-size: 1.1vw; | |||||
.item{ | |||||
display: flex; | |||||
align-items: center; | |||||
:deep(.el-radio.el-radio--large .el-radio__label){ | |||||
font-size: 0.93vw; | |||||
} | |||||
:deep(.el-radio.el-radio--large .el-radio__inner){ | |||||
width: 0.93vw; | |||||
height: 0.93vw; | |||||
} | |||||
} | |||||
} | |||||
&__select2{ | |||||
padding: 0 2vw; | |||||
.title{ | |||||
height: 2.8vw; | |||||
display: flex; | |||||
align-items: center; | |||||
font-size: 1.2vw; | |||||
border-bottom: 1px solid #e5e5e5; | |||||
//background-color: pink; | |||||
img{ | |||||
width: 1.66vw; | |||||
} | |||||
} | |||||
.select{ | |||||
padding: 1.2vw 10vw 1.2vw 13.5vw; | |||||
display: flex; | |||||
gap: 1vw; | |||||
flex-wrap: wrap; | |||||
} | |||||
} | |||||
.calculation{ | |||||
display: flex; | |||||
justify-content: center; | |||||
margin-top: 3.5vw; | |||||
img{ | |||||
width: 10.42vw; | |||||
} | |||||
} | |||||
} | |||||
.back{ | |||||
margin-top: 1.2vw; | |||||
display: flex; | |||||
gap: 2vw; | |||||
padding-left:71.87vw ; | |||||
img{ | |||||
width: 8.75vw; | |||||
} | |||||
} | |||||
</style> |
@@ -1,4 +1,13 @@ | |||||
const { defineConfig } = require('@vue/cli-service') | const { defineConfig } = require('@vue/cli-service') | ||||
module.exports = defineConfig({ | module.exports = defineConfig({ | ||||
transpileDependencies: true | |||||
transpileDependencies: true, | |||||
publicPath: process.env.NODE_ENV === 'production' ? '/wlq_plat/' : '/', // 部署上线的访问路径 | |||||
devServer: { | |||||
client: { | |||||
overlay: false // 禁用错误的遮罩层 | |||||
} | |||||
} | |||||
// lintOnSave: false // 禁用 ESLint | |||||
}) | }) |