初始化参股
This commit is contained in:
537
前端/pages/service/index.uvue
Normal file
537
前端/pages/service/index.uvue
Normal file
@@ -0,0 +1,537 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view class="page-scroll" scroll-y>
|
||||
<!-- 顶部横幅 -->
|
||||
<view class="banner">
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">专业沙发翻新服务</text>
|
||||
<text class="banner-desc">让旧沙发焕发新生</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务类型 -->
|
||||
<view class="section">
|
||||
<section-header title="服务类型"></section-header>
|
||||
<view class="service-grid">
|
||||
<view
|
||||
class="service-item"
|
||||
v-for="item in serviceTypes"
|
||||
:key="item.id"
|
||||
@click="handleServiceClick(item)"
|
||||
>
|
||||
<view class="service-icon-bg">
|
||||
<text class="service-icon">{{ item.emoji }}</text>
|
||||
</view>
|
||||
<text class="service-name">{{ item.name }}</text>
|
||||
<text class="service-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务流程 -->
|
||||
<view class="section">
|
||||
<section-header title="服务流程"></section-header>
|
||||
<view class="process-list">
|
||||
<view class="process-item" v-for="(item, index) in processList" :key="item.step">
|
||||
<view class="process-step">
|
||||
<text class="step-num">{{ item.step }}</text>
|
||||
</view>
|
||||
<view class="process-content">
|
||||
<text class="process-title">{{ item.title }}</text>
|
||||
<text class="process-desc">{{ item.description }}</text>
|
||||
</view>
|
||||
<view class="process-line" v-if="index < processList.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 材质说明 -->
|
||||
<view class="section">
|
||||
<section-header title="材质说明"></section-header>
|
||||
<view class="material-list">
|
||||
<view class="material-item" v-for="item in materials" :key="item.name">
|
||||
<view class="material-header">
|
||||
<text class="material-name">{{ item.name }}</text>
|
||||
<text class="material-price">{{ item.price }}</text>
|
||||
</view>
|
||||
<text class="material-desc">{{ item.desc }}</text>
|
||||
<view class="material-tags">
|
||||
<text class="material-tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<view class="section">
|
||||
<section-header title="常见问题"></section-header>
|
||||
<view class="faq-list">
|
||||
<view
|
||||
class="faq-item"
|
||||
v-for="(item, index) in faqList"
|
||||
:key="index"
|
||||
@click="toggleFaq(index)"
|
||||
>
|
||||
<view class="faq-header">
|
||||
<text class="faq-question">{{ item.question }}</text>
|
||||
<text class="faq-arrow">{{ item.expanded ? '−' : '+' }}</text>
|
||||
</view>
|
||||
<view class="faq-answer" v-if="item.expanded">
|
||||
<text class="faq-answer-text">{{ item.answer }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部预约按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="bar-info">
|
||||
<text class="bar-title">免费上门评估</text>
|
||||
<text class="bar-desc">专业师傅为您量身定制方案</text>
|
||||
</view>
|
||||
<view class="bar-btn" @click="goToBooking">
|
||||
<text class="bar-btn-text">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { getServiceProcess } from '@/api/index.uts'
|
||||
|
||||
// 服务类型
|
||||
type ServiceType = {
|
||||
id : string
|
||||
name : string
|
||||
desc : string
|
||||
emoji : string
|
||||
}
|
||||
|
||||
// 流程类型
|
||||
type ProcessItem = {
|
||||
step : number
|
||||
title : string
|
||||
description : string
|
||||
}
|
||||
|
||||
// 材质类型
|
||||
type MaterialItem = {
|
||||
name : string
|
||||
price : string
|
||||
desc : string
|
||||
tags : string[]
|
||||
}
|
||||
|
||||
// FAQ类型
|
||||
type FaqItem = {
|
||||
question : string
|
||||
answer : string
|
||||
expanded : boolean
|
||||
}
|
||||
|
||||
// 服务类型数据
|
||||
const serviceTypes = ref<ServiceType[]>([
|
||||
{ id: 'repair', name: '局部修复', desc: '破损、划痕修复', emoji: '🔧' },
|
||||
{ id: 'recolor', name: '改色翻新', desc: '皮面改色换新', emoji: '🎨' },
|
||||
{ id: 'refurbish', name: '整体翻新', desc: '全面翻新升级', emoji: '✨' },
|
||||
{ id: 'custom', name: '定制换皮', desc: '个性化定制', emoji: '💎' }
|
||||
])
|
||||
|
||||
// 服务流程
|
||||
const processList = ref<ProcessItem[]>([])
|
||||
|
||||
// 材质说明
|
||||
const materials = ref<MaterialItem[]>([
|
||||
{
|
||||
name: '头层牛皮',
|
||||
price: '¥800-1500/平',
|
||||
desc: '采用进口头层牛皮，质地柔软，透气性好，使用寿命长',
|
||||
tags: ['进口原料', '透气舒适', '耐用耐磨']
|
||||
},
|
||||
{
|
||||
name: '二层牛皮',
|
||||
price: '¥400-800/平',
|
||||
desc: '经济实惠的选择，经过特殊处理后外观与头层相近',
|
||||
tags: ['性价比高', '外观精美', '易打理']
|
||||
},
|
||||
{
|
||||
name: '科技布',
|
||||
price: '¥200-500/平',
|
||||
desc: '新型环保面料，防水防污，清洁方便，触感舒适',
|
||||
tags: ['防水防污', '易清洁', '环保健康']
|
||||
},
|
||||
{
|
||||
name: '棉麻布艺',
|
||||
price: '¥150-400/平',
|
||||
desc: '天然面料，透气舒适，适合追求自然风格的客户',
|
||||
tags: ['天然环保', '透气清爽', '风格多样']
|
||||
}
|
||||
])
|
||||
|
||||
// 常见问题
|
||||
const faqList = ref<FaqItem[]>([
|
||||
{
|
||||
question: '翻新需要多长时间？',
|
||||
answer: '根据沙发的大小和翻新程度不同，一般需要3-10个工作日。局部修复1-3天，整体翻新5-10天。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '翻新后能保证多久？',
|
||||
answer: '我们提供2年质保服务，质保期内如有非人为损坏，免费维修。头层牛皮正常使用可达10年以上。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '可以上门取送吗？',
|
||||
answer: '是的，我们提供免费上门取送服务（市区范围内），郊区会收取少量运输费用。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '如何报价？',
|
||||
answer: '我们提供免费上门评估服务，师傅会根据沙发的实际情况给出详细报价，价格透明无隐形消费。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '定金和尾款如何支付？',
|
||||
answer: '确认订单后支付30%定金，翻新完成验收满意后支付尾款。支持微信、支付宝、银行转账等多种方式。',
|
||||
expanded: false
|
||||
}
|
||||
])
|
||||
|
||||
// 获取服务流程
|
||||
const fetchServiceProcess = async () => {
|
||||
try {
|
||||
const res = await getServiceProcess()
|
||||
const data = res.data as UTSJSONObject[]
|
||||
processList.value = data.map((item) : ProcessItem => {
|
||||
return {
|
||||
step: item['step'] as number,
|
||||
title: item['title'] as string,
|
||||
description: item['description'] as string
|
||||
} as ProcessItem
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('获取服务流程失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换FAQ展开
|
||||
const toggleFaq = (index : number) => {
|
||||
faqList.value[index].expanded = !faqList.value[index].expanded
|
||||
}
|
||||
|
||||
// 服务点击
|
||||
const handleServiceClick = (item : ServiceType) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/booking/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 去预约
|
||||
const goToBooking = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/booking/index'
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
fetchServiceProcess()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 顶部横幅 */
|
||||
.banner {
|
||||
height: 280rpx;
|
||||
background: linear-gradient(135deg, #D4A574 0%, #B8895A 100%);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 通用section */
|
||||
.section {
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 服务类型 */
|
||||
.service-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
width: 50%;
|
||||
padding: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-icon-bg {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: #FDF6EE;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 服务流程 */
|
||||
.process-list {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.process-item {
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background-color: #D4A574;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.process-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.process-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.process-desc {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.process-line {
|
||||
position: absolute;
|
||||
left: 22rpx;
|
||||
top: 56rpx;
|
||||
width: 4rpx;
|
||||
height: 60rpx;
|
||||
background-color: #E8C9A8;
|
||||
}
|
||||
|
||||
/* 材质说明 */
|
||||
.material-list {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.material-item {
|
||||
padding: 32rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.material-item:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.material-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.material-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.material-price {
|
||||
font-size: 28rpx;
|
||||
color: #D4A574;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.material-desc {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.material-tags {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.material-tag {
|
||||
font-size: 22rpx;
|
||||
color: #D4A574;
|
||||
background-color: #FDF6EE;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 常见问题 */
|
||||
.faq-list {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
padding: 32rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.faq-item:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.faq-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #909399;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top-width: 1rpx;
|
||||
border-top-style: dashed;
|
||||
border-top-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.faq-answer-text {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
/* 底部间距 */
|
||||
.bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index:2;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: 40rpx;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.bar-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bar-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bar-desc {
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.bar-btn {
|
||||
background-color: #D4A574;
|
||||
padding: 24rpx 56rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.bar-btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user