chenlei 1 год назад
Родитель
Сommit
5fdc745b7d
5 измененных файлов с 74 добавлено и 36 удалено
  1. 2 0
      README.md
  2. 15 9
      src/components/pull/index.vue
  3. 27 18
      src/pages/index/index.vue
  4. 27 8
      src/utils/container/index.ts
  5. 3 1
      src/utils/store/curPage.ts

+ 2 - 0
README.md

@@ -75,3 +75,5 @@
 - 31.公共请求框架兼容axios请求,为了与mock插件适配,调试方便。√
 - 31.公共请求框架兼容axios请求,为了与mock插件适配,调试方便。√
 - 32.vite.config.js中对scss注入$uni_platform全局变量,用于在scss文件中判断运行环境。√
 - 32.vite.config.js中对scss注入$uni_platform全局变量,用于在scss文件中判断运行环境。√
 - 33.uno.config.js 通过编写classNamePreContainer插件, 拦截\_\_uno.css文件,将样式名称增加.container 前缀,提高样式权重。√
 - 33.uno.config.js 通过编写classNamePreContainer插件, 拦截\_\_uno.css文件,将样式名称增加.container 前缀,提高样式权重。√
+- 34.页面方法公共初始化,增加被拦截方法的前置通知功能,可轻松实现例如无身份弹窗引导的功能。
+- 35.页面方法公共初始化,自动为methods对象增加hander属性(点击执行的方法),类型与methods一致,在前置通知中可获取方法的触发类型(是被点击执行的方法)。

+ 15 - 9
src/components/pull/index.vue

@@ -12,6 +12,8 @@
     @scrolltolower="methods.onRefresh(true)"
     @scrolltolower="methods.onRefresh(true)"
     :paging-style="{ top: topHeightPX }"
     :paging-style="{ top: topHeightPX }"
   >
   >
+    <!-- 采用重写(.zp-paging-container-content)样式实现主插槽左右间距。
+  不使用一下插槽的方式实现左右间距,是因为会给主插槽增加left、right,故而会遮挡本能漏出主插槽的特殊元素,例如首页吸顶时 附近加气站左右的填充线。 -->
     <!-- 左侧间距 -->
     <!-- 左侧间距 -->
     <!-- <template #left>
     <!-- <template #left>
       <div class="pr-spac"></div>
       <div class="pr-spac"></div>
@@ -20,6 +22,7 @@
     <!-- <template #right>
     <!-- <template #right>
       <div class="pr-spac"></div>
       <div class="pr-spac"></div>
     </template> -->
     </template> -->
+
     <!-- 顶部间距,不放到slot="top"插槽内是因为,向上滑动时,页面只会被头部遮挡,体验更舒服 -->
     <!-- 顶部间距,不放到slot="top"插槽内是因为,向上滑动时,页面只会被头部遮挡,体验更舒服 -->
     <div class="pt-spac" v-if="props.showSpac" />
     <div class="pt-spac" v-if="props.showSpac" />
     <!-- 内容插槽-定义 -->
     <!-- 内容插槽-定义 -->
@@ -28,7 +31,7 @@
     <div class="center s-fz mb-spac">
     <div class="center s-fz mb-spac">
       <uni-load-more :status="status" :content-text="contentText" />
       <uni-load-more :status="status" :content-text="contentText" />
       <ay-refresh
       <ay-refresh
-        v-if="store.curPage.pagerInfo.error"
+        v-show="store.curPage.pagerInfo.error"
         :loading="store.curPage.pagerInfo.loading"
         :loading="store.curPage.pagerInfo.loading"
         text="重试"
         text="重试"
         @refresh="store.curPage.pagerMethods.refresh({ isAdd: store.curPage.pagerInfo.isAdd })"
         @refresh="store.curPage.pagerMethods.refresh({ isAdd: store.curPage.pagerInfo.isAdd })"
@@ -50,14 +53,17 @@ const methods = {
     store.curPage.pagerMethods.refresh({ isAdd })
     store.curPage.pagerMethods.refresh({ isAdd })
   },
   },
 }
 }
