2025-01-07 16:56:58 +08:00

89 lines
2.7 KiB
Vue

<template>
<view>
<wd-popup v-model="show" position="left" @close="closePopup">
<view class="w-80 bg-[#f3f5fa] pos-relative h-full" v-if="systemInfo">
<view
:style="{ paddingTop: systemInfo.safeAreaInsets?.top + 'px' }"
class="h-12 pt-1 flex flex-items-center flex-justify-between mx-4 custom-color-black"
>
<view class="text-4 font-bold">我的团队</view>
<view class="rounded-50% bg-[#e2e5ea] flex-justify-center flex-items-center flex w-6 h-6">
<wd-icon name="refresh" size="14px"></wd-icon>
</view>
</view>
<scroll-view scroll-y="true" :style="{ height: systemInfo.safeArea?.height - 128 + 'px' }">
<view class="pb-10">
<view
class="flex flex-items-center bg-white shadow-sm p-2 mx-2 rounded-2 mt-2"
v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14, 15]"
:key="index"
>
<image
src="/static/images/icon_team_join.png"
mode="aspectFill"
class="w-5 h-5 mx-2"
></image>
<view>
<view class="text-3.5">06066322的互联</view>
<image
src="/static/images/icon_team.webp"
mode="widthFix"
class="w-10 mt-1"
></image>
</view>
<image
src="/static/images/icon_setting.webp"
mode="aspectFill"
class="w-4 h-4 ml-a"
></image>
</view>
</view>
</scroll-view>
<view class="pb-safe bottom-0 pos-absolute w-full color-[#515357] bg-[#f3f5fa]">
<wd-divider color="#e6e7ec"></wd-divider>
<view class="flex-items-center flex flex-justify-around px-5">
<view>创建团队</view>
<wd-divider color="#bdbfc4" vertical />
<view>加入团队</view>
</view>
<wd-divider color="#e6e7ec"></wd-divider>
<view class="text-center pb-4">快捷添加我的设备</view>
</view>
</view>
</wd-popup>
</view>
</template>
<script setup lang="ts">
import { useBasicStore } from '@/store'
const $basic = useBasicStore()
const systemInfo = ref(null)
const show = ref<boolean>(false)
onMounted(async () => {
systemInfo.value = await $basic.getSystemInfo()
showModal()
})
const closePopup = () => {
uni.showTabBar()
}
const showModal = () => {
uni.hideTabBar()
show.value = true
}
const hideModal = () => {
uni.showTabBar()
show.value = false
}
defineExpose({
showModal,
hideModal
})
</script>