Commit 3ef04c4e authored by tao.huang's avatar tao.huang

feat: 个人编辑页

parent 38da9894
<template>
<view class="picker-custom">
<!-- 插槽内容,点击触发弹层 -->
<view @click="open">
<slot></slot>
</view>
<!-- 遮罩层 -->
<view v-if="show" class="picker-layer-mask" @click="close"></view>
<!-- 底部弹出层 -->
<view v-if="show" class="picker-layer-popup">
<view class="picker-layer-panel">
<!-- 可自定义头部 -->
<view class="picker-layer-header">
<text @click="close" class="picker-layer-cancel">取消</text>
<text @click="confirm" class="picker-layer-confirm">确定</text>
</view>
<view class="picker-layer-view-mask-top"></view>
<view class="picker-layer-view-mask-bottom"></view>
<!-- 半屏picker-view -->
<picker-view
class="picker-layer-view"
mask-style="background: rgb(246, 248, 250); z-index: 0;"
indicator-style="border-radius: 10px; height: 50px;background:#ffffff; z-index:0"
:value="pickerValue"
@change="onChange"
>
<picker-view-column>
<view
v-for="(item, idx) in range"
:key="idx"
class="picker-layer-item"
>
{{ item }}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
range: {
type: Array,
default: () => [],
},
value: {
default: 0,
},
onPickerChange: {
type: Function,
default: () => {},
},
onLayerVisibleChange: {
type: Function,
default: () => {},
},
});
const show = ref(false);
const pickerValue = ref(props.value);
function open() {
pickerValue.value = props.value;
show.value = true;
props.onLayerVisibleChange(true);
}
function close() {
show.value = false;
props.onLayerVisibleChange(false);
}
function confirm() {
/* 处理选中逻辑 */ close();
props.onPickerChange(pickerValue.value);
}
function onChange(e) {
console.log("onPcikChange", e);
pickerValue.value = e.detail.value;
}
</script>
<style lang="less" scoped>
.picker-layer-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3999;
}
.picker-layer-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 4000;
display: flex;
flex-direction: column;
align-items: center;
animation: picker-layer-up 0.3s;
}
@keyframes picker-layer-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.picker-layer-panel {
width: 100vw;
height: 50vh;
background: #f6f8fa;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.picker-layer-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 140rpx;
box-sizing: border-box;
background: #f6f8fa;
padding: 0 32rpx;
.picker-layer-cancel {
color: #6f6d67;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-confirm {
color: #ffffff;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #d3a358;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-title {
color: #222;
font-size: 32rpx;
font-weight: bold;
}
}
.picker-layer-view {
flex: 1;
width: 100%;
}
.picker-layer-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
color: #1d1e25;
}
.picker-layer-view-mask-top {
position: absolute;
top: 140rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(
to bottom,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%
);
pointer-events: none;
}
.picker-layer-view-mask-bottom {
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(
to top,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%
);
pointer-events: none;
}
</style>
\ No newline at end of file
This diff is collapsed.
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
src="/static/my/icon_modify.png" src="/static/my/icon_modify.png"
mode="aspectFit" mode="aspectFit"
lazy-load="false" lazy-load="false"
@click="handleEditProfile"
/> />
<view class="user-detail"> <view class="user-detail">
...@@ -38,7 +39,27 @@ ...@@ -38,7 +39,27 @@
</view> </view>
<!-- user desc --> <!-- user desc -->
<view class="user-desc"> <view class="user-desc">
<text class="desc-text"> </text> <view class="desc-top">
<text class="desc-title">宝宝变化</text>
<text class="desc-age">
{{ babyDetail[0].age }}
</text>
</view>
<view class="desc-content">
<text class="desc-text"
>{{
cfgStatus.openBabyCardDesc
? babyDetail[0].desc
: babyDetail[0].desc.slice(0, 46) + "..."
}}
</text>
<text
class="desc-more"
@click="cfgStatus.openBabyCardDesc = !cfgStatus.openBabyCardDesc"
>{{ cfgStatus.openBabyCardDesc ? "点击收起" : "点击展开" }}</text
>
</view>
</view> </view>
</view> </view>
<!-- 工具 --> <!-- 工具 -->
...@@ -63,6 +84,17 @@ ...@@ -63,6 +84,17 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
const cfgStatus = ref({
openBabyCardDesc: false,
});
const babyDetail = ref([
{
age: "2月龄",
desc: "宝宝开始对周围环境产生兴趣,喜欢看、听、摸,开始对玩具感兴趣,开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣,喜欢看、听、摸,开始对玩具感兴趣,开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣,喜欢看、听、摸,开始对玩具感兴趣,开始对妈妈的声音产生反应。",
},
]);
const toolList = ref([ const toolList = ref([
{ {
icon: "/static/my/code.png", icon: "/static/my/code.png",
...@@ -126,6 +158,7 @@ const handleHot = (e) => { ...@@ -126,6 +158,7 @@ const handleHot = (e) => {
const navigateTo = (url) => { const navigateTo = (url) => {
uni.navigateTo({ uni.navigateTo({
url, url,
animationDuration: 0,
fail: (err) => { fail: (err) => {
console.error("页面跳转失败:", err); console.error("页面跳转失败:", err);
uni.showToast({ uni.showToast({
...@@ -138,7 +171,7 @@ const navigateTo = (url) => { ...@@ -138,7 +171,7 @@ const navigateTo = (url) => {
// 编辑个人资料 // 编辑个人资料
const handleEditProfile = () => { const handleEditProfile = () => {
navigateTo("/pages/user/profile"); navigateTo("/pages/person/person");
}; };
// 联系客服 // 联系客服
...@@ -238,7 +271,7 @@ defineExpose({}); ...@@ -238,7 +271,7 @@ defineExpose({});
background-color: @color-white-soft; background-color: @color-white-soft;
width: 686rpx; width: 686rpx;
height: 343rpx; min-height: 343rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 32rpx; border-radius: 32rpx;
position: relative; position: relative;
...@@ -339,14 +372,56 @@ defineExpose({}); ...@@ -339,14 +372,56 @@ defineExpose({});
.user-desc { .user-desc {
width: 100%; width: 100%;
height: 182rpx; height: calc(100% - 161rpx);
background-color: #fff; background-color: #fff;
border-radius: 32rpx; border-radius: 32rpx;
padding: 30rpx 32rpx; padding: 32rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
position: absolute; margin-top: 161rpx;
bottom: 0;
left: 0; .desc-top {
display: flex;
align-items: center;
}
.desc-title {
font-size: 32rpx;
font-weight: 500;
color: @color-black-deep;
}
.desc-age {
font-size: 24rpx;
color: @color-gold-cover;
background-color: #fef7f2;
padding: 7rpx 10rpx;
border-radius: 10rpx;
margin-left: 8rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.desc-text {
font-size: 24rpx;
line-height: 34rpx;
display: inline-block;
}
.desc-more {
font-size: 24rpx;
color: @color-gold-cover;
line-height: 34rpx;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}
.desc-content {
margin-top: 32rpx;
position: relative;
}
} }
} }
...@@ -381,8 +456,7 @@ defineExpose({}); ...@@ -381,8 +456,7 @@ defineExpose({});
} }
} }
} }
}
.protocol-container { .protocol-container {
width: 360rpx; width: 360rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment