VAVABUY/pages/index/index.vue

<template>
  <Theme>
    <view class="wrap" :style="{ '--tabbarHeight': tabbarHeight + 'px' }">
      <view class="cont">
        <view class="cont_bg" id="tob">
          <Navbar bgColor="transparent" fixed>
            <template #left>
              <view class="nav_left">
                <image
                  src="@/static/logo.png"
                  class="nav_logo"
                  mode="widthFix"
                ></image>
              </view>
            </template>
            <template #right>
              <view class="nav_right">
                <view class="icon-badge-wrap">
                  <image
                    src="/static/home/kefu.png"
                    class="mobile_system"
                    @click="toGo('/pages/setting/system')"
                  >
                  </image>
                  <up-badge
                    type="error"
                    max="99"
                    :value="unreadCount"
                    class="tips"
                    v-if="unreadCount > 0"
                  ></up-badge>
                </view>

                <image
                  src="/static/language.png"
                  class="mobile_language"
                  @click="toGo('/pages/setting/language_currency')"
                ></image>
                <navMenu />
              </view>
            </template>
          </Navbar>
          <view class="bg_top">
            <view class="search">
              <Search
                v-model="searchValue"
                border="none"
                @click="searchClick"
                :placeholder="t('商品的链接或名称')"
              >
                <template #prefix>
                  <i class="icon-font icon-search"></i>
                </template>
                <template #suffix>
                  <i class="icon-font icon-camera"></i>
                </template>
              </Search>
            </view>
          </view>
        </view>
        <scroll-view
          class="content-scroll"
          scroll-y
          refresher-enabled
          :refresher-triggered="refreshering"
          @refresherrefresh="onRefresherRefresh"
          @refresherrestore="onRefresherRestore"
          refresher-default-style="none"
          :style="{ height: contentHeight + 'px' }"
        >
          <view class="refresher" v-if="refreshering">
            <up-loadmore :status="'loading'" :loadingText="''" />
          </view>
          <view class="content">
            <view
              class="old_box new_box"
              @click="toGo('/pages/index/activityList')"
            >
              <view class="new_logo">
                <trans _t="新" />
              </view>
              <view class="old_title">
                <trans _t="免运费区域" />
              </view>
              <newBox />
              <view class="card_desc">
                <view
                  class="item_desc"
                  v-for="(item, index) in newDesc"
                  :key="index"
                >
                  {{ item }}
                </view>
              </view>
              <view class="enter">
                <trans _t="立即进入" />
              </view>
            </view>
            <!-- <view class="or">
              <trans _t="或者选择你的方式" />
            </view> -->
            <view class="old_box">
              <!-- <view class="old_title">
                <trans _t="转运服务" />
              </view> -->
              <view
                class="card_wrapper"
                @click="toGo('/pages/user/beginner_guide')"
              >
                <view
                  class="card_item"
                  v-for="(item, index) in card"
                  :key="index"
                >
                  <view class="item_top">
                    <view class="item_img">
                      <image
                        :src="`../../static/home/card_${index}.png`"
                        class="img"
                      ></image>
                    </view>
                    <view class="line"></view>
                  </view>
                  <image
                    class="beginner"
                    src="@/static/right.png"
                    v-if="index == 2"
                  ></image>
                  <view class="item_text">
                    <view class="item_num">{{ index + 1 }}</view>
                    <trans class="text" :_t="item.text" />
                  </view>
                </view>
              </view>
              <view class="card_desc">
                <view class="item_desc"> 7-DAy Buyback </view>
                <view class="item_desc"> Authenticity Check </view>
                <view class="item_desc"> Damage Insurance </view>
              </view>
              <view class="hot-platforms">
                <!-- <SectionTitle title="热门平台" /> -->
                <view class="platforms-list">
                  <view
                    class="platform-item"
                    v-for="(item, index) in moduleList"
                    :key="index"
                    :style="{
                      background: `url(../../static/home/shop_bg_${item.channel}.png)`,
                      backgroundSize: '100% 100%',
                    }"
                    @click="linkClick(item)"
                  >
                    <view class="platform-top">
                      <image
                        :src="`../../static/shop/icon_${item.channel}.png`"
                        class="platform-logo"
                      />
                      <view class="platform-name">{{ t(item.title) }}</view>
                    </view>
                    <view class="enter-btn">
                      <trans _t="立即进入" />
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="old_box main_bg">
              <view class="guide-section" @click="jumpGuide">
                <view class="guide-content">
                  <image class="img" src="/static/home/service.png"></image>
                  <view class="guide-text">
                    <view class="guide-title">
                      <trans _t="网购专家指引" />
                    </view>
                    <view class="guide-desc">
                      <trans _t="帮你快速上手选择性价比商品" />
                    </view>
                  </view>
                </view>
                <view class="jump-btn">
                  <trans _t="点击跳转" />
                </view>
              </view>
              <view class="bootom_scorll_box">
                <view
                  class="button-item"
                  v-for="(btn, index) in functionButtons"
                  :key="index"
                  @click="toGo(btn.url)"
                >
                  <image :src="btn.icon" class="btn-icon" />
                  <view class="btn-text">{{ t(btn.text) }}</view>
                  <!-- <view class="btn-desc">{{ t(btn.desc) }}</view> -->
                </view>
              </view>
            </view>
            <view class="old_box main_bg" v-if="orderList.length">
              <view class="old_title">
                <trans _t="进行中的订单" />
              </view>
              <OrderScroll
                :order-list="orderList"
                @itemClick="handleOrderClick"
              />
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <IosUpdateModal />
    <blindModel />
    <Tabbar page="index" @getTabbarHeight="getTabbarHeight" />
  </Theme>
