parent
1475ce4e60
commit
94478a4ef3
3 changed files with 316 additions and 286 deletions
@ -1,340 +1,369 @@ |
|||||||
<template> |
<template> |
||||||
<div class="pro_con"> |
<div class="pro_con"> |
||||||
<div class="pro_box" v-for="item in proArr" :key="item.time"> |
<div class="pro_box" v-for="item in proArr" :key="item.time"> |
||||||
<div class="pro_top"> |
<div class="pro_top"> |
||||||
<div class="img_box"> |
<div class="img_box"> |
||||||
<img src="~@/assets/image/time.png" alt="" /> |
<img src="~@/assets/image/time.png" alt="" /> |
||||||
</div> |
</div> |
||||||
<div class="time_box"> |
<div class="time_box"> |
||||||
<div class="time_text">{{item.apmDay}}</div> |
<div class="time_text">{{ item.apmDay }}</div> |
||||||
<div class="date_txt">{{item.period}} {{item.timeFrame}}</div> |
<div class="date_txt">{{ item.period }} {{ item.timeFrame }}</div> |
||||||
</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> |
||||||
<div class="tips">预约成功</div> |
<div class="pro_bottom"> |
||||||
<div class="tip_txt"> |
<div class="pro_left"> |
||||||
<div>预约成功后若不能按时体检请提前取消</div> |
<div class="img_box"> |
||||||
<div>未提前取消且未按期体检将被拉入黑名单</div> |
<img src="~@/assets/image/pro.png" alt="" /> |
||||||
<div>被拉黑用户10日内不可再预约</div> |
</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="btn" @click="clickSucc">知道了</div> |
|
||||||
</div> |
</div> |
||||||
<div class="wrapper" @click.stop v-show="!isSuccess"> |
<div class="act_box"> |
||||||
<div class="img_box" > |
<div class="act_btn" @click="confirm">确认</div> |
||||||
<img src="~@/assets/image/fail.png" alt=""> |
</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> |
||||||
<div class="tips">预约失败</div> |
<div class="wrapper" @click.stop v-show="!isSuccess"> |
||||||
<div class="tip_txt"> |
<div class="img_box"> |
||||||
<div>{{failTips}}</div> |
<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> |
||||||
<div class="btn" @click="clickFail">知道了</div> |
<div class="close_box" @click="clickClose"><img src="~@/assets/image/close.png" alt=""></div> |
||||||
</div> |
</van-overlay> |
||||||
<div class="close_box" @click="clickClose"><img src="~@/assets/image/close.png" alt=""></div> |
</div> |
||||||
</van-overlay> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import {postExam} from "@/api/examination"; |
import { postExam } from "@/api/examination"; |
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
proData:{}, |
proData: {}, |
||||||
proArr:[], |
proArr: [], |
||||||
isShow:false, |
isShow: false, |
||||||
isSuccess:false, |
isSuccess: false, |
||||||
userInfo:{}, |
userInfo: {}, |
||||||
failTips:'' |
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(3), |
|
||||||
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){ //错误返回 |
|
||||||
// } |
|
||||||
// }); |
|
||||||
}, |
}, |
||||||
|
mounted() { |
||||||
confirm(){ |
console.log(this.$route.params); |
||||||
console.log(this.proArr) |
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo')) |
||||||
postExam(JSON.stringify(this.proArr)).then(res =>{ |
console.log(this.userInfo) |
||||||
console.log(res) |
this.proData = this.$route.params; |
||||||
if(res.code == 200){ |
this.proData.selectArr.map(item => { |
||||||
this.isShow = true; |
this.proArr.push({ |
||||||
this.isSuccess = true |
apmDay: this.proData.time, |
||||||
}else{ |
createDept: this.proData.createDept, |
||||||
this.failTips = res.msg |
project: item.name, |
||||||
this.isShow = true; |
cuAddr: item.posi, |
||||||
this.isSuccess = false |
period: item.time.substr(0, 2), |
||||||
} |
timeFrame: item.time.substr(3), |
||||||
|
cupName: this.userInfo.name, |
||||||
|
cupPhone: this.userInfo.mobile, |
||||||
|
cupCardNo: this.userInfo.papersnumber |
||||||
|
}) |
||||||
}) |
}) |
||||||
// if(this.proArr.length != 0){ |
// 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之后回调 |
||||||
|
// /*回调*/ |
||||||
|
|
||||||
clickFail(){ |
// }, |
||||||
this.$router.replace({ |
// fail:function(data){ //错误返回 |
||||||
name:'examination', |
// } |
||||||
query:{ |
// }); |
||||||
id:this.proData.createDept |
}, |
||||||
|
|
||||||
|
confirm() { |
||||||
|
let param = this.proArr; |
||||||
|
if (this.GlobalConfig.appMode) { |
||||||
|
console.log(JSON.stringify(param)) |
||||||
|
vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczdtjyytj", JSON.stringify({data:param}), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => { |
||||||
|
let retData = JSON.parse(value); |
||||||
|
if (retData.success && retData.code == 200 && retData.data.code == 200) { |
||||||
|
this.isShow = true; |
||||||
|
this.isSuccess = true |
||||||
|
} else { |
||||||
|
this.failTips = retData.data != undefined ? retData.data.msg : ''; |
||||||
|
this.isShow = true; |
||||||
|
this.isSuccess = false |
||||||
|
} |
||||||
|
}) |
||||||
} |
} |
||||||
}) |
else { |
||||||
}, |
postExam({data:param}).then(res => { |
||||||
clickSucc(){ |
console.log(res) |
||||||
this.$router.replace({ |
if (res.code == 200) { |
||||||
name:'MyExam', |
this.isShow = true; |
||||||
query:{ |
this.isSuccess = true |
||||||
id:this.proData.createDept |
} 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 |
||||||
|
} |
||||||
}, |
}, |
||||||
clickClose(){ |
|
||||||
this.isShow = false |
|
||||||
} |
|
||||||
}, |
|
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
.pro_con { |
.pro_con { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
|
|
||||||
.pro_box { |
.pro_box { |
||||||
width: 98%; |
width: 98%; |
||||||
margin-top: 0.2rem; |
margin-top: 0.2rem; |
||||||
background: #fff; |
background: #fff; |
||||||
margin: 0.4rem auto; |
margin: 0.4rem auto; |
||||||
margin-bottom: 0.7rem; |
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{ |
.pro_top { |
||||||
display: flex; |
display: flex; |
||||||
|
padding-bottom: 0.26rem; |
||||||
|
border-bottom: 1px solid #EEEEEE; |
||||||
|
|
||||||
.img_box{ |
.img_box { |
||||||
height: 100%; |
|
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
img{ |
margin-right: 0.24rem; |
||||||
|
|
||||||
|
img { |
||||||
width: 0.5rem; |
width: 0.5rem; |
||||||
height: 0.5rem; |
height: 0.5rem; |
||||||
|
|
||||||
} |
} |
||||||
} |
} |
||||||
.pro_name{ |
|
||||||
height: 100%; |
.time_box { |
||||||
display: flex; |
.time_text { |
||||||
align-items: center; |
width: 1.46rem; |
||||||
font-size: 0.3rem; |
height: 0.32rem; |
||||||
color: #333; |
text-align: center; |
||||||
font-weight: bold; |
background: #F6F6F6; |
||||||
margin-left: 0.24rem; |
border-radius: 0.08rem; |
||||||
} |
line-height: 0.32rem; |
||||||
.pro_pos{ |
font-size: 0.24rem; |
||||||
height: 100%; |
color: #999999; |
||||||
display: flex; |
} |
||||||
align-items: center; |
|
||||||
font-size: 0.24rem; |
.date_txt { |
||||||
color: #999; |
font-size: 0.3rem; |
||||||
margin-left: 0.24rem; |
font-weight: bold; |
||||||
|
color: #333; |
||||||
|
line-height: 0.46rem; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
.pro_right{ |
|
||||||
height: 100%; |
.pro_bottom { |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
justify-content: space-between; |
||||||
|
height: 0.6rem; |
||||||
.cancel{ |
margin-top: 0.24rem; |
||||||
width: 1.5rem; |
|
||||||
height: 0.5rem; |
.pro_left { |
||||||
background: rgba(22, 119, 255,.1); |
display: flex; |
||||||
border-radius: 0.26rem; |
|
||||||
|
|
||||||
|
.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; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: center; |
|
||||||
font-size: 0.24rem; |
.cancel { |
||||||
color: #1677FF; |
width: 1.5rem; |
||||||
margin-right: 0.24rem; |
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{ |
.act_box { |
||||||
width: 5.98rem; |
position: absolute; |
||||||
height: 6.66rem; |
left: 0; |
||||||
background: #FFFFFF; |
right: 0; |
||||||
border-radius: 0.16rem; |
bottom: 0; |
||||||
margin: 0 auto; |
padding: 0.24rem; |
||||||
margin-top: 2.76rem; |
background: #fff; |
||||||
|
|
||||||
.img_box{ |
.act_btn { |
||||||
display: flex; |
color: #FFFFFF; |
||||||
justify-content: center; |
font-size: 0.3rem; |
||||||
img{ |
font-family: PingFang SC-Bold, PingFang SC; |
||||||
width: 1rem; |
font-weight: bold; |
||||||
height: 1rem; |
line-height: 0.96rem; |
||||||
margin-top: 1.2rem; |
text-align: center; |
||||||
|
background: #1677FF; |
||||||
|
border-radius: 0.08rem; |
||||||
} |
} |
||||||
} |
} |
||||||
.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{ |
.wrapper { |
||||||
display: flex; |
width: 5.98rem; |
||||||
flex-direction: column; |
height: 6.66rem; |
||||||
justify-content: center; |
background: #FFFFFF; |
||||||
align-items: center; |
border-radius: 0.16rem; |
||||||
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: 0 auto; |
||||||
margin-top: 0.6rem; |
margin-top: 2.76rem; |
||||||
font-size: 0.3rem; |
|
||||||
color: #fff; |
.img_box { |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
justify-content: center; |
||||||
justify-content: center; |
|
||||||
font-family: PingFang SC-Regular, PingFang SC; |
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{ |
.close_box { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: center; |
justify-content: center; |
||||||
margin-top: 0.6rem; |
margin-top: 0.6rem; |
||||||
img{ |
|
||||||
|
img { |
||||||
width: 0.5rem; |
width: 0.5rem; |
||||||
height: 0.5rem; |
height: 0.5rem; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue