ab6602e41d
把 3 分钟身体状态评估做成独立获客链路，匿名测评后登录认领完整报告，并接入体验预约与今日待办。 Co-authored-by: Cursor <cursoragent@cursor.com>
46 lines
2.2 KiB
Vue
46 lines
2.2 KiB
Vue
<template>
|
||
<view class="sil">
|
||
<text class="hint">点选身体区域，可多选</text>
|
||
<view class="figure">
|
||
<view class="head zone" :class="{ on: selected.includes(BodyRegion.NECK) }" @tap="toggle(BodyRegion.NECK)">头颈</view>
|
||
<view class="row">
|
||
<view class="shoulder zone" :class="{ on: selected.includes(BodyRegion.SHOULDER) }" @tap="toggle(BodyRegion.SHOULDER)">肩</view>
|
||
</view>
|
||
<view class="torso zone" :class="{ on: selected.includes(BodyRegion.UPPER_BACK) }" @tap="toggle(BodyRegion.UPPER_BACK)">上背</view>
|
||
<view class="waist zone" :class="{ on: selected.includes(BodyRegion.LOW_BACK) }" @tap="toggle(BodyRegion.LOW_BACK)">腰</view>
|
||
<view class="pelvis zone" :class="{ on: selected.includes(BodyRegion.PELVIS) }" @tap="toggle(BodyRegion.PELVIS)">骨盆</view>
|
||
<view class="row">
|
||
<view class="hip zone" :class="{ on: selected.includes(BodyRegion.HIP) }" @tap="toggle(BodyRegion.HIP)">髋</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="knee zone" :class="{ on: selected.includes(BodyRegion.KNEE) }" @tap="toggle(BodyRegion.KNEE)">膝</view>
|
||
</view>
|
||
<view class="leg zone" :class="{ on: selected.includes(BodyRegion.LEG) }" @tap="toggle(BodyRegion.LEG)">腿</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { BodyRegion } from '@mp-pilates/shared'
|
||
|
||
const props = defineProps<{ selected: readonly string[] }>()
|
||
const emit = defineEmits<{ (e: 'change', value: BodyRegion[]): void }>()
|
||
|
||
function toggle(region: BodyRegion) {
|
||
const current = new Set(props.selected)
|
||
if (current.has(region)) current.delete(region)
|
||
else current.add(region)
|
||
emit('change', [...current] as BodyRegion[])
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.sil { padding: 12rpx 0 8rpx; }
|
||
.hint { display: block; text-align: center; color: #8a7b6e; font-size: 22rpx; margin-bottom: 16rpx; }
|
||
.figure { display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
|
||
.zone { min-width: 160rpx; padding: 16rpx 28rpx; border-radius: 999rpx; background: #f3eee8; color: #6b5c50; font-size: 24rpx; text-align: center; }
|
||
.zone.on { background: #6b8276; color: #fff; }
|
||
.head { min-width: 120rpx; }
|
||
.row { display: flex; gap: 12rpx; }
|
||
</style>
|