Skip to content

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

个人中心功能开发

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