</template>

<script setup>
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import plaCard from "@/components/placard";
import Swiper from "@/components/swiper";
import blindModel from "@/components/blindModel";
import Search from "@/components/input";
import navMenu from "@/components/nav_menu";
import IosUpdateModal from "@/components/IosUpdateModal";
import SectionTitle from "./components/SectionTitle";
import OrderScroll from "./components/OrderScroll.vue";
import newBox from "./components/newBox.vue";
import { computed, ref, watch, nextTick, onMounted } from "vue";
import {
  onLoad,
  onShow,
  onUnload,
  onHide,
  onPageScroll,
} from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import {
  useShopStore,
  useSystemStore,
  useMessageStore,
  useTabbarStore,
  useUserStore,
} from "@/store";
import { t } from "@/locale";
import { SHOP_INDEX_ORDER } from "@/api";
import { query, systemInfo } from "@/utils";

const useShop = useShopStore();
const useSystem = useSystemStore();
const useTabbar = useTabbarStore();
const useUser = useUserStore();

const langList = computed(() => useSystem.getLangeuage);
const lang = computed(() => useSystem.getLang);
const token = computed(() => useUser.getToken);
const currentLangIcon = computed(() => {
  if (langList.value.length === 0) {
    return "/static/home/matchedIcon.png";
  }
  const matched = langList.value.find((item) => item.code === lang.value);
  return matched ? matched.icon : "/static/home/matchedIcon.png";
});

