Browse Source

完成

feature/feature-compatible
Wks 7 years ago
parent
commit
8c27a592b6
4 changed files with 197 additions and 40 deletions
  1. 7
      src/api/evaluation.js
  2. 13
      src/models/evaluation-model.js
  3. 27
      src/view/service-evaluation-status.vue
  4. 190
      src/view/service-evaluation.vue

7
src/api/evaluation.js

@ -0,0 +1,7 @@
export default {
// -- 领取优惠券 --
add: {
url: "/mall/web/evaluation/add",
method: "post"
}
};

13
src/models/evaluation-model.js

@ -0,0 +1,13 @@
import utilsModel from "./utils-model";
import evaluation from "../api/evaluation.js";
export default {
// 获取优惠券信息
add: (data, token) =>
utilsModel.config(evaluation.add).request({
data: data,
headers: {
"encodeToken": token
}
})
};

27
src/view/service-evaluation-status.vue

@ -2,9 +2,9 @@
<template>
<div class="service-evaluation-status">
<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="evaluation-status-box">
<!--
@ -17,9 +17,24 @@
//
../assets/images/service-evaluation/evaluation-status-3.png
-->
<img src="../assets/images/service-evaluation/evaluation-status-0.png" class="evaluation-status-icon">
<span>评价成功</span>
<img v-show="code==0" src="../assets/images/service-evaluation/evaluation-status-0.png" class="evaluation-status-icon">
<img v-show="code==1" src="../assets/images/service-evaluation/evaluation-status-1.png" class="evaluation-status-icon">
<img v-show="code==2" src="../assets/images/service-evaluation/evaluation-status-2.png" class="evaluation-status-icon">
<img v-show="code==3" src="../assets/images/service-evaluation/evaluation-status-3.png" class="evaluation-status-icon">
<span v-show="code==0">评价成功</span>
<span v-show="code==1">不可重复评价</span>
<span v-show="code==2">已过期</span>
<span v-show="code==3">账号不一致</span>
</div>
</div>
</div>
</template>
</template>
<script>
export default {
props: {
code: {
type: Number
}
}
};
</script>

190
src/view/service-evaluation.vue

@ -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>
Loading…
Cancel
Save