From c294aaef78509c888cbd133f0841467d1803e8c2 Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期四, 10 二月 2022 14:18:02 +0800 Subject: [PATCH] update: [顧問-帳號資訊, 編輯帳號資訊] 優化畫面 --- PAMapp/pages/agentInfo/edit/_agentNo.vue | 108 ++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 68 insertions(+), 40 deletions(-) diff --git a/PAMapp/pages/agentInfo/edit/_agentNo.vue b/PAMapp/pages/agentInfo/edit/_agentNo.vue index f0bc55f..a79b577 100644 --- a/PAMapp/pages/agentInfo/edit/_agentNo.vue +++ b/PAMapp/pages/agentInfo/edit/_agentNo.vue @@ -1,5 +1,6 @@ <template> <div class="edit-agent-info-page"> + <el-row type="flex" justify="center"> @@ -7,20 +8,42 @@ :agentNo="agentInfo.agentNo" :photoBase64.sync="editInfoValue.photoBase64"/> </el-row> - <el-row + + <!-- NOTE: ���蝺刻摩��銝�閬*蝷� avgScore嚗���� [Tomas, 2022/2/10 13:55] --> + <!-- <el-row type="flex" class="pt-10" justify="center" align="middle" v-if="!hideReviews"> <i class="pam-icon icon--primary icon-star"></i> <h3 class="mdTxt">{{ agentInfo.avgScore }}</h3> - </el-row> + </el-row> --> - <el-row + <!-- <el-row type="flex" class="pam-paragraph" justify="center"> <el-input class="mdTxt" v-model="editInfoValue.name"></el-input> + </el-row> --> + <el-row + type="flex" + class="pam-paragraph"> + <el-col :span="24" class="pam-field"> + <div class="pam-field__label pam-progress__label"> + <div> + <div class="pam-field__title mb-10"> + <i class="pam-icon icon-avatar" + ></i>憿舐內��迂 + <span class="hint text--bold" v-show="!editInfoValue.name">憿舐內��迂�敹‵</span> + </div> + </div> + <el-input + v-model="editInfoValue.name" + :class="{'is-invalid': !nameValid}" + maxlength="10" + minlength="10"></el-input> + </div> + </el-col> </el-row> <el-row @@ -49,8 +72,8 @@ <el-row type="flex" class="pam-paragraph"> - <UiField :span="12" icon="agent" label="����"> - <el-input v-model="editInfoValue.title"></el-input> + <UiField :span="24" icon="agent" label="����"> + <el-input v-model="editInfoValue.title" class="mt-10"></el-input> </UiField> </el-row> @@ -71,7 +94,7 @@ type="flex" class="pam-paragraph"> <UiField icon="address" label="�����"> - <el-input v-model="editInfoValue.companyAddress"></el-input> + <el-input v-model="editInfoValue.companyAddress" class="mt-10"></el-input> </UiField> </el-row> @@ -81,20 +104,22 @@ <UiField :span="12" icon="time" label="��敺�����"> {{ agentInfo.latestLoginTime | formatDate }} </UiField> - <UiField :span="12" icon="calender" label="����風" style="display:flex"> - <el-input v-model="editInfoValue.seniorityYear" class="seniority-input"></el-input>撟� - <el-select style="width:60px" v-model="editInfoValue.seniorityMonth" class="seniority-input"> - <el-option - v-for="(month) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" - :value="month" - :key="month"> - {{ month }} - </el-option> - </el-select>��� + <UiField :span="12" icon="calender" label="����風"> + <div class="mt-10" style="display: flex; align-items: center"> + <el-input v-model="editInfoValue.seniorityYear" class="seniority-input" ></el-input>撟� + <el-select style="width:60px" v-model="editInfoValue.seniorityMonth" class="seniority-input"> + <el-option + v-for="(month) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" + :value="month" + :key="month"> + {{ month }} + </el-option> + </el-select>��� + </div> </UiField> </el-row> - <el-row + <!-- <el-row type="flex" class="pam-paragraph"> <el-col :span="24" class="pam-field"> @@ -113,7 +138,7 @@ <el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation * 2"></el-progress> </div> </el-col> - </el-row> + </el-row> --> <el-row type="flex" @@ -127,9 +152,9 @@ </div> </div> <MultiSelectBtn class="mt-30" - :mutiSelect.sync="editInfoValue.communicationStyle" - :options="agentCommunicationStyleList" - :maxLength="2" + :mutiSelect.sync="editInfoValue.communicationStyle" + :options="agentCommunicationStyleList" + :maxLength="2" > </MultiSelectBtn> </div> @@ -148,8 +173,8 @@ </div> </div> <MultiSelectBtn class="mt-30" - :mutiSelect.sync="editInfoValue.expertise" - :options="agentExpertList" + :mutiSelect.sync="editInfoValue.expertise" + :options="agentExpertList" > </MultiSelectBtn> </div> @@ -160,7 +185,7 @@ type="flex" class="pam-paragraph"> <UiField icon="comment" label="�犖��艙"> - <el-input type="textarea" autosize v-model="editInfoValue.concept"></el-input> + <el-input type="textarea" autosize v-model="editInfoValue.concept" class="mt-10"></el-input> </UiField> </el-row> @@ -168,7 +193,12 @@ type="flex" class="pam-paragraph"> <UiField icon="school" label="�犖��"> - <el-input type="textarea" autosize v-model="editInfoValue.experiences"></el-input> + <el-input + autosize + type="textarea" + class="mt-10" + v-model="editInfoValue.experiences"> + </el-input> </UiField> </el-row> @@ -176,7 +206,7 @@ type="flex" class="pam-paragraph"> <UiField icon="trophy" label="敺��風"> - <el-input type="textarea" autosize style="height:70%" v-model="editInfoValue.awards"></el-input> + <el-input type="textarea" autosize style="height:70%" v-model="editInfoValue.awards" class="mt-10"></el-input> </UiField> </el-row> @@ -383,13 +413,18 @@ this.fieldInfoTitle = '���漲'; this.fieldInfoDesc = '���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��'; break; - case 'evaluation': - this.fieldInfoTitle = '隢株岷摨西”�'; - this.fieldInfoDesc = '隢株岷摨西”��撠��雿�憿批�������垣閰X���脰�������蝯行�����潦��'; - break; + // case 'evaluation': + // this.fieldInfoTitle = '隢株岷摨西”�'; + // this.fieldInfoDesc = '隢株岷摨西”��撠��雿�憿批�������垣閰X���脰�������蝯行�����潦��'; + // break; } } + //////////////////////////////////////////////////////////// + get nameValid(): boolean { + return !!this.editAgentInfoSetting.name; + } + get phoneValid(): boolean { const rule = /^09[0-9]{8}$/; return this.editInfoValue.phoneNumber @@ -414,12 +449,8 @@ </script> -<style lang="scss" > -.edit-agent-info-page{ - .el-textarea__inner{ - font-size: 15px; -} -} +<style lang="scss"> + .pam-icon { font-size : 15px; padding-right: 8px; @@ -474,14 +505,11 @@ } .seniority-input{ - width : 50px; + width : 60px; margin-right: 5px; } .el-input--suffix .el-input__inner { padding-right: 20px; } -.el-textarea__inner{ - font-size: 18px; -} </style> -- Gitblit v1.8.0