parent
1475ce4e60
commit
94478a4ef3
3 changed files with 316 additions and 286 deletions
@ -1,340 +1,369 @@ |
||||
<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 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="tips">预约成功</div> |
||||
<div class="tip_txt"> |
||||
<div>预约成功后若不能按时体检请提前取消</div> |
||||
<div>未提前取消且未按期体检将被拉入黑名单</div> |
||||
<div>被拉黑用户10日内不可再预约</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 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 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="tips">预约失败</div> |
||||
<div class="tip_txt"> |
||||
<div>{{failTips}}</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="btn" @click="clickFail">知道了</div> |
||||
</div> |
||||
<div class="close_box" @click="clickClose"><img src="~@/assets/image/close.png" alt=""></div> |
||||
</van-overlay> |
||||
</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"; |
||||
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(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){ //错误返回 |
||||
// } |
||||
// }); |
||||
data() { |
||||
return { |
||||
proData: {}, |
||||
proArr: [], |
||||
isShow: false, |
||||
isSuccess: false, |
||||
userInfo: {}, |
||||
failTips: '' |
||||
}; |
||||
}, |
||||
|
||||
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 |
||||
} |
||||
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 |
||||
}) |
||||
}) |
||||
// 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({ |
||||
name:'examination', |
||||
query:{ |
||||
id:this.proData.createDept |
||||
// }, |
||||
// fail:function(data){ //错误返回 |
||||
// } |
||||
// }); |
||||
}, |
||||
|
||||
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 |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
clickSucc(){ |
||||
this.$router.replace({ |
||||
name:'MyExam', |
||||
query:{ |
||||
id:this.proData.createDept |
||||
else { |
||||
postExam({data:param}).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 |
||||
} |
||||
}, |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.pro_box { |
||||
width: 98%; |
||||
margin-top: 0.2rem; |
||||
background: #fff; |
||||
margin: 0.4rem auto; |
||||
margin-bottom: 0.7rem; |
||||
|
||||
.pro_bottom{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
height: 0.6rem; |
||||
margin-top: 0.24rem; |
||||
|
||||
.pro_left{ |
||||
.pro_top { |
||||
display: flex; |
||||
|
||||
padding-bottom: 0.26rem; |
||||
border-bottom: 1px solid #EEEEEE; |
||||
|
||||
.img_box{ |
||||
height: 100%; |
||||
.img_box { |
||||
display: flex; |
||||
align-items: center; |
||||
img{ |
||||
margin-right: 0.24rem; |
||||
|
||||
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; |
||||
|
||||
.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_right{ |
||||
height: 100%; |
||||
|
||||
.pro_bottom { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.cancel{ |
||||
width: 1.5rem; |
||||
height: 0.5rem; |
||||
background: rgba(22, 119, 255,.1); |
||||
border-radius: 0.26rem; |
||||
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; |
||||
justify-content: center; |
||||
font-size: 0.24rem; |
||||
color: #1677FF; |
||||
margin-right: 0.24rem; |
||||
|
||||
.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; |
||||
.act_box { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
padding: 0.24rem; |
||||
background: #fff; |
||||
|
||||
.img_box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
img{ |
||||
width: 1rem; |
||||
height: 1rem; |
||||
margin-top: 1.2rem; |
||||
.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; |
||||
} |
||||
} |
||||
.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; |
||||
.wrapper { |
||||
width: 5.98rem; |
||||
height: 6.66rem; |
||||
background: #FFFFFF; |
||||
border-radius: 0.16rem; |
||||
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; |
||||
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{ |
||||
.close_box { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 0.6rem; |
||||
img{ |
||||
|
||||
img { |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue