TODO#130024 [顧問細節] API 串接

HelenHuang

2021-11-12 4ffc0db28966ad106ded6ff0058c2dad7850bf78

TODO#130024 [顧問細節] API 串接

 PAMapp/assets/ts/api/consultant.ts

@@ -57,6 +57,11 @@
export function appointmentDemand(data: AppointmentParams) {
    return service.post('/appointment/customer/create', data)
}

//顧問詳細資訊
export function getConsultantDetail(agentNo:string){
    return service.get('/consultant/detail', {params:{agentNo:agentNo}})
}
export interface Consultants {
    agentNo: string,
    name: string,

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -9,7 +9,7 @@
                            :size="50"
                            :src="agentInfo.img"
                            class="cursor--pointer"
                            @click.native="$router.push(`/agentInfo`)"
                            @click.native="showAgentDetail(agentInfo.agentNo);"
                        ></el-avatar>
                        <div class="satisfaction">
                            <i class="icon-star pam-icon icon--yellow satisfaction"></i>
@@ -109,6 +109,10 @@
    @Emit('removeAgent') removeAgent() {
        return this.agentInfo.agentNo;
    }

    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }
}
</script>


 PAMapp/components/Consultant/ConsultantSwiper.vue

@@ -56,7 +56,8 @@
    }

    clkItem(loopIndex: number, realIndex: number) {
      this.$router.push('/agentInfo');
      const agentNo = this.agents[realIndex].agentNo;
      this.$router.push(`/agentInfo/${agentNo}`);
      console.log(loopIndex, realIndex, 'clkItem')
    }


 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -20,7 +20,7 @@
                <el-avatar
                    :size="200"
                    class="mx-auto cursor--pointer"
                    @click="$router.push('/agentInfo')"
                    @click.native="showAgentDetail(item.agentNo)"
                    :src="item.img"
                />
                <div class="mdTxt mt-30 mb-30 text--center">{{item.name}}(伯樂保險經紀人)</div>
@@ -112,6 +112,9 @@
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }
    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }


}

 PAMapp/pages/agentInfo/_agentNo.vue

File was renamed from PAMapp/pages/agentInfo/index.vue
@@ -3,10 +3,10 @@
      <el-row
        type="flex"
        justify="center">
         <el-avatar
        <el-avatar
          size="large"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
         </el-avatar>
        </el-avatar>
      </el-row>

      <el-row
@@ -15,7 +15,7 @@
        justify="center"
        align="middle">
          <i class="pam-icon icon--primary icon-star"></i>
          <h3 class="mdTxt">{{ agentInfo.avgReviews }}</h3>
          <h3 class="mdTxt">{{ agentInfo.avgScore }}</h3>
      </el-row>

      <el-row
@@ -158,27 +158,23 @@
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'vue-property-decorator';
import { getConsultantDetail } from '~/assets/ts/api/consultant';

@Component
export default class AgentInfoComponent extends Vue {
  agentInfo: AgentInfo = {
    name: '蔡美眉',
    role: '伯樂保險經紀人',
    avgReviews: 4.8,
    title: '專案經理',
    phoneNumber: '0912345689',
    serveArea: '台北市地區、新北市地區',
    companyAddress: '台北市信義區忠孝東路一段1號',
    lastestLoginTime: new Date(),
    seniority: '4年2個月',
    suitability: 53,
    evaluation: 31,
    expertises: ['財務規劃', '資產移轉', '節稅', '樂活退休'],
    concept: '壽險路上沒有捷徑，唯有給客戶信任感、安全感，才是最好的方法。從業以來，我一直秉持著「助人為快樂之本」的信念堅持著，她相信，一個好的業務人員，必須抱持著一顆熱心助人的心，才是永續經營壽險事業的不二法門。',
    experiences: ['台大財金系', '美莓有精算師執照'],
    awards: '入選：2020年伯樂十大最佳業務員 擁有證照：人身保險業務員證照、外幣收付保險證照、人身保險代理人證照、財產保險代理人證照'
  agentInfo!: AgentInfo;

  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    let agentInfo = {};
    await getConsultantDetail(agentNo).then((res) => agentInfo = res.data )
    return {
      agentInfo
    }
  }


  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
@@ -187,13 +183,15 @@

interface AgentInfo {
  name: string;
  agentNo:string;
  role: string;
  avgReviews: number;
  image: string;
  avgScore: number;
  title: string;
  phoneNumber: string;
  serveArea: string;
  companyAddress: string;
  lastestLoginTime: Date;
  lastestLoginTime: Date | null;
  seniority: string;
  suitability: number;
  evaluation: number;
@@ -253,3 +251,11 @@
}

</style>

function getConsultantDetail() {
  throw new Error('Function not implemented.');
}

function getConsultantDetail() {
  throw new Error('Function not implemented.');
}

 PAMapp/store/index.ts

@@ -1,18 +1,23 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { Consultants } from '~/assets/ts/api/consultant';
import { recommend } from '~/assets/ts/api/consultant'
import { Consultants,recommend,AgentOfStrictQuery} from '~/assets/ts/api/consultant';

@Module
export default class Store extends VuexModule {
    recommendList: Consultants[] | null = null;
    strictQueryList: AgentOfStrictQuery[] = [];

    @Mutation updateRecommend(data: Consultants[]) {
        this.recommendList = data;
    }

    @Mutation updateStrictQueryList(data: AgentOfStrictQuery[]) {
        this.strictQueryList = data;
    }

    @Action storeRecommendList() {
        recommend().then(res => {
            this.context.commit('updateRecommend', res.data)
       })
        })
    }

}