特价专区-页面-订单详情BUG修复

src/Components/assistingAgriculture/index/Screen.vue

@@ -94,7 +94,7 @@ const selectItem = (selectItem) => {
     }
     .active {
       color: #fa5151;
-      background: #FEEEEE;
+      background: #feeeee;
     }
   }
 }

src/pages.json

@@ -140,6 +140,13 @@
 				"navigationBarBackgroundColor": "#ffffff"
 			}
 		},
+		{
+			"path": "pages/assistingAgriculture/RuralTravel/specialOfferZoneList",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#ffffff"
+			}
+		},
 		{
 			"path": "pages/assistingAgriculture/shop/index",
 			"style": {

src/pages/assistingAgriculture/RuralTravel/specialOfferZoneList.vue

+<template>
+  <view class="special-offer-zone-list-page">
+    <view class="swiper">
+      <wd-swiper
+        customClass="swiper-custom"
+        :list="shopSwiperList"
+        autoplay
+        height="440rpx"
+        customStyle="border-radius: 0rpx !important;"
+        :current="current"
+        @click="handleClick"
+        @change="onChange"
+        :indicator="{ type: 'dots-bar' }"
+      >
+        <template #indicator="{ current, total }">
+          <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
+            {{ current + 1 }}/{{ total }}
+          </view>
+        </template>
+      </wd-swiper>
+
+      <!--        列表-->
+      <view class="bootom">
+        <view class="bootom-top">
+          <view class="option" @tap="locationFiltering(0)">
+            <text :class="{ rotate: rotate }">智能排序</text>
+            <wd-icon
+              :class="{ rotate: rotate }"
+              name="fill-arrow-down"
+              size="24rpx"
+              class="icons"
+            ></wd-icon>
+          </view>
+        </view>
+        <view class="bootom-top">
+          <view class="option" @tap="locationFiltering(1)">
+            <text :class="{ rotate: rotate2 }">出发日期</text>
+            <wd-icon
+              :class="{ rotate: rotate2 }"
+              name="fill-arrow-down"
+              size="24rpx"
+              class="icons"
+            ></wd-icon>
+          </view>
+        </view>
+        <view class="bootom-top">
+          <view class="option" @tap="locationFiltering(2)">
+            <text :class="{ rotate: rotate3 }">景点</text>
+            <wd-icon
+              :class="{ rotate: rotate3 }"
+              name="fill-arrow-down"
+              size="24rpx"
+              class="icons"
+            ></wd-icon>
+          </view>
+        </view>
+        <view class="bootom-top">
+          <view class="option" @tap="locationFiltering(3)">
+            <text :class="{ rotate: rotate4 }">筛选</text>
+            <wd-icon
+              :class="{ rotate: rotate4 }"
+              name="fill-arrow-down"
+              size="24rpx"
+              class="icons"
+            ></wd-icon>
+          </view>
+        </view>
+        <Sort v-show="rotate" />
+        <DepartureDate v-show="rotate2" />
+        <ScenicSpots v-show="rotate3" />
+        <Screen v-show="rotate4" />
+      </view>
+      <view class="list">
+        <view class="item" v-for="i in 10" :key="i">
+          <image mode="aspectFill" src="@/static/assistingAgriculture/reviewDetails/fj.png"></image>
+          <view class="info">
+            <text class="title multi-line">红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游</text>
+            <text class="subtitle">赠价值59元特产伴手礼一份</text>
+            <view class="tag-list">
+              <text class="tag">可定明日</text>
+              <text class="tag">可定明日</text>
+              <text class="tag">可定明日</text>
+            </view>
+            <view class="fs-box">
+              <text class="fs-num">4.9分</text>
+              <text style="margin-left: 20rpx" class="sales-volume">月销2000+</text>
+            </view>
+            <text class="address">云岩出发</text>
+          </view>
+          <text class="price">¥299.00</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import Sort from '../../../components/assistingAgriculture/index/Sort.vue';
+import DepartureDate from '../../../components/assistingAgriculture/index/DepartureDate.vue';
+import ScenicSpots from '../../../components/assistingAgriculture/index/ScenicSpots.vue';
+import Screen from '../../../components/assistingAgriculture/index/Screen.vue';
+const rotate = ref(false);
+const rotate2 = ref(false);
+const rotate3 = ref(false);
+const rotate4 = ref(false);
+const current = ref(0);
+const shopSwiperList = ref([
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+]);
+const locationFiltering = (index) => {
+  switch (index) {
+    case 0:
+      rotate.value = !rotate.value;
+      rotate2.value = false;
+      rotate3.value = false;
+      rotate4.value = false;
+      break;
+    case 1:
+      rotate2.value = !rotate2.value;
+      rotate.value = false;
+      rotate3.value = false;
+      rotate4.value = false;
+      break;
+    case 2:
+      rotate3.value = !rotate3.value;
+      rotate.value = false;
+      rotate2.value = false;
+      rotate4.value = false;
+      break;
+    case 3:
+      rotate4.value = !rotate4.value;
+      rotate.value = false;
+      rotate2.value = false;
+      rotate3.value = false;
+      break;
+  }
+};
+function handleClick(e) {
+  console.log(e);
+}
+function onChange(e) {
+  console.log(e);
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f3f3f3;
+}
+.special-offer-zone-list-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 750rpx;
+  .custom-indicator {
+    padding: 0 12rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    border-radius: 45%;
+    background: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
+    font-size: 24rpx;
+  }
+  .swiper {
+    width: 100%;
+    :deep(.wd-swiper__track) {
+      border-radius: 0;
+    }
+  }
+  .bootom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    border-radius: 6rpx;
+    position: relative;
+    margin-top: 20rpx;
+    .bootom-top {
+      display: flex;
+      align-items: center;
+      padding: 0 20rpx;
+      justify-content: space-between;
+      .option {
+        text {
+          font-size: 24rpx;
+          color: #343434;
+        }
+        .red {
+          color: #fa5151;
+        }
+        .icons {
+          color: #d8d8d8;
+          transform: rotate(-180deg);
+          transition: all 0.3s linear;
+        }
+        .rotate {
+          transform: rotate(0deg);
+          transition: all 0.3s linear;
+          color: #fa5151;
+        }
+      }
+      .light {
+        color: #ff7c00;
+        background: #ffdcbb;
+      }
+    }
+  }
+  .list {
+    width: 335 * 2rpx;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    border-radius: 16rpx;
+    margin-top: 20rpx;
+    .item {
+      width: 100%;
+      padding: 20rpx;
+      box-sizing: border-box;
+      display: flex;
+      image {
+        width: 240rpx;
+        height: 240rpx;
+        border-radius: 16rpx;
+        flex-shrink: 0;
+      }
+      .info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 20rpx;
+        .title {
+          max-width: 400rpx;
+          font-size: 14 * 2rpx;
+          color: #3d3d3d;
+        }
+        .subtitle {
+          font-size: 11 * 2rpx;
+          color: #666666;
+          margin-top: 10rpx;
+        }
+        .tag-list {
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 10rpx;
+          .tag {
+            box-sizing: border-box;
+            padding: 10rpx 16rpx;
+            background: #eee;
+            color: #3d3d3d;
+            font-size: 16rpx;
+            border-radius: 30rpx;
+            margin-top: 10rpx;
+            margin-left: 10rpx;
+          }
+        }
+        .fs-box {
+          margin-top: 10rpx;
+          font-size: 12 * 2rpx;
+          color: #0974f5;
+        }
+        .address {
+          margin-top: 10rpx;
+          font-size: 12 * 2rpx;
+          color: #0974f5;
+        }
+      }
+      .price {
+        font-size: 14 * 2rpx;
+        font-weight: bold;
+        /* 主题色 */
+        color: #fa5151;
+        align-self: flex-end;
+      }
+    }
+  }
+}
+</style>

