Skip to content

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

Merge branch 'feature/zjx' into 'develop' 

add page

See merge request !3
上级 930030ce 688c57f1
显示空白字符变更
内嵌 并排
正在显示 包含 171 行增加 和 215 行删除
package.json
浏览文件 @ f9c98787
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"vant": "^2.8.4", "vant": "^2.8.4",
"vconsole": "^3.3.4", "vconsole": "^3.3.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"pica-area": "^1.2.1",
"vue-fragment": "^1.5.1", "vue-fragment": "^1.5.1",
"vue-router": "^3.3.1", "vue-router": "^3.3.1",
"vuescroll": "^4.15.1", "vuescroll": "^4.15.1",
......
src/main.js
浏览文件 @ f9c98787
import { router, store, vueApp } from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto'; import { router, store, vueApp } from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
import '@/router'; import '@/router';
import { PicaArea } from 'pica-area';
console.log('router, store, vueApp: ', router, store, vueApp); console.log('router, store, vueApp: ', router, store, vueApp);
const { Vue } = window; const { Vue } = window;
import Loading from '@/components/loading/loading.js'; import Loading from '@/components/loading/loading.js';
Vue.use(Loading); Vue.use(Loading);
Vue.use(PicaArea);
// 禁用双指放大 // 禁用双指放大
var lastTouchEnd = 0; var lastTouchEnd = 0;
document.addEventListener('touchstart', function (event) { document.addEventListener('touchstart', function (event) {
......
src/views/appoint/index.vue
浏览文件 @ f9c98787
<template> <template>
<div class="insurance-detection-appoint"> <div class="insurance-detection-appoint">
<img
class="bg-img"
src=""
>
<div class="wrap"> <div class="wrap">
<div class="title-1"> <div class="title-1">
检测预约 检测预约
...@@ -12,226 +8,112 @@ ...@@ -12,226 +8,112 @@
及时接受检测结果检测报告 及时接受检测结果检测报告
</div> </div>
<div class="choose-section"> <div class="choose-section">
<div class="item"> <van-form @submit="onSubmit">
<div class="input-key required"> <van-field
检测项目 name="checkboxGroup"
</div> label="检测项目"
<div class="input-value"> required
{{ dectionForm.detectName }}
</div>
</div>
<div class="item height60">
<div class="input-key required">
检测地点
</div>
<div class="input-value" />
</div>
<div
class="item"
@click="choose('province')"
>
<div class="input-key">
省市区
</div>
<input
v-model="selectPicker.label"
disabled
class="input-value"
placeholder-style="color:#999999;font-weight:300"
placeholder="请选择检省市区"
> >
<!-- <u-icon <template #input>
class="right" {{ dectionForm.detectName }}
style="margin-left: 8rpx" </template>
name="arrow-right" </van-field>
color="#999999" <van-field
size="22" label="受检人信息"
/> --> required
</div> class="appoint-form-title"
<div />
class="item" <van-field
@click="choose('place')" v-model="username"
> label="受检人"
<div class="input-key"> class="appoint-form-items"
检测地点 placeholder="请输入受检人姓名"
</div> :rules="[{ required: true, message: '请输入受检人姓名' }]"
<input />
v-model="dectionForm.place" <van-field
v-model="username"
class="appoint-form-items"
label="手机号"
placeholder="请输入受检人手机号"
:rules="[{ required: true, message: '请输入受检人手机号' }]"
/>
<van-field
v-model="password"
class="appoint-form-items"
type="password"
label="身份证号"
placeholder="请输入受检人真实身份证号"
:rules="[{ required: true, message: '请输入受检人真实身份证号' }]"
/>
<van-field
label="检测地点"
required
class="appoint-form-title"
/>
<van-field
v-model="username"
class="appoint-form-items"
label="省市区"
disabled disabled
class="input-value" right-icon="arrow"
placeholder-style="color:#999999;font-weight:300" placeholder="请选择省市区"
:rules="[{ required: true, message: '请选择省市区' }]"
@click="showAreaFn"
/>
<van-field
v-model="password"
class="appoint-form-items"
type="password"
label="检测地点"
right-icon="arrow"
placeholder="请选择检测机构" placeholder="请选择检测机构"
:rules="[{ required: true, message: '请选择检测机构' }]"
/>
<van-field
name="checkboxGroup"
label="预约时间"
required
right-icon="arrow"
> >
<!-- <u-icon <template #input>
class="right"
style="margin-left: 8rpx"
name="arrow-right"
color="#999999"
size="22"
/> -->
</div>
<div <div
class="item" v-if="false"
@click="choose('time')" class="appoint-form-placeholder"
> >
<div class="input-key required"> 请选择预约时间
预约时间
</div>
<input
v-model="dectionForm.time"
disabled
class="input-value"
placeholder-style="color:#999999;font-weight:300"
placeholder="请选择检测时间"
>
<!-- <u-icon
class="right"
style="margin-left: 8rpx"
name="arrow-right"
color="#999999"
size="22"
/> -->
</div> </div>
<div class="appoint-form-value">
{{ dectionForm.detectName }}
</div> </div>
</template>
</van-field>
</van-form>
</div> </div>
<div <van-button
class="sub-btn" round
:class="checkValue && isSelf ? '' : 'disabled'" block
@click="submit" type="info"
class="appoint-form-submit appoint-form-submit-active"
> >
提交 提交
</van-button>
</div> </div>
<!-- <u-popup <PicaArea
v-model="reportShow" v-model="showArea"
mode="bottom" @confirm="confirm"
:height="popType == 'place' ? '80%' : '700'"
closeable
border-radius="20"
>
<div class="content">
<div class="title-wrap">
<div class="title">
{{ popType == "place" ? "选择检测地点" : "预约时间" }}
</div>
<div
v-if="popType == 'place'"
class="search"
>
<input
v-model="searchPlace"
class="search-input"
placeholder-style="color:#999999;font-weight:300"
placeholder="请输入检测地点"
@input="inputChange"
>
<div @click="cancelSearch">
取消
</div>
</div>
</div>
<scroll-div
v-if="popType == 'place'"
class="pop-wrap"
:scroll-y="false"
style="height: 100%; padding-top: 140rpx"
:show-scrollbar="false"
:enhanced="true"
>
<div
v-for="(info, index) in placeList"
v-if="placeList.length > 0"
:key="index"
:class="dectionForm.hospitalId === info.hospitalId ? 'hospitalActive' : ''"
class="tab-list"
@click="chooseHospital(info)"
>
<div class="list-1">
{{ info.hospitalName }}
</div>
<div class="list-2">
{{ info.hospitalAddress }}
</div>
<image
v-if="dectionForm.hospitalId === info.hospitalId"
class="hospitalActive-icon"
src="https://files.yunqueyi.com/image/png/common/2022081612011851.png"
/> />
</div> </div>
<div
v-if="placeList.length == 0"
class="no-content"
>
<div class="no-content-img">
<image src="https://files.yunqueyi.com/image/png/common/20221226163921746.png" />
</div>
<div class="mt40">
暂未搜索到相关检测点
</div>
</div>
</scroll-div>
<div
v-else
class="date-wrap"
>
<scroll-div
class="left"
:scroll-y="true"
:show-scrollbar="false"
:enhanced="true"
>
<div
v-for="item in timsArray"
:key="item"
class="date-item"
:class="item === dectionForm.currentDate ? 'date-item-active' : ''"
@click="chooseDate(item)"
>
{{ item }}
</div>
</scroll-div>
<div class="right">
<div
class="right-item"
:class="dectionForm.timeBucket === timeBucket['am'] ? 'right-item-active' : ''"
@click="chooseTime('am')"
>
上午
</div>
<div
class="right-item"
:class="dectionForm.timeBucket === timeBucket['pm'] ? 'right-item-active' : ''"
@click="chooseTime('pm')"
>
下午
</div>
</div>
</div>
</div>
</u-popup> -->
<!-- <pickAddressModel
v-if="isShowAddress"
:default-pick="selectPicker"
:need-town="false"
:sp-equity-code="spEquityCode"
@onConfirm="onConfirm"
@onCancel="onCancel"
/> -->
</div>
</template> </template>
<script> <script>
// import { getMeixinHospitalList, appointment, throttle, getDetailByUnionId } from './api';
// import pickAddressModel from '@/components/pick-address-model/modal.vue';
// let that;
export default { export default {
components: { components: {
// pickAddressModel,
}, },
data() { data() {
return { return {
dectionForm: { dectionForm: {
detectName: '', detectName: '癌症甲基化早筛检测',
place: '', place: '',
time: '', time: '',
currentDate: '', currentDate: '',
...@@ -239,6 +121,7 @@ export default { ...@@ -239,6 +121,7 @@ export default {
hospitalId: '', hospitalId: '',
goodsId: '', goodsId: '',
}, },
showArea:false,
reportShow: false, reportShow: false,
placeList: [], placeList: [],
popType: '', popType: '',
...@@ -300,7 +183,13 @@ export default { ...@@ -300,7 +183,13 @@ export default {
selectAddress() {}, selectAddress() {},
onConfirm() {}, onConfirm() {},
onCancel() {}, onCancel() {},
getDetailByUnionId() {}, getDetailByUnionId() { },
confirm() {
},
showAreaFn() {
this.showArea = true;
}
}, },
}; };
</script> </script>
...@@ -308,11 +197,14 @@ export default { ...@@ -308,11 +197,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.insurance-detection-appoint { .insurance-detection-appoint {
width: 100%; width: 100%;
height: 100vh;
overflow: auto;
box-sizing: border-box; box-sizing: border-box;
color: #ffffff; color: #ffffff;
background: url('https://files.yunqueyi.com/image/png/common/20221213160647748.png') background: url('https://files.yunqueyi.com/image/png/common/20221213160647748.png')
no-repeat top left; no-repeat top left;
background-size: 100% 281px; background-size: 100% 281px;
.bg-img { .bg-img {
width: 100%; width: 100%;
height: 281px; height: 281px;
...@@ -333,12 +225,25 @@ export default { ...@@ -333,12 +225,25 @@ export default {
margin-top: 4rpx; margin-top: 4rpx;
font-size: 24rpx; font-size: 24rpx;
} }
.appoint-form-title{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #212121;
padding-top:22px ;
padding-bottom: 0;
line-height: 20px
}
.choose-section { .choose-section {
padding: 0 12px; padding: 10px 12px;
background: #ffffff; background: #ffffff;
border-top-left-radius: 22px; border-radius: 11px;
border-top-right-radius: 22px;
margin-top: 15px; margin-top: 15px;
/deep/ .van-field__label{
color: #212121;
}
.item { .item {
color: #212121; color: #212121;
font-size: 14px; font-size: 14px;
...@@ -377,6 +282,15 @@ export default { ...@@ -377,6 +282,15 @@ export default {
color: rgba(255, 56, 56, 1); color: rgba(255, 56, 56, 1);
} }
} }
.appoint-form-items{
/deep/ .van-field__label{
color: #999999;
}
}
.appoint-form-title::after{
display: none;
}
// .sub-btn { // .sub-btn {
// background: #00bda5; // background: #00bda5;
// font-size:16px; // font-size:16px;
...@@ -526,7 +440,47 @@ export default { ...@@ -526,7 +440,47 @@ export default {
font-size: 36rpx; font-size: 36rpx;
} }
} }
.appoint-form-submit{
margin-top: 30px;
height: 40px;
background: #D9D9D9;
border-radius: 20px;
border: 1px solid #D9D9D9;
}
.appoint-form-submit-active{
background: #00BDA5;
}
} }
::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> </style>
<style> <style>
.mpvue-picker-div-show { .mpvue-picker-div-show {
......
vue.config.js
浏览文件 @ f9c98787
module.exports = { module.exports = {
transpileDependencies: [ transpileDependencies: [
/[/\\]node_modules[/\\][@\\]pica-cli[/\\]vue-cli-plugin-pica-cli-plugin[/\\]core/, /[/\\]node_modules[/\\][@\\]pica-cli[/\\]vue-cli-plugin-pica-cli-plugin[/\\]core/,
/[/\\]node_modules[/\\][@\\]pica-kit[/\\]page-model/ /[/\\]node_modules[/\\][@\\]pica-kit[/\\]page-model/,
/[/\\]node_modules[/\\][@\\]pica-kit[/\\]page-area/
], ],
productionSourceMap: false, productionSourceMap: false,
pluginOptions: { pluginOptions: {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或