Skip to content

L
ln-medicalAppointment-pc
Commit 84b25dc8 authored by huangyecong's avatar huangyecong
Browse files
Options

交互逻辑优化

parent 37f61644
Show whitespace changes
Inline Side-by-side
Showing with 400 additions and 101 deletions
package-lock.json
View file @ 84b25dc8
......@@ -1794,6 +1794,51 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646697260&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"ssri": {
"version": "8.0.1",
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz",
......@@ -1802,6 +1847,28 @@
"requires": {
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1637259119530&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.3.tgz?cache=0&sync_timestamp=1636034706501&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.8.3.tgz",
"integrity": "sha1-1D5nXe9bqTRdbH8FkUwT2GGZcIc=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -11705,75 +11772,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.3.tgz",
"integrity": "sha1-1D5nXe9bqTRdbH8FkUwT2GGZcIc=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646655305&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-ref": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",
......
src/router/index.js
View file @ 84b25dc8
......@@ -27,6 +27,14 @@ const routes = [
component: () =>
import(/* webpackChunkName: "Index" */ "../views/flow"),
},
{
// 预约中
path: "/detail",
name: "Detail",
component: () =>
import(/* webpackChunkName: "Index" */ "../views/flow/detail.vue"),
},
],
},
{
......
src/views/flow/components/detail.vue → src/views/flow/components/appointmentDetail.vue
View file @ 84b25dc8
......@@ -34,7 +34,7 @@
<script>
export default {
name: "componentName",
name: "appointmentDetail",
components: {},
data() {
......
src/views/flow/components/combo.vue
View file @ 84b25dc8
......@@ -91,7 +91,8 @@ export default {
created(){
//获取产品信息-可选体检套餐
this.reservedInfo = JSON.parse(window.localStorage.getItem('reservedInfo'))
this.chooseId = JSON.parse(window.localStorage.getItem('chooseId'))
this.chooseId = JSON.parse(window.localStorage.getItem('chooseList'))[0].id
console.log('1111chooseId==',this.chooseId)
},
methods: {
onChange(checkedValues) {
......
src/views/flow/components/selectInstitution.vue
View file @ 84b25dc8
......@@ -330,9 +330,17 @@ export default {
api.addAppointment(query).then((res) => {
if (res.returnCode === '0000') {
console.log('立即预约=', res)
_this.$message.error('预约成功')
_this.$message.success('预约成功')
// 提示预约成功,之后跳转到预约详情页面
setTimeout(() => {
// 需要获取用户id
this.$router.push({
name: 'Detail',
query: {
id: _this.id,
},
})
}, 1000)
} else {
_this.$message.error(res.returnMsg)
}
......
src/views/flow/detail.vue 0 → 100644
View file @ 84b25dc8
<template>
<div class="flow">
<div class="content">
<div class="left" v-if="customerInfo !== ''">
<div class="title"><span class="point"></span>客户信息</div>
<div class="info">
<div class="item">
<span class="label">姓名：</span>
<a-input :value="customerInfo.name" disabled></a-input>
</div>
<div class="item">
<span class="label">性别：</span>
<a-input :value="customerInfo.sex == 'M' ? '女' : '男'" disabled />
</div>
<div class="item">
<span class="label">婚姻状况</span>
<a-radio-group v-model="customerInfo.maritalStatus" disabled>
<a-radio value="01">未婚 </a-radio>
<a-radio value="02">已婚</a-radio>
</a-radio-group>
</div>
<div class="item">
<span class="label">身份证：</span>
<a-input :value="customerInfo.idNo" disabled />
</div>
<div class="item">
<span class="label">手机号码：</span>
<a-input :value="customerInfo.phone" disabled />
</div>
<div class="item">
<span class="label">出生日期：</span>
<a-input :value="customerInfo.birthDate" disabled />
</div>
</div>
</div>
<div class="right">
<!-- 预约详情 -->
<div class="detail">
<div class="title"><span class="point"></span>预约详情</div>
<ul class="items" v-for="item in appointmentList" :key="item.id">
<li>
<div class="label">已选套餐：</div>
<div class="detail_content">
{{item.servicepackageName}}
</div>
</li>
<li>
<div class="label">已选体检中心：</div>
<div class="detail_content">{{item.checkUnitName}}</div>
</li>
<li>
<div class="label">已选体检中心地址：</div>
<div class="detail_content">{{item.shopAddress}}</div>
</li>
<li>
<div class="label">预约日期:</div>
<div class="detail_content">{{item.serviceAppDate}}</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" @click="goIndexPage"> 回首页 </a-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import AppointmentDetail from './components/appointmentDetail'
import api from '@/api/customer'
import { log } from 'util'
export default {
name: 'Detail',
components: {
// AppointmentDetail,
},
data() {
return {
id: '', //客户id
customerInfo: {
name: '',
sex: '',
idNo: '',
phone: '',
birthDate: '',
maritalStatus: '',
}, //客户信息
tips: require('../../assets/imgs/detail/tips.png'),
appointmentList: [], //已预约列表
}
},
created() {
const { id } = this.$route.query
this.id = id
this.getCustomerDetail()//获取客户信息
this.getAppointmentList()//获取客户的预约详情
},
methods: {
// 获取客户信息
getCustomerDetail() {
api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') {
this.customerInfo = res.content
console.table('客户信息customerInfo=', this.customerInfo)
} else {
this.$message.error(res.returnMsg)
}
})
},
// 回首页
goIndexPage() {
this.$router.push({
name: 'Index',
query: {
id: this.id, //客户id
},
})
},
// 获取预约详情
getAppointmentList() {
api.getAppointmentList({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') {
console.log('111111111111获取已预约列表==', res.content)
this.appointmentList = res.content
}
})
},
},
}
</script>
<style lang="less" scoped>
.flow {
background: #fafafa;
min-height: calc(100vh - 300px);
.btn {
text-align: center;
position: relative;
left: 360px;
top: -72px;
}
.content {
padding-top: 20px;
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
display: flex;
justify-content: center;
.left {
max-height: 480px;
.reset {
text-align: center;
margin-top: 25px;
}
.info {
margin-top: 24px;
::v-deep .ant-input {
border: none;
background-color: #fafafa;
height: 42px;
}
.item {
display: flex;
margin-top: 14px;
.label {
display: inline-block;
width: 120px;
line-height: 42px;
font-size: 14px;
color: #aaaaaa;
padding-left: 12px;
}
}
}
}
.left,
.right {
background: white;
box-shadow: 0px 7px 14px 1px rgba(223, 223, 219, 0.18);
border-radius: 8px;
padding: 19px 24px 30px 14px;
margin-left: 24px;
}
.right {
padding-left: 24px;
}
.right {
margin-left: 30px;
}
}
}
.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: 14px;
color: white;
border: none;
}
}
}
.tips {
padding-left: 8px;
img {
position: relative;
top: -1px;
}
.desc {
color: #cccccc;
font-size: 14px;
margin-left: 4px;
}
}
.items {
margin-top: 21px;
padding-left: 10px;
li {
margin-top: 15px;
}
.label {
font-size: 14px;
color: #aaaaaa;
}
.detail_content {
width: 700px;
color: #333333;
font-size: 14px;
line-height: 58px;
background: #fafafa;
margin-top: 8px;
border-radius: 2px;
position: relative;
left: -10px;
padding-left: 10px;
}
}
}
</style>
src/views/flow/index.vue
View file @ 84b25dc8
......@@ -10,10 +10,7 @@
</div>
<div class="item">
<span class="label">性别：</span>
<a-input
:value="customerInfo.sex == 'M' ? '女' : '男'"
disabled
/>
<a-input :value="customerInfo.sex == 'M' ? '女' : '男'" disabled />
</div>
<div class="item">
<span class="label">婚姻状况</span>
......@@ -41,13 +38,13 @@
</div>
<div class="right">
<!-- <Combos :id="id" v-if="step1"/>
<SelectInstitution :id="id" v-if="step2"/> -->
<Detail />
<Combos :id="id" v-if="step1" />
<SelectInstitution :id="id" v-if="step2" />
</div>
</div>
<div class="btn">
<a-button type="primary" @click="nextStep" v-if="next">下一步</a-button>
<a-button type="primary" @click="previousStep" v-if="previous">上一步</a-button>
</div>
</div>
</template>
......@@ -55,19 +52,18 @@
<script>
import SelectInstitution from './components/selectInstitution.vue'
import Combos from './components/combo.vue'
import Detail from './components/detail.vue'
import api from '@/api/customer'
export default {
name: 'componentName',
components: {
Combos,
Detail,
SelectInstitution,
},
props: {},
data() {
return {
next: false,
previous:false,
id: '', //客户id
customerInfo: {
name: '',
......@@ -75,33 +71,38 @@ export default {
idNo: '',
phone: '',
birthDate: '',
maritalStatus:''
maritalStatus: '',
}, //客户信息
step1:true,
step2:false,
step3:false
step1: true,
step2: false,
}
},
created() {
const { id } = this.$route.query
this.id = id
this.getCustomerDetail() //客户信息
},
methods: {
nextStep() {
this.next = true
if(this.next){
this.previous = true
this.next = false
this.step1 = false
this.step2 = true
}
},
previousStep(){
this.next = true
this.previous = false
this.step1 = true
this.step2 = false
},
// 获取客户信息
getCustomerDetail() {
api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
if (res.returnCode == '0000') {
const {name,sex,idNo,phone,birthDate,maritalStatus} = res.content
this.customerInfo={name,sex,idNo,phone,birthDate,maritalStatus}
this.customerInfo = res.content
console.table('客户信息customerInfo=', this.customerInfo)
} else {
this.$message.error(res.returnMsg)
......@@ -138,7 +139,7 @@ export default {
text-align: center;
position: relative;
left: 360px;
top: 20px;
top: -72px;
}
.content {
padding-top: 20px;
......
src/views/index/components/item.vue
View file @ 84b25dc8
......@@ -2,7 +2,7 @@
<div class="item">
<div class="left">
<div class="title">
<span class="point"></span> {{ item.servicepackageName }}-{{ item.id }}
<span class="point"></span> {{ item.servicepackageName }}
</div>
<div class="detail" @click="$router.push(item.detailUrl)">
<img :src="eyes" alt="" />点击查看体检套餐详情
......@@ -13,6 +13,7 @@
<a-button
v-if="listType == 2"
style="background: #ffcc00; color: white; border: none; width: 86px"
@click="handleReadDetail"
>查看</a-button
>
<a-button
......@@ -21,7 +22,9 @@
@click="handleSubmit"
>立即预约</a-button
>
<div class="date">有效期至：{{ item.validityEnd }}</div>
<div class="date">
有效期至：{{ listType == 1 ? item.validityEnd : item.customerAppDate }}
</div>
</div>
</div>
</template>
......@@ -64,6 +67,15 @@ export default {
},
})
},
// 查看-预约详情
handleReadDetail() {
this.$router.push({
name: 'Detail',
query: {
id: this.id,
},
})
},
},
}
</script>
......
src/views/index/index.vue
View file @ 84b25dc8
......@@ -2,14 +2,14 @@
<div class="index">
<div class="appointment">
<div class="type"><span class="point"></span> 待预约的服务</div>
<div v-if="packageList.length == 0">暂无可预约体检</div>
<div v-if="packageList.length == 0" class="point_none">暂无可预约体检</div>
<div class="item-container" v-else>
<Item v-for="(item, index) in packageList" :item="item" :key="index" listType='1' :id="id"/>
</div>
</div>
<div class="appointmented">
<div class="type"><span class="point"></span>已预约的服务</div>
<div v-if="appointmentList.length == 0">暂无已预约体检</div>
<div v-if="appointmentList.length == 0" class="point_none">暂无已预约体检</div>
<div class="item-container" v-else>
<Item v-for="(item, index) in appointmentList" :item="item" :key="index" listType='2' :id="id"/>
</div>
......@@ -139,9 +139,10 @@ export default {
if (res.returnCode == '0000') {
console.log('获取已预约列表==', res.content)
this.appointmentList = res.content
} else {
this.$message.error(res.returnMsg)
}
// else {
// this.$message.error(res.returnMsg)
// }
})
},
},
......@@ -191,4 +192,8 @@ export default {
}
}
}
.point_none{
text-align: center;
padding: 40px;
}
</style>
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