Browse Source

fix: 跳转到大会员购买页高度调整

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>
tangshizhe 4 months ago
parent
commit
41d3420e27

+ 52 - 35
apps/mobile/src/store/modules/createOrder.js

@@ -22,7 +22,7 @@ function formatProductInfo(list = []) {
         defaultIndex = productIndex
       }
     })
-    product._specList = product.sku.map((spec) => spec.productId)
+    product._specList = product.sku.map(spec => spec.productId)
     // 避免直接使用过期数据
     delete product.sku
     productMap[productIndex] = product
@@ -106,7 +106,9 @@ const LayoutConfig = {
   // 活动模块是否显示。默认显示
   activity: true,
   // 底部提示模块,默认不显示
-  footerNotice: false
+  footerNotice: false,
+  // 页面默认滚动高度
+  scrollTop: 0
 }
 
 const moduleName = 'createOrder'
@@ -442,25 +444,29 @@ export default {
           // state.productSpec.id !== -1 这个条件表示未拿到规格数据的情况下修改了选中项(可理解为有已选中)
           // 如果有已选中的规格。就用已选中的规格赋默认值
           await dispatch('setProductSpecInfo', { id: state.productSpec.id })
-        } else {
-          const spec = getters.productSpecInfoList.find((spec) => spec.choosed)
+        }
+        else {
+          const spec = getters.productSpecInfoList.find(spec => spec.choosed)
           if (spec) {
             await dispatch('setProductSpecInfo', { id: spec.productId })
-          } else {
+          }
+          else {
             await dispatch('setProductSpecInfo', { index: 0 })
           }
         }
         commit('updateLoadingStatus', {
           product: false
         })
