Skip to content

M
million
Commit 17b4be7e authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心功能开发

parent 01cfa2e1
Hide whitespace changes
Inline Side-by-side
Showing with 515 additions and 72 deletions
src/pages/login.vue
View file @ 17b4be7e
......@@ -91,7 +91,7 @@
</p> -->
<div v-if="loginType !== 'wechat'">
<div class="flex items-end justify-between">
<div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div>
<div class="f34 bold">{{loginType === 'bindEmail' ? '立即绑定' : (isLogin ? "登錄" : "註冊") }}</div>
<div
class="f16 bold cursor-pointer"
v-if="loginType !== 'bindEmail'"
......@@ -133,7 +133,7 @@
</div>
</div>
</div>
<div v-if="!isLogin || loginType === 'PassWord'" class="form-group">
<div v-if="loginType === 'PassWord' || (!isLogin && loginType !== 'bindEmail')" class="form-group">
<div class="login_labelName flex justify-between items-center">
密碼<span
class="text-grey-6 cursor-pointer"
......@@ -286,14 +286,14 @@ export default {
},
(res) => {
if (res.data.resultCode == 1) {
const { type, id } = res.data.data;
const { type, unoinid } = res.data.data;
if (type === 1) {
this.CommonJump("/index", {});
} else {
this.isLogin = false;
// 绑定邮箱
this.loginType = "bindEmail";
this.userId = id;
this.userId = unoinid;
}
} else {
this.$q.notify({
......@@ -312,12 +312,12 @@ export default {
"GetOpenInfo_post",
{},
(r) => {
if (res.data.resultCode == 1) {
if (r.data.resultCode == 1) {
this.openInfo = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: res.data.message,
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
......@@ -359,6 +359,16 @@ export default {
if (this.inSending) return;
this.inSending = true;
if (this.verifyEmail()) {
if(!this.userId && this.loginType === 'bindEmail') {
this.$q.notify({
type: "negative",
message: '微信登录出错,请重新登录',
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
// this.useWechatLogin()
return
}
let SendType = this.userId ? 3 : this.isLogin ? 1 : 0;
this.apipost(
"directCustomer_post_SendMail",
......
src/pages/usercenter/components/navs.vue
View file @ 17b4be7e
......@@ -4,12 +4,12 @@
}
.avatar {
width: 94px;
height: 94px;
background: #FFFFFF;
border: 2px solid #F0EFEF;
border-radius: 50%;
margin: 0 auto;
display: block;
height: 94px;
background: #ffffff;
border: 2px solid #f0efef;
border-radius: 50%;
margin: 0 auto;
display: block;
}
.nav-item {
padding: 10px 30px;
......@@ -18,25 +18,37 @@ display: block;
<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 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"
@click="navigateTo(item.key)"
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>
<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="nav-item flex justify-between items-center cursor-pointer"
@click="navigateTo(item.key)"
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>
<i class="iconfont icontime"></i>
<span class="q-ml-lg">{{ item.label }}</span>
</div>
<!-- <span class="text-primary">{{item.label}}</span> -->
</div>
</div>
......@@ -45,56 +57,72 @@ display: block;
<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: ''
},]
};
return {
LoginUser: {},
menuList: [
{
icon: "",
key: "/coupon",
label: "可用優惠券",
number: "",
},
{
icon: "",
key: "/order",
label: "訂單",
number: "",
},
{
icon: "",
key: "",
label: "我的评价",
number: "",
},
{
icon: "",
key: "/payInfo",
label: "支付管理",
number: "",
},
],
menuList2: [
{
icon: "",
key: "/setUsersList",
label: "出行人信息管理",
number: "",
},
{
icon: "",
key: "/setAddress",
label: "管理邮寄地址",
number: "",
},
{
icon: "",
key: "/loginInfo",
label: "登录方式管理",
number: "",
},
{
icon: "",
key: "/setUserInfo",
label: "账户设置",
number: "",
},
],
};
},
mounted() {
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
},
methods: {},
methods: {
navigateTo(route) {
console.log("usercenter navigateTo", route);
this.CommonJump(route, {});
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/coupon.vue 0 → 100644
View file @ 17b4be7e
<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/order.vue 0 → 100644
View file @ 17b4be7e
<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/payInfo.vue 0 → 100644
View file @ 17b4be7e
<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/router/routes.js
View file @ 17b4be7e
......@@ -104,6 +104,21 @@ const routes = [{
component: () =>
import ('pages/usercenter/setUserInfo.vue')
},
{
path: '/coupon', //优惠券
component: () =>
import ('pages/usercenter/coupon.vue')
},
{
path: '/order', //用户订单
component: () =>
import ('pages/usercenter/order.vue')
},
{
path: '/setUsersList', //用户订单
component: () =>
import ('pages/usercenter/setUsersList.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