feat: 首次提交
This commit is contained in:
peerless_hero
620
pages/tabbar/index/index.js
Normal file
620
pages/tabbar/index/index.js
Normal 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
256
pages/tabbar/index/index.vue
Normal 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>
|
||||
98
pages/tabbar/layout/index.js
Normal file
98
pages/tabbar/layout/index.js
Normal file
@ -0,0 +1,98 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default [{
|
||||
cn: '列表',
|
||||
en: 'LIST',
|
||||
src: 'list',
|
||||
background: '#F8F4FF',
|
||||
page: '/pages/component/layout/list/list'
|
||||
}, {
|
||||
cn: '索引列表',
|
||||
en: 'INDEX LIST',
|
||||
src: 'index_list',
|
||||
background: '#EDF9FF',
|
||||
page: '/pages/component/nav/indexList/indexList'
|
||||
}, {
|
||||
cn: '宫格',
|
||||
en: 'GRID',
|
||||
src: 'grid',
|
||||
background: '#EAFFF6',
|
||||
page: '/pages/component/layout/grid/grid'
|
||||
}, {
|
||||
cn: '卡片',
|
||||
en: 'CARD',
|
||||
src: 'card',
|
||||
background: '#FFF4F7',
|
||||
page: '/pages/component/layout/card/card'
|
||||
}, {
|
||||
cn: '瀑布流',
|
||||
en: 'WATERFALL FLOW',
|
||||
src: 'waterfall_flow',
|
||||
background: '#FFF8EF',
|
||||
page: '/pages/layout/waterfall/waterfall'
|
||||
}, {
|
||||
cn: '顶部选项卡',
|
||||
en: 'TOP TAB',
|
||||
src: 'tabs',
|
||||
background: '#F8F4FF',
|
||||
page: '/pages/layout/topTab/topTab'
|
||||
}, {
|
||||
cn: '垂直选项卡',
|
||||
en: 'VERTICAL TAB',
|
||||
src: 'vertical',
|
||||
background: '#EDF9FF',
|
||||
page: '/pages/component/nav/vtabs/vtabs'
|
||||
}, {
|
||||
cn: '新闻列表',
|
||||
en: 'NEWS LIST',
|
||||
src: 'news',
|
||||
background: '#EAFFF6',
|
||||
page: '/pages/layout/newsList/newsList'
|
||||
}, {
|
||||
cn: '商品列表',
|
||||
en: 'PRODUCT LIST',
|
||||
src: 'goodslist',
|
||||
background: '#FFF4F7',
|
||||
page: '/pages/layout/productList/productList'
|
||||
}, {
|
||||
cn: '提交订单栏',
|
||||
en: 'SUBMIT BAR',
|
||||
src: 'submit',
|
||||
background: '#FFF8EF',
|
||||
page: '/pages/layout/submitBar/submitBar'
|
||||
}, {
|
||||
cn: '商品导航栏',
|
||||
en: 'GOODS BAR',
|
||||
src: 'commodity',
|
||||
background: '#F8F4FF',
|
||||
page: '/pages/layout/goodsBar/goodsBar'
|
||||
}, {
|
||||
cn: '聊天栏',
|
||||
en: 'CHAT BAR',
|
||||
src: 'chat',
|
||||
background: '#EDF9FF',
|
||||
page: '/pages/layout/chatBar/chatBar'
|
||||
}, {
|
||||
cn: '滚动消息',
|
||||
en: 'ROLL NEWS',
|
||||
src: 'roll',
|
||||
background: '#EAFFF6',
|
||||
page: '/pages/layout/rollNews/rollNews'
|
||||
}, {
|
||||
cn: '卡片轮播',
|
||||
en: 'CARD SWIPER',
|
||||
src: 'rotation',
|
||||
background: '#FFF4F7',
|
||||
page: '/pages/layout/cardSwiper/cardSwiper'
|
||||
}, {
|
||||
cn: '地图',
|
||||
en: 'MAP',
|
||||
src: 'map',
|
||||
background: '#FFF8EF',
|
||||
page: '/pages/layout/map/map'
|
||||
}, {
|
||||
cn: '横向滚动',
|
||||
en: 'ROLL HORIZONTAL',
|
||||
src: 'transverse',
|
||||
background: '#F8F4FF',
|
||||
page: '/pages/layout/rollHor/rollHor'
|
||||
}]
|
||||
129
pages/tabbar/layout/layout.vue
Normal file
129
pages/tabbar/layout/layout.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 0 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">布局 <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">常用的页面布局，可提升开发效率以及带来舒服的视觉效果！</view>
|
||||
</view>
|
||||
<view class="fui-page-bd fui-page__spacing">
|
||||
<view class="fui-layout__item" @tap="href(item.page)" v-for="(item,index) in layoutData" :key="index">
|
||||
<view class="fui-layout__item-inner">
|
||||
<view class="fui-cover__box fui-flex__center" :style="{background:item.background}">
|
||||
<image class="fui-cover" :src="`${resUrl}/layout/img_${item.src}_3x.png`" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="fui-name__cn">{{item.cn}}</view>
|
||||
<view class="fui-name__en">{{item.en}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layoutData from './index.js';
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: mapState(['status']),
|
||||
data() {
|
||||
return {
|
||||
layoutData: layoutData,
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef MP-BAIDU
|
||||
this.getStatus().then((res) => {})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getStatus']),
|
||||
href(page) {
|
||||
if (page) {
|
||||
// #ifdef MP-BAIDU
|
||||
if (this.status !== 1 && (~page.indexOf('waterfall') || ~page.indexOf('topTab'))) {
|
||||
this.fui.toast('开发中~')
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
this.fui.href(page)
|
||||
} else {
|
||||
this.fui.href('/pages/common/coding/coding')
|
||||
}
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'First UI组件库'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-page-bd {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fui-layout__item {
|
||||
width: 50%;
|
||||
margin-bottom: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-layout__item:nth-of-type(odd) {
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
|
||||
.fui-layout__item:nth-of-type(even) {
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.fui-layout__item-inner {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom: 32rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cover__box {
|
||||
width: 100%;
|
||||
height: 202rpx;
|
||||
}
|
||||
|
||||
.fui-cover {
|
||||
width: 164rpx;
|
||||
height: 118rpx;
|
||||
}
|
||||
|
||||
.fui-name__cn {
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
|
||||
.fui-name__en {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #B2B2B2;
|
||||
text-align: center;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
</style>
|
||||
286
pages/tabbar/my/my.vue
Normal file
286
pages/tabbar/my/my.vue
Normal file
@ -0,0 +1,286 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap fui-page__bd">
|
||||
<view class="fui-banner__box">
|
||||
<image class="fui-banner" :src="`${resUrl}/my/light/img_banner_3x.png`" mode="widthFix"></image>
|
||||
<view class="fui-vip__box fui-page__spacing">
|
||||
<view class="fui-mod__box">
|
||||
<image class="fui-vip__bg" :src="`${resUrl}/my/light/img_mod_bg.png`"></image>
|
||||
</view>
|
||||
<view class="fui-vip__btn fui-flex__center" @tap="href('/pages/my/vip/vip')">
|
||||
<!-- #ifdef MP-BAIDU || MP-QQ || MP-TOUTIAO -->
|
||||
{{status==0?'会员权益':'立即开通'}}
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-BAIDU || MP-QQ || MP-TOUTIAO -->
|
||||
立即开通
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-page__spacing">
|
||||
<view class="fui-menu__wrap fui-align__center">
|
||||
<view class="fui-menu__item" v-for="(item,index) in menus" :key="index" @click="href(item.page,$event)">
|
||||
<button open-type="feedback" class="fui-btn__feedback" v-if="index===2"></button>
|
||||
<view class="fui-menu__img fui-flex__center" :style="{background:item.background}">
|
||||
<image :src="`${resUrl}/my/light/icon_${item.src}_3x.png`" mode="widthFix"></image>
|
||||
</view>
|
||||
<text>{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-list__wrap">
|
||||
<fui-list-cell @click="href(item.page)" arrow bottomRight="32" v-for="(item,index) in list" :key="index">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" :src="`/static/images/my/light/icon_${item.src}_3x.png`"
|
||||
mode="widthFix"></image>
|
||||
<text class="fui-list__text" style="margin-right: -20rpx;">{{item.text}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
import $fui from '@/components/firstui/fui-clipboard';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resUrl: this.fui.resUrl(),
|
||||
menus: [{
|
||||
text: '分享好友',
|
||||
background: '#F2FCF6',
|
||||
src: 'share',
|
||||
page: '/pages/my/share/share'
|
||||
}, {
|
||||
text: '赞赏FirstUI',
|
||||
background: '#FFFBF2',
|
||||
src: 'appreciate',
|
||||
page: 'appreciate'
|
||||
}, {
|
||||
text: '意见反馈',
|
||||
background: '#F6F7FF',
|
||||
src: 'proposal',
|
||||
page: 'feedback'
|
||||
}, {
|
||||
text: '我要合作',
|
||||
background: '#FFF4F4',
|
||||
src: 'cooperation',
|
||||
page: '/pages/my/cooperate/cooperate'
|
||||
}],
|
||||
list: [{
|
||||
text: '功能介绍',
|
||||
src: 'edition',
|
||||
page: '/pages/my/updated/updated'
|
||||
}, {
|
||||
text: '开源地址',
|
||||
src: 'address',
|
||||
page: '/pages/my/website/website'
|
||||
}, {
|
||||
text: '帮助中心',
|
||||
src: 'help',
|
||||
page: '/pages/my/help/help'
|
||||
}, {
|
||||
text: '关于我们',
|
||||
src: 'aboutus',
|
||||
page: '/pages/my/about/about'
|
||||
}
|
||||
// #ifdef MP-WEIXIN
|
||||
, {
|
||||
text: '合作伙伴',
|
||||
src: 'partner',
|
||||
page: '/pages/my/partner/partner'
|
||||
}
|
||||
// #endif
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapState(['status']),
|
||||
onLoad() {
|
||||
// #ifdef MP
|
||||
this.getStatus().then((res) => {})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getStatus']),
|
||||
href(page, e) {
|
||||
if (page === 'appreciate') {
|
||||
let urls = `${this.resUrl}/common/img_wxpay.png`
|
||||
// #ifdef MP-ALIPAY
|
||||
urls = `${this.resUrl}/common/img_alipay.png`
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO || MP-BAIDU || MP-QQ
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('感谢您的支持，暂不支持此功能！')
|
||||
} else {
|
||||
uni.previewImage({
|
||||
urls: [urls]
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-TOUTIAO || MP-BAIDU || MP-QQ
|
||||
uni.previewImage({
|
||||
urls: [urls]
|
||||
});
|
||||
// #endif
|
||||
} else if (page === 'feedback') {
|
||||
let text = '复制 Issue 链接地址';
|
||||
|
||||
// #ifdef MP-TOUTIAO || MP-BAIDU
|
||||
//头条/百度文字length<=4
|
||||
text = '反馈链接';
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS || MP-WEIXIN || MP-QQ
|
||||
this.fui.modal('意见反馈', '在以任何形式的参与前，请先阅读文档开发指南。如有任何的意见或建议，欢迎您通过创建 Issue 的方式告知我们。', (res) => {
|
||||
if (res) {
|
||||
this.getLink('https://github.com/FirstUI/FirstUI/issues', e)
|
||||
}
|
||||
}, false, '', text)
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef MP-TOUTIAO || MP-BAIDU
|
||||
if (this.status == 0 && ~page.indexOf('share')) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
this.fui.href(page)
|
||||
}
|
||||
},
|
||||
getLink(link, e) {
|
||||
$fui.getClipboardData(link, res => {
|
||||
this.fui.toast('链接复制成功');
|
||||
}, e);
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'First UI组件库'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-banner__box {
|
||||
width: 100%;
|
||||
height: 512rpx;
|
||||
background: #EDF9FF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-banner {
|
||||
width: 100%;
|
||||
height: 512rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-vip__box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fui-mod__box {
|
||||
width: 100%;
|
||||
height: 124rpx;
|
||||
background: #31344D;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-vip__bg {
|
||||
width: 100%;
|
||||
height: 124rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-vip__btn {
|
||||
font-size: 28rpx;
|
||||
color: #FFD694;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 64rpx;
|
||||
top: 0;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-menu__wrap {
|
||||
height: 210rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
}
|
||||
|
||||
.fui-menu__item {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-menu__img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fui-menu__img image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-btn__feedback {
|
||||
background: transparent !important;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fui-btn__feedback::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.fui-list__wrap {
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.fui-list__text {
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
</style>
|
||||
62
pages/tabbar/template/index.js
Normal file
62
pages/tabbar/template/index.js
Normal file
@ -0,0 +1,62 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default [{
|
||||
cn: '商城',
|
||||
en: 'MALL',
|
||||
src: 'shopping_mall',
|
||||
background: '#FFF7E5',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '点餐',
|
||||
en: 'ORDER',
|
||||
src: 'order',
|
||||
background: '#FFF4F4',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '聊天',
|
||||
en: 'CHAT',
|
||||
src: 'chat',
|
||||
background: '#F2FCF6',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '短视频',
|
||||
en: 'SHORT VIDEO',
|
||||
src: 'short_video',
|
||||
background: '#FFF4F4',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '新闻',
|
||||
en: 'NEWS',
|
||||
src: 'journalism',
|
||||
background: '#F6F7FF',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '门户',
|
||||
en: 'PORTAL',
|
||||
src: 'gateway',
|
||||
background: '#F2FCF6',
|
||||
page: '/pages/nav/portal-nav/portal-nav'
|
||||
}, {
|
||||
cn: '登录',
|
||||
en: 'LOGIN',
|
||||
src: 'login',
|
||||
background: '#FFF7E5',
|
||||
page: '/pages/nav/login-nav/login-nav'
|
||||
}, {
|
||||
cn: '签到',
|
||||
en: 'SIGN IN',
|
||||
src: 'sign_in',
|
||||
background: '#F7F4FF',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '投票',
|
||||
en: 'VOTE',
|
||||
src: 'vote',
|
||||
background: '#FFF4F4',
|
||||
page: ''
|
||||
}, {
|
||||
cn: '教育',
|
||||
en: 'EDUCATION',
|
||||
src: 'education',
|
||||
background: '#F6F7FF',
|
||||
page: ''
|
||||
}]
|
||||
134
pages/tabbar/template/template.vue
Normal file
134
pages/tabbar/template/template.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 4 07 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center">模板库
|
||||
</view>
|
||||
<view class="fui-page__desc">常用模板，提升开发效率，付费模块。</view>
|
||||
</view>
|
||||
<view class="fui-page-bd fui-page__spacing">
|
||||
<view class="fui-template__item" @tap="href(item.page)" v-for="(item,index) in templateData" :key="index">
|
||||
<view class="fui-template__item-inner" :style="{background:item.background}">
|
||||
<image class="fui-icon" :src="`${resUrl}/template/light/icon_${item.src}_3x.png`"
|
||||
mode="widthFix"></image>
|
||||
<view class="fui-name__cn">{{item.cn}}</view>
|
||||
<view class="fui-name__en">{{item.en}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import templateData from './index.js';
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resUrl:this.fui.resUrl(),
|
||||
templateData: templateData
|
||||
}
|
||||
},
|
||||
computed: mapState(['status']),
|
||||
onLoad() {
|
||||
// #ifdef MP
|
||||
this.getStatus().then((res) => {})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getStatus']),
|
||||
href(page) {
|
||||
if (this.status == 1) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (page) {
|
||||
wx.navigateToMiniProgram({
|
||||
appId: 'wx2d7de1c876758f9c',
|
||||
path: page
|
||||
});
|
||||
} else {
|
||||
wx.navigateToMiniProgram({
|
||||
appId: 'wx2d7de1c876758f9c'
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.fui.modal('FirstUI示例', '请前往微信搜索 "FirstUI示例" 小程序预览')
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef MP
|
||||
this.fui.href('/pages/common/coding/coding')
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
this.fui.modal('First UI 示例', '请前往微信搜索 "FirstUI示例" 小程序预览')
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'First UI组件库'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-page-bd {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fui-template__item {
|
||||
width: 50%;
|
||||
margin-bottom: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-template__item:nth-of-type(odd) {
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
|
||||
.fui-template__item:nth-of-type(even) {
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.fui-template__item-inner {
|
||||
height: 176rpx;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 32rpx;
|
||||
}
|
||||
|
||||
.fui-name__cn {
|
||||
line-height: 32rpx;
|
||||
padding-top: 62rpx;
|
||||
}
|
||||
|
||||
.fui-name__en {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #B2B2B2;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user