-      } else {
+      }
+      else {
         console.warn('Error: 01 商品信息获取失败!')
         if (msg) {
           // 移动端有msg弹窗。由于toast是单例的,msg弹窗会覆盖loading。
           // commit('updateLoadingStatus', {
           //   product: false
           // })
-        } else {
+        }
+        else {
           commit('updateLoadingStatus', {
             product: false
           })
@@ -520,7 +526,7 @@ export default {
       { index, id, extend }
     ) {
       // 请求前-展示默认产品规格选择、活动等信息
-      
+
       // await dispatch('setProductSpecInfo', {
       //   index,
       //   id,
@@ -568,19 +574,22 @@ export default {
           const specInfo = data[0].sku[0]
           // 更新产品规格信息
           commit('updateProductSpecInfo', formatProductSpecInfo(specInfo))
-        } else {
+        }
+        else {
           console.warn('Error: 02 商品规格优惠信息获取失败!')
         }
         commit('updateLoadingStatus', {
           offers: false
         })
-      } else {
+      }
+      else {
         if (msg) {
           // 移动端有msg弹窗。由于toast是单例的,msg弹窗会覆盖loading。
           // commit('updateLoadingStatus', {
           //   offers: false
           // })
-        } else {
+        }
+        else {
           commit('updateLoadingStatus', {
             offers: false
           })
@@ -589,7 +598,7 @@ export default {
     },
     // 根据规格id计算表对应的分类索引
     calcProductIndexWithSpecId({ getters }, specId) {
-      return getters.productInfoList.findIndex((product) =>
+      return getters.productInfoList.findIndex(product =>
         product?._specList.includes(specId)
       )
     },
@@ -656,7 +665,7 @@ export default {
           amount: false
         })
         // 获得当前价格后更新商品规格信息
-        let productobj = JSON.parse(JSON.stringify(getters.productSpecInfo))
+        const productobj = JSON.parse(JSON.stringify(getters.productSpecInfo))
         productobj.discountAmount = data?.discountAmount || 0
         productobj.discountPrice = data?.discountPrice || 0
         productobj.originalPrice = data?.originalPrice || 0
@@ -664,14 +673,16 @@ export default {
           'updateProductSpecInfo',
           formatProductSpecInfo(productobj, getters.productChoiceOffers)
         )
-      } else {
+      }
+      else {
         if (msg) {
           // 移动端有msg弹窗。由于toast是单例的,msg弹窗会覆盖loading。
           // commit('updateLoadingStatus', {
           //   activity: false,
           //   amount: false
           // })
-        } else {
+        }
+        else {
           commit('updateLoadingStatus', {
             activity: false,
             amount: false
@@ -702,25 +713,28 @@ export default {
         }
         const { error_code: code, error_msg: msg } = await getters.submitHooks(
           preParams,
-          (params) => ajaxSubmitCreatedProductOrder(params)
+          params => ajaxSubmitCreatedProductOrder(params)
         )
         if (code === 0) {
           commit('updateLoadingStatus', {
             submit: false
           })
-        } else {
+        }
+        else {
           if (msg) {
             // 移动端有msg弹窗。由于toast是单例的,msg弹窗会覆盖loading。
             // commit('updateLoadingStatus', {
             //   submit: false
             // })
-          } else {
+          }
+          else {
             commit('updateLoadingStatus', {
               submit: false
             })
           }
         }
-      } catch (e) {
+      }
+      catch (e) {
         console.warn(e)
         commit('updateLoadingStatus', {
           submit: false
@@ -763,7 +777,7 @@ export default {
     // 获取当前选中的商品类型下的商品规格列表
     productSpecInfoList(state, getters) {
       return (getters.productInfo._specList || []).map(
-        (specId) => state.productSpec.maps[specId]
+        specId => state.productSpec.maps[specId]
       )
     },
     // 获取当前选中的商品规格信息
@@ -773,25 +787,25 @@ export default {
     // 所有优惠券列表
     productOffersList(_, getters) {
       return getters.productActivityInfoList
-        .map((activity) => activity?.discount || [])
+        .map(activity => activity?.discount || [])
         .flat()
     },
     // 所有优惠券列表(排序后)
     productOffersListSorted(_, getters) {
-      const { productAvailableOffersList, productUnavailableOffersList } =
-        getters
+      const { productAvailableOffersList, productUnavailableOffersList }
+        = getters
       return productAvailableOffersList.concat(productUnavailableOffersList)
     },
     // 获取商品可用优惠信息列表
     productAvailableOffersList(_, getters) {
       return getters.productOffersList
-        .filter((v) => v?.usable)
+        .filter(v => v?.usable)
         .sort((a, b) => a.discount - b.discount)
     },
     // 获取当前商品选中的优惠信息
     productChoiceOffers(state, getters) {
-      let choosed = getters.productAvailableOffersList.find(
-        (offers) => offers?.lotteryId === state.offers.id
+      const choosed = getters.productAvailableOffersList.find(
+        offers => offers?.lotteryId === state.offers.id
       ) || {
         activityId: -1,
         lotteryId: -1
@@ -804,7 +818,7 @@ export default {
       const now = Date.now() / 1000
       // 不可用优惠优先展示进行中优惠,之后展示预热优惠。两类优惠按照优惠力度从从大到小展示
       const unavailableList = getters.productOffersList.filter(
-        (v) => !v?.usable
+        v => !v?.usable
       )
       // 预热优惠
       const preArr = []
@@ -815,9 +829,11 @@ export default {
       unavailableList.forEach((item) => {
         if (item.starttime < now) {
           preArr.push(item)
-        } else if (item.starttime > now && item.endtime < now) {
+        }
+        else if (item.starttime > now && item.endtime < now) {
           penArr.push(item)
-        } else {
+        }
+        else {
           otherArr.push(item)
         }
       })
@@ -838,7 +854,7 @@ export default {
     productChoiceActivityInfo(_, getters) {
       return (
         getters.productActivityInfoList.find(
-          (activity) =>
+          activity =>
             activity?.activityId === getters.productChoiceOffers?.activityId
         ) || {}
       )
@@ -849,9 +865,9 @@ export default {
       return getters.productActivityInfoList
         .filter((item) => {
           return (
-            item.preStartTime > 0 &&
-            item.preStartTime - now < 0 &&
-            item.starttime - now > 0
+            item.preStartTime > 0
+            && item.preStartTime - now < 0
+            && item.starttime - now > 0
           )
         })
         .sort((a, b) => {
@@ -875,8 +891,9 @@ export default {
       }
       if (disabledLoading) {
         loading.some = false
-      } else {
-        loading.some = Object.values(loading).some((v) => v)
+      }
+      else {
+        loading.some = Object.values(loading).some(v => v)
       }
       return loading
     },

+ 44 - 24
apps/mobile/src/views/create-order/CreateOrderLayout.vue

@@ -2,57 +2,67 @@
   <div class="create-order-layout j-container">
     <div class="j-header">
       <router-view
+        v-if="pageLayout.header"
         name="header"
         class="create-order-header"
-        v-if="pageLayout.header"
-      ></router-view>
+      />
     </div>
     <div class="j-main create-order-content" @scroll="onScroll">
-      <router-view name="default" class="create-order-default"></router-view>
+      <router-view name="default" class="create-order-default" />
       <router-view
-        name="activity"
         v-if="pageLayout.activity"
+        name="activity"
         class="create-order-activity"
-      ></router-view>
-      <router-view name="form" class="create-order-form"></router-view>
-      <router-view name="adsense" class="create-order-adsense"></router-view>
-      <router-view name="desc" class="create-order-desc"></router-view>
+      />
+      <router-view name="form" class="create-order-form" />
+      <router-view name="adsense" class="create-order-adsense" />
+      <router-view name="desc" class="create-order-desc" />
     </div>
     <div class="j-footer">
       <router-view
         v-if="pageLayout.footerNotice"
         name="footerNotice"
         class="create-order-footer-notice"
-      ></router-view>
+      />
       <!-- 使用key避免当前路由页面底部组件不刷新问题 -->
       <!-- 主要解决类似<超级订阅>跳转<省份订阅包>时,store的canNextMap重置而底部已读不重置问题。具体问题#32998 -->
       <router-view
+        :key="productId"
         name="footer"
         class="create-order-footer"
-        :key="productId"
-      ></router-view>
+      />
     </div>
-    <customer-corner v-show="showCustomer" :scroll-status="scrollTop < 60" bottom-position="18%"></customer-corner>
+    <CustomerCorner v-show="showCustomer" :scroll-status="scrollTop < 60" bottom-position="18%" />
   </div>
 </template>
+
 <script>
-import { mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { openAppOrWxPage } from '@/utils'
 import CustomerCorner from '@/components/customer/index'
+
 export default {
   name: 'CreateOrderLayout',
   components: {
     CustomerCorner
   },
   computed: {
+    ...mapState('createOrder', ['layout']),
     ...mapGetters('createOrder', ['productId', 'pageLayout', 'loadingStatus']),
     ...mapGetters('user', [
       'isLogin'
     ]),
-    showCustomer () {
-      return this.$route.path.indexOf('dataexport') > -1 && this.isLogin
+    showCustomer() {
+      return this.$route.path.includes('dataexport') && this.isLogin
     }
   },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (vm.$store.state.direction !== 'forward') {
+        vm.checkRedirect()
+      }
+    })
+  },
   data() {
     return {
       loading: null,
@@ -66,16 +76,18 @@ export default {
         this.resetStore()
       }
     },
-    loadingStatus: {
+    'loadingStatus': {
       deep: true,
       handler(n) {
         // 此处修复 order-activity-helper.js 中 showToast 不展示问题
         const { disabledLoading } = this.pageLayout
-        if (disabledLoading) return
+        if (disabledLoading)
+          return
         const { some } = n
         if (some) {
           this.loading = this.$toast.loading({ duration: 0 })
-        } else {
+        }
+        else {
           this.$nextTick(() => {
             this.loading?.clear()
           })
@@ -83,10 +95,16 @@ export default {
       }
     }
   },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      if (vm.$store.state.direction !== 'forward') {
-        vm.checkRedirect()
+  mounted() {
+    // 监听路由变化
+    this.$router.afterEach((to) => {
+      if (to.path.includes('/create/bigmember')) {
+        // 滚动高度设置
+        const scrollEle = document.querySelector('.create-order-content')
+        if (scrollEle) {
+          console.log(scrollEle.scrollTop, 'scrollEle.scrollTop')
+          scrollEle.scrollTop = this.layout.scrollTop || 0
+        }
       }
     })
   },
@@ -101,18 +119,20 @@ export default {
       const cacheKey = `${this.$route.path}-redirect`
       const { urls, query } = this.$storage.get(cacheKey, {}, options)
       this.$storage.rm(cacheKey, options)
-      if (!urls || !query) return
+      if (!urls || !query)
+        return
       openAppOrWxPage(urls, {
         type: 'replace',
         query
       })
     },
-    onScroll (e) {
+    onScroll(e) {
       this.scrollTop = e.target.scrollTop
     }
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .create-order-desc {
   padding: 2.133vw 4.267vw;

+ 3 - 2
apps/mobile/src/views/order/components/vipsubscribe/Introduction.vue

@@ -87,10 +87,11 @@ export default {
     },
     goBuyMember() {
       console.log(this.power, 'power')
-      if (this.power && !this.power.memberStatus) {
+      if (this.power && this.power.memberStatus) {
         this.$router.push('/tabbar/home')
       }
       else {
+        // 购买大会员
         this.$router.push('/order/create/bigmember?meal=sj')
       }
     },
@@ -201,7 +202,7 @@ export default {
       line-height: 18px;
       .gold {
         color: #FAE7CA;
-
+        text-decoration: underline;
       }
     }
     .product-introduce-content {