src/pages/packageDetails/packageDetails.vue

@@ -227,7 +227,7 @@
         <text class="goods-type">火锅</text>
         <!-- <text class="goods-rs">36/人</text> -->
       </view>
-      <text class="distance">距你{{ distance }}</text>
+      <text class="distance">距你{{ shopInfo.distance }}</text>
       <text class="address">{{ shopInfo.shopAddress }}</text>
     </view>
     <!-- 适用门店-end -->
@@ -398,8 +398,8 @@ function getLocationFn() {
     success: function (res) {
       const myLatitude = shopLocation.value.latitude;
       const myLongitude = shopLocation.value.longitude;
-      console.log('myLongitude', myLatitude, myLongitude);
       const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
+
       shopInfo.value.distance = distance;
     },
     fail: function (err) {

src/pages/shop/confirmOrder.vue

@@ -163,6 +163,7 @@
 import Header from '@/pages/order/components/Header/index.vue';
 import { groupBuyConfirm, groupBuyUpdate, groupBuyCreate } from '@/api/confirmOrder';
 import { getOrderDetail } from '@/api/order';
+import { debounce } from '@/utils/common';
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const selectType = ref('TENPAY');
 const prodId = ref(null);
@@ -261,7 +262,7 @@ function groupBuyUpdateFn(couponUserId) {
     }
   });
 }
