13 changed files with 1180 additions and 163 deletions
@ -0,0 +1,278 @@ |
|||||
|
<template> |
||||
|
<view class="drawer-container"> |
||||
|
<!-- 蒙层 --> |
||||
|
<!-- <view |
||||
|
class="mask" |
||||
|
:class="{ show: visibleInner && isFullScreen }" |
||||
|
:style="{ top: isFullScreen ? '0' : halfY + 'px' }" |
||||
|
@click="close" |
||||
|
/> --> |
||||
|
|
||||
|
<!-- 抽屉 --> |
||||
|
<view |
||||
|
class="drawer" |
||||
|
:class="{ |
||||
|
dragging: isDragging |
||||
|
}" |
||||
|
:style="{ transform: `translateY(${translateY}px)` }" |
||||
|
@touchstart="onStart" |
||||
|
@touchmove.stop.prevent="onMove" |
||||
|
@touchend="onEnd" |
||||
|
> |
||||
|
<!-- 顶部拖拽条 --> |
||||
|
<view class="header" @touchstart.stop="onStart"> |
||||
|
<view class="bar"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 内容 --> |
||||
|
<view class="content"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "PopupDrawer", |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
visibleInner: false, |
||||
|
|
||||
|
// 拖动状态 |
||||
|
isDragging: false, |
||||
|
startY: 0, |
||||
|
currentY: 0, |
||||
|
|
||||
|
// 位置 |
||||
|
windowHeight: 0, |
||||
|
halfY: 0, |
||||
|
fullY: 0, |
||||
|
translateY: 0, |
||||
|
|
||||
|
startTranslateY: 0, |
||||
|
|
||||
|
// 显示状态 |
||||
|
isFullScreen: false |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
visible: { |
||||
|
immediate: true, |
||||
|
handler(v) { |
||||
|
if (v) { |
||||
|
this.open(); |
||||
|
} else { |
||||
|
this.close(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
const res = uni.getSystemInfoSync(); |
||||
|
this.windowHeight = res.windowHeight; |
||||
|
|
||||
|
this.halfY = this.windowHeight * 0.5; |
||||
|
this.fullY = 0; |
||||
|
|
||||
|
this.translateY = this.halfY; |
||||
|
}, |
||||
|
methods: { |
||||
|
/** 打开 */ |
||||
|
open() { |
||||
|
this.visibleInner = true; |
||||
|
this.isFullScreen = false; // 默认打开为半屏 |
||||
|
this.$nextTick(() => { |
||||
|
this.animateTo(this.halfY); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** 关闭 */ |
||||
|
close() { |
||||
|
this.isFullScreen = false; |
||||
|
this.animateTo(this.windowHeight, () => { |
||||
|
this.visibleInner = false; |
||||
|
this.$emit("update:visible", false); |
||||
|
this.$emit("close"); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** 手势开始 */ |
||||
|
onStart(e) { |
||||
|
// 阻止默认行为和事件冒泡 |
||||
|
e.preventDefault(); |
||||
|
e.stopPropagation(); |
||||
|
|
||||
|
this.isDragging = true; |
||||
|
this.startY = e.touches[0].clientY; |
||||
|
this.startTranslateY = this.translateY; |
||||
|
}, |
||||
|
|
||||
|
/** 手势移动 */ |
||||
|
onMove(e) { |
||||
|
// 阻止默认行为和事件冒泡 |
||||
|
e.preventDefault(); |
||||
|
e.stopPropagation(); |
||||
|
|
||||
|
if (!this.isDragging) return; |
||||
|
|
||||
|
const moveY = e.touches[0].clientY - this.startY; |
||||
|
let newY = this.startTranslateY + moveY; |
||||
|
|
||||
|
// 限制范围 |
||||
|
if (newY < 0) newY = 0; |
||||
|
if (newY > this.windowHeight) newY = this.windowHeight; |
||||
|
|
||||
|
this.translateY = newY; |
||||
|
}, |
||||
|
|
||||
|
/** 手势结束（吸附逻辑） */ |
||||
|
onEnd(e) { |
||||
|
e.preventDefault(); |
||||
|
e.stopPropagation(); |
||||
|
|
||||
|
this.isDragging = false; |
||||
|
|
||||
|
const moveY = e.changedTouches[0].clientY - this.startY; |
||||
|
|
||||
|
// --------------------------- |
||||
|
// 1. 在全屏状态 |
||||
|
// --------------------------- |
||||
|
if (this.translateY === this.fullY) { // translateY = 0 |
||||
|
// 往下拉超过 80 → 吸附到半屏，而不是关闭 |
||||
|
if (moveY > 80) { |
||||
|
this.isFullScreen = false; |
||||
|
return this.animateTo(this.halfY); |
||||
|
} |
||||
|
|
||||
|
// 往上拉（基本不会）→ 保持全屏 |
||||
|
if (moveY < -50) { |
||||
|
this.isFullScreen = true; |
||||
|
return this.animateTo(this.fullY); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// --------------------------- |
||||
|
// 2. 在半屏状态 |
||||
|
// --------------------------- |
||||
|
if (this.translateY >= this.halfY - 10 && this.translateY <= this.halfY + 10) { |
||||
|
// 上拉 → 全屏 |
||||
|
if (moveY < -80) { |
||||
|
this.isFullScreen = true; |
||||
|
return this.animateTo(this.fullY); |
||||
|
} |
||||
|
// 下拉轻微 → 保持半屏 |
||||
|
if (moveY > 0 && moveY < 120) { |
||||
|
this.isFullScreen = false; |
||||
|
return this.animateTo(this.halfY); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// --------------------------- |
||||
|
// 3. 如果下拉超过阈值（且不是全屏）→ 关闭 |
||||
|
// --------------------------- |
||||
|
if (moveY > 120) { |
||||
|
this.isFullScreen = false; |
||||
|
return this.close(); |
||||
|
} |
||||
|
|
||||
|
// --------------------------- |
||||
|
// 4. 自动吸附最近位置 |
||||
|
// --------------------------- |
||||
|
const points = [this.fullY, this.halfY]; |
||||
|
let nearest = points.reduce((prev, curr) => |
||||
|
Math.abs(curr - this.translateY) < Math.abs(prev - this.translateY) ? curr : prev |
||||
|
); |
||||
|
|
||||
|
this.isFullScreen = (nearest === this.fullY); |
||||
|
this.animateTo(nearest); |
||||
|
}, |
||||
|
/** 动画过渡（使用 RAF，不卡顿） */ |
||||
|
animateTo(targetY, callback) { |
||||
|
// 小程序动画对象 |
||||
|
const animation = uni.createAnimation({ |
||||
|
duration: 250, |
||||
|
timingFunction: "cubic-bezier(0.25, 0.1, 0.25, 1)" |
||||
|
}); |
||||
|
|
||||
|
animation.translateY(targetY).step(); |
||||
|
|
||||
|
this.animationData = animation.export(); |
||||
|
this.translateY = targetY; |
||||
|
|
||||
|
if (callback) { |
||||
|
setTimeout(callback, 260); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.drawer-container { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
pointer-events: none; /* 默认不阻挡交互 */ |
||||
|
z-index: 9999; |
||||
|
|
||||
|
.mask { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.45); |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.25s; |
||||
|
pointer-events: auto; /* 蒙层接收交互 */ |
||||
|
|
||||
|
&.show { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.drawer { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #fff; |
||||
|
border-radius: 24rpx 24rpx 0 0; |
||||
|
transition: transform 0.25s ease-out; |
||||
|
pointer-events: auto; /* 抽屉部分接收交互 */ |
||||
|
|
||||
|
&.dragging { |
||||
|
transition: none !important; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.bar { |
||||
|
width: 120rpx; |
||||
|
height: 12rpx; |
||||
|
border-radius: 6rpx; |
||||
|
background: #ccc; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
height: calc(100% - 80rpx); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,215 @@ |
|||||
|
<template> |
||||
|
<view class="edit-profile-page"> |
||||
|
<!-- 头像编辑区域 --> |
||||
|
<view class="profile-section"> |
||||
|
<view class="profile-item" @click="changeAvatar"> |
||||
|
<text class="item-label">头像</text> |
||||
|
<view class="item-value avatar-container"> |
||||
|
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
||||
|
<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image> |
||||
|
</button> |
||||
|
<!-- <text class="arrow">></text> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="profile-item" @click="editNickname"> |
||||
|
<text class="item-label">昵称</text> |
||||
|
<view class="item-value"> |
||||
|
<text class="nickname">{{ userInfo.nickname || '未设置' }}</text> |
||||
|
<!-- <text class="arrow">></text> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="profile-item"> |
||||
|
<text class="item-label">性别</text> |
||||
|
<view class="item-value"> |
||||
|
<text>{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置' }}</text> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 保存按钮 --> |
||||
|
<!-- <view class="save-section"> |
||||
|
<button class="save-btn" @click="saveProfile">保存</button> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, computed } from 'vue'; |
||||
|
import { useUserStore } from '../../stores/user.js'; |
||||
|
import { appUserEditAvatar, appserEditUser } from '../../api/index.js'; |
||||
|
|
||||
|
const userStore = useUserStore(); |
||||
|
const userInfo = computed(() => userStore.userInfo || {}); |
||||
|
|
||||
|
// 更换头像 |
||||
|
const onChooseAvatar = async (e) => { |
||||
|
const { avatarUrl } = e.detail |
||||
|
console.log(avatarUrl) |
||||
|
try { |
||||
|
await appUserEditAvatar(avatarUrl) |
||||
|
// 更新用户 store 中的头像信息 |
||||
|
if (avatarUrl) { |
||||
|
userStore.updateUserInfoField('avatarUrl', avatarUrl); |
||||
|
} |
||||
|
} catch(err) { |
||||
|
console.log(err) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 更换头像（通过按钮点击触发） |
||||
|
const changeAvatar = () => { |
||||
|
// 这里可以添加其他更换头像的逻辑 |
||||
|
console.log('点击更换头像'); |
||||
|
}; |
||||
|
|
||||
|
// 编辑昵称 |
||||
|
const editNickname = () => { |
||||
|
uni.showModal({ |
||||
|
title: '编辑昵称', |
||||
|
editable: true, |
||||
|
placeholderText: '请输入昵称', |
||||
|
success: async (res) => { |
||||
|
if (res.confirm) { |
||||
|
const nickname = res.content; |
||||
|
if (nickname) { |
||||
|
/* userStore.updateUserInfoField('nickName', nickname); |
||||
|
uni.showToast({ |
||||
|
title: '昵称已更新', |
||||
|
icon: 'success' |
||||
|
}); */ |
||||
|
try { |
||||
|
await appserEditUser({ nickname }) |
||||
|
userStore.updateUserInfoField('nickname', nickname); |
||||
|
} catch(err) { |
||||
|
console.log(err) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 保存资料 |
||||
|
const saveProfile = () => { |
||||
|
uni.showToast({ |
||||
|
title: '资料保存成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
|
||||
|
// 返回上一页 |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack(); |
||||
|
}, 1000); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.edit-profile-page { |
||||
|
background-color: #f5f5f5; |
||||
|
min-height: 100vh; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
|
||||
|
.page-header { |
||||
|
background-color: #fff; |
||||
|
padding: 16px; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.page-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.profile-section { |
||||
|
background-color: #fff; |
||||
|
margin-top: 12px; |
||||
|
padding: 0 16px; |
||||
|
|
||||
|
.profile-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 16px 0; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.item-label { |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.item-value { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #999; |
||||
|
|
||||
|
.nickname { |
||||
|
max-width: 200px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
margin-left: 8px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.avatar-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.avatar-btn { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 25px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.save-section { |
||||
|
padding: 24px 16px; |
||||
|
|
||||
|
.save-btn { |
||||
|
width: 100%; |
||||
|
height: 48px; |
||||
|
background-color: #07c160; |
||||
|
color: #fff; |
||||
|
font-size: 16px; |
||||
|
border-radius: 24px; |
||||
|
border: none; |
||||
|
|
||||
|
&::after { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,38 @@ |
|||||
|
/** |
||||
|
* 延时函数 |
||||
|
* @param {number} ms - 延迟时间（毫秒） |
||||
|
* @returns {Promise} - 返回一个 Promise，在指定时间后 resolve |
||||
|
*/ |
||||
|
export function delay(ms) { |
||||
|
return new Promise(resolve => setTimeout(resolve, ms)); |
||||
|
} |
||||
|
|
||||
|
export function getLatLng() { |
||||
|
return new Promise((reslove) => { |
||||
|
uni.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
success: function(res) { |
||||
|
console.log('当前位置的经度：' + res.longitude); |
||||
|
console.log('当前位置的纬度：' + res.latitude); |
||||
|
reslove({ |
||||
|
lat: res.latitude, |
||||
|
lng: res.longitude |
||||
|
}) |
||||
|
}, |
||||
|
fail: function(res) { |
||||
|
reslove({ |
||||
|
lat: null, |
||||
|
lng: null |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 使用示例:
|
||||
|
// async function example() {
|
||||
|
// console.log('开始');
|
||||
|
// await delay(2000); // 延时 2 秒
|
||||
|
// console.log('2秒后执行');
|
||||
|
// }
|
||||
Loading…
Reference in new issue