|
|
|
@ -2,56 +2,47 @@ |
|
|
|
<template> |
|
|
|
<div class="service-evaluation"> |
|
|
|
<div class="page-top"> |
|
|
|
<a><img src="../assets/images/my-money/left.png"/></a> |
|
|
|
<span>服务评价</span> |
|
|
|
</div> |
|
|
|
<a><img src="../assets/images/my-money/left.png" /></a> |
|
|
|
<span>服务评价</span> |
|
|
|
</div> |
|
|
|
<div class="page-content"> |
|
|
|
<!--保洁师信息--> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="cleaners-news"> |
|
|
|
<p>保洁师:<span>林同学</span></p> |
|
|
|
<p>服务日期:<span>2018-10-01 08:00-12:00</span></p> |
|
|
|
<p>保洁师: |
|
|
|
<span>林同学</span> |
|
|
|
</p> |
|
|
|
<p>服务日期: |
|
|
|
<span>2018-10-01 08:00-12:00</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<!--服务评价--> |
|
|
|
<div class="evaluate"> |
|
|
|
<span class="evaluate-question-btn"></span> |
|
|
|
<span class="evaluate-question-btn" @click="showTips"></span> |
|
|
|
<div class="evaluate-tab"> |
|
|
|
<label>准时到达</label> |
|
|
|
<ul> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li v-for="item in 5" :key="item" :class="{ative:item<=timeScore}" @click="timeScore=item"></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="evaluate-tab"> |
|
|
|
<label>洁净标准</label> |
|
|
|
<ul> |
|
|
|
<li class="ative"></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li v-for="item in 5" :key="item" :class="{ative:item<=serviceScore}" @click="serviceScore=item"></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="evaluate-tab"> |
|
|
|
<label>专业高效</label> |
|
|
|
<ul> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li></li> |
|
|
|
<li v-for="item in 5" :key="item" :class="{ative:item<=professionScore}" @click="professionScore=item"></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<!--提交意见--> |
|
|
|
<textarea name="" id="" class="message">您的宝贵意见,将帮助我们提升服务</textarea> |
|
|
|
<button class="submitBtn">提交</button> |
|
|
|
|
|
|
|
<textarea v-model="content" name="" id="" class="message" placeholder="您的宝贵意见,将帮助我们提升服务"></textarea> |
|
|
|
<button @click="submit" class="submitBtn">提交</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--问题弹出框--> |
|
|
|
@ -63,17 +54,148 @@ |
|
|
|
<button>确定</button> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="popup-centent" id="popup-question"> |
|
|
|
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span> |
|
|
|
<div class="popup-body"> |
|
|
|
<p>准时到达:本次保洁师是否如约到达?</p> |
|
|
|
<p>洁净标准:本次洁净服务质量,是否您满意?</p> |
|
|
|
<p>专业高效:本次洁净服务速度,是否您满意?</p> |
|
|
|
<transition name="fade"> |
|
|
|
<div class="popup-centent" id="popup-question" v-show="tipShow"> |
|
|
|
<span class="closeBtn"><img src="../assets/images/put-money/close.png" @click="closeTips"></span> |
|
|
|
<div class="popup-body"> |
|
|
|
<p>准时到达:本次保洁师是否如约到达?</p> |
|
|
|
<p>洁净标准:本次洁净服务质量,是否您满意?</p> |
|
|
|
<p>专业高效:本次洁净服务速度,是否您满意?</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</transition> |
|
|
|
<transition name="alertFade"> |
|
|
|
<div class="tips" v-show="alertShow"> |
|
|
|
请完整填写评价 |
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
<status :code="code" v-show="statusShow"></status> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
|
|
|
|
</script> |
|
|
|
import { setTimeout } from "timers"; |
|
|
|
import model from "../models/evaluation-model.js"; |
|
|
|
import status from "./service-evaluation-status.vue"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tipShow: false, |
|
|
|
timeScore: 0, |
|
|
|
serviceScore: 0, |
|
|
|
professionScore: 0, |
|
|
|
content: "", |
|
|
|
alertShow: false, |
|
|
|
code: 4, |
|
|
|
statusShow: false |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { |
|
|
|
status |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//点击问号 |
|
|
|
showTips() { |
|
|
|
this.tipShow = true; |
|
|
|
}, |
|
|
|
//关闭提示 |
|
|
|
closeTips() { |
|
|
|
this.tipShow = false; |
|
|
|
}, |
|
|
|
//提示 |
|
|
|
submit() { |
|
|
|
if ( |
|
|
|
this.timeScore == 0 || |
|
|
|
this.serviceScore == 0 || |
|
|
|
this.professionScore == 0 |
|
|
|
) { |
|
|
|
this.alertShow = true; |
|
|
|
setTimeout(() => { |
|
|
|
this.alertShow = false; |
|
|
|
}, 3000); |
|
|
|
} else { |
|
|
|
var strCookie = document.cookie; |
|
|
|
var cookieName = "1hjz_mall_login_access_token="; |
|
|
|
var token = strCookie.slice(cookieName.length); |
|
|
|
|
|
|
|
model |
|
|
|
.add( |
|
|
|
{ |
|
|
|
timeScore: this.timeScore, |
|
|
|
serviceScore: this.serviceScore, |
|
|
|
professionScore: this.professionScore, |
|
|
|
content: this.content, |
|
|
|
bookNo: this.getParam("bookNo") |
|
|
|
}, |
|
|
|
token |
|
|
|
) |
|
|
|
.then(res => { |
|
|
|
let code = res.code; |
|
|
|
if (code == 0) { |
|
|
|
this.code = 0; |
|
|
|
this.statusShow = true; |
|
|
|
} else if (code == 1) { |
|
|
|
let str = res.msg; |
|
|
|
switch (str) { |
|
|
|
case "已过期": |
|
|
|
this.code = 2; |
|
|
|
this.statusShow = true; |
|
|
|
break; |
|
|
|
case "不可重复评价": |
|
|
|
this.code = 1; |
|
|
|
this.statusShow = true; |
|
|
|
break; |
|
|
|
case "账号不一致": |
|
|
|
this.code = 3; |
|
|
|
this.statusShow = true; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
getParam(name) { |
|
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); |
|
|
|
var r = window.location.search.substr(1).match(reg); |
|
|
|
if (r != null) return unescape(r[2]); |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.fade-enter-active { |
|
|
|
transition: opacity 0.5s; |
|
|
|
} |
|
|
|
.fade-leave-active { |
|
|
|
transition: opacity 0.5s; |
|
|
|
} |
|
|
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
.tips { |
|
|
|
position: fixed; |
|
|
|
top: 8rem; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 4.5rem; |
|
|
|
height: 1rem; |
|
|
|
background-color: black; |
|
|
|
opacity: 0.6; |
|
|
|
border-radius: 0.5rem; |
|
|
|
font-family: "PingFang-SC-Medium"; |
|
|
|
font-size: 0.36rem; |
|
|
|
color: white; |
|
|
|
line-height: 1rem; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.alertFade-enter-active { |
|
|
|
transition: opacity 0.5s; |
|
|
|
} |
|
|
|
.alertFade-leave-active { |
|
|
|
transition: opacity 0.5s; |
|
|
|
} |
|
|
|
.alertFade-enter, .alertFade-leave-to /* .fade-leave-active below version 2.1.8 */ { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|