<template>
|
<div class="reviews-page">
|
<!-- 顧客發送滿意度給顧問 -->
|
<div class="reviews-banner"></div>
|
|
<section class="reviews-container">
|
<section class="reviews-header">
|
<div class="reviews-header-container">
|
<div class="reviews-header-title">滿意度調查</div>
|
<!-- <div class="reviews-header-subTitle">共{{ reviewsList.length }}筆</div> -->
|
</div>
|
</section>
|
|
<section class="reviews-content">
|
<div class="reviews-content-card" v-for="(item,index) in reviewsList" :key="(index)">
|
<div class="card-body">
|
<div class="card-avatar">
|
<img :src="item.avatar" class="img">
|
</div>
|
<div class="card-txt">
|
對於顧問
|
<span class="p">{{item.name}}</span>的整體服務,您給予幾顆星的評價?
|
<div
|
class="card-score"
|
v-if="!isMobileDevice">
|
<el-rate class="user-reviews-rate" v-model="item.avgScore"></el-rate>
|
</div>
|
</div>
|
</div>
|
<div
|
class="card-score"
|
v-if="isMobileDevice">
|
<el-rate
|
class="user-reviews-rate"
|
v-model="item.avgScore"></el-rate>
|
</div>
|
</div>
|
</section>
|
</section>
|
|
<section class="reviews-footer">
|
<el-button type="primary" class="reviews-footer-btn" @click.native="sendReviews">送出</el-button>
|
</section>
|
<PopUpFrame :isOpen.sync="showReviews">
|
<div class="reviews-dialog">
|
<span class="reviews-dialog-title">評價完成!</span>
|
</div>
|
<div class="reviews-btn-block">
|
<el-button type="primary" class="reviews-dialog-btn" @click.native="reviewsDialogCheck">我知道了</el-button>
|
</div>
|
</PopUpFrame>
|
|
|
</div>
|
</template>
|
<script lang="ts">
|
import { Vue,Component } from 'vue-property-decorator'
|
import { isMobileDevice } from '~/shared/device';
|
|
|
@Component({
|
layout: 'home'
|
})
|
export default class UserReviews extends Vue{
|
|
isMobileDevice = true;
|
|
showReviews = false;
|
|
reviewsList:ReviewsList[] = [
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'蔡美眉',
|
avgScore: 0
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'賈斯町',
|
avgScore: 0
|
},
|
{
|
avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
name:'服務媒合',
|
avgScore: 0
|
}
|
];
|
|
reviewsDialogCheck(): void {
|
this.reviewsList = this.reviewsList.filter((reviewItem) => !reviewItem.avgScore);
|
this.showReviews = false;
|
};
|
|
mounted() {
|
this.isMobileDevice = isMobileDevice();
|
};
|
|
sendReviews() {
|
this.showReviews = true;
|
};
|
}
|
export interface ReviewsList{
|
avatar:any;
|
name:string;
|
avgScore:number;
|
}
|
</script>
|
<style lang="scss" scoped>
|
.reviews-page{
|
background-color: #F8F9FA;
|
.reviews-banner{
|
background-image: url('~/assets/images/satisfaction/banner_mob.svg');
|
height: 120px;
|
margin-bottom: 10px;
|
}
|
.reviews-container{
|
padding-right: 10px;
|
padding-left: 10px;
|
padding-bottom: 10px;
|
.reviews-header{
|
margin-top: 10px;
|
.reviews-header-container{
|
display: flex;
|
margin-bottom:38px;
|
align-items: baseline;
|
.reviews-header-title{
|
margin-right: 17.5px;
|
font-size: 20px;
|
}
|
.reviews-header-subTitle{
|
font-size: 16px;
|
color: #68737A;
|
}
|
}
|
}
|
.reviews-content{
|
.reviews-content-card{
|
.card-body{
|
display: flex;
|
.card-avatar{
|
.img{
|
height: 80px;
|
width: 80px;
|
}
|
}
|
.card-txt{
|
font-size: 20px;
|
padding-top: 20px;
|
.p{
|
font-size: 23px;
|
color:#ED1B2E;
|
font-weight: bold;
|
}
|
}
|
}
|
.card-score{
|
margin-top: 10px;
|
margin-bottom: 30px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
.reviews-footer{
|
height: 70px;
|
display: flex;
|
justify-content: center;
|
margin-top: 45px;
|
background-color: #fff;
|
.reviews-footer-btn{
|
width: 120px;
|
height: 50px;
|
margin-top: 10px;
|
}
|
}
|
.reviews-dialog{
|
display: flex;
|
justify-content: center;
|
margin-bottom: 56px;
|
.reviews-dialog-title{
|
font-size: 18px;
|
}
|
}
|
.reviews-btn-block{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
@include desktop{
|
.reviews-page{
|
.reviews-banner{
|
height: 147px;
|
background-image: url('~/assets/images/satisfaction/banner_web.svg');
|
}
|
.reviews-container{
|
width: 700px;
|
margin: 30px auto 0px auto;
|
.reviews-content{
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
.reviews-footer{
|
background-color:#F8F9FA;
|
}
|
}
|
|
}
|
|
</style>
|
