Skip to content

M
million
Commit 209d7096 authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心页相关功能开发

parent 51ed05c5
Hide whitespace changes
Inline Side-by-side
Showing with 863 additions and 3 deletions
src/layouts/HomeLayout.vue
View file @ 209d7096
......@@ -29,8 +29,12 @@
<q-layout view="hHh lpr fFf">
<hor-big-one :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
<q-page-container>
<q-page-container class="flex justify-between">
<div class="flex" v-if="showUserInfo" style="width: 1200px; margin: 0 auto">
<navs></navs>
<router-view />
</div>
<router-view v-else />
</q-page-container>
<div class="goBackTop bg-primary" :class="{'showGoback':isShowTop}" @click="hangleGoUp">
<i class="iconfont iconarrow-top"></i>
......@@ -47,15 +51,18 @@
import horBigTwo from "../components/navs/hor-big-tow";
import horBtm from "../components/navs/hor-btm";
import subscriber from "../components/navs/subscriber";
import Navs from 'src/pages/usercenter/components/navs.vue';
export default {
components: {
horBigOne,
horBigTwo,
horBtm,
subscriber
subscriber,
Navs
},
data() {
return {
showUserInfo: true,
leftDrawerOpen: false,
baseinfo: {
logo: "",
......
src/pages/login.vue
View file @ 209d7096
......@@ -113,7 +113,7 @@
/>
<div v-else class="mt q-mb-sm">
<q-input outlined v-model="loginMsg.MailCode" type="text" />
<div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''">
<div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''" @click="reSend">
{{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
</div>
</div>
......@@ -308,6 +308,14 @@ this.CommonJump("/index", {});
this.mylabel = "登录"
}
},
reSend() {
if(this.cutDown) {
return
}
this.inSending = false
this.isSend = false;
this.sendVerify()
},
sendVerify() {
if(this.inSending) return
this.inSending = true
......
src/pages/usercenter/components/navs.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.user-nav-box {
width: 240px;
}
.avatar {
width: 94px;
height: 94px;
background: #FFFFFF;
border: 2px solid #F0EFEF;
border-radius: 50%;
margin: 0 auto;
display: block;
}
.nav-item {
padding: 10px 30px;
}
</style>
<template>
<div class="user-nav-box">
<div class="bg-white q-mt-lg">
<div class="q-pt-xl">
<img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
<img class="avatar" v-else src="../../../assets/img/avatar.png" />
</div>
<div class="text-primary text-center q-mt-sm">个人信息</div>
<div class="q-mt-xl q-pb-lg">
<div class="nav-item flex justify-between items-center cursor-pointer" v-for="item in menuList" :key="item.key">
<div class="flex items-center">
<i class="iconfont icontime"></i>
<span class="q-ml-lg">{{item.label}}</span></div>
<span class="text-primary">{{item.label}}</span>
</div>
</div>
</div>
<div class="bg-white q-mt-lg q-py-lg">
<div class="nav-item flex justify-between items-center cursor-pointer" v-for="item in menuList2" :key="item.key">
<div class="flex items-center">
<i class="iconfont icontime"></i>
<span class="q-ml-lg">{{item.label}}</span></div>
<!-- <span class="text-primary">{{item.label}}</span> -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { LoginUser: {},
menuList: [{
icon: '',
key: '',
label: '可用優惠券',
number: ''
},{
icon: '',
key: '',
label: '訂單',
number: ''
},{
icon: '',
key: '',
label: '我的评价',
number: ''
},{
icon: '',
key: '',
label: '支付管理',
number: ''
},],
menuList2: [{
icon: '',
key: '',
label: '出行人信息管理',
number: ''
},{
icon: '',
key: '',
label: '管理邮寄地址',
number: ''
},{
icon: '',
key: '',
label: '登录方式管理',
number: ''
},{
icon: '',
key: '',
label: '账户设置',
number: ''
},]
};
},
mounted() {
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
},
methods: {},
};
</script>
\ No newline at end of file
src/pages/usercenter/index.vue 0 → 100644
View file @ 209d7096
<style>
</style>
<template>
<div>
<navs></navs>
<div>
<v-component is="myComponent" />
</div>
</div>
</template>
<script>
import navs from './components/navs.vue'
export default {
components: {navs}
}
</script>
\ No newline at end of file
src/pages/usercenter/loginInfo.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
width: 900px;
}
.tips {
width: 100%;
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
width: 434px;
height: 75px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
padding: 15px 35px;
margin-top: 16px;
}
.img-box {
width: 50px;
height: 50px;
background: #F5F5F5;
border-radius: 25px;
}.img {
width: 50px;
height: 50px;
display: block;
padding: 11px;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="q-ma-lg">
<div class="tips">登陸方式管理</div>
<div class="card">
<div class="flex justify-between">
<div>郵箱<span class="text-grey-6">(默認地址)</span></div>
<div><span>修改</span><span>删除</span></div>
</div>
</div>
<div class="card flex justify-between">
<div class="img-box">
<img class="img" src="../../assets/img/wechat.png" />
</div>
<div class="flex justify-between">
<div>郵箱<span class="text-grey-6">(默認地址)</span></div>
<div><span>修改</span><span>删除</span></div>
</div>
</div>
<div></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
lastName: "",
firstName: "",
},
model: "",
date: "",
options: [],
};
},
methods: {
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/setAddress.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
width: 900px;
}
.tips {
width: 100%;
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
margin-top: 20px;
width: 433px;
height: 170px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.img-box {
width: 50px;
height: 50px;
background: #f5f5f5;
border-radius: 25px;
}
.img {
width: 50px;
height: 50px;
display: block;
padding: 11px;
}
.label {
height: 47px;
background: #f5f5f5;
width: 100%;
line-height: 47px;
padding: 0 33px;
box-sizing: border-box;
}
.address-item {
margin: 10px 33px;
}
.dialog-box {
width: 800px;
padding: 15px;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="q-ma-lg">
<div class="tips">
收貨地址 <span>您已创建 4个收货地址，最多可创建 10个</span>
</div>
<div class="card">
<div class="flex justify-between label">
<div>唐艷林<span class="text-grey-6">(默認地址)</span></div>
<div><span>修改</span><span>删除</span></div>
</div>
<div class="address-item q-pt-sm">所在地區：四川成都市成華區跳蹬河街道</div>
<div class="address-item">詳細地址：建設南路163號3棟</div>
<div class="address-item">手機：180****1613</div>
</div>
<div class="card flex flex-center" @click="showDialog"><span></span>添加郵寄地址</div>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box">
<div>添加邮寄地址</div>
<div class="dialog-box">
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated label="保存" @click="submit" />
</div>
</div>
</div>
</q-dialog>
</div>
</template>
<script>
export default {
data() {
return {
isShowDialog: false,
form: {
lastName: "",
firstName: "",
},
model: "",
date: "",
options: [],
};
},
methods: {
showDialog() {
this.isShowDialog = true
},
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/setInfo.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
width: 900px;
}
.tips {
width: 100%;
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="q-ma-lg">
<div class="tips">密碼管理</div>
<div>
<div>
<div class="q-mt-lg q-mb-sm">
设置密码（8 - 20个字符，须至少包含1个数字、1个字母及1个特殊符号）
</div>
<div class="text-grey-6">高强度密码能提高账号安全性</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<div>
<q-btn color="primary" unelevated label="确认" @click="submit" />
</div>
</div>
</div>
</div>
<div class="q-ma-lg">
<div class="tips">通知偏好設置</div>
<div>
<div>
<div class="q-mt-lg q-mb-sm">優惠及更新信息</div>
<div class="text-grey-6">
抢先获取印象最新优惠活动、优惠码、折扣信息及最新动向
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<div>消息提醒</div>
<div class="text-grey-6">
获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<div>賬戶通知</div>
<div class="text-grey-6">
接收重要通知，如订单摘要、凭证及活动取消
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<q-btn
color="primary"
unelevated
label="更改偏好設置"
@click="submit"
/>
</div>
<div class="tips q-mt-lg">註銷賬戶</div>
<div class="q-mt-sm">删除您的Klook客路帐户及个人数据</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
lastName: "",
firstName: "",
},
model: "",
date: "",
options: [],
};
},
methods: {
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/setUserInfo.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
max-width: 940px;
}
.tips {
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<template>
<div class="content q-ma-lg bg-white q-pa-lg">
<div class="tips">
個人信息<span class="text-grey-6"
>(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
>
</div>
<div>
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">居住國家/地區</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
</div>
<div class="row">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">出生日期</div><q-date
v-model="date"
minimal
/>
</div>
<div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated label="保存" @click="submit" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
lastName: "",
firstName: "",
},
model: '',
date: '',
options: []
};
},
methods: {
submit() {
const verifyArr = ['fastName', 'lastName'];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/setUsersList.vue 0 → 100644
View file @ 209d7096
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
max-width: 940px;
}
.tips {
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<template>
<div class="content q-ma-lg bg-white q-pa-lg">
<div class="tips">
個人信息<span class="text-grey-6"
>(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
>
</div>
<div>
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">居住國家/地區</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
</div>
<div class="row">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">出生日期</div><q-date
v-model="date"
minimal
/>
</div>
<div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated label="保存" @click="submit" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
lastName: "",
firstName: "",
},
model: '',
date: '',
options: []
};
},
methods: {
submit() {
const verifyArr = ['fastName', 'lastName'];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
},
},
};
</script>
\ No newline at end of file
src/router/routes.js
View file @ 209d7096
......@@ -80,6 +80,26 @@ const routes = [{
component: () =>
import ('pages/usercenter/register.vue')
},
{
path: '/loginInfo', //账户设置
component: () =>
import ('pages/usercenter/loginInfo.vue')
},
{
path: '/setAddress', //地址管理
component: () =>
import ('pages/usercenter/setAddress.vue')
},
{
path: '/setInfo', //账户设置
component: () =>
import ('pages/usercenter/setInfo.vue')
},
{
path: '/setUserInfo', //用户信息
component: () =>
import ('pages/usercenter/setUserInfo.vue')
},
{
path: '/customer/:id', //自定义页面
component: () =>
......
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