thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

620
pages/tabbar/index/index.js Normal file
View File

@ -0,0 +1,620 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
export default [{
id: 'basics',
name: '基础组件',
data: [{
icon: 'color',
name: 'Color 色彩',
vip: false,
page: 'color'
}, {
icon: 'card',
name: 'Text 文本',
vip: false,
page: 'text'
}, {
icon: 'icon',
name: 'Icon 图标',
vip: false,
page: 'icon'
}, {
icon: 'button',
name: 'Button 按钮',
vip: false,
page: 'button'
}, {
icon: 'footer',
name: 'Footer 页脚',
vip: false,
page: 'footer'
}, {
icon: 'animation',
name: 'Animation 动画',
vip: false,
page: 'animation'
}]
}, {
id: 'layout',
name: '布局组件',
data: [{
icon: 'layout',
name: 'Layout 栅格布局',
vip: false,
page: 'layout'
}, {
icon: 'grid',
name: 'Grid 宫格',
vip: false,
page: 'grid'
}, {
icon: 'panel',
name: 'Panel 面板',
vip: true,
page: 'panel'
}, {
icon: 'preview',
name: 'Preview 表单预览',
vip: true,
page: 'preview'
}, {
icon: 'list',
name: 'List 列表',
vip: false,
page: 'list'
}, {
icon: 'card',
name: 'Card 卡片',
vip: false,
page: 'card'
}, {
icon: 'drag',
name: 'MovableView 可移动容器',
vip: true,
page: 'movable-view'
}, {
icon: 'overflowhidden',
name: 'HorizontalScroll 横向滚动',
vip: true,
page: 'horizontal-scroll'
}, {
icon: 'label',
name: 'Section 标题栏',
vip: false,
page: 'section'
}, {
icon: 'lazyload',
name: 'BannerArc 横幅底部圆弧',
vip: true,
page: 'arc'
}]
}, {
id: 'form',
name: '表单组件',
data: [{
icon: 'calendar',
name: 'Calendar 日历',
vip: true,
page: 'calendar'
}, {
icon: 'cascader',
name: 'Cascader 级联选择器',
vip: true,
page: 'cascader'
}, {
icon: 'pick',
name: 'Picker 选择器',
vip: true,
page: 'picker'
}, {
icon: 'date_picker',
name: 'DatePicker 日期时间选择器',
vip: true,
page: 'datePicker'
}, {
icon: 'slider',
name: 'Slider 滑块选择器',
vip: true,
page: 'slider'
}, {
icon: 'form',
name: 'Form 表单校验',
vip: true,
page: 'form'
}, {
icon: 'list',
name: 'FormItem 表单项',
vip: true,
page: 'formItem'
}, {
icon: 'select',
name: 'Select 选择器',
vip: true,
page: 'select'
}, {
icon: 'input',
name: 'Input 输入框',
vip: false,
page: 'input'
}, {
icon: 'inputnumber',
name: 'InputNumber 数字输入框',
vip: false,
page: 'inputNumber'
}, {
icon: 'label',
name: 'Label 标签',
vip: false,
page: 'label'
}, {
icon: 'radio',
name: 'Radio 单选框',
vip: false,
page: 'radio'
}, {
icon: 'checkbox',
name: 'Checkbox 复选框',
vip: false,
page: 'checkbox'
}, {
icon: 'switch',
name: 'Switch 开关',
vip: false,
page: 'switch'
}, {
icon: 'textarea',
name: 'Textarea 多行输入框',
vip: false,
page: 'textarea'
}, {
icon: 'rate',
name: 'Rate 评分',
vip: true,
page: 'rate'
}, {
icon: 'upload',
name: 'Upload 图片上传',
vip: true,
page: 'upload'
}, {
icon: 'upload',
name: 'UploadVideo 视频上传',
vip: true,
page: 'uploadVideo'
}, {
icon: 'searchbar',
name: 'SearchBar 搜索栏',
vip: true,
page: 'searchBar'
}]
}, {
id: 'operate',
name: '操作反馈',
data: [{
icon: 'actionsheet',
name: 'ActionSheet 上拉菜单',
vip: false,
page: 'actionsheet'
}, {
icon: 'toast',
name: 'Toast 轻提示',
vip: false,
page: 'toast'
}, {
icon: 'backdrop',
name: 'Backdrop 遮罩层',
vip: false,
page: 'backdrop'
}, {
icon: 'dialog',
name: 'Dialog 对话框',
vip: false,
page: 'dialog'
}, {
icon: 'dropdownmenu',
name: 'DropdownMenu 下拉菜单',
vip: false,
page: 'dropdownMenu'
}, {
icon: 'dropdownmenu',
name: 'DropdownList 下拉菜单',
vip: false,
page: 'dropdownList'
}, {
icon: 'modal',
name: 'Modal 模态框',
vip: true,
page: 'modal'
}, {
icon: 'gallery',
name: 'Gallery 画廊',
vip: true,
page: 'gallery'
}, {
icon: 'landscape',
name: 'Landscape 压屏窗',
vip: true,
page: 'landscape'
}, {
icon: 'loading',
name: 'Loading 加载',
vip: false,
page: 'loading'
}, {
icon: 'loadani',
name: 'LoadAni 加载动画',
vip: true,
page: 'loadAni'
}, {
icon: 'loading',
name: 'Spin 旋转动画',
vip: true,
page: 'spin'
},
// #ifndef MP-QQ
{
icon: 'animation',
name: 'Lottie 动画',
vip: true,
page: 'lottie'
},
// #endif
{
icon: 'message',
name: 'Message 消息提示',
vip: true,
page: 'message'
}, {
icon: 'swipeaction',
name: 'SwipeAction 滑动菜单',
vip: false,
page: 'swipeAction'
}
]
}, {
id: 'nav',
name: '导航组件',
data: [{
icon: 'navbar',
name: 'NavBar 导航栏',
vip: true,
page: 'navbar'
}, {
icon: 'pagination',
name: 'Pagination 分页器',
vip: false,
page: 'pagination'
}, {
icon: 'bubblebox',
name: 'BubbleBox 气泡框',
vip: true,
page: 'bubbleBox'
}, {
icon: 'segmentedcontrol',
name: 'SegmentedControl 分段器',
vip: false,
page: 'segmentedControl'
}, {
icon: 'tabbar',
name: 'Tabbar 标签栏',
vip: true,
page: 'tabbar'
}, {
icon: 'bottomnavbar',
name: 'BottomNavbar 底部导航栏',
vip: true,
page: 'bottomNavbar'
}, {
icon: 'tabs',
name: 'Tabs 标签页',
vip: false,
page: 'tabs'
}, {
icon: 'indexlist',
name: 'IndexList 索引列表',
vip: true,
page: 'indexList'
}, {
icon: 'noticebar',
name: 'NoticeBar 通告栏',
vip: true,
page: 'noticeBar'
}, {
icon: 'sticky',
name: 'Sticky 吸顶容器',
vip: true,
page: 'sticky'
}, {
icon: 'steps',
name: 'Steps 步骤条',
vip: true,
page: 'steps'
}, {
icon: 'fab',
name: 'Fab 浮动按钮',
vip: true,
page: 'fab'
}, {
icon: 'drawer',
name: 'Drawer 抽屉',
vip: false,
page: 'drawer'
}, {
icon: 'bottompopup',
name: 'BottomPopup 底部弹出层',
vip: false,
page: 'bottomPopup'
}, {
icon: 'toppopup',
name: 'TopPopup 顶部弹出层',
vip: false,
page: 'topPopup'
}, {
icon: 'timeaxis',
name: 'TimeAxis 时间轴',
vip: true,
page: 'timeAxis'
}, {
icon: 'tabs',
name: 'Vtabs 纵向选项卡',
vip: true,
page: 'vtabs'
}, {
icon: 'cascader',
name: 'Link 超链接',
vip: true,
page: 'link'
}]
}, {
id: 'data',
name: '数据组件',
data: [{
icon: 'badge',
name: 'Badge 徽章',
vip: false,
page: 'badge'
}, {
icon: 'alert',
name: 'Alert 警告框',
vip: false,
page: 'alert'
}, {
icon: 'avatar',
name: 'Avatar 头像',
vip: false,
page: 'avatar'
}, {
icon: 'tag',
name: 'Tag 标签',
vip: false,
page: 'tag'
}, {
icon: 'checkbox',
name: 'DataTag 标签选择',
vip: true,
page: 'dataTag'
},
{
icon: 'progress',
name: 'Progress 进度条',
vip: true,
page: 'progress'
}, {
icon: 'collapse',
name: 'Collapse 折叠面板',
vip: false,
page: 'collapse'
}, {
icon: 'circle',
name: 'Circle 圆形进度条',
vip: true,
page: 'circle'
}, {
icon: 'countdown',
name: 'CountDown 倒计时',
vip: true,
page: 'countdown'
}, {
icon: 'divider',
name: 'Divider 分割线',
vip: false,
page: 'divider'
}, {
icon: 'loadmore',
name: 'LoadMore 加载更多',
vip: false,
page: 'loadmore'
}, {
icon: 'empty',
name: 'Empty 缺省页',
vip: false,
page: 'empty'
}, {
icon: 'skeleton',
name: 'Skeleton 骨架屏',
vip: true,
page: 'skeleton'
}
]
}, {
id: 'expand',
name: '扩展组件',
data: [{
icon: 'sharesheet',
name: 'ShareSheet 分享面板',
vip: true,
page: 'shareSheet'
}, {
icon: 'result',
name: 'Result 结果页',
vip: true,
page: 'result'
}, {
icon: 'filterbar',
name: 'FilterBar 筛选栏',
vip: true,
page: 'filterBar'
}, {
icon: 'input',
name: 'SingleInput 单输入框',
vip: true,
page: 'singleInput'
}, {
icon: 'digitalroller',
name: 'DigitalRoller 数字滚轮',
vip: true,
page: 'digitalRoller'
}, {
icon: 'digitalkeyboard',
name: 'DigitalKeyboard 数字键盘',
vip: true,
page: 'digitalKeyboard'
}, {
icon: 'digitalkeyboard',
name: 'LicensePlate 车牌号键盘',
vip: true,
page: 'licensePlate'
}, {
icon: 'swiper',
name: 'SwiperDot 轮播图指示点',
vip: true,
page: 'swiperDot'
}, {
icon: 'copytext',
name: 'CopyText 长按复制',
vip: true,
page: 'copyText'
}, {
icon: 'cubicbezier',
name: 'CubicBezier 贝塞尔曲线',
vip: true,
page: 'cubicBezier'
}, {
icon: 'imagecropper',
name: 'ImageCropper 图片裁剪',
vip: true,
page: 'imageCropper'
}, {
icon: 'drag',
name: 'Drag 拖拽排序',
vip: true,
page: 'drag'
}, {
icon: 'slideverify',
name: 'SlideVerify 滑动验证',
vip: true,
page: 'slideVerify'
}, {
icon: 'rotateverify',
name: 'RotateVerify 旋转验证',
vip: true,
page: 'rotateVerify'
}, {
icon: 'slidercaptcha',
name: 'SliderCaptcha 滑块拼图验证',
vip: true,
page: 'sliderCaptcha'
}, {
icon: 'slidercaptcha',
name: 'PuzzleVerify 滑块拼图验证',
vip: true,
page: 'puzzleVerify'
}, {
icon: 'overflowhidden',
name: 'OverflowHidden 内容超出隐藏',
vip: true,
page: 'overflowHidden'
}, {
icon: 'timer',
name: 'Timer 计时器',
vip: true,
page: 'timer'
}, {
icon: 'countdownverify',
name: 'CountdownVerify 验证码倒计时',
vip: true,
page: 'countdownVerify'
}, {
icon: 'lazyload',
name: 'Lazyload 图片懒加载',
vip: true,
page: 'lazyload'
}, {
icon: 'waterfall',
name: 'Waterfall 瀑布流',
vip: true,
page: 'waterfall'
}, {
icon: 'table',
name: 'Table 表格',
vip: true,
page: 'table'
}, {
icon: 'backtop',
name: 'Backtop 回到顶部',
vip: true,
page: 'backtop'
}, {
icon: 'icon',
name: 'SafeArea 底部安全区域',
vip: true,
page: 'safeArea'
}, {
icon: 'chart',
name: 'Charts 图表',
vip: true,
page: ''
}]
}, {
id: 'canvas',
name: '画布组件',
data: [{
icon: 'poster',
name: 'Poster 分享海报',
vip: true,
page: 'poster'
}, {
icon: 'qrcode',
name: 'Qrcode 二维码',
vip: true,
page: 'qrcode'
}, {
icon: 'barcode',
name: 'Barcode 条形码',
vip: true,
page: 'barcode'
}, {
icon: 'autograph',
name: 'Autograph 手写签名',
vip: true,
page: 'autograph'
}, {
icon: 'chart',
name: 'Charts 图表',
vip: true,
page: ''
}]
}, {
id: 'js',
name: 'JS组件',
data: [{
icon: 'clipboard',
name: 'Clipboard 复制文本',
vip: true,
page: 'clipboard'
}, {
icon: 'request',
name: 'Request 网络请求',
vip: true,
page: 'request'
}, {
icon: 'utils',
name: 'Utils 工具类',
vip: false,
page: 'utils'
}, {
icon: 'validation',
name: 'Validator 表单验证',
vip: true,
page: 'validator'
}]
}]

