Merge remote-tracking branch 'origin/main'
# Conflicts: # src/pages/index/index.tsx
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/brochure/index',
|
||||
'pages/cart/cart',
|
||||
'pages/find/find',
|
||||
'pages/user/user'
|
||||
|
||||
5
src/pages/brochure/index.config.ts
Normal file
5
src/pages/brochure/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '品牌画册',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
381
src/pages/brochure/index.scss
Normal file
381
src/pages/brochure/index.scss
Normal file
@@ -0,0 +1,381 @@
|
||||
.brochure-page {
|
||||
min-height: 100vh;
|
||||
padding: 24px 24px 40px;
|
||||
background: linear-gradient(180deg, #f6f3ef 0%, #ffffff 24%, #f8fafc 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brochure-page__hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding: 30px 24px;
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 60%, #f1d4a6 100%);
|
||||
box-shadow: 0 18px 42px rgba(159, 106, 45, 0.2);
|
||||
}
|
||||
|
||||
.brochure-page__eyebrow {
|
||||
font-size: 26px;
|
||||
line-height: 1.4;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__title {
|
||||
font-size: 44px;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__desc {
|
||||
font-size: 28px;
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.brochure-page__meta-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brochure-page__meta-pill {
|
||||
padding: 10px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.brochure-page__meta-text {
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.brochure-page__stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 18px 14px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.brochure-page__stat-value {
|
||||
font-size: 34px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__stat-label {
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.brochure-page__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.brochure-page__section--process {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.brochure-page__section-head,
|
||||
.brochure-page__contact-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.brochure-page__section-title {
|
||||
font-size: 34px;
|
||||
line-height: 1.4;
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__section-desc {
|
||||
font-size: 24px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.brochure-page__solution-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brochure-page__solution-card,
|
||||
.brochure-page__highlight-card,
|
||||
.brochure-page__case-card,
|
||||
.brochure-page__process-item,
|
||||
.brochure-page__promise-item,
|
||||
.brochure-page__contact-card {
|
||||
border-radius: 24px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.brochure-page__solution-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 22px 20px;
|
||||
}
|
||||
|
||||
.brochure-page__highlight-list,
|
||||
.brochure-page__case-list,
|
||||
.brochure-page__process-list,
|
||||
.brochure-page__promise-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brochure-page__highlight-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 22px 20px;
|
||||
}
|
||||
|
||||
.brochure-page__highlight-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 20px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 100%);
|
||||
}
|
||||
|
||||
.brochure-page__highlight-content,
|
||||
.brochure-page__case-content,
|
||||
.brochure-page__process-content,
|
||||
.brochure-page__promise-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brochure-page__card-title {
|
||||
font-size: 30px;
|
||||
line-height: 1.5;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__card-desc {
|
||||
font-size: 24px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.brochure-page__tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.brochure-page__tag {
|
||||
padding: 14px 22px;
|
||||
border-radius: 999px;
|
||||
background: rgba(159, 106, 45, 0.1);
|
||||
border: 1px solid rgba(159, 106, 45, 0.14);
|
||||
}
|
||||
|
||||
.brochure-page__tag-text {
|
||||
font-size: 24px;
|
||||
line-height: 1.4;
|
||||
color: #9f6a2d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__promise-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 22px 20px;
|
||||
}
|
||||
|
||||
.brochure-page__promise-index {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
flex-shrink: 0;
|
||||
background: #f8f1e7;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: #9f6a2d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__case-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brochure-page__case-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
height: 180px;
|
||||
padding: 22px 20px;
|
||||
background: linear-gradient(135deg, #c79047 0%, #f0d3a2 100%);
|
||||
}
|
||||
|
||||
.brochure-page__case-index {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__case-visual-title {
|
||||
font-size: 34px;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__case-content {
|
||||
padding: 22px 20px 24px;
|
||||
}
|
||||
|
||||
.brochure-page__process-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 22px 20px;
|
||||
}
|
||||
|
||||
.brochure-page__process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 999px;
|
||||
background: #f3ede6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brochure-page__process-step-text {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: #9f6a2d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__contact-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-top: 26px;
|
||||
padding: 28px 24px;
|
||||
}
|
||||
|
||||
.brochure-page__cta-title {
|
||||
font-size: 34px;
|
||||
line-height: 1.4;
|
||||
color: #1f2937;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brochure-page__cta-desc,
|
||||
.brochure-page__cta-tip {
|
||||
font-size: 24px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.brochure-page__contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.brochure-page__contact-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.brochure-page__contact-label {
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.brochure-page__contact-value {
|
||||
font-size: 28px;
|
||||
line-height: 1.6;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__cta-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.brochure-page__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
height: 92px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.brochure-page__button--primary {
|
||||
background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 100%);
|
||||
}
|
||||
|
||||
.brochure-page__button--secondary {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.brochure-page__button--ghost {
|
||||
background: #fff7ed;
|
||||
border: 1px solid rgba(159, 106, 45, 0.16);
|
||||
}
|
||||
|
||||
.brochure-page__button-text {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brochure-page__button-text--light {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.brochure-page__button-text--dark {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.brochure-page__button-text--gold {
|
||||
color: #9f6a2d;
|
||||
}
|
||||
385
src/pages/brochure/index.tsx
Normal file
385
src/pages/brochure/index.tsx
Normal file
@@ -0,0 +1,385 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import {
|
||||
ShieldCheck,
|
||||
People,
|
||||
Star,
|
||||
Phone,
|
||||
ArrowRight,
|
||||
Location
|
||||
} from '@nutui/icons-react-taro'
|
||||
import { configWebsiteField } from '@/api/cms/cmsWebsiteField'
|
||||
import type { Config } from '@/api/cms/cmsWebsiteField/model'
|
||||
import './index.scss'
|
||||
|
||||
const DEFAULT_BRAND_NAME = '南南佐顿门窗'
|
||||
const DEFAULT_HOTLINE_DISPLAY = '13367810229'
|
||||
const DEFAULT_HOTLINE = '13367810229'
|
||||
const DEFAULT_ADDRESS = '欢迎到店咨询门窗定制方案'
|
||||
const DEFAULT_WORKDAY = '周一至周日 08:30-18:30'
|
||||
|
||||
const solutionItems = [
|
||||
{
|
||||
title: '系统门窗定制',
|
||||
description: '适合新房装修、整屋升级，兼顾隔音、保温与颜值表现。'
|
||||
},
|
||||
{
|
||||
title: '阳台封窗升级',
|
||||
description: '改善通风采光与密封性，让阳台更安全、更好用。'
|
||||
},
|
||||
{
|
||||
title: '别墅门窗方案',
|
||||
description: '支持大面宽、转角窗与个性化立面设计定制。'
|
||||
},
|
||||
{
|
||||
title: '旧窗改造换新',
|
||||
description: '针对渗水、噪音、漏风等问题，缩短施工周期，减少打扰。'
|
||||
}
|
||||
]
|
||||
|
||||
const highlightItems = [
|
||||
{
|
||||
icon: <ShieldCheck size={22} color="#ffffff" />,
|
||||
title: '品质保障',
|
||||
description: '10年质保，精选型材与进口五金，兼顾安全、隔音与耐久。'
|
||||
},
|
||||
{
|
||||
icon: <People size={22} color="#ffffff" />,
|
||||
title: '专业团队',
|
||||
description: '15年门窗安装经验，量尺、设计、施工全流程标准化服务。'
|
||||
},
|
||||
{
|
||||
icon: <Star size={22} color="#ffffff" />,
|
||||
title: '真实口碑',
|
||||
description: '5000+家庭选择，98%满意度，支持老房换窗与整屋升级。'
|
||||
}
|
||||
]
|
||||
|
||||
const serviceTags = ['隔音静享', '节能保温', '抗风防水', '儿童安全', '颜值升级', '售后跟进']
|
||||
|
||||
const caseItems = [
|
||||
{
|
||||
title: '高端住宅',
|
||||
subtitle: '静音隔热更舒适',
|
||||
description: '针对高层住宅、改善型家庭，优化隔音、保温与采光表现。'
|
||||
},
|
||||
{
|
||||
title: '商业办公',
|
||||
subtitle: '兼顾颜值与效率',
|
||||
description: '满足门店、办公室、展示空间的通透感、安全性与维护便利。'
|
||||
},
|
||||
{
|
||||
title: '别墅定制',
|
||||
subtitle: '大面宽与个性化设计',
|
||||
description: '结合建筑立面风格，定制开启方式、型材颜色与细节工艺。'
|
||||
},
|
||||
{
|
||||
title: '旧窗改造',
|
||||
subtitle: '不大拆也能焕新',
|
||||
description: '聚焦老房渗水、噪音、密封差等问题，缩短施工周期，减少打扰。'
|
||||
}
|
||||
]
|
||||
|
||||
const promiseItems = [
|
||||
{
|
||||
title: '方案先沟通再报价',
|
||||
description: '结合房型、预算与使用需求，给出更贴合实际的门窗建议。'
|
||||
},
|
||||
{
|
||||
title: '量尺安装标准化',
|
||||
description: '从上门测量、下单生产到现场安装，流程更清晰、交付更稳定。'
|
||||
},
|
||||
{
|
||||
title: '售后问题可跟进',
|
||||
description: '支持使用阶段咨询、五金维护与常见问题排查，减少后顾之忧。'
|
||||
}
|
||||
]
|
||||
|
||||
const processItems = [
|
||||
{
|
||||
step: '01',
|
||||
title: '需求沟通',
|
||||
description: '了解房型、预算、风格偏好与使用场景。'
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '上门量尺',
|
||||
description: '安排人员实地测量，核对尺寸与安装条件。'
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '方案报价',
|
||||
description: '输出门窗方案、材质配置与施工报价。'
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '安装售后',
|
||||
description: '规范安装交付，提供后续保养与售后支持。'
|
||||
}
|
||||
]
|
||||
|
||||
const getDialNumber = (value?: string) => {
|
||||
const pureNumber = (value || '').replace(/\D/g, '')
|
||||
return pureNumber || DEFAULT_HOTLINE
|
||||
}
|
||||
|
||||
const BrochurePage: React.FC = () => {
|
||||
const [config, setConfig] = useState<Config>()
|
||||
|
||||
useEffect(() => {
|
||||
configWebsiteField({})
|
||||
.then((data) => {
|
||||
setConfig(data)
|
||||
})
|
||||
.catch(() => undefined)
|
||||
}, [])
|
||||
|
||||
const brandName = config?.siteName || config?.loginTitle || DEFAULT_BRAND_NAME
|
||||
const hotlineText = config?.tel || DEFAULT_HOTLINE_DISPLAY
|
||||
const hotline = getDialNumber(config?.tel)
|
||||
const address = config?.address || DEFAULT_ADDRESS
|
||||
const workDay = config?.workDay || DEFAULT_WORKDAY
|
||||
|
||||
useShareTimeline(() => {
|
||||
return {
|
||||
title: `${brandName} - 品牌画册`,
|
||||
path: '/pages/brochure/index'
|
||||
}
|
||||
})
|
||||
|
||||
useShareAppMessage(() => {
|
||||
return {
|
||||
title: `${brandName}｜门窗定制安装服务`,
|
||||
path: '/pages/brochure/index'
|
||||
}
|
||||
})
|
||||
|
||||
const handleBackHome = () => {
|
||||
Taro.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
|
||||
const handleCallPhone = () => {
|
||||
Taro.showModal({
|
||||
title: '拨打电话',
|
||||
content: `是否拨打客服热线 ${hotlineText}？`,
|
||||
confirmText: '拨打',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
|
||||
Taro.makePhoneCall({
|
||||
phoneNumber: hotline,
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '拨号失败，请稍后重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleCopyAddress = () => {
|
||||
Taro.setClipboardData({
|
||||
data: address,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '地址已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="brochure-page">
|
||||
<View className="brochure-page__hero">
|
||||
<Text className="brochure-page__eyebrow">{brandName}</Text>
|
||||
<Text className="brochure-page__title">系统门窗定制与安装服务</Text>
|
||||
<Text className="brochure-page__desc">
|
||||
从方案咨询、上门量尺到安装售后，覆盖住宅、门店、别墅与旧窗改造等门窗升级场景。
|
||||
</Text>
|
||||
|
||||
<View className="brochure-page__meta-list">
|
||||
<View className="brochure-page__meta-pill">
|
||||
<Text className="brochure-page__meta-text">10年质保</Text>
|
||||
</View>
|
||||
<View className="brochure-page__meta-pill">
|
||||
<Text className="brochure-page__meta-text">上门量尺</Text>
|
||||
</View>
|
||||
<View className="brochure-page__meta-pill">
|
||||
<Text className="brochure-page__meta-text">售后跟进</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__stats">
|
||||
<View className="brochure-page__stat">
|
||||
<Text className="brochure-page__stat-value">10年</Text>
|
||||
<Text className="brochure-page__stat-label">质保承诺</Text>
|
||||
</View>
|
||||
<View className="brochure-page__stat">
|
||||
<Text className="brochure-page__stat-value">15年</Text>
|
||||
<Text className="brochure-page__stat-label">安装经验</Text>
|
||||
</View>
|
||||
<View className="brochure-page__stat">
|
||||
<Text className="brochure-page__stat-value">5000+</Text>
|
||||
<Text className="brochure-page__stat-label">家庭选择</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">主营方案</Text>
|
||||
<Text className="brochure-page__section-desc">把用户最常问的几类门窗服务先讲清楚，方便快速判断是否适合。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__solution-grid">
|
||||
{solutionItems.map((item) => (
|
||||
<View key={item.title} className="brochure-page__solution-card">
|
||||
<Text className="brochure-page__card-title">{item.title}</Text>
|
||||
<Text className="brochure-page__card-desc">{item.description}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">核心优势</Text>
|
||||
<Text className="brochure-page__section-desc">从产品配置到落地安装，都围绕居住体验与使用寿命做升级。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__highlight-list">
|
||||
{highlightItems.map((item) => (
|
||||
<View key={item.title} className="brochure-page__highlight-card">
|
||||
<View className="brochure-page__highlight-icon">{item.icon}</View>
|
||||
<View className="brochure-page__highlight-content">
|
||||
<Text className="brochure-page__card-title">{item.title}</Text>
|
||||
<Text className="brochure-page__card-desc">{item.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">门窗升级关键词</Text>
|
||||
<Text className="brochure-page__section-desc">正式版页面先突出用户最关心的体验点，后续也方便叠加真实案例素材。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__tag-list">
|
||||
{serviceTags.map((item) => (
|
||||
<View key={item} className="brochure-page__tag">
|
||||
<Text className="brochure-page__tag-text">{item}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">服务承诺</Text>
|
||||
<Text className="brochure-page__section-desc">把“怎么做事”说清楚，比堆很多空话更像正式版。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__promise-list">
|
||||
{promiseItems.map((item, index) => (
|
||||
<View key={item.title} className="brochure-page__promise-item">
|
||||
<Text className="brochure-page__promise-index">{`0${index + 1}`}</Text>
|
||||
<View className="brochure-page__promise-content">
|
||||
<Text className="brochure-page__card-title">{item.title}</Text>
|
||||
<Text className="brochure-page__card-desc">{item.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">精选案例方向</Text>
|
||||
<Text className="brochure-page__section-desc">当前先保留正式版结构位，后续可直接替换真实项目图片、客户评价与施工前后对比。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__case-list">
|
||||
{caseItems.map((item, index) => (
|
||||
<View key={item.title} className="brochure-page__case-card">
|
||||
<View className="brochure-page__case-visual">
|
||||
<Text className="brochure-page__case-index">{`0${index + 1}`}</Text>
|
||||
<Text className="brochure-page__case-visual-title">{item.title}</Text>
|
||||
</View>
|
||||
<View className="brochure-page__case-content">
|
||||
<Text className="brochure-page__card-title">{item.subtitle}</Text>
|
||||
<Text className="brochure-page__card-desc">{item.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__section brochure-page__section--process">
|
||||
<View className="brochure-page__section-head">
|
||||
<Text className="brochure-page__section-title">服务流程</Text>
|
||||
<Text className="brochure-page__section-desc">标准流程更省心，方案确认后即可安排施工交付。</Text>
|
||||
</View>
|
||||
<View className="brochure-page__process-list">
|
||||
{processItems.map((item) => (
|
||||
<View key={item.step} className="brochure-page__process-item">
|
||||
<View className="brochure-page__process-step">
|
||||
<Text className="brochure-page__process-step-text">{item.step}</Text>
|
||||
</View>
|
||||
<View className="brochure-page__process-content">
|
||||
<Text className="brochure-page__card-title">{item.title}</Text>
|
||||
<Text className="brochure-page__card-desc">{item.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__contact-card">
|
||||
<View className="brochure-page__contact-head">
|
||||
<Text className="brochure-page__cta-title">预约咨询与到店信息</Text>
|
||||
<Text className="brochure-page__cta-desc">联系方式改为优先读取系统配置，避免正式版上线后还要手动改死文案。</Text>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__contact-list">
|
||||
<View className="brochure-page__contact-item">
|
||||
<Text className="brochure-page__contact-label">服务热线</Text>
|
||||
<Text className="brochure-page__contact-value">{hotlineText}</Text>
|
||||
</View>
|
||||
<View className="brochure-page__contact-item">
|
||||
<Text className="brochure-page__contact-label">服务时间</Text>
|
||||
<Text className="brochure-page__contact-value">{workDay}</Text>
|
||||
</View>
|
||||
<View className="brochure-page__contact-item">
|
||||
<Text className="brochure-page__contact-label">门店地址</Text>
|
||||
<Text className="brochure-page__contact-value">{address}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="brochure-page__cta-actions">
|
||||
<View className="brochure-page__button brochure-page__button--primary" onClick={handleCallPhone}>
|
||||
<Phone size={18} color="#ffffff" />
|
||||
<Text className="brochure-page__button-text brochure-page__button-text--light">拨打热线</Text>
|
||||
</View>
|
||||
<View className="brochure-page__button brochure-page__button--secondary" onClick={handleCopyAddress}>
|
||||
<Location size={18} color="#1f2937" />
|
||||
<Text className="brochure-page__button-text brochure-page__button-text--dark">复制地址</Text>
|
||||
</View>
|
||||
<View className="brochure-page__button brochure-page__button--ghost" onClick={handleBackHome}>
|
||||
<Text className="brochure-page__button-text brochure-page__button-text--gold">返回首页</Text>
|
||||
<ArrowRight size={16} color="#9f6a2d" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="brochure-page__cta-tip">下一步如果你给我真实案例图、门店地址和热线，我可以直接把这一页收口成上线版。</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrochurePage
|
||||
36
src/pages/index/BrochureEntry.scss
Normal file
36
src/pages/index/BrochureEntry.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.brochure-entry {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.brochure-entry__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%);
|
||||
box-shadow: 0 10px 24px rgba(29, 78, 216, 0.18);
|
||||
}
|
||||
|
||||
.brochure-entry__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.brochure-entry__content {
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.brochure-entry__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
66
src/pages/index/BrochureEntry.tsx
Normal file
66
src/pages/index/BrochureEntry.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { ImageRectangle, ArrowRight } from '@nutui/icons-react-taro'
|
||||
import { configWebsiteField } from '@/api/cms/cmsWebsiteField'
|
||||
import type { Config } from '@/api/cms/cmsWebsiteField/model'
|
||||
import './BrochureEntry.scss'
|
||||
|
||||
const BROCHURE_TITLE = '品牌画册'
|
||||
const DEFAULT_BROCHURE_URL = 'https://book.yunzhan365.com/mdfy/tjcs/mobile/index.html'
|
||||
|
||||
const BrochureEntry: React.FC = () => {
|
||||
const [config, setConfig] = useState<Config>()
|
||||
|
||||
useEffect(() => {
|
||||
configWebsiteField({})
|
||||
.then((data) => setConfig(data))
|
||||
.catch(() => undefined)
|
||||
}, [])
|
||||
|
||||
const handleClick = () => {
|
||||
const url = config?.domain || DEFAULT_BROCHURE_URL
|
||||
|
||||
Taro.setClipboardData({
|
||||
data: url,
|
||||
success: () => {
|
||||
Taro.showModal({
|
||||
title: '链接已复制',
|
||||
content: '请前往浏览器，粘贴链接即可查看完整画册。',
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '复制失败，请稍后重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="brochure-entry px-4" onClick={handleClick}>
|
||||
<View className="brochure-entry__card">
|
||||
<View className="brochure-entry__icon">
|
||||
<ImageRectangle size={22} color="#ffffff" />
|
||||
</View>
|
||||
|
||||
<View className="brochure-entry__content flex flex-col">
|
||||
<Text className="text-lg font-semibold text-white">{BROCHURE_TITLE}</Text>
|
||||
<Text className="text-xs text-white">
|
||||
快速了解企业介绍、案例展示与门窗服务流程
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="brochure-entry__action">
|
||||
<Text className="text-sm font-semibold text-white">查看画册</Text>
|
||||
<ArrowRight size={14} color="#ffffff" />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrochureEntry
|
||||
@@ -11,8 +11,8 @@ const ContactSection: React.FC = () => {
|
||||
const contactItems = [
|
||||
{
|
||||
icon: <Phone size={20} color="#3b82f6" />,
|
||||
title: '客服热线',
|
||||
value: '400-888-9999',
|
||||
title: '联系电话',
|
||||
value: '13367810229',
|
||||
action: 'call',
|
||||
colorClass: 'contact-item--blue'
|
||||
},
|
||||
@@ -64,13 +64,13 @@ const ContactSection: React.FC = () => {
|
||||
const handleCallPhone = () => {
|
||||
Taro.showModal({
|
||||
title: '拨打电话',
|
||||
content: '是否拨打客服热线 400-888-9999？',
|
||||
content: '是否拨打联系电话 13367810229？',
|
||||
confirmText: '拨打',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Taro.makePhoneCall({
|
||||
phoneNumber: '4008889999',
|
||||
phoneNumber: '13367810229',
|
||||
success: () => {
|
||||
console.log('拨打电话成功')
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user