冯诚 2 years ago
parent
commit
cae4713aae
5 changed files with 69 additions and 48 deletions
  1. 1 0
      package.json
  2. 44 22
      src/components/nav-bar/index.vue
  3. 1 26
      src/pages/login/index.vue
  4. 3 0
      src/style/atom.scss
  5. 20 0
      yarn.lock

+ 1 - 0
package.json

@@ -11,6 +11,7 @@
     "dayjs": "^1.10.7",
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
+    "swiper": "^8.0.7",
     "vue": "^3.2.25",
     "vue-router": "4",
     "yup": "^0.32.11"

+ 44 - 22
src/components/nav-bar/index.vue

@@ -4,7 +4,7 @@
       <div class="nav-icons">
         <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
         <router-link class="icon-logo" to="/"></router-link>
-        <i v-if="showNavIcons" class="icon-mine" @click="onClickMine"></i>
+        <i v-if="showNavIcons" class="icon-mine" @click.stop="onClickMine"></i>
       </div>
       <transition
         v-if="showNavIcons"
@@ -35,7 +35,7 @@
       </transition>
     </div>
     <div v-if="showNavIcons" class="nav-bar-right">
-      <div class="user pointer flex-ac" @click="onClickMine">
+      <div class="user pointer flex-ac" @click.stop="onClickMine">
         <template v-if="state.userInfo">
           <i class="icon-mine"></i>
           <span class="user-name">{{
@@ -64,7 +64,7 @@
           <i class="close" @click="showMine = false"></i>
         </div>
         <div class="nav-menu-body">
-          <div class="info">
+          <div class="info" @click.stop>
             <div class="p1">
               <p class="name">Hi, {{ state.userInfo.name }}</p>
               <p class="intro">
@@ -83,21 +83,25 @@
                 <strong class="primary">Buy now ></strong>
               </div>
               <div class="swiper">
-                <div
-                  v-for="(item, index) of state.userInfo.orders"
-                  :key="index"
-                  class="swiper-item"
-                >
-                  <div class="service">
-                    <div class="service-title">
-                      <i class="service-icon icon-lite"></i>
-                      <div class="service-type">{{ item.product_name }}</div>
-                      <div class="service-period">
-                        {{ item.start_time }} to {{ item.end_time }}
+                <div class="swiper-wrapper">
+                  <div
+                    v-for="(item, index) of state.userInfo.orders"
+                    :key="index"
+                    class="swiper-slide"
+                  >
+                    <div class="service">
+                      <div class="service-title">
+                        <i class="service-icon icon-lite fls0"></i>
+                        <div class="service-type fls0">
+                          {{ item.product_name }}
+                        </div>
+                        <div class="service-period">
+                          {{ item.start_time }} to {{ item.end_time }}
+                        </div>
                       </div>
+                      <div class="service-model tac">{{ item.phone_info }}</div>
+                      <div class="service-code tac">{{ item.phone_imei }}</div>
                     </div>
-                    <div class="service-model tac">{{ item.phone_info }}</div>
-                    <div class="service-code tac">{{ item.phone_imei }}</div>
                   </div>
                 </div>
               </div>
@@ -105,7 +109,7 @@
                 <i
                   v-for="n of state.userInfo.orders.length"
                   :key="n"
-                  class="dot active"
+                  :class="['dot', { active: slideIdx === n - 1 }]"
                 ></i>
               </div>
             </div>
@@ -149,10 +153,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { state, logout } from '@/store'
 import Dialog from '@/components/dialog'
+import Swiper from 'swiper'
+import 'swiper/css'
 
 interface Props {
   showNavIcons?: boolean
@@ -165,6 +171,21 @@ const router = useRouter()
 const route = useRoute()
 const showMenu = ref(false)
 const showMine = ref(false)
+const slideIdx = ref(0)
+
+document.addEventListener('click', () => (showMine.value = false))
+
+onMounted(() => {
+  new Swiper('.swiper', {
+    slidesPerView: 1.08,
+    spaceBetween: 15,
+    on: {
+      slideChange(swiper) {
+        slideIdx.value = swiper.realIndex
+      },
+    },
+  })
+})
 
 watch(
   () => route.fullPath,
@@ -453,8 +474,8 @@ async function signOut() {
   }
 
   .info {
-    margin: 20px auto 24px;
-    width: 678px;
+    margin: 20px 36px 24px;
+    // width: 678px;
   }
   .p1 {
     padding: 48px 0 0 50px;
@@ -516,16 +537,17 @@ async function signOut() {
 
     .swiper {
       padding-left: 44px;
+      padding-right: 36px;
     }
     .service {
       padding: 26px 18px;
-      width: 526px;
+      // width: 526px;
       height: 266px;
       background: #ffffff;
       border-radius: 8px;
       &-title {
         display: flex;
-        align-items: center;
+        // align-items: center;
         font-size: 28px;
       }
       &-icon {

+ 1 - 26
src/pages/login/index.vue

@@ -55,36 +55,11 @@
       </div>
     </div>
   </div>
-
-  <!-- <div v-else class="surprise">
-    <NavBar :show-nav-icons="false" />
-    <div class="ptc-form">
-      <div class="title">Change Password</div>
-      <div class="ptc-form-item">
-        <input
-          class="ptc-input"
-          type="password"
-          placeholder="Enter new password"
-        />
-      </div>
-      <div class="ptc-form-item">
-        <input
-          class="ptc-input"
-          type="password"
-          placeholder="Repeat new password"
-        />
-      </div>
-      <div class="ptc-form-item">
-        <button class="ptc-button" @click="showSurprise = false">SUBMIT</button>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-// import NavBar from '@/components/nav-bar/index.vue'
 import { login } from '@/service/user'
 import useForm from '@/hooks/useForm'
 import { string } from 'yup'
@@ -105,7 +80,7 @@ async function handleLogin() {
   const { message } = await login(values as any)
   Toast(message)
   const { need_change } = await getUserInfo()
-  ;+need_change ? router.push('/password/change') : router.replace(from || '/')
+  router.replace(need_change ? '/password/change' : from || '/')
 }
 </script>
 

+ 3 - 0
src/style/atom.scss

@@ -20,6 +20,9 @@
 .space-between {
   justify-content: space-between;
 }
+.fls0 {
+  flex-shrink: 0;
+}
 
 .mt48 {
   margin-top: 48px !important;

+ 20 - 0
yarn.lock

@@ -630,6 +630,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
@@ -1720,6 +1727,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -1760,6 +1772,14 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.0.7.tgz#9eefe26c703e627a6dc7237c0109e172ce06e3f6"
+  integrity sha512-GHjDfxSZdupfU7LrSVOpaNaT7R1D2zxopPGBFz1UOXOtsYvVJLg0k6NvkTAD7qn0ASl5pTti82qoYwvYvIkg4g==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 systemjs@^6.11.0:
   version "6.12.1"
   resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.12.1.tgz#47cdd23a6ec9f1b01cf5b5f70562c8550da229d3"