const useMessage = useMessageStore();
const { globalMap } = storeToRefs(useMessage);
const unreadCount = ref(0);
watch(
  () => globalMap.value.noticeChannel,
  (newVal, oldVal) => {
    if (newVal) {
      unreadCount.value = newVal.unreadCount;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const searchValue = ref("");
const hotLink = computed(() => useShop.getHotLink);
const refreshering = ref(false);
const contentHeight = ref(0);
const tabbarHeight = ref(0);

const newDesc = ref(["Direct Ship", "Free Shipping", "Faster"]);
const card = [
  {
    icon: "",
    text: "选购商品",
    desc: "7-DAy Buyback",
    url: "",
  },
  {
    icon: "",
    text: "仓储质检",
    desc: "Authenticity Check",
    url: "",
  },
  {
    icon: "",
    text: "运输到家",
    desc: "Damage Insurance",
    url: "",
  },
];
const moduleList = [
  {
    channel: 0,
    title: "1688工厂直销",
    cont: "工厂直销",
    desc: "服装、美妆、母婴、食品、数码产品、家电、家具",
  },
  {
    channel: 1,
    title: "淘宝",
    cont: "全球最大的C2C电商平台之一",
    desc: "服装、美妆、母婴、食品、数码产品、家电、家具",
  },
  {
    channel: 3,
    title: "JD",
    cont: "主流电子商务应用产品平台",
    desc: "服装、美妆、母婴、食品、数码产品、家电、家具",
  },
];
const functionButtons = ref([
  {
    icon: "/static/home/freight.png",
    text: "运费估算",
    desc: "优化预算成本",
    url: "/pages/index/estimation",
  },
  // {
  //   icon: "/static/home/order.png",
  //   text: "追踪订单",
  //   url: "/pages/dashboard/order",
  // },
  {
    icon: "/static/home/price.png",
    text: "价格追踪",
    desc: "更新最低报价",
    url: "/pages/dashboard/favorites?change=1",
  },
  {
    icon: "/static/home/follow.png",
    text: "关注列表",
    desc: "关注最新信息",
    url: "/pages/dashboard/favorites",
  },
]);
const searchClick = () => {
  toGo("/pages/index/search");
};
const orderList = ref([]);

const handleOrderClick = (order) => {
  uni.navigateTo({
    url: `/pages/order/details?oid=${order.id}`,
  });
};
const toGo = (url) => {
  if (!url) return;
  uni.navigateTo({ url });
};
const jumpGuide = () => {
  uni.switchTab({ url: "/pages/chat/index" });
  useTabbar.getPageCur("chat");
};
const linkClick = (item) => {
  toGo(`/pages/index/products?channel=${item.channel}`);
};
const swiperClick = (item) => {
  if (item.action == "goto_user") {
    toGo(`/pages/index/activityList`);
  }
};
const getOrder = async () => {
  try {
    const res = await SHOP_INDEX_ORDER();
    orderList.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};
const getTabbarHeight = (height) => {
  tabbarHeight.value = height;
};
const loadPageData = async () => {
  const tasks = [];
  if (token.value) tasks.push(getOrder());
  tasks.push(useSystem.setBoxes({}, { isLoading: true }));
  await Promise.all(tasks);
};

onShow(() => {
  loadPageData();
});

onMounted(() => {
  nextTick(async () => {
    const res = await query("#tob");
    const { windowHeight, statusBarHeight } = systemInfo();
    contentHeight.value = windowHeight - res.height - statusBarHeight;
  });
});

uni.hideTabBar();

const onRefresherRefresh = async () => {
  try {
    refreshering.value = true;
    await loadPageData();
  } finally {
    refreshering.value = false;
  }
};
const onRefresherRestore = () => {
  refreshering.value = false;
};
</script>

<style lang="less" scoped>
.wrap {
  background: var(--bg);
  min-height: calc(100vh - var(--tabbarHeight));
  padding-bottom: var(--tabbarHeight);

  .nav_left {
    display: flex;
    align-items: center;

    .nav_logo {
      width: 284rpx;
    }
  }

  .nav_right {
    display: flex;
    align-items: center;

    .mobile_language {
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx 0 24rpx;
    }

    .icon-badge-wrap {
      position: relative;
      display: inline-block;
      width: 48rpx;
      height: 48rpx;

      .mobile_system {
        width: 48rpx;
        height: 48rpx;
      }

      .tips {
        position: absolute;
        right: -10rpx;
        top: -8rpx;
        z-index: 2;
      }
    }
  }

  .cont {
    width: 100%;
    background-color: var(--light);
    &_bg {
      position: sticky;
      top: 0;
      z-index: 9999;
      background-color: var(--bg);

      .bg_top {
        padding: 0 30rpx;

        .search {
          padding: 26rpx 0;

          :deep(.u-input) {
            padding: 0 20px 0 16px !important;

            .u-input__content__field-wrapper__field {
              height: 47px;
            }
          }

          .icon-search {
            color: var(--text);
            font-size: 40rpx;
          }

          .icon-camera {
            color: var(--text-01);
            font-size: 70rpx;
          }
        }
      }
    }

    .content-scroll {
      overflow: hidden;
    }

    .content {
      width: 100%;
      padding: 0 30rpx 30rpx;
      position: relative;
      box-sizing: border-box;
      /deep/ .pla_card {
        margin-top: 16px;
      }
      /deep/ .swiper_list {
        object-fit: cover;
        aspect-ratio: 115 / 36;
      }
      .swiper-box {
        width: 100%;
      }
      .old_box {
        width: 100%;
        padding: 24rpx;
        border-radius: 20rpx;
        background: #fee4b3;
        &.main_bg {
          margin-top: 24rpx;
          background: var(--inputBg);
        }
        &.new_box {
          position: relative;
          background: #e5faff;
          margin-bottom: 24rpx;
          .new_logo {
            position: absolute;
            top: 26rpx;
            left: -8rpx;
            width: 140rpx;
            height: 62rpx;
            line-height: 56rpx;
            text-align: center;
            font-size: 36rpx;
            font-weight: bold;
            color: var(--light);
            background: url("/static/home/new_bg.png");
            background-size: 100% 100%;
          }
          .enter {
            width: 100%;
            height: 64rpx;
            line-height: 64rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 600;
            color: var(--black);
            border-radius: 20rpx;
            padding: 0 28rpx;
            background: var(--bg);
            box-sizing: border-box;
          }
        }
        .old_title {
          text-align: center;
          font-size: 36rpx;
          font-weight: bold;
          color: var(--black);
          margin-bottom: 24rpx;
        }
      }
      .or {
        font-size: 24rpx;
        font-weight: bold;
        line-height: 62rpx;
        text-align: center;
        color: var(--text-01);
      }
      .card_wrapper {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: calc(100% -62rpx);
        .card_item {
          width: 33%;
          color: var(--text);
          font-size: 24rpx;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 1;

          .item_top {
            position: relative;
            border-radius: 50%;
            padding: 14rpx;
            background-color: var(--bg);
            box-sizing: border-box;

            .item_img {
              background-color: var(--bg);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 14rpx;
              border: 2rpx dashed var(--bor-color1);

              .img {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }

          .item_text {
            display: flex;
            align-items: center;
            margin-top: 10rpx;

            .item_num {
              width: 32rpx;
              height: 32rpx;
              border-radius: 50%;
              background-color: var(--black);
              display: flex;
              justify-content: center;
              font-size: 24rpx;
              color: var(--light);
              line-height: 32rpx;
              margin-right: 8rpx;
            }

            .text {
              flex: 1;
              display: inline-block;
              text-align: center;
              white-space: nowrap;
            }
          }
        }

        &::before {
          content: "";
          position: absolute;
          left: 10%;
          right: 0;
          top: 56rpx;
          transform: translateY(-40%);
          width: 80%;
          height: 1px;
          border-bottom: 1px dashed var(--black);
          z-index: 0;
        }
        .beginner {
          position: absolute;
          right: 0rpx;
          top: 42rpx;
          width: 32rpx;
          height: 32rpx;
        }
      }
      .card_desc {
        display: flex;
        justify-content: space-between;
        margin: 24rpx 0;
        width: 100%;
        height: 54rpx;
        line-height: 54rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.6);
        // padding: 0 30rpx;
        box-sizing: border-box;
        // border: 1rpx solid #e5e4e9;
        .item_desc {
          width: 33.33%;
          font-size: 20rpx;
          font-weight: bold;
          text-align: center;
          color: var(--text-01);
          position: relative;

          &:not(:last-child)::after {
            content: "•";
            position: absolute;
            right: -4rpx;
            color: var(--black);
            font-size: 36rpx;
          }
        }
      }
      .hot-platforms {
        .platforms-list {
          width: 100%;
          display: flex;
          // flex-wrap: wrap;
          gap: 24rpx;
          margin-right: 24rpx;

          .platform-item {
            width: 32%;
            min-height: 260rpx;
            object-fit: cover;
            aspect-ratio: 67 / 55;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            border: 1rpx solid #eee;
            border-radius: 20rpx;
            padding: 24rpx 16rpx 16rpx;
            background-size: cover;
            background-position: center;
            overflow: hidden;
            box-sizing: border-box;
            .platform-top {
              display: flex;
              flex-direction: column;
              align-items: center;
              .platform-logo {
                width: 60rpx;
                height: 60rpx;
                margin-bottom: 16rpx;
              }

              .platform-name {
                font-size: 26rpx;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 28rpx;
              }
            }

            .enter-btn {
              width: 100%;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              font-size: 24rpx;
              font-weight: 500;
              color: #000;
              background-color: #fff;
              border-radius: 10rpx;
            }
          }
        }
      }

      .guide-section {
        margin-bottom: 24rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--bg);
        color: var(--black);
        padding: 22rpx 20rpx 24rpx;
        border-radius: 20rpx;
        .guide-content {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24rpx;
          .guide-text {
            .guide-title {
              font-size: 32rpx;
              font-weight: bold;
              margin-bottom: 12rpx;
            }

            .guide-desc {
              font-size: 24rpx;
              color: var(--text-01);
            }
          }
          .img {
            width: 72rpx;
            height: 72rpx;
            margin-right: 14rpx;
          }
        }
        .jump-btn {
          width: 100%;
          height: 68rpx;
          line-height: 68rpx;
          text-align: center;
          font-size: 28rpx;
          font-weight: 600;
          color: var(--black);
          background: var(--bor-color);
          border-radius: 20rpx;
        }
      }
      .bootom_scorll_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 20rpx;
        .button-item {
          min-width: 31%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 24rpx;
          background: var(--bg);
          padding: 24rpx 10rpx;
          box-sizing: border-box;

          .btn-icon {
            width: 80rpx;
            height: 80rpx;
          }

          .btn-text {
            padding: 20rpx 0 10rpx;
            font-size: 22rpx;
            color: var(--text);
            font-weight: bold;
            // white-space: nowrap;
            text-align: center;
          }
          .btn-desc {
            font-size: 20rpx;
            color: var(--text-01);
            text-align: center;
          }
        }
      }
      .function-buttons {
      }
    }
  }
}
</style>