From 4f2e9b65d2be8f7b79f29870259c53b4c39a3702 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 29 十月 2021 13:07:36 +0800
Subject: [PATCH] add: 業務員細節 page、UiField 元件
---
PAMapp/components/Ui/UiField.vue | 58 +++++++++
PAMapp/pages/agentInfo/index.vue | 252 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 308 insertions(+), 2 deletions(-)
diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
new file mode 100644
index 0000000..f069cc7
--- /dev/null
+++ b/PAMapp/components/Ui/UiField.vue
@@ -0,0 +1,58 @@
+<template>
+ <el-col :span="24" class="pam-field">
+ <div class="pam-field-label">
+ <div class="pam-field-title"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
+ </div>
+ <p class="pam-field-content pt-10">
+ <slot></slot>
+ </p>
+ </el-col>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class UiCarousel extends Vue {
+
+ @Prop() span!: number;
+ @Prop() icon!: string;
+ @Prop() label!: string;
+ @Prop() content!: string;
+ // @Prop() displayDevice!: 'MOBILE' | 'DESKTOP';
+
+ get fieldSpan(): number {
+ return this.span || 24;
+ }
+
+ get fieldIcon(): string {
+ return `pam-icon icon-${this.icon}`;
+ }
+
+ get fieldLabel(): string {
+ return `${this.label}`;
+ }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+.pam-field {
+ display: flex;
+ flex-direction: column;
+ .pam-field-label {
+ display: flex;
+ align-items: center;
+ .pam-icon {
+ font-size: 12px;
+ }
+ .pam-field-title {
+ font-size: 16px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ }
+ }
+}
+</style>
diff --git a/PAMapp/pages/agentInfo/index.vue b/PAMapp/pages/agentInfo/index.vue
index b21657e..cabf942 100644
--- a/PAMapp/pages/agentInfo/index.vue
+++ b/PAMapp/pages/agentInfo/index.vue
@@ -1,3 +1,251 @@
<template>
- <div>璆剖�閰喟敦鞈��</div>
-</template>
\ No newline at end of file
+ <div>
+ <el-row
+ type="flex"
+ justify="center">
+ <el-avatar
+ size="large"
+ src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
+ </el-avatar>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="pt-10"
+ justify="center"
+ align="middle">
+ <i class="pam-icon icon-primary icon-star"></i>
+ <h3 class="mdTxt">{{ agentInfo.avgReviews }}</h3>
+ </el-row>
+ <el-row
+ type="flex"
+ class="pt-10"
+ justify="center">
+ <h3 class="mdTxt">{{ agentName }}</h3>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField span="12" icon="agent" label="����">
+ {{ agentInfo.title }}
+ </UiField>
+ <UiField span="12" icon="phone" label="�閰�">
+ {{ agentInfo.phoneNumber }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="company" label="�����">
+ {{ agentInfo.serveArea }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="address" label="�����">
+ {{ agentInfo.companyAddress }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField span="12" icon="time" label="��敺�����">
+ {{ agentInfo.lastestLoginTime }}
+ </UiField>
+ <UiField span="12" icon="calender" label="����風">
+ {{ agentInfo.seniority }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <el-col :span="24" class="pam-field">
+ <div class="pam-field-label pam-progress-label">
+ <div>
+ <div class="pam-field-title">
+ <i class="pam-icon icon-agent"></i>���漲(�銝���� icon) <i class="text--primary icon-information"></i>
+ </div>
+ </div>
+ <div class="xsTxt">
+ {{ agentInfo.suitability }}%
+ </div>
+ </div>
+ <div class="pam-field-content pam-field-suitability pt-10">
+ <el-progress
+ :show-text="false"
+ :text-inside="true"
+ :stroke-width="15"
+ :percentage="agentInfo.suitability"></el-progress>
+ </div>
+ </el-col>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <el-col :span="24" class="pam-field">
+ <div class="pam-field-label pam-progress-label">
+ <div>
+ <div class="pam-field-title">
+ <i class="pam-icon icon-thumbs-up"></i>隢株岷摨西”� <i class="text--primary icon-information"></i>
+ </div>
+ </div>
+ <div class="xsTxt">
+ {{ agentInfo.evaluation }}/50 (餈����/蝝航��)
+ </div>
+ </div>
+ <div class="pam-field-content pam-field-evaluation pt-10">
+ <el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation"></el-progress>
+ </div>
+ </el-col>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="flag" label="撠����">
+ <div class="pam-field-experts">
+ <div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
+ #{{ expert }}
+ </div>
+ </div>
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="comment" label="�犖��艙">
+ {{ agentInfo.concept }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="school" label="�犖��">
+ <span v-for="(experience, index) in agentInfo.experiences" :key="index">
+ {{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
+ </span>
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ class="mt-30">
+ <UiField icon="trophy" label="敺��風">
+ {{ agentInfo.awards }}
+ </UiField>
+ </el-row>
+
+ <el-row
+ type="flex"
+ justify="center"
+ class="mt-30">
+ <el-button>+ 憿批��</el-button>
+ <el-button type="primary">�脰����</el-button>
+ </el-row>
+
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class AgentInfoComponent extends Vue {
+ agentInfo: AgengInfo = {
+ 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撟港摩璅�之��雿單平�� ����嚗犖頨思�璆剖�霅��馳�隞�霅�犖頨思�隞���犖霅�瓷�靽隞���犖霅'
+ }
+
+ get agentName(): string {
+ return `${this.agentInfo.name}(${this.agentInfo.role})`;
+ }
+}
+
+interface AgengInfo {
+ name: string;
+ role: string;
+ avgReviews: number;
+ title: string;
+ phoneNumber: string;
+ serveArea: string;
+ companyAddress: string;
+ lastestLoginTime: Date;
+ seniority: string;
+ suitability: number;
+ evaluation: number;
+ expertises: string[];
+ concept: string;
+ experiences: string[];
+ awards: string;
+}
+</script>
+
+<style lang="scss">
+.pam-icon {
+ font-size: 15px;
+ padding-right: 8px;
+ color: #68737A;
+ &.icon-primary {
+ color: #ED1B2E;
+ }
+}
+.pam-field {
+ display: flex;
+ flex-direction: column;
+ .pam-field-label {
+ display: flex;
+ align-items: center;
+ .pam-icon {
+ font-size: 12px;
+ }
+ .pam-field-title {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ }
+}
+
+.pam-field-suitability {
+ .el-progress-bar__inner {
+ background-color: #8DB9CA !important;
+ }
+}
+
+.pam-field-evaluation {
+ .el-progress-bar__inner {
+ background-color: #5CB8B2 !important;
+ }
+}
+
+.pam-field-experts {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.pam-progress-label {
+ justify-content: space-between;
+}
+
+</style>
--
Gitblit v1.8.0