test_lgq/web/pages/member/center.vue
2024-01-24 17:36:08 +08:00

123 lines
4.4 KiB
Vue

<template>
<div class="w-full h-full bg-page pt-6">
<div class="main-container flex justify-between">
<sidebar></sidebar>
<el-card class="box-card flex-1 ml-4" v-loading="loading" shadow="never">
<template #header>
<div class="card-header">
<span>{{ t('personageInfo') }}</span>
</div>
</template>
<div class="pr-15" v-if="info">
<el-form :model="info" class="form-wrap" label-width="120px">
<el-form-item :label="t('memberHeadimg')">
<div class="w-full flex justify-between content-center items-center">
<img v-if="!info.headimg" class="w-[80px] h-[80px]" src="@/assets/images/default_headimg.png" alt="">
<img v-else :src="img(info.headimg)" class="w-[80px] h-[80px]" alt="">
<el-upload class="avatar-uploader" :show-file-list="false" v-bind="upload">
<span class="cursor-pointer text-color">{{ t('edit') }}</span>
</el-upload>
</div>
</el-form-item>
<el-form-item :label="t('nickname')">
<div class="w-full flex justify-between content-center">
<span>{{ updateNickname.value }}</span>
<span class="cursor-pointer text-color" @click="updateNickname.modal = true">{{ t('edit')}}</span>
</div>
</el-form-item>
</el-form>
</div>
</el-card>
<el-dialog v-model="updateNickname.modal" :title="t('nickname')">
<el-form :model="info">
<el-form-item>
<el-input v-model="updateNickname.value" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="updateNickname.modal = false">{{ t('cancel') }}</el-button>
<el-button type="primary" @click="updateNicknameConfirm">{{ t('confirm') }}</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import useMemberStore from '@/stores/member'
import useAppStore from '@/stores/app'
import { modifyMember } from '@/api/member'
import { ElMessage, UploadFile, UploadFiles } from 'element-plus'
import request from '@/utils/request'
import storage from '@/utils/storage'
import { getToken } from '@/utils/common'
const memberStore = useMemberStore()
const loading = ref(true)
//会员昵称
const updateNickname = reactive({
modal: false,
value: ''
})
const info = computed(() => {
updateNickname.value = memberStore.info?.nickname;
if (memberStore.info) loading.value = false;
return memberStore.info;
})
const appStore = useAppStore()
definePageMeta({ middleware: 'auth' })
const upload = computed(() => {
const headers: Record<string, any> = {}
headers.token = getToken()
headers['site-id'] = storage.get('siteId') || 1
return {
action: `${request.options.baseURL}/file/image`,
limit: 1,
headers,
onSuccess: (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
let img = uploadFile?.response?.data?.url;
if (response.code == 200) {
modifyMember({
field: 'headimg',
value: img
}).then(() => {
memberStore.info.headimg = img
})
} else {
uploadFile.status = 'fail'
ElMessage({ message: response.msg, type: 'error' })
}
}
}
})
// 修改会员名称
const updateNicknameConfirm = () => {
if (!updateNickname.value) { ElMessage.error('会员昵称不能为空'); return }
modifyMember({
field: 'nickname',
value: updateNickname.value
}).then(res => {
updateNickname.modal = false
})
}
</script>
<style lang="scss" scoped>
.box-card {
border: none !important;
}
::v-deep .form-wrap .el-form-item {
align-items: center;
}
</style>