提交 378ce6dc 编写于 作者: 张磊's avatar 张磊

Merge branch 'feature/zjx2' into 'develop'

auto commit

See merge request !13
//
import request from 'mn-template/plugins/http';
// *
// * 获取省列表
// *
export const getProvinceList = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: '/basic-data/position/provinces'
});
};
/**
* 获取市列表
*/
export const getCityList = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: '/basic-data/position/cities'
});
};
/**
* 获取县/区列表
*/
export const getCountyList = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: '/basic-data/position/counties'
});
};
/**
* 获取乡镇列表
*/
export const getTownList = async params => {
return request({
method: 'get',
params: params,
withCredentials: true,
url: '/basic-data/position/towns'
});
};
<template>
<van-popup
v-model="show"
v-shwo="show"
position="bottom"
round
@close="close"
>
<van-picker
ref="picker"
:columns="columns"
show-toolbar
:loading="loading"
value-key="name"
@confirm="confirm"
@change="change"
@close="close"
@cancel="close"
>
<template #title>
<div class="picker-area-title">
选择省市区
</div>
</template>
<template #confirm>
<div class="picker-area-buttons">
<van-icon
name="cross"
size="20"
/>
</div>
</template>
<template #cancel>
<div class="picker-area-buttons" />
</template>
</van-picker>
</van-popup>
</template>
<script>
import {getProvinceList, getCityList, getCountyList} from './api';
export default {
props: {
show: {
type: Boolean,
default:() => false
},
locationAreaCode: {
type: Array,
default:() => []
}
},
data() {
return {
columns: [
],
provinceList: [],
cityList: [],
countyList:[],
loading: true,
};
},
watch: {
locationAreaCode:{
async handler(nv, ov) {
console.log('locationAreaCode', nv, ov);
this.provinceList = await this.getProvinceList();
this.cityList = await this.getCityList(nv[0]);
this.countyList = await this.getCountyList(nv[1]);
const provinceIndex = this.provinceList.findIndex(ele => ele.id === nv[0]);
const cityIndex = this.cityList.findIndex(ele => ele.id === nv[1]);
const countyIndex = this.countyList.findIndex(ele => ele.id === nv[2]);
this.columns = [{ values: this.provinceList, defaultIndex:provinceIndex}, { values: this.cityList, defaultIndex:cityIndex}, { values: this.countyList, defaultIndex:countyIndex }];
console.log('locationAreaCode', this.$refs.picker);
},
immediate:true
},
},
created() {
},
methods: {
// 初始化 省市县信息
async initData() {
this.provinceList = await this.getProvinceList();
this.cityList = await this.getCityList(this.provinceList[0].id);
this.countyList = await this.getCountyList(this.cityList[0].id);
this.columns = [{ values: this.provinceList }, { values: this.cityList }, { values: this.countyList }];
},
// 获取省列表
getProvinceList() {
return new Promise((resolve, rejects) => {
getProvinceList().then(res => {
this.hideLoading();
const data = res.data.provinceList.map(ele => {
return {
name: ele.provinceName,
id:ele.provinceId
};
});
resolve(data);
}).catch(err => {
rejects(err);
});
}).finally(this.hideLoading);
},
// 获取省列表下市区
getCityList(provinceId) {
return new Promise((resolve, rejects) => {
getCityList({ provinceId }).then(res => {
this.hideLoading();
const data = res.data.cityList.map(ele => {
return {
name: ele.cityName,
id:ele.cityId
};
});
resolve(data);
}).catch(err => {
rejects(err);
});
}).finally(this.hideLoading);
},
// 获取市区县区
getCountyList(cityId) {
return new Promise((resolve, rejects) => {
this.hideLoading();
getCountyList({ cityId }).then(res => {
const data = res.data.countyList.map(ele => {
return {
name: ele.countyName,
id:ele.countyId
};
});
resolve(data);
}).catch(err => {
rejects(err);
});
}).finally(this.hideLoading);
},
// hideloading loading 琐住选择区域,防止重复操作
hideLoading() {
setTimeout(() => {
this.loading = false;
}, 300);
},
// 确定按钮
confirm(value, valueIndex) {
console.log(value, valueIndex);
this.$emit('confirm', value);
this.$emit('close', 'showArea');
},
// 滑动选择的change
async change(picker, columnsIndex, currentChangeIndex) {
console.log(picker, columnsIndex, currentChangeIndex);
switch (currentChangeIndex) {
case 0:
this.loading = true;
this.cityList = await this.getCityList(columnsIndex[currentChangeIndex].id);
this.$refs.picker.setColumnValues(currentChangeIndex + 1, this.cityList);
this.$refs.picker.setColumnIndex(currentChangeIndex + 1, 0);
this.countyList = await this.getCountyList(this.cityList[0].id);
this.$refs.picker.setColumnValues(currentChangeIndex + 2, this.countyList);
this.$refs.picker.setColumnIndex(currentChangeIndex + 2, 0);
this.hideLoading();
break;
case 1:
this.loading = true;
this.countyList = await this.getCountyList(columnsIndex[currentChangeIndex].id);
this.$refs.picker.setColumnValues(currentChangeIndex + 1, this.countyList);
this.hideLoading();
break;
case 2:
this.hideLoading();
break;
default:
this.hideLoading();
break;
}
},
// 关闭
close() {
this.$emit('close', 'showArea');
}
}
};
</script>
<style lang="scss" scoped>
.picker-area-title{
height: 18px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #02120F;
line-height: 18px;
}
.picker-area-buttons{
width: 30px;
height: 30px;
display: flex;
justify-items: center;
align-items: center;
color: #999999;
}
</style>
......@@ -44,7 +44,7 @@
>
<div
class="list-item-name"
v-html="$commonJs.highLight(item.hospitalName, searchValue)"
v-html="highLight(item.hospitalName, searchValue)"
/>
<!-- <div class="list-item-name">
{{ item.hospitalName }}
......@@ -97,7 +97,7 @@ export default {
finished: false,
pageNum: 0,
pageSize: 50,
searchValue:''
searchValue:'',
};
},
mounted() {
......
......@@ -53,6 +53,11 @@ input[type=search]::-webkit-search-cancel-button{
.van-picker__confirm {
color: #15A4AC;
}
// 设计稿默认pickercolumn__item 选中字体样式
.van-picker-column__item--selected .van-ellipsis{
font-weight: 550;
}
.van-picker__title {
font-size:13px;
font-weight:400;
......
......@@ -24,26 +24,40 @@
class="appoint-form-title"
/>
<van-field
v-model="username"
v-model="dectionForm.username"
label="受检人"
class="appoint-form-items"
placeholder="请输入受检人姓名"
:rules="[{ required: true, message: '请输入受检人姓名' }]"
:rules="[{ required: true, message: '请输入受检人姓名' },{
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
message: '请输入正确格式',
},
{
pattern: /^.{2,20}$/,
message: '收货人姓名请填写2-20位',
},]"
/>
<van-field
v-model="username"
v-model="dectionForm.phoneNum"
class="appoint-form-items"
label="手机号"
placeholder="请输入受检人手机号"
:rules="[{ required: true, message: '请输入受检人手机号' }]"
:rules="[{ required: true, message: '请输入受检人手机号' },
{
pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
message: '手机号格式填写有误',
},]"
/>
<van-field
v-model="password"
v-model="dectionForm.idCard"
class="appoint-form-items"
type="password"
label="身份证号"
placeholder="请输入受检人真实身份证号"
:rules="[{ required: true, message: '请输入受检人真实身份证号' }]"
:rules="[{ required: true, message: '请输入受检人真实身份证号' },
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '手机号格式填写有误',
},]"
/>
<van-field
label="检测地点"
......@@ -59,7 +73,23 @@
placeholder="请选择省市区"
:rules="[{ required: true, message: '请选择省市区' }]"
@click="showAreaFn"
/>
>
<template #input>
<div
v-if="!showAreaLabel"
class="appoint-form-placeholder"
>
请选择省市区
</div>
<div
v-else
class="appoint-form-value"
>
{{ showAreaLabel }}
</div>
</template>
</van-field>
<van-field
v-model="dectionForm.hospitalName"
class="appoint-form-items"
......@@ -113,7 +143,9 @@
round
block
type="info"
class="appoint-form-submit appoint-form-submit-active"
:disabled="!checkValue"
class="appoint-form-submit "
:class="checkValue ? 'appoint-form-submit-active':''"
>
提交
</van-button>
......@@ -122,16 +154,18 @@
:show="showselectHospital"
:hospital-id="hospitalId"
@change="selectHospital"
@close="close"
@close="closePopup"
/>
<SelectTime
:show="showSelectTime"
@change="selectTimes"
@close="close"
@close="closePopup"
/>
<PicaArea
v-model="showArea"
<PickArea
:location-area-code="locationAreaCode"
:show="showArea"
@confirm="confirm"
@close="closePopup"
/>
</div>
</template>
......@@ -139,15 +173,18 @@
<script>
import SelectHospital from '@/components/selectHospital/index.vue';
import SelectTime from '@/components/selectTime/index.vue';
import PickArea from '@/components/pickArea/index.vue';
export default {
components: {
SelectHospital,
SelectTime,
PickArea
},
data() {
return {
dectionForm: {
detectName: '癌症甲基化早筛检测',
username:'',
place: '',
time: '',
currentDate: '',
......@@ -156,6 +193,7 @@ export default {
hospitalName:'',
goodsId: '',
},
showAreaLabel:'',
showselectHospital:false,
showArea:false,
reportShow: false,
......@@ -177,7 +215,8 @@ export default {
showSelectTime:false,
isSelf: false,
spEquityCode: '',
hospitalId:''
hospitalId: '',
locationAreaCode:[330, 330400000000, 330424000000]
};
},
computed: {
......@@ -191,6 +230,9 @@ export default {
},
},
mounted() {
setTimeout(() => {
this.locationAreaCode = [330, 330400000000, 330424000000];
}, 3000);
},
methods: {
choose() {},
......@@ -200,6 +242,8 @@ export default {
chooseDate() {},
selectTimes(times) {
console.log(times);
this.dectionForm.time = times;
this.closePopup('showSelectTime');
},
getTimes() {
this.timsArray = [];
......@@ -223,7 +267,7 @@ export default {
console.log(name);
this[name] = true;
},
close(name) {
closePopup(name) {
this[name] = false;
},
cancelSearch() {},
......@@ -231,8 +275,10 @@ export default {
onConfirm() {},
getDetailByUnionId() { },
confirm() {
confirm(values) {
console.log('confirm', values);
this.showAreaLabel = values.map(ele => ele.name).join('');
this.showArea = false;
},
selectHospital({hospitalId, hospitalName}) {
this.hospitalId = hospitalId;
......
......@@ -117,11 +117,6 @@
>
重新预约
</div>
<official-account
v-if="!hasAccount"
class="detail-fixed-account"
style=""
/>
</div>
</template>
......
<template>
<div />
</template>
<script>
export default {
};
</script>
<style>
</style>
......@@ -104,7 +104,6 @@
>{{ protocolName }}</span>
</div>
</div>
<div class="submit-button-top">
<div
class="submit-button"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册