256
pages/tabbar/index/index.vue Normal file
View File

@ -0,0 +1,256 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6140725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-banner__box">
<image class="fui-banner" :src="`${resUrl}/index/light/img_banner_3x.png`" mode="widthFix"></image>
<view class="fui-banner__content">
<image class="fui-logo" src="/static/images/common/img_logo.png" mode="widthFix"></image>
<view class="fui-title">First UI</view>
<view class="fui-desc">First UI是一款轻量、全面可靠的移动端组件库。</view>
</view>
<view class="fui-tabs__box">
<scroll-view class="fui-scroll__box" id="fui_tabs" scroll-with-animation scroll-x
:show-scrollbar="false" :scroll-into-view="scrollInto">
<view class="fui-scroll__view fui-align__center">
<view v-for="(tab, index) in tabs" :key="index" class="fui-tab__item fui-flex__center"
:class="{'fui-tab__item-active':tabIndex===index}" :id="tab.id" @tap="tabClick(index)">
<view :class="{'fui-tab__item-text':tabIndex===index}">{{ tab.name }}</view>
</view>
</view>
</scroll-view>
<swiper :current="tabIndex" class="fui-swiper__box" :duration="300" @change="tabChange"
:style="{height:height+'px'}">
<swiper-item class="fui-swiper__item" v-for="(tab, index) in tabs" :key="tab.id">
<scroll-view class="fui-scroll__box" scroll-y :style="{height:height+'px'}">
<view class="fui-list__view">
<fui-list-cell arrow :padding="[0,'32rpx']" :bottomBorder="false" radius="16rpx"
marginTop="24" v-for="(item,idx) in tab.data" :key="idx"
@click="href(tab.id,item.page)">
<view class="fui-list__item fui-align__center">
<view class="fui-item__icon-box">
<image class="fui-item__icon"
:src="`${resUrl}/index/light/icon_${item.icon}_3x.png`"></image>
</view>
<text>{{item.name}}</text>
<image v-if="item.vip" class="fui-vip__icon"
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
</fui-list-cell>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapActions
} from 'vuex'
import tabs from './index.js';
export default {
data() {
return {
tabs: tabs,
scrollInto: '',
tabIndex: 0,
height: 0,
resUrl: this.fui.resUrl()
}
},
computed: mapState(['status']),
onLoad() {
let time = 80
// #ifdef H5
time = 200
// #endif
setTimeout(() => {
this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(538);
// #ifdef MP
this.getStatus().then((res) => {})
// #endif
}, time)
},
methods: {
...mapActions(['getStatus']),
tabClick(index) {
this.switchTab(index)
},
tabChange(e) {
if (e.detail.source == 'touch') {
let index = e.target.current || e.detail.current;
this.switchTab(index);
}
},
switchTab(index) {
if (this.tabIndex === index) return;
this.tabIndex = index;
let scrollIndex = index - 1 < 0 ? 0 : index - 1;
this.scrollInto = this.tabs[scrollIndex].id;
},
href(type, page) {
if (page) {
// #ifdef MP-TOUTIAO
if (this.status !== 1 && page === 'imageCropper') {
this.fui.toast('开发中~')
return;
}
// #endif
this.fui.href(`/pages/component/${type}/${page}/${page}`)
} else {
this.fui.href('/pages/common/coding/coding')
}
}
},
onShareAppMessage() {
return {
title: 'First UI组件库'
}
}
}
</script>
<style>
.fui-banner__box {
width: 100%;
height: 540rpx;
position: relative;
background-color: #EDF9FF;
}
.fui-banner {
width: 100%;
height: 540rpx;
display: block;
}
.fui-banner__content {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
padding: 80rpx 32rpx 0;
box-sizing: border-box;
}
.fui-logo {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
display: block;
}
.fui-title {
font-size: 40rpx;
line-height: 40rpx;
padding: 24rpx 0 40rpx;
box-sizing: border-box;
}
.fui-desc {
width: 280rpx;
font-size: 24rpx;
line-height: 40rpx;
color: #333333;
}
.fui-tabs__box {
width: 100%;
height: 108rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 12;
}
.fui-scroll__view {
min-width: 100%;
height: 108rpx;
white-space: nowrap;
}
.fui-tab__item {
flex-shrink: 0;
padding: 0 26rpx;
height: 108rpx;
font-size: 28rpx;
color: #7F7F7F;
position: relative;
}
.fui-tab__item-text {
transform: scale(1.2);
color: #465CFF;
transition: transform 0.2s linear;
}
.fui-tab__item-active::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: #465CFF;
border-radius: 2px;
left: 24rpx;
bottom: 0;
transform: scale(1.2);
animation: ani 0.2s linear forwards;
}
@keyframes ani {
0% {
width: 0;
}
100% {
width: 45rpx;
}
}
.fui-swiper__box,
.fui-swiper__item,
.fui-scroll__box {
width: 100%;
}
.fui-list__view {
width: 100%;
min-height: 101%;
padding: 8rpx 32rpx 32rpx;
box-sizing: border-box;
}
.fui-list__item {
width: 100%;
height: 112rpx;
}
.fui-list__item text {
padding-left: 24rpx;
padding-right: 12rpx;
flex-shrink: 0;
}
.fui-item__icon-box {
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.fui-item__icon,
.fui-vip__icon {
width: 48rpx;
height: 48rpx;
display: block;
flex-shrink: 0;
}
</style>