aida_front/src/component/Account/frontPage/mylnformation.vue

<template>
    <div class="accountEdit_page">
		<div class="accountEdit_page_body">
			<div class="accountEdit_page_body_item generalModel_state">
				<div class="accountEdit_page_body_item_name">{{$t('account.Name')}}:</div>
				<div class="generalModel_state_item" style="display: flex;justify-content: space-between;">
					<a-select
						v-model:value="selectSex"
						size="large"
						optionFilterProp="label"
						style="width: 30%;"
						:options="sexList"
						:placeholder="$t('account.plaseSelectSex')"
						allowClear
						show-search
					></a-select>
					<input class="" style="width: 30%;" :class="{active:!!userDetail.occupation}" type="text" :placeholder="$t('account.plaseFirst')" v-model="surname">
					<input class="" style="width: 30%;" :class="{active:!!userDetail.occupation}" type="text" :placeholder="$t('account.plaseLast')" v-model="givenName">
				</div>
			</div>
			<div class="accountEdit_page_body_item generalModel_state">
				<div class="accountEdit_page_body_item_name">{{$t('account.Country')}}:</div>
				<div class="generalModel_state_item">
					<a-select
                        v-model:value="Country"
                        size="large"
						style="width: 100%;"
                        optionFilterProp="label"
                        :options="countryList"
						:field-names="{ label: locale == 'CHINESE_SIMPLIFIED'?'labelCn':'label' }"
                        placeholder="Please select"
                        allowClear
                        show-search
                    ></a-select>
				</div>
			</div>
			<div class="accountEdit_page_body_item generalModel_state">
				<div class="accountEdit_page_body_item_name">{{$t('account.CompanyName')}}:</div>
				<div class="generalModel_state_item">
					<input type="text" style="width: 100%;" v-model="CompanyName">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="gallery_btn" @click="setSubmit">
					{{$t('account.Submit')}}
				</div>
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { country } from "@/tool/country";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
    },
    setup() {
        const store = useStore();
        const {t,locale} = useI18n();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let accountHomeData:any = reactive({
			Country:'',
			CompanyName:'',
			loadingShow:false,
			countryList:country,
			sexList:computed(()=>{
			  	return[
				 	{label:t('account.Mr'),value:'Mr'},
					{label:t('account.Ms'),value:'Ms'},
					{label:t('account.Miss'),value:'Miss'},
				]  
			}),
			selectSex:null,
			surname:'',
			givenName:'',
		})
		let setSubmit = ()=>{
			let data = {
				country:accountHomeData.Country,
				occupation:accountHomeData.CompanyName,
				title:accountHomeData.selectSex,
				surname:accountHomeData.surname,
				givenName:accountHomeData.givenName,
			}
			if (!data.occupation) {
				message.info(t('account.jsContent7'));
				return;
			}
			if (!data.country) {
				message.info(t('account.jsContent8'));
				return;
			}
			if (!data.title) {
				message.info(t('account.jsContent9'));
				return;
			}
			if (!data.surname) {
				message.info(t('account.jsContent10'));
				return;
			}
			if (!data.givenName) {
				message.info(t('account.jsContent11'));
				return;
			}
			accountHomeData.loadingShow = true
			Https.axiosPost(Https.httpUrls.updateUserInfo,data).
				then((rv:any)=>{
					let value = {
						country:accountHomeData.Country,
						title:accountHomeData.selectSex,
						surname:accountHomeData.surname,
						givenName:accountHomeData.givenName,
					}
					store.commit('upUserDetail',value)
					accountHomeData.loadingShow = false
					message.success(t('account.jsContent13'))
				}).catch((err:any)=>{
					accountHomeData.loadingShow = false
				})
		}
		onMounted(()=>{
			let country = userDetail.value.country
			let CompanyName = userDetail.value.occupation
			let title = userDetail.value.title
			let surname = userDetail.value.surname
			let givenName = userDetail.value.givenName
			accountHomeData.Country = country
			accountHomeData.CompanyName = CompanyName
			accountHomeData.selectSex = title
			accountHomeData.surname = surname
			accountHomeData.givenName = givenName
		})
        return{
           ...toRefs(accountHomeData),
		   userDetail,
		   setSubmit,
		   locale,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.accountEdit_page{
	height: 100%;
	overflow-y: auto;
	padding-bottom: 2rem;
	.accountEdit_page_body{
		width: 100%;
		// width: 85rem;
		.accountEdit_page_body_item{
			display: flex;
			margin-bottom: 2rem;
			flex-direction: column;
			width: 100%;
			align-items: flex-start;
			.generalModel_state_item{
				width: 100%;

			}
			.gallery_btn{
				margin-left: auto;
			}
			textarea{
				padding-left: 11px;
				border-radius: 1.6rem;
				border: 2px solid #D0D0D0;
				width: 100%;
				font-size: 2rem;
			}
			.accountEdit_page_body_item_name{
				color: #000;
				text-align: left;
				font-size: 1.6rem;
				font-weight: 600;
				margin-bottom: 1rem;
			}
		}
		.accountEdit_page_body_item:last-child{
			justify-content: center;
		}
	}
}
</style>