Skip to content

M
million
Commit 072db068 authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心页面适配移动端

parent cb6e7cbe
Hide whitespace changes
Inline Side-by-side
Showing with 425 additions and 228 deletions
src/css/app.scss
View file @ 072db068
......@@ -24,6 +24,9 @@
.flex-wrap {
flex-wrap: wrap;
}
.flex-noShark {
flex-shrink: 0;
}
.margin {
margin: 10px;
......@@ -114,6 +117,9 @@
.f36 {
font-size: 36px;
}
.f42 {
font-size: 42px;
}
.text-center {
text-align: center;
}
......
src/pages/usercenter/mobileUserCenter.vue
View file @ 072db068
<style lang="scss" scoped>
.avatar {
width: 94px;
height: 94px;
width: 60px;
height: 60px;
background: #ffffff;
border: 2px solid #f0efef;
border-radius: 50%;
......@@ -9,52 +9,129 @@
display: block;
}
.nav-item {
margin: 10px 28px;
margin:0 10px;
padding: 10px;
border-bottom: 1px solid #eee;
}
.nav-item:last-child {
border-bottom: none;
}
.select {
height: 41px;
border-radius: 8px;
color: #ffffff;
height: 41px;
border-radius: 8px;
color: #ffffff;
}
.action-item {
width: 18px;
height: 18px;
display: inline-block;
margin-left: 10px;
}
.edit-info {
width: 12px;
height: 12px;
}
.padding-20 {
padding: 20px;
}
.card {
margin: 25px 15px;
border-radius: 15px;
padding: 10px;
}
.order-item {
width: 25%;
display: inline-block;
}
.order-img {
width: 26px;
height: 26px;
}
.go-play {
width: 36px;
height: 36px;
}
.play-box {
padding: 8px;
background: #FAF9F9;
border-radius: 9px;
margin: 10px 13px 0 13px;
}
</style>
<template>
<div class="user-nav-box">
<div class="flex justify-between">
<span class="f42">个人中心</span>
<div>
<img />
<img /></div>
<div class="padding-20">
<div class="flex justify-between items-center">
<span class="f20">个人中心</span>
<div>
<img class="action-item" src="../../assets/img/userCenter/help.png" />
<img @click="CommonJump('/setInfo')" class="action-item" src="../../assets/img/userCenter/set.png" />
</div>
</div>
<div class="flex items-center q-mt-md">
<div>
<img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
<img class="avatar" v-else src="../../assets/img/avatar.png" />
</div>
<div class="q-ml-md">
<div class="f18">hello，开起你的旅程吧~</div>
<div @click="CommonJump('/setUserInfo')">
<img class="edit-info" src="../../assets/img/userCenter/edit.png" />
個人信息管理
</div>
</div>
</div>
</div>
<div class="q-mt-lg">
<div class="bg-white q-mt-xl q-pb-lg">
<div class="bg-white card">
<div
class="order-item cursor-pointer"
@click="navigateTo(item.key)"
v-for="item in orderList"
:key="item.key"
:class="{ 'select bg-primary': selectKey === item.key }"
>
<div class="column flex-center">
<img class="order-img" :src="require(`../../assets/img/userCenter/${item.icon}.png`)" />
<div>{{ item.label }}</div>
</div>
<!-- <span class="text-primary">{{ item.label }}</span> -->
</div>
<div class="flex play-box q-mt-md">
<img class="go-play q-mr-md" src="../../assets/img/userCenter/set.png" />
<div class="f12">
<div>即將出行</div>
<div class="text-grey-6">[2023年3月6日]日本富士山尊享一日遊</div>
</div>
</div>
</div>
<div class="bg-white card">
<div
class="nav-item flex justify-between items-center cursor-pointer"
@click="navigateTo(item.key)"
v-for="item in menuList"
:key="item.key"
:class="{'select bg-primary': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont" :class="item.icon"></i>
<span class="q-ml-lg">{{ item.label }}</span>
</div>
<i class="iconfont iconpreviewright"></i>
<!-- <span class="text-primary">{{ item.label }}</span> -->
</div>
</div>
</div>
<div class="bg-white q-mt-lg q-py-lg">
<div class="bg-white card">
<div
class="nav-item flex justify-between items-center cursor-pointer"
@click="navigateTo(item.key)"
v-for="item in menuList2"
:key="item.key"
:class="{'select bg-primary': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont" :class="item.icon"></i>
<span class="q-ml-lg">{{ item.label }}</span>
</div>
<i class="iconfont iconpreviewright"></i>
<!-- <span class="text-primary">{{item.label}}</span> -->
</div>
</div>
......@@ -64,8 +141,34 @@ color: #ffffff;
export default {
data() {
return {
selectKey: '',
selectKey: "",
LoginUser: {},
orderList: [
{
icon: "order-pay",
key: "/order?type=1",
label: "待付款",
number: "",
},
{
icon: "order-use",
key: "/order?type=2",
label: "待出行",
number: "",
},
{
icon: "order-finish",
key: "/order?type=3",
label: "已完成",
number: "",
},
{
icon: "order-all",
key: "/order?type=0",
label: "全部订单",
number: "",
},
],
menuList: [
{
icon: "iconqianbao",
......@@ -73,12 +176,6 @@ export default {
label: "可用優惠券",
number: "",
},
{
icon: "iconorder",
key: "/order",
label: "訂單",
number: "",
},
// {
// icon: "iconmessage",
// key: "",
......@@ -111,24 +208,24 @@ export default {
label: "登录方式管理",
number: "",
},
{
icon: "iconset",
key: "/setInfo",
label: "账户设置",
number: "",
},
// {
// icon: "iconset",
// key: "/setInfo",
// label: "账户设置",
// number: "",
// },
],
};
},
mounted() {
this.selectKey = this.$route.path
this.selectKey = this.$route.path;
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
},
methods: {
navigateTo(route) {
this.selectKey= route
this.selectKey = route;
this.CommonJump(route, {});
},
},
......
src/pages/usercenter/order.vue
View file @ 072db068
<style lang="scss" scoped>
.form-item {
max-width: 320px;
margin: 10px;
}
.content {
width: 900px;
......@@ -72,8 +71,8 @@
width: 120px;
}
.nav-item {
width: 100px;
margin: 0 10px;
width: 25%;
max-width: 100px;
text-align: center;
}
.border-bottom {
......@@ -89,11 +88,10 @@
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="flex justify-between">
<div>
<div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
<div class="flex justify-between margin">
<div :class="$q.platform.is.desktop ? 'form-item': 'full-width'">
<q-input
class="form-item"
placeholder="輸入商品名稱/訂單號"
v-model="GoodsName"
clearable
......@@ -112,7 +110,8 @@
<div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
</div>
</div>
<div>
<!-- pc -->
<div v-if="$q.platform.is.desktop">
<div class="card" v-for="item in orderList" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
......@@ -159,8 +158,52 @@
</div>
</div>
</div>
<noneData v-show="!orderList.length"></noneData>
</div>
<!-- mobile -->
<div v-else>
<div class="card" v-for="item in orderList" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
</div>
<span class="text-grey-6">{{ item.orderStatusStr }}</span>
</div>
<div class="q-pa-md">
<div class="flex no-wrap full-width">
<img class="product-img mr flex-noShark" :src="item.goodsPic" />
<div>
<div class="ellipsis-2">{{ item.goodsName }}</div>
<div>x1</div>
</div>
</div>
<div>
<!-- <div>
<i class="iconfont iconpeople1"></i>{{ item.surName
}} {{ item.name }}
</div> -->
<div>
<div class="f18 text-right">CNY{{ item.totalPrice }}</div>
<!-- <div>{{ item.payTypeStr }}</div> -->
</div>
<!-- <div>
<div class="primary">{{item.orderStatusStr}}</div>
<div class="q-mt-sm cursor-pointer">订单详情</div>
</div> -->
<div class="flex justify-end q-mt-sm">
<q-btn
color="primary"
@click="cancalOrder(item)"
unelevated
outline
size="sm"
label="取消订单">
</q-btn>
</div>
</div>
</div>
</div>
</div>
<noneData v-show="!orderList.length"></noneData>
</div>
</template>
......@@ -181,6 +224,10 @@ export default {
};
},
mounted() {
this.type = this.$route.query.type
if(this.type) {
this.orderStatus = Number(this.type)
}
this.getOrderEnums();
this.getOrderList();
},
......
src/pages/usercenter/setAddress.vue
View file @ 072db068
......@@ -125,9 +125,27 @@
:rules="[(val) => !!val || '请输入全名']"
></q-input>
</div>
<div class="col">
<div class="title">國家/地區</div>
<q-select
@input="changeCountry"
emit-value
map-options
ref="CountryId"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.CountryId"
:options="countList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區']"
/>
</div>
</div>
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<!-- <div class="col">
<div class="title">選擇手機區號</div>
<q-select
ref="AreaCode"
......@@ -143,7 +161,7 @@
placeholder="選擇手機區號"
:rules="[(val) => Boolean(val) || '请選擇手機區號']"
/>
</div>
</div> -->
<div class="col">
<div class="title">手機號碼</div>
<q-input
......@@ -153,27 +171,12 @@
v-model="form.Mobile"
outlined
:rules="[(val) => !!val || '请输入手機號碼']"
></q-input>
</div>
</div>
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">國家/地區</div>
<q-select
emit-value
map-options
ref="CountryId"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.CountryId"
:options="countList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區']"
/>
>
<template v-slot:prepend>
<div class="text-subtitle2">
{{ form.PhoneCountryStr }}
</div>
</template></q-input>
</div>
<div class="col">
<div class="title">城市</div>
......@@ -253,12 +256,6 @@ export default {
this.getCountryInfo();
},
methods: {
addAddress() {
this.isShowDialog = true
this.form = {
Name: "",
Mobile: "",}
},
getCountryInfo() {
this.apipost(
"GetCountryInfo_post",
......@@ -268,6 +265,17 @@ export default {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
this.form.CountryId = this.countList[0].ID;
this.changeCountry(this.form.CountryId);
this.phoneCountList.forEach((x) => {
let temp = this.countList.find((y) => y.ID == x.ID);
x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
this.form.CountryId =
this.form.CountryId == 0
? this.countList[0].ID
: this.form.CountryId;
this.changeCountry(this.form.CountryId);
} else {
// this.$notify(res.data.message);
this.$q.notify({
......@@ -281,6 +289,18 @@ export default {
null
);
},
changeCountry(id) {
this.form.AreaCode = this.phoneCountList.find(
(x) => x.ID == id
).PhoneCode;
this.form.PhoneCountryStr = "+" + this.form.AreaCode;
},
addAddress() {
this.isShowDialog = true
this.form = {
Name: "",
Mobile: "",}
},
changeCouponType(item) {
this.selectedKey = item;
},
......@@ -288,7 +308,6 @@ export default {
this.formHasError = false;
const verifyArr = [
"Name",
"AreaCode",
"Mobile",
"CountryId",
"CityName",
......@@ -296,17 +315,13 @@ export default {
"PostalCode",
];
verifyArr.forEach((item) => {
console.log("this.$refs[item]", this, item, this.$refs[item]);
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
console.log("item", item);
if (this.$refs[item].hasError) {
console.log("item", item);
this.formHasError = true;
}
});
console.log("this.formHasError", this.formHasError, this.form);
if (this.formHasError) {
return;
}
......@@ -335,7 +350,6 @@ export default {
);
},
editUser(item) {
console.log("editUser", item);
this.form = {...item};
this.form.AreaCode = Number(this.form.AreaCode)
this.form.IsDefault = this.form.IsDefault === 1
......
src/pages/usercenter/setUserInfo.vue
View file @ 072db068
......@@ -7,11 +7,10 @@
max-width: 940px;
}
.tips {
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
padding: 10px 35px;
line-height: 22px;
}
::v-deep .q-field__control {
height: 40px;
......@@ -28,99 +27,105 @@
.title {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 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>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div
class="bg-white"
:class="$q.platform.is.desktop ? 'content q-ma-lg' : 'full-width'"
>
<div class="q-ma-lg">
<div class="tips q-mb-lg">
個人信息<span class="text-grey-6"
>(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span
>
</div>
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.Surname"
outlined
ref="Surname"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="Name"
class="form-item"
v-model="form.Name"
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.EnName"
outlined
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="EnSurname"
class="form-item"
v-model="form.EnSurname"
outlined
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">居住國家/地區</div>
<q-select
emit-value
map-options
ref="Country"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.Country"
:options="countList"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select
emit-value
map-options
ref="Appellation"
square
outlined
class="form-item"
option-value="ID"
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div>
</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.Surname"
outlined
ref="Surname"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="Name"
class="form-item"
v-model="form.Name"
outlined
:rules="[(val) => !!val || '请输入名字']"
></q-input>
</div>
</div>
<div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
<div class="col">
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.EnName"
outlined
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="EnSurname"
class="form-item"
v-model="form.EnSurname"
outlined
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input>
</div>
</div>
<div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
<div class="col">
<div class="title">居住國家/地區</div>
<q-select
@input="changeCountry"
emit-value
map-options
ref="Country"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.Country"
:options="countList"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select
emit-value
map-options
ref="Appellation"
square
outlined
class="form-item"
option-value="ID"
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div>
</div>
<div class="row">
<div class="col">
<div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
<!-- <div class="col">
<div class="title">國家/地區代碼</div>
<q-select
emit-value
......@@ -135,60 +140,69 @@
:options="phoneCountList"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div> -->
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="Moblie"
class="form-item"
v-model="form.Moblie"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
>
<template v-slot:prepend>
<div class="text-subtitle2">
{{ form.PhoneCountryStr }}
</div>
</template></q-input
>
</div>
<div class="col">
<div class="title">出生日期</div>
<q-input
ref="BirthDate"
class="form-item"
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>
<div :class="$q.platform.is.desktop ? 'row' : 'culmuns'">
<div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div>
<q-input
ref="Mailbox"
class="form-item"
v-model="form.Mailbox"
outlined
:rules="[
(val) => !!val || '请输入電子郵件（接收订单确认邮件）',
]"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="Moblie"
class="form-item"
v-model="form.Moblie"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">出生日期</div>
<q-input
ref="BirthDate"
class="form-item"
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="Mailbox"
class="form-item"
v-model="form.Mailbox"
outlined
:rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
</form>
</div>
</form>
</div>
</div>
</template>
......@@ -215,7 +229,6 @@ export default {
},
mounted() {
this.userInfo = JSON.parse(window.localStorage.getItem("b2bUser"));
console.log("getUserInfo", this.userInfo);
this.getUserInfo();
this.getCountryInfo();
this.GetAppellationEnum();
......@@ -230,8 +243,14 @@ export default {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
this.phoneCountList.forEach((x) => {
let temp = this.countList.find((y) => y.ID == x.ID);
x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
if (this.form.Country) {
this.changeCountry(this.form.Country);
}
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
......@@ -243,6 +262,12 @@ export default {
null
);
},
changeCountry(id) {
this.form.PhoneCountry = this.phoneCountList.find(
(x) => x.ID == id
).PhoneCode;
this.form.PhoneCountryStr = "+" + this.form.PhoneCountry;
},
GetAppellationEnum() {
this.apipost(
"GetAppellationEnum_post",
......@@ -272,6 +297,9 @@ export default {
(res) => {
if (res.data.resultCode == 1) {
this.form = res.data.data;
if (this.phoneCountList.length) {
this.changeCountry(this.form.Country);
}
} else {
// this.$notify(res.data.message);
this.$q.notify({
......@@ -286,7 +314,7 @@ export default {
);
},
submitUserInfo() {
let params = {...this.form}
let params = { ...this.form };
// params.Appellation = params.Appellation.ID
// params.Country = params.Country.ID
// params.PhoneCountry = params.PhoneCountry.ID
......@@ -312,23 +340,28 @@ export default {
}
},
null
) ;
);
},
submit() {
this.formHasError = false;
const verifyArr = ["Surname", "Name", "BirthDate", "Appellation", "EnName", "EnSurname", "Country", "Moblie"];
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();
});
verifyArr.forEach((item) => {
console.log('item', item)
if (this.$refs[item].hasError) {
console.log('item', item)
this.formHasError = true;
}
});
console.log('this.formHasError', this.formHasError, this.form)
if (this.formHasError) {
return;
}
......
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