个人中心页面适配移动端

src/components/navs/subscriber.vue

@@ -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

@@ -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

@@ -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

 <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

 <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

 <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

 <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

+<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

 <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

 <style lang="scss" scoped>
 .form-item {
   max-width: 320px;
-  height: 40px;
   margin: 10px;
 }
 .content {

src/pages/usercenter/setAddress.vue

 <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

 <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

 <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

 <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

@@ -175,6 +175,12 @@ const routes = [{
         ]
 
     },
+    {
+        path: '/userCenter', //移动端个人中心
+        meta: { isUserCenter: true, needLogin: true },
+        component: () =>
+            import ('pages/usercenter/mobileUserCenter.vue')
+    },
     {
         path: '/login',
         component: () =>