Skip to content

M
million
Commit 7594cf47 authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心页面适配移动端

parent 4844a58a
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 80 deletions
src/components/navs/subscriber.vue
View file @ 7594cf47
......@@ -46,7 +46,6 @@ border-radius: 28px;
top: 5px;
width: 102px;
height: 46px;
background: #EE4454;
border-radius: 23px;
}
</style>>
......@@ -60,7 +59,7 @@ border-radius: 23px;
最高可省60%，只有订阅用户才能享受到隐藏优惠，点击“订阅”，即表示你同意我们的《訂閱條款》
</div>
<div class="email-box" :class="{'mobile':$q.platform.is.mobile}">
<q-input class="input" :class="{'mobile':$q.platform.is.mobile}" rounded outlined placeholder="請輸入您在使用的電子郵件"></q-input><q-btn class="btn" label="提交"></q-btn>
<q-input class="input" :class="{'mobile':$q.platform.is.mobile}" rounded outlined placeholder="請輸入您在使用的電子郵件"></q-input><q-btn color="primary" class="btn" label="提交"></q-btn>
</div>
</div>
</div>
......
src/layouts/HomeLayout.vue
View file @ 7594cf47
......@@ -30,8 +30,8 @@
<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>
<div class="flex justify-between" v-if="showUserInfo" style="width: 1200px; margin: 0 auto">
<navs></navs>
<div class="flex justify-between" v-if="showUserInfo" :style="$q.platform.is.desktop ? 'width: 1200px; margin: 0 auto' : ''">
<navs v-if="$q.platform.is.desktop"></navs>
<router-view />
</div>
<router-view v-else />
......
src/pages/usercenter/components/navs.vue
View file @ 7594cf47
......@@ -17,7 +17,6 @@
}
.select {
height: 41px;
background: #F43849;
border-radius: 8px;
color: #ffffff;
}
......@@ -36,7 +35,7 @@ color: #ffffff;
@click="navigateTo(item.key)"
v-for="item in menuList"
:key="item.key"
:class="{'select': selectKey === item.key}"
:class="{'select bg-primary': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont" :class="item.icon"></i>
......@@ -52,7 +51,7 @@ color: #ffffff;
@click="navigateTo(item.key)"
v-for="item in menuList2"
:key="item.key"
:class="{'select': selectKey === item.key}"
:class="{'select bg-primary': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont" :class="item.icon"></i>
......@@ -82,18 +81,18 @@ export default {
label: "訂單",
number: "",
},
{
icon: "iconmessage",
key: "",
label: "我的评价",
number: "",
},
{
icon: "iconmoney-credit-card",
key: "/payInfo",
label: "支付管理",
number: "",
},
// {
// icon: "iconmessage",
// key: "",
// label: "我的评价",
// number: "",
// },
// {
// icon: "iconmoney-credit-card",
// key: "/payInfo",
// label: "支付管理",
// number: "",
// },
],
menuList2: [
{
......
src/pages/usercenter/components/removeAccount.vue
View file @ 7594cf47
<style>
.login-box {
.login-box-pc {
width: 436px;
}
.login-box {
padding: 30px 40px;
background-clip: padding-box;
background: #ffffff;
......@@ -70,7 +72,7 @@
</style>
<template>
<div class="login">
<div class="login-box">
<div class="login-box" :class="$q.platform.is.desktop ? 'login-box-pc' : ''">
<div class="f34 bold">注销账户</div>
<div class="login_row">
<div class="form-group">
......
src/pages/usercenter/components/resetEmail.vue
View file @ 7594cf47
<style>
.login-box {
.login-box-pc {
width: 436px;
}
.login-box {
padding: 30px 40px;
background-clip: padding-box;
background: #ffffff;
......@@ -70,7 +72,7 @@
</style>
<template>
<div class="login">
<div class="login-box">
<div class="login-box" :class="$q.platform.is.desktop ? 'login-box-pc' : ''">
<div class="f34 bold">修改邮箱</div>
<div class="login_row">
<div class="form-group">
......
src/pages/usercenter/coupon.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -50,16 +49,19 @@
color: #195954;
}
}
.card-pc {
width: 201px;
}
.card {
margin: 10px;
width: 201px;
height: 310px;
background: #f9f9f9;
border-radius: 8px;
}
.nav-item {
width: 100px;
margin: 0 10px;
width: 33%;
max-width: 100px;
// margin: 0 10px;
text-align: center;
}
.border-bottom {
......@@ -86,10 +88,15 @@
.circle {
width: 24px;
height: 10px;
left: 88px;
border-radius: 0 0 14px 14px;
background: #f9f9f9;
}
.circle-pc {
left: 88px;
}
.circle-mobile {
left: calc(50% - 12px)
}
// .circle:after {
// content: '.';
// display: block;
......@@ -99,7 +106,7 @@
// }
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
<div class="q-ma-lg">
<div class="tips flex">
<div
......@@ -113,12 +120,12 @@
</div>
</div>
<div class="flex flex-wrap">
<div class="card" v-for="item in couponList" :key="item.id">
<div class="card" v-for="item in couponList" :key="item.id" :class="$q.platform.is.desktop ? 'card-pc': 'full-width'">
<div class="bg-blue relative" :class="[colorMap[item.couponsUseScope], {'bg-grey': CouponTimeStatus !== 1}]">
<div v-if="item.IsEnd" class="absolute deadline">
<div class="text f12">即將過期</div>
</div>
<div class="absolute circle"></div>
<div class="absolute circle" :class="$q.platform.is.desktop ? 'circle-pc': 'circle-mobile'"></div>
<div class="white text-center f16 q-pt-lg">CYN</div>
<div class="white text-center f26">{{ item.denomination }}</div>
<div class="white text-center">
......
src/pages/usercenter/loginInfo.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -22,8 +21,10 @@
margin-top: 20px;
margin-bottom: 10px;
}
.card {
.card-pc {
width: 434px;
}
.card {
height: 75px;
background: #ffffff;
border: 1px solid #eeeeee;
......@@ -45,10 +46,10 @@
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
<div class="q-ma-lg">
<div class="tips">登陸方式管理</div>
<div class="card">
<div class="card" :class="{'card-pc': $q.platform.is.desktop}">
<div class="flex justify-between">
<div>
<span class="f18 bold">郵箱</span
......@@ -61,7 +62,7 @@
</div>
</div>
</div>
<div class="card flex justify-between">
<div class="card flex justify-between" :class="{'card-pc': $q.platform.is.desktop}">
<div class="flex justify-between">
<div class="img-box">
<img class="img" src="../../assets/img/wechat.png" />
......
src/pages/usercenter/mobileUserCenter.vue 0 → 100644
View file @ 7594cf47
<style lang="scss" scoped>
.avatar {
width: 94px;
height: 94px;
background: #ffffff;
border: 2px solid #f0efef;
border-radius: 50%;
margin: 0 auto;
display: block;
}
.nav-item {
margin: 10px 28px;
padding: 10px;
}
.select {
height: 41px;
border-radius: 8px;
color: #ffffff;
}
</style>
<template>
<div class="user-nav-box">
<div class="flex justify-between">
<span class="f42">个人中心</span>
<div>
<img />
<img /></div>
</div>
<div class="q-mt-lg">
<div class="bg-white 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"
: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>
<!-- <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"
@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>
<!-- <span class="text-primary">{{item.label}}</span> -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectKey: '',
LoginUser: {},
menuList: [
{
icon: "iconqianbao",
key: "/coupon",
label: "可用優惠券",
number: "",
},
{
icon: "iconorder",
key: "/order",
label: "訂單",
number: "",
},
// {
// icon: "iconmessage",
// key: "",
// label: "我的评价",
// number: "",
// },
// {
// icon: "iconmoney-credit-card",
// key: "/payInfo",
// label: "支付管理",
// number: "",
// },
],
menuList2: [
{
icon: "iconpeople1",
key: "/setUsersList",
label: "出行人信息管理",
number: "",
},
{
icon: "iconemail",
key: "/setAddress",
label: "管理邮寄地址",
number: "",
},
{
icon: "iconcomputer",
key: "/loginInfo",
label: "登录方式管理",
number: "",
},
{
icon: "iconset",
key: "/setInfo",
label: "账户设置",
number: "",
},
],
};
},
mounted() {
this.selectKey = this.$route.path
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
},
methods: {
navigateTo(route) {
this.selectKey= route
this.CommonJump(route, {});
},
},
};
</script>
\ No newline at end of file
src/pages/usercenter/order.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -178,7 +177,7 @@ export default {
orderList: [],
current: 1,
pageCount: 0,
orderStatus: "",
orderStatus: 0,
};
},
mounted() {
......@@ -193,7 +192,7 @@ export default {
},
changeOrderType(item) {
if (this.orderStatus === item.ID) {
this.orderStatus = "";
this.orderStatus = 0;
} else {
this.orderStatus = item.ID;
}
......
src/pages/usercenter/payInfo.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......
src/pages/usercenter/setAddress.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -9,11 +8,10 @@
}
.tips {
width: 100%;
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
padding: 19px 35px;
line-height: 22px;
}
::v-deep .q-field__control {
height: 40px;
......@@ -24,18 +22,25 @@
::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;
margin-left: 10px;
}
.card {
margin-top: 20px;
width: 413px;
height: 170px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.card-pc {
width: 413px;
}
.img-box {
width: 50px;
height: 50px;
......@@ -65,13 +70,13 @@
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
<div class="q-ma-lg">
<div class="tips">
收貨地址 <span>您已创建 {{count}}个收货地址，最多可创建 10个</span>
</div>
<div class="flex flex-wrap justify-between">
<div class="card" v-for="item in pageData" :key="item.Id">
<div class="card" :class="$q.platform.is.desktop ? 'card-pc': 'full-width'" v-for="item in pageData" :key="item.Id">
<div class="flex justify-between label">
<div>
{{ item.Name
......@@ -94,6 +99,7 @@
</div>
<!-- <div class="card flex flex-center" @click="showDialog"><span></span>添加郵寄地址</div> -->
<q-btn v-if="count < 10"
:class="$q.platform.is.desktop ? 'card-pc': 'full-width'"
class="card flex flex-center"
color="blue"
unelevated
......@@ -107,7 +113,7 @@
<div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">全名</div>
<q-input
......@@ -120,7 +126,7 @@
></q-input>
</div>
</div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">選擇手機區號</div>
<q-select
......@@ -151,7 +157,7 @@
</div>
</div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">國家/地區</div>
<q-select
......@@ -181,7 +187,7 @@
></q-input>
</div>
</div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">詳細地址</div>
<q-input
......
src/pages/usercenter/setInfo.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.form-group {
......@@ -14,7 +13,7 @@
.form-group i {
position: absolute;
right: 12px;
bottom: 0;
top: 0;
z-index: 2;
width: 40px;
height: 40px;
......@@ -44,7 +43,7 @@
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="content bg-white" :class="{'q-ma-lg': $q.platform.is.desktop}">
<div class="q-ma-lg">
<div class="tips">密碼管理</div>
<div>
......
src/pages/usercenter/setUserInfo.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -48,7 +47,6 @@
class="form-item"
v-model="form.Surname"
outlined
placeholder="姓"
ref="Surname"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
......@@ -58,7 +56,6 @@
<q-input
ref="Name"
class="form-item"
placeholder="名"
v-model="form.Name"
outlined
:rules="[(val) => !!val || '请输入名字']"
......@@ -72,7 +69,6 @@
class="form-item"
v-model="form.EnName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
......@@ -82,7 +78,6 @@
<q-input
ref="EnSurname"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.EnSurname"
outlined
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
......@@ -103,7 +98,6 @@
class="form-item"
v-model="form.Country"
:options="countList"
placeholder="请选择居住國家/地區"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div>
......@@ -120,7 +114,6 @@
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
placeholder="请选择稱謂"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div>
......@@ -140,7 +133,6 @@
class="form-item"
v-model="form.PhoneCountry"
:options="phoneCountList"
placeholder="请选择國家/地區代碼"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
......@@ -149,7 +141,6 @@
<q-input
ref="Moblie"
class="form-item"
placeholder="電話（首次需驗證）"
v-model="form.Moblie"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
......@@ -162,7 +153,6 @@
<q-input
ref="BirthDate"
class="form-item"
placeholder="出生日期"
v-model="form.BirthDate"
outlined
mask="date"
......@@ -188,7 +178,6 @@
<q-input
ref="Mailbox"
class="form-item"
placeholder="電子郵件（接收订单确认邮件）"
v-model="form.Mailbox"
outlined
:rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
......
src/pages/usercenter/setUsersList.vue
View file @ 7594cf47
<style lang="scss" scoped>
.form-item {
max-width: 320px;
height: 40px;
margin: 10px;
}
.content {
......@@ -43,6 +42,7 @@
.title {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 10px;
}
.phone {
margin-left: 100px;
......@@ -82,13 +82,13 @@
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
<div>
<div class="card" v-for="item in pageData" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span>{{ item.Name }}</span>
<span class="phone">手機號：{{ item.Mobile }}</span>
<span v-if="$q.platform.is.desktop" class="phone">手機號：{{ item.Mobile }}</span>
</div>
<span>
<span class="user-edit" @click="editUser(item)">编辑</span>
......@@ -98,14 +98,15 @@
</span>
</div>
<div class="q-pa-sm">
<span class="q-ml-sm" v-if="$q.platform.is.mobile">手機號：{{ item.Mobile }}</span>
<div class="q-pa-sm full-width"
:class="{ 'border-b': index < item.CardList.length - 1 }"
v-for="(el, index) in item.CardList"
:key="index"
>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col-6">{{ el.TypeName }}</div>
<div class="col-6">{{ el.CardNo }}</div>
<div class="col-6" :class="$q.platform.is.mobile ? 'q-mt-xs': ''">{{ el.CardNo }}</div>
</div>
</div>
</div>
......@@ -142,14 +143,13 @@
<div class="f22 bold">{{ form.Id ? "编辑" : "新增" }}出行人信息</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
<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
placeholder="姓"
ref="SurName"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
......@@ -159,21 +159,19 @@
<q-input
ref="Name"
class="form-item"
placeholder="名"
v-model="form.Name"
outlined
:rules="[(val) => !!val || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<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
placeholder="姓氏（需與旅遊證件一致）"
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
......@@ -183,7 +181,6 @@
<q-input
ref="EnSurName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.EnSurName"
outlined
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
......@@ -191,7 +188,7 @@
</div>
</div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select
......@@ -205,7 +202,6 @@
class="form-item"
v-model="form.AreaCode"
:options="phoneCountList"
placeholder="请选择國家/地區代碼"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
......@@ -214,7 +210,6 @@
<q-input
ref="Mobile"
class="form-item"
placeholder="手機號"
v-model="form.Mobile"
outlined
:rules="[(val) => !!val || '请输入手機號']"
......@@ -233,7 +228,7 @@
<img style="width: 15px" src="../../assets/img/delete.png" />
</div>
</div>
<div class="row">
<div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
<div class="col">
<div class="title">证件类型</div>
<q-select
......
src/router/routes.js
View file @ 7594cf47
......@@ -175,6 +175,12 @@ const routes = [{
]
},
{
path: '/userCenter', //移动端个人中心
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/mobileUserCenter.vue')
},
{
path: '/login',
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