Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
L
ln-medicalAppointment-pc
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙海亮
ln-medicalAppointment-pc
Commits
1a80272d
Commit
1a80272d
authored
Nov 18, 2021
by
朱彩云
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加选择体检机构
parent
6f4654f6
Changes
7
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
9728 additions
and
3 deletions
+9728
-3
.gitignore
.gitignore
+23
-0
next.png
src/assets/imgs/flow/next.png
+0
-0
prev.png
src/assets/imgs/flow/prev.png
+0
-0
reserve-date.vue
src/components/reserve-date.vue
+577
-0
index.vue
src/views/flow/index.vue
+13
-3
selectInstitution.vue
src/views/flow/selectInstitution.vue
+219
-0
yarn.lock
yarn.lock
+8896
-0
No files found.
.gitignore
0 → 100644
View file @
1a80272d
.DS_Store
node_modules
/dist
.history
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
src/assets/imgs/flow/next.png
0 → 100644
View file @
1a80272d
450 Bytes
src/assets/imgs/flow/prev.png
0 → 100644
View file @
1a80272d
450 Bytes
src/components/reserve-date.vue
0 → 100644
View file @
1a80272d
This diff is collapsed.
Click to expand it.
src/views/flow/index.vue
View file @
1a80272d
...
@@ -29,7 +29,9 @@
...
@@ -29,7 +29,9 @@
</div>
</div>
</div>
</div>
<div
class=
"right"
>
step
</div>
<div
class=
"right"
>
<component
:is=
"'selectInstitution'"
></component>
</div>
</div>
</div>
<a-button
type=
"primary"
@
click=
"onSubmit"
>
下一步
</a-button>
<a-button
type=
"primary"
@
click=
"onSubmit"
>
下一步
</a-button>
<div
class=
"btn"
></div>
<div
class=
"btn"
></div>
...
@@ -37,15 +39,20 @@
...
@@ -37,15 +39,20 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
selectInstitution
from
'
./selectInstitution.vue
'
;
export
default
{
export
default
{
name
:
"
componentName
"
,
name
:
"
componentName
"
,
components
:
{},
components
:
{
selectInstitution
},
props
:
{},
props
:
{},
data
()
{
data
()
{
return
{};
return
{};
},
},
methods
:
{},
methods
:
{
onSubmit
()
{}
},
};
};
</
script
>
</
script
>
...
@@ -97,6 +104,9 @@ export default {
...
@@ -97,6 +104,9 @@ export default {
border-radius: 8px;
border-radius: 8px;
padding: 19px 24px 30px 12px;
padding: 19px 24px 30px 12px;
}
}
.right {
margin-left: 30px;
}
}
}
}
}
</
style
>
</
style
>
src/views/flow/selectInstitution.vue
0 → 100644
View file @
1a80272d
<
template
>
<div
class=
"institution"
>
<!-- 请选择体检地区 -->
<div
class=
"area"
>
<div
class=
"title"
>
<div
class=
"type"
><span
class=
"point"
></span>
请选择体检地区
</div>
</div>
<ul
class=
"area_box"
>
<li>
<label>
省:
</label>
<a-select
style=
"width:120px"
>
<a-select-option
v-for=
"(item) in provinceList"
:key=
"item"
:value=
"item"
>
{{
item
}}
</a-select-option>
</a-select>
</li>
<li>
<label>
市:
</label>
<a-select
style=
"width:120px"
>
<a-select-option
v-for=
"(item) in provinceList"
:key=
"item"
:value=
"item"
>
{{
item
}}
</a-select-option>
</a-select>
</li>
<li>
<label>
区:
</label>
<a-select
style=
"width:120px"
>
<a-select-option
v-for=
"(item) in areaList"
:key=
"item"
:value=
"item"
>
{{
item
}}
</a-select-option>
</a-select>
</li>
</ul>
</div>
<!-- 请选择体检机构 -->
<div
class=
"mechanism"
>
<div
class=
"title"
>
<div
class=
"type"
><span
class=
"point"
></span>
请选择体检机构
</div>
</div>
<div
class=
"mechanism_box"
>
<span
v-for=
"(item, index) in mechanismList"
:key=
"index"
:class=
"index === selectIndex ? 'active' : ''"
@
click=
"clickTab(index)"
>
{{
item
}}
</span>
</div>
</div>
<!-- 请选择体检地区 -->
<div
class=
"hospital"
>
<div
class=
"title"
>
<div
class=
"type"
><span
class=
"point"
></span>
请选择体检中心
</div>
</div>
<ul
class=
"hospital_box"
>
<li
v-for=
"(item, index) in hospitalList"
:key=
"index"
>
<div>
<p
class=
"top"
>
{{
item
.
name
}}
</p>
<p
class=
"bottom"
>
{{
item
.
address
}}
</p>
</div>
<button
:class=
"item.isDisabled ? 'btn disabled' : 'btn'"
@
click=
"openDatePicker(item)"
>
选择体检日期
</button>
</li>
</ul>
</div>
<div
class=
"mask"
v-if=
"datePickShow"
>
<reserve-date
ref=
"reserveDate1"
@
confirmDate=
"getConfirm"
@
cancleDate=
"getCancle"
@
changeDay=
"(date)=>
{ return dateChange(date, 0); }" />
</div>
</div>
</
template
>
<
script
>
import
reserveDate
from
'
../../components/reserve-date
'
export
default
{
name
:
"
selectInstitution
"
,
components
:
{
reserveDate
},
props
:
{},
data
()
{
return
{
datePickShow
:
false
,
selectIndex
:
0
,
provinceList
:
[
'
上海市
'
],
provinceList
:
[
'
上海市
'
],
areaList
:
[
'
静安区
'
],
mechanismList
:
[
'
全部
'
,
'
慈铭
'
,
'
美年
'
],
hospitalList
:
[
{
name
:
'
上海张江分院
'
,
address
:
'
上海市浦东新区海科路777号
'
},
{
name
:
'
上海张江分院
'
,
address
:
'
上海市浦东新区海科路777号
'
},
{
name
:
'
上海张江分院
'
,
address
:
'
上海市浦东新区海科路777号
'
},
{
isDisabled
:
true
,
name
:
'
上海张江分院
'
,
address
:
'
上海市浦东新区海科路777号
'
},
]
};
},
methods
:
{
// 选择体检机构
clickTab
(
index
)
{
this
.
selectIndex
=
index
;
},
// 打开日期弹框
openDatePicker
(
item
)
{
if
(
item
.
isDisabled
)
{
return
;
}
this
.
datePickShow
=
true
;
},
getConfirm
(
val
)
{
this
.
datePickShow
=
false
;
},
getCancle
(
val
)
{
this
.
datePickShow
=
false
;
},
dateChange
(
date
,
type
)
{
console
.
log
(
date
)
}
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.institution{
padding: 19.5px 14.5px 33.5px 14.5px;
background-color: white;
width: 760px;
margin: 0 auto;
font-size: 14px;
color: #333;
.title {
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
.type {
font-size: 14px;
font-weight: bold;
}
.item-container {
margin-top: 8.5px;
}
}
.area_box {
display: flex;
justify-content: space-between;
margin: 25px 0px 45px 0px;
label {
color: #aaa;
}
}
.mechanism_box {
display: flex;
flex-wrap: wrap;
margin: 25px 0px 45px 0px;
align-items: center;
span {
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 38px;
background: #FAFAFA;
border-radius: 4px;
margin-right: 20px;
}
span.active {
background: #D2D2D2;
}
}
.hospital_box {
margin: 25px 0px 45px 0px;
li {
display: flex;
height: 98px;
align-items: center;
justify-content: space-between;
background: #FAFAFA;
padding: 28px 24px;
margin-bottom: 12px;
.top {
font-size: 14px;
color: #333;
}
.bottom {
color: #999;
font-size: 13px;
}
.btn {
outline: none;
border: none;
background: linear-gradient(87deg, #FFCB00, #FFB219);
width: 110px;
height: 40px;
border-radius: 4px;
color: #fff;
}
.btn.disabled {
background: #E2E2E2;
}
}
}
}
</
style
>
yarn.lock
0 → 100644
View file @
1a80272d
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment