Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/pages/userReviews/index.vue

@@ -1,109 +1,104 @@
<template> 
<div class="reviews-page">
    <!-- 顧客發送滿意度給顧問 -->
    <div class="reviews-banner"></div>
<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-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>
            <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>
                <div 
                    class="card-score"
                    v-if="isMobileDevice">
                    <el-rate 
                        class="user-reviews-rate"
                        v-model="item.avgScore"></el-rate>
                </div>
            </div>
            </section>
        </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>
        <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 '~/assets/ts/device';

<script lang="ts">
import { ReviewsList } from '~/shared/models/reviewsList.model';
import { Vue,Component } from 'vue-property-decorator'
import UtilsService from '~/shared/services/utils.service';

@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
      }
  ];

    isMobileDevice = true;
  //////////////////////////////////////////////////////////////////////
  mounted() {
      this.isMobileDevice = UtilsService.isMobileDevice();
  };

    showReviews = false;
  //////////////////////////////////////////////////////////////////////
  reviewsDialogCheck(): void {
      this.reviewsList = this.reviewsList.filter((reviewItem) => !reviewItem.avgScore);
      this.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;
    };
  sendReviews() {
      this.showReviews = true;
  };
}
export interface ReviewsList{
    avatar:any;
    name:string;
    avgScore:number;
}

</script>

<style lang="scss" scoped>
.reviews-page{
    background-color: #F8F9FA;
@@ -209,4 +204,4 @@

}

</style>
</style>