refactor: delete useless fly-* files
This commit is contained in:
菲鸽
parent
7a924e6778
commit
e008b6753e
@ -1,3 +1,4 @@
|
||||
<!-- 本文件会自动导入 -->
|
||||
<template>
|
||||
<span>
|
||||
<slot />
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<view class="fly-content">
|
||||
<view v-for="n in line" :key="n" class="h-10 leading-10 text-center">
|
||||
很多内容，这里是第{{ n }}行
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
withDefaults(defineProps<{ line?: number }>(), { line: 10 })
|
||||
</script>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<view class="text-green-500"> header </view>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
# fly-login
|
||||
|
||||
点击“点击显示微信头像”按钮后，出现的半屏登录弹窗，可以在任意页面引入。
|
||||
|
||||
仿“掘金小册”小程序。
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<view class="fly-login" v-if="modelValue">
|
||||
<view class="fly-login-mask" />
|
||||
<view class="fly-login-content px-4">
|
||||
<view class="font-bold h-16 leading-16">获取您的昵称、头像</view>
|
||||
<view
|
||||
class="rounded-full bg-light-600 w-6 h-6 text-center absolute top-4 right-4"
|
||||
@click="onClose"
|
||||
>
|
||||
<view class="i-carbon-close text-gray-700" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-[1rpx]"
|
||||
>
|
||||
<text class="mr-4 flex-shrink-0">头像</text>
|
||||
<button
|
||||
class="bg-transparent flex items-center after:b-none w-full h-12 leading-12"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
>
|
||||
<image class="w-8 h-8 rounded-full" :src="avatarUrl"></image>
|
||||
<text class="ml-auto i-carbon-chevron-right"></text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-1 mt-4"
|
||||
>
|
||||
<text class="mr-4 flex-shrink-0">昵称</text>
|
||||
<input type="nickname" placeholder="请输入昵称" @change="onChange" @blur="onChange" />
|
||||
</view>
|
||||
|
||||
<button
|
||||
size="default"
|
||||
type="default"
|
||||
style="color: #fff; background-color: #1aad19; border-color: #1aad19"
|
||||
class="text-center leading-12 w-40 my-4"
|
||||
@click="onSubmit"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store'
|
||||
import defaultAvatarUrl from './defaultAvatar.png'
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
defineProps<{ modelValue: boolean }>()
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const avatarUrl = ref(defaultAvatarUrl)
|
||||
const nickname = ref('')
|
||||
|
||||
const onClose = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
const { avatarUrl: url } = e.detail
|
||||
avatarUrl.value = url
|
||||
// 这里就要上传，加快速度，提升体验（用户多次选择头像就多次上传吧，总有取舍）
|
||||
console.log(url)
|
||||
}
|
||||
|
||||
const onChange = (e) => {
|
||||
const { value } = e.detail
|
||||
nickname.value = value
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
// 1、上传刚刚的图片，并返回网络地址
|
||||
// 2、把用户信息存起来
|
||||
if (avatarUrl.value === defaultAvatarUrl) {
|
||||
uni.showToast({
|
||||
title: '请选择头像',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!nickname.value) {
|
||||
uni.showToast({
|
||||
title: '请填写昵称',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
emit('update:modelValue', false)
|
||||
console.log('保存用户信息')
|
||||
userStore.setUserInfo({ nickname: nickname.value, avatar: avatarUrl.value })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fly-login {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
||||
.fly-login-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
.fly-login-content {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: var(--window-bottom);
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 275 KiB |
@ -1,3 +0,0 @@
|
||||
# fly-navbar
|
||||
|
||||
建议本导航栏组件在设置 `"navigationStyle": "custom"` 的页面使用，目前支持微信小程序的页面滚动动画。
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
|
||||
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
||||
<!-- 1/3，多于1个页面，用返回图标 -->
|
||||
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
|
||||
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
|
||||
<button class="i-carbon-chevron-left text-white w-7 h-7"></button>
|
||||
</view>
|
||||
</navigator>
|
||||
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
|
||||
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
|
||||
<navigator
|
||||
v-else-if="!isTabbar"
|
||||
open-type="switchTab"
|
||||
url="/pages/index/index"
|
||||
class="left-icon"
|
||||
>
|
||||
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
|
||||
<button class="i-carbon-home text-white w-6 h-6"></button>
|
||||
</view>
|
||||
</navigator>
|
||||
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
|
||||
<view class="title">{{ title || '' }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getIsTabbar } from '@/utils/index'
|
||||
|
||||
defineProps<{ title?: string }>()
|
||||
// 获取页面栈
|
||||
const pages = getCurrentPages()
|
||||
const isTabbar = getIsTabbar()
|
||||
console.log({ isTabbar, pagesLen: pages.length })
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fly-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
width: 750rpx;
|
||||
color: #000;
|
||||
background-color: transparent;
|
||||
|
||||
.left-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 44rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
font-size: 32rpx;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user