Skip to content

L
ln-medicalAppointment-pc
Commit 9b00c080 authored by 朱彩云's avatar 朱彩云
Browse files
Options

合并

parents df6d0a7c ff3b6fde
Hide whitespace changes
Inline Side-by-side
Showing with 280 additions and 8 deletions
src/views/flow/components/combo.vue
View file @ 9b00c080
<template>
<div class="combo">
<div class="title"><span class="point"></span>请选择套餐</div>
<a-radio-group
class="items-radios"
v-if="combos.type === '1'"
v-model="value"
@change="onChange"
>
<ul class="items">
<li class="item" v-for="(item, index) in combos.items" :key="index">
<a-radio :style="radioStyle" :value="item.id">
{{ item.title }}
</a-radio>
</li>
</ul>
</a-radio-group>
<ul class="items">
<li>
<a-checkbox-group
:options="combos2.items"
v-model="chkvalue"
@change="onChange"
>
</a-checkbox-group>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "componentName",
components: {},
props: {},
data() {
return {
value: 1,
chkvalue: [],
combos: {
type: "2",
items: [
{
id: 0,
title: "21招商信诺-银保客户-豪华套餐女未婚",
},
{
id: 1,
title: "22招商信诺-银保客户-豪华套餐女未婚",
},
{
id: 2,
title: "23招商信诺-银保客户-豪华套餐女未婚",
},
{
id: 3,
title: "24招商信诺-银保客户-豪华套餐女未婚",
},
],
},
combos2: {
type: "1",
items: [
{
value: 0,
label: "21招商信诺-银保客户-豪华套餐女未婚",
},
{
value: 1,
label: "22招商信诺-银保客户-豪华套餐女未婚",
},
{
value: 2,
label: "23招商信诺-银保客户-豪华套餐女未婚",
},
{
value: 3,
label: "24招商信诺-银保客户-豪华套餐女未婚",
},
],
},
};
},
methods: {
onChange(checkedValues) {
console.log("checked = ", checkedValues);
console.log("value = ", this.chkvalue);
},
},
};
</script>
<style lang="less" scoped>
.combo {
.items-radios {
margin-top: 20px;
}
.items {
width: 400px;
.item {
background: #fafafa;
border-radius: 2px;
width: 400px;
margin-top: 20px;
height: 36px;
line-height: 36px;
font-size: 12px !important;
padding-left: 10px;
::v-deep .ant-radio-wrapper {
font-size: 12px;
}
}
}
::v-deep .ant-checkbox-group-item {
background: #fafafa;
border-radius: 2px;
width: 400px;
margin-top: 20px;
height: 36px;
line-height: 36px;
font-size: 12px !important;
padding-left: 10px;
}
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
}
</style>
src/views/flow/components/detail.vue 0 → 100644
View file @ 9b00c080
<template>
<div class="detail">
<div class="title"><span class="point"></span>预约详情</div>
<ul class="items">
<li>
<div class="label">已选套餐：</div>
<div class="content">21招商信诺-银保客户-豪华套餐女未婚</div>
</li>
<li>
<div class="label">已选体检中心：</div>
<div class="content">上海虹桥分院</div>
</li>
<li>
<div class="label">已选体检中心地址：</div>
<div class="content">上海虹桥分院</div>
</li>
<li>
<div class="label">已选体检中心地址：</div>
<div class="content">2021-11-20</div>
</li>
</ul>
<div class="tips">
<img :src="tips" alt="" />
<span class="desc"
>请耐心等待体检确认，预约成功后将发送短信给您，如需改约请致电客服</span
>
</div>
<div class="btns">
<a-button type="primary" disabled> 预约中 </a-button>
<a-button type="primary"> 回首页 </a-button>
</div>
</div>
</template>
<script>
export default {
name: "componentName",
components: {},
data() {
return {
tips: require("../../../assets/imgs/detail/tips.png"),
};
},
computed: {},
watch: {},
methods: {},
};
</script>
<style lang="less" scoped>
.detail {
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
.btns {
text-align: right;
padding-right: 10px;
margin-top: 15px;
.ant-btn {
&:nth-child(1) {
margin-right: 30px;
font-size: 12px;
color: white;
border: none;
}
}
}
.tips {
padding-left: 8px;
img {
position: relative;
top: -1px;
}
.desc {
color: #cccccc;
font-size: 12px;
margin-left: 4px;
}
}
.items {
margin-top: 15px;
padding-left: 10px;
li {
margin-top: 15px;
}
.label {
font-size: 12px;
color: #aaaaaa;
}
.content {
width: 400px;
color: #333333;
font-size: 12px;
line-height: 40px;
background: #fafafa;
margin-top: 4px;
border-radius: 2px;
position: relative;
left: -10px;
padding-left: 10px;
}
}
}
</style>
src/views/flow/index.vue
View file @ 9b00c080
......@@ -30,28 +30,39 @@
</div>
<div class="right">
<component :is="'selectInstitution'"></component>
<Combos v-if="!next" />
<Detail />
<SelectInstitution />
</div>
</div>
<a-button type="primary" @click="onSubmit">下一步</a-button>
<div class="btn"></div>
<div class="btn">
<a-button type="primary" @click="nextStep" v-if="!next">下一步</a-button>
</div>
</div>
</template>
<script>
import selectInstitution from './selectInstitution.vue';
import SelectInstitution from './selectInstitution.vue';
import Combos from "./components/combo.vue";
import Detail from "./components/detail.vue";
export default {
name: "componentName",
components: {
selectInstitution
Combos,
Detail,
SelectInstitution
},
props: {},
data() {
return {};
return {
next: true,
};
},
methods: {
onSubmit() {}
nextStep() {},
},
};
</script>
......@@ -59,7 +70,15 @@ export default {
<style lang="less" scoped>
.flow {
background: #fafafa;
min-height: calc(100vh - 300px);
.btn {
text-align: center;
position: relative;
left: 360px;
top: 20px;
}
.content {
padding-top: 20px;
.point {
display: inline-block;
border-radius: 5px;
......@@ -73,6 +92,7 @@ export default {
display: flex;
justify-content: center;
.left {
max-height: 350px;
.reset {
text-align: center;
margin-top: 25px;
......@@ -102,7 +122,11 @@ export default {
background: white;
box-shadow: 0px 7px 14px 1px rgba(223, 223, 219, 0.18);
border-radius: 8px;
padding: 19px 24px 30px 12px;
padding: 19px 24px 30px 14px;
margin-left: 24px;
}
.right {
padding-left: 24px;
}
.right {
margin-left: 30px;
......
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