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

<template>
    <div class="service-evaluation">
        <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>{{name}}</span>
                </p>
                <p>服务日期：
                    <span>{{time}}</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>

        <!--问题弹出框-->
        <!-- <div id="popup-question" class="popup-box" style="display:block">
            <div class=" popup-centent">
                <span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
                <p class="cue-title">提示</p>
                <p>请进入微信公众号“一号家政服务号”进行提现操作</p>
                <button>确定</button>
            </div>
        </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'

export default {
    data() {
        return {
            //保洁师姓名
            name: '哇哈哈',
            //服务时间
            time: '2018-10-01 08:00-12:00',
            tipShow: false,
            timeScore: 0,
            serviceScore: 0,
            professionScore: 0,
            content: "",
            alertShow: false,
            code: 4,
            statusShow: false,
            //提示信息
            alertTip: '请完整填写评价',
            //用于判断是否可进行提交评论
            isCanEvaluation: false,
        };
    },
    components: {
        status,
        Alert,
        Toast,
    },
    methods: {
        //点击问号
        showTips() {
            this.tipShow = true;
        },
        //关闭提示
        closeTips() {
            this.tipShow = false;
        },
        //提示
        submit() {
            if(!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) {
                            //订单不存在
                            this.alertTip = res.msg
                            this.alertShow = true;
                            setTimeout(() => {
                                this.alertShow = false;
                            }, 3000);
                        } else if (code == 2) {
                            //不可重复评价
                            this.code = 2;
                            this.statusShow = true;
                        } else if (code == 3) {
                            //已过期
                            this.code = 3;
                            this.statusShow = true;
                        } else if (code == 4) {
                            //账号不一致
                            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.name = this.getParam("name")
        this.time = this.getParam("bookTime")
        this.code = this.getParam("code")
        //判断用户是否登录
        model.getEvaluationNews(this.getParam("bookNo"))
            .then(res => {
                let code = res.code;
                if (code == 0) {
                    //成功
                    if (!res.response.userId){
                        this.alertTip = res.msg
                        this.alertShow = true;
                        setTimeout(() => {
                            this.alertShow = false;
                        }, 3000);
                    } else {
                        this.isCanEvaluation = true
                    }
                } else if (code == 1) {
                    this.code = 4;
                    this.statusShow = true;                   
                }
            });
    }
};
</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>