| | |
| | | <template> |
| | | <div> |
| | | <div class="edit-agent-info-page"> |
| | | <el-row |
| | | type="flex" |
| | | justify="center"> |
| | | <EditConsultantAvatar :agentNo="agentInfo.agentNo" :photoBase64.sync="editInfoValue.photoBase64"/> |
| | | <EditConsultantAvatar |
| | | :agentNo="agentInfo.agentNo" |
| | | :photoBase64.sync="editInfoValue.photoBase64"/> |
| | | </el-row> |
| | | <el-row |
| | | type="flex" |
| | |
| | | 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-phone" |
| | | ></i>手機號碼 |
| | | <span class="hint text--bold" v-show="!phoneValid">手機號碼格式有誤</span> |
| | | <span class="hint text--bold" v-show="editInfoValue.phoneNumber.length === 0">手機號碼為必填</span> |
| | | </div> |
| | | </div> |
| | | <el-input |
| | | v-model="editInfoValue.phoneNumber" |
| | | :class="{'is-invalid': !phoneValid}" |
| | | maxlength="10" |
| | | minlength="10"></el-input> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | |
| | | <el-row |
| | | type="flex" |
| | |
| | | <MultiSelectBtn class="mt-30" |
| | | :mutiSelect.sync="editInfoValue.communicationStyle" |
| | | :options="agentCommunicationStyleList" |
| | | @change="selectCommunicationStyles" |
| | | :maxLength="2" |
| | | > |
| | | </MultiSelectBtn> |
| | | </div> |
| | |
| | | |
| | | @Component |
| | | export default class AgentInfoComponent extends Vue { |
| | | @Prop({type:Object ,}) aa!:any; |
| | | |
| | | @localStorageTest.State('current_role') |
| | | currentRole!:string | null; |
| | | |
| | |
| | | awards : '', |
| | | communicationStyle: [] as string[], |
| | | photoBase64 : '', |
| | | phoneNumber : '' |
| | | }; |
| | | |
| | | communicationStyleList: string[] = agentCommunicationStyleList; |
| | | role = Role; |
| | | |
| | | agentExpertList = [ |
| | | { |
| | | title:'健康與保障', |
| | |
| | | this.setAgentInfo(this.agentInfo); |
| | | } |
| | | |
| | | ///////////////////////////////////////////////////////////////////////////// |
| | | private setAgentInfo(agentInfo: AgentInfo): void { |
| | | const [agentYear, _yearUnit , agentMonth, _monthUnit] = agentInfo.seniority.split(" "); |
| | | this._agentInfoSetting = { |
| | |
| | | } |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | editAgentInfoSetting(): void { |
| | | const editSettingInfo: any = { |
| | | ...this.editInfoValue, |
| | | communicationStyle: this.editInfoValue.communicationStyle.join('、'), |
| | | } |
| | | accountSettingService.editAgentInfoSetting(editSettingInfo).then((res: AgentInfoSetting) => { |
| | | console.log(editSettingInfo) |
| | | this.isInfoUpdate = true; |
| | | }); |
| | | this.isInfoUpdate = true; |
| | | } |
| | | |
| | | backToInfo() { |
| | | this.isInfoUpdate = false |
| | | this.$router.push(`/agentInfo/${this.agentInfo.agentNo}`); |
| | | } |
| | | } |
| | | |
| | | selectCommunicationStyles(): void { |
| | | if (this.editInfoValue.communicationStyle.length > 2) { |
| | | this.editInfoValue.communicationStyle.shift(); |
| | | } |
| | | } |
| | | |
| | | alertFieldInfo(field: string): void { |
| | | this.isAlertFieldInfo = true; |
| | | switch(field) { |
| | |
| | | } |
| | | } |
| | | //////////////////////////////////////////////////////////// |
| | | get phoneValid(): boolean { |
| | | const rule = /^09[0-9]{8}$/; |
| | | return this.editInfoValue.phoneNumber |
| | | ? rule.test(this.editInfoValue.phoneNumber) && _.isEqual(this.editInfoValue.phoneNumber.length,10) |
| | | : true; |
| | | } |
| | | |
| | | get isSubmitBtnDisabled(): boolean { |
| | | const isFormValid = this.editInfoValue.name |
| | | && this.editInfoValue.title |
| | |
| | | && this.editInfoValue.serveArea |
| | | && this.editInfoValue.concept |
| | | && this.editInfoValue.experiences |
| | | && this.editInfoValue.awards |
| | | && this.editInfoValue.phoneNumber.length |
| | | && this.editInfoValue.seniorityYear |
| | | && this.editInfoValue.expertise.length |
| | | && this.editInfoValue.communicationStyle.length; |
| | |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | <style lang="scss" > |
| | | .edit-agent-info-page{ |
| | | .el-textarea__inner{ |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .pam-icon { |
| | | font-size : 15px; |
| | | padding-right: 8px; |
| | |
| | | .el-input--suffix .el-input__inner { |
| | | padding-right: 20px; |
| | | } |
| | | |
| | | .el-textarea__inner{ |
| | | font-size: 18px; |
| | | } |
| | | </style> |