首页搜索条件适配移动端,路由,登录跳转,商品详情打开优化

package.json

@@ -19,6 +19,7 @@
         "babel-plugin-transform-remove-console": "^6.9.4",
         "dayjs": "^1.11.7",
         "js-md5": "^0.7.3",
+        "lodash-es": "^4.17.21",
         "qrcode.vue": "^1.7.0",
         "qrcodejs2": "^0.0.2",
         "quasar": "^1.22.5",

src/boot/utils.js

@@ -196,12 +196,25 @@ Vue.prototype.OpenNewUrl = function(URL) {
 }
 
 //公用跳转
-Vue.prototype.CommonJump = function(path, obj) {
+Vue.prototype.CommonJump = function(path, obj, type = 'push') {
     let p = typeof(path) == 'string' ? path : this.$product.genernalUrl(path)
-    this.$router.push({
-        path: p,
-        query: obj
-    });
+    if(type === 'blank') { // 新窗口打开
+        let routeUrl = this.$router.resolve({
+            path: p,
+            query: obj
+       });
+       window.open(routeUrl.href, '_blank');
+    } else if (type === 'replace') { // replace
+        this.$router.replace({
+            path: p,
+            query: obj
+        });
+    } else if (type === 'push') { // push
+        this.$router.push({
+            path: p,
+            query: obj
+        });
+    }
 }
 Vue.prototype.$user = user
 Vue.prototype.createCalendar = function(dateStr) {

src/components/goods/style1.vue

@@ -5,7 +5,7 @@
             {{ formatEnum(product.ProductType) }}
         </div>
     </q-img>
-    <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer"  style="height: 74px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
+    <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer"  style="height: 74px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
     <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
         <span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
         <span class="f12 q-ml-sm">起</span>

src/components/goods/style2.vue

@@ -15,7 +15,7 @@
             </div>
         </q-img>
         <div class="q-px-md col">
-            <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
+            <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
             <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
                 <span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
                 <span class="f12 q-ml-sm">起</span>

src/components/navs/hor-big-one.vue

@@ -178,7 +178,9 @@
       class="zk_toolbar flex justify-between"
       :class="{ 'q-px-none': $q.platform.is.desktop }"
     >
-      <div v-if="$q.platform.is.mobile" @click="showDialog = true">菜单</div>
+      <div class="flex"><div class="f24" v-if="$q.platform.is.mobile && isHome" @click="handleShowDialog">
+        <i class="iconfont iconmore1" style="font-size: 24px;"></i>
+      </div>
       <img
         :src="baseData.logo"
         style="
@@ -189,7 +191,7 @@
         "
         class="q-mr-lg q-ml-sm"
         @click="CommonJump('/index', {})"
-      />
+      /></div>
       <!-- pc -->
       <div v-if="$q.platform.is.desktop">
         <q-btn label="繁體中文" flat>
@@ -297,17 +299,26 @@
         />
       </div>
     </q-toolbar>
-      <city-category v-if="$q.platform.is.desktop" :baseData="baseData" :dataList="dataList"></city-category>
-<q-dialog v-model="showDialog">
-      <city-category-mobile></city-category-mobile></q-dialog>
+    <city-category
+      v-if="$q.platform.is.desktop"
+      :baseData="baseData"
+      :dataList="dataList"
+    ></city-category>
+    <popup @mousemove.prevent id="city-category" v-model="showDialog" mode="bottom" @close="handleDialogClose">
+      <city-category-mobile @close="showDialog = false"
+        :baseData="baseData"
+        :dataList="dataList"
+      ></city-category-mobile
+    ></popup>
   </q-header>
 </template>
 
 <script>
-import CityCategoryMobile from './city-category-mobile.vue';
+import popup from "../props/index";
+import CityCategoryMobile from "./city-category-mobile.vue";
 import cityCategory from "./city-category.vue";
 export default {
-  components: { cityCategory, CityCategoryMobile },
+  components: { cityCategory, CityCategoryMobile, popup },
   props: {
     baseData: {
       type: Object,
@@ -398,6 +409,19 @@ export default {
     // this.getCategoryList();
   },
   methods: {
+    handler(event) {event.preventDefault();},
+    handleShowDialog() {
+      this.showDialog = true;
+      this.scrollTop = document.querySelector('body').scrollTop;
+      document.querySelector(
+        "body"
+      ).style = `position: fixed; top: -${this.scrollTop}px`;
+    },
+    
+    handleDialogClose() {
+      document.querySelector(
+        "body"
+      ).style = '';},
     avatarClick() {
       if (this.LoginUser.token) {
         this.CommonJump("/userCenter");

src/components/searchdata/kkday.vue

@@ -733,7 +733,7 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
 // this.msg.dayNumList = arr;
     },
     GotoDetails(item) {
-      this.CommonJump(item,{});
+      this.CommonJump(item,{}, 'blank');
     },
   },
 };

src/pages/Index.vue

@@ -416,13 +416,22 @@ export default {
     // this.getHomeData();
   },
   mounted() {
+    this.init()
+    this.timer = setInterval(() => {
+      this.init()
+    }, 100)
+  },
+  methods: {
+    init() {
     var jObj = JSON.parse(localStorage.getItem("groupinfo"));
+    if(jObj) {
     this.RB_Group_Id = jObj.GroupId;
     this.getHomeData();
-
-  },
-  methods: {
-
+    if(this.timer) {
+      clearInterval(this.timer)
+    }
+    }
+    },
     getHomeData() {
       let locationName = this.GetDomain();
       var msg = {

src/pages/city/components/city-info.vue

@@ -44,7 +44,7 @@ export default {
     },
     created() {
         this.cityInfo = this.city
-        this.cityInfo.Introduction=this.cityInfo.Introduction.replace(/\n/g,"<br>")
+        this.cityInfo.Introduction=this.cityInfo.Introduction?.replace(/\n/g,"<br>")
     },
 }
 </script>

src/pages/login.vue

@@ -261,7 +261,8 @@ export default {
   created() {},
   mounted() {
     console.log("login", this.$route.query);
-    const { code, state } = this.$route.query;
+    const { code, state, path } = this.$route.query;
+    this.path = path
     if (code) {
       this.fetchLoginInfo(code, state);
       this.isLogin = false;
@@ -519,7 +520,11 @@ export default {
             var jsonData = JSON.stringify(res.data.data);
             window.localStorage.setItem("b2bUser", jsonData);
             console.log("userInfo", jsonData, res.data.data);
+            if(this.path) {
+            this.CommonJump(this.path, {});
+            } else {
             this.CommonJump("/index", {});
+            }
           } else {
             this.$q.notify({
               type: "negative",

src/pages/usercenter/mobileUserCenter.vue

@@ -57,6 +57,19 @@ background: #FAF9F9;
 border-radius: 9px;
 margin: 10px 13px 0 13px;
 }
+.order-number {
+  text-align: center;
+  position: absolute;
+  right:  10px;
+  top: 0;
+  height: 14px;
+  width: 14px;
+  font-size: 9px;
+  line-height: 14px;
+  border-radius: 50%;
+  color: #fff;
+  background-color: $primary;
+}
 </style>
 <template>
   <div class="user-nav-box">
@@ -84,7 +97,7 @@ margin: 10px 13px 0 13px;
     </div>
       <div class="bg-white  card">
         <div
-          class="order-item cursor-pointer"
+          class="order-item cursor-pointer relative"
           @click="navigateTo(item.key)"
           v-for="item in orderList"
           :key="item.key"
@@ -93,15 +106,15 @@ margin: 10px 13px 0 13px;
           <div class="column flex-center">
             <img class="order-img" :src="require(`../../assets/img/userCenter/${item.icon}.png`)" />
             <div>{{ item.label }}</div>
+            <div class="absoulte order-number" v-if="item.number">{{item.number}}</div>
           </div>
           <!-- <span class="text-primary">{{ item.label }}</span> -->
         </div>
-        
-        <div class="flex play-box q-mt-md">
-            <img class="go-play q-mr-md" src="../../assets/img/userCenter/set.png" />
+        <div class="flex play-box q-mt-md" v-if="useOrder">
+            <img class="go-play q-mr-md" :src="useOrder.GoodsPic" />
             <div class="f12">
               <div>即將出行</div>
-              <div class="text-grey-6">[2023年3月6日]日本富士山尊享一日遊</div>
+              <div class="text-grey-6">[{{useOrder.UseDate}}]{{useOrder.GoodsName}}</div>
             </div>
         </div>
       </div>
@@ -143,6 +156,7 @@ export default {
     return {
       selectKey: "",
       LoginUser: {},
+      useOrder: null,
       orderList: [
         {
           icon: "order-pay",
@@ -221,6 +235,7 @@ export default {
     this.selectKey = this.$route.path;
     if (localStorage.b2bUser) {
       this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
+      this.getUserOrderInfo()
     }
   },
   methods: {
@@ -228,6 +243,34 @@ export default {
       this.selectKey = route;
       this.CommonJump(route, {});
     },
+    getUserOrderInfo() {
+      this.apipost(
+        "GetMyOrderNum_post",
+        {},
+        (res) => {
+          if (res.data.resultCode == 1) {
+            const { NoPayCount, PayCount, RetultList } = res.data.data;
+            this.useOrder = RetultList[0] ? RetultList[0] : null
+            this.orderList.forEach(item => {
+              if(item.label === '待付款') {
+                item.number = NoPayCount
+              } else if(item.label === '待出行') {
+                item.number = PayCount
+              }
+            })
+          } else {
+            // // this.$notify(res.data.message);
+            // this.$q.notify({
+            //   type: "negative",
+            //   message: res.data.message,
+            //   position: "top",
+            //   timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            // });
+          }
+        },
+        null
+      );
+    },
   },
 };
 </script>
\ No newline at end of file

src/router/index.js

@@ -32,9 +32,12 @@ export default function (/* { store, ssrContext } */) {
   Router.beforeEach((to, from, next) => {
     let user = undefined
     if(typeof window === 'object') {
+      if(to.meta.title) {
+        document.title = to.meta.title
+      }
       user = JSON.parse(window.localStorage.getItem('b2bUser'))
     if(to.meta.needLogin && !user) {
-      next({path: '/login'})
+      next({path: '/login?path=' + encodeURIComponent(to.fullPath)})
       }  else {
         next()
       }

yarn.lock

@@ -5915,6 +5915,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"