add: TODO#130194 串接取得顧問img api

Mila

2021-11-15 c0051fba69438a587afb92f7d4e6ae5ded3a8521

add: TODO#130194 串接取得顧問img api

 PAMapp/assets/scss/vendors/elementUI/_avatar.scss

@@ -2,3 +2,8 @@
  width: 150px;
  height: 150px
}

.pam-avatar>img {
  width: 100%;
  object-position: center top;
}

 PAMapp/assets/ts/api/consultant.ts

@@ -5,7 +5,7 @@
import Router from 'vue-router';

export const service = axios.create({
    baseURL: 'http://localhost:8080/api'
    baseURL: process.env.BASE_URL
})

service.interceptors.request.use(function (config: AxiosRequestConfig) {

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -5,12 +5,11 @@
            <el-col :xs="22" :sm="23">
                <el-row type="flex">
                    <el-col class="flex_column" :xs="5" :sm="3">
                        <el-avatar
                        <UiAvatar
                            :size="50"
                            :src="agentInfo.img"
                            class="cursor--pointer"
                            @click.native="showAgentDetail(agentInfo.agentNo);"
                        ></el-avatar>
                            :fileName="agentInfo.img"
                            @click.native="showAgentDetail(agentInfo.agentNo)"
                        ></UiAvatar>
                        <div class="satisfaction">
                            <i class="icon-star pam-icon icon--yellow satisfaction"></i>
                            <span>{{agentInfo.avgScore }}</span>

 PAMapp/components/Consultant/ConsultantSwiper.vue

@@ -10,7 +10,7 @@
          :key="index"
        >
            <div class="consultantCardStyle" >
              <el-avatar class="mb-10" :size="80" :src="agentInfo.img"></el-avatar>
              <UiAvatar :size="80" :fileName="agentInfo.img" class="mb-10"></UiAvatar>
              <div class="name">{{agentInfo.name}}</div>
              <div>
                <i class="icon-star pam-icon icon--yellow"></i>

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -17,12 +17,12 @@
                @touchstart="touchStart"
                @touchend="moveCard"
            >
                <el-avatar
                <UiAvatar
                    :size="200"
                    class="mx-auto cursor--pointer"
                    :fileName="item.img"
                    class="mx-auto"
                    @click.native="showAgentDetail(item.agentNo)"
                    :src="item.img"
                />
                ></UiAvatar>
                <div class="mdTxt mt-30 mb-30 text--center">{{item.name}}(伯樂保險經紀人)</div>
                <el-row>
                    <el-col :span="12">

 PAMapp/components/Ui/UiAvatar.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,21 @@
<template>
    <el-avatar
        :size="size"
        :src="imgSrc"
        class="pam-avatar cursor--pointer"
    ></el-avatar>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';

@Component
export default class UiAvatar extends Vue {
    @Prop() size!: number;
    @Prop() fileName!: string;

    get imgSrc() {
        return process.env.BASE_URL + '/consultant/avatar/' + this.fileName;
    }
}
</script>

 PAMapp/nuxt.config.js

@@ -71,5 +71,8 @@
        document.documentElement.scrollTop = 0;
      }
    }
  },
  env: {
    BASE_URL: 'http://localhost:8080/api'
  }
}