Skip to content

P
pica-insurance
提交 e3042590 编写于 作者: 张磊's avatar 张磊
浏览文件
操作

demo dev

上级 a5e11691
隐藏空白字符变更
内嵌 并排
正在显示 包含 626 行增加 和 1 行删除
src/plugins/vue-components.js
浏览文件 @ e3042590
import Vue from 'vue'; import Vue from 'vue';
import picaGuideApp from '@pica-kit/pica-ui-component/lib/pica-guide-app'; import picaGuideApp from '@pica-kit/pica-ui-component/lib/pica-guide-app';
import PageModel from '@pica-kit/page-model'; import PageModel from '@pica-kit/page-model';
import { Dialog, Field, Overlay, Button, Popup, Icon} from 'vant'; import { Dialog, Field, Overlay, Button, Popup, Icon, RadioGroup, Radio} from 'vant';
import Loading from '@/components/loading/loading'; import Loading from '@/components/loading/loading';
...@@ -14,3 +14,5 @@ Vue.use(Overlay); ...@@ -14,3 +14,5 @@ Vue.use(Overlay);
Vue.use(Button); Vue.use(Button);
Vue.use(Popup); Vue.use(Popup);
Vue.use(Icon); Vue.use(Icon);
Vue.use(RadioGroup);
Vue.use(Radio);
src/router/index.js
浏览文件 @ e3042590
...@@ -58,6 +58,14 @@ const routerConfig = [ ...@@ -58,6 +58,14 @@ const routerConfig = [
title: '预约', title: '预约',
}, },
}, },
{
path: '/appoint-demo',
name: 'appointDemo',
component: () => import('@/views/appoint-demo/index.vue'),
meta: {
title: '癌症早筛检测预约',
},
},
{ {
path: '/home', path: '/home',
name: 'home', name: 'home',
......
src/views/appoint-demo/index.vue 0 → 100644
浏览文件 @ e3042590
<template>
<div class="insurance-detection-appoint-demo">
<page-model
v-if="picaWechat != 'wechat'"
ref="PageModel"
:header-info="headerInfo"
/>
<div class="bg-img">
<div class="title-1">
检测预约
</div>
<div class="title-2">
及时接受检测结果检测报告
</div>
<img
src="@/assets/images/demo-bg.png"
alt=""
>
</div>
<div class="wrap">
<div class="choose-section">
<van-form
ref="dectionForm"
validate-first
>
<van-field
name="checkboxGroup"
label="检测项目"
class="hidden-border"
required
>
<template #input />
</van-field>
<van-field
name="radio"
label=""
>
<template #input>
<van-radio-group
v-model="currentProject"
direction="horizontal"
>
<van-radio
v-for="(item) in orgData"
:key="item.no"
checked-color="#00bda5"
class="item-radio"
:name="item.no"
>
{{ item.value }}
</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field
label="检测地点"
required
disabled
class="appoint-form-title"
/>
<van-field
v-model="dectionForm.location"
class="appoint-form-items"
label="省市区"
disabled
right-icon="arrow"
placeholder="请选择省市区"
/>
<van-field
v-model="dectionForm.hospitalName"
class="appoint-form-items"
label="检测地点"
disabled
right-icon="arrow"
placeholder="请选择检测机构"
:rules="[{ required: true, message: '请选择检测机构' }]"
>
<template #input>
<div
v-if="!dectionForm.hospitalName"
class="appoint-form-placeholder"
>
请选择检测机构
</div>
<div
v-else
class="appoint-form-value"
>
{{ dectionForm.hospitalName }}
</div>
</template>
</van-field>
<van-field
name="checkboxGroup"
label="预约时间"
required
right-icon="arrow"
@click="showPopup('showSelectTime')"
>
<template #input>
<div
v-if="!dectionForm.appointmentTime"
class="appoint-form-placeholder"
>
请选择预约时间
</div>
<div
v-else
class="appoint-form-value"
>
{{ appointmentTimeShadow }}
</div>
</template>
</van-field>
</van-form>
</div>
<van-button
round
block
type="info"
:disabled="!canSubmit"
class="appoint-form-submit "
:class="canSubmit ? 'appoint-form-submit-active':''"
@click="appointment"
>
提交
</van-button>
</div>
<SelectTime
:hospital-id="hospitalId"
:project-equity-no="projectEquityNo"
:show="showSelectTime"
@change="selectTimes"
@close="closePopup"
/>
</div>
</template>
<script>
import {getDetectionName, appointment} from '@/api/appoint';
import SelectTime from '@/components/selectTime/index.vue';
import dayjs from 'dayjs';
export default {
components: {
SelectTime,
},
data() {
return {
picaWechat:window._picaWechat,
headerInfo: {
title: '癌症早筛检测预约',
isBlack: true,
backMethod: 'web',
style: 'backgroundColor:#ffffff;zIndex:100;',
background: '',
},
dectionData:{},
dectionForm: {
detectName: '',
beneficiaryName: '',
appointmentTime: '',
currentDate: '',
timeBucket: '',
hospitalName:'人民医院和平社区健康服务中心',
location: '深圳市坪山区',
goodsId: '',
},
showAreaLabel:'',
showArea:false,
reportShow: false,
placeList: [],
popType: '',
timsArray: [],
timeBucket: {
am: '上午',
pm: '下午',
},
searchPlace: '',
selectPicker: {
value: [],
label: '',
},
showSelectTime:false,
locationAreaCode: [],
hospitalId: '',
projectEquityNo: '',
yunOrderNo: '',
isDisabled: false,
buttonStatus: false,
buttonText: '',
appointmentTimeShadow: '',
currentProject: '1',
orgData: [
{value: '大便潜血检测（肠癌风险）', no:'1'},
{value: '幽门螺杆菌检测（胃癌风险)', no:'2'},
{value: '甲胎蛋白指尖血检测（肝癌风险)', no:'3'},
]
};
},
computed: {
canSubmit() {
return (
this.dectionForm.appointmentTime &&
this.dectionForm.goodsId &&
this.dectionForm.hospitalName &&
this.hospitalId &&
this.yunOrderNo &&
this.buttonStatus
);
},
},
mounted() {
this.$loading.show();
const { yunOrderNo, projectEquityNo } = this.$route.query;
this.yunOrderNo = yunOrderNo;
this.projectEquityNo = projectEquityNo;
console.log('yunOrderNo', yunOrderNo);
this.getDetectionName(yunOrderNo);
},
methods: {
// 目前是配置一个检测信息，可能会拓展，所以返回的是一个list
getDetectionName(yunOrderNo) {
getDetectionName(yunOrderNo).then(res => {
if (res.code === '000000' && res.data) {
const dectionData = res.data[0] || {};
console.log('getDetectionName', dectionData);
this.dectionData = dectionData;
this.dectionForm.detectName = dectionData.detectionName;
this.dectionForm.goodsId = dectionData.goodsId;
}
});
},
selectTimes(times) {
console.log(times);
const {value, currentItemChoosed} = times;
this.dectionForm.appointmentTime = value;
this.closePopup('showSelectTime');
// appointmentTimeShadow
const m = (Number(dayjs(currentItemChoosed.appointmentDate).month()) + 1) + '月' + (Number(dayjs(currentItemChoosed.appointmentDate).date())) + '日';
this.appointmentTimeShadow = m + ' ' + currentItemChoosed[currentItemChoosed.timeBucket + 'TimeContent'];
},
getTimes() {
this.timsArray = [];
const current = new Date().getTime();
const ss = 24 * 60 * 60 * 1000;
for (let i = 5; i < 35; i++) {
var addTime = i * ss + current;
var myDate = new Date(addTime);
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var timeStr =
year + '-' + this.plusZero(month) + '-' + this.plusZero(date);
this.timsArray.push(timeStr);
}
},
plusZero(num) {
return num > 9 ? num + '' : '0' + num;
},
showPopup(name) {
this[name] = true;
},
closePopup(name) {
this[name] = false;
},
appointment() {
this.$refs.dectionForm.validate().then(result => {
console.log('this.dectionForm', result);
const data = {
appointmentTime: this.dectionForm.appointmentTime,
goodsId: this.dectionForm.goodsId,
hospitalId: this.hospitalId,
hospitalName: this.dectionForm.hospitalName,
yunOrderNo:this.yunOrderNo,
};
appointment(data).then(res => {
if (res.code === '000000') {
this.$router.push({
path: '/appoint-details',
query: {
yunOrderNo: this.yunOrderNo,
projectEquityNo:this.projectEquityNo
}
});
} else {
res.message && this.$toast(res.message);
}
});
}).catch(err => {
console.log(err);
});
},
companySelect(i) {
console.log('9', i);
},
},
};
</script>
<style lang="scss" scoped>
.insurance-detection-appoint-demo {
width: 100%;
height: 100vh;
overflow: auto;
box-sizing: border-box;
color: #ffffff;
padding-bottom: 50px;
.bg-img {
width: 100%;
height: 281px;
position: absolute;
}
.wrap {
padding: 0 12px;
margin-top: 90px;
}
.title-1 {
font-size: 20px;
margin-top: 23px;
font-style: oblique;
font-weight: 600;
position: absolute;
margin-left: 12px;
}
.title-2 {
margin-top: 60px;
font-size: 12px;
position: absolute;
margin-left: 12px;
}
.appoint-form-title{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #212121;
padding-top:22px ;
padding-bottom: 0;
line-height: 20px
}
.choose-section {
background: #ffffff;
border-radius: 11px;
margin-top: 15px;
/deep/ .van-field__label{
color: #212121;
}
/deep/ .van-field__control:disabled{
color: #323233;
-webkit-text-fill-color: #323233;
}
.item {
color: #212121;
font-size: 14px;
display: flex;
height: 60px;
align-items: center;
position: relative;
.input-key {
font-weight: 300;
margin-left: 10px;
}
.input-value {
margin-left: 18px;
font-weight: 500;
overflow: visible;
}
.right {
position: absolute;
right: 10px;
top: 25px;
}
}
.height60 {
height: 30px;
}
.required {
position: relative;
}
.required::after {
position: absolute;
content: '*';
display: block;
left: -10px;
top: 0;
text-align: center;
color: rgba(255, 56, 56, 1);
}
}
.appoint-form-items{
// font-weight: 600;
/deep/ .van-field__label{
color: #999999;
}
/deep/ .van-field__control{
font-weight: 600;
}
/deep/ .van-field__control::placeholder{
font-weight: 450;
}
.appoint-form-placeholder{
font-weight: 450;
}
}
.appoint-form-value{
font-weight: 600;
}
.appoint-form-placeholder{
color: #999999;
}
.appoint-form-title::after{
display: none;
}
.content {
color: #02120f;
height: 350px;
overflow: hidden;
.title-wrap {
font-size: 18px;
font-weight: 500;
text-align: center;
padding-top: 18px;
position: fixed;
width: 100%;
left: 0;
background: #ffffff;
z-index: 1;
margin: 0 auto;
.search {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.search-input {
width: 303px;
height: 35px;
background: #f5f6f8;
border-radius: 13px;
text-align: left;
padding-left: 20px;
}
.title {
font-size: 18px;
font-weight: 500;
}
}
}
.pop-wrap {
width: calc(100% - 32px);
padding: 0 16px;
.tab-list {
position: relative;
border-bottom: 0.5px solid #e7e8e9;
height: 64px;
.hospitalActive-icon {
position: absolute;
width: 17px;
height: 17px;
top: 14px;
right: 0;
}
.list-1 {
font-weight: 500;
color: #212121;
font-size: 15px;
margin-top: 14px;
}
.list-2 {
font-size: 12px;
font-weight: 400;
color: #999999;
margin-top: 2px;
}
}
.hospitalActive {
}
}
.date-wrap {
height: 100%;
padding-top: 58px;
display: flex;
.left {
min-height: 100vh;
overflow: scroll;
width: 130px;
padding-bottom: 50px;
background: #f5f6f8;
.date-item {
height: 38px;
background: #f5f6f8;
line-height: 38px;
font-size: 16px;
font-weight: 500;
color: #02120f;
text-align: center;
}
.date-item-active {
color: #00bda5;
background: #ffffff;
}
}
.right {
position: absolute;
top: 58px;
left: 130px;
width: calc(100% - 130px);
.right-item {
padding-left: 22px;
width: 100%;
height: 41px;
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 41px;
}
.right-item-active {
color: #00bda5;
}
}
.date-item {
height: 38px;
}
}
.disabled {
background: #d9d9d9 !important;
}
// /deep/ .van-field__control::placeholder{
// color: #999999;
// }
.appoint-form-submit{
margin-top: 30px;
height: 40px;
font-weight: 600;
background: #D9D9D9;
border-radius: 20px;
border: 1px solid #D9D9D9;
}
.appoint-form-submit-active{
background: #00BDA5;
border: 1px solid #00BDA5;
}
.appoint-tel{
margin-top: 25px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 22px;
text-align: center;
.serve-time{
display: flex;
align-items: center;
justify-content: center;
height: 18px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 18px;
span{
width: 1px;
height: 12px;
margin: 0 12px;
background: #BBBBBB;
}
}
}
.item-radio{
padding: 15px 0px;
}
.hidden-border::after{
border: none;
}
.hidden-border{
padding-bottom: 0px;
}
}
::v-deep {
.address-wrap {
height: 590px;
#province {
height: 500px;
}
#city {
height: 500px;
}
#county {
height: 500px;
}
#town {
height: 500px;
}
.tip-header h3 {
font-weight: 700;
color: #212121;
}
.tip-header .submit-btn {
color: #00bda5 !important;
}
.address-select .show-address-header .item.active:after {
background-color: #00bda5;
}
.address-select .address-content ul li.active {
color: #00bda5;
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或