1hjz-h5/src/view/service-evaluation.vue

<template>
    <div class="service-evaluation">
    	<div style="height: 0.9rem;"></div> 
        <div class="page-top">
            <!-- <a @click="goBack()"><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>{{cleanerName}}</span>
                </p>
                <p>服务日期：
                    <span>{{serviceTime}}</span>
                </p>
            </div>
            <div class="line"></div>
            <!--服务评价-->
            <div class="evaluate">
                <span class="evaluate-question-btn" @click="showTips"></span>
                <div class="evaluate-tab">
                    <label>准时到达</label>
                    <ul>
                        <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 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 v-for="item in 5" :key="item" :class="{ative:item<=professionScore}" @click="professionScore=item"></li>
                    </ul>
                </div>
            </div>
            <div class="line"></div>
            <!--提交意见-->
            <textarea v-model="content" name="" id="" class="message" placeholder="您的宝贵意见，将帮助我们提升服务"></textarea>
            <button @click="submit" class="submitBtn">提交</button>
        </div>
        
        <transition name="fade">
            <div class="popup-box" v-show="tipShow">
                 <div class="popup-centent" id="popup-question">
                    <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">
                {{alertTip}}
            </div>
        </transition>
        <status :code="code" v-show="statusShow"></status>
    </div>
</template>
<script>
import { setTimeout } from "timers";
import model from "../models/evaluation-model.js";
import status from "./service-evaluation-status.vue";
import { Alert, Toast } from "vux";
import configs from '../configs';
var locationUrl = configs.locationUrl;

export default {
    data() {
        return {
        //保洁师姓名
        cleanerName: "",
        //服务时间
        serviceTime: "",
        tipShow: false,
        timeScore: 0,
        serviceScore: 0,
        professionScore: 0,
        content: "",
        alertShow: false,
        code: 4,
        statusShow: true,
        //提示信息
        alertTip: "请完整填写评价",
        //用于判断是否可进行提交评论
        isCanEvaluation: false
        };
    },
    components: {
        status,
        Alert,
        Toast
    },
    methods: {
        //点击问号
        showTips() {
        this.tipShow = true;
        },
        //关闭提示
        closeTips() {
        this.tipShow = false;
        },
        //提示
        submit() {
            if (!this.isCanEvaluation) return;
            if (
                this.timeScore == 0 ||
                this.serviceScore == 0 ||
                this.professionScore == 0
            ) {
                this.alertTip = "请完整填写评价";
                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) {
                        if (res.msg == "已过期") {
                            //已过期
                            this.code = 3;
                            this.statusShow = true;
                        } else if (res.msg == "不可重复评价") {
                           //不可重复评价
                            this.code = 2;
                            this.statusShow = true;
                        } else if (res.msg == "账号不一致") {
                           //账号不一致
                            this.code = 4;
                            this.statusShow = true;
                        }
                    }
                });
            }
        },
        getParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var url = window.location.href;
            url = window.location.href.substring(url.indexOf("?") + 1, url.length);
            var r = url.match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        //返回上一页
        goBack() {
            history.go(-1);
        }
    },
    mounted() {
        //判断用户是否登录 this.getParam("bookNo")  BD180726031513504110
        model.getEvaluationNews({ bookNo: this.getParam("bookNo")}).then(res => {
            //let code = res.code;
        //    console.log(res)

            if (res.code == 0) {
                this.statusShow = false;
                this.cleanerName = res.response.cleanerName
                var times = ''
                if (res.response.timeType == 1) {
                    times = '8:00~12:00'
                } else {
                    times = '14:00~16:00'
                }
                this.serviceTime = res.response.bookTime +' '+ times

                //成功
                if (!res.response.userId) {
                    this.alertTip = '请登录账号';
                    this.alertShow = true;
                    setTimeout(() => {
                        this.alertShow = false;
                        window.location.href = locationUrl + '/mall/web/user/login?callback=' + encodeURIComponent(window.location.href);
                    }, 3000);                    
                } else {
                    this.isCanEvaluation = true;                    
                }
            } else if (res.code == 1) {
               if (res.msg == "已过期" ) {
                    //已过期
                    this.code = 3;
                    this.statusShow = true;
                } else if (res.msg == "不可重复评价") {
                    //不可重复评价
                    this.code = 2;
                    this.statusShow = true;
                } else if (res.msg == "账号不一致") {
                    //账号不一致
                    this.code = 4;
                    this.statusShow = true;
                } else if (res.msg == "服务单号不存在") {
                    //订单不存在
                    this.code = 5;
                    this.statusShow = true;
                } 
            }
        });
        this.wxShare({
                merchantNo: '',
                source: 0,
                url: encodeURIComponent(location.href),
                shareUrl: encodeURIComponent(
                    "http://" + location.host + "/v2/home"
                )
            });
    }
};
</script>
<style scoped>
.service-evaluation .page-content {
	position: absolute;	
	padding-bottom: 1.5rem;
}
.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>