|
|
@@ -9,15 +9,21 @@
|
|
|
}
|
|
|
</route>
|
|
|
<template>
|
|
|
- <view class="bg-white overflow-hidden pb-tab" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
|
|
|
- <view class="min-h-screen bg-white">
|
|
|
- <view class="max-w-lg mx-auto p-4">
|
|
|
+ <view class="bg-white min-h-screen relative">
|
|
|
+ <view class="w-full h-[220rpx] absolute top-0 left-0">
|
|
|
+ <image class="w-full h-full object-cover" :src="bg" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="absolute top-0 left-0 bg-transparent"
|
|
|
+ :style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
|
|
+ >
|
|
|
+ <view class="max-w-lg mx-auto p-4 bg-transparent">
|
|
|
<view class="h-[220rpx] mb-[32rpx]">
|
|
|
<view class="flex justify-end items-center h-[88rpx]">
|
|
|
<view
|
|
|
v-show="childrenList.length > 1"
|
|
|
@click="showChildren = !showChildren"
|
|
|
- class="text-sm flex justify-center items-center px-4 py-1 text-orange-500 border-[2rpx] border-solid border-orange-500 rounded-full whitespace-nowrap"
|
|
|
+ class="text-sm flex justify-center items-center px-4 py-1 text-orange-500 bg-white/[0.6] rounded-full whitespace-nowrap"
|
|
|
>
|
|
|
<wd-icon
|
|
|
name="translate-bold"
|
|
|
@@ -31,13 +37,19 @@
|
|
|
<view class="flex items-center gap-3">
|
|
|
<img :src="avatarUrl" class="w-16 h-16 rounded-full object-cover" alt="Baby Avatar" />
|
|
|
<view v-if="childrenInfo">
|
|
|
- <view class="text-xl font-semibold">
|
|
|
+ <view class="text-base font-semibold">
|
|
|
{{ childrenInfo.name }}
|
|
|
+ <image
|
|
|
+ @click="goToBabyInfo(childrenInfo.id)"
|
|
|
+ class="w-[28rpx] h-[28rpx] ml-2"
|
|
|
+ :src="edit"
|
|
|
+ mode="widthFix"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view class="text-gray-600 text-sm">{{ childrenInfo.old }}</view>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
- <text class="text-xl font-semibold text-[#333]">暂无宝宝，请立即添加</text>
|
|
|
+ <text class="text-sm font-semibold text-[#333]">暂无宝宝，请立即添加</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -107,7 +119,13 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <wd-action-sheet v-model="showChildren" class="text-xl" title="选择宝宝" @close="close">
|
|
|
+ <wd-action-sheet
|
|
|
+ safe-area-inset-bottom
|
|
|
+ v-model="showChildren"
|
|
|
+ class="text-xl"
|
|
|
+ title="选择宝宝"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
<wd-cell-group border>
|
|
|
<wd-cell
|
|
|
size="large"
|
|
|
@@ -141,6 +159,8 @@
|
|
|
import baby02 from '@img/index/baby-02.svg'
|
|
|
import baby03 from '@img/index/baby-03.svg'
|
|
|
import baby04 from '@img/index/baby-04.svg'
|
|
|
+ import edit from '@img/index/edit.svg'
|
|
|
+ import bg from '@img/index/bg.svg'
|
|
|
import HeightItem from '@/components/height/height-item.vue'
|
|
|
|
|
|
import { useMessage, useToast } from 'wot-design-uni'
|
|
|
@@ -157,7 +177,7 @@
|
|
|
|
|
|
const inform = ref('')
|
|
|
const childrenInfo = ref({
|
|
|
- id: '0',
|
|
|
+ id: '1',
|
|
|
name: '小奥特曼',
|
|
|
old: '2岁3个月4天',
|
|
|
})
|
|
|
@@ -224,6 +244,13 @@
|
|
|
// 获取屏幕边界到安全区域距离
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
|
|
|
+ // 前往宝宝信息页面
|
|
|
+ function goToBabyInfo(id = '') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/myUser/component/babyInformation?id=${id}`,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
// 暂无宝宝数据
|
|
|
function withButtonProps() {
|
|
|
message
|
|
|
@@ -232,19 +259,17 @@
|
|
|
title: '暂无宝宝数据',
|
|
|
confirmButtonText: '前往添加',
|
|
|
|
|
|
- cancelButtonProps: {
|
|
|
- // type: 'error',
|
|
|
- customClass: 'custom-shadow',
|
|
|
- },
|
|
|
- confirmButtonProps: {
|
|
|
- // type: 'success',
|
|
|
- customClass: 'custom-shadow',
|
|
|
- },
|
|
|
+ // cancelButtonProps: {
|
|
|
+ // // type: 'error',
|
|
|
+ // customClass: 'custom-shadow',
|
|
|
+ // },
|
|
|
+ // confirmButtonProps: {
|
|
|
+ // type: 'primary',
|
|
|
+ // customClass: 'custom-shadow',
|
|
|
+ // },
|
|
|
})
|
|
|
.then(() => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/babyInfo/babyInfo',
|
|
|
- })
|
|
|
+ goToBabyInfo()
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
}
|
|
|
@@ -349,14 +374,7 @@
|
|
|
color: #262626;
|
|
|
}
|
|
|
|
|
|
- :deep() {
|
|
|
- .wd-message-box {
|
|
|
- .custom-shadow {
|
|
|
- box-shadow:
|
|
|
- 0 3px 1px -2px rgb(0 0 0 / 20%),
|
|
|
- 0 2px 2px 0 rgb(0 0 0 / 14%),
|
|
|
- 0 1px 5px 0 rgb(0 0 0 / 12%);
|
|
|
- }
|
|
|
- }
|
|
|
+ ::v-deep .wd-button.is-primary {
|
|
|
+ background: linear-gradient(270deg, #f88842 0%, #ffac78 100%);
|
|
|
}
|
|
|
</style>
|
