You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
8.7 KiB
340 lines
8.7 KiB
<template> |
|
<div class="pro_con"> |
|
<div class="pro_box" v-for="item in proArr" :key="item.time"> |
|
<div class="pro_top"> |
|
<div class="img_box"> |
|
<img src="~@/assets/image/time.png" alt="" /> |
|
</div> |
|
<div class="time_box"> |
|
<div class="time_text">{{item.apmDay}}</div> |
|
<div class="date_txt">{{item.period}} {{item.timeFrame}}</div> |
|
</div> |
|
</div> |
|
<div class="pro_bottom"> |
|
<div class="pro_left"> |
|
<div class="img_box"> |
|
<img src="~@/assets/image/pro.png" alt="" /> |
|
</div> |
|
<div class="pro_name">{{item.project}}</div> |
|
<div class="pro_pos">{{item.cuAddr}}</div> |
|
</div> |
|
<div class="pro_right"> |
|
<div class="cancel" @click="cancelButton(item)">取消预约</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="act_box"> |
|
<div class="act_btn" @click="confirm">确认</div> |
|
</div> |
|
<van-overlay :show="isShow"> |
|
<div class="wrapper" @click.stop v-show="isSuccess"> |
|
<div class="img_box"> |
|
<img src="~@/assets/image/succ.png" alt=""> |
|
</div> |
|
<div class="tips">预约成功</div> |
|
<div class="tip_txt"> |
|
<div>预约成功后若不能按时体检请提前取消</div> |
|
<div>未提前取消且未按期体检将被拉入黑名单</div> |
|
<div>被拉黑用户10日内不可再预约</div> |
|
</div> |
|
<div class="btn" @click="clickSucc">知道了</div> |
|
</div> |
|
<div class="wrapper" @click.stop v-show="!isSuccess"> |
|
<div class="img_box" > |
|
<img src="~@/assets/image/fail.png" alt=""> |
|
</div> |
|
<div class="tips">预约失败</div> |
|
<div class="tip_txt"> |
|
<div>{{failTips}}</div> |
|
</div> |
|
<div class="btn" @click="clickFail">知道了</div> |
|
</div> |
|
<div class="close_box" @click="clickClose"><img src="~@/assets/image/close.png" alt=""></div> |
|
</van-overlay> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import {postExam} from "@/api/examination"; |
|
export default { |
|
data() { |
|
return { |
|
proData:{}, |
|
proArr:[], |
|
isShow:false, |
|
isSuccess:false, |
|
userInfo:{}, |
|
failTips:'' |
|
}; |
|
}, |
|
mounted() { |
|
console.log(this.$route.params); |
|
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo')) |
|
console.log(this.userInfo) |
|
this.proData = this.$route.params; |
|
this.proData.selectArr.map(item =>{ |
|
this.proArr.push({ |
|
apmDay:this.proData.time, |
|
createDept:this.proData.createDept, |
|
project:item.name, |
|
cuAddr:item.posi, |
|
period:item.time.substr(0,2), |
|
timeFrame:item.time.substr(2), |
|
cupName:this.userInfo.name, |
|
cupPhone:this.userInfo.mobile, |
|
cupCardNo:this.userInfo.papersnumber |
|
}) |
|
}) |
|
console.log("proArr",this.proArr) |
|
}, |
|
methods: { |
|
cancelButton(val){ |
|
this.proArr = this.proArr.filter(item => item.name != val.name) |
|
if(this.proArr.length == 0){ |
|
this.$router.push({ |
|
name:'examination' |
|
}) |
|
} |
|
// lightAppJssdk.notification.alert ({ |
|
// message: "这是一个弹窗", |
|
// title: "提示",//可传空 |
|
// buttonName: "收到", |
|
// success:function(data){ |
|
// //onSuccess将在点击button之后回调 |
|
// /*回调*/ |
|
|
|
// }, |
|
// fail:function(data){ //错误返回 |
|
// } |
|
// }); |
|
}, |
|
|
|
confirm(){ |
|
console.log(this.proArr) |
|
postExam(JSON.stringify(this.proArr)).then(res =>{ |
|
console.log(res) |
|
if(res.code == 200){ |
|
this.isShow = true; |
|
this.isSuccess = true |
|
}else{ |
|
this.failTips = res.msg |
|
this.isShow = true; |
|
this.isSuccess = false |
|
} |
|
}) |
|
// if(this.proArr.length != 0){ |
|
// |
|
// } |
|
}, |
|
|
|
clickFail(){ |
|
this.$router.replace({ |
|
name:'examination', |
|
query:{ |
|
id:this.proData.createDept |
|
} |
|
}) |
|
}, |
|
clickSucc(){ |
|
this.$router.replace({ |
|
name:'MyExam', |
|
query:{ |
|
id:this.proData.createDept |
|
} |
|
}) |
|
}, |
|
clickClose(){ |
|
this.isShow = false |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.pro_con { |
|
width: 100%; |
|
height: 100%; |
|
|
|
.pro_box { |
|
width: 98%; |
|
margin-top: 0.2rem; |
|
background: #fff; |
|
margin: 0.4rem auto; |
|
margin-bottom: 0.7rem; |
|
|
|
|
|
.pro_top{ |
|
display: flex; |
|
padding-bottom: 0.26rem; |
|
border-bottom: 1px solid #EEEEEE; |
|
.img_box{ |
|
display: flex; |
|
align-items: center; |
|
margin-right: 0.24rem; |
|
img{ |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
} |
|
} |
|
.time_box{ |
|
.time_text{ |
|
width: 1.46rem; |
|
height: 0.32rem; |
|
text-align: center; |
|
background: #F6F6F6; |
|
border-radius: 0.08rem; |
|
line-height: 0.32rem; |
|
font-size: 0.24rem; |
|
color: #999999; |
|
} |
|
.date_txt{ |
|
font-size: 0.3rem; |
|
font-weight: bold; |
|
color: #333; |
|
line-height: 0.46rem; |
|
} |
|
} |
|
} |
|
|
|
.pro_bottom{ |
|
display: flex; |
|
justify-content: space-between; |
|
height: 0.6rem; |
|
margin-top: 0.24rem; |
|
|
|
.pro_left{ |
|
display: flex; |
|
|
|
|
|
.img_box{ |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
img{ |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
|
|
} |
|
} |
|
.pro_name{ |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
font-size: 0.3rem; |
|
color: #333; |
|
font-weight: bold; |
|
margin-left: 0.24rem; |
|
} |
|
.pro_pos{ |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
font-size: 0.24rem; |
|
color: #999; |
|
margin-left: 0.24rem; |
|
} |
|
} |
|
.pro_right{ |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
|
|
.cancel{ |
|
width: 1.5rem; |
|
height: 0.5rem; |
|
background: rgba(22, 119, 255,.1); |
|
border-radius: 0.26rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 0.24rem; |
|
color: #1677FF; |
|
margin-right: 0.24rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.act_box { |
|
position:absolute; |
|
left:0; |
|
right:0; |
|
bottom:0; |
|
padding: 0.24rem; |
|
background: #fff; |
|
.act_btn{ |
|
color: #FFFFFF; |
|
font-size: 0.3rem; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
line-height:0.96rem; |
|
text-align: center; |
|
background: #1677FF; |
|
border-radius: 0.08rem; |
|
} |
|
} |
|
|
|
.wrapper{ |
|
width: 5.98rem; |
|
height: 6.66rem; |
|
background: #FFFFFF; |
|
border-radius: 0.16rem; |
|
margin: 0 auto; |
|
margin-top: 2.76rem; |
|
|
|
.img_box{ |
|
display: flex; |
|
justify-content: center; |
|
img{ |
|
width: 1rem; |
|
height: 1rem; |
|
margin-top: 1.2rem; |
|
} |
|
} |
|
.tips{ |
|
display: flex; |
|
justify-content: center; |
|
font-size: 0.34rem; |
|
color:#000; |
|
font-weight: bold; |
|
margin: 0.56rem 0 0.2rem 0; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
|
} |
|
|
|
.tip_txt{ |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 0.24rem; |
|
color: #666; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
} |
|
.btn{ |
|
width: 3rem; |
|
height: 0.8rem; |
|
background: #1677FF; |
|
border-radius: 0.08rem; |
|
margin: 0 auto; |
|
margin-top: 0.6rem; |
|
font-size: 0.3rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
} |
|
} |
|
|
|
.close_box{ |
|
display: flex; |
|
justify-content: center; |
|
margin-top: 0.6rem; |
|
img{ |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
} |
|
} |
|
} |
|
</style>
|
|
|