leiking
429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view>
|
||
<view class="card head">
|
||
<image v-if="p.cover" class="cover" :src="p.cover" mode="aspectFill" />
|
||
<view class="name">{{ p.name }}</view>
|
||
<view class="row between meta">
|
||
<view class="muted">服务时长：{{ p.durationMin }} 分钟</view>
|
||
<view class="price">
|
||
<text class="yen">¥</text>
|
||
<text class="num">{{ p.price }}</text>
|
||
<text class="ori muted" v-if="p.originPrice">¥{{ p.originPrice }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row between meta2">
|
||
<view class="tag2">{{ categoryName }}</view>
|
||
<view class="muted">评分 {{ rating }} / 5.0</view>
|
||
</view>
|
||
<view class="tags row">
|
||
<view class="tag">{{ p.fitFor }}</view>
|
||
<view class="tag warn">禁忌：{{ p.taboo }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">服务介绍</view>
|
||
<view class="b-v muted">{{ p.desc }}</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">功效说明</view>
|
||
<view class="b-v muted" v-for="x in effects" :key="x">· {{ x }}</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">服务流程</view>
|
||
<view class="b-v muted" v-for="x in steps" :key="x">· {{ x }}</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">适合人群</view>
|
||
<view class="b-v muted">{{ p.fitFor }}</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">禁忌说明</view>
|
||
<view class="b-v muted">{{ p.taboo }}</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="b-t">用户评价</view>
|
||
<view class="review">
|
||
<view class="r1 row between">
|
||
<view class="rn">顾客 A</view>
|
||
<view class="muted">5.0</view>
|
||
</view>
|
||
<view class="muted rt">做完肤感很通透，过程舒服，推荐。</view>
|
||
</view>
|
||
<view class="review">
|
||
<view class="r1 row between">
|
||
<view class="rn">顾客 B</view>
|
||
<view class="muted">4.8</view>
|
||
</view>
|
||
<view class="muted rt">店里环境很干净，技师很专业。</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="space"></view>
|
||
|
||
<view class="fixbar">
|
||
<view class="bar card">
|
||
<view class="btn btn-ghost a" @tap="book">立即预约</view>
|
||
<view class="btn btn-primary b" @tap="buy">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<AiFloat />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AiFloat from '@/components/AiFloat.vue'
|
||
import { categories, projects } from '@/common/mockData'
|
||
|
||
const fallbackCategories = [
|
||
{ id: 'c1', name: '体验爆款' },
|
||
{ id: 'c2', name: '面部护理' },
|
||
{ id: 'c3', name: '身体养生' },
|
||
{ id: 'c4', name: '美甲美睫' },
|
||
{ id: 'c5', name: '特惠套餐' }
|
||
]
|
||
|
||
const fallbackProjects = [
|
||
{
|
||
id: 'p1',
|
||
categoryId: 'c1',
|
||
name: '水氧净透体验',
|
||
price: 99,
|
||
originPrice: 199,
|
||
durationMin: 60,
|
||
fitFor: '初次体验、暗沉、出油',
|
||
taboo: '近期激光/微针术后 7 天内不建议',
|
||
cover: '',
|
||
desc: '轻盈水氧 + 净透护理，适合快速提升肤感与通透度。'
|
||
},
|
||
{
|
||
id: 'p2',
|
||
categoryId: 'c2',
|
||
name: '深层清洁黑头管理',
|
||
price: 168,
|
||
originPrice: 268,
|
||
durationMin: 75,
|
||
fitFor: 'T 区油脂旺盛、黑头粉刺',
|
||
taboo: '炎症爆痘期需评估后进行',
|
||
cover: '',
|
||
desc: '清洁、舒缓、收敛三步走，减少反复出油与毛孔困扰。'
|
||
},
|
||
{
|
||
id: 'p3',
|
||
categoryId: 'c2',
|
||
name: '补水修护屏障护理',
|
||
price: 238,
|
||
originPrice: 368,
|
||
durationMin: 80,
|
||
fitFor: '敏感泛红、干燥紧绷',
|
||
taboo: '过敏急性期请先咨询',
|
||
cover: '',
|
||
desc: '修护屏障与舒缓敏感，适合换季与长期干燥人群。'
|
||
},
|
||
{
|
||
id: 'p4',
|
||
categoryId: 'c3',
|
||
name: '肩颈舒缓筋膜放松',
|
||
price: 188,
|
||
originPrice: 288,
|
||
durationMin: 60,
|
||
fitFor: '久坐办公、肩颈僵硬',
|
||
taboo: '急性损伤与发热期不建议',
|
||
cover: '',
|
||
desc: '深度放松肌群与筋膜，改善紧绷与酸胀。'
|
||
},
|
||
{
|
||
id: 'p5',
|
||
categoryId: 'c5',
|
||
name: '皮肤管理次卡 5 次',
|
||
price: 899,
|
||
originPrice: 1199,
|
||
durationMin: 60,
|
||
fitFor: '长期管理、复购人群',
|
||
taboo: '具体项目以到店评估为准',
|
||
cover: '',
|
||
desc: '灵活使用，随时预约，到店核销自动扣次。'
|
||
},
|
||
{
|
||
id: 'p6',
|
||
categoryId: 'c4',
|
||
name: '轻奢美甲 · 单色',
|
||
price: 168,
|
||
originPrice: 238,
|
||
durationMin: 75,
|
||
fitFor: '通勤、日常、显白',
|
||
taboo: '甲面破损/感染需先处理',
|
||
cover: '',
|
||
desc: '干净利落的通勤单色，显白耐看，可按肤色搭配色卡。'
|
||
},
|
||
{
|
||
id: 'p7',
|
||
categoryId: 'c4',
|
||
name: '自然单根美睫 · 清透款',
|
||
price: 198,
|
||
originPrice: 298,
|
||
durationMin: 90,
|
||
fitFor: '自然放大双眼、日常耐看',
|
||
taboo: '眼部炎症/过敏期不建议',
|
||
cover: '',
|
||
desc: '清透自然的单根嫁接，整体更轻盈，适合新手与通勤。'
|
||
},
|
||
{
|
||
id: 'p8',
|
||
categoryId: 'c3',
|
||
name: '全身精油舒压 · 90 分钟',
|
||
price: 298,
|
||
originPrice: 398,
|
||
durationMin: 90,
|
||
fitFor: '压力大、睡眠欠佳、疲劳',
|
||
taboo: '孕期/发热/急性炎症期不建议',
|
||
cover: '',
|
||
desc: '精油舒压与深度放松结合，帮助缓解疲劳与紧绷。'
|
||
},
|
||
{
|
||
id: 'p9',
|
||
categoryId: 'c5',
|
||
name: '新客体验套餐 · 3 次',
|
||
price: 299,
|
||
originPrice: 499,
|
||
durationMin: 60,
|
||
fitFor: '初次体验、想要快速改善肤感',
|
||
taboo: '具体项目以到店评估为准',
|
||
cover: '',
|
||
desc: '高性价比新客套餐，适合建立基础皮肤管理节奏。'
|
||
}
|
||
]
|
||
|
||
const runtimeProjects = Array.isArray(projects) && projects.length ? projects : fallbackProjects
|
||
const runtimeCategories = Array.isArray(categories) && categories.length ? categories : fallbackCategories
|
||
|
||
const detailPreset = {
|
||
p1: {
|
||
rating: 5.0,
|
||
effects: ['净透提亮肤感', '补水保湿', '舒缓修护'],
|
||
steps: ['洁面清洁', '水氧净透护理', '精华导入', '舒缓收尾与防护']
|
||
},
|
||
p2: {
|
||
rating: 4.8,
|
||
effects: ['减少黑头粉刺困扰', '清理油脂与角质', '舒缓收敛毛孔观感'],
|
||
steps: ['皮肤评估与卸妆', '深层清洁与导出', '舒缓镇定', '收尾修护']
|
||
},
|
||
p3: {
|
||
rating: 4.9,
|
||
effects: ['补水修护屏障', '舒缓敏感泛红', '改善干燥紧绷'],
|
||
steps: ['温和清洁', '舒缓修护导入', '补水面膜', '收尾锁水防护']
|
||
},
|
||
p4: {
|
||
rating: 4.8,
|
||
effects: ['放松肩颈肌群', '改善紧绷酸胀', '提升舒适度与精神状态'],
|
||
steps: ['热敷放松', '筋膜松解', '肩颈重点放松', '收尾舒缓']
|
||
},
|
||
p5: {
|
||
rating: 4.9,
|
||
effects: ['长期皮肤管理更划算', '支持随时预约使用', '到店核销自动扣次'],
|
||
steps: ['购买次卡', '在线预约', '到店出示核销码', '门店核销扣次']
|
||
}
|
||
}
|
||
|
||
export default {
|
||
components: { AiFloat },
|
||
data() {
|
||
return {
|
||
id: '',
|
||
project: runtimeProjects[0] || null,
|
||
rating: 4.9,
|
||
effects: ['效果以到店评估为准', '体验舒适、过程规范', '可按肤质做个性化调整'],
|
||
steps: ['到店评估', '护理服务', '舒缓收尾', '给出居家建议'],
|
||
categoryName: runtimeCategories[0]?.name || '项目'
|
||
}
|
||
},
|
||
computed: {
|
||
p() {
|
||
return (
|
||
this.project ||
|
||
runtimeProjects[0] ||
|
||
fallbackProjects[0] || {
|
||
id: 'p1',
|
||
categoryId: 'c1',
|
||
name: '水氧净透体验',
|
||
price: 99,
|
||
originPrice: 199,
|
||
durationMin: 60,
|
||
fitFor: '初次体验、暗沉、出油',
|
||
taboo: '近期激光/微针术后 7 天内不建议',
|
||
cover: '',
|
||
desc: '轻盈水氧 + 净透护理，适合快速提升肤感与通透度。'
|
||
}
|
||
)
|
||
},
|
||
displayProject() {
|
||
return this.project || runtimeProjects[0] || null
|
||
}
|
||
},
|
||
onLoad(query) {
|
||
this.id = query.id || query.projectId || ''
|
||
if (!this.id && runtimeProjects.length) this.id = runtimeProjects[0].id
|
||
this.project = runtimeProjects.find((x) => x.id === this.id) || runtimeProjects[0] || null
|
||
const cat = this.p ? runtimeCategories.find((c) => c.id === this.p.categoryId) : null
|
||
this.categoryName = cat ? cat.name : '项目'
|
||
const p = detailPreset[this.id] || null
|
||
this.rating = p ? p.rating : 4.9
|
||
this.effects = p ? p.effects : ['效果以到店评估为准', '体验舒适、过程规范', '可按肤质做个性化调整']
|
||
this.steps = p ? p.steps : ['到店评估', '护理服务', '舒缓收尾', '给出居家建议']
|
||
},
|
||
methods: {
|
||
book() {
|
||
uni.navigateTo({ url: `/pages/booking/create?projectId=${this.p.id}` })
|
||
},
|
||
buy() {
|
||
uni.navigateTo({ url: `/pages/order/confirm?type=coupon&projectId=${this.p.id}` })
|
||
},
|
||
goList() {
|
||
uni.switchTab({ url: '/pages/projects/list' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.head {
|
||
padding: 26rpx;
|
||
}
|
||
.cover {
|
||
width: 100%;
|
||
height: 320rpx;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.name {
|
||
font-size: 42rpx;
|
||
font-weight: 950;
|
||
}
|
||
.meta {
|
||
margin-top: 14rpx;
|
||
}
|
||
.meta2 {
|
||
margin-top: 12rpx;
|
||
}
|
||
.price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
.yen {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
.num {
|
||
font-size: 46rpx;
|
||
font-weight: 950;
|
||
}
|
||
.ori {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
.tag2 {
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 24rpx;
|
||
background: rgba(17, 24, 39, 0.06);
|
||
font-weight: 900;
|
||
}
|
||
.tags {
|
||
margin-top: 18rpx;
|
||
gap: 12rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
.tag {
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 24rpx;
|
||
background: rgba(17, 24, 39, 0.06);
|
||
color: #111827;
|
||
}
|
||
.warn {
|
||
background: rgba(245, 158, 11, 0.14);
|
||
color: #b45309;
|
||
}
|
||
.block {
|
||
margin-top: 18rpx;
|
||
padding: 22rpx;
|
||
}
|
||
.b-t {
|
||
font-weight: 950;
|
||
font-size: 30rpx;
|
||
}
|
||
.b-v {
|
||
margin-top: 12rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.review {
|
||
margin-top: 16rpx;
|
||
padding-top: 16rpx;
|
||
border-top: 1rpx solid rgba(17, 24, 39, 0.08);
|
||
}
|
||
.review:first-of-type {
|
||
border-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
.r1 {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.rn {
|
||
font-size: 28rpx;
|
||
font-weight: 900;
|
||
}
|
||
.rt {
|
||
font-size: 26rpx;
|
||
}
|
||
.space {
|
||
height: 150rpx;
|
||
}
|
||
.empty {
|
||
margin-top: 18rpx;
|
||
padding: 34rpx 26rpx;
|
||
text-align: center;
|
||
}
|
||
.en {
|
||
font-size: 36rpx;
|
||
font-weight: 950;
|
||
}
|
||
.et {
|
||
margin-top: 12rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.eb {
|
||
margin-top: 20rpx;
|
||
}
|
||
.fixbar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 18rpx 24rpx 24rpx;
|
||
background: linear-gradient(180deg, rgba(246, 247, 251, 0) 0%, rgba(246, 247, 251, 1) 46%);
|
||
}
|
||
.bar {
|
||
padding: 18rpx;
|
||
display: flex;
|
||
gap: 14rpx;
|
||
}
|
||
.a {
|
||
flex: 1;
|
||
height: 82rpx;
|
||
}
|
||
.b {
|
||
flex: 1;
|
||
height: 82rpx;
|
||
}
|
||
</style>
|
||
|