Skip to content

B
boyueCEnd
Commit f2b398d3 authored by youjie's avatar youjie
Browse files
Options

调整账户中心

parent 38cade87
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 84 deletions
src/router/index.ts
View file @ f2b398d3
......@@ -39,9 +39,31 @@ const router = createRouter({
component: () => import ('../views/personalCenter/myCoupon.vue')
},
{
path: '/accountCenter/:type/:reType?',//账号中心
path: '/accountCenter',//账号中心
meta: { title: "page.accountCenter" },
component: () => import ('../views/personalCenter/accountCenter.vue')
component: () => import ('../views/personalCenter/accountCenter.vue'),
children: [
{
path: '/basicInfor',//基础资料
meta: { title: "page.basicInfor" },
component: () => import ('../views/personalCenter/accountPage/basicInfor.vue')
},
{
path: '/account/:reType?',//账户
meta: { title: "page.account" },
component: () => import ('../views/personalCenter/accountPage/account.vue')
},
{
path: '/passengerList',//乘客列表
meta: { title: "page.passengerList" },
component: () => import ('../views/personalCenter/accountPage/passengerList.vue')
},
{
path: '/mailingAddressList',//邮寄地址列表
meta: { title: "page.mailingAddressList" },
component: () => import ('../views/personalCenter/accountPage/mailingAddressList.vue')
},
]
},
{
path: '/distributionCenter',//分销中心
......
src/views/auth/forgePassword.vue
View file @ f2b398d3
......@@ -234,7 +234,7 @@ const goPage = (path:string) => {
router.push(path)
return
}
router.push('/accountCenter/1')
router.push('/basicInfor')
}
// 验证邮箱是否可用
......@@ -371,7 +371,7 @@ const handleSubmit = async () => {
// 延迟跳转到登录页
setTimeout(() => {
if(params&&params.email){
router.push('/accountCenter/1')
router.push('/basicInfor')
}else{
router.push('/login')
}
......
src/views/personalCenter/accountCenter.vue
View file @ f2b398d3
......@@ -5,30 +5,24 @@
<div class="flex pl-[13px]">
<div v-for="(item,index) in TitleBars"
class="myOrder-status mr-[42px] py-[22px] cursor-pointer relative"
:class="[current==item.value?'active font-medium':'font-light',index?'ml-[42px]':null]"
@click="changeStatus(item.value)">{{ item.label }}
:class="[activeMenu==item.key?'active font-medium':'font-light',index?'ml-[42px]':null]"
@click="changeStatus(item.path)">{{ item.label }}
<div class="myOrder-status-border absolute left-0 bottom-0 w-full flex justify-center">
<div></div>
</div>
</div>
</div>
<a-divider class="!m-[0]"/>
<a-scrollbar v-if="current<3" class="max-h-[735px] mt-[20px] overflow-auto"
ref="scrollContainer">
<basicInfor v-if="current==1"></basicInfor>
<account v-if="current==2"></account>
</a-scrollbar>
<div v-else class="max-h-[735px] mt-[20px]">
<passengerList v-if="current==3"></passengerList>
<mailingAddressList v-if="current==4"></mailingAddressList>
</div>
<main class="max-h-[735px] mt-[20px] overflow-auto">
<router-view />
</main>
</a-spin>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useRouter,useRoute } from 'vue-router'
import account from "./components/accountCenter/account.vue"
import basicInfor from "./components/accountCenter/basicInfor.vue"
import passengerList from "./components/accountCenter/passengerList.vue"
......@@ -36,35 +30,47 @@ import mailingAddressList from "./components/accountCenter/mailingAddressList.vu
const { t } = useI18n();
const router = useRouter()
const route = useRoute()
const { params } = router.currentRoute.value
const loading = ref(true)
const current = ref(1)
if(params&&params.type){
current.value = Number(params.type)
}
const TitleBars = [
{
label: t('personal.basicInfo'),
value: 1
},
value: 1,
path: '/basicInfor',
key: 'basicInfor'
},
{
label: t('personal.accountInfor'),
value: 2
value: 2,
path: '/account',
key: 'account'
},
{
label: t('personal.commonPassenger'),
value: 3
value: 3,
path: '/passengerList',
key: 'passengerList'
},
{
label: t('personal.postAddress'),
value: 4
value: 4,
path: '/mailingAddressList',
key: 'mailingAddressList'
}
]
const changeStatus = (value: number) => {
current.value = value
// 当前激活的菜单
const activeMenu = computed(() => {
const path = route.path
const menu = TitleBars.find(item => path.startsWith(item.path))
return menu?.key || ''
})
const changeStatus = (path: string) => {
router.push(path)
}
onMounted(async () => {
......
src/views/personalCenter/components/accountCenter/account.vue → src/views/personalCenter/accountPage/account.vue
View file @ f2b398d3
<template>
<div v-if="userInfor?.email" class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="h-full overflow-auto">
<div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="w-[102px] mr-[43px]">
<div class="customPrimary-bg-7 rounded-full w-[50px] h-[50px] flex justify-center items-center">
<img class="w-[29px] h-[36px]" src="../../../../assets/images/personal/mm.png" alt="" />
<img class="w-[29px] h-[36px]" src="../../../assets/images/personal/mm.png" alt="" />
</div>
</div>
<div class="text-sm w-[200px]">
......@@ -26,7 +27,7 @@
<div class="w-[325px] customColor-text-7">{{ t('personal.passwordSecurityTip') }}</div>
</div>
<div class="flex-1 flex justify-end items-end">
<a-button @click="goPage('/perForgePassword/'+userInfor.email)"
<a-button @click="goPage('/perForgePassword/'+userInfor?.email)"
type="primary"
size="large"
class="acc-button !h-[34px] !rounded-[8px] !text-sm !px-[13px]">
......@@ -40,31 +41,10 @@
</a-button>
</div>
</div>
<!-- <div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="w-[102px] mr-[43px]">
<div class="customPrimary-bg-7 rounded-full w-[50px] h-[50px] flex justify-center items-center">
<img class="w-[24px] h-[35px]" src="../../../../assets/images/personal/sj.png" alt="" />
</div>
</div>
<div class="text-sm w-[200px] font-medium">
<span :class="[userInfor?.phone?'':'customColor-text-7']">{{ userInfor?.phone?userInfor.phone:t('personal.notYetBin') }}</span>
</div>
<div class="w-[415px] leading-[20px] SourceHanSansCN">
<div class="customColor-text-7">{{ t('personal.bindPhoneTip') }}</div>
</div>
<div class="flex-1 flex justify-end items-end">
<a-button
type="primary"
size="large"
class="acc-button !h-[34px] !rounded-[8px] !text-sm !px-[13px]">
<span class="customPrimary-6 font-medium ">{{userInfor?.phone?t('personal.changeBindData'):t('personal.goBind')}}</span>
</a-button>
</div>
</div> -->
<div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="w-[102px] mr-[43px]">
<div class="customPrimary-bg-7 rounded-full w-[50px] h-[50px] flex justify-center items-center">
<img class="w-[35px] h-[25px]" src="../../../../assets/images/personal/email.png" alt="" />
<img class="w-[35px] h-[25px]" src="../../../assets/images/personal/email.png" alt="" />
</div>
</div>
<div class="text-sm w-[200px] font-medium">
......@@ -86,7 +66,7 @@
<div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="w-[102px] mr-[43px]">
<div class="rounded-full w-[52px] h-[52px] flex justify-center items-center">
<img class="w-[42px] h-[35px]" src="../../../../assets/images/personal/wx.png" alt="" />
<img class="w-[42px] h-[35px]" src="../../../assets/images/personal/wx.png" alt="" />
</div>
</div>
<div class="text-sm w-[200px] font-medium">
......@@ -106,7 +86,7 @@
</div>
<div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="rounded-full w-[102px] h-[50px] flex justify-center items-center mr-[43px]">
<img class="w-[102px]" src="../../../../assets/images/personal/google.png" alt="" />
<img class="w-[102px]" src="../../../assets/images/personal/google.png" alt="" />
</div>
<div class="text-sm w-[200px] font-medium">
<span :class="[GoogleInfor?'':'customColor-text-7']">{{ GoogleInfor?GoogleInfor.providerDisplayName:t('personal.notYetBin') }}</span>
......@@ -134,7 +114,7 @@
</div>
<div class="accountCenter rounded-[14px] border-[1px] mb-[28px] flex items-center py-[30px] pl-[43px] pr-[35px]">
<div class="rounded-full w-[102px] h-[52px] flex items-center mr-[43px]">
<img class="w-[43px] h-[41px] ml-[11px]" src="../../../../assets/images/personal/line.png" alt="" />
<img class="w-[43px] h-[41px] ml-[11px]" src="../../../assets/images/personal/line.png" alt="" />
</div>
<div class="text-sm w-[200px] font-medium">
<span :class="[LnlineInfor?'':'customColor-text-7']">{{ LnlineInfor?LnlineInfor.providerDisplayName:t('personal.notYetBin') }}</span>
......@@ -151,6 +131,7 @@
</a-button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref,reactive, onMounted, watch } from 'vue'
......@@ -248,7 +229,7 @@ const loginWithLine = () => {
// https://www.oytour.com/#/login/2/3
console.log(openInfo.value,'----------')
// return
const redirectUri = encodeURIComponent(openInfo.value.redirectUri || 'http://localhost:8002/accountCenter/2/3'); // 替换为你的重定向 URI
const redirectUri = encodeURIComponent(openInfo.value.redirectUri || 'http://localhost:8002/account/3'); // 替换为你的重定向 URI
const state = generateState(); // 防止 CSRF 攻击，生成随机的 state 参数
// 构造 LINE 授权 URL
const lineLoginUrl = `https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=${channelId}&redirect_uri=${redirectUri}&state=${state}&scope=openid%20profile`;
......@@ -264,7 +245,7 @@ const useLineBind = async(code:string) => {
Message.success(t('personal.bindWechatSuccess'))
getPersonalInfor()
}else if(response.status == 'ERROR'){
router.push('/accountCenter/2')
router.push('/account')
}
}catch (error: any) {
Message.error(error.message)
......@@ -274,7 +255,7 @@ const useLineBind = async(code:string) => {
}
// 微信授权
const loginWechat = () => {
const redirect_url = openInfo.value.redirectUri || 'http://localhost:8002/accountCenter/2/2'
const redirect_url = openInfo.value.redirectUri || 'http://localhost:8002/account/2'
const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${openInfo.value.appId}&redirect_uri=${encodeURIComponent(redirect_url)}&response_type=code&scope=snsapi_login&state=${1}&wechat_redirect=${redirect_url}`;
window.location.href = url;
}
......@@ -287,7 +268,7 @@ const useWechatBind = async(code:string) => {
Message.success(t('personal.bindWechatSuccess'))
getPersonalInfor()
}else if(response.status == 'ERROR'){
router.push('/accountCenter/2')
router.push('/account')
}
}catch (error: any) {
Message.error(error.message)
......
src/views/personalCenter/components/accountCenter/basicInfor.vue → src/views/personalCenter/accountPage/basicInfor.vue
View file @ f2b398d3
<template>
<div class="w-full">
<a-space direction="vertical" class="w-full">
<div class="w-full h-full overflow-auto">
<a-space direction="vertical" class="w-full">
<!-- horizonta -->
<a-form :model="formData" :rules="rules" layout="vertical" class="w-full">
<a-form :model="formData" :rules="rules" layout="vertical" class="w-full">
<a-row class="w-full">
<a-col :span="24">
<a-form-item field="" :label="t('personal.photo')">
......@@ -10,9 +10,8 @@
<div>
<div class="w-[100px] h-[100px] rounded-full bg-[#f5f5f5] border-[2px] border-[#E3E6DA]">
<img :src="formData?.photo
||systemConfigStore.config?.logo
||'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'"
class="w-full h-full rounded-full" alt="avatar">
||systemConfigStore?.config?.logo ||'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'"
class="w-full h-full rounded-full bg-[#f5f5f5] object-cover" alt="avatar">
</div>
</div>
<div class="ml-[37px]">
......@@ -154,14 +153,14 @@
</a-row>
</a-form>
</a-space>
<!-- 图片预览 -->
<a-image-preview
v-model:visible="previewVisible"
:src="previewUrl"
:actions-layout="['rotateLeft', 'rotateRight', 'zoomIn', 'zoomOut', 'originalSize']"
/>
</a-form>
</a-space>
<!-- 图片预览 -->
<a-image-preview
v-model:visible="previewVisible"
:src="previewUrl"
:actions-layout="['rotateLeft', 'rotateRight', 'zoomIn', 'zoomOut', 'originalSize']"
/>
</div>
</template>
<script setup lang="ts">
......
src/views/personalCenter/accountPage/editEmail.vue
View file @ f2b398d3
......@@ -11,7 +11,7 @@
<a-form-item field="" label="" class="">
<div class="flex justify-center relative">
<div class="flex justify-center items-center absolute left-[-300px] top-[5px]"
@click="goPage('/accountCenter/2')">
@click="goPage('/account')">
<div class="flex items-center justify-center cursor-pointer">
<icon-left class="font-semibold" size="20" strokeLinejoin="miter" />
<span class="text-base ml-[9px]">{{ t('personal.return') }}</span>
......@@ -438,7 +438,7 @@ const handleSubmit = async () => {
if(params&&params.forward){
goPage(`/${params.forward}`)
}else{
goPage('/accountCenter/2')
goPage('/account')
}
}
} catch (error: any) {
......
src/views/personalCenter/accountPage/perForgePassword.vue
View file @ f2b398d3
......@@ -11,7 +11,7 @@
<a-form-item field="" label="" class="">
<div class="flex justify-center relative">
<div class="flex justify-center items-center absolute left-[-300px] top-[5px]"
@click="currentStep==1?goPage('/accountCenter/2'):handlePrevious()">
@click="currentStep==1?goPage('/account'):handlePrevious()">
<div class="flex items-center justify-center cursor-pointer">
<icon-left class="font-semibold" size="20" strokeLinejoin="miter" />
<span class="text-base ml-[9px]">{{ currentStep==1?t('personal.return'):t('personal.returnStep') }}</span>
......@@ -255,7 +255,7 @@ const goPage = (path:string) => {
router.push(path)
return
}
router.push('/accountCenter/2')
router.push('/account')
}
// 验证邮箱是否可用
......@@ -392,7 +392,7 @@ const handleSubmit = async () => {
// currentStep.value ++
// 延迟跳转
setTimeout(() => {
router.push('/accountCenter/2')
router.push('/account')
}, 2000)
} catch (error: any) {
Message.error(error.message || t('login.resetFailed'))
......
src/views/personalCenter/accountPage/resetPassword.vue
View file @ f2b398d3
......@@ -12,7 +12,7 @@
<a-form-item field="" label="" class="">
<div class="flex justify-center relative">
<div class="flex justify-center items-center absolute left-[-300px] top-[5px]"
@click="goPage('/accountCenter/2')">
@click="goPage('/account')">
<div class="flex items-center justify-center cursor-pointer">
<icon-left class="font-semibold" size="20" strokeLinejoin="miter" />
<span class="text-base ml-[9px]">{{ t('personal.return') }}</span>
......@@ -372,7 +372,7 @@ const handleSubmit = async () => {
Message.success(t('login.resetSuccess'))
// 延迟跳转到登录页
setTimeout(() => {
goPage('/accountCenter/2')
goPage('/account')
}, 2000)
} catch (error: any) {
Message.error(error.message || t('login.resetFailed'))
......
src/views/personalCenter/components/LeftView.vue
View file @ f2b398d3
......@@ -11,7 +11,7 @@
</div>
<div class="mt-[13px] text-lg font-medium text-center truncate">{{ userInfo?.name || '' }}</div>
<div class="flex justify-center items-center mt-[10px] cursor-pointer"
@click="goPage('/accountCenter/1')">
@click="goPage('/basicInfor')">
<span v-if="!userInfo?.IsComplete" class="LeftViewTisp w-[6px] h-[6px] rounded-full"></span>
<span class="LeftViewData ml-[5px] text-sm font-medium text-[#666]">
{{ t('personal.completeProfile') }}
......
src/views/personalCenter/index.vue
View file @ f2b398d3
......@@ -27,6 +27,9 @@ const route = useRoute()
const activeMenu = computed(() => {
const path = route.path
const menu = menuList.value.find(item => path.startsWith(item.path))
if(path=='/account'||path=='/passengerList'||path=='/mailingAddressList'){
return 'basicInfor'
}
return menu?.key || 'myOrder'
})
......@@ -55,8 +58,8 @@ const menuList = ref([
},
{
name: t('personal.menu.accountCenter'),
path: '/accountCenter/1',
key: 'accountCenter',
path: '/basicInfor',
key: 'basicInfor',
},
{
name: t('personal.menu.distributionCenter'),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment