Skip to content

html / Medical-Visits-TV

Go to a project
Commit c79d319c by changjin
Options

完成静态页面

parent 92b5e840
Showing with 2473 additions and 0 deletions
.babelrc 0 → 100644
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": ["transform-runtime","transform-vue-jsx"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintignore 0 → 100644
/build/
/config/
/dist/
/*.js
.eslintrc.js 0 → 100644
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
.gitignore 0 → 100644
.DS_Store
node_modules/
/dist/
.postcssrc.js 0 → 100644
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {}
}
}
build/build.js 0 → 100644
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
build/check-versions.js 0 → 100644
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
build/utils.js 0 → 100644
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
build/vue-loader.conf.js 0 → 100644
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
build/webpack.base.conf.js 0 → 100644
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
// const createLintingRule = () => ({
// // test: /\.(js|vue)$/,
// // loader: 'eslint-loader',
// // enforce: 'pre',
// // include: [resolve('src'), resolve('test')],
// // options: {
// // formatter: require('eslint-friendly-formatter'),
// // emitWarning: !config.dev.showEslintErrorsInOverlay
// // }
// })
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'BMap': 'BMap'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
build/webpack.dev.conf.js 0 → 100755
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
build/webpack.prod.conf.js 0 → 100644
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
build/webpack.test.conf.js 0 → 100644
'use strict'
// This is the webpack config used for unit tests.
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders()
},
devtool: '#inline-source-map',
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
module.exports = webpackConfig
config/dev.env.js 0 → 100644
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
config/index.js 0 → 100644
'use strict'
// Template version: 1.2.5
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8007, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
config/prod.env.js 0 → 100644
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>医疗远程问诊</title>
<!-- <link rel="shortcut icon" href="../static/img/logo.ico"/> -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<div id="app"></div>
</body>
</html>
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "dining-hall-front",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "changjin <changjin@maxrocky.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.17.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-polyfill": "^6.26.0",
"cors": "^2.8.5",
"element-ui": "^2.8.2",
"hchs-vue-charts": "^1.2.8",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-simple-uploader": "^0.4.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.0",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
src/App.vue 0 → 100644
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style lang='less'>
@import "../static/css/main.less";
</style>
\ No newline at end of file
src/components/page/accountQuery.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">账户查询</h1>
<el-row class="content mt50">
<el-col :span="4">姓名：博羽</el-col>
<el-col :span="4">性别：男</el-col>
<el-col :span="6">手机号：18210558545</el-col>
<el-col :span="6">身份证号：23080*********0419</el-col>
<el-col :span="24" class="mt20">服务包1：XXX免费包 使用次数：23次</el-col>
<el-col :span="4" class="mt20">服务包剩余内容：</el-col>
<el-col :span="20" class="mt20">
<p>1.免费问诊27次</p>
<p class="mt10">2.免费社工服务（至2019年9月3日 11:24:33截止）</p>
</el-col>
<el-col :span="4" class="mt20">服务包剩余内容：</el-col>
<el-col :span="20" class="mt20">
<p>1.免费问诊27次</p>
<p class="mt10">2.免费社工服务（至2019年9月3日 11:24:33截止）</p>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
padding: 30px;
color:#fff;
width:80%;
margin: auto;
}
</style>
src/components/page/archivesAdd.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">健康档案</h1>
<p class="white font16 mt10">新建健康档案</p>
<div class="content mt20">
<el-row class="mt30">
<el-col :span="10" :offset="2">
<el-form ref="form" :model="form" label-width="80px" class="formDiv">
<el-form-item label="就诊成员">
<el-input v-model="form.name" placeholder="请输入就诊成员"></el-input>
</el-form-item>
<el-form-item label="问诊电话">
<el-input v-model="form.phone" placeholder="请输入问诊电话"></el-input>
</el-form-item>
<el-form-item label="身份证号">
<el-input v-model="form.cardNumber" placeholder="请输入身份证号"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.sex" label="man">男</el-radio>
<el-radio v-model="form.sex" label="women">女</el-radio>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8" :offset="2">
<div class="codeDiv">
<img :src="url" class="img">
</div>
</el-col>
<el-col :span="24" class="text-center mt30">
<el-button type="primary" round>保存提交</el-button>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: {
sex: 'man'
},
url:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5'
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
padding: 30px;
height: 330px;
overflow: hidden;
}
.formDiv{
border-right:1px #999 dotted;
height: 220px;
padding-right: 80px;
}
.codeDiv{
width: 220px;
height: 220px;
}
.wait{
width: 29%;
margin: auto;
position: relative;
margin-top: 150px;
margin-bottom: 30px;
}
</style>
src/components/page/archivesDetail.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">健康档案</h1>
<p class="white font16 mt10">健康档案详情查看</p>
<p class="white font16 mt10">个人按次服务包</p>
<div class="content mt20">
<el-row>
<el-col :span="4" class="mb10">就诊成员：博羽</el-col>
<el-col :span="4" class="mb10">年龄：32</el-col>
<el-col :span="10" class="mb10" :offset="5">剩余问诊次数：<span class="color">23次</span></el-col>
<el-col :span="8" class="mb10">本次订单号码：43246523438735185794654</el-col>
<el-col :span="8" class="mb10" :offset="5">会员到期时间：<span class="color">2019年9月1日 15:54</span></el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<h1 class="font16 mb10">本次咨询内容</h1>
<el-col :span="6" class="mb10">问诊时间：2019年8月24日</el-col>
<el-col :span="6" class="mb10">问诊科室：心内科</el-col>
<el-col :span="12" class="mb10">接诊医生：刘德华</el-col>
<el-col :span="6" class="mb10">确诊疾病：口腔溃疡</el-col>
<el-col :span="6" class="mb10">患病时长：一周</el-col>
<el-col :span="12" class="mb10">接诊类型：全科</el-col>
<el-col :span="2">病情描述：</el-col>
<el-col :span="20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</el-col>
</el-row>
<el-row class="mt20">
<h1 class="font16 mb10">本次咨询内容</h1>
<el-col :span="6" class="mb10">问诊时间：2019年8月24日</el-col>
<el-col :span="6" class="mb10">问诊科室：心内科</el-col>
<el-col :span="12" class="mb10">接诊医生：刘德华</el-col>
<el-col :span="6" class="mb10">确诊疾病：口腔溃疡</el-col>
<el-col :span="6" class="mb10">患病时长：一周</el-col>
<el-col :span="12" class="mb10">接诊类型：全科</el-col>
<el-col :span="2">病情描述：</el-col>
<el-col :span="20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</el-col>
</el-row>
<el-row class="mt20">
<h1 class="font16 mb10">本次咨询内容</h1>
<el-col :span="6" class="mb10">问诊时间：2019年8月24日</el-col>
<el-col :span="6" class="mb10">问诊科室：心内科</el-col>
<el-col :span="12" class="mb10">接诊医生：刘德华</el-col>
<el-col :span="6" class="mb10">确诊疾病：口腔溃疡</el-col>
<el-col :span="6" class="mb10">患病时长：一周</el-col>
<el-col :span="12" class="mb10">接诊类型：全科</el-col>
<el-col :span="2">病情描述：</el-col>
<el-col :span="20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: {
name:'boyu'
},
departmentList: [
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
],
active:0,
url:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5'
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
padding: 30px;
height: 330px;
overflow: auto;
.iconDiv{
width:150px;
height: 150px;
margin: auto;
}
.iconDiv1{
width:150px;
height: 150px;
margin: auto;
position:absolute;
top: -150px;
left: 90px;
}
.nums{
position: absolute;
left: 139px;
top: -46px;
font-size: 40px;
color: #fff;
}
}
.formDiv{
border-right:1px #999 dotted;
height: 220px;
}
.codeDiv{
width: 220px;
height: 220px;
}
.wait{
width: 29%;
margin: auto;
position: relative;
margin-top: 150px;
margin-bottom: 30px;
}
</style>
src/components/page/archivesIndex.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">健康档案</h1>
<p class="white font16 mt10">家庭会员免费服务包</p>
<p class="white font16 mt10">剩余问诊次数：23次 服务包到期时间：2019年9月1日 16:08</p>
<div class="content mt30">
<div class="left cont mt20 pointer" @click="goAdd">
<h1 class="color text-center font22">+新建健康档案</h1>
</div>
<div class="left mt20 carousel">
<el-carousel type="card" height="280px" :autoplay="false">
<el-carousel-item v-for="(item, index) in list" :key="index">
<div class="card" @click="goDetail">
<h1 class="text-center mt20">{{item.name}}</h1>
<p class="mt20 font14">电子病历：{{item.cases}}份</p>
<p class="mt20 font14">上次就诊时间：{{item.date}}</p>
<p class="mt20 font14">最近预约挂号：{{item.registered}}</p>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list:[
{
name:'博宇',
cases:4,
date:'2019年9月1日',
registered: '暂无'
},
{
name:'博宇',
cases:4,
date:'2019年9月1日',
registered: '暂无'
},
{
name:'博宇',
cases:4,
date:'2019年9月1日',
registered: '暂无'
},
{
name:'博宇',
cases:4,
date:'2019年9月1日',
registered: '暂无'
},
{
name:'博宇',
cases:4,
date:'2019年9月1日',
registered: '暂无'
},
]
}
},
created () {
},
methods: {
goAdd () {
this.$router.push('/archivesAdd')
},
goDetail () {
this.$router.push('/archivesDetail')
}
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
.cont{
width:200px;
height: 250px;
padding: 10px;
background: #fff;
line-height: 200px;
border-radius: 10px;
}
.carousel{
margin-left: 20%;
width:40%;
height: 300px;
.is-active{
.card{
background: #ffae33;
color:#fff;
}
}
.card{
height: 260px;
padding: 10px;
border-radius: 10px;
background: #fff;
h1{
border-bottom: 1px dotted #999;
padding-bottom: 10px;
}
}
}
}
</style>
src/components/page/buyServicePark.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">购买服务包</h1>
<p class="white font16 mt10">当前服务包：XXX免费服务包</p>
<p class="white font16 mt10">剩余问诊次数：{{nums}}次 服务包到期时间：2019年9月1日 16:08</p>
<div class="content mt30">
<el-row>
<el-col :span="16" class="list">
<div :span="24" class="cont pointer" @click="choose(item,index)" :class="{'active': selected == index}" v-for="(item,index) in list" :key="index">
<el-row>
<el-col :span="6" class="text-center amount font20">{{item.amount}}元</el-col>
<el-col :span="16" class="desc" :offset="1">
<p class="font14 mt10">{{item.title}}</p>
<p class="font12 mt10">{{item.desc}}</p>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="6" :offset="2">
<div class="mark white">
<h1 class="font16 mt20">服务权益说明：</h1>
<p class="mt20">1.搭嘎好几十给大家哈山东矿机好尬看家是</p>
<p>2.搭嘎好几十给大家哈山东矿机好尬看家是</p>
<p>3.搭嘎好几十给大家哈山东矿机好尬看家是</p>
<p>4.搭嘎好几十给大家哈山东矿机好尬看家是</p>
<p>5.搭嘎好几十给大家哈山东矿机好尬看家是</p>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
nums: '1',
selected: 0,
list:[
{
amount:'XXX',
title:'XXXX服务包',
nums:'1',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes'
},
{
amount:'XXX',
title:'XXXX服务包',
nums:'2',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes'
},
{
amount:'XXX',
title:'XXXX服务包',
nums:'3',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes'
},
{
amount:'XXX',
title:'XXXX服务包',
nums:'4',
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes'
},
]
}
},
created () {
},
methods: {
choose (item,index) {
this.selected = index
this.nums = item.nums
},
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
.list{
background: #02abfd;
color: #fff;
border-bottom: 1px solid #ddd;
height: 400px;
overflow:auto;
.cont{
border: 1px solid #ddd;
border-bottom: 0;
}
.cont.active{
background: #ffcc33;
color: #000;
}
.amount{
line-height: 100px;
border-right:1px solid #ddd;
}
}
.mark{
background: #02abfd;
border: 1px solid #ddd;
padding: 20px;
height: 350px;
overflow:auto;
p{font-size: 12px;line-height: 40px;}
}
}
</style>
src/components/page/contactService.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">联系客服</h1>
<div class="mt20">
<el-row>
<el-col :span="16">
<h1 class="font16 white">热点问题</h1>
<div class="content mt30">
<div class="list" v-for="(item,index) in list" :key="index">
<p class="font12">{{item.question}}</p>
<p class="font12 mt10">{{item.answer}}</p>
</div>
</div>
</el-col>
<el-col :span="6" :offset="2" class="mt50">
<div class="plate pointer">
<p class="bold font20" @click="goVideo">联系客服</p>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list:[
{
question:'1.如何设置问诊成员？',
answer: '登录首页，点击新建，进入服务中心，点击修改问诊成员'
},
{
question:'1.如何设置问诊成员？',
answer: '登录首页，点击新建，进入服务中心，点击修改问诊成员'
},
{
question:'1.如何设置问诊成员？',
answer: '登录首页，点击新建，进入服务中心，点击修改问诊成员'
},
{
question:'1.如何设置问诊成员？',
answer: '登录首页，点击新建，进入服务中心，点击修改问诊成员'
},
{
question:'1.如何设置问诊成员？',
answer: '登录首页，点击新建，进入服务中心，点击修改问诊成员'
},
]
}
},
created () {
},
methods: {
goVideo () {
this.$router.push('/video')
}
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
height: 350px;
overflow: auto;
}
.list{
padding: 20px;
border-bottom: 1px solid #ddd;
}
.plate{
background: #67ff9a;
color: #fff;
width: 220px;
height: 350px;
text-align: center;
line-height: 320px;
}
</style>
src/components/page/index.vue 0 → 100644
<template>
<div class="main">
<div class="header">
<div class="left">
<div class="imgDiv left">
<img :src="headUrl" class="img">
</div>
<div class="name left white font14">你好，博羽</div>
</div>
<div class="right mt10">
<div class="news left"><span>{{news}}</span></div>
<div class="date left white font14 mt10">呼和浩特 | 晴 23℃</div>
</div>
</div>
<el-row class="content">
<el-col :span="16">
<div class="block">
<el-carousel>
<el-carousel-item v-for="item in bannerList" :key="item">
<div class="banner"><img :src="item" class="img"></div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
<el-col :span="7" :offset="1">
<div class="plate pointer" @click="goMenu1">
<p class="font22 white text-center bold mt20">电视问诊</p>
<div class="icon mt20"><img src="../../../static/img/news.png" class="img"></div>
</div>
</el-col>
<el-col :span="7" class="mt30">
<div class="plate pointer" @click="goMenu2" style="background:#67ff9a">
<p class="font22 white text-center bold mt20">健康档案</p>
<div class="icon mt20"><img src="../../../static/img/news.png" class="img"></div>
</div>
</el-col>
<el-col :span="7" class="mt30 cont">
<div class="plate pointer" @click="goMenu3" style="background:#ffcc33">
<p class="font22 white text-center bold mt20">服务中心</p>
<div class="icon mt20"><img src="../../../static/img/news.png" class="img"></div>
</div>
</el-col>
<el-col :span="7" class="mt30">
<div class="plate pointer" @click="goMenu4" style="background:#ff99ff">
<p class="font22 white text-center bold mt20">挂号预约</p>
<div class="icon mt20"><img src="../../../static/img/news.png" class="img"></div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
bannerList:[
'http://t7.baidu.com/it/u=3867190665,1687093273&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582010313&t=be4ac544136dbadbbaefb3471af15e25',
'http://t7.baidu.com/it/u=2739297303,1102892152&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582010331&t=10f85faaa62892115b13aebf8a6b270b'
],
news: 10,
headUrl:'http://img3.imgtn.bdimg.com/it/u=378824344,1185609431&fm=26&gp=0.jpg'
}
},
created () {
},
methods: {
goMenu1 () {
this.$router.push('/specialVideo')
},
goMenu2 () {
this.$router.push('/archivesIndex')
},
goMenu3 () {
this.$router.push('/serviceCenter')
},
goMenu4 () {
this.$router.push('/registered')
},
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
}
.header{
height: 80px;
.imgDiv{
width:60px;
height: 60px;
img{
border-radius: 50%;
}
}
.name{
margin-top:20px;
margin-left:10px;
}
.news{
background: url('../../../static/img/news.png') no-repeat;
background-size: 100%;
position: relative;
width: 40px;
height: 40px;
margin-right: 10px;
span{
color: #fff;
background:red;
padding: 5px;
border-radius: 50%;
display: block;
font-size: 10px;
position: absolute;
right: -20px;
margin-top: -20px;
zoom: 0.2;
}
}
}
.content{
height: 100%;
overflow: hidden;
}
.banner{
width: 100%;
height: 100%;
}
.plate{
padding: 20px;
background: #9966ff;
height: 260px;
overflow: hidden;
}
.icon{margin:auto;width:150px;height: 150px;}
.cont{
margin:0 71px;
}
</style>
src/components/page/noticeQuery.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">通知查询</h1>
<div class="content mt30">
<div class="list" v-for="(item,index) in list" :key="index">
<p class="font12">系统消息：</p>
<p class="font12 ml20 mt10">{{item}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list:[
'尊敬的XXX，您的刚刚使用了1次问诊服务，您的免费服务包，剩余27次服务。',
'尊敬的XXX大夫，您已确认接收XXX病人，病人预计将于2019年9月4日 10:00:00 到院入住。',
'尊敬的XXX大夫，XXX病人已预约将于明天到医院取药。',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
'尊敬的XXX主任，已有15名患者预约了您于9月10日的专家号，目前剩余号数：0.',
]
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
height: 400px;
overflow: auto;
border: 1px solid #999;
.list{
border-bottom: 1px solid #ddd;
padding: 10px;
}
}
</style>
src/components/page/orderQuery.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">订单查询</h1>
<div class="content mt30">
<div class="list" v-for="(item,index) in list" :key="index">
<el-row>
<el-col :span="6" class="font20 bold">购买内容：{{item.title}} </el-col>
<el-col :span="6" class="font20 bold">价格：{{item.price}} 元</el-col>
<el-col :span="12" class="text-right font12">{{item.status}}</el-col>
<el-col :span="24" class="font20 mt10 bold">购买时间：{{item.date}} </el-col>
<el-col :span="24" class="font14 mt10">内容：{{item.desc}} </el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list:[
{
title:'XXX服务包',
price: '1500',
date:'2019年9月1日 16:08',
status:'已付款',
desc:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.'
},
{
title:'XXX服务包',
price: '1500',
date:'2019年9月1日 16:08',
status:'已付款',
desc:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.'
},
{
title:'XXX服务包',
price: '1500',
date:'2019年9月1日 16:08',
status:'已付款',
desc:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.'
},
]
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
height: 400px;
overflow: auto;
border: 1px solid #999;
.list{
border-bottom: 1px solid #ddd;
padding: 20px;
}
}
</style>
src/components/page/payment.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">缴费页面</h1>
<h1 class="white font22 mt10">您需要缴纳的费用总金额为：XXXX.XX元，请扫码支付</h1>
<div class="content mt30">
<div class="left cont wechat mt20">
<p class="white font14 text-center">微信</p>
<div class="codeDiv mt10">
<img :src="codeUrl" class="img">
</div>
</div>
<div class="line left"></div>
<div class="left cont Alipay mt20">
<p class="white font14 text-center">支付宝</p>
<div class="codeDiv mt10">
<img :src="codeUrl" class="img">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
url:'../../../static/img/video.png',
codeUrl:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5'
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
padding: 30px;
height: 320px;
overflow: hidden;
.cont{
width:200px;
height: 250px;
padding: 10px;
}
.wechat{
background: #0aba07;
margin-left: 12%;
}
.line{
height: 270px;
margin-top: 20px;
margin-left: 16%;
border-right: 1px dotted #666;
}
.Alipay{
background: #1a9ed7;
margin-left: 19%;
}
}
</style>
src/components/page/registered.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">挂号预约</h1>
<el-form ref="form" :model="form" label-width="100px" class="mt30">
<el-col :span="6">
<el-form-item label="科室选择：">
<el-select v-model="form.name" placeholder="请选择科室">
<el-option label="心内科" value="xinnei"></el-option>
<el-option label="呼吸科" value="huxi"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16" :offset="2">
<el-date-picker
v-model="form.date"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-col>
</el-form>
<div class="content mt30">
<el-row v-for="(item,index) in list" :key="index" class="cont">
<el-col :span="4" class="info">
<div class="imgDiv"><img :src="item.url" class="img"></div>
<p class="text-center white font14 mt10">{{item.department}}</p>
<p class="text-center white font14">{{item.name}}</p>
</el-col>
<el-col :span="19" :offset="1" class="desc white">
<el-col :span="10" class="font14">在线时间：{{item.date}}</el-col>
<el-col :span="4" class="font14">总号数：{{item.number}}</el-col>
<el-col :span="4" class="font14">当前剩余：{{item.count}}</el-col>
<el-col :span="6" class="font14">价格：{{item.price}}</el-col>
<el-col :span="3" class="font14 mt10">医生简介：</el-col>
<el-col :span="20" class="font12 mt20">{{item.desc}}</el-col>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: {},
list: [
{
url:'http://img3.imgtn.bdimg.com/it/u=378824344,1185609431&fm=26&gp=0.jpg',
name:'张三',
department: '心内科',
date:'2019年9月15日 08：00--10：00',
number:'6',
count: 4,
price:5000,
desc:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.'
},
{
url:'http://img3.imgtn.bdimg.com/it/u=378824344,1185609431&fm=26&gp=0.jpg',
name:'张三',
department: '心内科',
date:'2019年9月15日 08：00--10：00',
number:'6',
count: 4,
price:5000,
desc:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.'
},
]
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
padding: 30px;
height: 320px;
overflow: auto;
clear: both;
.cont{
padding: 10px;
background: #d1ecf7;
margin-bottom: 20px;
}
.info{
background: #178fc2;
padding: 10px 0;
height: 140px;
.imgDiv{width: 70px;height: 70px;margin:auto;.img{border-radius: 50%;}}
}
.desc{
background: #178fc2;
padding: 10px 20px;
height: 140px;
}
}
</style>
src/components/page/serviceCenter.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">服务中心</h1>
<el-row class="content mt20">
<el-col :span="8" class="mt30">
<div class="plate pointer" style="background:#67ff9a" @click="goMenu1">
<p class="font22 white text-center bold">购买服务包</p>
</div>
</el-col>
<el-col :span="8" class="mt30 cont">
<div class="plate pointer" style="background:#ffcc33" @click="goMenu2">
<p class="font22 white text-center bold">账户查询</p>
</div>
</el-col>
<el-col :span="8" class="mt30">
<div class="plate pointer" style="background:#ff99ff" @click="goMenu3">
<p class="font22 white text-center bold">修改问诊成员</p>
</div>
</el-col>
<el-col :span="8" class="mt50">
<div class="plate pointer" style="background:#9966ff" @click="goMenu4">
<p class="font22 white text-center bold">通知查询</p>
</div>
</el-col>
<el-col :span="8" class="mt50">
<div class="plate pointer" style="background:#999" @click="goMenu5">
<p class="font22 white text-center bold">订单查询</p>
</div>
</el-col>
<el-col :span="8" class="mt50">
<div class="plate pointer" style="background:#ff6600" @click="goMenu6">
<p class="font22 white text-center bold">联系客服</p>
</div>
</el-col>
</el-row>
<el-dialog
title="修改问诊成员"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="选择成员">
<el-select v-model="form.name" placeholder="请选择成员">
<el-option label="博宇" value="boyu"></el-option>
<el-option label="张三" value="zhangsan"></el-option>
</el-select>
</el-form-item>
<el-form-item label="问诊电话">
<span>18210558545</span>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button type="primary" @click="goAdd">新 建</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
form: {},
dialogVisible: false,
url:'../../../static/img/video.png',
codeUrl:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5'
}
},
created () {
},
methods: {
goMenu1 () {
this.$router.push('/buyServicePark')
},
goMenu2 () {
this.$router.push('/accountQuery')
},
goMenu3 () {
this.dialogVisible = true
},
goMenu4 () {
this.$router.push('/noticeQuery')
},
goMenu5 () {
this.$router.push('/orderQuery')
},
goMenu6 () {
this.$router.push('/contactService')
},
goAdd () {
this.$router.push('/archivesAdd')
},
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
height: 100%;
overflow: hidden;
}
.plate{
background: #9966ff;
height: 150px;
width:260px;
line-height: 150px;
overflow: hidden;
}
</style>
src/components/page/specialVideo.vue 0 → 100644
<template>
<div class="main">
<h1 class="white">电视问诊</h1>
<el-steps :active="active" simple class="mt30">
<el-step title="问诊信息" icon="el-icon-s-order"></el-step>
<el-step title="进入诊室" icon="el-icon-s-home"></el-step>
<el-step title="视频问诊" icon="el-icon-s-platform"></el-step>
<el-step title="健康记录" icon="el-icon-s-comment"></el-step>
</el-steps>
<div v-if="active === 0">
<p class="mt10 white font14">您可以通过以下两种方式提交基本问诊信息</p>
<div class="content mt10">
<el-row class="mt30">
<el-col :span="10" :offset="2">
<el-form ref="form" :model="form" label-width="80px" class="formDiv">
<el-form-item label="就诊成员">
<el-select v-model="form.name" placeholder="请选择就诊成员">
<el-option label="博宇" value="boyu"></el-option>
<el-option label="张三" value="zhangsan"></el-option>
</el-select>
</el-form-item>
<el-form-item label="问诊电话">
<span>18210558545</span>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8" :offset="2">
<div class="codeDiv">
<img :src="url" class="img">
</div>
</el-col>
<el-col :span="24" class="text-center mt30">
<el-button type="primary" round>确定</el-button>
</el-col>
</el-row>
</div>
</div>
<!-- <div class="content mt30" v-if="active === 0">
<div class="iconDiv mt30">
<img src="../../../static/img/cup.png" class="img">
</div>
<p class="font20 text-center mt20">正在为您分配接待人员，请您耐心等待</p>
<p class="font20 text-center mt10">就诊信息：1.就诊人员：博羽 2.问诊电话：18210558545 3.第一次就诊</p>
</div> -->
<!-- <div class="content mt30" v-if="active === 0">
<div class="iconDiv mt20">
<img src="../../../static/img/department.png" class="img">
</div>
<p class="font20 text-center mt20">您之前选择的是心内科主任进行问诊，请问是否继续选择该科室？</p>
<el-col :span="24" class="text-center mt30">
<el-button type="primary" round>确&nbsp;&nbsp;&nbsp;&nbsp;定</el-button>
<el-button round class="ml30">其他科室</el-button>
</el-col>
</div> -->
<!-- <div class="content mt30" v-if="active === 0">
<el-row>
<el-col :span="4" v-for="info in departmentList">
<div class="iconDiv mb30">
<img :src="info" class="img">
</div>
</el-col>
</el-row>
</div> -->
<!-- <div class="content mt30" v-if="active === 0">
<div class="iconDiv mt20">
<img src="../../../static/img/department.png" class="img">
</div>
<p class="font20 text-center mt20">您之前在与心内科XXX大夫的问诊中因网络问题中断，是否继续链接？</p>
<el-col :span="24" class="text-center mt30">
<el-button type="primary" round>确定</el-button>
<el-button round class="ml30">取消</el-button>
</el-col>
</div> -->
<div class="content mt30" v-if="active === 1">
<div class="wait">
<div class="left">您之前还有</div>
<div class="iconDiv1 mt30 left">
<img src="../../../static/img/cup.png" class="img">
</div>
<span class="nums">1</span>
<div class="left" style="padding-left:150px">位，请稍后</div>
</div><br><br>
<p class="font20 text-center mt30 clear">就诊信息：1.就诊人员：博羽 2.问诊电话：18210558545 3.第一次就诊</p>
</div>
<div class="content mt30" v-if="active === 3">
<el-row>
<el-col :span="4" class="mb10">就诊成员：博羽</el-col>
<el-col :span="4" class="mb10">年龄：32</el-col>
<el-col :span="10" class="mb10" :offset="5">剩余问诊次数：<span class="color">23次</span></el-col>
<el-col :span="8" class="mb10">本次订单号码：43246523438735185794654</el-col>
<el-col :span="8" class="mb10" :offset="5">会员到期时间：<span class="color">2019年9月1日 15:54</span></el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<h1 class="font16 mb10">本次咨询内容</h1>
<el-col :span="6" class="mb10">问诊时间：2019年8月24日</el-col>
<el-col :span="6" class="mb10">问诊科室：心内科</el-col>
<el-col :span="12" class="mb10">接诊医生：刘德华</el-col>
<el-col :span="6" class="mb10">确诊疾病：口腔溃疡</el-col>
<el-col :span="6" class="mb10">患病时长：一周</el-col>
<el-col :span="12" class="mb10">接诊类型：全科</el-col>
<el-col :span="2">病情描述：</el-col>
<el-col :span="20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: {
name:'boyu'
},
departmentList: [
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
'../../../static/img/department.png',
],
active:0,
url:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5'
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.main{
padding: 2% 5% 5% 5%;
background: #1a9ed7;
overflow: hidden;
height: 85%;
}
.content{
background: #fff;
padding: 30px;
height: 330px;
overflow: hidden;
.iconDiv{
width:150px;
height: 150px;
margin: auto;
}
.iconDiv1{
width:150px;
height: 150px;
margin: auto;
position:absolute;
top: -150px;
left: 90px;
}
.nums{
position: absolute;
left: 139px;
top: -46px;
font-size: 40px;
color: #fff;
}
}
.formDiv{
border-right:1px #999 dotted;
height: 220px;
}
.codeDiv{
width: 220px;
height: 220px;
}
.wait{
width: 29%;
margin: auto;
position: relative;
margin-top: 150px;
margin-bottom: 30px;
}
</style>
src/components/page/video.vue 0 → 100644
<template>
<div class="main">
<img :src="url" class="img">
</div>
</template>
<script>
export default {
data () {
return {
url:'../../../static/img/video.png'
}
},
created () {
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
src/main.js 0 → 100644
import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App'
import router from './router'
import axios from 'axios'
import 'babel-polyfill'
import ElementUI from 'element-ui'
import Vuex from 'vuex'
import store from './vuex/store'
require('element-ui/lib/theme-chalk/index.css')
require('../static/css/index.css')
Vue.use(uploader)
Vue.use(Vuex)
Vue.prototype.baseURL = 'https://diningback.bgy.com.cn' // 生产
axios.defaults.baseURL = Vue.prototype.baseURL
axios.defaults.withCredentials = true
axios.defaults.timeout = 60000
Vue.config.productionTip = false
var alert = require('element-ui').MessageBox.alert
Vue.use(ElementUI)
Vue.prototype.$axios = axios
axios.interceptors.request.use(config => {
config.headers['access_token'] = window.sessionStorage.getItem('access-token')
return config
}, err => {
return Promise.reject(err)
})
async function responseInterceptor (response) {
if (response.data.code === '0') {
return response
} else {
// 在添加其他的错误码判断
if (response.data.msg) {
alert(response.data.msg, '温馨提示')
}
}
}
// 设置拦截器
axios.interceptors.response.use(function (response) {
return responseInterceptor(response)
})
function initVue () {
new Vue({
el: '#app',
router,
axios,
alert,
store,
template: '<App/>',
components: { App }
})
}
initVue()
src/router/index.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index', // 首页
component: resolve =>
require(['../components/page/index.vue'], resolve)
},
{
path: '/specialVideo', // 问诊步骤
component: resolve =>
require(['../components/page/specialVideo.vue'], resolve)
},
{
path: '/video', // 视频页面
component: resolve =>
require(['../components/page/video.vue'], resolve)
},
{
path: '/payment', // 缴费页面
component: resolve =>
require(['../components/page/payment.vue'], resolve)
},
{
path: '/archivesIndex', // 健康档案
component: resolve =>
require(['../components/page/archivesIndex.vue'], resolve)
},
{
path: '/archivesAdd', // 新建档案
component: resolve =>
require(['../components/page/archivesAdd.vue'], resolve)
},
{
path: '/archivesDetail', // 档案详情
component: resolve =>
require(['../components/page/archivesDetail.vue'], resolve)
},
{
path: '/serviceCenter', // 服务中心
component: resolve =>
require(['../components/page/serviceCenter.vue'], resolve)
},
{
path: '/buyServicePark', // 购买服务包
component: resolve =>
require(['../components/page/buyServicePark.vue'], resolve)
},
{
path: '/accountQuery', // 账户查询
component: resolve =>
require(['../components/page/accountQuery.vue'], resolve)
},
{
path: '/noticeQuery', // 通知查询
component: resolve =>
require(['../components/page/noticeQuery.vue'], resolve)
},
{
path: '/orderQuery', // 订单查询
component: resolve =>
require(['../components/page/orderQuery.vue'], resolve)
},
{
path: '/contactService', // 联系客服
component: resolve =>
require(['../components/page/contactService.vue'], resolve)
},
{
path: '/registered', // 挂号预约
component: resolve =>
require(['../components/page/registered.vue'], resolve)
}
]
})
src/vuex/store.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
diningId: ''
},
mutations: {
}
})
export default store
static/css/index.css 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
static/css/main.less 0 → 100644
*{
padding: 0;
margin: 0;
list-style: none;
font-style: normal;
text-decoration: none;
&:hover{
outline: none;
}
}
html,body,#app,.wrapper{
width:100%;
height:100%;
/*overflow: hidden;*/
}
.wrapper{
overflow-y: hidden;
position: relative;
min-width: 1200px;
}
body{
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background:#f1f2f6;
}
a{text-decoration: none}
.bold{
font-weight: bold!important;
}
.block{
display: block!important;
}
.text-right{
text-align: right!important;
}
.text-left{
text-align: left!important;
}
.text-center{
text-align: center!important;
}
.mt5{
margin-top: 5px!important;
}
.mt10{
margin-top: 10px!important;
}
.mt15{
margin-top: 15px!important;
}
.mt20{
margin-top: 20px!important;
}
.mt30{
margin-top: 30px!important;
}
.mt50{
margin-top: 50px!important;
}
.ml10{
margin-left: 10px!important;
}
.ml20{
margin-left: 20px!important;
}
.ml30{
margin-left: 30px!important;
}
.ml40{
margin-left: 40px!important;
}
.mr10{
margin-right: 10px!important;
}
.mr20{
margin-right: 20px!important;
}
.mb10{
margin-bottom: 10px!important;
}
.mb20{
margin-bottom: 20px!important;
}
.mb30{
margin-bottom: 30px!important;
}
.font12{
font-size: 12px!important;
}
.font14{
font-size: 14px!important;
}
.font16{
font-size: 16px!important;
}
.font18{
font-size: 18px!important;
}
.font20{
font-size: 20px!important;
}
.font22{
font-size: 22px!important;
}
.img{
width:100%!important;
height:100%!important;
}
.right{
float: right!important;
}
.left{
float: left!important;
}
.color{
color: #ffae33!important;
}
.orange{
color: #EA6C01!important;
}
.green{
color: #5ABB3C!important;
}
.red{
color: red!important;
}
.gray{
color: #999!important;
}
.gray6{
color: #666!important;
}
.white{
color: #fff!important;
}
.pointer{
cursor: pointer!important;
}
.clear{
clear: both!important;
}
.line{
text-decoration-line: underline!important;
}
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 sign in to comment