-watch(
-  () => store.curPage.pagerInfo.loading,
-  (nv) => {
-    if (nv === false) {
-      paging.value.complete()
-    }
-  },
-)
+
+onMounted(() => {
+  watch(
+    () => store.curPage.pagerInfo.loading,
+    (nv) => {
+      if (nv === false) {
+        paging.value.complete()
+      }
+    },
+  )
+})
 // onMounted(() => {
 // onMounted(() => {
 //   store.curPage.pagerMethods.setCurZPagingRef(paging)
 //   store.curPage.pagerMethods.setCurZPagingRef(paging)
 // })
 // })

+ 27 - 18
src/pages/index/index.vue

@@ -9,7 +9,7 @@
             <div class="mobile">{{ store.user.userInfo.mobileDes }}</div>
             <div class="mobile">{{ store.user.userInfo.mobileDes }}</div>
           </div>
           </div>
         </div>
         </div>
-        <div class="text-center" @click="methods.scanCode">
+        <div class="text-center" @click="methods.handler.scanCode">
           <image src="@img/icons/scan_icon.png" mode="scaleToFill" class="scan mt-spacd4" />
           <image src="@img/icons/scan_icon.png" mode="scaleToFill" class="scan mt-spacd4" />
           <div class="p-color s-fz mt-spacd2">扫一扫</div>
           <div class="p-color s-fz mt-spacd2">扫一扫</div>
         </div>
         </div>
@@ -33,7 +33,7 @@
               class="image"
               class="image"
               mode="aspectFit"
               mode="aspectFit"
               v-if="data.hasnopayfordriver || data.qrcode.expire"
               v-if="data.hasnopayfordriver || data.qrcode.expire"
-              @click="methods.getQrcode"
+              @click="methods.handler.getQrcode"
             />
             />
             <image :src="data.qrcode.img" class="image" mode="aspectFit" v-else />
             <image :src="data.qrcode.img" class="image" mode="aspectFit" v-else />
           </div>
           </div>
@@ -57,7 +57,7 @@
     </div>
     </div>
     <div class="flex">
     <div class="flex">
       <ay-flowLine class="flex-1 mr-spac" :loading="store.webapi.strategy.get_driver_balance.ing">
       <ay-flowLine class="flex-1 mr-spac" :loading="store.webapi.strategy.get_driver_balance.ing">
-        <div class="chunk m0 h-100% s-fz money-bg" @click="methods.goAccount">
+        <div class="chunk m0 h-100% s-fz money-bg" @click="methods.handler.goAccount">
           <div class="mb-spacd4">
           <div class="mb-spacd4">
             可用余额
             可用余额
             <div class="inline yellow-color ss-fz ml-spacd4" v-if="data.accountInfo.flag === 0">
             <div class="inline yellow-color ss-fz ml-spacd4" v-if="data.accountInfo.flag === 0">
@@ -68,7 +68,7 @@
         </div>
         </div>
       </ay-flowLine>
       </ay-flowLine>
       <ay-flowLine class="flex-1" :loading="store.webapi.strategy.get_truck_info.ing">
       <ay-flowLine class="flex-1" :loading="store.webapi.strategy.get_truck_info.ing">
-        <div class="chunk m0 h-100% s-fz cars" @click="methods.truckManage">
+        <div class="chunk m0 h-100% s-fz cars" @click="methods.handler.truckManage">
           <div>
           <div>
             <div class="mb-spacd4" v-show="showcm">车辆管理</div>
             <div class="mb-spacd4" v-show="showcm">车辆管理</div>
             <div v-if="!store.user.isLogined">{{ config.common.nullView[0] }}</div>
             <div v-if="!store.user.isLogined">{{ config.common.nullView[0] }}</div>
@@ -88,7 +88,7 @@
         class="text-center menu"
         class="text-center menu"
         v-for="(m, i) in data.menus"
         v-for="(m, i) in data.menus"
         :key="i"
         :key="i"
-        @click="methods.goPage(m)"
+        @click="methods.handler.goPage(m)"
       >
       >
         <img class="icon" :src="m.icon" />
         <img class="icon" :src="m.icon" />
         <div>{{ m.name }}</div>
         <div>{{ m.name }}</div>
