Commit 7371dd23 authored by hailiang.sun's avatar hailiang.sun

init & login ui done

parent f0926b79
Pipeline #191 failed with stages
# ln-medicalAppointment-pc
椋鸟健康体检平台
\ No newline at end of file
椋鸟健康体检预约平台-pc 版
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
],
};
{
"name": "medilink",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.7.8",
"axios": "^0.24.0",
"babel-plugin-import": "^1.13.3",
"core-js": "^3.6.5",
"moment": "^2.29.1",
"qs": "^6.10.1",
"style-resources-loader": "^1.4.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>健康服务预约平台</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="less">
* {
padding: 0;
margin: 0;
list-style: none;
}
html{
overflow-x: hidden;
}
</style>
// 引入工具包
import utils from "@/utils/index.js";
let urlArr = [{ demoUrl: "" }];
export default utils.arrToObj(urlArr);
import apis from "./apis";
import req from "./request";
import utils from "@/utils/index.js";
const demoFun = (params) => {
req.get(apis.demoUrl, { params });
};
const funcs = [{ demoFun }];
export default utils.arrToObj(funcs);
// import apis from './apis'
import req from './request'
// import qs from 'qs'
// import utils from '@/utils/index.js'
let api = {}
// 登录接口:
api.userLogin = function (data) {
return req.post('/login/isValidUserInfo', data)
}
//查询当前语言
api.getLanguageL = function (data) {
return req.post(`/api/web/getLanguage`, data)
}
api.goLoginInfo = function (data) {
return req.post(`/web/goLoginInfo`, data)
}
export default api
import apis from "./apis";
import req from "./request";
import qs from "qs";
import utils from "@/utils/index.js";
let api = {};
// 根据字典代码查询性质类别
api.getReferenceInfo = function(data) {
return req.post(`/wx/getReferenceInfo?${qs.stringify(data)}`);
};
// 查询医疗机构列表
api.getProviderPageListToWeb = function(data) {
return req.post(
`/wx/getProviderPageListToWeb?${qs.stringify(data)}`,
data
);
};
// 查询海外医疗机构列表
api.searchCountryForProviderList = function(data) {
return req.post(`/wx/searchCountryForProviderList`, {});
};
api.searchProviderListByCountry = (data)=>{
return req.post('/wx/searchProviderListByCountry', {
data
})
}
//发送邮件
api.sendMailToWeb = function(data) {
return instance.post("/wx/sendMailToWeb", data);
};
export default api;
import axios from "axios";
let baseUrl = "/api"; // 基础接口请求信息
const service = axios.create({
validateStatus(status) {
return status >= 200 && status <= 504; // 合法状态码
},
baseURL: baseUrl, // 基础请求路径
timeout: 30000, // 请求超时
});
// 重复尝试此时
service.defaults.retry = 3;
// 重试延时
service.defaults.retryDelay = 15000;
// 开启重试
service.defaults.shouldRetry = true;
// 请求拦截
service.interceptors.request.use(
(config) => {
config.headers["Content-Type"] = "application/json;charset=UTF-8";
config.headers["Accept-Language"] = "zh-CN";
// 如果需要可以开启token,token是全局数据来自store
// config.headers["Authorization"] = store.state.user.token;
if (config.method === "post") {
if (!config.data) {
config.data = {};
}
}
return config;
},
(error) => {
const {
response: { status, statusText },
} = error;
throw new Error(`状态码:${status},信息:${statusText},位置:request`);
}
);
// response 拦截器
service.interceptors.response.use(
(response) => {
return new Promise((resolve, reject) => {
if (response.status !== 200) {
// 请求失败
reject(response);
} else {
resolve(response.data);
}
}).catch((res) => {
throw new Error(`请求失败:${res}! 位置:request.js`);
});
},
(err) => {
// 失败
let message = "请求异常,请检测网络!";
if (err.response) {
message = err.response.data.message;
}
throw new Error(message);
}
);
export default service;
This diff is collapsed.
This diff is collapsed.
import { Button, Input, Menu, Form, DatePicker, Tabs, Modal,Carousel,Icon,Checkbox,Message } from "ant-design-vue";
import Vue from "vue";
// 根据实际情况全局注入
let antdArrs = [Button, Input, Menu, Form, DatePicker, Tabs, Modal,Carousel,Icon];
let useAntd = () => {
antdArrs.forEach((item) => {
Vue.use(item)
})
}
export default useAntd
import useAntd from "./Antd";
export { useAntd };
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
import { notification, message } from "ant-design-vue";
import "ant-design-vue/dist/antd.less";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
window.notification = notification;
window.message = message;
Vue.use(Antd);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
import Vue from "vue";
import VueRouter from "vue-router";
// 布局
import Layout from "../views/layout/";
Vue.use(VueRouter);
// 路由格式统一采用这种默认chuank打包方式,统一写法,非必要不要擅改
const routes = [
{
path: "/",
component: Layout,
children: [
{
path: "/",
redirect: "/index", // 页面重定向
},
{
// 主页
path: "/index",
name: "Index",
component: () =>
import(/* webpackChunkName: "Index" */ "../views/index"),
},
],
},
{
// 登陆
path: "/login",
name: "Login",
component: () => import(/* webpackChunkName: "Index" */ "../views/login"),
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
<template>
<div class="index">首页</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
};
</script>
<style lang="less" scoped></style>
<template>
<div class="footbar_">
<div class="con_">
<div class="con_item2">
<img src="../../assets/imgs/layout/logo1.svg" alt="" />
<p>
<span class="locicon"></span>
总部地址:北京市朝阳区建国门外大街丙24号,京泰大厦10层
</p>
<p><span class="phoneicon"></span>联系方式:400 880 8820</p>
<p><span class="emailicon"></span>&nbsp;&nbsp;编: 100022</p>
<p><span class="faxicon"></span>传真:+8610 8453 9719</p>
<p><span class="websiteicon"></span>网址:www.medilink-global.com.cn</p>
</div>
<div class="con_item2 flex_">
<div class="con_item3">
<p class="bold">关于中间带</p>
<a href=""
><router-link :to="{ path: '/about', query: { loc: 1 } }"
>企业简介</router-link
></a
>
<a href=""
><router-link :to="{ path: '/about', query: { loc: 2 } }">
发展历程
</router-link></a
>
<a href=""
><router-link :to="{ path: '/about', query: { loc: 3 } }">
核心优势
</router-link></a
>
</div>
<div class="con_item3">
<p class="bold">视频中心</p>
<a href=""
><router-link :to="{ path: '/about', query: { loc: 4 } }">
企业活动片
</router-link></a
>
</div>
<div class="con_item3">
<p class="bold">产品与服务</p>
<a href=""
><router-link :to="{ path: '/thirdService/thirdPartService' }">
第三方管理服务
</router-link></a
>
<a href=""
><router-link :to="{ path: '/vipService' }">
会员服务
</router-link></a
>
<a href=""
><router-link :to="{ path: '/specialService' }">
特色服务
</router-link></a
>
</div>
<div class="con_item3">
<p class="bold">信息中心</p>
<a href=""
><router-link :to="{ path: '/about', query: { loc: 5 } }">
最新动态
</router-link></a
>
</div>
</div>
<div class="con_item2 flex_">
<div class="con_item4">
<img src="../../assets/imgs/layout/saoma.png" alt="" />
<span>中间带在线</span>
</div>
<div class="con_item4">
<img src="../../assets/imgs/layout/erweima24.jpeg" alt="" />
<span>中间带24小时</span>
</div>
<div class="con_item4">
<img src="../../assets/imgs/layout/ma3.jpg" alt="" />
<span>MediLink Global<br />中间带</span>
</div>
</div>
</div>
<p>
Copyright © 2008 - 2020 MediLink-Global. ALL RIGHTS RESERVED
京ICP备08007346号-1 京公网安备 11010502030494号
</p>
</div>
</template>
<style lang="less" scoped>
.footbar_ {
background: #2c2c31;
background-size: 100% 100%;
padding: 58px 0 0 0;
.con_ {
display: flex;
justify-content: space-between;
align-items: initial;
font-size: 14px;
padding: 0 83px;
color: #fff;
.con_item2 {
&.flex_ {
display: flex;
justify-content: space-between;
}
&:first-child {
// width:460px;
width: 29%;
img {
width: 119px;
height: 35px;
object-fit: cover;
margin-bottom: 30px;
}
p {
// margin-bottom:20px;
}
}
&:nth-child(2) {
// width:510px;
width: 33.4%;
// margin-left: -151px;
}
&:last-child {
// width:270px;
width: 30%;
}
p {
display: flex;
align-items: center;
justify-content: self-start;
}
.locicon {
width: 15px;
height: 15px;
display: inline-block;
background: url(../../assets/imgs/layout/locicon.png) center center
no-repeat;
background-size: 13px 17px;
margin-right: 13px;
}
.phoneicon {
width: 15px;
height: 15px;
display: inline-block;
background: url(../../assets/imgs/layout/phoneicon.png) center center
no-repeat;
background-size: 15px 13px;
margin-right: 13px;
}
.emailicon {
width: 15px;
height: 15px;
display: inline-block;
background: url(../../assets/imgs/layout/emailicon.png) center center
no-repeat;
background-size: 14px 11px;
margin-right: 13px;
}
.faxicon {
width: 15px;
height: 15px;
display: inline-block;
background: url(../../assets/imgs/layout/faxicon.png) center center
no-repeat;
background-size: 14px 14px;
margin-right: 13px;
}
.websiteicon {
width: 15px;
height: 15px;
display: inline-block;
background: url(../../assets/imgs/layout/websiteicon.png) center center
no-repeat;
background-size: 15px 15px;
margin-right: 13px;
}
.con_item3 {
display: flex;
flex-direction: column;
p {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
a {
font-size: 14px;
color: #fff;
padding: 5px 0;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
.con_item4 {
display: flex;
flex-direction: column;
justify-content: center;
// margin-right:33px;
margin-top: -96px;
width: 143px;
align-items: center;
img {
width: 109px;
height: 109px;
object-fit: cover;
margin-bottom: 5px;
}
&:last-child {
margin-right: 0;
margin-top: -75px;
span {
// white-space:nowrap;
text-align: center;
}
}
}
}
}
& > p {
margin-top: 38px;
text-align: center;
padding: 12px 0;
color: #fff;
font-size: 12px;
background: #2c2c31;
}
}
</style>
This diff is collapsed.
<template>
<div class="layout">
<Header />
<router-view />
<Footer />
</div>
</template>
<script>
import Header from "./header.vue";
import Footer from "./footer.vue";
export default {
name: "layout",
components: { Header, Footer },
directives: {},
filters: {},
extends: {},
mixins: {},
props: {},
data() {
return {};
},
computed: {},
watch: {},
beforeCreate() {
// 生命周期钩子:组件实例刚被创建,组件属性计算之前,如 data 属性等
},
created() {
// 生命周期钩子:组件实例创建完成,属性已绑定,但 DOM 还未生成,el 属性还不存在
// 初始化渲染页面
},
beforeMount() {
// 生命周期钩子:模板编译/挂载之前
},
mounted() {
// 生命周期钩子:模板编译、挂载之后(此时不保证已在 document 中)
},
beforeUpate() {
// 生命周期钩子:组件更新之前
},
updated() {
// 生命周期钩子:组件更新之后
},
activated() {
// 生命周期钩子:keep-alive 组件激活时调用
},
deactivated() {
// 生命周期钩子:keep-alive 组件停用时调用
},
beforeDestroy() {
// 生命周期钩子:实例销毁前调用
},
destroyed() {
// 生命周期钩子:实例销毁后调用
},
errorCaptured(err, vm, info) {
// 生命周期钩子:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
console.log(err, vm, info);
},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<template>
<div class="login">
<div class="header">
<img :src="logo" alt="" />
</div>
<div class="center">
<div class="left">
<img :src="left" alt="" />
</div>
<div class="right">
<div class="logo">
<img :src="logo" alt="" />
</div>
<div class="tips">账号密码登陆</div>
<div class="form">
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
v-decorator="[
'userName',
{
rules: [
{
required: true,
message: '请输入体检卡号码!',
},
],
},
]"
placeholder="请输入体检卡号码"
>
<a-icon
slot="prefix"
type="user"
style="color: rgba(0, 0, 0, 0.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="[
'password',
{
rules: [
{
required: true,
message: '请输入卡号密码!',
},
],
},
]"
type="password"
placeholder="请输入密码(默认身份证后6位)"
>
<a-icon
slot="prefix"
type="lock"
style="color: rgba(0, 0, 0, 0.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
:disabled="isSub"
>
登陆
</a-button>
</a-form-item>
</a-form>
<div class="concat">
如果遇到操作问题,请拨打椋鸟健康热线
<span class="code">400-820-6523</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "login",
components: {},
data() {
return {
logo: require("../../assets/imgs/login/logo.png"),
left: require("../../assets/imgs/login/left-bg.png"),
isSub: true,
};
},
beforeCreate() {
this.form = this.$form.createForm(this, { name: "normal_login" });
},
methods: {
// 控制提交是否可用
subState() {
this.isSub = false;
},
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
},
},
};
</script>
<style lang="less" scoped>
.login {
min-height: 100vh;
background: url(../../assets/imgs/login/bg.png) 100%;
.header {
padding: 2.5px 21.5px;
background: rgba(225, 225, 225, 0.32);
}
.center {
display: flex;
justify-content: center;
margin: 69.5px auto;
.left {
img {
width: 320.5px;
}
position: relative;
left: 27.5px;
top: 58px;
}
.right {
padding-bottom: 38px;
position: relative;
right: 27.5px;
.tips {
text-align: center;
margin-bottom: 23.5px;
margin-top: 5px;
}
.logo {
width: 115.5px;
height: 44.5px;
background: url("../../assets/imgs/login/right-bg.png");
background-size: 100% 100%;
text-align: center;
margin: 0 auto;
img {
width: 29.7px;
height: 29.7px;
position: relative;
top: 7px;
}
position: relative;
top: -21px;
}
width: 340px;
background: #ffffff;
box-shadow: 0px 7px 14px 1px rgba(214, 207, 194, 0.14);
border-radius: 12px;
.concat {
font-size: 12px;
text-align: center;
transform: scale(0.8);
.code {
color: #3f7ffb;
}
}
.form {
::v-deep .ant-form {
.ant-input {
font-size: 12px;
}
width: 260.8px;
margin: 0 auto;
.login-form-button {
width: 96%;
position: relative;
left: 2%;
}
}
}
}
}
}
</style>
const path = require("path");
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
resolve: {
alias: {
"@": path.join(__dirname, "src"),
},
},
},
devServer: {
proxy: {
"^/api": {
target: "http://eccs.run4wd.com/api", //测试
// target: "http://provider.medilink-global.com.cn/api/",//生产,需api
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": "/", // rewrite path
},
},
},
},
publicPath: "/",
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment