From 36f87272df65f102d7cb24469042a889c7f76a03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 3 Feb 2026 08:44:02 +0800 Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=9B=B4=E6=96=B0=E9=A6=96?= =?UTF-8?q?=E9=A1=B5UI=E8=AE=BE=E8=AE=A1=E5=B9=B6=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新导航栏标题为WEBSOFT，移除自定义导航样式 - 重构Hero区域样式，替换渐变背景和品牌展示组件 - 新增快速导航栏支持产品、能力、流程等功能跳转 - 实现产品矩阵展示企业官网、小程序、电商系统等六大产品 - 添加核心能力介绍包括SaaS多租户、私有化部署、模板插件市场 - 集成联系咨询功能和电话呼叫能力 - 优化分享消息内容显示站点名称和网宿软件信息 - 重构页面布局结构提升移动端用户体验 --- src/{rider => developer}/index.config.ts | 0 src/{rider => developer}/index.scss | 0 src/{rider => developer}/index.tsx | 0 .../orders/index.config.ts | 0 src/{rider => developer}/orders/index.tsx | 0 src/pages/index/index.config.ts | 5 +- src/pages/index/index.scss | 764 +++++++++--------- src/pages/index/index.tsx | 652 +++++++++------ src/pages/user/components/IsDealer.tsx | 2 +- src/pages/user/components/UserGrid.tsx | 4 +- 10 files changed, 822 insertions(+), 605 deletions(-) rename src/{rider => developer}/index.config.ts (100%) rename src/{rider => developer}/index.scss (100%) rename src/{rider => developer}/index.tsx (100%) rename src/{rider => developer}/orders/index.config.ts (100%) rename src/{rider => developer}/orders/index.tsx (100%) diff --git a/src/rider/index.config.ts b/src/developer/index.config.ts similarity index 100% rename from src/rider/index.config.ts rename to src/developer/index.config.ts diff --git a/src/rider/index.scss b/src/developer/index.scss similarity index 100% rename from src/rider/index.scss rename to src/developer/index.scss diff --git a/src/rider/index.tsx b/src/developer/index.tsx similarity index 100% rename from src/rider/index.tsx rename to src/developer/index.tsx diff --git a/src/rider/orders/index.config.ts b/src/developer/orders/index.config.ts similarity index 100% rename from src/rider/orders/index.config.ts rename to src/developer/orders/index.config.ts diff --git a/src/rider/orders/index.tsx b/src/developer/orders/index.tsx similarity index 100% rename from src/rider/orders/index.tsx rename to src/developer/orders/index.tsx diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 09f9fa8..c4b40ce 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,5 +1,4 @@ export default definePageConfig({ - navigationBarTitleText: 'shopLnk.cn - 数灵云店', - navigationBarTextStyle: 'black', - navigationStyle: 'custom' + navigationBarTitleText: 'WEBSOFT', + navigationBarTextStyle: 'black' }) diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index b8badac..1480b3d 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -1,446 +1,486 @@ page { - //background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center; - //background-size: 100%; - background: linear-gradient(to bottom, #e9fff2, #ffffff); + background: linear-gradient(to bottom, #f6f7fb, #ffffff); } .home-page { padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom)); } -.home-hero { +/* Hero */ +.hero { position: relative; overflow: hidden; border-radius: 28rpx; - background: linear-gradient(180deg, #bfefff 0%, #eafaff 40%, #fff7ec 100%); - box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06); + padding: 26rpx 22rpx 28rpx; + background: linear-gradient(180deg, #0b1220 0%, #0b0f1a 100%); + box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.14); } -.home-hero__bg { +.hero__bgGlow { position: absolute; - inset: 0; - background: - radial-gradient(360rpx 240rpx at 18% 16%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), - radial-gradient(320rpx 220rpx at 84% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), - linear-gradient(180deg, rgba(0, 207, 255, 0.12), rgba(0, 0, 0, 0)); + left: 50%; + top: -160rpx; + width: 760rpx; + height: 420rpx; + transform: translateX(-50%); + border-radius: 999rpx; + background: rgba(34, 214, 74, 0.22); + filter: blur(60rpx); pointer-events: none; } -.home-hero__content { +.hero__inner { position: relative; - display: flex; - justify-content: space-between; - gap: 18rpx; - padding: 26rpx 24rpx 28rpx; - min-height: 320rpx; } -.home-hero__left { - flex: 1; - min-width: 0; -} - -.home-hero__topRow { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 16rpx; -} - -.home-hero__brand { - flex: none; +.hero__tag { display: inline-flex; align-items: center; - padding: 8rpx 14rpx; + padding: 10rpx 16rpx; border-radius: 999rpx; - background: rgba(255, 214, 84, 0.92); - color: #2a2a2a; - font-weight: 700; + background: rgba(255, 150, 0, 0.16); + border: 2rpx solid rgba(255, 150, 0, 0.35); +} + +.hero__tagText { font-size: 24rpx; + font-weight: 700; + color: rgba(255, 195, 115, 0.95); line-height: 1; } -.home-hero__brandText { - line-height: 1; +.hero__title { + margin-top: 18rpx; } -.home-hero__tag { - flex: none; - display: inline-flex; - align-items: center; - padding: 10rpx 18rpx; - border-radius: 18rpx; - background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%); - box-shadow: 0 14rpx 24rpx rgba(36, 202, 148, 0.22); -} - -.home-hero__tagText { - font-size: 56rpx; +.hero__titleText { + display: block; + font-size: 40rpx; font-weight: 900; color: #ffffff; - line-height: 1; + line-height: 1.18; } -.home-hero__date { - flex: 1; - min-width: 0; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 10rpx 14rpx; - border-radius: 999rpx; - background: rgba(255, 255, 255, 0.75); +.hero__desc { + margin-top: 14rpx; } -.home-hero__dateText { +.hero__descText { + display: block; font-size: 26rpx; - font-weight: 700; - color: #1a1a1a; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + color: rgba(255, 255, 255, 0.78); + line-height: 1.6; } -.home-hero__headline { - margin-top: 22rpx; -} - -.home-hero__headlineText { - display: block; - font-size: 42rpx; - font-weight: 900; - color: #0b0b0b; - letter-spacing: 0.5px; - line-height: 1.15; -} - -.home-hero__right { - width: 200rpx; - display: flex; - justify-content: flex-end; - align-items: flex-end; -} - -.home-hero__bottle { - position: relative; - width: 190rpx; - height: 250rpx; - border-radius: 28rpx; - background: - radial-gradient(240rpx 360rpx at 60% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18)), - linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1)); - border: 2rpx solid rgba(255, 255, 255, 0.65); - box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.12); -} - -.home-hero__bottleCap { - position: absolute; - top: 14rpx; - left: 50%; - transform: translateX(-50%); - width: 88rpx; - height: 26rpx; - border-radius: 999rpx; - background: linear-gradient(180deg, #d7e6f3, #b0cadd); - box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.12); -} - -.home-hero__bottleLabel { - position: absolute; - left: 18rpx; - right: 18rpx; - bottom: 30rpx; - padding: 12rpx 12rpx; - border-radius: 18rpx; - background: linear-gradient(90deg, rgba(0, 150, 255, 0.18), rgba(0, 255, 210, 0.18)); - border: 2rpx solid rgba(255, 255, 255, 0.45); -} - -.home-hero__bottleLabelText { - font-size: 30rpx; - font-weight: 800; - color: rgba(0, 80, 140, 0.95); - text-align: center; - display: block; -} - -.ticket-card { - margin-top: 18rpx; - border-radius: 22rpx; - overflow: hidden; - background: #ffffff; - box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06); -} - -.ticket-card__head { - display: flex; - justify-content: space-between; - align-items: center; - padding: 18rpx 20rpx; - background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%); -} - -.ticket-card__title { - color: #ffffff; - font-weight: 800; - font-size: 28rpx; -} - -.ticket-card__count { - color: rgba(255, 255, 255, 0.92); - font-size: 24rpx; -} - -.ticket-card__countNum { - color: #ffffff; - font-weight: 900; -} - -.ticket-card__body { - padding: 20rpx 10rpx 22rpx; -} - -.shortcut-grid { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 12rpx; -} - -.shortcut-grid__item { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - align-items: center; - gap: 12rpx; -} - -.shortcut-grid__icon { - width: 88rpx; - height: 88rpx; - border-radius: 18rpx; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - color: #20c26a; - border: 2rpx solid rgba(32, 194, 106, 0.35); -} - -.shortcut-grid__text { - font-size: 24rpx; - color: #333333; -} - -.home-tabs { +.hero__actions { margin-top: 18rpx; } -.home-tabs__inner { - display: flex; - gap: 18rpx; - padding: 0 4rpx; +.hero__btn { + border-radius: 18rpx !important; } -.home-tabs__item { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 10rpx 18rpx; - border-radius: 999rpx; - background: transparent; +.hero__btn--primary { + background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%) !important; + border: none !important; } -.home-tabs__item--active { - background: rgba(32, 194, 106, 0.16); -} - -.home-tabs__itemText { - font-size: 28rpx; - color: #2a2a2a; - white-space: nowrap; -} - -.home-tabs__item--active .home-tabs__itemText { - color: #16b65a; - font-weight: 800; -} - -.goods-grid { - margin-top: 18rpx; +.hero__btnRow { + margin-top: 12rpx; display: grid; grid-template-columns: 1fr 1fr; - gap: 18rpx; + gap: 12rpx; } -.goods-card { - border-radius: 22rpx; - overflow: hidden; - background: #ffffff; - box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06); -} - -.goods-card__imgWrap { - padding: 18rpx 18rpx 0; -} - -.goods-card__img { - width: 100%; - height: 280rpx; - border-radius: 18rpx; - background: #f4f4f4; -} - -.goods-card__body { - padding: 18rpx 18rpx 20rpx; -} - -.goods-card__title { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - font-size: 26rpx; - font-weight: 700; - color: #1c1c1c; - min-height: 72rpx; -} - -.goods-card__meta { - margin-top: 10rpx; - display: flex; - justify-content: space-between; - align-items: flex-end; +/* Quick nav */ +.quickNav { + margin-top: 14rpx; + padding: 12rpx 10rpx; + border-radius: 20rpx; + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 14rpx 26rpx rgba(0, 0, 0, 0.06); + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10rpx; + position: sticky; + top: 0; + z-index: 20; } -.goods-card__sold { - font-size: 22rpx; - color: #9a9a9a; - white-space: nowrap; -} - -.goods-card__price { +.quickNav__item { + height: 66rpx; + border-radius: 16rpx; display: flex; - align-items: baseline; - gap: 4rpx; - color: #27c86b; - white-space: nowrap; + align-items: center; + justify-content: center; + background: rgba(22, 182, 90, 0.08); + border: 2rpx solid rgba(22, 182, 90, 0.14); } -.goods-card__priceUnit { - font-size: 22rpx; +.quickNav__text { + font-size: 24rpx; font-weight: 800; + color: #168c49; + line-height: 1; } -.goods-card__priceValue { - font-size: 36rpx; +/* Sections */ +.section { + margin-top: 22rpx; + padding: 20rpx 18rpx; + border-radius: 24rpx; + background: #ffffff; + box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.06); +} + +.section--alt { + background: #f7f9fc; +} + +.section__head { + margin-bottom: 14rpx; +} + +.section__title { + display: block; + font-size: 34rpx; font-weight: 900; + color: #111111; + line-height: 1.2; } -.goods-card__actions { +.section__desc { + display: block; + margin-top: 8rpx; + font-size: 26rpx; + color: #666666; + line-height: 1.6; +} + +.section__foot { margin-top: 16rpx; - display: flex; +} + +/* Generic card */ +.card { + border-radius: 20rpx; + padding: 18rpx 16rpx; + background: #ffffff; + box-shadow: 0 14rpx 26rpx rgba(0, 0, 0, 0.05); +} + +.card__title { + display: block; + font-size: 30rpx; + font-weight: 800; + color: #111111; +} + +.card__desc { + display: block; + margin-top: 10rpx; + font-size: 26rpx; + color: #666666; + line-height: 1.6; +} + +/* Product grid */ +.productGrid { + display: grid; + grid-template-columns: 1fr 1fr; gap: 14rpx; } -.goods-card__btn { - flex: 1; - height: 64rpx; +.productCard { + padding: 16rpx 14rpx; +} + +.productCard__top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10rpx; +} + +.productCard__title { + font-size: 28rpx; + font-weight: 900; + color: #111111; +} + +.productCard__desc { + display: block; + margin-top: 10rpx; + font-size: 24rpx; + color: #666666; + line-height: 1.55; +} + +.productCard__actions { + margin-top: 12rpx; +} + +.tagRow { + margin-top: 10rpx; + display: flex; + flex-wrap: wrap; + gap: 10rpx; +} + +.tag { + padding: 6rpx 10rpx; border-radius: 999rpx; + background: rgba(22, 182, 90, 0.12); + border: 2rpx solid rgba(22, 182, 90, 0.22); +} + +.tag__text { + font-size: 22rpx; + font-weight: 700; + color: #16b65a; + line-height: 1; +} + +/* Badges */ +.badge { + padding: 6rpx 10rpx; + border-radius: 999rpx; +} + +.badge__text { + font-size: 22rpx; + font-weight: 800; + line-height: 1; +} + +.badge--green { + background: rgba(22, 182, 90, 0.14); + border: 2rpx solid rgba(22, 182, 90, 0.24); +} + +.badge--green .badge__text { + color: #16b65a; +} + +.badge--soft { + background: rgba(0, 0, 0, 0.06); +} + +.badge--soft .badge__text { + color: #333333; +} + +/* Capabilities */ +.capGrid { + display: grid; + grid-template-columns: 1fr; + gap: 14rpx; +} + +.capCard__top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10rpx; +} + +.capCard__title { + font-size: 30rpx; + font-weight: 900; + color: #111111; +} + +.capCard__desc { + display: block; + margin-top: 10rpx; + font-size: 26rpx; + color: #666666; + line-height: 1.6; +} + +/* Flow */ +.flowCard { + padding: 6rpx 10rpx; +} + +.flowStep { + display: flex; + gap: 14rpx; + padding: 14rpx 8rpx; +} + +.flowStep + .flowStep { + border-top: 2rpx solid rgba(0, 0, 0, 0.06); +} + +.flowStep__dot { + flex: none; + width: 40rpx; + height: 40rpx; + border-radius: 999rpx; + background: rgba(22, 182, 90, 0.14); display: flex; align-items: center; justify-content: center; } -.goods-card__btn--ghost { - border: 2rpx solid rgba(32, 194, 106, 0.7); - background: #ffffff; +.flowStep__dotText { + font-size: 22rpx; + font-weight: 900; + color: #16b65a; } -.goods-card__btn--primary { - background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%); +.flowStep__body { + flex: 1; + min-width: 0; } -.goods-card__btnText { +.flowStep__title { + display: block; + font-size: 28rpx; + font-weight: 900; + color: #111111; + line-height: 1.2; +} + +.flowStep__desc { + display: block; + margin-top: 8rpx; font-size: 24rpx; - font-weight: 700; - color: #18b85a; + color: #666666; + line-height: 1.55; +} + +/* Segmented tabs */ +.segTabs { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12rpx; + padding: 10rpx; + border-radius: 18rpx; + background: rgba(0, 0, 0, 0.04); +} + +.segTabs__item { + height: 70rpx; + border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: center; + background: transparent; +} + +.segTabs__item--active { + background: #ffffff; + box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.08); +} + +.segTabs__text { + font-size: 28rpx; + font-weight: 900; + color: #2a2a2a; +} + +.twoCard { + margin-top: 14rpx; + display: grid; + grid-template-columns: 1fr; + gap: 14rpx; +} + +/* List */ +.list { + margin-top: 12rpx; +} + +.list__item { + display: flex; + gap: 12rpx; + padding: 10rpx 0; +} + +.list__dot { + flex: none; + width: 10rpx; + height: 10rpx; + margin-top: 12rpx; + border-radius: 999rpx; + background: rgba(22, 182, 90, 0.9); +} + +.list__text { + flex: 1; + min-width: 0; + font-size: 26rpx; + color: #666666; + line-height: 1.55; +} + +.contactMeta { + margin-top: 14rpx; + padding-top: 14rpx; + border-top: 2rpx solid rgba(0, 0, 0, 0.06); +} + +.contactMeta__row { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 12rpx; + padding: 10rpx 0; +} + +.contactMeta__label { + font-size: 24rpx; + color: #888888; white-space: nowrap; } -.goods-card__btnText--primary { +.contactMeta__value { + font-size: 26rpx; + font-weight: 800; + color: #111111; + text-align: right; +} + +.contactActions { + margin-top: 14rpx; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12rpx; +} + +/* Bottom CTA */ +.bottomCta { + margin-top: 22rpx; + padding: 22rpx 18rpx; + border-radius: 24rpx; + background: linear-gradient(180deg, #0b1220 0%, #0b0f1a 100%); + box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.14); +} +.bottom__view{ + background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%) !important; + //background: linear-gradient(180deg, #2dd022 0%, #9be52b 100%); +} +.bottomCta__title { + display: block; + font-size: 32rpx; + font-weight: 900; color: #ffffff; + line-height: 1.2; } -.buy-btn{ - height: 70px; - background: linear-gradient(to bottom, #1cd98a, #24ca94); - border-radius: 100px; - color: #ffffff; - display: flex; - align-items: center; - justify-content: space-around; - .cart-icon{ - background: linear-gradient(to bottom, #bbe094, #4ee265); - border-radius: 100px 0 0 100px; - height: 70px; - } +.bottomCta__desc { + display: block; + margin-top: 10rpx; + font-size: 26rpx; + color: rgba(255, 255, 255, 0.75); + line-height: 1.55; } -/* 轮播图容器样式，确保支持两种滑动操作 */ -.banner-swiper-container { - touch-action: pan-y !important; /* 允许垂直滑动 */ - - .nut-swiper { - touch-action: pan-y !important; /* 允许垂直滑动 */ - - .nut-swiper-item { - touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */ - - image { - pointer-events: auto; /* 确保图片点击事件正常 */ - touch-action: manipulation; /* 优化触摸操作 */ - } - } - } - - /* 为Swiper容器添加特殊处理 */ - .nut-swiper--horizontal { - touch-action: pan-y !important; /* 允许垂直滑动 */ - } -} - -/* 吸顶状态下的样式 */ -.nutui-sticky--fixed { - .header-bg { - height: 100%; - } -} - -/* 为Swiper添加更精确的触摸控制 */ -.nut-swiper { - touch-action: pan-y !important; - - .nut-swiper-inner { - touch-action: pan-x pan-y !important; - } -} - -/* 自定义Swiper样式 */ -.custom-swiper { - touch-action: pan-y !important; - - .nut-swiper-item { - touch-action: pan-x pan-y !important; - } -} - -/* 确保Swiper内部元素不会阻止页面滚动 */ -.banner-swiper-container, -.custom-swiper, -.nut-swiper, -.nut-swiper-item { - -webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */ +.bottomCta__actions { + margin-top: 16rpx; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12rpx; } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 842e1c0..79cf83f 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,291 +1,469 @@ -import Header from './Header' -import Banner from './Banner' -import Taro, { useShareAppMessage } from '@tarojs/taro' -import { View, Text, Image, ScrollView } from '@tarojs/components' -import { useEffect, useMemo, useState, type ReactNode } from 'react' -import { Cart, Coupon, Gift, Ticket } from '@nutui/icons-react-taro' -import { getShopInfo } from '@/api/layout' -import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite' -import { pageShopGoods } from '@/api/shop/shopGoods' -import type { ShopGoods } from '@/api/shop/shopGoods/model' +import Taro, { getCurrentInstance, useShareAppMessage } from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { useMemo, useState } from 'react' +import { Button } from '@nutui/nutui-react-taro' +import { useConfig } from '@/hooks/useConfig' +import { copyText } from '@/utils/common' import './index.scss' function Home() { - const [activeTab, setActiveTab] = useState('推荐') - const [goodsList, setGoodsList] = useState([]) + const [ecoTab, setEcoTab] = useState<'template' | 'plugin'>('template') + const { config } = useConfig() useShareAppMessage(() => { // 获取当前用户ID，用于生成邀请链接 - const userId = Taro.getStorageSync('UserId'); + const userId = Taro.getStorageSync('UserId') return { - title: '🏠 首页 🏠', - path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`, + title: config?.siteName + ? `${config.siteName} - 网宿软件` + : '软件开发平台：SaaS + 私有化 + 模板/插件生态', + path: userId + ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` + : `/pages/index/index`, success: function () { - console.log('首页分享成功'); + console.log('首页分享成功') Taro.showToast({ title: '分享成功', icon: 'success', duration: 2000 - }); + }) }, fail: function () { - console.log('首页分享失败'); + console.log('首页分享失败') Taro.showToast({ title: '分享失败', icon: 'none', duration: 2000 - }); + }) } - }; - }); - - // const reloadMore = async () => { - // setPage(page + 1) - // } - - const showAuthModal = () => { - Taro.showModal({ - title: '授权提示', - content: '需要获取您的用户信息', - confirmText: '去授权', - cancelText: '取消', - success: (res) => { - if (res.confirm) { - // 用户点击确认，打开授权设置页面 - openSetting(); - } - } - }); - }; - - const openSetting = () => { - // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。 - Taro.openSetting({ - success: (res) => { - if (res.authSetting['scope.userInfo']) { - // 用户授权成功，可以获取用户信息 - reload(); - } else { - // 用户拒绝授权，提示授权失败 - Taro.showToast({ - title: '授权失败', - icon: 'none' - }); - } - } - }); - }; - - // const onSticky = (item: IArguments) => { - // if(item){ - // setStickyStatus(!stickyStatus) - // } - // } - - // 处理Tabs粘性状态变化 - // const handleTabsStickyChange = (isSticky: boolean) => {} - - const reload = () => { - - }; - - useEffect(() => { - // 获取站点信息 - getShopInfo().then(() => { - - }) - - pageShopGoods({}).then(res => { - setGoodsList(res?.list || []) - }) - - // 检查是否有待处理的邀请关系 - 异步处理，不阻塞页面加载 - if (hasPendingInvite()) { - console.log('检测到待处理的邀请关系') - // 延迟处理，确保用户信息已加载，并设置超时保护 - setTimeout(async () => { - try { - // 设置超时保护，避免长时间等待 - const timeoutPromise = new Promise((_, reject) => - setTimeout(() => reject(new Error('邀请关系处理超时')), 8000) - ); - - const invitePromise = checkAndHandleInviteRelation(); - - const success = await Promise.race([invitePromise, timeoutPromise]); - if (success) { - console.log('首页邀请关系处理成功') - } - } catch (error) { - console.error('首页邀请关系处理失败:', error) - // 邀请关系处理失败不应该影响页面正常显示 - // 可以选择清除邀请参数，避免重复尝试 - const errorMessage = error instanceof Error ? error.message : String(error) - if (errorMessage?.includes('超时')) { - console.log('邀请关系处理超时，清除邀请参数') - // 可以选择清除邀请参数或稍后重试 - } - } - }, 2000) } + }) - // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 - Taro.getSetting({ - success: (res) => { - if (res.authSetting['scope.userInfo']) { - // 用户已经授权过，可以直接获取用户信息 - console.log('用户已经授权过，可以直接获取用户信息') - reload(); - } else { - // 用户未授权，需要弹出授权窗口 - console.log('用户未授权，需要弹出授权窗口') - showAuthModal(); - } + const scrollToSection = (id: string) => { + const query = Taro.createSelectorQuery() + const inst = getCurrentInstance() + // 兼容 React 运行时：尽量将查询限定在当前页面作用域内 + if (inst?.page && typeof query.in === 'function') query.in(inst.page) + query.selectViewport().scrollOffset() + query.select(`#${id}`).boundingClientRect() + query.exec((res: any[]) => { + const viewport = res?.[0] + const rect = res?.[1] + const scrollTop = (viewport?.scrollTop || 0) + (rect?.top || 0) - 50 + if (Number.isFinite(scrollTop)) { + Taro.pageScrollTo({ scrollTop: Math.max(scrollTop, 0), duration: 260 }) } - }); - // 获取用户信息 - Taro.getUserInfo({ - success: (res) => { - const avatar = res.userInfo.avatarUrl; - console.log(avatar, 'avatarUrl') - } - }); - }, []); + }) + } - const tabs = useMemo(() => ['推荐', '桶装水', '优惠组合', '购机套餐', '饮水设备'], []) + const toAbsoluteMaybe = (url: string) => { + if (/^https?:\/\//i.test(url)) return url + const base = (config?.domain || '').trim() + if (!base) return url + const withProto = /^https?:\/\//i.test(base) ? base : `https://${base}` + // 处理 domain 末尾/ 与 url 开头/ 的组合 + const normalizedBase = withProto.replace(/\/+$/, '') + const normalizedPath = url.startsWith('/') ? url : `/${url}` + return `${normalizedBase}${normalizedPath}` + } - const shortcuts = useMemo< - Array<{ key: string; title: string; icon: ReactNode; onClick: () => void }> - >( + const openMaybeLink = (url?: string) => { + if (!url) return + // 小程序内无法直接打开外链，这里统一“复制链接”降低认知成本 + const abs = toAbsoluteMaybe(url) + if (/^https?:\/\//i.test(abs)) { + copyText(abs) + return + } + Taro.showToast({ title: '请在 PC 端访问该入口', icon: 'none', duration: 1600 }) + copyText(abs) + } + + const copyConsultTemplate = () => { + const tel = config?.tel ? `\n联系电话：${config.tel}` : '' + const text = + '【需求咨询】\n' + + '1) 想开通哪些产品：企业官网 / 电商 / 小程序 / 其他\n' + + '2) 是否需要模板/插件市场：是 / 否\n' + + '3) 是否需要“支付即开通”：是 / 否\n' + + '4) 交付方式：SaaS / 私有化 / 混合\n' + + '5) 合规/部署要求：\n' + + '6) 期望上线时间：\n' + + tel + copyText(text) + } + + const callPhone = () => { + const tel = (config?.tel || '').trim() + if (!tel) { + Taro.showToast({ title: '暂无联系电话', icon: 'none', duration: 1600 }) + return + } + Taro.makePhoneCall({ phoneNumber: tel }) + } + + const products = useMemo( () => [ { - key: 'ticket', - title: '我的水票', - icon: , - onClick: () => Taro.navigateTo({ url: '/user/gift/index' }), + title: '企业官网', + recommend: true, + desc: '品牌展示与获客转化，支持多模板、多语言、SEO 与可视化配置。', + tags: ['模板', 'SEO', '多语言', '私有化'], + adminUrl: 'https://site.websoft.top', }, { - key: 'order', - title: '立即订水', - icon: , - onClick: () => Taro.navigateTo({ url: '/shop/goodsDetail/index?id=10072' }), + title: '小程序/公众号', + recommend: false, + desc: '多端渠道接入与统一管理，适配常见内容与电商场景。', + tags: ['多端', '渠道', '可扩展'], + adminUrl: 'https://mp.websoft.top', }, { - key: 'invite', - title: '邀请有礼', - icon: , - onClick: () => Taro.navigateTo({ url: '/dealer/qrcode/index' }), + title: '电商系统', + recommend: true, + desc: '商品/订单/支付/营销基础能力，插件化扩展，支持多端触达。', + tags: ['支付', '插件', '营销', '多租户'], + adminUrl: 'https://shop.websoft.top', }, { - key: 'coupon', - title: '领券中心', - icon: , - onClick: () => Taro.navigateTo({ url: '/coupon/index' }), + title: '管理后台', + recommend: false, + desc: '多租户管理、角色权限、组织架构与可扩展菜单体系。', + tags: ['权限', '多租户', '审计'], + adminUrl: 'https://oa.websoft.top', + }, + { + title: '开发者中心', + recommend: false, + desc: '应用开发与交付入口：应用中心、源码仓库、Git 账号绑定、权限申请与教程文档。', + tags: ['应用', '源码', 'Git', '教程'], + adminUrl: '/developer', + }, + { + title: '模板/插件市场', + recommend: false, + desc: '支持模板与插件购买、授权与更新，形成生态与增值体系。', + tags: ['市场', '授权', '更新', '变现'], + adminUrl: '/market', }, ], [] ) - const visibleGoods = useMemo(() => { - // 先按效果图展示两列卡片，数据不够时也保持布局稳定 - const list = goodsList || [] - if (list.length <= 6) return list - return list.slice(0, 6) - }, [goodsList]) + const capabilities = useMemo( + () => [ + { + title: 'SaaS 多租户平台', + badge: '核心', + desc: '租户隔离、组织与权限体系、配置中心与审计能力，为多业务线统一底座。', + }, + { + title: '私有化部署', + badge: '可选', + desc: '支持本地/专有云部署，提供部署文档、验收清单与升级策略，满足安全合规。', + }, + { + title: '模板市场', + badge: '生态', + desc: '行业模板一键套用，默认配置与初始化脚本配套，交付更标准、上线更快。', + }, + { + title: '插件市场', + badge: '扩展', + desc: '支付、会员、营销、工单等能力按需加购；支持授权、更新与版本管理。', + }, + { + title: '自动开通链路', + badge: '交付', + desc: '选品支付后自动创建租户、初始化模块/菜单/基础数据，并交付访问入口。', + }, + { + title: '模块化与可扩展', + badge: '开发', + desc: '支持按模块组合产品能力，插件化扩展点让二开与生态合作更高效。', + }, + ], + [] + ) return ( <> - {/* Header区域 - 现在由Header组件内部处理吸顶逻辑 */} -
- - {/* 顶部活动主视觉：使用 Banner 组件 */} - + {/* 首屏：价值主张 + 关键动作 */} + + + + + v3.0 版本发布 + - {/* 电子水票 */} - - - 电子水票 - - 您还有 0 张水票 - - + + SaaS + 私有化 + 模板/插件生态 + - - - {shortcuts.map((item) => ( - - {item.icon} - {item.title} - - ))} + + + 面向企业官网、公众号/小程序、电商系统、企业管理后台等业务场景，提供多租户架构与模块化能力；客户下单后自动创建租户、初始化模块与基础数据，实现“支付即开通”。 + + + + + + + - {/* 分类Tabs */} - - - {tabs.map((tab) => { - const active = tab === activeTab - return ( - setActiveTab(tab)} - > - {tab} - - ) - })} - - - - {/* 商品列表 */} - - {visibleGoods.map((item) => ( - - - - Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` }) - } - /> - - - - {item.name} - - 已购:{item.sales || 0}人 - - ￥ - {item.price} - - - - - - Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` }) - } - > - 立即购买 - - - + {/* 快捷导航：减少滚动成本 */} + + {[ + { key: 'products', title: '产品矩阵' }, + { key: 'capabilities', title: '核心能力' }, + { key: 'flow', title: '开通流程' }, + { key: 'ecosystem', title: '生态' }, + ].map((x) => ( + scrollToSection(x.key)}> + {x.title} ))} + + {/* 产品矩阵 */} + + + 产品矩阵 + + 面向不同业务场景的可售卖产品，支持套餐化售卖、支付即开通、模板/插件加购与私有化交付。 + + + + + {products.map((p) => ( + + + {p.title} + {p.recommend ? ( + + 推荐 + + ) : null} + + {p.desc} + + {p.tags.map((t) => ( + + {t} + + ))} + + + + + + ))} + + + + + + + + {/* 核心能力 */} + + + 核心能力 + 用一套平台能力，覆盖产品售卖、交付开通、运营升级与生态变现。 + + + + {capabilities.map((c) => ( + + + {c.title} + + {c.badge} + + + {c.desc} + + ))} + + + + {/* 支付即开通 */} + + + 支付即开通 + + 客户选择产品并支付后，平台自动完成：创建租户、初始化模块、写入默认配置与基础数据、生成管理员账号并交付访问入口。 + + + + + {[ + { title: '选择产品/套餐', desc: '支持产品矩阵、模板/插件加购、增值项' }, + { title: '下单支付', desc: '支付成功触发开通任务编排' }, + { title: '创建租户', desc: '租户隔离、域名/应用信息绑定、管理员生成' }, + { title: '模块初始化', desc: '按所购产品加载模块与菜单权限，写入基础数据/示例数据' }, + { title: '交付上线', desc: 'SaaS 直接可用；私有化交付镜像/部署文档/验收清单' }, + ].map((s, idx) => ( + + + {idx + 1} + + + {s.title} + {s.desc} + + + ))} + + + + + + + + {/* 模板与插件生态 */} + + + 模板与插件生态 + 通过模板加速交付，通过插件扩展能力；支持购买、授权、更新与版本管理。 + + + + setEcoTab('template')} + > + 模板 + + setEcoTab('plugin')} + > + 插件 + + + + {ecoTab === 'template' ? ( + + + 行业模板 + 按行业/场景提供成套页面与配置，支持一键套用、二次编辑与多版本管理。 + + + 交付标准化 + 模板与初始化脚本配套，让“开通后的默认站点”可直接验收。 + + + ) : ( + + + 能力扩展 + 支付、会员、营销、工单、数据统计等能力按需加购，随买随用。 + + + 升级与授权 + 支持版本升级、授权校验、到期续费与灰度发布。 + + + )} + + + + + + + {/* 底部 CTA */} + + + 联系我们 + + 复制咨询模板或直接电话沟通，我们会按你的业务场景给出产品组合、开通链路与部署方案（SaaS/私有化）。 + + + + + 咨询内容建议 + + {[ + '你希望售卖哪些产品（官网/电商/小程序/门户等）？', + '是否需要模板/插件市场（购买、授权、更新）？', + '是否需要“支付即开通”（自动创建租户/初始化模块与数据）？', + '交付方式：SaaS 或私有化部署？是否有合规要求？', + ].map((t) => ( + + + {t} + + ))} + + + + {config?.tel ? ( + + 电话 + {config.tel} + + ) : null} + {config?.workDay ? ( + + 工作日 + {config.workDay} + + ) : null} + + + + + + + + + + + + 想快速搭建并交付一个可运营的产品？ + 预约演示，我们将按你的业务场景给出方案与报价。 + + + + + + ) diff --git a/src/pages/user/components/IsDealer.tsx b/src/pages/user/components/IsDealer.tsx index 8e86034..0da6203 100644 --- a/src/pages/user/components/IsDealer.tsx +++ b/src/pages/user/components/IsDealer.tsx @@ -75,7 +75,7 @@ const IsDealer = () => { title={ - {config?.vipText || '门店入驻'} + {config?.vipText || '开发者中心'} {config?.vipComments || ''} } diff --git a/src/pages/user/components/UserGrid.tsx b/src/pages/user/components/UserGrid.tsx index 54b6577..2527bf1 100644 --- a/src/pages/user/components/UserGrid.tsx +++ b/src/pages/user/components/UserGrid.tsx @@ -61,8 +61,8 @@ const UserCell = () => { )} - {hasRole('rider') && ( - navTo('/rider/index', true)}> + {hasRole('developer') && ( + navTo('/rider/index', true)}>