1
This commit is contained in:
65
pages/user/auth.vue
Normal file
65
pages/user/auth.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 实名认证 </span>
|
||||
</template>
|
||||
<el-card shadow="hover" class="my-10 px-2">
|
||||
<el-row :gutter="30" justify="space-between">
|
||||
<el-col :sm="16" :xs="24">
|
||||
<Auth @done="reload"/>
|
||||
</el-col>
|
||||
<el-col :md="5" :xs="24">
|
||||
<div class="w-full mt-2 text-center" v-if="isCheck">
|
||||
<el-alert type="warning" :closable="false" :title="`扫二维码完成实名认证`" />
|
||||
<el-image :src="config.wxQrcode" shape="square" class="mt-2" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import {useConfigInfo} from "~/composables/configState";
|
||||
import {ref} from 'vue'
|
||||
import Auth from './components/Auth.vue';
|
||||
|
||||
// 配置信息
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const activeIndex = ref('');
|
||||
const config = useConfigInfo();
|
||||
const isCheck = ref(true);
|
||||
|
||||
const reload = async (status?: boolean) => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
|
||||
if(status){
|
||||
isCheck.value = false
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `实名认证 - ${config.value?.siteName}`
|
||||
});
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
564
pages/user/components/Auth.vue
Normal file
564
pages/user/components/Auth.vue
Normal file
@@ -0,0 +1,564 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="loading"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
class="w-full sm:py-2 ml-4 mt-1"
|
||||
size="large"
|
||||
status-icon
|
||||
>
|
||||
<el-tabs v-model="form.type">
|
||||
<el-tab-pane :name="0" label="个人认证">
|
||||
<!-- 未完成认证 -->
|
||||
<template v-if="form.status === 0 && form.checkStatus">
|
||||
<el-result
|
||||
icon="warning"
|
||||
title="审核中"
|
||||
:sub-title="`您的申请已提交，请耐心等待工作人员的审核，非常感谢`"
|
||||
>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 已完成认证 -->
|
||||
<template v-if="form.status === 1">
|
||||
<el-result
|
||||
icon="success"
|
||||
title="个人认证已通过"
|
||||
:sub-title="`认证完成时间 ${form.completedTime}`"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="text" @click="onUpdate">修改认证信息</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 申请被驳回 -->
|
||||
<template v-if="form.status === 2">
|
||||
<el-result
|
||||
icon="error"
|
||||
title="您的申请已被驳回"
|
||||
:sub-title="`${form.reason}`"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="text" @click="onUpdate">修改认证信息</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 未提交 -->
|
||||
<template v-if="form.status == 0 && !form.checkStatus">
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="form.phone" disabled maxlength="11" placeholder="请输入真实有效的手机号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名" prop="realName">
|
||||
<el-input v-model="form.realName" placeholder="请输入真实姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="idCard" required>
|
||||
<el-input v-model="form.idCard" placeholder="请输入证件号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证">
|
||||
<el-upload
|
||||
v-model:file-list="sfzFile"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="2"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="sfzRemove"
|
||||
:on-success="sfzSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="category">
|
||||
<el-cascader
|
||||
v-model="industry"
|
||||
:options="industryData"
|
||||
placeholder="请选择所属行业"
|
||||
class="w-full"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务描述" prop="comments">
|
||||
<el-input v-model="form.comments" placeholder="请输入公司业务介绍" :rows="5" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册协议">
|
||||
<el-checkbox v-model="isAgree">
|
||||
请务必提供真实信息，我司有权自行或委托第三方审查您提供的身份信息是否属真实，有效。若提供虚假信息，由此的全部后果由您承担。
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-space class="flex">
|
||||
<el-button type="primary" size="large" :disabled="!isAgree" @click="submitForm(formRef)">
|
||||
{{ isUpdate ? '提交修改' : '提交申请' }}
|
||||
</el-button>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :name="1" label="企业认证">
|
||||
<!-- 未完成认证 -->
|
||||
<template v-if="form.status === 0 && form.checkStatus">
|
||||
<el-result
|
||||
icon="warning"
|
||||
title="审核中"
|
||||
:sub-title="`您的申请已提交，请耐心等待工作人员的审核，非常感谢`"
|
||||
>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 已完成认证 -->
|
||||
<template v-if="form.status === 1">
|
||||
<el-result
|
||||
icon="success"
|
||||
title="企业认证已通过"
|
||||
:sub-title="`认证完成时间 ${form.completedTime}`"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="text" @click="onUpdate">修改认证信息</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 申请被驳回 -->
|
||||
<template v-if="form.status === 2">
|
||||
<el-result
|
||||
icon="error"
|
||||
title="您的申请已被驳回"
|
||||
:sub-title="`${form.reason}`"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="text" @click="onUpdate">修改认证信息</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</template>
|
||||
<!-- 未提交 -->
|
||||
<template v-if="form.status == 0 && !form.checkStatus">
|
||||
<el-form-item label="企业名称" prop="merchantName">
|
||||
<el-input v-model="form.merchantName" placeholder="请输入企业名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="社会信用代码" prop="merchantCode">
|
||||
<el-input v-model="form.merchantCode" placeholder="请输入社会信用代码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业执照" required>
|
||||
<el-upload
|
||||
v-model:file-list="yyzzFile"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="yyzzRemove"
|
||||
:on-success="yyzzOnSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<div class="flex justify-center">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="门头照片">
|
||||
<el-upload
|
||||
v-model:file-list="image"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="imageRemove"
|
||||
:on-success="imageOnSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<div class="flex justify-center">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他证件">
|
||||
<el-upload
|
||||
v-model:file-list="files"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="9"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="filesRemove"
|
||||
:on-success="filesOnSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<div class="flex justify-center">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名" prop="realName">
|
||||
<el-input v-model="form.realName" placeholder="请输入真实姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="form.phone" disabled maxlength="11" placeholder="请输入真实有效的手机号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="idCard" required>
|
||||
<el-input v-model="form.idCard" placeholder="请输入证件号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证">
|
||||
<el-upload
|
||||
v-model:file-list="sfzFile"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="2"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="sfzRemove"
|
||||
:on-success="sfzSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="category">
|
||||
<el-cascader
|
||||
v-model="industry"
|
||||
:options="industryData"
|
||||
placeholder="请选择所属行业"
|
||||
class="w-full"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务描述" prop="comments">
|
||||
<el-input v-model="form.comments" placeholder="请输入公司业务介绍" :rows="5" type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册协议">
|
||||
<el-checkbox v-model="isAgree">
|
||||
请务必提供真实信息，我司有权自行或委托第三方审查您提供的身份信息是否属真实，有效。若提供虚假信息，由此的全部后果由您承担。
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-space class="flex">
|
||||
<el-button type="primary" size="large" :disabled="!isAgree" @click="submitForm(formRef)">
|
||||
{{ isUpdate ? '提交修改' : '提交申请' }}
|
||||
</el-button>
|
||||
</el-space>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<div class="flex justify-center">
|
||||
<el-image w-full :src="dialogImageUrl" alt="查看证件"/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, ref} from 'vue'
|
||||
import {Plus} from '@element-plus/icons-vue'
|
||||
import type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
|
||||
import type {ShopMerchantApply} from "~/api/shop/shopMerchantApply/model";
|
||||
import industryData from '@/assets/json/industry-data.json';
|
||||
import useFormData from "~/utils/use-form-data";
|
||||
import {
|
||||
addShopMerchantApply, getShopMerchantApplyByPhone,
|
||||
getShopMerchantApplyByUserId,
|
||||
updateShopMerchantApply
|
||||
} from "~/api/shop/shopMerchantApply";
|
||||
import {useUser} from "~/composables/configState";
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', status: boolean): void
|
||||
}>()
|
||||
|
||||
const token = useToken();
|
||||
const user = useUser();
|
||||
const formRef = ref<FormInstance>()
|
||||
const yyzzFile = ref<UploadUserFile[]>([])
|
||||
const sfzFile = ref<UploadUserFile[]>([])
|
||||
const sfzStr = ref<string[]>([]);
|
||||
const files = ref<UploadUserFile[]>([])
|
||||
const filesStr = ref<string[]>([])
|
||||
const image = ref<UploadUserFile[]>([])
|
||||
const industry = ref<any[]>([])
|
||||
const loading = ref<boolean>(true)
|
||||
const isUpdate = ref<boolean>(false)
|
||||
const isAgree = ref<boolean>(false)
|
||||
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const {form, assignFields, resetFields} = useFormData<ShopMerchantApply>({
|
||||
applyId: undefined,
|
||||
type: 0,
|
||||
merchantName: undefined,
|
||||
merchantCode: undefined,
|
||||
image: undefined,
|
||||
phone: user.value.phone,
|
||||
realName: undefined,
|
||||
idCard: undefined,
|
||||
sfz1: undefined,
|
||||
sfz2: undefined,
|
||||
yyzz: undefined,
|
||||
name2: undefined,
|
||||
shopType: undefined,
|
||||
parentId: undefined,
|
||||
categoryId: undefined,
|
||||
category: undefined,
|
||||
commission: undefined,
|
||||
keywords: undefined,
|
||||
files: undefined,
|
||||
ownStore: undefined,
|
||||
recommend: undefined,
|
||||
completedTime: undefined,
|
||||
goodsReview: undefined,
|
||||
userId: undefined,
|
||||
comments: undefined,
|
||||
reason: undefined,
|
||||
checkStatus: undefined,
|
||||
status: 0,
|
||||
sortNumber: undefined
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<ShopMerchantApply>>({
|
||||
realName: [
|
||||
{required: true, message: '请输入真实姓名', trigger: 'blur'},
|
||||
{min: 2, max: 5, message: '长度应为2-5个字符', trigger: 'blur'},
|
||||
],
|
||||
phone: [
|
||||
{required: true, message: '请输入手机号码', trigger: 'blur'},
|
||||
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
|
||||
],
|
||||
idCard: [
|
||||
{required: true, message: '请输入证件号码', trigger: 'blur'},
|
||||
{min: 18, max: 18, message: '证件号码长度应为18位', trigger: 'blur'},
|
||||
],
|
||||
merchantName: [
|
||||
{required: true, message: '请输入企业名称', trigger: 'blur'}
|
||||
],
|
||||
merchantCode: [
|
||||
{required: true, message: '请输入社会信用代码', trigger: 'blur'}
|
||||
],
|
||||
category: [
|
||||
{required: true, message: '请选择所属行业', trigger: 'change'}
|
||||
]
|
||||
})
|
||||
|
||||
const yyzzRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.yyzz = '';
|
||||
}
|
||||
|
||||
const yyzzOnSuccess = (e: any) => {
|
||||
form.yyzz = e.data.downloadUrl
|
||||
}
|
||||
|
||||
const sfzRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.sfz1 = '';
|
||||
form.sfz2 = '';
|
||||
}
|
||||
|
||||
const sfzSuccess = (e: any) => {
|
||||
sfzStr.value.push(e.data.downloadUrl)
|
||||
}
|
||||
|
||||
const imageOnSuccess = (e: any) => {
|
||||
form.image = e.data.downloadUrl
|
||||
}
|
||||
|
||||
const imageRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.image = '';
|
||||
}
|
||||
|
||||
const filesRemove: UploadProps['onRemove'] = (uploadFile) => {
|
||||
const index = filesStr.value.findIndex(f => f == uploadFile.url);
|
||||
filesStr.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const filesOnSuccess = (e: any) => {
|
||||
filesStr.value.push(e.data.downloadUrl)
|
||||
}
|
||||
|
||||
// 所属行业
|
||||
const handleChange = (value: any) => {
|
||||
let parent = ''
|
||||
let category = ''
|
||||
industryData.map(d => {
|
||||
if (d.value == value[0]) {
|
||||
form.parentId = d.value
|
||||
parent = d.label
|
||||
if (d.children) {
|
||||
d.children.map(c => {
|
||||
if (c.value == value[1]) {
|
||||
category = c.label
|
||||
form.categoryId = c.value
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
form.category = `${parent}/${category}`
|
||||
}
|
||||
|
||||
const onUpdate = () => {
|
||||
form.status = 0;
|
||||
form.checkStatus = false
|
||||
}
|
||||
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
|
||||
await formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
|
||||
console.log('submit!', valid);
|
||||
|
||||
if (form.type === 0) {
|
||||
form.shopType = '个人开发者';
|
||||
form.merchantName = form.realName;
|
||||
}
|
||||
|
||||
if (form.type === 1) {
|
||||
form.shopType = '企业开发者';
|
||||
if (!form.yyzz) {
|
||||
ElMessage.error('请上传营业执照');
|
||||
return;
|
||||
}
|
||||
if (filesStr.value.length > 0) {
|
||||
form.files = JSON.stringify(filesStr.value);
|
||||
}
|
||||
}
|
||||
|
||||
if (sfzStr.value.length < 2) {
|
||||
ElMessage.error('请上传身份证正反面');
|
||||
return;
|
||||
}
|
||||
|
||||
form.sfz1 = sfzStr.value[0];
|
||||
form.sfz2 = sfzStr.value[1];
|
||||
|
||||
const saveOrUpdate = isUpdate.value ? updateShopMerchantApply : addShopMerchantApply;
|
||||
|
||||
try {
|
||||
const res = await saveOrUpdate({
|
||||
...form,
|
||||
files: filesStr.value.length ? JSON.stringify(filesStr.value) : undefined,
|
||||
yyzz: form.yyzz || undefined,
|
||||
sfz1: form.sfz1 || undefined,
|
||||
sfz2: form.sfz2 || undefined,
|
||||
});
|
||||
console.log(res);
|
||||
ElMessage.success('提交成功');
|
||||
await reload()
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const reload = async () => {
|
||||
getShopMerchantApplyByPhone()
|
||||
.then(data => {
|
||||
assignFields(data)
|
||||
industry.value = []
|
||||
industry.value.push(form.parentId)
|
||||
industry.value.push(form.categoryId)
|
||||
files.value = []
|
||||
filesStr.value = []
|
||||
yyzzFile.value = []
|
||||
sfzFile.value = []
|
||||
sfzStr.value = []
|
||||
image.value = []
|
||||
|
||||
// 赋值
|
||||
if (user.value.phone) {
|
||||
form.phone = user.value.phone;
|
||||
}
|
||||
if (form.sfz1) {
|
||||
sfzFile.value.push({
|
||||
uid: 1,
|
||||
url: form.sfz1,
|
||||
name: '身份证正面',
|
||||
})
|
||||
sfzStr.value.push(form.sfz1)
|
||||
}
|
||||
if (form.sfz2) {
|
||||
sfzFile.value.push({
|
||||
uid: 2,
|
||||
url: form.sfz2,
|
||||
name: '身份证反面',
|
||||
})
|
||||
sfzStr.value.push(form.sfz2)
|
||||
}
|
||||
if (form.yyzz) {
|
||||
yyzzFile.value.push({
|
||||
uid: 3,
|
||||
url: form.yyzz,
|
||||
name: '营业执照',
|
||||
})
|
||||
}
|
||||
if (form.image) {
|
||||
image.value.push({
|
||||
uid: 4,
|
||||
url: form.image,
|
||||
name: '',
|
||||
})
|
||||
}
|
||||
if (form.files) {
|
||||
const arr = JSON.parse(form.files)
|
||||
let i = 1;
|
||||
arr.map((item: any) => {
|
||||
files.value.push({
|
||||
uid: i++,
|
||||
url: item,
|
||||
name: '',
|
||||
})
|
||||
filesStr.value.push(item)
|
||||
})
|
||||
}
|
||||
if(form.status == 1){
|
||||
emit('done',true)
|
||||
}
|
||||
isUpdate.value = true
|
||||
})
|
||||
.catch(() => {
|
||||
resetFields();
|
||||
emit('done',false)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
reload();
|
||||
</script>
|
||||
55
pages/user/components/Base.vue
Normal file
55
pages/user/components/Base.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-form :model="form" label-width="auto" size="large" label-position="top">
|
||||
<el-form-item label="租户ID" class="px-4">
|
||||
<el-input disabled v-model="form.tenantId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" class="px-4">
|
||||
<el-input disabled v-model="form.mobile"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名称" class="px-4">
|
||||
<el-input v-model="form.tenantName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" class="px-4">
|
||||
<el-input v-model="form.nickname"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱账号" class="px-4">
|
||||
<el-input v-model="form.email" placeholder="邮箱账号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" class="px-4">
|
||||
<el-radio-group v-model="form.sex">
|
||||
<el-radio value="1">男</el-radio>
|
||||
<el-radio value="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="个人签名" class="px-4">
|
||||
<el-input v-model="form.comments" type="textarea" placeholder="个人签名" :rows="4"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="px-4">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
form?: any;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', where: any): void
|
||||
}>()
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('done')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
45
pages/user/components/Order.vue
Normal file
45
pages/user/components/Order.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="orderId" label="订单号" />
|
||||
<el-table-column prop="comments" label="产品名称" />
|
||||
<el-table-column prop="payPrice" label="订单金额(元)" />
|
||||
<el-table-column prop="month" label="购买时长(月)" />
|
||||
<el-table-column prop="appName" label="应用名称" />
|
||||
<el-table-column prop="createTime" label="下单时间" />
|
||||
<el-table-column prop="action" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button @click="openUrl(`https://${scope.row.tenantId}.websoft.top`,form,scope.row.tenantId,true)">控制台</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import {ref} from "vue";
|
||||
import type {ApiResult, PageResult} from "~/api";
|
||||
import type {OrderGoods} from "~/api/system/orderGoods/model";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
form?: any;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const tableData = ref<OrderGoods[]>([]);
|
||||
|
||||
const {data: response} = await useServerRequest<ApiResult<PageResult<OrderGoods>>>('/system/order-goods/page',{
|
||||
params: {
|
||||
userId: localStorage.getItem('UserId')
|
||||
}
|
||||
})
|
||||
if(response.value?.data){
|
||||
tableData.value = response.value.data.list;
|
||||
console.log(tableData.value,'tableData')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
31
pages/user/components/Password.vue
Normal file
31
pages/user/components/Password.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<el-form :model="form" label-width="auto" size="large" label-position="top">
|
||||
<el-form-item label="旧密码" class="px-4">
|
||||
<el-input v-model="form.oldPassword" placeholder="请输入旧密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" class="px-4">
|
||||
<el-input v-model="form.password" type="password" placeholder="请输入新密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" class="px-4">
|
||||
<el-input v-model="form.password2" type="password" placeholder="请确认新密码" />
|
||||
</el-form-item>
|
||||
<el-form-item class="px-4">
|
||||
<el-button type="primary" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
form?: any;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
60
pages/user/components/UserMenu.vue
Normal file
60
pages/user/components/UserMenu.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<el-space class="hidden-sm-and-down sm:w-[140px] sm:flex sm:mb-0 mb-5 w-full pr-7" direction="vertical">
|
||||
<div class="py-2" v-for="(item,index) in activities" :index="`${item.path}`" :key="index">
|
||||
<el-button :icon="item.icon" link class="text-gray-500" plain @click="navigateTo(item.path)">{{ item.name }}</el-button>
|
||||
</div>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {User,Lock,Postcard,Tickets,SwitchButton} from '@element-plus/icons-vue'
|
||||
import {navigateTo} from "#imports";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
layout?: any;
|
||||
activeIndex?: string;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', index: string): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const activities = [
|
||||
{
|
||||
icon: User,
|
||||
name: '账号信息',
|
||||
path: '/user'
|
||||
},
|
||||
// {
|
||||
// icon: Lock,
|
||||
// name: '密码修改',
|
||||
// path: '/user/password'
|
||||
// },
|
||||
{
|
||||
icon: Postcard,
|
||||
name: '实名认证',
|
||||
path: '/user/auth'
|
||||
},
|
||||
{
|
||||
icon: SwitchButton,
|
||||
name: '退出登录',
|
||||
path: '/user/logout'
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const handleSelect = (index: string) => {
|
||||
emit('done', index)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.custom-menu-item:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
</style>
|
||||
121
pages/user/index.vue
Normal file
121
pages/user/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 用户中心</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<nuxt-link to="/user/modify" class="text-gray-400 text-sm">修改资料</nuxt-link>
|
||||
</template>
|
||||
<div class="login-layout mt-10 sm:w-screen-xl w-full">
|
||||
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
|
||||
<div class="flash bg-white rounded-lg w-full">
|
||||
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
|
||||
<el-descriptions :column="columnClasses" border class="px-4" title="用户资料">
|
||||
<el-descriptions-item
|
||||
label="头像"
|
||||
>
|
||||
<el-image
|
||||
style="width: 70px; height: 70px"
|
||||
:src="user?.avatar"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号码">{{ user?.mobile }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户ID">{{ user?.userId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="昵称">{{ user?.nickname }}</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">{{ user?.sexName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱">{{ user?.email }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="所在省份">{{ user?.province }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="所在城市">{{ user?.city }}</el-descriptions-item>-->
|
||||
<el-descriptions-item label="可用余额">{{ user?.balance }}</el-descriptions-item>
|
||||
<el-descriptions-item label="可用积分">{{ user?.points }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item :rowspan="1" :span="2" label="生日">{{ user?.birthday }}</el-descriptions-item>-->
|
||||
<el-descriptions-item :rowspan="1" :span="2" label="个人签名">
|
||||
<p class="min-h-[60px]">{{ user?.introduction }}</p>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
import {updateUser} from "~/api/layout";
|
||||
|
||||
// 配置信息
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const user = useUser();
|
||||
const activeIndex = ref('');
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
username: undefined,
|
||||
phone: undefined,
|
||||
mobile: undefined,
|
||||
sex: undefined,
|
||||
sexName: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
code: undefined,
|
||||
smsCode: undefined,
|
||||
comments: undefined,
|
||||
remember: true,
|
||||
tenantName: undefined
|
||||
});
|
||||
|
||||
const reload = async () => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
if (user.value) {
|
||||
form.userId = user.value.userId;
|
||||
form.nickname = user.value.nickname;
|
||||
form.realName = user.value.realName;
|
||||
form.mobile = user.value.mobile;
|
||||
form.email = user.value.email;
|
||||
form.sex = user.value.sex;
|
||||
form.comments = user.value.comments;
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
updateUser(form).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
});
|
||||
}
|
||||
|
||||
const columnClasses = computed(() => {
|
||||
const width = window.innerWidth;
|
||||
if (width < 640) { // 小于 640px 时为 1 列
|
||||
return 1;
|
||||
} else { // 大于等于 1024px 时为 4 列
|
||||
return 2;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
34
pages/user/logout.vue
Normal file
34
pages/user/logout.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 退出登录 </span>
|
||||
</template>
|
||||
<div class="login-layout mt-10 sm:w-screen-xl w-full">
|
||||
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import {useToken} from "~/composables/configState";
|
||||
import UserMenu from "~/pages/user/components/UserMenu.vue";
|
||||
import Base from "~/pages/user/components/Base.vue";
|
||||
|
||||
const token = useToken();
|
||||
const router = useRouter();
|
||||
token.value = '';
|
||||
localStorage.clear();
|
||||
setTimeout(() => {
|
||||
navigateTo('/')
|
||||
return;
|
||||
}, 1000)
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
</script>
|
||||
168
pages/user/modify.vue
Normal file
168
pages/user/modify.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 修改资料 </span>
|
||||
</template>
|
||||
<div class="login-layout mt-10 sm:w-screen-xl w-full">
|
||||
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
|
||||
<div class="flash bg-white rounded-lg w-full">
|
||||
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-4">
|
||||
<el-form :model="form" label-width="auto" size="large" label-position="top">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-form-item label="上传头像" class="px-4">
|
||||
<el-upload
|
||||
v-model:file-list="avatar"
|
||||
action="https://server.gxwebsoft.com/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="avatarRemove"
|
||||
:on-success="avatarSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16" :xs="24">
|
||||
<el-form-item label="手机号码" class="px-4">
|
||||
<el-input disabled v-model="form.mobile"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" class="px-4">
|
||||
<el-input v-model="form.nickname"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱账号" class="px-4">
|
||||
<el-input v-model="form.email" placeholder="邮箱账号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" class="px-4">
|
||||
<el-radio-group v-model="form.sex">
|
||||
<el-radio value="1">男</el-radio>
|
||||
<el-radio value="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="个人签名" class="px-4">
|
||||
<el-input v-model="form.introduction" type="textarea" placeholder="个人签名" :rows="4"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="px-4">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
|
||||
import type {UploadProps, UploadUserFile} from 'element-plus'
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
import {updateUser} from "~/api/layout";
|
||||
|
||||
// 配置信息
|
||||
const token = useToken();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const user = useUser();
|
||||
const activeIndex = ref('');
|
||||
const avatar = ref<UploadUserFile[]>([])
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
username: undefined,
|
||||
avatar: undefined,
|
||||
phone: undefined,
|
||||
mobile: undefined,
|
||||
sex: undefined,
|
||||
sexName: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
code: undefined,
|
||||
smsCode: undefined,
|
||||
comments: undefined,
|
||||
introduction: undefined,
|
||||
remember: true,
|
||||
tenantName: undefined
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: `用户中心`
|
||||
});
|
||||
|
||||
const reload = async () => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
if (user.value) {
|
||||
form.userId = user.value.userId;
|
||||
form.nickname = user.value.nickname;
|
||||
form.realName = user.value.realName;
|
||||
form.avatar = user.value.avatar;
|
||||
form.mobile = user.value.mobile;
|
||||
form.email = user.value.email;
|
||||
form.sex = user.value.sex;
|
||||
form.comments = user.value.comments;
|
||||
form.introduction = user.value.introduction
|
||||
avatar.value = []
|
||||
if(form.avatar){
|
||||
avatar.value.push({
|
||||
uid: form.userId,
|
||||
url: form.avatar,
|
||||
name: '用户头像',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.avatar = '';
|
||||
}
|
||||
|
||||
const avatarSuccess = (e: any) => {
|
||||
form.avatar = e.data.downloadUrl
|
||||
}
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
form.tenantId = Number(localStorage.getItem('ServerTenantId'));
|
||||
updateUser(form).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
101
pages/user/order.vue
Normal file
101
pages/user/order.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 我的订单 </span>
|
||||
</template>
|
||||
<div class="login-layout m-auto mt-10 sm:w-screen-xl w-full">
|
||||
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
|
||||
<div class=" bg-white rounded-lg w-full">
|
||||
<div class="flash bg-white rounded-lg px-8 py-4 w-auto">
|
||||
<Order :form="form" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { ref } from 'vue'
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {ApiResult} from "~/api";
|
||||
import UserMenu from "./components/UserMenu.vue";
|
||||
import Order from './components/Order.vue';
|
||||
|
||||
// 配置信息
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const website = useWebsite()
|
||||
const config = useConfigInfo();
|
||||
const token = useToken();
|
||||
const userInfo = ref<User>();
|
||||
const activeIndex = ref('');
|
||||
|
||||
// 配置信息
|
||||
const { form, assignFields } = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
sexName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
code: '',
|
||||
smsCode: '',
|
||||
comments: '',
|
||||
remember: true
|
||||
});
|
||||
|
||||
const tableData = ref<any[]>();
|
||||
|
||||
useHead({
|
||||
title: `用户中心 - ${config.value?.siteName}`
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{
|
||||
baseURL: runtimeConfig.public.apiServer,
|
||||
method: 'put',
|
||||
body: form
|
||||
})
|
||||
if(modify.value?.code == 0){
|
||||
ElMessage.success('修改成功')
|
||||
}
|
||||
}
|
||||
|
||||
const reload = async () => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
// const {data: response} = await useServerRequest<ApiResult<Order>>('/system/order',{baseURL: runtimeConfig.public.apiServer})
|
||||
// if(response.value?.data){
|
||||
// console.log(response.value,'order')
|
||||
// // userInfo.value = response.value?.data;
|
||||
// // assignFields(response.value?.data);
|
||||
// }
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
150
pages/user/password.vue
Normal file
150
pages/user/password.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600"> 用户中心 </span>
|
||||
</template>
|
||||
<div class="login-layout m-auto mt-10 sm:w-screen-xl w-full">
|
||||
<div class="m-auto flex sm:flex-row flex-col sm:px-0">
|
||||
<!-- 用户菜单 -->
|
||||
<UserMenu :activeIndex="activeIndex" @done="onDone" class="sm:flex hidden"/>
|
||||
<div class="flash bg-white rounded-lg w-full">
|
||||
<div class="title text-xl text-gray-700 md:px-8 p-4 md:mt-3 font-500">修改密码</div>
|
||||
<div class="sm:w-screen-md w-full sm:px-4 sm:py-2">
|
||||
<Password :form="form"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
import {useServerRequest} from "~/composables/useServerRequest";
|
||||
import type {ApiResult} from "~/api";
|
||||
import UserMenu from "./components/UserMenu.vue";
|
||||
import Password from './components/Password.vue';
|
||||
import type {CaptchaResult} from "~/api/passport/login/model";
|
||||
|
||||
// 配置信息
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const website = useWebsite()
|
||||
const config = useConfigInfo();
|
||||
const token = useToken();
|
||||
const userInfo = ref<User>();
|
||||
const activeIndex = ref('');
|
||||
|
||||
// 验证码 base64 数据
|
||||
const captcha = ref('');
|
||||
// 验证码内容, 实际项目去掉
|
||||
const text = ref('');
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
sexName: '',
|
||||
email: '',
|
||||
oldPassword: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
code: '',
|
||||
smsCode: '',
|
||||
comments: '',
|
||||
remember: true
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: `用户中心 - ${config.value?.siteName}`
|
||||
});
|
||||
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = async () => {
|
||||
if (!form.phone) {
|
||||
ElMessage.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = text.value;
|
||||
codeLoading.value = true;
|
||||
|
||||
const {data: smsCode} = await useServerRequest<ApiResult<CaptchaResult>>('/sendSmsCaptcha', {
|
||||
baseURL: runtimeConfig.public.apiServer, method: "post", body: {
|
||||
phone: form.phone
|
||||
}
|
||||
});
|
||||
if (smsCode.value) {
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
const {data: modify} = await useServerRequest<ApiResult<User>>('/auth/password', {
|
||||
baseURL: runtimeConfig.public.apiServer,
|
||||
method: 'put',
|
||||
body: form
|
||||
})
|
||||
if (modify.value?.code == 0) {
|
||||
ElMessage.success('修改成功')
|
||||
}
|
||||
}
|
||||
|
||||
const onDone = (index: string) => {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
const reload = async () => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user', {baseURL: runtimeConfig.public.apiServer})
|
||||
if (response.value?.data) {
|
||||
userInfo.value = response.value?.data;
|
||||
assignFields(response.value?.data);
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user