-function submitOrder() {
+const submitOrder = debounce(() => {
   // TODO: 跳转到确认订单页面，并��带所选的支付方式
 
   //   id String 是 临时订单的id或key
@@ -276,28 +277,27 @@ function submitOrder() {
   };
   groupBuyCreate(params).then((res) => {
     if (res.code === 0) {
-      let timeout = null;
-      const start = new Date().getTime();
       const { paymentUrl, outTradeNo } = res.data.result;
       outTradeNos.value = outTradeNo;
-      window.location.href = paymentUrl;
-      timeout = setTimeout(function () {
-        const end = new Date().getTime();
-        // 如果超时未打开应用，则假设未安装
-        if (end - start < 1000) {
+      // // window.location.href = paymentUrl;
+      // 设置一个延时器
+      const start = Date.now();
+      setTimeout(() => {
+        const end = Date.now();
+        if (end - start < 1200) {
+          // 如果 iframe 加载时间小于 1.2 秒，说明应用没有安装
           xma.showToast({
             title: '未安装App',
             icon: 'error',
           });
-          groupBuyConfirmFn(prodIds.value, skuIds.value);
+          // 这里可以跳转到应用下载页面
         }
-      }, 1500);
+      }, 1000);
+    } else {
+      groupBuyConfirmFn(prodIds.value, skuIds.value);
     }
   });
-  // xma.redirectTo({
-  //   url: '/pages/shop/paymentSuccessful',
-  // });
-}
+}, 1000);
 </script>
 
 <style lang="scss" scoped>

src/pages/shop/shop.vue

@@ -271,6 +271,7 @@
               class="scroll-view-item_H"
               v-for="(item, index) in recommendedListOfPeripherals"
               :key="index"
+              @click="refreshShowDetail(item)"
             >
               <view class="item-box">
                 <image mode="aspectFill" :src="imgUrl + item.shopLogo"></image>
@@ -348,31 +349,6 @@ const recommendedTypesOfPeripherals = ref([]);
 const shopId = ref('');
 // 周边推荐-商家列表
 const recommendedListOfPeripherals = ref([]);
-// onLoad((options) => {
-//   params.value.shopId = options.shopId;
-//   getStoreInformationFn(options.shopId).then(() => {
-//     peripheryRecomFn();
-//   });
-//   groupBuyListFn(options.shopId);
-//   shopId.value = options.shopId;
-//   couponShopListFn(options.shopId);
-//   getEvaluationPageFn();
-// });
-// onShow(() => {
-//   getStoreInformationFn(params.value.shopId).then(() => {
-//     // 获取位置
-//     getLocationFn().then((res) => {
-//       const distance = getDistance(
-//         res.lat,
-//         res.lon,
-//         shopLocation.value.lat,
-//         shopLocation.value.lon,
-//         1,
-//       );
-//       shopInfo.value.distance = distance;
-//     });
-//   });
-// });
 onLoad(async (options) => {
   params.value.shopId = options.shopId;
   shopId.value = options.shopId;
@@ -400,6 +376,26 @@ onShow(async () => {
   // 获取位置并计算距离
   calculateDistance();
 });
+async function refreshShowDetail(item) {
+  params.value.shopId = item.shopId;
+  shopId.value = item.shopId;
+
+  // 使用 Promise.all 并行请求，提升性能
+  await Promise.all([
+    getStoreInformationFn(item.shopId),
+    groupBuyListFn(item.shopId),
+    couponShopListFn(item.shopId),
+  ]);
+
+  // 获取周边推荐信息
+  peripheryRecomFn();
+
+  // 获取评价信息
+  getEvaluationPageFn();
+
+  // 获取位置并计算距离
+  calculateDistance();
+}
 // 计算距离的函数封装
 async function calculateDistance() {
   try {
@@ -474,7 +470,6 @@ function sgyrddShopPageFn(categoryIds, lat, lon) {
         .filter((item) => {
           return item !== '';
         });
-      console.log('res.data.content', res.data.content);
 
       recommendedListOfPeripherals.value = res.data.content;
       xma.hideLoading();
@@ -560,9 +555,13 @@ const groupBuyListFn = (shopId) => {
     if (res.code === 0) {
       listOfGroupBuyingProducts.value = res.data.map((item) => {
         item.pic = imgUrl + item.pic;
-        item.labelNames = item.labelNames.split(',').filter((lab) => {
-          return lab !== '';
-        });
+        if (item.labelNames) {
+          item.labelNames = item.labelNames.split(',').filter((lab) => {
+            return lab !== '';
+          });
+        } else {
+          item.labelNames = [];
+        }
         return item;
       });
     }

src/pages/shop/text.vue

+<template>
+  <div>
+    <wd-rate
+      custom-class="icon-statr"
+      color="#fff"
+      readonly
+      v-model="grade"
+      size="22rpx"
+      space="8rpx"
+      :active-color="['#FA5151']"
+    />
+  </div>
+</template>
+
+<script setup>
+const grade = ref(5);
+</script>
+
+<style lang="scss" scoped>
+.icon-statr {
+  :deep(.wd-icon-star-on) {
+    display: block !important;
+  }
+}
+</style>