@@ -493,6 +493,9 @@ const methods = ay.initMethods(
         return false
         return false
       }
       }
     },
     },
+    scanCode1() {
+      console.log('scanCode1')
+    },
     async scanCode() {
     async scanCode() {
       if (await methods.checkNopayfordriver(2)) {
       if (await methods.checkNopayfordriver(2)) {
         return
         return
@@ -640,8 +643,10 @@ const methods = ay.initMethods(
     scanCode: { showLoading: true },
     scanCode: { showLoading: true },
   },
   },
   {
   {
-    ba(methodName) {
-      // console.log(k)
+    ba(methodName, isHandler) {
+      if (!isHandler) {
+        return
+      }
       // 需要登录的功能
       // 需要登录的功能
       if (staticData.IdentityMethods.includes(methodName)) {
       if (staticData.IdentityMethods.includes(methodName)) {
         // 未登录
         // 未登录
@@ -670,20 +675,21 @@ const methods = ay.initMethods(
 )
 )
 ay.entrance(
 ay.entrance(
   async (args) => {
   async (args) => {
-    // staticData.entranceArgs = args
-    const init = async () => {
+    /** 首次、下拉更新的内容-需要身份 */
+    const refreshNeedIdentity = async () => {
+      if (!store.user.isLogined) return
       webapi.strategy.get_driver_balance({}).then((res) => {
       webapi.strategy.get_driver_balance({}).then((res) => {
         data.accountInfo = {
         data.accountInfo = {
           ...res,
           ...res,
           ...aop.request.AR.getAccountInfo(res),
           ...aop.request.AR.getAccountInfo(res),
         }
         }
       })
       })
-
       data.hasnopayfordriver = await methods.checkNopayfordriver()
       data.hasnopayfordriver = await methods.checkNopayfordriver()
       methods.getTruckInfo()
       methods.getTruckInfo()
     }
     }
-    if (args.loadType === enums.LoadType.onLoad) {
-      // data.title = store.curPage?.pageConfig?.title
+
+    /** 页面初始化获取的内容 */
+    const firstLoad = async () => {
       // #ifdef MP
       // #ifdef MP
       // 用户是否授权了获取地理位置
       // 用户是否授权了获取地理位置
       await uni
       await uni
@@ -705,7 +711,7 @@ ay.entrance(
         return
         return
       }
       }
       methods.initWS()
       methods.initWS()
-      await init()
+      await refreshNeedIdentity()
       // 无未支付订单
       // 无未支付订单
       if (!data.hasnopayfordriver) {
       if (!data.hasnopayfordriver) {
         await methods.getQrcode()
         await methods.getQrcode()
@@ -713,22 +719,25 @@ ay.entrance(
       data.firstUnload = false
       data.firstUnload = false
       // 小程序环境:时机过早会inputDialog.value为null
       // 小程序环境:时机过早会inputDialog.value为null
       // h5环境:当页面data内的值改变时,弹框会消失
       // h5环境:当页面data内的值改变时,弹框会消失
-      // 所先放这里吧
+      // 所先放这里吧
       methods.getInvite()
       methods.getInvite()
     }
     }
+    if (args.loadType === enums.LoadType.onLoad) {
+      firstLoad()
+    }
 
 
     if (args.loadType === enums.LoadType.refresh) {
     if (args.loadType === enums.LoadType.refresh) {
       methods.getListApp({ cras: args.cras })
       methods.getListApp({ cras: args.cras })
-      // if (!args.cras.isAdd) {
-      //   init()
-      // }
+      if (!args.cras.isAdd) {
+        refreshNeedIdentity()
+      }
     }
     }
     // if (args.loadType === enums.LoadType.onShow) {
     // if (args.loadType === enums.LoadType.onShow) {
     //   init()
     //   init()
     // }
     // }
   },
   },
   {
   {
-    addLoadTypes: [enums.LoadType.onShow],
+    // addLoadTypes: [enums.LoadType.onShow],
   },
   },
 )
 )
 
 

+ 27 - 8
src/utils/container/index.ts

@@ -14,7 +14,10 @@ const staticData = {
   args: {} as AyContainerEntryArgs,
   args: {} as AyContainerEntryArgs,
   goPageExt: {} as goPageExt,
   goPageExt: {} as goPageExt,
 }
 }
-type ExtType<T> = Record<keyof T, { showLoading?: boolean }>
+type DecorateMethods<T> = T & {
+  /** 点击执行的方法 */
+  handler: T
+}
 export default {
 export default {
   staticData,
   staticData,
   initData<T extends object>(data: T) {
   initData<T extends object>(data: T) {
@@ -28,30 +31,33 @@ export default {
   },
   },
   /** 初始化对象内的方法,自动为对象内所有方法增加防重提功能(同步方法、异步方法执行中再次触发不执行) */
   /** 初始化对象内的方法,自动为对象内所有方法增加防重提功能(同步方法、异步方法执行中再次触发不执行) */
 
 
-  initMethods<T>(
+  initMethods<T extends AnyObject>(
     methods: T,
     methods: T,
     extEach?: Record<string, { showLoading?: boolean; ba?: () => void }>,
     extEach?: Record<string, { showLoading?: boolean; ba?: () => void }>,
     ext?: {
     ext?: {
       /**
       /**
        * 前置通知,返回false时不执行目标方法
        * 前置通知,返回false时不执行目标方法
        * @param methodName:方法名
        * @param methodName:方法名
-       */ ba?: (methodName: keyof T) => boolean | void
+       */ ba?: (methodName: keyof T, isHandler: boolean) => boolean | void
     },
     },
-  ): T {
-    const rv = {}
+  ): DecorateMethods<T> {
+    /** 正在执行中的方法 */
     const executings = {}
     const executings = {}
+    /** 是被点击执行的方法 */
+    const handlering = {}
+    const rv = {} as DecorateMethods<T>
     for (const [k, v] of Object.entries(methods)) {
     for (const [k, v] of Object.entries(methods)) {
       if (typeof v === 'function') {
       if (typeof v === 'function') {
         rv[k] = new Proxy(v, {
         rv[k] = new Proxy(v, {
           apply(target, arg, argArray) {
           apply(target, arg, argArray) {
             if (executings[k] === true) return
             if (executings[k] === true) return
             executings[k] = true
             executings[k] = true
-            const bar = ext?.ba(k)
+            const bar = ext?.ba(k, handlering[k])
             if (bar === false) {
             if (bar === false) {
               executings[k] = false
               executings[k] = false
               return
               return
             }
             }
-            const rv = v(...argArray)
+            const rv = target(...argArray)
             // 异步方法
             // 异步方法
             if (rv?.finally) {
             if (rv?.finally) {
               if (extEach[k]?.showLoading) {
               if (extEach[k]?.showLoading) {
@@ -72,7 +78,20 @@ export default {
         })
         })
       }
       }
     }
     }
-    return rv as T
+    rv.handler = new Proxy(
+      {},
+      {
+        get(target, p) {
+          return (...args) => {
+            console.log('handler')
+            handlering[p] = true
+            Promise.resolve().then(() => (handlering[p] = false))
+            return rv[p](...args)
+          }
+        },
+      },
+    ) as T
+    return rv
   },
   },
   /** 获取资源完整地址 */
   /** 获取资源完整地址 */
   getResourceUrl(url) {
   getResourceUrl(url) {

+ 3 - 1
src/utils/store/curPage.ts

@@ -41,9 +41,11 @@ const pagerMethods = {
     if (pagerInfo.value.loaded) pagerMethods.refresh({ isAdd: true })
     if (pagerInfo.value.loaded) pagerMethods.refresh({ isAdd: true })
   },
   },
   // #endif
   // #endif
-  loaded(args) {
+  async loaded(args) {
     // 取消加载效果
     // 取消加载效果
     if (args?.reqState === enums.ReqState.cancel) {
     if (args?.reqState === enums.ReqState.cancel) {
+      // 避免取消太快,响应式感知不到loading变化
+      await func.awaiter(500)
       pagerInfo.value.loading = false
       pagerInfo.value.loading = false
       return
       return
     }
     }