Skip to content

M
million
Commit 796b7933 authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心页面开发

parent 598ed582
Hide whitespace changes
Inline Side-by-side
Showing with 3075 additions and 169 deletions
src/assets/json/countries.json 0 → 100644
View file @ 796b7933
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/app.scss
View file @ 796b7933
......@@ -127,4 +127,7 @@
}
.primary {
color: $primary;
}
.white {
color: #fff;
}
\ No newline at end of file
src/pages/usercenter/components/navs.vue
View file @ 796b7933
......@@ -22,7 +22,7 @@
<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="text-primary text-center q-mt-sm cursor-pointer" @click="navigateTo('/setUserInfo')">个人信息</div>
<div class="q-mt-xl q-pb-lg">
<div
class="nav-item flex justify-between items-center cursor-pointer"
......@@ -106,7 +106,7 @@ export default {
},
{
icon: "",
key: "/setUserInfo",
key: "/setInfo",
label: "账户设置",
number: "",
},
......
src/pages/usercenter/coupon.vue
View file @ 796b7933
......@@ -15,84 +15,97 @@
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
.bg-blue {
background: #70b1fa;
border-radius: 8px 8px 0 0;
.use {
color: #67cac2;
}
}
.bg-red {
background: #ee727d;
border-radius: 8px 8px 0 0;
.use {
color: #6F242B;
}
}
.bg-yellow {
background: #f2c16b;
border-radius: 8px 8px 0 0;
.use {
color: #8A5D10;
}
}
.bg-green {
background: #67cac2;
border-radius: 8px 8px 0 0;
.use {
color: #195954 ;
}
}
.card {
margin: 10px;
width: 201px;
height: 310px;
background: #f9f9f9;
border-radius: 8px;
}
.nav-item {
width: 100px;
margin: 0 10px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
.img {
width: 201px;
margin-bottom: -6px;
}
</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 class="tips flex">
<div
@click="changeCouponType(item)"
class="nav-item cursor-pointer"
v-for="item in ['可使用', '已使用', '已过期']"
:key="item"
>
{{ item }}
<div :class="selectedKey === item ? 'border-bottom' : ''"></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 class="flex flex-wrap">
<div class="card" v-for="item in 10" :key="item">
<div class="bg-blue">
<div class="white text-center f16 q-pt-sm">CYN</div>
<div class="white text-center f26">10</div>
<div class="white text-center">
<span>限用品類：</span><span>滿2000可用</span>
</div>
<div class="use text-center q-pb-sm">
<span>限用品類：</span><span>滿2000可用</span>
</div>
<img class="img" src="../../assets/img/coupon.png">
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<div>消息提醒</div>
<div class="text-grey-6">
获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息
<div class="q-pa-sm">
<div class="q-my-sm">
<span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
</div>
<div class="q-my-sm">
<span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
</div>
<div class="flex flex-center q-mt-xl">
<q-btn color="primary" unelevated outline label="立即使用"></q-btn>
</div>
</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>
......@@ -101,6 +114,7 @@
export default {
data() {
return {
selectedKey: "可使用",
form: {
lastName: "",
firstName: "",
......@@ -111,6 +125,9 @@ export default {
};
},
methods: {
changeCouponType(item) {
this.selectedKey = item;
},
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
......
src/pages/usercenter/order.vue
View file @ 796b7933
......@@ -7,8 +7,25 @@
.content {
width: 900px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
margin: 10px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 8px;
}
.card-title {
height: 37px;
height: 37px;
padding: 0 20px;
line-height: 37px;
background: #f5f5f5;
border-radius: 8px 8px 0px 0px;
}
.tips {
width: 100%;
height: 42px;
background: #f5f5f5;
border-radius: 8px;
......@@ -18,81 +35,115 @@
::v-deep .q-field__control {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.phone {
margin-left: 100px;
}
.name {
width: 300px;
}
.user-name {
width: 120px;
}
.pay-info {
width: 120px;
}
.order-info {
width: 120px;
}
.order-action {
width: 120px;
}
.nav-item {
width: 100px;
margin: 0 10px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="q-ma-lg">
<div class="tips">密碼管理</div>
<div class="flex justify-between">
<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>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</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>
<q-select
square
outlined
class="form-item"
v-model="model"
:options="options"
placeholder="Filled"
></q-select>
</div>
</div>
<div class="tips flex">
<div
@click="changeCouponType(item)"
class="nav-item cursor-pointer"
v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
:key="item"
>
{{ item }}
<div :class="selectedKey === item ? 'border-bottom' : ''"></div>
</div>
<div>
<div>消息提醒</div>
<div class="text-grey-6">
获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息
</div>
<div>
<div class="card">
<div class="flex card-title justify-between">
<div class="flex">
<span>订单号</span>
<span class="phone">联系客服</span>
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
<span>2023-02-23 14:31:52</span>
</div>
<div>
<div>賬戶通知</div>
<div class="text-grey-6">
接收重要通知，如订单摘要、凭证及活动取消
<div class="flex q-py-sm">
<img src="../../assets/img/avatar.png" />
<div class="name">
<div>
【限量300张·售完即止】2023客路春季踏青
卡（春季特惠不约可退+广东省内周边9大路
</div>
<div>xl</div>
</div>
<div class="user-name">王然</div>
<div class="pay-info">
<div>CNY1188.00</div>
<div>在線支付</div>
</div>
<div class="order-info">
<div>等待收貨</div>
<div>订单详情</div>
</div>
<div class="order-action">
<div>确认收货</div>
<div>取消订单</div>
<div>查看發票</div>
</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>
......@@ -101,6 +152,7 @@
export default {
data() {
return {
selectedKey: "全部",
form: {
lastName: "",
firstName: "",
......@@ -111,6 +163,9 @@ export default {
};
},
methods: {
changeCouponType(item) {
this.selectedKey = item;
},
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
......
src/pages/usercenter/setUserInfo.vue
View file @ 796b7933
......@@ -17,6 +17,15 @@
::v-deep .q-field__control {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__native {
min-height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
......@@ -30,28 +39,29 @@
>
</div>
<div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.firstName"
v-model="form.Surname"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
ref="Surname"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="lastName"
ref="Name"
class="form-item"
placeholder="名"
v-model="form.lastName"
v-model="form.Name"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
:rules="[(val) => !!val || '请输入名字']"
></q-input>
</div>
</div>
......@@ -60,76 +70,130 @@
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.firstName"
v-model="form.EnName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="lastName"
ref="EnSurname"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
v-model="form.EnSurname"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
: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" />
<q-select
ref="Country"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.Country"
:options="countList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select filled v-model="model" :options="options" label="Filled" />
<q-select
ref="Appellation"
square
outlined
class="form-item"
option-value="ID"
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" />
<q-select
ref="PhoneCountry"
square
outlined
option-value="ID"
option-label="PhoneCode"
class="form-item"
v-model="form.PhoneCountry"
:options="phoneCountList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="lastName"
ref="Moblie"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
placeholder="電話（首次需驗證）"
v-model="form.Moblie"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">出生日期</div><q-date
v-model="date"
minimal
/>
<div class="title">出生日期</div>
<q-input
ref="BirthDate"
class="form-item"
placeholder="出生日期"
v-model="form.BirthDate"
outlined
mask="date"
:rules="[(val) => !!val || '请选择出生日期']"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qS1DateProxy">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="form.BirthDate"
@input="() => $refs.qS1DateProxy.hide()"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div>
<q-input
ref="lastName"
ref="Mailbox"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
placeholder="電子郵件（接收订单确认邮件）"
v-model="form.Mailbox"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
:rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated label="保存" @click="submit" />
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
</div>
</form>
</div>
</div>
</template>
......@@ -138,28 +202,145 @@ export default {
data() {
return {
form: {
lastName: "",
firstName: "",
Surname: "",
Name: "",
BirthDate: "",
Appellation: "",
EnName: "",
EnSurname: "",
Country: "",
Moblie: "",
},
model: '',
date: '',
options: []
model: "",
date: "",
phoneCountList: [],
countList: [],
AppellationList: [],
};
},
mounted() {
this.userInfo = JSON.parse(window.localStorage.getItem("b2bUser"));
console.log("getUserInfo", this.userInfo);
this.getUserInfo();
this.getCountryInfo();
this.GetAppellationEnum();
},
methods: {
getCountryInfo() {
this.apipost(
"GetCountryInfo_post",
{},
(res) => {
if (res.data.resultCode == 1) {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
GetAppellationEnum() {
this.apipost(
"GetAppellationEnum_post",
{},
(res) => {
if (res.data.resultCode == 1) {
this.AppellationList = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
getUserInfo() {
this.apipost(
"GetCustomerInfo_post",
{
Id: this.userInfo?.id,
},
(res) => {
if (res.data.resultCode == 1) {
this.form = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
submitUserInfo() {
let params = {...this.form}
params.Appellation = params.Appellation.ID
params.Country = params.Country.ID
params.PhoneCountry = params.PhoneCountry.ID
this.apipost(
"UpdateUserInfo_post",
params,
(res) => {
if (res.data.resultCode == 1) {
this.$q.notify({
type: "positive",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
) ;
},
submit() {
const verifyArr = ['fastName', 'lastName'];
this.formHasError = false;
const verifyArr = ["Surname", "Name", "BirthDate", "Appellation", "EnName", "EnSurname", "Country", "Moblie"];
verifyArr.forEach((item) => {
console.log('this.$refs[item]', this, item, this.$refs[item])
this.$refs[item].validate();
});
// this.$refs.Surname.validate();
// this.$refs.Name.validate();
// this.$refs.BirthDate.validate();
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
console.log('item', item)
if (this.$refs[item].hasError) {
console.log('item', item)
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
console.log('this.formHasError', this.formHasError, this.form)
if (this.formHasError) {
return;
}
this.submitUserInfo();
},
},
};
......
src/pages/usercenter/setUsersList.vue
View file @ 796b7933
......@@ -25,8 +25,8 @@
<template>
<div class="content q-ma-lg bg-white q-pa-lg">
<div class="tips">
個人信息<span class="text-grey-6"
>(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
出行人<span class="text-grey-6"
>共計 3人，最多新增20人(含本人)</span
>
</div>
<div>
......
src/router/routes.js
View file @ 796b7933
......@@ -133,6 +133,12 @@ const routes = [{
component: () =>
import ('pages/usercenter/setUsersList.vue')
},
{
path: '/payInfo', //支付管理
meta: {isUserCenter: true},
component: () =>
import ('pages/usercenter/payInfo.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