feat: 首次提交
This commit is contained in:
peerless_hero
79
pages/component/basics/animation/animation.vue
Normal file
79
pages/component/basics/animation/animation.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Animation</view>
|
||||
<view class="fui-page__desc">Animation 动画，过渡效果。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<fui-button type="gray" btn-size="medium" text="Fade" bold :margin="['24rpx']"
|
||||
@click="ani(['fade'], true)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Slide Top" bold @click="ani(['slide-top'])">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Slide Left" bold :margin="['24rpx']"
|
||||
@click="ani(['slide-left'])">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Slide Right" bold @click="ani(['slide-right'])">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Slide Bottom" bold :margin="['24rpx']"
|
||||
@click="ani(['slide-bottom'])">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Zoom In" bold @click="ani(['zoom-in', 'fade'])">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Zoom Out" bold :margin="['24rpx']"
|
||||
@click="ani(['zoom-out', 'fade'])"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="Custom" bold
|
||||
@click="ani(['slide-left','slide-top','fade'])"></fui-button>
|
||||
</view>
|
||||
<fui-animation :duration="500" :animationType="mode" :styles="styles" :show="show" @click="handleClick"
|
||||
@change="change">
|
||||
<view class="fui-ani__box fui-flex__center">transition</view>
|
||||
</fui-animation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mode: ['fade'],
|
||||
styles: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ani(mode, mask) {
|
||||
if (mask) {
|
||||
this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0.6)');
|
||||
} else {
|
||||
this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0)');
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.mode = mode;
|
||||
this.show = !this.show;
|
||||
}, 80);
|
||||
},
|
||||
handleClick() {
|
||||
this.show = false;
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fui-ani__box{
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
background-color: #6831FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
60
pages/component/basics/button/button.vue
Normal file
60
pages/component/basics/button/button.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Button</view>
|
||||
<view class="fui-page__desc">Button 按钮，支持自定义大小、颜色等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">按钮类型</view>
|
||||
<fui-button text="默认按钮" @click="btnClick"></fui-button>
|
||||
<fui-button :margin="['24rpx']" type="success">success</fui-button>
|
||||
<fui-button type="warning">warning</fui-button>
|
||||
<fui-button :margin="['24rpx']" type="danger">danger</fui-button>
|
||||
<fui-button type="purple">purple</fui-button>
|
||||
<fui-button :margin="['24rpx']" type="link" color="#465CFF">链接 link</fui-button>
|
||||
<view class="fui-section__title">禁用状态</view>
|
||||
<fui-button disabled>禁用按钮</fui-button>
|
||||
<fui-button :margin="['24rpx']" disabled loading>禁用按钮</fui-button>
|
||||
<fui-button disabled disabledBackground="#F8F8F8" disabledColor="#CCCCCC">禁用按钮
|
||||
</fui-button>
|
||||
<view class="fui-section__title">按钮形状</view>
|
||||
<fui-button radius="0">方形按钮</fui-button>
|
||||
<fui-button radius="96rpx" :margin="['24rpx']">圆形按钮</fui-button>
|
||||
<view class="fui-section__title">按钮大小</view>
|
||||
<fui-button btn-size="medium">medium</fui-button>
|
||||
<fui-button type="warning" :margin="['24rpx']" btn-size="small">small</fui-button>
|
||||
<fui-button type="danger" btn-size="mini">mini</fui-button>
|
||||
<view class="fui-section__title">自定义按钮大小</view>
|
||||
<fui-button plain color="#465CFF" borderColor="#465CFF">默认大小</fui-button>
|
||||
<fui-button type="purple" :margin="['24rpx']" width="224rpx" height="84rpx" :size="28">小型按钮</fui-button>
|
||||
<fui-button type="danger" width="200rpx" height="72rpx" :size="28">小型按钮</fui-button>
|
||||
<view class="fui-section__title">自定义颜色</view>
|
||||
<fui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</fui-button>
|
||||
<fui-button :margin="['24rpx']" background="#fff" color="#6831FF" borderColor="#6831FF">朴素按钮</fui-button>
|
||||
<fui-button background="linear-gradient(300deg, #6831FF 0%, #465CFF 100%)" border-width="0">渐变按钮
|
||||
</fui-button>
|
||||
<fui-button :margin="['24rpx']" background="linear-gradient(127deg, #FF416C 0%, #FF2B2B 100%)"
|
||||
border-width="0">渐变按钮
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
this.fui.toast('click~')
|
||||
// console.log('click~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
118
pages/component/basics/color/color.js
Normal file
118
pages/component/basics/color/color.js
Normal file
@ -0,0 +1,118 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6140 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default [{
|
||||
text: '主色',
|
||||
key:'key_01',
|
||||
data: [{
|
||||
color: '#FFFFFF',
|
||||
text: '蓝色',
|
||||
value: '#465CFF'
|
||||
}]
|
||||
}, {
|
||||
text: '辅助色',
|
||||
key:'key_02',
|
||||
data: [{
|
||||
color: '#FFFFFF',
|
||||
text: '红色',
|
||||
value: '#FF2B2B'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '黄色',
|
||||
value: '#FFB703'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '紫色',
|
||||
value: '#6831FF'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '绿色',
|
||||
value: '#09BE4F'
|
||||
}]
|
||||
|
||||
}, {
|
||||
text: '字体颜色',
|
||||
key:'key_03',
|
||||
data: [{
|
||||
color: '#FFFFFF',
|
||||
text: '深黑色',
|
||||
value: '#181818'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '深灰色',
|
||||
value: '#333333'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '灰色',
|
||||
value: '#B2B2B2'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '浅灰色',
|
||||
value: '#CCCCCC'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '白色',
|
||||
value: '#FFFFFF'
|
||||
}]
|
||||
|
||||
}, {
|
||||
text: '背景色',
|
||||
key:'key_04',
|
||||
data: [{
|
||||
color: '#181818',
|
||||
text: '浅蓝',
|
||||
value: '#F1F4FA'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '白色',
|
||||
value: '#FFFFFF'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '灰色',
|
||||
value: '#F8F8F8'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '红色 5%',
|
||||
value: 'rgba(255, 43, 43, .05)'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '黄色 10%',
|
||||
value: 'rgba(255, 183, 3, .1)'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '紫色 5%',
|
||||
value: 'rgba(104, 49, 255, .05)'
|
||||
}, {
|
||||
color: '#181818',
|
||||
text: '绿色 5%',
|
||||
value: 'rgba(9, 190, 79, .05)'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '黑色 60%',
|
||||
value: 'rgba(0, 0, 0, 0.6)'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '黑色 20%',
|
||||
value: 'rgba(0, 0, 0, 0.2)'
|
||||
}]
|
||||
}, {
|
||||
text: '边框颜色',
|
||||
key:'key_05',
|
||||
data: [{
|
||||
color: '#181818',
|
||||
text: '灰色',
|
||||
value: '#EEEEEE'
|
||||
}]
|
||||
}, {
|
||||
text: '渐变色',
|
||||
key:'key_06',
|
||||
data: [{
|
||||
color: '#FFFFFF',
|
||||
text: '渐变色',
|
||||
value: '#465CFF #6831FF',
|
||||
gradual: 'linear-gradient(90deg, #465CFF 0%, #6831FF 100%)'
|
||||
}, {
|
||||
color: '#FFFFFF',
|
||||
text: '渐变色',
|
||||
value: '#FD8C8C #FF2B2B',
|
||||
gradual: 'linear-gradient(90deg, #FD8C8C 0%, #FF2B2B 100%)'
|
||||
}]
|
||||
}]
|
||||
72
pages/component/basics/color/color.vue
Normal file
72
pages/component/basics/color/color.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Color</view>
|
||||
<view class="fui-page__desc">Color 色彩，First UI用色指南。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<block v-for="(item,index) in colors" :key="item.key">
|
||||
<view class="fui-section__title">{{item.text}}</view>
|
||||
<view @tap="getColor($event,model.gradual || model.value)" v-for="(model,idx) in item.data" :key="idx"
|
||||
class="fui-color__item fui-page__spacing fui-align__center"
|
||||
:style="{background:model.gradual || model.value,color:model.color}">
|
||||
<text>{{model.text}}</text>
|
||||
<text>{{model.value}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef MP-BAIDU
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
// #endif
|
||||
import colors from './color.js';
|
||||
import $fui from '@/components/firstui/fui-clipboard';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
colors: colors
|
||||
}
|
||||
},
|
||||
// #ifdef MP-BAIDU
|
||||
computed: mapState(['status']),
|
||||
// #endif
|
||||
methods: {
|
||||
getColor(e, color) {
|
||||
// #ifdef MP-BAIDU
|
||||
if (this.status == 1) {
|
||||
$fui.getClipboardData(color, res => {
|
||||
this.fui.toast('颜色复制成功');
|
||||
}, e);
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-BAIDU
|
||||
$fui.getClipboardData(color, res => {
|
||||
this.fui.toast('颜色复制成功');
|
||||
}, e);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-color__item {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
height: 84rpx;
|
||||
border-radius: 42px;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
42
pages/component/basics/footer/footer.vue
Normal file
42
pages/component/basics/footer/footer.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 4 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Footer</view>
|
||||
<view class="fui-page__desc">Footer 页脚。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-footer text="Copyright © 2021 firstui.cn"></fui-footer>
|
||||
<fui-footer :navigate="navigate" text="Copyright © 2021 firstui.cn"></fui-footer>
|
||||
<fui-footer :navigate="navigate2" text="Copyright © 2021 firstui.cn"></fui-footer>
|
||||
<fui-footer isFixed :navigate="navigate" text="Copyright © 2021 firstui.cn"></fui-footer>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navigate: [{
|
||||
text: '底部链接',
|
||||
openType: 'navigateBack'
|
||||
}],
|
||||
navigate2: [{
|
||||
text: '底部链接',
|
||||
openType: 'navigateBack'
|
||||
}, {
|
||||
text: '底部链接',
|
||||
openType: 'navigateBack'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
168
pages/component/basics/icon/icon.js
Normal file
168
pages/component/basics/icon/icon.js
Normal file
@ -0,0 +1,168 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default [
|
||||
"addfriends",
|
||||
"addfriends-fill",
|
||||
"backspace",
|
||||
"backspace-fill",
|
||||
"bankcard",
|
||||
"bankcard-fill",
|
||||
"camera",
|
||||
"camera-fill",
|
||||
"captcha",
|
||||
"captcha-fill",
|
||||
"cart",
|
||||
"cart-fill",
|
||||
"classify",
|
||||
"classify-fill",
|
||||
"comment",
|
||||
"comment-fill",
|
||||
"community",
|
||||
"community-fill",
|
||||
"coupon",
|
||||
"coupon-fill",
|
||||
"delete",
|
||||
"delete-fill",
|
||||
"edit",
|
||||
"edit-fill",
|
||||
"fabulous",
|
||||
"fabulous-fill",
|
||||
"find",
|
||||
"find-fill",
|
||||
"help",
|
||||
"help-fill",
|
||||
"home",
|
||||
"home-fill",
|
||||
"idcard",
|
||||
"idcard-fill",
|
||||
"info",
|
||||
"info-fill",
|
||||
"invite",
|
||||
"invite-fill",
|
||||
"kefu",
|
||||
"kefu-fill",
|
||||
"like",
|
||||
"like-fill",
|
||||
"location",
|
||||
"location-fill",
|
||||
"lock",
|
||||
"lock-fill",
|
||||
"mail",
|
||||
"mail-fill",
|
||||
"message",
|
||||
"message-fill",
|
||||
"mobile",
|
||||
"mobile-fill",
|
||||
"more",
|
||||
"more-fill",
|
||||
"my",
|
||||
"my-fill",
|
||||
"notice",
|
||||
"notice-fill",
|
||||
"order",
|
||||
"order-fill",
|
||||
"picture",
|
||||
"picture-fill",
|
||||
"setup",
|
||||
"setup-fill",
|
||||
"share",
|
||||
"share-fill",
|
||||
"shop",
|
||||
"shop-fill",
|
||||
"star",
|
||||
"starhalf",
|
||||
"star-fill",
|
||||
"stepon",
|
||||
"stepon-fill",
|
||||
"wait",
|
||||
"wait-fill",
|
||||
"warning",
|
||||
"warning-fill",
|
||||
"plus",
|
||||
"plussign",
|
||||
"plussign-fill",
|
||||
"minus",
|
||||
"minussign",
|
||||
"minussign-fill",
|
||||
"close",
|
||||
"clear",
|
||||
"clear-fill",
|
||||
"checkbox-fill",
|
||||
"checkround",
|
||||
"checkbox",
|
||||
"check",
|
||||
"pulldown-fill",
|
||||
"pullup",
|
||||
"pullup-fill",
|
||||
"pulldown",
|
||||
"roundright-fill",
|
||||
"roundright",
|
||||
"arrowright",
|
||||
"arrowleft",
|
||||
"arrowdown",
|
||||
"left",
|
||||
"up",
|
||||
"right",
|
||||
"back",
|
||||
"top",
|
||||
"dropdown",
|
||||
"turningleft",
|
||||
"turningup",
|
||||
"turningright",
|
||||
"turningdown",
|
||||
"refresh",
|
||||
"loading",
|
||||
"search",
|
||||
"rotate",
|
||||
"screen",
|
||||
"signin",
|
||||
"calendar",
|
||||
"scan",
|
||||
"qrcode",
|
||||
"wallet",
|
||||
"telephone",
|
||||
"visible",
|
||||
"invisible",
|
||||
"menu",
|
||||
"operate",
|
||||
"slide",
|
||||
"list",
|
||||
"nonetwork",
|
||||
"partake",
|
||||
"qa",
|
||||
"barchart",
|
||||
"piechart",
|
||||
"linechart",
|
||||
"at",
|
||||
"face",
|
||||
"redpacket",
|
||||
"suspend",
|
||||
"link",
|
||||
"keyboard",
|
||||
"play",
|
||||
"video",
|
||||
"voice",
|
||||
"addressbook",
|
||||
"principal",
|
||||
"sina",
|
||||
"browser",
|
||||
"moments",
|
||||
"qq",
|
||||
"wechat",
|
||||
"balance",
|
||||
"bankcardpay",
|
||||
"wxpay",
|
||||
"alipay",
|
||||
"payment",
|
||||
"receive",
|
||||
"sendout",
|
||||
"evaluate",
|
||||
"aftersale",
|
||||
"warehouse",
|
||||
"transport",
|
||||
"delivery",
|
||||
"switch",
|
||||
"goods",
|
||||
"goods-fill",
|
||||
"",
|
||||
""
|
||||
]
|
||||
87
pages/component/basics/icon/icon.vue
Normal file
87
pages/component/basics/icon/icon.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 40 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Icon</view>
|
||||
<view class="fui-page__desc">Icon 图标，First UI字体图标库，可自行扩展。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<fui-grid :columns="3" @click="getName">
|
||||
<fui-grid-item v-for="(item, index) in icons" :highlight="item!=''" :index="index" :key="index">
|
||||
<view class="fui-icon__item">
|
||||
<fui-icon :name="item"></fui-icon>
|
||||
<text class="fui-icon__name">{{ item }}</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef MP-BAIDU
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
// #endif
|
||||
import icons from './icon.js';
|
||||
import $fui from '@/components/firstui/fui-clipboard';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: icons
|
||||
}
|
||||
},
|
||||
// #ifdef MP-BAIDU
|
||||
computed: mapState(['status']),
|
||||
// #endif
|
||||
methods: {
|
||||
getName(e) {
|
||||
const name = this.icons[e.detail.index]
|
||||
if (!name) return;
|
||||
// #ifdef MP-BAIDU
|
||||
if (this.status == 1) {
|
||||
$fui.getClipboardData(name, res => {
|
||||
this.fui.toast('图标名称复制成功');
|
||||
}, e);
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-BAIDU
|
||||
$fui.getClipboardData(name, res => {
|
||||
this.fui.toast('图标名称复制成功');
|
||||
}, e);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 头条小程序组件内不能引入字体 */
|
||||
/* #ifdef MP-TOUTIAO */
|
||||
@font-face {
|
||||
font-family: 'fuiFont';
|
||||
src: url("~@/components/firstui/fui-icon/fui-icon.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-icon__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-icon__name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
</style>
|
||||
55
pages/component/basics/text/text.vue
Normal file
55
pages/component/basics/text/text.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Text</view>
|
||||
<view class="fui-page__desc">Text 文本，用于包裹文本内容。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-text :text="text" :size="28"></fui-text>
|
||||
<view class="fui-section__title">不同样式类型</view>
|
||||
<fui-text text="primary" type="primary"></fui-text>
|
||||
<fui-text text="success" type="success"></fui-text>
|
||||
<fui-text text="warning" type="warning"></fui-text>
|
||||
<fui-text text="danger" type="danger"></fui-text>
|
||||
<fui-text text="purple" type="purple"></fui-text>
|
||||
<fui-text text="gray" type="gray"></fui-text>
|
||||
<fui-text text="black" type="black"></fui-text>
|
||||
<view class="fui-section__title">块状 | 自定义颜色</view>
|
||||
<fui-text text="block" color="brown" block></fui-text>
|
||||
<fui-text text="yellow" color="yellow" block></fui-text>
|
||||
<view class="fui-section__title">数据脱敏-姓名</view>
|
||||
<fui-text text="张三" text-type="name" format block></fui-text>
|
||||
<fui-text text="王小仙" text-type="name" format block></fui-text>
|
||||
<view class="fui-section__title">数据脱敏-手机号</view>
|
||||
<fui-text text="13544339908" text-type="mobile" format></fui-text>
|
||||
<view class="fui-section__title">金额格式化</view>
|
||||
<fui-text text="20000" text-type="amount" format>￥</fui-text>
|
||||
<view class="fui-section__title">点击效果</view>
|
||||
<fui-text text="https://firstui.cn" highlight @click="handleClick"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast('点击了~');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 96rpx;
|
||||
}
|
||||
</style>
|
||||
111
pages/component/canvas/autograph/autograph.vue
Normal file
111
pages/component/canvas/autograph/autograph.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Autograph <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Autograph 手写签名，用于手写电子签名。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">请在下方空白处签名</view>
|
||||
<fui-autograph ref="autograph" @ready="ready"></fui-autograph>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="重签" bold :margin="['64rpx','0','24rpx']"
|
||||
@click="redraw">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="完成" bold @click="complete">
|
||||
</fui-button>
|
||||
</view>
|
||||
<view class="fui-autograph__box">
|
||||
<text class="fui-text">您的签名：</text>
|
||||
<image :src="src" v-if="src" mode="widthFix" class="fui-img" @tap="preview"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvasId: '',
|
||||
src: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
ready(e) {
|
||||
// #ifdef MP-TOUTIAO
|
||||
//仅允许边缘滑动返回
|
||||
// tt.setSwipeBackMode(2);
|
||||
// #endif
|
||||
this.canvasId = e.canvasId
|
||||
},
|
||||
redraw() {
|
||||
if (!this.canvasId) return;
|
||||
this.src = '';
|
||||
this.$refs.autograph.redraw()
|
||||
},
|
||||
complete() {
|
||||
if (!this.canvasId || this.src) return;
|
||||
this.$refs.autograph.drawComplete((res) => {
|
||||
//res为签名图片
|
||||
this.src = res;
|
||||
})
|
||||
},
|
||||
preview() {
|
||||
if (!this.src) return;
|
||||
/*百度小程序只支持打开网络路径，不支持本地临时路径*/
|
||||
// #ifndef MP-BAIDU
|
||||
uni.previewImage({
|
||||
// #ifdef MP-ALIPAY
|
||||
enablesavephoto: true,
|
||||
enableShowPhotoDownload: true,
|
||||
// #endif
|
||||
urls: [this.src]
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-autograph__box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 24rpx;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
.fui-img {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
75
pages/component/canvas/barcode/barcode.vue
Normal file
75
pages/component/canvas/barcode/barcode.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 40 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Barcode <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Barcode 条形码，用于展现条形码信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-input__box">
|
||||
<fui-input v-model="val" maxlength="13" type="number"></fui-input>
|
||||
<view class="fui-tips">请输入13位条码信息，扫描只能识别有效的条形码。</view>
|
||||
</view>
|
||||
<fui-button type="gray" btn-size="medium" text="生成" bold :margin="['32rpx','0','64rpx']"
|
||||
@click="barcode">
|
||||
</fui-button>
|
||||
<fui-barcode ref="barcode" :value="val"></fui-barcode>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: '6937147252044'
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.barcode()
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
barcode() {
|
||||
//输入框如果type=number 则返回的是Number类型值
|
||||
if (String(this.val).length === 13) {
|
||||
this.$refs.barcode.draw()
|
||||
} else {
|
||||
this.fui.toast('请输入13位条形码！')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-input__box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fui-tips {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #7F7F7F;
|
||||
font-weight: 400;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
434
pages/component/canvas/poster/poster.vue
Normal file
434
pages/component/canvas/poster/poster.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Poster <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Poster 分享海报 ，传入JSON数据生成海报。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基本使用" bold :margin="['24rpx']"
|
||||
@click="poster(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="生成商品海报" bold @click="poster(2)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="First UI分享海报" bold :margin="['24rpx']"
|
||||
@click="share"></fui-button>
|
||||
</view>
|
||||
<fui-poster ref="generator" :width="560" :height="980" @ready="ready"></fui-poster>
|
||||
|
||||
<!-- #ifdef MP-BAIDU-->
|
||||
<fui-animation :duration="500" :animationType="['fade']" :styles="styles" :show="show" @click="handleClick">
|
||||
<view class="fui-ani__box">
|
||||
<image class="fui-poster__img" :src="showFilePath" mode="widthFix"></image>
|
||||
<view class="fui-flex__center">
|
||||
<fui-button type="purple" btn-size="medium" radius="100rpx" @click="saveImage">保存到相册
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</fui-animation>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
//注意：头条小程序颜色值不支持简写如：#333，必须写成：#333333
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isReady: false,
|
||||
//基本使用案例数据
|
||||
basicData: {
|
||||
blocks: [{
|
||||
//背景
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 980,
|
||||
backgroundColor: '#ffffff'
|
||||
}, {
|
||||
//带圆角
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//渐变背景
|
||||
x: 140,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 200,
|
||||
backgroundColor: '#FF2B2B',
|
||||
gradientColor: '#6831FF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//带边框
|
||||
x: 260,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderWidth: 1,
|
||||
borderColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}, {
|
||||
//圆形
|
||||
x: 380,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 100,
|
||||
backgroundColor: '#465CFF',
|
||||
zIndex: 2
|
||||
}],
|
||||
imgs: [{
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 20,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
zIndex: 2
|
||||
}, {
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 140,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 16,
|
||||
zIndex: 2
|
||||
}, {
|
||||
imgResource: '/static/images/common/img_logo.png',
|
||||
x: 260,
|
||||
y: 260,
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 100,
|
||||
zIndex: 2
|
||||
}],
|
||||
texts: [{
|
||||
text: 'First UI',
|
||||
x: 20,
|
||||
y: 420,
|
||||
fontSize: 32,
|
||||
color: '#181818',
|
||||
width: 520,
|
||||
fontWeight: 'bold',
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
x: 20,
|
||||
y: 460,
|
||||
fontSize: 20,
|
||||
color: '#181818',
|
||||
width: 496,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
x: 20,
|
||||
y: 520,
|
||||
fontSize: 20,
|
||||
lineHeight: 32,
|
||||
color: '#B2B2B2',
|
||||
width: 496,
|
||||
rows: 2,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '此段文字作废',
|
||||
x: 20,
|
||||
y: 620,
|
||||
fontSize: 22,
|
||||
color: '#B2B2B2',
|
||||
width: 500,
|
||||
lineThrough: true,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'End!',
|
||||
x: 20,
|
||||
y: 916,
|
||||
fontSize: 44,
|
||||
color: '#465CFF',
|
||||
width: 500,
|
||||
fontWeight: 'bold',
|
||||
zIndex: 6
|
||||
}],
|
||||
lines: [{
|
||||
x: 20,
|
||||
y: 660,
|
||||
endX: 220,
|
||||
endY: 660,
|
||||
color: '#181818',
|
||||
width: 1,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 700,
|
||||
endX: 240,
|
||||
endY: 700,
|
||||
color: '#09BE4F',
|
||||
width: 4,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 740,
|
||||
endX: 240,
|
||||
endY: 780,
|
||||
color: '#6831FF',
|
||||
width: 4,
|
||||
zIndex: 4
|
||||
}, {
|
||||
x: 20,
|
||||
y: 780,
|
||||
endX: 240,
|
||||
endY: 740,
|
||||
color: '#FFB703',
|
||||
width: 4,
|
||||
zIndex: 5
|
||||
}, {
|
||||
x: 20,
|
||||
y: 820,
|
||||
endX: 520,
|
||||
endY: 820,
|
||||
color: '#465CFF',
|
||||
width: 4,
|
||||
zIndex: 5
|
||||
}]
|
||||
},
|
||||
//商品海报数据
|
||||
goodsData: {
|
||||
blocks: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 980,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 40
|
||||
}, {
|
||||
x: 56,
|
||||
y: 128,
|
||||
width: 448,
|
||||
height: 648,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 24,
|
||||
zIndex: 2
|
||||
}],
|
||||
imgs: [{
|
||||
imgResource: '/static/images/component/img_bg_poster.png',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 560,
|
||||
height: 800,
|
||||
zIndex: 1
|
||||
}, {
|
||||
imgResource: '/static/images/component/img_goods_3x.jpg',
|
||||
x: 56,
|
||||
y: 128,
|
||||
width: 448,
|
||||
height: 448,
|
||||
borderRadius: 24,
|
||||
zIndex: 3
|
||||
}, {
|
||||
imgResource: '/static/images/qrcode/wx_qrcode.jpg',
|
||||
x: 378,
|
||||
y: 822,
|
||||
width: 136,
|
||||
height: 136,
|
||||
zIndex: 2
|
||||
}],
|
||||
texts: [{
|
||||
text: '满赠促销 满50件送赠品',
|
||||
x: 280,
|
||||
y: 68,
|
||||
fontSize: 38,
|
||||
color: '#FFFFFF',
|
||||
width: 400,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '活动时间: 7月2日-7月20日',
|
||||
x: 280,
|
||||
y: 104,
|
||||
fontSize: 22,
|
||||
color: '#FFFFFF',
|
||||
width: 260,
|
||||
textAlign: 'center',
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '三奇医疗 3Q一次性医用外科口罩透气轻薄成人3层医用口罩 1袋10只',
|
||||
x: 85,
|
||||
y: 620,
|
||||
fontSize: 24,
|
||||
lineHeight: 36,
|
||||
color: '#333333',
|
||||
width: 380,
|
||||
rows: 2,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '热销商品 每满1000减90！',
|
||||
x: 85,
|
||||
y: 696,
|
||||
fontSize: 18,
|
||||
color: '#999999',
|
||||
fontWeight: 'normal',
|
||||
width: 388,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '￥7.00',
|
||||
x: 84,
|
||||
y: 746,
|
||||
fontSize: 32,
|
||||
color: '#FF2B2B',
|
||||
width: 200,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: '￥12.00',
|
||||
x: 84,
|
||||
y: 746,
|
||||
fontSize: 20,
|
||||
color: '#999999',
|
||||
width: 200,
|
||||
lineThrough: true,
|
||||
frontText: '￥7.00',
|
||||
frontSize: 32,
|
||||
spacing: 12,
|
||||
zIndex: 3
|
||||
}, {
|
||||
text: 'First UI 商城小程序',
|
||||
x: 50,
|
||||
y: 870,
|
||||
fontSize: 30,
|
||||
color: '#333333',
|
||||
width: 290,
|
||||
zIndex: 2
|
||||
}, {
|
||||
text: '长按识别 购好物',
|
||||
x: 50,
|
||||
y: 922,
|
||||
fontSize: 24,
|
||||
color: '#666666',
|
||||
width: 180,
|
||||
zIndex: 2
|
||||
}]
|
||||
},
|
||||
//海报绘制完成保存路径，避免重复绘制
|
||||
filePath: '',
|
||||
goodsFilePath: '',
|
||||
showFilePath: '',
|
||||
show: false,
|
||||
styles: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: 'flex',
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapState(['status']),
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
ready() {
|
||||
this.isReady = true;
|
||||
},
|
||||
previewImage() {
|
||||
/*百度小程序只支持打开网络路径，不支持本地临时路径*/
|
||||
// #ifndef MP-BAIDU
|
||||
uni.previewImage({
|
||||
// #ifdef MP-ALIPAY
|
||||
enablesavephoto: true,
|
||||
enableShowPhotoDownload: true,
|
||||
// #endif
|
||||
urls: [this.showFilePath]
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 50)
|
||||
// #endif
|
||||
},
|
||||
poster(type) {
|
||||
if (this.isReady) {
|
||||
//已经绘制直接使用，避免重复绘制
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
this.showFilePath = type === 1 ? this.filePath : this.goodsFilePath;
|
||||
if (this.showFilePath) {
|
||||
this.previewImage()
|
||||
} else {
|
||||
//绘制海报
|
||||
uni.showLoading({
|
||||
title: '正在生成...'
|
||||
})
|
||||
this.$refs.generator.generatePoster(type === 1 ? this.basicData : this.goodsData, (res) => {
|
||||
//海报图片res
|
||||
console.log(res)
|
||||
this.showFilePath = res;
|
||||
if (type === 1) {
|
||||
this.filePath = res;
|
||||
} else {
|
||||
this.goodsFilePath = res
|
||||
}
|
||||
this.previewImage()
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
this.fui.toast('组件尚未初始化完成！')
|
||||
}
|
||||
},
|
||||
share() {
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
this.fui.href("/pages/my/share/share")
|
||||
},
|
||||
handleClick() {
|
||||
this.show = false;
|
||||
},
|
||||
saveImage() {
|
||||
this.$refs.generator.saveImage(this.filePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-ani__box {
|
||||
width: 580rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.fui-poster__img {
|
||||
width: 100%;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
62
pages/component/canvas/qrcode/qrcode.vue
Normal file
62
pages/component/canvas/qrcode/qrcode.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 40 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Qrcode <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Qrcode 二维码，主要用于存储网址、名片、文本信息、特定代码等信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-textarea__box">
|
||||
<fui-textarea v-model="val"></fui-textarea>
|
||||
</view>
|
||||
<fui-button type="gray" btn-size="medium" text="生成" bold :margin="['32rpx','0','64rpx']"
|
||||
@click="qrcode">
|
||||
</fui-button>
|
||||
<fui-qrcode :value="value" @ready="ready"></fui-qrcode>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: 'https://doc.firstui.cn',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.value = this.val
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
qrcode() {
|
||||
this.value = this.val
|
||||
},
|
||||
ready(e){
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-textarea__box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
79
pages/component/data/alert/alert.vue
Normal file
79
pages/component/data/alert/alert.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Alert</view>
|
||||
<view class="fui-page__desc">Alert 警告框。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-alert title="An info alert"></fui-alert>
|
||||
<fui-alert type="success" isLeft title="An success alert" :marginTop="24"></fui-alert>
|
||||
<fui-alert type="warn" isLeft title="An warn alert" :marginTop="24"></fui-alert>
|
||||
<fui-alert type="clear" isLeft title="An error alert" :marginTop="24"></fui-alert>
|
||||
<fui-alert isLeft title="An info alert" desc="Content of alert. Content of alert." :marginTop="24">
|
||||
</fui-alert>
|
||||
<fui-alert type="clear" isLeft title="An error alert" desc="Content of alert. Content of alert."
|
||||
:marginTop="24">
|
||||
</fui-alert>
|
||||
<fui-alert type="warn" isLeft title="An warn alert" desc="Content of alert. Content of alert."
|
||||
:marginTop="24">
|
||||
</fui-alert>
|
||||
<fui-alert type="success" title="An warn alert" desc="Content of alert. Content of alert." :marginTop="24">
|
||||
</fui-alert>
|
||||
<fui-alert type="info" title="An info alert" :marginTop="24"></fui-alert>
|
||||
<fui-alert type="clear" title="An success alert" :marginTop="24"></fui-alert>
|
||||
<fui-alert type="warn" title="An warn alert" :marginTop="24"></fui-alert>
|
||||
<view class="fui-section__title" v-if="show || shown">可关闭</view>
|
||||
<fui-alert closable title="An info alert" v-if="show" @close="close"></fui-alert>
|
||||
<fui-alert type="success" closable title="An info alert"
|
||||
desc="Content of alert. Content of alert.Content of alert." v-if="shown" @close="close2"
|
||||
:marginTop="24"></fui-alert>
|
||||
<view class="fui-section__title">自定义图标</view>
|
||||
<fui-alert type="info" isLeft spacing title="An info alert" size="28rpx">
|
||||
<fui-icon name="info" :size="48" color="#fff"></fui-icon>
|
||||
</fui-alert>
|
||||
<fui-alert type="success" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
|
||||
<fui-icon name="checkbox" :size="48" color="#fff"></fui-icon>
|
||||
</fui-alert>
|
||||
<fui-alert type="warn" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
|
||||
<fui-icon name="warning" :size="48" color="#fff"></fui-icon>
|
||||
</fui-alert>
|
||||
<fui-alert type="clear" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
|
||||
<fui-icon name="clear" :size="48" color="#fff"></fui-icon>
|
||||
</fui-alert>
|
||||
<view class="fui-section__title">自定义颜色</view>
|
||||
<fui-alert type="clear" iconColor="#FF2B2B" background="#fff" color="#181818" title="An info alert">
|
||||
</fui-alert>
|
||||
<fui-alert type="success" iconColor="#09BE4F" background="#fff" color="#181818" title="An info alert"
|
||||
:marginTop="24"></fui-alert>
|
||||
<fui-alert type="warn" iconColor="#FFB703" background="#fff" color="#181818" title="An info alert"
|
||||
:marginTop="24"></fui-alert>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
shown: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
close2() {
|
||||
this.shown = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
60
pages/component/data/avatar/avatar.vue
Normal file
60
pages/component/data/avatar/avatar.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Avatar</view>
|
||||
<view class="fui-page__desc">Avatar 头像，用图标、图片或者字符的形式展示用户或事物信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-avatar size="small" text="A"></fui-avatar>
|
||||
<fui-avatar text="B"></fui-avatar>
|
||||
<fui-avatar size="large" text="丁"></fui-avatar>
|
||||
<fui-avatar text="刘" background="#FFB703"></fui-avatar>
|
||||
<fui-avatar size="small" text="邹" background="#465CFF"></fui-avatar>
|
||||
<view class="fui-section__title">改变圆角值</view>
|
||||
<fui-avatar size="small" text="A" shape="square" marginRight="24"></fui-avatar>
|
||||
<fui-avatar text="B" shape="square" marginRight="24"></fui-avatar>
|
||||
<fui-avatar size="large" text="丁" radius="30" marginRight="24"></fui-avatar>
|
||||
<fui-avatar text="刘" background="#FFB703" radius="30" marginRight="24"></fui-avatar>
|
||||
<fui-avatar size="small" text="邹" background="#465CFF" radius="0"></fui-avatar>
|
||||
<view class="fui-section__title">使用图片</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-avatar size="small" src="/static/images/common/img_logo.png" shape="square"></fui-avatar>
|
||||
<fui-avatar src="/static/images/common/img_logo.png" radius="0"></fui-avatar>
|
||||
<fui-avatar size="large" src="/static/images/common/img_logo.png" radius="30"></fui-avatar>
|
||||
<fui-avatar src="/static/images/common/img_logo.png"></fui-avatar>
|
||||
<fui-avatar size="small" src="/static/images/common/img_logo.png"></fui-avatar>
|
||||
</view>
|
||||
<view class="fui-section__title">自定义图标</view>
|
||||
<fui-avatar marginRight="24">
|
||||
<fui-icon name="my" color="#fff"></fui-icon>
|
||||
</fui-avatar>
|
||||
<fui-avatar>
|
||||
<fui-icon name="my-fill" color="#fff"></fui-icon>
|
||||
</fui-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background-color: #fff;
|
||||
}
|
||||
.fui-wrap{
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
118
pages/component/data/badge/badge.vue
Normal file
118
pages/component/data/badge/badge.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Badge</view>
|
||||
<view class="fui-page__desc">Badge 徽章，可自定义颜色。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<fui-badge value="1"></fui-badge>
|
||||
<fui-badge type="success" value="2"></fui-badge>
|
||||
<fui-badge type="warning" value="3"></fui-badge>
|
||||
<fui-badge type="danger" value="4"></fui-badge>
|
||||
<fui-badge type="purple" value="5"></fui-badge>
|
||||
<fui-badge value="6" background="#eee" color="#333"></fui-badge>
|
||||
<fui-badge dot></fui-badge>
|
||||
<fui-badge type="success" dot></fui-badge>
|
||||
<fui-badge type="warning" dot></fui-badge>
|
||||
<fui-badge type="danger" dot></fui-badge>
|
||||
<fui-badge type="purple" dot></fui-badge>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">新消息</view>
|
||||
<fui-list-cell arrow topBorder>
|
||||
<view class="fui-list__item">
|
||||
<text>单行列表</text>
|
||||
<fui-badge value="1" type="danger"></fui-badge>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow>
|
||||
<view class="fui-list__item">
|
||||
<text>单行列表</text>
|
||||
<fui-badge dot type="danger"></fui-badge>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow>
|
||||
<view class="fui-align__center">
|
||||
<text>单行列表</text>
|
||||
<fui-badge type="danger" :marginLeft="16" value="8"></fui-badge>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow :bottomLeft="0">
|
||||
<view class="fui-align__center">
|
||||
<text>单行列表</text>
|
||||
<fui-badge type="danger" :marginLeft="16" value="new"></fui-badge>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">新消息、绝对定位</view>
|
||||
<fui-list-cell topBorder>
|
||||
<view class="fui-align__center">
|
||||
<view class="fui-item__img-box">
|
||||
<image class="fui-item__img" src="/static/images/common/icon_tabbar_3x.png" mode="widthFix">
|
||||
</image>
|
||||
<fui-badge absolute type="danger" :value="200" :max="99"></fui-badge>
|
||||
</view>
|
||||
<view>
|
||||
<view>联系人名称</view>
|
||||
<text class="fui-page__desc">摘要信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :bottomLeft="0">
|
||||
<view class="fui-align__center">
|
||||
<view class="fui-item__img-box">
|
||||
<image class="fui-item__img" src="/static/images/common/icon_tabbar_3x.png" mode="widthFix">
|
||||
</image>
|
||||
<fui-badge absolute type="danger" dot></fui-badge>
|
||||
</view>
|
||||
<view>
|
||||
<view>联系人名称</view>
|
||||
<text class="fui-page__desc">摘要信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-item__img-box {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.fui-item__img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
47
pages/component/data/circle/circle.vue
Normal file
47
pages/component/data/circle/circle.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Circle <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Circle 圆形进度条，用于展现某个任务的当前进度。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-circle :percent="80"></fui-circle>
|
||||
<view class="fui-section__title">调整样式/起始弧度/渐变</view>
|
||||
<!-- 快手小程序暂不支持渐变 -->
|
||||
<!--注意：头条小程序不支持颜色值简写 如：#EEEEEE 不可写成 #eee-->
|
||||
<fui-circle :percent="75" color="#FFB703" background="#EEEEEE" foreground="#FFB703" gradient="#FAE845"
|
||||
:sAngle="-0.5" :width="200" :strokeWidth="6" :size="16"></fui-circle>
|
||||
<view class="fui-section__title">调整百分比</view>
|
||||
<fui-circle :percent="percent"></fui-circle>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="percent" bold :margin="['24rpx']"
|
||||
@click="percentChange"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percent: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
percentChange() {
|
||||
let percent = this.percent + 25
|
||||
this.percent = percent > 100 ? 25 : percent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
159
pages/component/data/collapse/collapse.vue
Normal file
159
pages/component/data/collapse/collapse.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 40 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Collapse</view>
|
||||
<view class="fui-page__desc">Collapse 折叠面板，可以折叠/展开的内容区域。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<!--fui-collapse-item可单独使用 @change事件仅无父组件fui-collapse时生效-->
|
||||
<fui-collapse-item @change="change">
|
||||
<view class="fui-item__box">
|
||||
<image src="/static/images/common/logo.png" class="fui-logo"></image>
|
||||
<text>First UI</text>
|
||||
</view>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr">First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
<view class="fui-section__title">默认展开</view>
|
||||
<fui-collapse @change="change">
|
||||
<fui-collapse-item :index="index" :open="item.isOpen" v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-item__box">
|
||||
<image :src="item.src" class="fui-logo"></image>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
</fui-collapse>
|
||||
<view class="fui-section__title">手风琴效果</view>
|
||||
<fui-collapse accordion @change="change">
|
||||
<fui-collapse-item :index="index" v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-item__box">
|
||||
<image :src="item.src" class="fui-logo"></image>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
</fui-collapse>
|
||||
<view class="fui-section__title">无动画效果</view>
|
||||
<fui-collapse @change="change">
|
||||
<fui-collapse-item :animation="false" arrowColor="#333" :index="index" v-for="(item,index) in items"
|
||||
:key="index">
|
||||
<view class="fui-item__box">
|
||||
<image :src="item.src" class="fui-logo"></image>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
</fui-collapse>
|
||||
<view class="fui-section__title">禁用不可点击</view>
|
||||
<fui-collapse @change="change">
|
||||
<fui-collapse-item :disabled="index===1" arrowColor="#333" :index="index" v-for="(item,index) in items"
|
||||
:key="index">
|
||||
<view class="fui-item__box">
|
||||
<image :src="item.src" class="fui-logo"></image>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
</fui-collapse>
|
||||
<view class="fui-section__title">不显示箭头</view>
|
||||
<fui-collapse accordion @change="change">
|
||||
<fui-collapse-item :arrow="false" :index="index" v-for="(item,index) in list" :key="index">
|
||||
<fui-list-cell :padding="['0','0']">
|
||||
<view class="fui-item__box">
|
||||
<text style="font-size: 28rpx;">{{item.question}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<template v-slot:content>
|
||||
<view class="fui-descr" style="color: #09BE4F;">{{item.answer}}</view>
|
||||
</template>
|
||||
</fui-collapse-item>
|
||||
</fui-collapse>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
src: '/static/images/common/logo.png',
|
||||
title: 'First UI',
|
||||
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
isOpen: true
|
||||
}, {
|
||||
src: '/static/images/common/icon_tabbar_2x.png',
|
||||
title: '标题内容',
|
||||
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
|
||||
}],
|
||||
list: [{
|
||||
question: '我只想用某个组件可以吗？',
|
||||
answer: '可以，组件支持按需引入，详见 First UI 文档 “快速上手”，使用组件前请先仔细阅读组件文档。'
|
||||
}, {
|
||||
question: '为什么文档或示例中有些组件在GitHub或npm下载的包中无法找到？',
|
||||
answer: 'First UI 分为 “开源版” 和 “商业版”，所有示例或文档中加 “V” 的表示需要开通会员才可获取源码使用，会员内容不会发布到任何公开渠道。'
|
||||
}, {
|
||||
question: '组件支持Nvue、支付宝小程序...吗？',
|
||||
answer: '支持。组件支持哪些平台请参考组件具体文档，每个组件文档中都有支持平台的说明。'
|
||||
}]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-item__box {
|
||||
width: 100%;
|
||||
padding: 26rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-logo {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 52rpx;
|
||||
color: #7F7F7F;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
129
pages/component/data/countdown/countdown.vue
Normal file
129
pages/component/data/countdown/countdown.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 4 072549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">CountDown <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">CountDown 倒计时，用于倒计时场景，可手动控制。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down :value="value" @end="end"></fui-count-down>
|
||||
</view>
|
||||
<view class="fui-section__title">冒号显示为文字</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down :isColon="false" borderColor="transparent" background="transparent" :value="3600"
|
||||
@end="end"></fui-count-down>
|
||||
</view>
|
||||
<view class="fui-section__title">显示天</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down isDays :isColon="false" borderColor="transparent" background="transparent"
|
||||
:value="244800" @end="end"></fui-count-down>
|
||||
</view>
|
||||
<view class="fui-section__title">仅显示秒</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down :isHours="false" :isMinutes="false" :isColon="false" unitEn borderColor="transparent"
|
||||
background="transparent" :value="180" @end="end"></fui-count-down>
|
||||
</view>
|
||||
<view class="fui-section__title">更换样式，显示毫秒</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down background="#465CFF" color="#fff" colonColor="#465CFF" borderColor="#465CFF" isMs
|
||||
msWidth="40" :value="3600" @end="end">
|
||||
</fui-count-down>
|
||||
</view>
|
||||
<view class="fui-section__title">手动控制</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-count-down background="#333" color="#fff" colonColor="#333" isMs msWidth="36" :value="30"
|
||||
:autoStart="false" @end="end" ref="countdown">
|
||||
</fui-count-down>
|
||||
</view>
|
||||
<fui-grid @click="handleClick">
|
||||
<fui-grid-item backgroundColor="#fff">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="play"></fui-icon>
|
||||
<text>开始</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item backgroundColor="#fff" :index="1">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="suspend"></fui-icon>
|
||||
<text>暂停</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item backgroundColor="#fff" :index="2">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="refresh"></fui-icon>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.value = 20
|
||||
}, 2000)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
end(e) {
|
||||
console.log(e)
|
||||
this.fui.toast('倒计时结束~')
|
||||
},
|
||||
handleClick(e) {
|
||||
let index = e.detail.index;
|
||||
if (index == 0) {
|
||||
this.$refs.countdown.startCountdown()
|
||||
} else if (index == 1) {
|
||||
this.$refs.countdown.endCountdown(true)
|
||||
} else {
|
||||
this.$refs.countdown.resetCountdown()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-timer__box {
|
||||
width: 100%;
|
||||
padding-left: 32rpx;
|
||||
padding-bottom: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.fui-grid__cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
117
pages/component/data/dataTag/dataTag.vue
Normal file
117
pages/component/data/dataTag/dataTag.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center fui-rect" @tap="vip">DataTag <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc fui-rect">DataTag 标签选择，通过数据驱动的单选标签和复选标签。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">单选标签</view>
|
||||
<fui-data-tag :options="options" @change="change"></fui-data-tag>
|
||||
<view class="fui-section__title">单选标签/设置默认值/背景/边框</view>
|
||||
<!--默认值vue2 使用value，vue3使用modelValue。建议使用v-model方式-->
|
||||
<fui-data-tag defaultBorderColor="#FBDA41" background="#F1F4FA" activeBgColor="#FEDF48"
|
||||
border-color="#FBDA41" active-color="#333" radius="20" :value="defVal" :modelValue="defVal"
|
||||
:options="options" @change="change"></fui-data-tag>
|
||||
<view class="fui-section__title">复选标签/带角标</view>
|
||||
<fui-data-tag multiple mark :options="options" @change="change2"></fui-data-tag>
|
||||
<view class="fui-section__title">复选标签/设置默认值</view>
|
||||
<fui-data-tag multiple mark :options="options" :value="chkDefVal" :modelValue="chkDefVal" @change="change2">
|
||||
</fui-data-tag>
|
||||
<view class="fui-section__title">单选标签/v-model/可全部取消</view>
|
||||
<fui-data-tag :min="0" :options="options" v-model="val"></fui-data-tag>
|
||||
<view class="fui-section__title">多选标签/v-model/min/max/圆角值</view>
|
||||
<fui-data-tag multiple :multiple-min="1" :max="2" :radius="40" activeBgColor="#F1F4FA" :options="options"
|
||||
v-model="vals">
|
||||
</fui-data-tag>
|
||||
<view class="fui-section__title">单选标签/带角标/调整颜色/默认值</view>
|
||||
<fui-data-tag :options="options" v-model="val2" width="180" activeColor="#FFB703" borderColor="#FFB703" mark
|
||||
markColor="#FFB703"></fui-data-tag>
|
||||
<view class="fui-section__title">复选标签/与全选标签互斥</view>
|
||||
<fui-data-tag multiple mark :options="options2" @change="change2">
|
||||
</fui-data-tag>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
val(newVal) {
|
||||
if (newVal) {
|
||||
this.fui.toast(newVal)
|
||||
} else {
|
||||
this.fui.toast('已全部取消')
|
||||
}
|
||||
},
|
||||
vals(newVal) {
|
||||
if (newVal.length > 0) {
|
||||
this.fui.toast(newVal.join(','))
|
||||
} else {
|
||||
this.fui.toast('已全部取消')
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: ['选项一', '选项二', '选项三', '选项四'],
|
||||
defVal: '选项二',
|
||||
chkDefVal: ['选项二', '选项三'],
|
||||
val: '',
|
||||
vals: [],
|
||||
val2: '选项三',
|
||||
//isAll仅可设置一个为true
|
||||
options2: [{
|
||||
text: '全部',
|
||||
value: '-99',
|
||||
isAll: true
|
||||
}, {
|
||||
text: '选项一',
|
||||
value: '1',
|
||||
//以下为扩展参数
|
||||
id: 1,
|
||||
param: 3
|
||||
}, {
|
||||
text: '选项二',
|
||||
value: '2',
|
||||
//扩展参数
|
||||
id: 2,
|
||||
param: 4
|
||||
}, {
|
||||
text: '选项三',
|
||||
value: '3',
|
||||
//扩展参数
|
||||
id: 3,
|
||||
param: 5
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e) {
|
||||
console.log(e.detail)
|
||||
this.fui.toast(e.detail.value)
|
||||
},
|
||||
change2(e) {
|
||||
console.log(e.detail)
|
||||
let arr = e.detail.value || []
|
||||
if (arr.length > 0) {
|
||||
this.fui.toast(arr.join(','))
|
||||
} else {
|
||||
this.fui.toast('已全部取消')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
background-color: #F1F4FA;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
49
pages/component/data/divider/divider.vue
Normal file
49
pages/component/data/divider/divider.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Divider</view>
|
||||
<view class="fui-page__desc">Divider 分割线，可自定义线条宽度、颜色等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-divider text="没有更多了"></fui-divider>
|
||||
<fui-divider dividerColor="#465CFF" text="没有更多了"></fui-divider>
|
||||
<fui-divider dividerColor="#FFB703" color="#FFB703" text="没有更多了"></fui-divider>
|
||||
<fui-divider dividerColor="#09BE4F" color="#09BE4F" width="100%" text="没有更多了"></fui-divider>
|
||||
<fui-divider dividerColor="linear-gradient(to right,#eee,#ccc,#ccc,#eee)" text="没有更多了"></fui-divider>
|
||||
<fui-divider text="已加载完全部数据"></fui-divider>
|
||||
<fui-divider>
|
||||
<view class="fui-flex__center">
|
||||
<fui-icon name="like" color="#FF2B2B" :size="40"></fui-icon>
|
||||
<text class="fui-text">猜你喜欢</text>
|
||||
</view>
|
||||
</fui-divider>
|
||||
<fui-divider>
|
||||
<view class="fui-flex__center">
|
||||
<fui-icon name="fabulous" color="#FFB703" :size="40"></fui-icon>
|
||||
<text class="fui-text">好物推荐</text>
|
||||
</view>
|
||||
</fui-divider>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-text {
|
||||
font-size: 24rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
</style>
|
||||
44
pages/component/data/empty/empty.vue
Normal file
44
pages/component/data/empty/empty.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Empty</view>
|
||||
<view class="fui-page__desc">Empty 缺省页，页面的信息内容为空或信息响应异常的状态。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_data_3x.png`" title="暂无数据" descr="功能开发中，敬请期待！">
|
||||
<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
|
||||
:margin="['64rpx','0']" borderColor="#465CFF" color="#465CFF" @click="goIndex"></fui-button>
|
||||
</fui-empty>
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_news_3x.png`" title="暂无新消息" marginTop="64"></fui-empty>
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_address_3x.png`" title="暂无地址信息" marginTop="64">
|
||||
</fui-empty>
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_network_3x.png`" title="请检查网络设置！" marginTop="64">
|
||||
</fui-empty>
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_order_3x.png`" title="暂无订单" marginTop="64"></fui-empty>
|
||||
<fui-empty :src="`${resUrl}/component/empty/img_search_3x.png`" title="没有找到搜索的内容额~" marginTop="64">
|
||||
</fui-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goIndex() {
|
||||
this.fui.href('/pages/tabbar/index/index', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
43
pages/component/data/loadmore/loadmore.vue
Normal file
43
pages/component/data/loadmore/loadmore.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">LoadMore</view>
|
||||
<view class="fui-page__desc">LoadMore 加载更多，主要使用场景如：上拉加载等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-loadmore></fui-loadmore>
|
||||
<fui-loadmore activeColor="#FFB703"></fui-loadmore>
|
||||
<fui-loadmore iconColor="rgba(255, 183, 3, .2)" activeColor="#FFB703" color="#FFB703"></fui-loadmore>
|
||||
<view class="fui-section__title">direction:col</view>
|
||||
<fui-loadmore direction="col" text="加载中" color="#465CFF"></fui-loadmore>
|
||||
<view class="fui-section__title">自定义图标</view>
|
||||
<fui-loadmore src="/static/images/component/loading_gray.png" :iconWidth="36" text="加载中...">
|
||||
</fui-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
64
pages/component/data/progress/progress.vue
Normal file
64
pages/component/data/progress/progress.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 40 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Progress <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Progress 进度条，用于展现某个任务的当前进度。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-progress :percent="80"></fui-progress>
|
||||
<view class="fui-section__title">显示进度</view>
|
||||
<fui-progress :percent="70" showInfo></fui-progress>
|
||||
<view class="fui-section__title">改变颜色</view>
|
||||
<fui-progress :percent="60" background="#ddd" activeColor="#FFB703"></fui-progress>
|
||||
<view class="fui-section__title">设置高度</view>
|
||||
<fui-progress :percent="70" height="16" radius="16" activeColor="#09BE4F"></fui-progress>
|
||||
<view class="fui-section__title">控制进度</view>
|
||||
<fui-progress :percent="percent" showInfo></fui-progress>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="percent" bold :margin="['24rpx']"
|
||||
@click="percentChange"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percent: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
percentChange() {
|
||||
if (this.percent >= 100) {
|
||||
this.percent = 40;
|
||||
} else {
|
||||
//大于100按100处理
|
||||
this.percent += 30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
115
pages/component/data/skeleton/skeleton.vue
Normal file
115
pages/component/data/skeleton/skeleton.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center fui-rect" @tap="vip">Skeleton <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc fui-rect">Skeleton 骨架屏，在需要等待加载内容的位置提供一个占位图形组合。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-sk__box fui-rect">骨架节点</view>
|
||||
<view class="fui-sk__wrap fui-round">骨架节点</view>
|
||||
<view class="fui-section__title fui-rect">手动绘制骨架</view>
|
||||
<view class="fui-outer">
|
||||
<!--手动绘制数据，外层设置relative定位节点-->
|
||||
<fui-skeleton outerClass="fui-outer" :preloadList="preloadList"></fui-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<!--查找骨架节点 fui-rect、fui-round-->
|
||||
<fui-skeleton @change="change" v-if="show" background="#F1F4FA" outerClass="fui-wrap"></fui-skeleton>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//手动绘制数据，比较繁琐。可通过动态查找节点，然后通过change事件返回节点数据缓存使用
|
||||
preloadList: [{
|
||||
left: 15,
|
||||
top: 10,
|
||||
bottom: 220,
|
||||
width: 40,
|
||||
height: 40,
|
||||
type: 'round'
|
||||
}, {
|
||||
left: 60,
|
||||
right: 365,
|
||||
top: 10,
|
||||
bottom: 220,
|
||||
width: 180,
|
||||
height: 19,
|
||||
type: 'rect'
|
||||
}, {
|
||||
left: 60,
|
||||
right: 365,
|
||||
top: 40,
|
||||
bottom: 220,
|
||||
width: 240,
|
||||
height: 19,
|
||||
type: 'rect'
|
||||
}, {
|
||||
left: 60,
|
||||
right: 365,
|
||||
top: 70,
|
||||
bottom: 220,
|
||||
width: 200,
|
||||
height: 19,
|
||||
type: 'rect'
|
||||
}],
|
||||
show: true
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
}, 2000)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e) {
|
||||
//返回查找的骨架节点信息，可在开发环境中获取缓存到本地，然后直接用于生产环境
|
||||
//nvue端暂不支持动态获取节点，可考虑缓存节点数据直接传入使用
|
||||
console.log(e.nodes)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
width: 300rpx;
|
||||
margin-left: 32rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fui-outer {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-sk__box {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fui-sk__wrap {
|
||||
background: #16AB60;
|
||||
color: #fff;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
</style>
|
||||
94
pages/component/data/tag/tag.vue
Normal file
94
pages/component/data/tag/tag.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Tag</view>
|
||||
<view class="fui-page__desc">Tag 标签，用于标记或分类。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-tag text="标签一" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签二" type="danger" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签三" type="success" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签四" type="warning" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签五" type="purple" margin-bottom="24"></fui-tag>
|
||||
</view>
|
||||
<view class="fui-section__title">浅色调</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-tag text="标签一" margin-bottom="24" theme="light" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签二" type="danger" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签三" type="success" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签四" type="warning" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签五" type="purple" theme="light" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
</view>
|
||||
<view class="fui-section__title">空心</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-tag text="标签一" margin-bottom="24" theme="plain" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签二" type="danger" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签三" type="success" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签四" type="warning" theme="plain" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签五" type="purple" theme="plain" margin-bottom="24"></fui-tag>
|
||||
</view>
|
||||
<view class="fui-section__title">带关闭按钮</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-tag text="标签一" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
|
||||
<view class="fui-close__icon">
|
||||
<fui-icon name="close" color="#465CFF" :size="32"></fui-icon>
|
||||
</view>
|
||||
</fui-tag>
|
||||
<fui-tag text="标签二" type="danger" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
|
||||
<view class="fui-close__icon">
|
||||
<fui-icon name="clear" color="#FF2B2B" :size="32"></fui-icon>
|
||||
</view>
|
||||
</fui-tag>
|
||||
<fui-tag text="标签三" type="success" theme="light" margin-right="24" :padding="['12rpx','20rpx']">
|
||||
<view class="fui-close__icon">
|
||||
<fui-icon name="clear-fill" color="#09BE4F" :size="32"></fui-icon>
|
||||
</view>
|
||||
</fui-tag>
|
||||
</view>
|
||||
<view class="fui-section__title">自定义颜色、大小</view>
|
||||
<view class="fui-align__center">
|
||||
<fui-tag text="标签一" background="rgba(255, 43, 43, .05)" color="#333" margin-bottom="24"
|
||||
margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签二" background="#CCCCCC" color="#fff" margin-bottom="24" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签三" background="rgba(255, 183, 3, .1)" color="#FF2B2B" margin-bottom="24"
|
||||
:scaleRatio="0.8" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签四" background="rgba(104, 49, 255, .05)" color="#181818" margin-bottom="24"
|
||||
:padding="['20rpx','40rpx']" margin-right="24"></fui-tag>
|
||||
<fui-tag text="标签五" background="rgba(9, 190, 79, .05)" color="#181818" margin-bottom="24"
|
||||
:padding="['12rpx','24rpx']"></fui-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fui-align__center {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fui-close__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6rpx 0 4rpx 24rpx;
|
||||
}
|
||||
</style>
|
||||
71
pages/component/expand/backtop/backtop.vue
Normal file
71
pages/component/expand/backtop/backtop.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 1407 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Backtop <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Backtop 回到顶部，返回页面顶部的操作按钮，滑动页面查看效果。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="默认样式" bold :margin="['24rpx']"
|
||||
@click="onChange(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="修改图标" bold @click="onChange(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="调整样式" bold :margin="['24rpx']"
|
||||
@click="onChange(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-backtop :scrollTop="scrollTop" :name="name" :background="background" :color="color"></fui-backtop>
|
||||
|
||||
<!-- 自定义图标 设置custom 属性为true，然后在插槽内放置图标-->
|
||||
<!-- <fui-backtop custom :scrollTop="scrollTop">
|
||||
<fui-icon name="up" :size="52"></fui-icon>
|
||||
</fui-backtop> -->
|
||||
|
||||
<view style="width: 2px;height: 1000px;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'top',
|
||||
background: '#FFFFFF',
|
||||
color: '#333333',
|
||||
scrollTop: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onChange(type) {
|
||||
if (type == 1) {
|
||||
this.name = 'top'
|
||||
this.background = '#FFFFFF'
|
||||
this.color = '#333333'
|
||||
} else if (type == 2) {
|
||||
this.name = 'turningup'
|
||||
} else {
|
||||
this.background = '#465CFF'
|
||||
this.color = '#FFFFFF'
|
||||
}
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
73
pages/component/expand/copyText/copyText.vue
Normal file
73
pages/component/expand/copyText/copyText.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">CopyText <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">CopyText 长按复制，用于复制关键文本信息，可扩展其他功能按钮。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">上方显示按钮</view>
|
||||
<view class="fui-copy__box">
|
||||
<fui-copy-text text="长按文本复制"></fui-copy-text>
|
||||
</view>
|
||||
<view class="fui-section__title">下方显示按钮</view>
|
||||
<view class="fui-copy__box">
|
||||
<fui-copy-text direction="bottom" text="长按文本复制" value="https://doc.firstui.cn" color="#465CFF"
|
||||
size="30"></fui-copy-text>
|
||||
</view>
|
||||
<view class="fui-section__title">左侧显示按钮</view>
|
||||
<view class="fui-copy__box">
|
||||
<fui-copy-text direction="left" text="长按文本复制" value="https://doc.firstui.cn" color="#465CFF" size="30">
|
||||
</fui-copy-text>
|
||||
</view>
|
||||
<view class="fui-section__title">右侧显示按钮</view>
|
||||
<view class="fui-copy__box">
|
||||
<fui-copy-text direction="right" text="长按文本复制" value="https://doc.firstui.cn" color="#465CFF" size="30">
|
||||
</fui-copy-text>
|
||||
</view>
|
||||
<view class="fui-section__title">扩展按钮</view>
|
||||
<view class="fui-copy__box">
|
||||
<fui-copy-text text="长按文本复制" value="https://doc.firstui.cn" color="#FFB703" size="30"
|
||||
:buttons="['回复','评论']" @click="btnClick"></fui-copy-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
btnClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您点击了【${e.text}】按钮`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-copy__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
87
pages/component/expand/countdownVerify/countdownVerify.vue
Normal file
87
pages/component/expand/countdownVerify/countdownVerify.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">CountdownVerify <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">CountdownVerify 验证码倒计时，一般用于短信验证码发送后展现的倒计时。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
|
||||
<view class="fui-section__title">默认倒计时状态</view>
|
||||
<fui-countdown-verify :borderColor="init?'#465CFF':'#B2B2B2'" :color="init?'#465CFF':'#B2B2B2'"
|
||||
ref="fui_cdv2" @send="sendCode2" @end="end2">
|
||||
</fui-countdown-verify>
|
||||
<view class="fui-section__title">调整样式</view>
|
||||
<fui-countdown-verify borderColor="#FFB703" background="#FFB703" sent="秒后获取" color="#fff" radius="40"
|
||||
ref="fui_cdv3" @send="sendCode3">
|
||||
</fui-countdown-verify>
|
||||
<view class="fui-section__title">出现错误时重置</view>
|
||||
<fui-countdown-verify ref="fui_cdv4" @send="sendCode4"></fui-countdown-verify>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//是否为初始化状态
|
||||
init: true
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
//开启倒计时
|
||||
this.$refs.fui_cdv2 && this.$refs.fui_cdv2.success()
|
||||
this.init = false
|
||||
}, 50)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
sendCode() {
|
||||
//延时为了效果展示
|
||||
setTimeout(() => {
|
||||
//发送短信
|
||||
//...
|
||||
this.$refs.fui_cdv && this.$refs.fui_cdv.success()
|
||||
}, 800)
|
||||
},
|
||||
sendCode2() {
|
||||
this.init = false
|
||||
setTimeout(() => {
|
||||
//发送短信
|
||||
//...
|
||||
this.$refs.fui_cdv2 && this.$refs.fui_cdv2.success()
|
||||
}, 800)
|
||||
},
|
||||
end2() {
|
||||
//倒计时结束，初始化样式
|
||||
this.init = true
|
||||
},
|
||||
sendCode3() {
|
||||
setTimeout(() => {
|
||||
//发送短信
|
||||
//...
|
||||
this.$refs.fui_cdv3 && this.$refs.fui_cdv3.success()
|
||||
}, 800)
|
||||
},
|
||||
sendCode4() {
|
||||
setTimeout(() => {
|
||||
this.fui.toast('手机号码格式不正确！')
|
||||
this.$refs.fui_cdv4 && this.$refs.fui_cdv4.reset()
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
182
pages/component/expand/cubicBezier/cubicBezier.vue
Normal file
182
pages/component/expand/cubicBezier/cubicBezier.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 614 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">CubicBezier <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">CubicBezier 贝塞尔曲线，可用于加入购物车动画。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">左下方</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
<fui-cubic-bezier :left="left" :bottom="bottom" :param="0" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<view class="fui-badge">1</view>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
<fui-cubic-bezier :left="left" :bottom="bottom" :param="1" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<image class="fui-badge--logo" src="/static/images/common/img_logo.png"></image>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<fui-cubic-bezier :left="left" :bottom="bottom" :param="1" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<image class="fui-badge--logo" src="/static/images/common/img_logo.png"></image>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">右下方</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
<fui-cubic-bezier direction="rb" :right="right" :bottom="bottom" :param="1" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<image class="fui-badge--logo" src="/static/images/common/img_logo.png"></image>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<fui-cubic-bezier direction="rb" :right="right" :bottom="bottom" :param="0" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<view class="fui-badge">1</view>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__item">
|
||||
<fui-cubic-bezier direction="rb" :right="right" :bottom="bottom" :param="1" @click="handleClick">
|
||||
<fui-icon name="plussign"></fui-icon>
|
||||
<template v-slot:badge>
|
||||
<image class="fui-badge--logo" src="/static/images/common/img_logo.png"></image>
|
||||
</template>
|
||||
</fui-cubic-bezier>
|
||||
<text class="fui-text">点击加号加入购物车</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
|
||||
</view>
|
||||
<view class="fui-cart--box">
|
||||
<fui-icon name="cart"></fui-icon>
|
||||
</view>
|
||||
<view class="fui-cart--box fui-cart--right">
|
||||
<fui-icon name="cart"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
left: 116,
|
||||
bottom: 140,
|
||||
right: 100
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
padding-bottom: 600rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-weight: normal;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.fui-tabbar--wrap {
|
||||
width: 100%;
|
||||
height: 144rpx;
|
||||
padding: 0 32rpx 44rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-cart--box {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 40rpx;
|
||||
bottom: 80rpx;
|
||||
box-shadow: 0 10rpx 14rpx 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.fui-cart--right {
|
||||
left: auto;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
.fui-badge {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #FF2B2B;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fui-badge--logo {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
243
pages/component/expand/digitalKeyboard/digitalKeyboard.vue
Normal file
243
pages/component/expand/digitalKeyboard/digitalKeyboard.vue
Normal file
@ -0,0 +1,243 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">DigitalKeyboard <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">DigitalKeyboard 数字键盘，一般用于数字输入，如金额、密码、验证码输入等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-single-input :native="false" isFocus borderColor="#ccc" :value="value" @focus="onFocus" ref="fui_si">
|
||||
</fui-single-input>
|
||||
<view class="fui-flex__center fui-flex__column">
|
||||
<fui-button type="gray" btn-size="medium" text="默认键盘" bold @click="btnTap(0)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="改变按钮背景色" bold :margin="['24rpx']"
|
||||
@click="btnTap(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="带小数点" bold @click="btnTap(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="带取消按钮" bold :margin="['24rpx']"
|
||||
@click="btnTap(3)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="带清空按钮" bold @click="btnTap(4)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="暗黑模式" bold :margin="['24rpx']"
|
||||
@click="btnTap(5)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="身份证键盘" bold @click="btnTap(6)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义插槽内容" :margin="['24rpx']" bold
|
||||
@click="btnClick">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-digital-keyboard :show="show" :background="background" :decimal="decimal" :spareKey="spareKey"
|
||||
:theme="theme" @click="keyClick" @confirm="confirm" @backspace="backspace" @spare="spare">
|
||||
</fui-digital-keyboard>
|
||||
|
||||
<!--自定义插槽内容示例-->
|
||||
<fui-backdrop :zIndex="9" :show="visible"></fui-backdrop>
|
||||
<fui-digital-keyboard :zIndex="10" :show="visible" spareKey="取消" background="#09BE4F" @click="keyClick2"
|
||||
@confirm="confirm2" @backspace="backspace2" @spare="spare2">
|
||||
<view class="fui-dk__header">
|
||||
<text class="fui-title">请输入密码</text>
|
||||
<fui-single-input :native="false" borderColor="#ccc" border="1" borderWidth="1" radius="16"
|
||||
activeColor="#09BE4F" cursorHeight="40" cursorColor="#09BE4F" :length="6" width="80" height="80"
|
||||
size="24" password isFocus :value="value2" ref="fui_si2">
|
||||
</fui-single-input>
|
||||
</view>
|
||||
</fui-digital-keyboard>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
init: false,
|
||||
show: false,
|
||||
value: '',
|
||||
background: '',
|
||||
decimal: false,
|
||||
spareKey: '',
|
||||
theme: 'light',
|
||||
visible: false,
|
||||
value2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
keyClick(e) {
|
||||
console.log(e)
|
||||
//输入的值
|
||||
let val = e.value;
|
||||
//之前输入的值
|
||||
let text = this.value;
|
||||
//判断根据实际情况做调整，这里只是做演示
|
||||
if (text.length === 4) {
|
||||
this.fui.toast('已完成输入！')
|
||||
return
|
||||
} else if (text.includes('.') && val === '.') {
|
||||
this.fui.toast('小数点不可重复输入！')
|
||||
return
|
||||
}
|
||||
|
||||
if (!text && val === '.') {
|
||||
this.value = '0.'
|
||||
} else {
|
||||
this.value += val
|
||||
}
|
||||
|
||||
},
|
||||
confirm(e) {
|
||||
let text = this.value;
|
||||
let vals = text.split('')
|
||||
if (text.length < 4) {
|
||||
this.fui.toast('请先输入完成！')
|
||||
return
|
||||
} else if (vals[vals.length - 1] === '.') {
|
||||
this.fui.toast('最后一位不可输入小数点！')
|
||||
return
|
||||
}
|
||||
|
||||
this.fui.toast('您输入的值为：' + text)
|
||||
this.show = false
|
||||
//输入框失去焦点
|
||||
this.$refs.fui_si.initFocus(false)
|
||||
},
|
||||
backspace(e) {
|
||||
let val = this.value;
|
||||
if (val) {
|
||||
this.value = val.substring(0, val.length - 1)
|
||||
}
|
||||
},
|
||||
spare(e) {
|
||||
console.log(e)
|
||||
//备用键事件，可以换成其他需要的功能
|
||||
if (this.spareKey === '清空') {
|
||||
this.value = ''
|
||||
} else if (this.spareKey === 'X') {
|
||||
//可控制仅输入一次
|
||||
if (this.value.length === 4) {
|
||||
this.fui.toast('已完成输入！')
|
||||
return
|
||||
}else if (~this.value.indexOf('X')) {
|
||||
this.fui.toast('X不可重复输入！')
|
||||
return
|
||||
}
|
||||
this.value += e.value
|
||||
} else {
|
||||
this.show = false
|
||||
//输入框失去焦点
|
||||
this.$refs.fui_si.initFocus(false)
|
||||
}
|
||||
},
|
||||
onFocus(e) {
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
if (this.init) {
|
||||
this.init = false
|
||||
}
|
||||
}, this.init ? 200 : 0);
|
||||
},
|
||||
btnTap(type) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
this.theme = 'light';
|
||||
this.background = '#465CFF';
|
||||
this.spareKey = '';
|
||||
this.decimal = false;
|
||||
break;
|
||||
case 1:
|
||||
this.background = '#FFB703';
|
||||
break;
|
||||
case 2:
|
||||
this.decimal = true;
|
||||
break;
|
||||
case 3:
|
||||
//备用键，可以替换为其他需要的功能
|
||||
this.spareKey = '取消';
|
||||
break;
|
||||
case 4:
|
||||
this.spareKey = '清空';
|
||||
break;
|
||||
case 5:
|
||||
this.theme = 'dark';
|
||||
break;
|
||||
case 6:
|
||||
this.spareKey = 'X';
|
||||
this.decimal = false;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (!this.show) {
|
||||
this.show = true
|
||||
//输入框获得焦点
|
||||
this.$refs.fui_si.initFocus(true)
|
||||
}
|
||||
},
|
||||
btnClick() {
|
||||
//清空之前输入的密码
|
||||
this.value2 = '';
|
||||
this.visible = true
|
||||
this.$refs.fui_si2.initFocus(true)
|
||||
},
|
||||
keyClick2(e) {
|
||||
console.log(e)
|
||||
if (this.value2.length === 6) return;
|
||||
this.value2 += e.value
|
||||
},
|
||||
confirm2(e) {
|
||||
let text = this.value2;
|
||||
if (text.length < 6) {
|
||||
this.fui.toast('请输入6位数密码！')
|
||||
return
|
||||
}
|
||||
this.fui.toast('您输入的密码为：' + text)
|
||||
this.visible = false
|
||||
//输入框失去焦点
|
||||
this.$refs.fui_si2.initFocus(false)
|
||||
},
|
||||
backspace2(e) {
|
||||
let val = this.value2;
|
||||
if (val) {
|
||||
this.value2 = val.substring(0, val.length - 1)
|
||||
}
|
||||
},
|
||||
spare2(e) {
|
||||
//清空输入的密码
|
||||
this.value2 = '';
|
||||
this.visible = false
|
||||
//输入框失去焦点
|
||||
this.$refs.fui_si2.initFocus(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-flex__center {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.fui-dk__header {
|
||||
width: 100%;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding-top: 12rpx;
|
||||
padding-bottom: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
73
pages/component/expand/digitalRoller/digitalRoller.vue
Normal file
73
pages/component/expand/digitalRoller/digitalRoller.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 072 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">DigitalRoller <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">DigitalRoller 数字滚轮，数字变化时切换滚动效果，一般用于金额的变化。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-roller__box">
|
||||
<text>默认样式： </text>
|
||||
<fui-digital-roller :value="value"></fui-digital-roller>
|
||||
</view>
|
||||
<view class="fui-roller__box">
|
||||
<fui-digital-roller :value="value" color="#FFB703" :size="48" :height="48"></fui-digital-roller>
|
||||
</view>
|
||||
<fui-button type="gray" btn-size="medium" text="188.21" bold :margin="['24rpx']"
|
||||
@click="roller('188.21')"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="5,890.89" bold @click="roller('5,890.89')">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="$1,314.20" bold :margin="['24rpx']"
|
||||
@click="roller('$1,314.20')">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="￥9,790.95" bold @click="roller('￥9,790.95')">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="8913" bold :margin="['24rpx']"
|
||||
@click="roller('8913')">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 361
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.value = 908
|
||||
}, 1200);
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
roller(val) {
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-roller__box {
|
||||
width: 100%;
|
||||
padding: 24rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
108
pages/component/expand/drag-custom/drag-custom.vue
Normal file
108
pages/component/expand/drag-custom/drag-custom.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 4 072 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Drag <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。长按列表开启拖拽。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<fui-drag :width="680" custom :itemList="itemList" :columns="4" :itemHeight="200" @end="end">
|
||||
<template v-slot="{ model,width,height, index }">
|
||||
<view class="fui-item" :style="{width:width+'px',height:height+'px'}">
|
||||
<image :src="model.src" class="fui-img"></image>
|
||||
<text class="fui-text">{{model.text}}</text>
|
||||
</view>
|
||||
</template>
|
||||
</fui-drag>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemList: [{
|
||||
id: 1,
|
||||
text: '微信小程序',
|
||||
src: '/static/images/qrcode/wx_qrcode.jpg'
|
||||
}, {
|
||||
id: 2,
|
||||
text: '支付宝小程序',
|
||||
src: '/static/images/qrcode/ali_qrcode.png'
|
||||
}, {
|
||||
id: 3,
|
||||
text: '头条小程序',
|
||||
src: '/static/images/qrcode/toutiao_qrcode.png'
|
||||
}, {
|
||||
id: 4,
|
||||
text: '百度小程序',
|
||||
src: '/static/images/qrcode/baidu_qrcode.png'
|
||||
}, {
|
||||
id: 5,
|
||||
text: 'QQ小程序',
|
||||
src: '/static/images/qrcode/qq_qrcode.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
text: 'H5',
|
||||
src: '/static/images/qrcode/h5_qrcode.png'
|
||||
}, {
|
||||
id: 7,
|
||||
text: 'IOS',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
id: 8,
|
||||
text: 'Android',
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
end(e) {
|
||||
//排序后列表
|
||||
console.log(e.itemList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-bottom: 12rpx;
|
||||
border-radius: 16rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
76
pages/component/expand/drag-img/drag-img.vue
Normal file
76
pages/component/expand/drag-img/drag-img.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Drag <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。长按列表开启拖拽。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-drag :width="720" :itemList="itemList" :columns="4" square :styles="styles" @end="end"></fui-drag>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemList: [{
|
||||
id: 1,
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
id: 2,
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}, {
|
||||
id: 3,
|
||||
src: '/static/images/qrcode/h5_qrcode.png'
|
||||
}, {
|
||||
id: 4,
|
||||
src: '/static/images/qrcode/toutiao_qrcode.png'
|
||||
}, {
|
||||
id: 5,
|
||||
src: '/static/images/qrcode/qq_qrcode.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
src: '/static/images/qrcode/wx_qrcode.jpg'
|
||||
}, {
|
||||
id: 7,
|
||||
src: '/static/images/qrcode/baidu_qrcode.png'
|
||||
}, {
|
||||
id: 8,
|
||||
src: '/static/images/qrcode/ali_qrcode.png'
|
||||
}, {
|
||||
id: 9,
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
id: 10,
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}],
|
||||
styles: {
|
||||
padding: 4
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
end(e){
|
||||
//排序后列表
|
||||
console.log(e.itemList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
77
pages/component/expand/drag-text/drag-text.vue
Normal file
77
pages/component/expand/drag-text/drag-text.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 40 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Drag <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。长按列表开启拖拽。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-drag :itemList="itemList" :itemHeight="88" :styles="styles" @end="end" @delete="del"></fui-drag>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemList: [{
|
||||
id: 1,
|
||||
text: '标题文本《一》'
|
||||
}, {
|
||||
id: 2,
|
||||
text: '标题文本《二》'
|
||||
}, {
|
||||
id: 3,
|
||||
text: '标题文本《三》'
|
||||
}, {
|
||||
id: 4,
|
||||
text: '标题文本《四》'
|
||||
}, {
|
||||
id: 5,
|
||||
text: '标题文本《五》'
|
||||
}, {
|
||||
id: 6,
|
||||
text: '标题文本《六》'
|
||||
}, {
|
||||
id: 7,
|
||||
text: '标题文本《七》'
|
||||
}, {
|
||||
id: 8,
|
||||
text: '标题文本《八》'
|
||||
}, {
|
||||
id: 9,
|
||||
text: '标题文本《九》'
|
||||
}],
|
||||
styles: {
|
||||
type: 2,
|
||||
isDel: true
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
end(e) {
|
||||
//排序后列表
|
||||
console.log(e.itemList)
|
||||
},
|
||||
del(e){
|
||||
this.fui.toast(`删除列目索引：${e.index}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
53
pages/component/expand/drag/drag.vue
Normal file
53
pages/component/expand/drag/drag.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Drag <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="图片元素" bold :margin="['24rpx']"
|
||||
@click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="标题分组元素" bold @click="href(2)">
|
||||
</fui-button>
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<fui-button type="gray" btn-size="medium" text="自定义元素" bold :margin="['24rpx']" @click="href(3)">
|
||||
</fui-button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
let url='../drag-img/drag-img'
|
||||
if(type!==1){
|
||||
url = type == 2 ? '../drag-text/drag-text' : '../drag-custom/drag-custom'
|
||||
}
|
||||
this.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
331
pages/component/expand/filterBar/filterBar.vue
Normal file
331
pages/component/expand/filterBar/filterBar.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18614 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">FilterBar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">FilterBar 筛选栏，主要用于数据的筛选。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<view class="fui-filter--wrap">
|
||||
<fui-filter-bar :items="items" @change="change"></fui-filter-bar>
|
||||
<fui-dropdown-menu :isMask="false" :options="itemList" ref="ddm" left="0" minWidth="750" splitLine
|
||||
@click="itemClick">
|
||||
</fui-dropdown-menu>
|
||||
</view>
|
||||
<view class="fui-section__title">配置项调整</view>
|
||||
<fui-filter-bar :items="items2"></fui-filter-bar>
|
||||
<view class="fui-section__title">互不排斥/选项共存</view>
|
||||
<view class="fui-filter--wrap">
|
||||
<fui-filter-bar coexist :items="items4" @change="change4"></fui-filter-bar>
|
||||
<fui-dropdown-menu :isMask="false" :options="itemStatus" ref="statusRef" left="0" minWidth="750" splitLine @click="statusClick">
|
||||
</fui-dropdown-menu>
|
||||
<fui-dropdown-menu :isMask="false" :options="itemTypes" ref="typesRef" left="0" minWidth="750" splitLine @click="typeClick">
|
||||
</fui-dropdown-menu>
|
||||
</view>
|
||||
<view class="fui-section__title">颜色调整 / 默认选中</view>
|
||||
<fui-filter-bar :items="items3" background="#222" color="#A3A3A3" lineColor="#333" activeColor="#465CFF">
|
||||
</fui-filter-bar>
|
||||
<!--筛选-->
|
||||
<fui-drawer :show="show" @close="closeDrawer">
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<view class="fui-filter__list" v-for="(item,index) in filters" :key="index">
|
||||
<view class="fui-filter__title">{{item.title}}</view>
|
||||
<view class="fui-filter__item">
|
||||
<view class="fui-filter__item-btn" :class="{'fui-item__btn-active':isActive(modal.value)}"
|
||||
@tap="attrClick(modal.value)" v-for="(modal,idx) in item.data" :key="idx">
|
||||
{{modal.text}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</fui-drawer>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
itemList: ['综合', '信用'],
|
||||
filters: [{
|
||||
title: '品牌',
|
||||
data: [{
|
||||
text: '南极人',
|
||||
value: 1
|
||||
}, {
|
||||
text: '易文',
|
||||
value: 2
|
||||
}, {
|
||||
text: '宿云月',
|
||||
value: 3
|
||||
}, {
|
||||
text: 'RAMPO/乱步乱步',
|
||||
value: 4
|
||||
}]
|
||||
}],
|
||||
brands: [],
|
||||
items: [{
|
||||
text: '综合',
|
||||
value: '',
|
||||
type: 'dropdown',
|
||||
active: false
|
||||
}, {
|
||||
text: '价格',
|
||||
type: 'sort',
|
||||
sort: 1
|
||||
}, {
|
||||
text: '销量',
|
||||
type: 'text',
|
||||
active: false
|
||||
}, {
|
||||
type: 'switch',
|
||||
switch: 1
|
||||
}, {
|
||||
text: '筛选',
|
||||
value: '',
|
||||
type: 'filter'
|
||||
}],
|
||||
items2: [{
|
||||
text: '综合',
|
||||
value: '',
|
||||
type: 'dropdown',
|
||||
active: false
|
||||
}, {
|
||||
text: '价格',
|
||||
type: 'sort',
|
||||
active: false,
|
||||
sort: 1
|
||||
}, {
|
||||
text: '评论',
|
||||
type: 'sort',
|
||||
sort: 1
|
||||
}],
|
||||
items3: [{
|
||||
text: 'Updated',
|
||||
value: '',
|
||||
type: 'dropdown',
|
||||
active: false
|
||||
}, {
|
||||
text: 'Forks',
|
||||
type: 'text',
|
||||
active: false,
|
||||
sort: 1
|
||||
}, {
|
||||
text: 'Stars',
|
||||
type: 'sort',
|
||||
value: 'asc',
|
||||
sort: 1
|
||||
}, {
|
||||
text: '筛选',
|
||||
value: '',
|
||||
type: 'filter'
|
||||
}],
|
||||
items4:[{
|
||||
text: '状态',
|
||||
type: 'dropdown',
|
||||
active: false
|
||||
},{
|
||||
text: '类型',
|
||||
type: 'dropdown',
|
||||
active: false
|
||||
}, {
|
||||
text: '时间',
|
||||
type: 'sort',
|
||||
sort: 1
|
||||
}],
|
||||
itemStatus: ['已完成', '待审核', '审核中'],
|
||||
itemTypes: ['PC网站', '小程序', '微信公众号']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
isActive(val) {
|
||||
return ~this.brands.indexOf(val)
|
||||
},
|
||||
attrClick(val) {
|
||||
let attrs = [...this.brands];
|
||||
let index = attrs.indexOf(val)
|
||||
if (index !== -1) {
|
||||
attrs.splice(index, 1)
|
||||
|
||||
} else {
|
||||
attrs.push(val)
|
||||
}
|
||||
this.brands = attrs;
|
||||
let items = [...this.items]
|
||||
let vals = this.brands.join(',')
|
||||
//filter 类型需要设置value来表示选中
|
||||
items[4].value = vals
|
||||
this.fui.toast(`筛选：${vals?vals:'全部'}`)
|
||||
this.items = items;
|
||||
},
|
||||
changeData(items, idx) {
|
||||
items.forEach((item, index) => {
|
||||
if (index !== idx && item.type !== 'filter' && item.type !== 'switch') {
|
||||
if (item.type === 'sort') {
|
||||
item.sort = 1;
|
||||
}
|
||||
item.active = false;
|
||||
item.value = ''
|
||||
}
|
||||
})
|
||||
return items
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
let items = [...this.items]
|
||||
let item = items[0]
|
||||
item.text = e.text;
|
||||
//dropdown 类型需要设置value表示选中，不可为 0 或者 false 类型值
|
||||
item.value = e.text;
|
||||
item.active = false;
|
||||
this.items = this.changeData(items, 0)
|
||||
},
|
||||
closeDrawer(e) {
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
this.items = e.items;
|
||||
let item = this.items[e.index]
|
||||
if (item.type === 'dropdown') {
|
||||
if (item.active) {
|
||||
this.$refs.ddm.show();
|
||||
} else {
|
||||
this.$refs.ddm.close();
|
||||
}
|
||||
} else if (item.type === 'sort') {
|
||||
this.fui.toast(item.text + ' ' + item.value)
|
||||
this.changeData(this.items, e.index)
|
||||
} else if (item.type === 'text') {
|
||||
this.fui.toast(item.text)
|
||||
this.changeData(this.items, e.index)
|
||||
} else if (item.type === 'switch') {
|
||||
this.fui.toast('切换为：' + (item.switch === 1 ? '大图' : '列表'))
|
||||
} else if (item.type === 'filter') {
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
change4(e){
|
||||
console.log(e)
|
||||
this.items4 = e.items;
|
||||
let item = this.items4[e.index]
|
||||
if(e.index==0){
|
||||
if (item.active) {
|
||||
this.$refs.statusRef.show();
|
||||
} else {
|
||||
this.$refs.statusRef.close();
|
||||
}
|
||||
}else if(e.index==1){
|
||||
if (item.active) {
|
||||
this.$refs.typesRef.show();
|
||||
} else {
|
||||
this.$refs.typesRef.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
statusClick(e){
|
||||
console.log(e)
|
||||
let items = [...this.items4]
|
||||
let item = items[0]
|
||||
item.text = e.text;
|
||||
//dropdown 类型需要设置value表示选中，不可为 0 或者 false 类型值
|
||||
item.value = e.text;
|
||||
item.active = false;
|
||||
},
|
||||
typeClick(e){
|
||||
console.log(e)
|
||||
let items = [...this.items4]
|
||||
let item = items[1]
|
||||
item.text = e.text;
|
||||
//dropdown 类型需要设置value表示选中，不可为 0 或者 false 类型值
|
||||
item.value = e.text;
|
||||
item.active = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
.fui-filter--wrap{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
/* 筛选 */
|
||||
.fui-scroll__view {
|
||||
width: 640rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-filter__title {
|
||||
width: 100%;
|
||||
padding: 32rpx 24rpx 24rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-filter__list {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fui-filter__item {
|
||||
width: 100%;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fui-filter__item-btn {
|
||||
width: 32%;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
background: #f7f7f7;
|
||||
display: inline-block;
|
||||
padding: 0 8rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 2%;
|
||||
font-size: 26rpx;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 1rpx solid #f7f7f7;
|
||||
}
|
||||
|
||||
.fui-filter__item-btn:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.fui-item__btn-active {
|
||||
background: #F1F4FA;
|
||||
color: #465CFF;
|
||||
border-color: #465CFF;
|
||||
}
|
||||
|
||||
/* 筛选 */
|
||||
</style>
|
||||
126
pages/component/expand/imageCropper/imageCropper.vue
Normal file
126
pages/component/expand/imageCropper/imageCropper.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<fui-image-cropper :src="src" ref="cropper"></fui-image-cropper>
|
||||
<view class="fui-cropper__tabbar">
|
||||
<text class="fui-text" @tap.stop="chooseImage">选择</text>
|
||||
<view class="fui-flex__center fui-flex__1" @tap.stop="rotate">
|
||||
<fui-icon name="rotate" color="#fff" size="52"></fui-icon>
|
||||
</view>
|
||||
<text class="fui-text" @tap.stop="cutting">确定</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-BAIDU -->
|
||||
<fui-gallery :urls="urls" :show="show" @hide="hideGallery"></fui-gallery>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
urls: [],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.src) {
|
||||
this.src = e.src
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideGallery() {
|
||||
this.show = false
|
||||
},
|
||||
chooseImage(e) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: res => {
|
||||
this.src = res.tempFilePaths[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
rotate() {
|
||||
this.$refs.cropper && this.$refs.cropper.rotate()
|
||||
},
|
||||
cutting() {
|
||||
if (this.$refs.cropper) {
|
||||
this.$refs.cropper.cutting((filePath) => {
|
||||
console.log(filePath)
|
||||
// #ifndef MP-BAIDU
|
||||
uni.previewImage({
|
||||
urls: [filePath]
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-BAIDU
|
||||
this.urls = [filePath]
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 50)
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-cropper__tabbar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
height: 120rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top: 0.5px solid #666;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-cropper__tabbar::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top: 1px solid #666;
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 0;
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
59
pages/component/expand/lazyload/lazyload.vue
Normal file
59
pages/component/expand/lazyload/lazyload.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Lazyload <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Lazyload 图片懒加载，增强用户体验，减少http的请求，减少服务器端压力。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-lazyload src="https://res.firstui.cn/static/images/common/img_logo.png"></fui-lazyload>
|
||||
<view class="fui-text">请继续往下滑动</view>
|
||||
<view style="width:1px;height: 600px;"></view>
|
||||
<fui-lazyload src="https://res.firstui.cn/static/images/common/img_logo.png"></fui-lazyload>
|
||||
<view style="width:1px;height: 200px;"></view>
|
||||
<fui-lazyload :src="src"></fui-lazyload>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.src = 'https://res.firstui.cn/static/images/common/logo.png'
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-weight: normal;
|
||||
font-size: 30rpx;
|
||||
padding: 96rpx 0;
|
||||
}
|
||||
</style>
|
||||
127
pages/component/expand/licensePlate/licensePlate.vue
Normal file
127
pages/component/expand/licensePlate/licensePlate.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 14 0 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">LicensePlate <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">LicensePlate 车牌号键盘，用于车牌号的输入。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<text class="fui-title">请输入车牌号</text>
|
||||
<view class="fui-si__wrap">
|
||||
<text class="fui-si__tip">新能源</text>
|
||||
<fui-single-input :native="false" borderColor="#ccc" border="1" borderWidth="1" radius="16"
|
||||
cursorHeight="40" :length="8" width="80" height="80" size="40" padding="32" :value="value"
|
||||
ref="fui_si" @focus="onFocus">
|
||||
</fui-single-input>
|
||||
</view>
|
||||
<view class="fui-flex__center fui-flex__column">
|
||||
<fui-button type="gray" btn-size="medium" text="默认键盘" bold @click="btnTap(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="暗黑模式" bold :margin="['24rpx']"
|
||||
@click="btnTap(2)"></fui-button>
|
||||
</view>
|
||||
<fui-license-plate ref="plate" :show="show" :theme="theme" :toolbar="toolbar" @click="keyClick" @backspace="backspace" @complete="complete"></fui-license-plate>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
value: '',
|
||||
theme: 'light',
|
||||
toolbar: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onFocus(){
|
||||
if (!this.show) {
|
||||
this.show = true
|
||||
//输入框获得焦点
|
||||
this.$refs.fui_si.initFocus(true)
|
||||
}
|
||||
},
|
||||
keyClick(e) {
|
||||
console.log(e)
|
||||
//输入的值
|
||||
let val = e.value;
|
||||
if (this.value.length === 8) return
|
||||
this.value += val
|
||||
},
|
||||
complete(e) {
|
||||
this.show = false
|
||||
//输入框失去焦点
|
||||
this.$refs.fui_si.initFocus(false)
|
||||
},
|
||||
backspace(e) {
|
||||
let val = this.value;
|
||||
if (val) {
|
||||
this.value = val.substring(0, val.length - 1)
|
||||
}
|
||||
},
|
||||
btnTap(type) {
|
||||
if (type === 1) {
|
||||
this.theme = 'light'
|
||||
} else {
|
||||
this.theme = 'dark'
|
||||
}
|
||||
// 切换键盘，cn/en
|
||||
// this.$refs.plate.changeKeyboard('en')
|
||||
if (!this.show) {
|
||||
this.show = true
|
||||
//输入框获得焦点
|
||||
|
||||
this.$refs.fui_si.initFocus(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-flex__center {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding-top: 12rpx;
|
||||
padding-bottom: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-si__wrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-si__tip {
|
||||
display: block;
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: -32rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #09BE4F;
|
||||
font-weight: normal;
|
||||
transform: scale(.8);
|
||||
}
|
||||
</style>
|
||||
114
pages/component/expand/overflowHidden/overflowHidden.vue
Normal file
114
pages/component/expand/overflowHidden/overflowHidden.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">OverflowHidden <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">OverflowHidden 内容超出隐藏，主要用于文本内容超出隐藏功能。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">显示一行</view>
|
||||
<view class="fui-oh__wrap">
|
||||
<fui-overflow-hidden :text="text"></fui-overflow-hidden>
|
||||
</view>
|
||||
<view class="fui-section__title">显示两行</view>
|
||||
<view class="fui-oh__wrap">
|
||||
<fui-overflow-hidden :text="text" :rows="isHidden?2:1000">
|
||||
<view class="fui-btn__text" :class="{'fui-visible':!isHidden}" @tap="change">{{isHidden?'展开':'收起'}}
|
||||
</view>
|
||||
</fui-overflow-hidden>
|
||||
</view>
|
||||
<view class="fui-section__title">调整样式，显示三行</view>
|
||||
<view class="fui-oh__wrap">
|
||||
<fui-overflow-hidden :text="text" :size="28" color="#FFB703" :rows="3"></fui-overflow-hidden>
|
||||
</view>
|
||||
<view class="fui-section__title">渐变隐藏</view>
|
||||
<view class="fui-oh__wrap">
|
||||
<!--注意：Nvue端使用插槽时，文本及其他内容元素样式需自行设置-->
|
||||
<fui-overflow-hidden :text="text2" :size="28" color="#FF2B2B" type="2" gradientColor="#FFFFFF"
|
||||
height="200rpx" :visible="visible"></fui-overflow-hidden>
|
||||
<fui-button type="gray" btn-size="medium" :text="btnText" bold :margin="['48rpx','auto']"
|
||||
@click="readMore">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//注意：Nvue端使用插槽时，文本及其他内容元素样式需自行设置
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！',
|
||||
text2: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！此外FirstUI准备打造其他版本框架，不仅仅局限于uni-app，目前考虑的有微信小程序原生版本、支付宝原生版本、Taro版本等。目前已上架的除uni-app外，微信小程序原生版本已于2022年02月正式上线。',
|
||||
visible: false,
|
||||
isHidden: true,
|
||||
btnText: '点击查看所有内容',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change() {
|
||||
this.isHidden = !this.isHidden
|
||||
},
|
||||
readMore() {
|
||||
if (this.visible) {
|
||||
this.visible = false
|
||||
this.btnText = '点击查看所有内容'
|
||||
} else {
|
||||
this.visible = true
|
||||
this.btnText = '点击隐藏内容'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-oh__wrap {
|
||||
width: 100%;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.fui-btn__text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
color: var(--fui-color-primary);
|
||||
cursor: pointer;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.fui-btn__text::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -48rpx;
|
||||
height: 100%;
|
||||
width: 48rpx;
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 10%, #fff);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fui-visible {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.fui-visible::after {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
123
pages/component/expand/puzzleVerify/puzzleVerify.vue
Normal file
123
pages/component/expand/puzzleVerify/puzzleVerify.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 40 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">PuzzleVerify <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">PuzzleVerify 滑块拼图验证，根据提示进行行为验证。此组件为 SliderCaptcha 组件的功能补充，详见文档。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="点击按钮进行验证" bold :margin="['48rpx']"
|
||||
@click="btnVerify">
|
||||
</fui-button>
|
||||
|
||||
</view>
|
||||
<fui-puzzle-verify :width="width" :height="height" :src="src" :cutSrc="cutSrc" :x="40" :y="49" @init="init"
|
||||
@verify="verify" ref="pvRef">
|
||||
</fui-puzzle-verify>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resUrl: this.fui.resUrl(),
|
||||
src: '',
|
||||
cutSrc: '',
|
||||
width: 300,
|
||||
height: 150,
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//rpx转化为px
|
||||
getPx(value) {
|
||||
let val = parseInt(uni.upx2px(Number(value)))
|
||||
return val % 2 === 0 ? val : val + 1
|
||||
},
|
||||
//初始化事件中请求接口获取 有黑块的背景图、裁剪图、位置等信息
|
||||
//画布大小可使用rpx转化为px传回给后端使用，动态生成背景图，这样可做到自适应，适配所有终端
|
||||
//示例使用的是已生成好的图，所以使用的是固定宽高
|
||||
init(e) {
|
||||
//裁剪图片宽度，固定为44（px）
|
||||
let cutGraphWidth = e.cutGraphWidth
|
||||
this.width = 300 //this.getPx(640)
|
||||
this.height = 150 //this.getPx(320)
|
||||
|
||||
//以上参数传给后端获取验证信息
|
||||
//示例仅为演示，使用预处理内容
|
||||
this.getVerifyImage()
|
||||
},
|
||||
//注意：为了避免图片显示失真，后端处理图片大小需按照提供的参数等比放大倍数，可根据设备pixelRatio（设备像素比）等比放大
|
||||
getVerifyImage() {
|
||||
//以下由后端获取返回（x1：裁剪位置由后端存储，不返回）
|
||||
//带黑块的背景图，后端接口提供
|
||||
this.src = `${this.resUrl}/component/sc/bg_img_verify.png`
|
||||
//裁剪下的图片，后端接口提供
|
||||
this.cutSrc = `${this.resUrl}/component/sc/cut_img.png`
|
||||
//裁剪图在背景图内的left值 ，后端接口提供
|
||||
this.x = 40;
|
||||
//裁剪图在背景图内的top值 ，后端接口提供
|
||||
this.y = 49
|
||||
},
|
||||
btnVerify() {
|
||||
//需要等组件初始化完成
|
||||
this.$refs.pvRef && this.$refs.pvRef.show()
|
||||
},
|
||||
//开始验证，将返回的滑动距离传给后端进行验证
|
||||
verify(e) {
|
||||
//示例仅为演示，以下为模拟后端验证
|
||||
|
||||
//滑动距离
|
||||
let slipDistance = e.slipDistance
|
||||
//验证方法，参考js方法自行转为后端方法
|
||||
//x1为裁剪黑块的left值，该值仅后端知道，示例使用的预处理数据，此处仅为演示
|
||||
let x1 = 222;
|
||||
//width为需要滑动的总距离
|
||||
let width = x1 - this.x
|
||||
//误差范围，后端自行定义（px）
|
||||
let range = 3
|
||||
//滑动距离 减去 总距离 的绝对值 小于等于误差范围即为验证通过
|
||||
if (Math.abs(slipDistance - width) <= range) {
|
||||
this.success()
|
||||
} else {
|
||||
this.fui.toast('验证失败！')
|
||||
//重置验证，nvue下需延时重置
|
||||
setTimeout(() => {
|
||||
this.$refs.pvRef.reset()
|
||||
}, 50)
|
||||
//当失败多次时，可重新生成验证数据返回
|
||||
//...
|
||||
}
|
||||
},
|
||||
success() {
|
||||
this.fui.toast('验证通过！')
|
||||
setTimeout(() => {
|
||||
//关闭验证框
|
||||
this.$refs.pvRef.closeVerify()
|
||||
}, 200)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
50
pages/component/expand/result-eg/result-eg.vue
Normal file
50
pages/component/expand/result-eg/result-eg.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view v-if="type==='custom'">
|
||||
<fui-result :type="type" :title="title" :descr="descr">
|
||||
<template v-slot:icon>
|
||||
<fui-icon name="warning" color="#FF2B2B" :size="128"></fui-icon>
|
||||
</template>
|
||||
<fui-button btn-size="medium" text="主要操作" :type="btnType" bold :margin="['48rpx','0','24rpx']">
|
||||
</fui-button>
|
||||
<fui-button btn-size="medium" text="次要操作" type="gray" :color="color" bold></fui-button>
|
||||
</fui-result>
|
||||
</view>
|
||||
<view v-else>
|
||||
<fui-result :type="type" :title="title" :descr="descr">
|
||||
<fui-button btn-size="medium" text="主要操作" :type="btnType" bold :margin="['48rpx','0','24rpx']">
|
||||
</fui-button>
|
||||
<fui-button btn-size="medium" text="次要操作" type="gray" :color="color" bold></fui-button>
|
||||
</fui-result>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'success',
|
||||
btnType: 'success',
|
||||
color: '#09BE4F',
|
||||
title: '操作成功',
|
||||
descr: 'Result 结果页，在页面中组织图标、文字等内容，向用户反馈操作结果'
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let type = Number(e.type || 1)
|
||||
this.title = ['操作成功', '操作失败', '操作失败', '正在审核', '操作标题'][type - 1]
|
||||
this.type = ['success', 'warning', 'fail', 'waiting', 'custom'][type - 1]
|
||||
this.btnType = ['success', 'warning', 'primary', 'primary', 'danger'][type - 1]
|
||||
this.color = ['#09BE4F', '#FFB703', '#465CFF', '#465CFF', '#FF2B2B'][type - 1]
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
53
pages/component/expand/result/result.vue
Normal file
53
pages/component/expand/result/result.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 140 7 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Result <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Result 结果页，在页面中组织图标、文字等内容，向用户反馈操作结果。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="成功 success" bold :margin="['24rpx']"
|
||||
@click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="警告 warning" bold @click="href(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="失败 fail" bold :margin="['24rpx']"
|
||||
@click="href(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="等待 waiting" bold @click="href(4)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义图标" bold :margin="['24rpx']"
|
||||
@click="href(5)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
this.fui.href(`../result-eg/result-eg?type=${type}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
110
pages/component/expand/rotateVerify/rotateVerify.vue
Normal file
110
pages/component/expand/rotateVerify/rotateVerify.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 614 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">RotateVerify <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">RotateVerify 旋转验证码，根据提示进行行为验证。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="点击按钮进行验证" bold :margin="['48rpx']"
|
||||
@click="btnVerify">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-rotate-verify ref="rv" :src="src" @verify="verify"></fui-rotate-verify>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//图片地址（后端获取返回并已做初始角度旋转）
|
||||
src: '',
|
||||
//图片初始化旋转的角度（当后端进行验证时不需要返回）
|
||||
initAngle: 0,
|
||||
//验证结果误差范围 deg
|
||||
range: 0,
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getVerifyImage()
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
getVerifyImage() {
|
||||
//获取需要验证的图片，后端处理旋转并返回图片地址
|
||||
//此处仅为演示省略请求，使用预先处理的图片
|
||||
this.src = `${this.resUrl}/component/verify/img_logo.jpeg`
|
||||
//仅当在前端验证结果时返回
|
||||
this.initAngle = 180
|
||||
//仅当在前端验证结果时返回
|
||||
this.range = 10
|
||||
},
|
||||
btnVerify() {
|
||||
//需要等组件初始化完成
|
||||
this.$refs.rv && this.$refs.rv.show()
|
||||
},
|
||||
/*
|
||||
验证结果，仅前端验证时使用（模拟后端验证）
|
||||
@param {Number} angle 旋转角度
|
||||
@param {Number} initAngle 图片初始化时旋转角度，后端返回 [建议区间 -330deg<angle <-30deg 或 30deg<angle<330deg]
|
||||
@param {Number} range 可误差角度范围，约定或后端返回
|
||||
*/
|
||||
verifyRes(angle, initAngle, range) {
|
||||
let res = false
|
||||
if (Math.abs(angle + initAngle - 360) <= range || Math.abs(angle + initAngle) <= range) {
|
||||
res = true
|
||||
}
|
||||
return res
|
||||
},
|
||||
verify(e) {
|
||||
console.log(e)
|
||||
//验证旋转角度是否正确
|
||||
//e.angle 旋转角度，注意返回角度中可能存在多位小数，请按需处理
|
||||
console.log(e.angle)
|
||||
//可将结果发送至后端进行验证
|
||||
//...
|
||||
//此处为演示仅在前端进行验证
|
||||
// this.$refs.rv.verifyRes(e.angle, 180, 5, (res) => {
|
||||
// console.log(res)
|
||||
// })
|
||||
//此步骤可在后端进行完成（后端验证时仅传e.angle参数即可）
|
||||
let res = this.verifyRes(e.angle, this.initAngle, this.range)
|
||||
if (res) {
|
||||
//验证通过
|
||||
this.$refs.rv.success();
|
||||
this.fui.toast('验证通过！')
|
||||
setTimeout(() => {
|
||||
//关闭验证框
|
||||
this.$refs.rv.closeVerify()
|
||||
}, 300)
|
||||
} else {
|
||||
//验证失败
|
||||
//验证失败多次可重新获取验证图片
|
||||
this.$refs.rv.fail()
|
||||
// this.fui.toast('验证失败！')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
73
pages/component/expand/safeArea/safeArea.vue
Normal file
73
pages/component/expand/safeArea/safeArea.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SafeArea <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SafeArea 底部安全区域，用于适配iphonex等机型底部安全区域。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-content">
|
||||
<view class="fui-content__text">向下滑动~</view>
|
||||
<fui-divider text="底部内容"></fui-divider>
|
||||
<fui-safe-area background="#F1F4FA"></fui-safe-area>
|
||||
</view>
|
||||
<view class="fui-tabbar__box">
|
||||
<view class="fui-tabbar__content">
|
||||
底部tabbar内容~
|
||||
</view>
|
||||
<fui-safe-area></fui-safe-area>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd{
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
.fui-content{
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fui-content__text{
|
||||
width: 100%;
|
||||
height: 1200px;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fui-tabbar__box{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.fui-tabbar__content{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
180
pages/component/expand/shareSheet/shareSheet.vue
Normal file
180
pages/component/expand/shareSheet/shareSheet.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">ShareSheet <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">ShareSheet 分享面板，主要用于分享或相关操作使用。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="内容两端对齐" bold :margin="['24rpx']"
|
||||
@click="shareSheet(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="展示多行" bold @click="shareSheet(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="更换颜色" bold :margin="['24rpx']" @click="shareSheet(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-share-sheet isFull padding="48" background="#fff" lineColor="#eee" :show="visible" :itemList="items"
|
||||
maskClosable @cancel="onCancel(1)" @click="onTap">
|
||||
</fui-share-sheet>
|
||||
|
||||
<fui-share-sheet :show="show" :itemList="itemList" itemBackground="#fff" @click="onClick($event,1)"
|
||||
@cancel="onCancel(2)">
|
||||
</fui-share-sheet>
|
||||
|
||||
<fui-share-sheet title="分享给好友" background="#222" itemBackground="#333" btnColor="#d1d1d1" lineColor="#333"
|
||||
:show="show2" :itemList="itemList2" @click="onClick($event,2)" @cancel="onCancel(3)">
|
||||
</fui-share-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
items: [{
|
||||
name: 'wechat',
|
||||
color: '#07c160',
|
||||
text: '微信好友',
|
||||
openType: 'share'
|
||||
}, {
|
||||
name: 'moments',
|
||||
color: '#44DC6B',
|
||||
text: '朋友圈'
|
||||
}, {
|
||||
name: 'qq',
|
||||
color: '#3FB7F5',
|
||||
text: 'QQ'
|
||||
}, {
|
||||
name: 'sina',
|
||||
color: '#D8070B',
|
||||
text: '新浪微博'
|
||||
}],
|
||||
itemList: [],
|
||||
show: false,
|
||||
itemList2: [],
|
||||
show2: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.itemList = [
|
||||
[{
|
||||
name: 'wechat',
|
||||
size: 72,
|
||||
color: '#07c160',
|
||||
text: '微信好友',
|
||||
openType: 'share'
|
||||
|
||||
}, {
|
||||
name: 'moments',
|
||||
size: 72,
|
||||
color: '#44DC6B',
|
||||
text: '朋友圈'
|
||||
}, {
|
||||
name: 'qq',
|
||||
size: 72,
|
||||
color: '#3FB7F5',
|
||||
text: 'QQ'
|
||||
}, {
|
||||
name: 'sina',
|
||||
size: 72,
|
||||
color: '#D8070B',
|
||||
text: '新浪微博'
|
||||
}, {
|
||||
name: 'browser',
|
||||
size: 72,
|
||||
color: '#465CFF',
|
||||
text: '浏览器打开'
|
||||
}, {
|
||||
name: 'community-fill',
|
||||
size: 72,
|
||||
color: '#FFB703',
|
||||
text: '社区'
|
||||
}],
|
||||
[{
|
||||
name: 'picture',
|
||||
size: 56,
|
||||
text: '分享海报'
|
||||
}, {
|
||||
name: 'link',
|
||||
size: 56,
|
||||
text: '复制链接'
|
||||
}, {
|
||||
name: 'search',
|
||||
size: 56,
|
||||
text: '搜索'
|
||||
}, {
|
||||
name: 'refresh',
|
||||
size: 56,
|
||||
text: '刷新'
|
||||
}, {
|
||||
name: 'help',
|
||||
size: 56,
|
||||
text: '帮助'
|
||||
}, {
|
||||
name: 'edit',
|
||||
size: 56,
|
||||
text: '反馈',
|
||||
openType: 'feedback'
|
||||
}]
|
||||
]
|
||||
|
||||
this.itemList2 = JSON.parse(JSON.stringify(this.itemList))
|
||||
this.itemList2.map((item, index) => {
|
||||
if (index === 1) {
|
||||
item.map(obj => {
|
||||
obj.color = "#d1d1d1"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
shareSheet(type) {
|
||||
if (type === 1) {
|
||||
this.visible = true;
|
||||
} else if (type === 2) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.show2 = true
|
||||
}
|
||||
},
|
||||
onTap(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(e.item.text)
|
||||
this.visible = false
|
||||
},
|
||||
onClick(e, type) {
|
||||
console.log(e)
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else {
|
||||
this.show2 = false
|
||||
}
|
||||
},
|
||||
onCancel(type) {
|
||||
if (type == 1) {
|
||||
this.visible = false
|
||||
} else if (type == 2) {
|
||||
this.show = false
|
||||
} else {
|
||||
this.show2 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
44
pages/component/expand/singleInput-A/singleInput-A.vue
Normal file
44
pages/component/expand/singleInput-A/singleInput-A.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SingleInput <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SingleInput 单输入框，每个输入框只允许输入一个字符，可自定义样式，可设置输入长度。</view>
|
||||
</view>
|
||||
<view class="fui-page-bd">
|
||||
<fui-single-input type="number" isFocus @input="onInput" @complete="onComplete"></fui-single-input>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
//e.detail.value
|
||||
console.log(e)
|
||||
},
|
||||
onComplete(e) {
|
||||
//e.detail.value
|
||||
console.log(e)
|
||||
this.fui.toast(`您输入的验证码为：${e.detail.value}`)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
46
pages/component/expand/singleInput-B/singleInput-B.vue
Normal file
46
pages/component/expand/singleInput-B/singleInput-B.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SingleInput <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SingleInput 单输入框，每个输入框只允许输入一个字符，可自定义样式，可设置输入长度。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-single-input border="1" borderWidth="1" radius="16" activeColor="#FFB703" cursorHeight="40"
|
||||
cursorColor="#FFB703" :length="6" width="80" height="80" size="24" password isFocus @input="onInput" @complete="onComplete">
|
||||
</fui-single-input>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
//e.detail.value
|
||||
console.log(e)
|
||||
},
|
||||
onComplete(e) {
|
||||
//e.detail.value
|
||||
console.log(e)
|
||||
this.fui.toast(`您输入的密码为：${e.detail.value}`)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
51
pages/component/expand/singleInput/singleInput.vue
Normal file
51
pages/component/expand/singleInput/singleInput.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SingleInput <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SingleInput 单输入框，每个输入框只允许输入一个字符，主要用于验证码、密码输入框等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="验证码输入框" bold :margin="['24rpx']"
|
||||
@click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="密码输入框" bold @click="href(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="结合自定义键盘" bold :margin="['24rpx']" @click="dk">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
let url = type == 1 ? '../singleInput-A/singleInput-A' : '../singleInput-B/singleInput-B'
|
||||
this.fui.href(url)
|
||||
},
|
||||
dk() {
|
||||
this.fui.href('../digitalKeyboard/digitalKeyboard')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
59
pages/component/expand/slideVerify/slideVerify.vue
Normal file
59
pages/component/expand/slideVerify/slideVerify.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 40 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SlideVerify <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SlideVerify 滑动验证码，根据提示进行行为验证。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-slide-verify @success="success" @fail="fail"></fui-slide-verify>
|
||||
<view class="fui-section__title">调整样式</view>
|
||||
<fui-slide-verify background="rgba(9, 190, 79, .05)" activeBgColor="#09BE4F" passColor="#09BE4F"
|
||||
lineColor="#FFB703" @success="success" @fail="fail"></fui-slide-verify>
|
||||
<view class="fui-section__title">重置验证</view>
|
||||
<fui-slide-verify ref="sv" @success="success" @fail="fail"></fui-slide-verify>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="重置验证" bold :margin="['40rpx']"
|
||||
@click="reset">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
success() {
|
||||
this.fui.toast('验证通过！')
|
||||
},
|
||||
fail() {
|
||||
this.fui.toast('验证失败！')
|
||||
},
|
||||
reset() {
|
||||
this.$refs.sv && this.$refs.sv.reset()
|
||||
this.fui.toast('重置成功！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
84
pages/component/expand/sliderCaptcha/sliderCaptcha.vue
Normal file
84
pages/component/expand/sliderCaptcha/sliderCaptcha.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 407 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SliderCaptcha <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SliderCaptcha 滑块拼图验证，根据提示进行行为验证。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="点击按钮进行验证" bold :margin="['48rpx']"
|
||||
@click="btnVerify">
|
||||
</fui-button>
|
||||
</view>
|
||||
<!--务必保证属性 imageType 正确，H5端注意处理图片资源跨域问题-->
|
||||
<fui-slider-captcha ref="scRef" :src="src" @success="success" @fail="fail">
|
||||
</fui-slider-captcha>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//图片地址（默认宽高比2:1）
|
||||
src: '',
|
||||
resUrl: this.fui.resUrl(),
|
||||
index: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getVerifyImage()
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
getVerifyImage() {
|
||||
//获取需要验证的图片
|
||||
let index = this.index
|
||||
index++;
|
||||
if (index > 3) {
|
||||
index = 1
|
||||
}
|
||||
this.index = index
|
||||
this.src = `${this.resUrl}/component/sc/img_sc_${index}.png`
|
||||
},
|
||||
btnVerify() {
|
||||
//需要等组件初始化完成
|
||||
this.$refs.scRef && this.$refs.scRef.show()
|
||||
},
|
||||
success(e) {
|
||||
this.fui.toast('验证通过！')
|
||||
setTimeout(() => {
|
||||
//关闭验证框
|
||||
this.$refs.scRef.closeVerify()
|
||||
}, 200)
|
||||
},
|
||||
fail(e) {
|
||||
//当验证失败多次时，可在这里做相应处理
|
||||
let times = e.times
|
||||
this.fui.toast('验证失败！')
|
||||
if (times >= 3) {
|
||||
this.getVerifyImage()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
173
pages/component/expand/swiperDot/swiperDot.vue
Normal file
173
pages/component/expand/swiperDot/swiperDot.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 1 4 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SwiperDot <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SwiperDot 轮播图指示点，一般用于banner轮播图。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">默认使用</view>
|
||||
<fui-swiper-dot :items="items" :current="current">
|
||||
<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
|
||||
:interval="4000" :duration="150">
|
||||
<swiper-item v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</fui-swiper-dot>
|
||||
<view class="fui-section__title">改变圆点大小</view>
|
||||
<fui-swiper-dot :styles="styles" :items="items" :current="current2">
|
||||
<swiper previous-margin="60rpx" next-margin="60rpx" class="fui-banner__box" @change="change2" circular
|
||||
:indicator-dots="false" autoplay :interval="5000" :duration="150">
|
||||
<swiper-item v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-banner__cell" :class="{'fui-item__scale':current2!==index}"
|
||||
:style="{background:item.background}">First UI 组件库</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</fui-swiper-dot>
|
||||
<view class="fui-section__title">数字索引</view>
|
||||
<fui-swiper-dot type="2" :styles="styles2" :items="items" :current="current3">
|
||||
<swiper class="fui-banner__wrap" @change="change3" circular :indicator-dots="false" autoplay
|
||||
:interval="5000" :duration="150">
|
||||
<swiper-item v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</fui-swiper-dot>
|
||||
<view class="fui-section__title">展示标题</view>
|
||||
<fui-swiper-dot type="3" field="title" :styles="styles3" :items="items" :current="current4">
|
||||
<swiper class="fui-banner__wrap" @change="change4" circular :indicator-dots="false" autoplay
|
||||
:interval="4500" :duration="150">
|
||||
<swiper-item v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</fui-swiper-dot>
|
||||
<view class="fui-section__title">固定于右侧</view>
|
||||
<fui-swiper-dot type="4" :styles="styles4" :items="items" :current="current5">
|
||||
<swiper class="fui-banner__wrap" @change="change5" circular :indicator-dots="false" autoplay
|
||||
:interval="4000" :duration="150">
|
||||
<swiper-item v-for="(item,index) in items" :key="index">
|
||||
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</fui-swiper-dot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
current2: 0,
|
||||
current3: 0,
|
||||
current4: 0,
|
||||
current5: 0,
|
||||
items: [{
|
||||
background: '#09BE4F',
|
||||
title: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
|
||||
}, {
|
||||
background: '#FFB703',
|
||||
title: 'UI 样式可配置，拓展灵活，轻松适应不同的设计风格。'
|
||||
}, {
|
||||
background: '#B2B2B2',
|
||||
title: '支持App-vue（Android、IOS）、App-Nvue（Android、IOS）。'
|
||||
}],
|
||||
styles: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
activeWidth: 24
|
||||
},
|
||||
styles2: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
background: 'rgba(255, 43, 43, .1)',
|
||||
activeBackground: '#FF2B2B'
|
||||
},
|
||||
styles3: {
|
||||
height: 80,
|
||||
bottom: 0
|
||||
},
|
||||
styles4: {
|
||||
width: 68,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
change2(e) {
|
||||
this.current2 = e.detail.current;
|
||||
},
|
||||
change3(e) {
|
||||
this.current3 = e.detail.current;
|
||||
},
|
||||
change4(e) {
|
||||
this.current4 = e.detail.current;
|
||||
},
|
||||
change5(e) {
|
||||
this.current5 = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-banner__item {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fui-banner__wrap {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
|
||||
.fui-banner__box {
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.fui-banner__cell {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 24rpx;
|
||||
transition: transform .1s linear;
|
||||
}
|
||||
|
||||
.fui-item__scale {
|
||||
transform: scale3d(.9, .9, 1);
|
||||
}
|
||||
</style>
|
||||
157
pages/component/expand/table/table.vue
Normal file
157
pages/component/expand/table/table.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 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">Table <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Table 表格，用于展示多条结构类似的数据。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-table :itemList="tableData" :header="headerData" ref="tableRef"></fui-table>
|
||||
<view class="fui-section__title">横向铺满/斑马纹</view>
|
||||
<fui-table full stripe :itemList="tableData" :header="headerData" @rowClick="rowClick"></fui-table>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="fui-section__title">行列固定/排序</view>
|
||||
<fui-table ref="sortTable" fixed height="600" :itemList="itemList" :header="header" @click="detail" @sortChange="sortChange"></fui-table>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="fui-section__title">多选/禁用选择/默认选中</view>
|
||||
<!--如果需要初始化时触发 @selectionChange 事件，将属性 initEmitChange 设为true-->
|
||||
<fui-table ref="table" selection full :itemList="tableData" :header="headerData"
|
||||
@selectionChange="change"></fui-table>
|
||||
|
||||
<view class="fui-flex__center fui-flex__column">
|
||||
<fui-button type="gray" btn-size="medium" text="切换第三行选中状态" bold :margin="['48rpx','0','24rpx']"
|
||||
@click="toggleSelection(tableData[2])"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="取消所有选择" bold @click="clearSelection"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from './tableData.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: data.table,
|
||||
itemList: data.itemList,
|
||||
//基础使用 表头
|
||||
headerData: [{
|
||||
prop: 'name',
|
||||
label: '名称'
|
||||
}, {
|
||||
prop: 'province',
|
||||
label: '省份'
|
||||
}, {
|
||||
prop: 'city',
|
||||
label: '城市'
|
||||
}],
|
||||
header: [{
|
||||
prop: 'date',
|
||||
label: '日期',
|
||||
fixed: true,
|
||||
//是否开启排序
|
||||
sortable: true,
|
||||
//排序图标颜色，颜色不传值则使用默认值
|
||||
sortColor: '#465CFF',
|
||||
//必传：排序数据类型
|
||||
sortType: 'date',
|
||||
//排序图标right值，默认40（单位rpx），根据列宽度自行调整至合适的位置
|
||||
// sortRight:40
|
||||
}, {
|
||||
prop: 'ranking',
|
||||
label: '名次',
|
||||
sortable: true,
|
||||
sortColor: '#465CFF',
|
||||
sortType: 'number'
|
||||
}, {
|
||||
prop: 'province',
|
||||
label: '省份',
|
||||
sortColor: '#465CFF',
|
||||
sortable: true,
|
||||
sortType: 'string'
|
||||
}, {
|
||||
prop: 'city',
|
||||
label: '城市'
|
||||
}, {
|
||||
prop: 'address',
|
||||
label: '地址',
|
||||
width: 320
|
||||
}, {
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
type: 3,
|
||||
width: 160,
|
||||
buttons: [{
|
||||
text: '详情',
|
||||
color: '#465CFF',
|
||||
// size: 30,
|
||||
fontWeight: 600
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// const date=String(new Date('2020'))
|
||||
// this.fui.toast(date)
|
||||
//必须等组件加载完成后调用组件方法，刷新header数据时需重新执行方法
|
||||
this.$refs.tableRef && this.$refs.tableRef.columnColorMethod(this.columnNameColor, 'name')
|
||||
this.$refs.tableRef && this.$refs.tableRef.columnColorMethod(this.columnCityColor, 'city')
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
//根据值改变列的颜色 约定接收参数 value：列值，index:行索引
|
||||
columnNameColor(value, index) {
|
||||
let color = '#333'
|
||||
if (value && ~value.indexOf('3')) {
|
||||
color = '#465CFF'
|
||||
}
|
||||
return color;
|
||||
},
|
||||
//根据值改变列的颜色 约定接收参数 value：列值，index:行索引
|
||||
columnCityColor(value, index) {
|
||||
let color = '#333'
|
||||
if (value && ~value.indexOf('浦东')) {
|
||||
color = '#465CFF'
|
||||
}
|
||||
return color;
|
||||
},
|
||||
//行点击
|
||||
rowClick(e) {
|
||||
console.log(e)
|
||||
},
|
||||
detail(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(e.item.province)
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
},
|
||||
toggleSelection(row) {
|
||||
this.$refs.table && this.$refs.table.toggleRowSelection(row)
|
||||
},
|
||||
clearSelection() {
|
||||
this.$refs.table && this.$refs.table.clearSelection()
|
||||
},
|
||||
sortChange(e){
|
||||
//排序数据发生改变时触发
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
161
pages/component/expand/table/tableData.js
Normal file
161
pages/component/expand/table/tableData.js
Normal file
@ -0,0 +1,161 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 14 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
let itemList = [{
|
||||
"date": "2022-09-02",
|
||||
"ranking": 5,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2022-09-01",
|
||||
"ranking": 3,
|
||||
"province": "北京",
|
||||
"city": "北京市",
|
||||
"address": "北京市朝阳区罗马花园b座903a室"
|
||||
}, {
|
||||
"date": "2022-09-03",
|
||||
"ranking": 4,
|
||||
"province": "广东",
|
||||
"city": "深圳市",
|
||||
"address": "深圳市福田区 街道 皇兴大厦"
|
||||
}, {
|
||||
"date": "2022-09-04",
|
||||
"ranking": 2,
|
||||
"province": "广东",
|
||||
"city": "广州市",
|
||||
"address": "广州市天河南街道体育西路183号"
|
||||
}, {
|
||||
"date": "2022-09-05",
|
||||
"ranking": 1,
|
||||
"province": "安徽",
|
||||
"city": "合肥市",
|
||||
"address": "安徽省合肥市包河区马鞍山路99号"
|
||||
}, {
|
||||
"date": "2022-09-06",
|
||||
"ranking": 6,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2022-09-07",
|
||||
"ranking": 7,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2022-09-08",
|
||||
"ranking": 8,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2022-09-09",
|
||||
"ranking": 11,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2022-09-10",
|
||||
"ranking": 10,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2022-09-11",
|
||||
"ranking": 9,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2022-09-12",
|
||||
"ranking": 12,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2022-09-13",
|
||||
"ranking": 13,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2022-09-14",
|
||||
"ranking": 16,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2022-09-15",
|
||||
"ranking": 15,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2022-09-16",
|
||||
"ranking": 14,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2022-08-01",
|
||||
"ranking": 19,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2022-08-02",
|
||||
"ranking": 18,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}, {
|
||||
"date": "2022-08-03",
|
||||
"ranking":17,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1519 弄"
|
||||
}, {
|
||||
"date": "2022-08-04",
|
||||
"ranking":20,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1516 弄"
|
||||
}, {
|
||||
"date": "2022-08-05",
|
||||
"ranking": 22,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1518 弄"
|
||||
}, {
|
||||
"date": "2022-08-06",
|
||||
"ranking": 21,
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
"address": "上海市普陀区金沙江路 1517 弄"
|
||||
}]
|
||||
|
||||
let table = [{
|
||||
"name": "FirstUI 1",
|
||||
"province": "上海",
|
||||
"city": "普陀区",
|
||||
//禁用选择
|
||||
'is_disabled':true
|
||||
}, {
|
||||
"name": "FirstUI 2",
|
||||
"province": "上海",
|
||||
"city": "浦东新区",
|
||||
//默认选中
|
||||
'is_selected':true
|
||||
}, {
|
||||
"name": "FirstUI 3",
|
||||
"province": "上海",
|
||||
"city": "静安区"
|
||||
}, {
|
||||
"name": "FirstUI 4",
|
||||
"province": "上海",
|
||||
"city": "宝山区"
|
||||
}]
|
||||
|
||||
export default {
|
||||
table,
|
||||
itemList
|
||||
}
|
||||
110
pages/component/expand/timer/timer.vue
Normal file
110
pages/component/expand/timer/timer.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 07 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Timer <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Timer 计时器，可累加计时。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">20s自动结束</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-timer :maxTime="20" @end="end"></fui-timer>
|
||||
</view>
|
||||
<view class="fui-section__title">冒号显示为文字</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-timer :isColon="false" :maxTime="40" @end="end"></fui-timer>
|
||||
</view>
|
||||
<view class="fui-section__title">更换样式，显示毫秒</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-timer background="#465CFF" color="#fff" colonColor="#465CFF" isMs msWidth="40" :maxTime="180"
|
||||
@end="end"></fui-timer>
|
||||
</view>
|
||||
<view class="fui-section__title">手动控制</view>
|
||||
<view class="fui-timer__box">
|
||||
<fui-timer ref="timer" isMs :autoStart="false" @end="end"></fui-timer>
|
||||
</view>
|
||||
<fui-grid @click="handleClick">
|
||||
<fui-grid-item backgroundColor="#fff">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="play"></fui-icon>
|
||||
<text>开始</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item backgroundColor="#fff" :index="1">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="suspend"></fui-icon>
|
||||
<text>暂停</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
<fui-grid-item backgroundColor="#fff" :index="2">
|
||||
<view class="fui-grid__cell">
|
||||
<fui-icon name="refresh"></fui-icon>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
end(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`计时结束，时间：${e.totalSeconds}s`)
|
||||
},
|
||||
handleClick(e) {
|
||||
let index = e.detail.index;
|
||||
if (index == 0) {
|
||||
this.$refs.timer.startTiming()
|
||||
} else if (index == 1) {
|
||||
this.$refs.timer.endTimer()
|
||||
} else {
|
||||
this.$refs.timer.resetTimer()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-timer__box {
|
||||
width: 100%;
|
||||
padding-left: 32rpx;
|
||||
padding-bottom: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.fui-grid__cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
65
pages/component/expand/waterfall/waterfall.vue
Normal file
65
pages/component/expand/waterfall/waterfall.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Waterfall <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Waterfall 瀑布流，是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-waterfall @end="onEnd">
|
||||
<fui-waterfall-item v-for="(item,index) in images" :key="index" :src="item">
|
||||
<view class="fui-text">自定义信息</view>
|
||||
</fui-waterfall-item>
|
||||
</fui-waterfall>
|
||||
<fui-loadmore v-if="!isEnd"></fui-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_002.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_007.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_009.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
|
||||
'https://res.firstui.cn/static/images/component/waterfall/P_012.jpeg'
|
||||
],
|
||||
isEnd: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onEnd(e) {
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #B2B2B2
|
||||
}
|
||||
</style>
|
||||
166
pages/component/form/calendar/calendar.vue
Normal file
166
pages/component/form/calendar/calendar.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 40 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Calendar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Calendar 日历，用于选择日期区间。支持单选、多选、区间选择。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">单个日期选择/按年加载,滑动切换月份</view>
|
||||
<fui-calendar @change="change"></fui-calendar>
|
||||
<view class="fui-section__title">多个日期选择/显示农历</view>
|
||||
<fui-calendar type="2" :isMultiple="false" showLunar @change="change1"></fui-calendar>
|
||||
<view class="fui-section__title">设置自定义描述</view>
|
||||
<fui-calendar :isMultiple="false" @change="change" @dateChange="dateChange"
|
||||
ref="calendarRef"></fui-calendar>
|
||||
<view class="fui-section__title">设置默认值/范围/仅展示不可选择</view>
|
||||
<fui-calendar type="2" :isMultiple="false" language="en" :value="value" disabled minDate="2021-01-01"
|
||||
maxDate="2023-12-31">
|
||||
</fui-calendar>
|
||||
<view class="fui-section__title">区间选择/底部弹出选择</view>
|
||||
<view class="fui-flex__center">
|
||||
<fui-button type="gray" btn-size="medium" text="日期区间选择" bold :margin="['48rpx','0','0']"
|
||||
@click="btnSelect"></fui-button>
|
||||
</view>
|
||||
<view class="fui-result">您的选择为：{{result}}</view>
|
||||
<fui-bottom-popup :show="show">
|
||||
<view class="fui-scroll__wrap">
|
||||
<view class="fui-calendar-title">请选择日期</view>
|
||||
<fui-calendar type="3" :isMultiple="false" showLunar showBtn @change="change2"></fui-calendar>
|
||||
<view class="fui-icon__close" @tap.stop="closePopup">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//默认值，多选
|
||||
value: ['2021-01-06', '2021-01-16', '2021-01-26', '2021-02-08', '2022-01-08', '2022-01-10', '2022-01-20'],
|
||||
//区间选择默认值设置
|
||||
// value2:['2021-12-06', '2021-12-31'],
|
||||
show: false,
|
||||
result: '',
|
||||
descrDate: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: '请稍候...'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 500)
|
||||
},
|
||||
onReady() {
|
||||
//设置自定义描述数据
|
||||
this.$refs.calendarRef.setDescr(this.getDescr)
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e) {
|
||||
// console.log(e)
|
||||
this.fui.toast(e.value)
|
||||
},
|
||||
change1(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(e.value.join(','))
|
||||
},
|
||||
btnSelect() {
|
||||
this.show = true
|
||||
},
|
||||
closePopup() {
|
||||
this.show = false
|
||||
},
|
||||
change2(e) {
|
||||
this.result = JSON.stringify(e)
|
||||
this.closePopup()
|
||||
},
|
||||
//返回Promise的获取描述数据的函数
|
||||
getDescr(year, month, days) {
|
||||
//year, month, days 为 组件返回数据
|
||||
console.log(year, month, days)
|
||||
this.descrDate = `${year}-${month}`
|
||||
return new Promise((resolve, reject) => {
|
||||
//模拟获取到数据且处理后返回
|
||||
setTimeout(() => {
|
||||
//返回数据需要处理成和 days格式一致,没有描述则使用空字符串（描述文本不可过长）
|
||||
if (true) {
|
||||
//成功后处理描述数据，数据顺序需要与days中日期保持一致
|
||||
const descrArr = []
|
||||
days.forEach((item, index) => {
|
||||
//此处仅为模拟判断，具体逻辑需自行结合数据判断
|
||||
let descr = ''
|
||||
if (month % 2 === 0) {
|
||||
descr = (index + 1) % 2 === 0 ? '有号' : ''
|
||||
} else {
|
||||
descr = index % 2 === 0 ? '有号' : ''
|
||||
}
|
||||
descrArr.push(descr)
|
||||
})
|
||||
resolve(descrArr)
|
||||
} else {
|
||||
//失败
|
||||
reject(false)
|
||||
}
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
dateChange(e) {
|
||||
console.log(e)
|
||||
//设置自定义描述数据。页面过于复杂时，可能还未获取到组件实例，可在onReady中初始执行一次
|
||||
const date = `${e.year}-${e.month}`
|
||||
if (this.descrDate === date) return;
|
||||
this.$refs.calendarRef && this.$refs.calendarRef.setDescr(this.getDescr)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-result {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fui-scroll__wrap {
|
||||
padding-top: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-calendar-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
164
pages/component/form/cascader/cascader.vue
Normal file
164
pages/component/form/cascader/cascader.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Cascader <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Cascader 级联选择器，用于一组相关联的数据集合进行选择，例如省市区等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-cascader @complete="complete" :options="options"></fui-cascader>
|
||||
<view class="fui-section__title">默认选项</view>
|
||||
<fui-cascader ref="cascader" @complete="complete" :options="options" :value="value" activeColor="#FF2B2B">
|
||||
</fui-cascader>
|
||||
<view class="fui-flex__center">
|
||||
<fui-button type="gray" btn-size="medium" text="重置选择" bold :margin="['48rpx','0','0']"
|
||||
@click="btnReset"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">逐级请求数据</view>
|
||||
<fui-cascader ref="cascader1" :options="layer1" stepLoading @change="change" @complete="complete">
|
||||
</fui-cascader>
|
||||
<view class="fui-section__title">逐级请求数据/默认选项</view>
|
||||
<fui-cascader ref="cascader2" :options="layerData" :value="value2" stepLoading @change="change2"
|
||||
@complete="complete">
|
||||
</fui-cascader>
|
||||
<view class="fui-flex__center">
|
||||
<fui-button type="gray" btn-size="medium" text="底部弹出选择" bold :margin="['48rpx','0','0']"
|
||||
@click="btnSelect"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
<fui-bottom-popup :show="show">
|
||||
<view class="fui-scroll__wrap">
|
||||
<view class="fui-title">请选择地区</view>
|
||||
<fui-cascader @complete="complete2" :options="options"></fui-cascader>
|
||||
<view class="fui-icon__close" @tap.stop="closePopup">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from './data.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: data.options,
|
||||
value: ["440000", "440200", "440202", "44020203"],
|
||||
//分级加载时，设置第一级数据
|
||||
layer1: data.layer_0,
|
||||
//分级加载设置默认数据时，需要将所有层级数据返回
|
||||
layerData: [data.layer_0, data.layer_1, data.layer_2, data.layer_3, data.layer_4, data.layer_5],
|
||||
value2: ["04", "0203", "0302", "0405", "0501", "0602"],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
btnReset() {
|
||||
//重置选择
|
||||
if (this.$refs.cascader) {
|
||||
this.$refs.cascader.reset()
|
||||
}
|
||||
},
|
||||
complete(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您的选择为：${e.text.join('')}`)
|
||||
},
|
||||
change(e) {
|
||||
//默认返回的为约定数据，其他属性可自行扩展
|
||||
console.log(e)
|
||||
//当前点击item所在层级
|
||||
let layer = e.layer;
|
||||
//当前点击item索引值
|
||||
let index = e.index;
|
||||
//value值
|
||||
let val = e.value
|
||||
//...
|
||||
|
||||
//获取下一级数据，此处为模拟，省略请求
|
||||
uni.showLoading()
|
||||
setTimeout(() => {
|
||||
//设置请求返回数据
|
||||
//当无数据时设置空数组，则会触发@complete事件，表示完成选择（或者调用end方法）
|
||||
// if (layer === 5) {
|
||||
// //如果层级已知，可直接判断，结束选择
|
||||
// this.$refs.cascader1.end();
|
||||
// return
|
||||
// }
|
||||
uni.hideLoading()
|
||||
this.$refs.cascader1.setRequestData(data[`layer_${layer+1}`], layer)
|
||||
}, 300)
|
||||
},
|
||||
change2(e) {
|
||||
//默认返回的为约定数据，其他属性可自行扩展
|
||||
console.log(e)
|
||||
//当前点击item所在层级
|
||||
let layer = e.layer;
|
||||
//当前点击item索引值
|
||||
let index = e.index;
|
||||
//value值
|
||||
let val = e.value
|
||||
//...
|
||||
|
||||
//获取下一级数据，此处为模拟，省略请求
|
||||
uni.showLoading()
|
||||
setTimeout(() => {
|
||||
//设置请求返回数据
|
||||
//当无数据时设置空数组，则会触发@complete事件，表示完成选择（或者调用end方法）
|
||||
// if (layer === 5) {
|
||||
// //如果层级已知，可直接判断，结束选择
|
||||
// this.$refs.cascader2.end();
|
||||
// return
|
||||
// }
|
||||
uni.hideLoading()
|
||||
this.$refs.cascader2.setRequestData(data[`layer_${layer+1}`], layer)
|
||||
}, 300)
|
||||
},
|
||||
btnSelect() {
|
||||
this.show = true
|
||||
},
|
||||
closePopup() {
|
||||
this.show = false
|
||||
},
|
||||
complete2(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您的选择为：${e.text.join('')}`)
|
||||
this.closePopup()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-scroll__wrap {
|
||||
padding-top: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
301
pages/component/form/cascader/data.js
Normal file
301
pages/component/form/cascader/data.js
Normal file
@ -0,0 +1,301 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const options = [{
|
||||
text: '北京市',
|
||||
value: '100000',
|
||||
children: [{
|
||||
text: '北京市',
|
||||
value: '100100',
|
||||
children: [{
|
||||
text: '东城区',
|
||||
value: '100101',
|
||||
children: [{
|
||||
text: '东花市街道',
|
||||
value: '10010101'
|
||||
}, {
|
||||
text: '龙潭街道',
|
||||
value: '10010102'
|
||||
}, {
|
||||
text: '体育馆路街道',
|
||||
value: '10010103'
|
||||
}, {
|
||||
text: '天坛街道',
|
||||
value: '10010104'
|
||||
}]
|
||||
}, {
|
||||
text: '西城区',
|
||||
value: '100102',
|
||||
children: [{
|
||||
text: '陶然亭街道',
|
||||
value: '10010201'
|
||||
}, {
|
||||
text: '广安门内街道',
|
||||
value: '10010202'
|
||||
}, {
|
||||
text: '牛街街道',
|
||||
value: '10010203'
|
||||
}, {
|
||||
text: '白纸坊街道',
|
||||
value: '10010204'
|
||||
}]
|
||||
}, {
|
||||
text: '朝阳区',
|
||||
value: '100103',
|
||||
children: [{
|
||||
text: '黑庄户地区',
|
||||
value: '10010301'
|
||||
}, {
|
||||
text: '豆各庄地区',
|
||||
value: '10010302'
|
||||
}, {
|
||||
text: '王四营地区',
|
||||
value: '10010303'
|
||||
}, {
|
||||
text: '东湖街道',
|
||||
value: '10010304'
|
||||
}, {
|
||||
text: '首都机场街道',
|
||||
value: '10010305'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
text: '广东省',
|
||||
value: '440000',
|
||||
children: [{
|
||||
text: '广州市',
|
||||
value: '440100',
|
||||
children: [{
|
||||
text: '荔湾区',
|
||||
value: '440101',
|
||||
children: [{
|
||||
text: '茶滘街道',
|
||||
value: '44010101'
|
||||
}, {
|
||||
text: '东漖街道',
|
||||
value: '44010102'
|
||||
}, {
|
||||
text: '海龙街道',
|
||||
value: '44010103'
|
||||
}, {
|
||||
text: '东沙街道',
|
||||
value: '44010104'
|
||||
}, {
|
||||
text: '中南街道',
|
||||
value: '44010105'
|
||||
}]
|
||||
|
||||
}, {
|
||||
text: '越秀区',
|
||||
value: '440102',
|
||||
children: [{
|
||||
text: '珠光街道',
|
||||
value: '44010201'
|
||||
}, {
|
||||
text: '大东街道',
|
||||
value: '44010202'
|
||||
}, {
|
||||
text: '白云街道',
|
||||
value: '44010203'
|
||||
}, {
|
||||
text: '登峰街道',
|
||||
value: '44010204'
|
||||
}, {
|
||||
text: '矿泉街道',
|
||||
value: '44010205'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
text: '韶关市',
|
||||
value: '440200',
|
||||
children: [{
|
||||
text: '武江区',
|
||||
value: '440201',
|
||||
children: [{
|
||||
text: '西联镇',
|
||||
value: '44020101'
|
||||
}, {
|
||||
text: '西河镇',
|
||||
value: '44020102'
|
||||
}, {
|
||||
text: '龙归镇',
|
||||
value: '44020103'
|
||||
}, {
|
||||
text: '江湾镇',
|
||||
value: '44020104'
|
||||
}, {
|
||||
text: '重阳镇',
|
||||
value: '44020105'
|
||||
}]
|
||||
}, {
|
||||
text: '浈江区',
|
||||
value: '440202',
|
||||
children: [{
|
||||
text: '十里亭镇',
|
||||
value: '44020201'
|
||||
}, {
|
||||
text: '犁市镇',
|
||||
value: '44020202'
|
||||
}, {
|
||||
text: '花坪镇',
|
||||
value: '44020203'
|
||||
}, {
|
||||
text: '田螺冲办事处',
|
||||
value: '44020204'
|
||||
}, {
|
||||
text: '曲仁办事处',
|
||||
value: '44020205'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
/*
|
||||
以下数据为测试数据
|
||||
实际数据以请求返回为准（数据结构保持一致）
|
||||
根据上一级去请求下一级数据，而非完全相同
|
||||
*/
|
||||
|
||||
const layer_0 = [{
|
||||
text: '第一级01',
|
||||
value: '01',
|
||||
//自行扩展属性，非约定属性，可删除
|
||||
id: '扩展属性值id',
|
||||
extend: '扩展属性值extend'
|
||||
|
||||
}, {
|
||||
text: '第一级02',
|
||||
value: '02'
|
||||
}, {
|
||||
text: '第一级03',
|
||||
value: '03'
|
||||
}, {
|
||||
text: '第一级04',
|
||||
value: '04'
|
||||
}, {
|
||||
text: '第一级05',
|
||||
value: '05'
|
||||
}, {
|
||||
text: '第一级06',
|
||||
value: '06'
|
||||
}, {
|
||||
text: '第一级07',
|
||||
value: '07'
|
||||
}, {
|
||||
text: '第一级08',
|
||||
value: '08'
|
||||
}, {
|
||||
text: '第一级09',
|
||||
value: '09'
|
||||
}, {
|
||||
text: '第一级10',
|
||||
value: '10'
|
||||
}]
|
||||
|
||||
const layer_1 = [{
|
||||
text: '第二级01',
|
||||
value: '0201'
|
||||
}, {
|
||||
text: '第二级02',
|
||||
value: '0202'
|
||||
}, {
|
||||
text: '第二级03',
|
||||
value: '0203'
|
||||
}, {
|
||||
text: '第二级04',
|
||||
value: '0204'
|
||||
}, {
|
||||
text: '第二级05',
|
||||
value: '0205'
|
||||
}, {
|
||||
text: '第二级06',
|
||||
value: '0206'
|
||||
}, {
|
||||
text: '第二级07',
|
||||
value: '0207'
|
||||
}, {
|
||||
text: '第二级08',
|
||||
value: '0208'
|
||||
}, {
|
||||
text: '第二级09',
|
||||
value: '0209'
|
||||
}, {
|
||||
text: '第二级10',
|
||||
value: '0210'
|
||||
}]
|
||||
const layer_2 = [{
|
||||
text: '第三级01',
|
||||
value: '0301'
|
||||
}, {
|
||||
text: '第三级02',
|
||||
value: '0302'
|
||||
}, {
|
||||
text: '第三级03',
|
||||
value: '0303'
|
||||
}, {
|
||||
text: '第三级04',
|
||||
value: '0304'
|
||||
}, {
|
||||
text: '第三级05',
|
||||
value: '0305'
|
||||
}]
|
||||
|
||||
const layer_3 = [{
|
||||
text: '第四级01',
|
||||
value: '0401'
|
||||
}, {
|
||||
text: '第四级02',
|
||||
value: '0402'
|
||||
}, {
|
||||
text: '第四级03',
|
||||
value: '0403'
|
||||
}, {
|
||||
text: '第四级04',
|
||||
value: '0404'
|
||||
}, {
|
||||
text: '第四级05',
|
||||
value: '0405'
|
||||
}]
|
||||
|
||||
const layer_4 = [{
|
||||
text: '第五级01',
|
||||
value: '0501'
|
||||
}, {
|
||||
text: '第五级02',
|
||||
value: '0502'
|
||||
}, {
|
||||
text: '第五级03',
|
||||
value: '0503'
|
||||
}, {
|
||||
text: '第五级04',
|
||||
value: '0504'
|
||||
}, {
|
||||
text: '第五级05',
|
||||
value: '0505'
|
||||
}]
|
||||
|
||||
const layer_5 = [{
|
||||
text: '第六级01',
|
||||
value: '0601'
|
||||
}, {
|
||||
text: '第六级02',
|
||||
value: '0602'
|
||||
}, {
|
||||
text: '第六级03',
|
||||
value: '0603'
|
||||
}, {
|
||||
text: '第六级04',
|
||||
value: '0604'
|
||||
}, {
|
||||
text: '第六级05',
|
||||
value: '0605'
|
||||
}]
|
||||
export default {
|
||||
options,
|
||||
layer_0,
|
||||
layer_1,
|
||||
layer_2,
|
||||
layer_3,
|
||||
layer_4,
|
||||
layer_5,
|
||||
layer_6: []
|
||||
}
|
||||
141
pages/component/form/checkbox/checkbox.vue
Normal file
141
pages/component/form/checkbox/checkbox.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Checkbox</view>
|
||||
<view class="fui-page__desc">Checkbox 多项选择器。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-checkbox-group name="checkbox" v-model="vals" @change="change">
|
||||
<view class="fui-list__item">
|
||||
<fui-label>
|
||||
<view class="fui-align__center">
|
||||
<fui-checkbox value="1"></fui-checkbox>
|
||||
<text class="fui-text">选中</text>
|
||||
</view>
|
||||
</fui-label>
|
||||
<fui-label :margin="['0','0','0','40rpx']">
|
||||
<view class="fui-align__center">
|
||||
<fui-checkbox value="2"></fui-checkbox>
|
||||
<text class="fui-text">未选中</text>
|
||||
</view>
|
||||
</fui-label>
|
||||
</view>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-checkbox-group>
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-checkbox :checked="item.checked" :value="item.value" color="#FFB703"
|
||||
borderColor="#B2B2B2">
|
||||
</fui-checkbox>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-checkbox-group>
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-checkbox :checked="item.checked" :value="item.value">
|
||||
</fui-checkbox>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-checkbox-group>
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-checkbox isCheckMark checkMarkColor="#FF2B2B" :scaleRatio="1.3" :checked="item.checked"
|
||||
:value="item.value">
|
||||
</fui-checkbox>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">修改圆角值</view>
|
||||
<fui-checkbox-group>
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-checkbox :checked="item.checked" :value="item.value" color="#FFB703"
|
||||
borderColor="#B2B2B2" borderRadius="8rpx">
|
||||
</fui-checkbox>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
vals: ['1'],
|
||||
checkboxItems: [{
|
||||
name: '篮球',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '羽毛球',
|
||||
value: '2',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '乒乓球',
|
||||
value: '3',
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change:' + JSON.stringify(e.detail.value))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 28rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-list__cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
95
pages/component/form/datePicker/datePicker.vue
Normal file
95
pages/component/form/datePicker/datePicker.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 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">DatePicker <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">DatePicker 日期时间选择器，用于选择日期或时间。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="年月" bold :margin="['24rpx']"
|
||||
@click="btnClick(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="年月日" bold @click="btnClick(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="年月日 时" bold :margin="['24rpx']"
|
||||
@click="btnClick(4)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="年月日 时分" bold @click="btnClick(5)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="时分秒" bold @click="btnClick(7)"
|
||||
:margin="['24rpx']">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="日期区间选择" bold @click="btnClick(3,true)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="设置默认值" bold :margin="['24rpx']"
|
||||
@click="btnClick(5,false,true)">
|
||||
</fui-button>
|
||||
<view class="fui-picker__result">
|
||||
选择的值为：{{result}}
|
||||
</view>
|
||||
</view>
|
||||
<fui-date-picker :show="show" :type="type" :range="range" :value="value" :valueEnd="valueEnd" @change="change"
|
||||
@cancel="cancel">
|
||||
</fui-date-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
type: 1,
|
||||
range: false,
|
||||
//默认值
|
||||
value: '',
|
||||
valueEnd: '',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
btnClick(type, range, def) {
|
||||
this.show = false
|
||||
this.type = type;
|
||||
this.range = range || false;
|
||||
//默认值，区间选择时起始值使用属性：value，结束值使用属性：valueEnd
|
||||
this.value = def ? '2021-11-22 11:12' : ''
|
||||
setTimeout(() => {
|
||||
this.show = true
|
||||
}, 80)
|
||||
},
|
||||
change(e) {
|
||||
this.show = false
|
||||
console.log(e)
|
||||
this.result = JSON.stringify(e || {})
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-picker__result {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
word-break: break-all;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
358
pages/component/form/form/form.vue
Normal file
358
pages/component/form/form/form.vue
Normal file
@ -0,0 +1,358 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 407 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Form<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Form 表单校验，提供了常用的表单校验方法（完整内容请查看文档），支持传入自定义校验方法。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<!--H5端如果使用了默认导航栏，则top值不可设置为0，默认为44px-->
|
||||
<fui-form ref="form" top="0">
|
||||
<view class="fui-section__title">输入框</view>
|
||||
<fui-input required label="姓名" borderTop placeholder="请输入姓名" v-model="formData.name"></fui-input>
|
||||
<fui-input required label="手机号" placeholder="请输入手机号码" v-model="formData.mobile"></fui-input>
|
||||
<fui-input required :padding="['20rpx','32rpx']" label="验证码" placeholder="请输入手机验证码"
|
||||
v-model="formData.code">
|
||||
<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="获取验证码"></fui-button>
|
||||
</fui-input>
|
||||
<fui-input required label="密码" password placeholder="请输入密码" v-model="formData.password">
|
||||
</fui-input>
|
||||
<fui-input required label="确认密码" password placeholder="请再次输入密码" v-model="formData.confirmPwd">
|
||||
</fui-input>
|
||||
<fui-input label="年龄" placeholder="请输入年龄" v-model="formData.age"></fui-input>
|
||||
<fui-input label="身份证" placeholder="请输入身份证号码" v-model="formData.idCard"></fui-input>
|
||||
<fui-input label="邮箱" placeholder="请输入邮箱" v-model="formData.email"></fui-input>
|
||||
<fui-input label="个人主页" placeholder="请输入个人主页" v-model="formData.url">
|
||||
</fui-input>
|
||||
<fui-input label="商品金额" placeholder="请输入商品金额" v-model="formData.amount">
|
||||
</fui-input>
|
||||
<fui-input label="微信号" :bottomLeft="0" placeholder="自定义校验，6至20位，字母，数字..." v-model="formData.wechatNo">
|
||||
</fui-input>
|
||||
<view class="fui-section__title">文本域</view>
|
||||
<fui-textarea isCounter placeholder="请输入内容" v-model="formData.text"></fui-textarea>
|
||||
<view class="fui-section__title">单选列表项</view>
|
||||
<fui-radio-group v-model="formData.ageRange">
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-radio isCheckMark checkMarkColor="#465CFF" :scaleRatio="1.3"
|
||||
:checked="item.checked" :value="item.value">
|
||||
</fui-radio>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">复选列表项</view>
|
||||
<fui-checkbox-group @change="checkboxChange">
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-checkbox :checked="item.checked" :value="item.value">
|
||||
</fui-checkbox>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">开关</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<view class="fui-list__cell">
|
||||
<text>标题文字</text>
|
||||
<fui-switch :scaleRatio="0.8" @change="switchChange"></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">选择</view>
|
||||
<fui-list-cell arrow @click="areaPicker">
|
||||
<view class="fui-list__cell">
|
||||
<text>地区/国家</text>
|
||||
<fui-input textRight :padding="[0]" :borderBottom="false" backgroundColor="transparent" disabled
|
||||
:value="formData.area"></fui-input>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow @click="datePicker">
|
||||
<view class="fui-list__cell">
|
||||
<text>日期时间</text>
|
||||
<fui-input placeholder="请选择" textRight :padding="[0]" :borderBottom="false"
|
||||
backgroundColor="transparent" disabled :value="formData.dateTime"></fui-input>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">评分</view>
|
||||
<fui-list-cell :highlight="false">
|
||||
<fui-rate @change="rateChange"></fui-rate>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">上传图片</view>
|
||||
<fui-list-cell :padding="['32rpx','32rpx','12rpx','32rpx']" :highlight="false">
|
||||
<fui-upload :max="2" immediate :url="uploadUrl" ref="upload" @success="success"
|
||||
@complete="complete">
|
||||
</fui-upload>
|
||||
</fui-list-cell>
|
||||
<view class="fui-clause--cell fui-clause--wrap">
|
||||
<fui-label>
|
||||
<view class="fui-clause--cell">
|
||||
<fui-checkbox :scaleRatio="0.8" @change="agreeChange"></fui-checkbox>
|
||||
<text class="fui-clause--text">阅读并同意</text>
|
||||
</view>
|
||||
</fui-label>
|
||||
<text class="fui-color__link">《FirstUI 相关条款》</text>
|
||||
</view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button text="Submit" bold @click="submit"></fui-button>
|
||||
</view>
|
||||
</fui-form>
|
||||
</view>
|
||||
<fui-picker :options="areaOptions" :show="show" @change="change" @cancel="areaCancel"></fui-picker>
|
||||
<fui-date-picker :type="5" :show="dateShow" @change="dateChange" @cancel="dateCancel">
|
||||
</fui-date-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//微信号自定义校验方法
|
||||
function checkWxNo(value) {
|
||||
return /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value);
|
||||
}
|
||||
//勾选协议校验
|
||||
function checkAgree(agree) {
|
||||
return agree
|
||||
}
|
||||
const rules = [{
|
||||
name: "name",
|
||||
rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
|
||||
msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
|
||||
}, {
|
||||
name: "mobile",
|
||||
rule: ["required", "isMobile"],
|
||||
msg: ["请输入手机号", "请输入正确的手机号"]
|
||||
}, {
|
||||
name: "code",
|
||||
rule: ["required"],
|
||||
msg: ["请输入验证码"]
|
||||
}, {
|
||||
name: "password",
|
||||
rule: ["required", "isEnAndNo"],
|
||||
msg: ["请输入密码", "密码为4~30位数字和字母组合"]
|
||||
}, {
|
||||
name: "confirmPwd",
|
||||
rule: ["required", "isSame:password"],
|
||||
msg: ["请输入确认密码", "两次输入的密码不一致"]
|
||||
}, {
|
||||
name: "age",
|
||||
rule: ["isNumber", "range:[1,149]"],
|
||||
msg: ["请输入正确的年龄", "请输入正确的年龄范围：1~149"]
|
||||
}, {
|
||||
name: "idCard",
|
||||
rule: ["isIdCard"],
|
||||
msg: ["请输入正确的身份证号码"]
|
||||
}, {
|
||||
name: "email",
|
||||
rule: ["isEmail"],
|
||||
msg: ["请输入正确的邮箱"]
|
||||
}, {
|
||||
name: "url",
|
||||
rule: ["isUrl"],
|
||||
msg: ["请输入正确的URL地址"]
|
||||
}, {
|
||||
name: "amount",
|
||||
rule: ["isAmount"],
|
||||
msg: ["请输入正确的金额，允许保留两位小数"]
|
||||
}, {
|
||||
name: "wechatNo",
|
||||
validator: [{
|
||||
msg: "微信号不正确！请输入6~20位以字母开头，字母、数字、减号、下划线组合的微信号",
|
||||
method: checkWxNo
|
||||
}]
|
||||
}, {
|
||||
name: "agree",
|
||||
validator: [{
|
||||
msg: "请勾选并同意《FirstUI 相关条款》",
|
||||
method: checkAgree
|
||||
}]
|
||||
}];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
name: '',
|
||||
mobile: '',
|
||||
code: '',
|
||||
password: '',
|
||||
confirmPwd: '',
|
||||
age: '',
|
||||
idCard: '',
|
||||
email: '',
|
||||
url: '',
|
||||
amount: '',
|
||||
wechatNo: '',
|
||||
text: '',
|
||||
ageRange: '1',
|
||||
motion: '1',
|
||||
switchRes: false,
|
||||
area: '',
|
||||
dateTime: '',
|
||||
score: 0,
|
||||
img: '',
|
||||
agree: false
|
||||
},
|
||||
radioItems: [{
|
||||
name: '18~28岁',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '29~40岁',
|
||||
value: '2',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
checkboxItems: [{
|
||||
name: '篮球',
|
||||
value: '1',
|
||||
checked: true
|
||||
}, {
|
||||
name: '乒乓球',
|
||||
value: '2',
|
||||
checked: false
|
||||
}],
|
||||
areaOptions: ['中国', '美国', '俄罗斯', '日本'],
|
||||
show: false,
|
||||
dateShow: false,
|
||||
uploadUrl: 'https://ffa.firstui.cn/api/example/upload-file'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log(this.formData)
|
||||
this.$refs.form.validator(this.formData, rules).then(res => {
|
||||
console.log(res)
|
||||
if (res.isPassed) {
|
||||
this.fui.toast('校验通过！')
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
checkboxChange(e) {
|
||||
console.log(e)
|
||||
this.$set(this.formData, 'motion', e.detail.value.join(','))
|
||||
},
|
||||
switchChange(e) {
|
||||
console.log(e.detail)
|
||||
this.$set(this.formData, 'switchRes', e.detail.value)
|
||||
},
|
||||
areaPicker() {
|
||||
this.show = true
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
this.$set(this.formData, 'area', e.value)
|
||||
this.areaCancel()
|
||||
},
|
||||
areaCancel() {
|
||||
this.show = false
|
||||
},
|
||||
datePicker() {
|
||||
this.dateShow = true
|
||||
},
|
||||
dateChange(e) {
|
||||
console.log(e)
|
||||
this.$set(this.formData, 'dateTime', e.result)
|
||||
this.dateCancel()
|
||||
},
|
||||
dateCancel() {
|
||||
this.dateShow = false
|
||||
},
|
||||
//评分
|
||||
rateChange(e) {
|
||||
console.log(e)
|
||||
this.$set(this.formData, 'score', e.score)
|
||||
},
|
||||
//图片上传，具体使用请查看上传组件
|
||||
success(e) {
|
||||
console.log(e)
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
if (res.data.url) {
|
||||
this.$refs.upload.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
complete(e) {
|
||||
if (e.status === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
console.log(e.urls)
|
||||
this.$set(this.formData, 'img', e.urls.join(','))
|
||||
}
|
||||
},
|
||||
agreeChange(e) {
|
||||
console.log(e)
|
||||
this.$set(this.formData, 'agree', e.checked)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-section__title:not(:first-child) {
|
||||
margin-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-clause--cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.fui-clause--wrap {
|
||||
width: 100%;
|
||||
margin-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-clause--text {
|
||||
padding-left: 16rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-color__link {
|
||||
color: var(--fui-color-link);
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-color__link:active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
164
pages/component/form/formItem/formItem.vue
Normal file
164
pages/component/form/formItem/formItem.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">FormItem<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">FormItem 表单项，主要用于表单组件相关布局使用。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-form>
|
||||
<fui-form-item label="活动名称">
|
||||
<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入活动名称"></fui-input>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="手机号码">
|
||||
<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
|
||||
</fui-form-item>
|
||||
<fui-form-item label="即时配送">
|
||||
<fui-switch :scaleRatio="0.9"></fui-switch>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="活动性质">
|
||||
<fui-checkbox-group>
|
||||
<fui-label inline>
|
||||
<fui-checkbox value="1"></fui-checkbox>
|
||||
<fui-text :size="28" text="地推活动" :padding="['0','30rpx','0','16rpx']"></fui-text>
|
||||
</fui-label>
|
||||
<fui-label inline>
|
||||
<fui-checkbox value="2"></fui-checkbox>
|
||||
<fui-text :size="28" text="美食活动" :padding="['0','16rpx']"></fui-text>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="特殊资源">
|
||||
<fui-radio-group>
|
||||
<fui-label>
|
||||
<fui-radio value="1"></fui-radio>
|
||||
<fui-text :size="28" text="线上品牌方赞助" :padding="['0','30rpx','0','16rpx']"></fui-text>
|
||||
</fui-label>
|
||||
<fui-label :margin="['32rpx','0','0']">
|
||||
<fui-radio value="2"></fui-radio>
|
||||
<fui-text :size="28" text="线下场地免费" :padding="['0','16rpx']"></fui-text>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="评分">
|
||||
<fui-rate></fui-rate>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="上传图片" :padding="['28rpx','32rpx','8rpx']">
|
||||
<fui-upload></fui-upload>
|
||||
</fui-form-item>
|
||||
<view class="fui-section__title">必填星号</view>
|
||||
<fui-form-item label="姓名" asterisk>
|
||||
<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></fui-input>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="手机号码" asterisk>
|
||||
<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
|
||||
</fui-form-item>
|
||||
<view class="fui-section__title">星号居右</view>
|
||||
<fui-form-item asterisk-position="right" label="身份证" asterisk>
|
||||
<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入身份证"></fui-input>
|
||||
</fui-form-item>
|
||||
<fui-form-item asterisk-position="right" label="手机号码" asterisk>
|
||||
<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
|
||||
</fui-form-item>
|
||||
<view class="fui-section__title">label右对齐</view>
|
||||
<fui-form-item label-align="right" asterisk-position="right" label="姓名" asterisk>
|
||||
<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></fui-input>
|
||||
</fui-form-item>
|
||||
<fui-form-item label-align="right" asterisk-position="right" label="手机号码" asterisk>
|
||||
<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
|
||||
</fui-form-item>
|
||||
<view class="fui-section__title">选择</view>
|
||||
<fui-form-item label="活动时间" asterisk arrow highlight @click="onTap(1)">
|
||||
<fui-input :borderBottom="false" :padding="[0]" :disabled="true" placeholder="请选择时间"
|
||||
backgroundColor="transparent"></fui-input>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="地区" arrow highlight @click="onTap(2)">
|
||||
<input class="fui-page__input" placeholder="请选择地区" placeholder-style="color:#ccc;"
|
||||
:disabled="true" />
|
||||
</fui-form-item>
|
||||
<!-- 上下排列单独放置组件即可 -->
|
||||
<view class="fui-section__title">上下排列（组件单独放置即可）</view>
|
||||
<fui-form-item asterisk label="详细描述" :bottomBorder="false"></fui-form-item>
|
||||
<fui-textarea :border-top="false" placeholder="请输入详细描述..."></fui-textarea>
|
||||
<view class="fui-section__title">其他</view>
|
||||
<fui-form-item label="是否推送">
|
||||
<template v-slot:right>
|
||||
<fui-switch></fui-switch>
|
||||
</template>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="体重">
|
||||
<fui-input type="digit" :borderBottom="false" :padding="['0','16rpx']" placeholder="请输入体重"
|
||||
textRight>
|
||||
</fui-input>
|
||||
<template v-slot:right>
|
||||
<fui-text text="kg"></fui-text>
|
||||
</template>
|
||||
</fui-form-item>
|
||||
<fui-form-item label="验证码">
|
||||
<input class="fui-page__input" placeholder="请输入验证码" placeholder-style="color:#ccc;" maxlength="6" />
|
||||
<template v-slot:right>
|
||||
<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="获取验证码"></fui-button>
|
||||
</template>
|
||||
</fui-form-item>
|
||||
</fui-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioItems: [{
|
||||
name: '18~28岁',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '29~40岁',
|
||||
value: '2',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
checkboxItems: [{
|
||||
name: '篮球',
|
||||
value: '1',
|
||||
checked: true
|
||||
}, {
|
||||
name: '乒乓球',
|
||||
value: '2',
|
||||
checked: false
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onTap(e) {
|
||||
console.log(e === 1 ? '选择时间' : '选择地区')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 96rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-page__input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
99
pages/component/form/input/input.vue
Normal file
99
pages/component/form/input/input.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Input</view>
|
||||
<view class="fui-page__desc">Input 输入框，该组件是对原生input组件的增强，内置了常用布局样式，同时包含 input 所有功能。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-input borderTop placeholder="请输入用户名" @input="input"></fui-input>
|
||||
<fui-input :bottomLeft="0" placeholder="请输入手机号码" maxlength="11"></fui-input>
|
||||
<view class="fui-section__title">带标题</view>
|
||||
<fui-input label="标题" borderTop placeholder="这是一个输入框"></fui-input>
|
||||
<fui-input label="标题文字" :bottomLeft="0" placeholder="请输入文本"></fui-input>
|
||||
<view class="fui-section__title">密码框</view>
|
||||
<fui-input borderTop :padding="['20rpx','32rpx']" placeholder="请输入密码" :password="password" @input="input">
|
||||
<fui-icon :name="password?'invisible':'visible'" color="#B2B2B2" :size="50" @click="change"></fui-icon>
|
||||
</fui-input>
|
||||
<view class="fui-section__title">带清除按钮、双向绑定</view>
|
||||
<fui-input label="标题" :bottomLeft="0" borderTop placeholder="请输入文本" clearable v-model="text"></fui-input>
|
||||
<view class="fui-section__title">显示边框/设置圆角</view>
|
||||
<view class="fui-page__spacing">
|
||||
<fui-input label="标题" inputBorder placeholder="请输入文本"></fui-input>
|
||||
<fui-input :marginTop="24" isFillet inputBorder placeholder="请输入文本"></fui-input>
|
||||
<fui-input :marginTop="24" :radius="24" border-color="#FFB703" inputBorder placeholder="请输入文本"></fui-input>
|
||||
</view>
|
||||
<view class="fui-section__title">必填项</view>
|
||||
<fui-input required label="标题" borderTop placeholder="请输入文本"></fui-input>
|
||||
<fui-input required label="标题文字" :bottomLeft="0" placeholder="请输入文本内容"></fui-input>
|
||||
<view class="fui-section__title">输入文本右对齐</view>
|
||||
<fui-input textRight label="身高" borderTop placeholder="请输入身高">
|
||||
<text>cm</text>
|
||||
</fui-input>
|
||||
<fui-input textRight label="体重" :bottomLeft="0" placeholder="请输入体重">
|
||||
<text>kg</text>
|
||||
</fui-input>
|
||||
<view class="fui-section__title">禁用状态</view>
|
||||
<fui-input label="标题" :bottomLeft="0" borderTop placeholder="这是一个被禁用的输入框" disabled></fui-input>
|
||||
<view class="fui-section__title">右侧加按钮</view>
|
||||
<fui-input :padding="['20rpx','32rpx']" label="验证码" :bottomLeft="0" placeholder="请输入手机验证码">
|
||||
<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="获取验证码"></fui-button>
|
||||
</fui-input>
|
||||
<view class="fui-section__title">左侧加图标</view>
|
||||
<fui-input placeholder="请输入手机号">
|
||||
<template v-slot:left>
|
||||
<view class="fui-left__icon">
|
||||
<fui-icon name="mobile" color="#333" :size="48"></fui-icon>
|
||||
</view>
|
||||
</template>
|
||||
</fui-input>
|
||||
<fui-input :padding="['20rpx','32rpx']" placeholder="请输入验证码" :bottomLeft="0">
|
||||
<template v-slot:left>
|
||||
<view class="fui-left__icon">
|
||||
<fui-icon name="captcha" :size="48"></fui-icon>
|
||||
</view>
|
||||
</template>
|
||||
<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="获取验证码"></fui-button>
|
||||
</fui-input>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
password: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
text(val) {
|
||||
console.log(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
input(e) {
|
||||
console.log(e)
|
||||
},
|
||||
change() {
|
||||
this.password = !this.password
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-left__icon {
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
59
pages/component/form/inputNumber/inputNumber.vue
Normal file
59
pages/component/form/inputNumber/inputNumber.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 40 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">InputNumber</view>
|
||||
<view class="fui-page__desc">InputNumber 数字输入框，该组件多用于购物车加减商品等场景。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-input-number></fui-input-number>
|
||||
<view class="fui-section__title">改变加减号颜色</view>
|
||||
<fui-input-number signColor="#FFB703" value="1.1" modelValue="1.1"></fui-input-number>
|
||||
<view class="fui-section__title">改变数字框背景色</view>
|
||||
<fui-input-number backgroundColor="#F1F4FA"></fui-input-number>
|
||||
<view class="fui-section__title">自定义加减号</view>
|
||||
<fui-input-number custom backgroundColor="#FFF" :size="30" :width="60" margin="0">
|
||||
<fui-icon name="minussign" :size="48" color="#FFB703"></fui-icon>
|
||||
<template v-slot:plus>
|
||||
<fui-icon name="plussign-fill" :size="48" color="#FFB703"></fui-icon>
|
||||
</template>
|
||||
</fui-input-number>
|
||||
<view class="fui-section__title">使用v-model：{{val}}</view>
|
||||
<fui-input-number v-model="val"></fui-input-number>
|
||||
<view class="fui-section__title">设置最小值和最大值</view>
|
||||
<fui-input-number :min="-9" :max="9"></fui-input-number>
|
||||
<view class="fui-section__title">设置步长（步长0.1)</view>
|
||||
<fui-input-number :step="0.1"></fui-input-number>
|
||||
<view class="fui-section__title">禁用状态</view>
|
||||
<fui-input-number disabled></fui-input-number>
|
||||
<view class="fui-section__title">事件获取数字框的值: {{inputVal}}</view>
|
||||
<fui-input-number @change="change"></fui-input-number>
|
||||
<view class="fui-section__title">支持输入负号</view>
|
||||
<fui-input-number type="text" :min="-99"></fui-input-number>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: 1,
|
||||
inputVal: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.inputVal = e.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
119
pages/component/form/label/label.vue
Normal file
119
pages/component/form/label/label.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6140 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Label</view>
|
||||
<view class="fui-page__desc">Label 标签，用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">Radio 单项选择器</view>
|
||||
<fui-radio-group>
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-radio :checked="item.checked" :value="item.value">
|
||||
</fui-radio>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">Checkbox 多项选择器</view>
|
||||
<fui-checkbox-group>
|
||||
<fui-label v-for="(item,index) in checkboxItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-checkbox isCheckMark checkMarkColor="#FFB703" :scaleRatio="1.3" :checked="item.checked"
|
||||
:value="item.value">
|
||||
</fui-checkbox>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-checkbox-group>
|
||||
<view class="fui-section__title">Switch 开关选择器</view>
|
||||
<fui-label>
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>scaleRatio</text>
|
||||
<fui-switch :scaleRatio="0.8" color="#FFB703"></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
<fui-label>
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>type=checkbox</text>
|
||||
<fui-switch type="checkbox" color="#09BE4F" :scaleRatio="1.1"></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioItems: [{
|
||||
name: '小于18岁',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '18~28岁',
|
||||
value: '2',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '29~40岁',
|
||||
value: '3',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
checkboxItems: [{
|
||||
name: '篮球',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '羽毛球',
|
||||
value: '2',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '乒乓球',
|
||||
value: '3',
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-list__cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
276
pages/component/form/picker/picker.js
Normal file
276
pages/component/form/picker/picker.js
Normal file
@ -0,0 +1,276 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const options = ['7:00-8:30', '8:30-10:00', '10:00-11:30', '2:00-3:30', '3:30-5:00'];
|
||||
const options2 = [
|
||||
['2021-11-01', '2021-11-02', '2021-11-03', '2021-11-04', '2021-11-05'],
|
||||
['上午', '下午']
|
||||
];
|
||||
const options3 = [
|
||||
['A校区', 'B校区', 'C校区', 'D校区', 'E校区'],
|
||||
['50班', '60班', '70班', '80班', '90班'],
|
||||
['A组', 'B组', 'C组', 'D组', 'E组']
|
||||
];
|
||||
|
||||
const options4 = [
|
||||
['2020', '2021', '2022', '2023', '2024'],
|
||||
['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
||||
['05', '10', '15', '20', '25'],
|
||||
['9:00', '10:00', '11:00', '2:00', '3:00', '4:00'],
|
||||
];
|
||||
|
||||
const options5 = [{
|
||||
text: '北京市',
|
||||
value: '100000',
|
||||
children: [{
|
||||
text: '北京市',
|
||||
value: '110000'
|
||||
}]
|
||||
}, {
|
||||
text: '广东省',
|
||||
value: '440000',
|
||||
children: [{
|
||||
text: '广州市',
|
||||
value: '440100'
|
||||
}, {
|
||||
text: '韶关市',
|
||||
value: '440200'
|
||||
}, {
|
||||
text: '深圳市',
|
||||
value: '440300'
|
||||
}, {
|
||||
text: '珠海市',
|
||||
value: '440400'
|
||||
}, {
|
||||
text: '汕头市',
|
||||
value: '440500'
|
||||
}]
|
||||
}]
|
||||
|
||||
const options6 = [{
|
||||
text: '北京市',
|
||||
value: '100000',
|
||||
children: [{
|
||||
text: '北京市',
|
||||
value: '100100',
|
||||
children: [{
|
||||
text: '东城区',
|
||||
value: '100101'
|
||||
}, {
|
||||
text: '西城区',
|
||||
value: '100102'
|
||||
}, {
|
||||
text: '朝阳区',
|
||||
value: '100103'
|
||||
}, {
|
||||
text: '丰台区',
|
||||
value: '100104'
|
||||
}, {
|
||||
text: '石景山区',
|
||||
value: '100105'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
text: '广东省',
|
||||
value: '440000',
|
||||
children: [{
|
||||
text: '广州市',
|
||||
value: '440100',
|
||||
children: [{
|
||||
text: '荔湾区',
|
||||
value: '440101',
|
||||
}, {
|
||||
text: '越秀区',
|
||||
value: '440102',
|
||||
}, {
|
||||
text: '海珠区',
|
||||
value: '440103',
|
||||
}, {
|
||||
text: '天河区',
|
||||
value: '440104',
|
||||
}, {
|
||||
text: '白云区',
|
||||
value: '440105',
|
||||
}]
|
||||
}, {
|
||||
text: '韶关市',
|
||||
value: '440200',
|
||||
children: [{
|
||||
text: '武江区',
|
||||
value: '440201'
|
||||
}, {
|
||||
text: '浈江区',
|
||||
value: '440202'
|
||||
}, {
|
||||
text: '曲江区',
|
||||
value: '440203'
|
||||
}, {
|
||||
text: '始兴县',
|
||||
value: '440204'
|
||||
}, {
|
||||
text: '仁化县',
|
||||
value: '440205'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
const options7 = [{
|
||||
text: '北京市',
|
||||
value: '100000',
|
||||
children: [{
|
||||
text: '北京市',
|
||||
value: '100100',
|
||||
children: [{
|
||||
text: '东城区',
|
||||
value: '100101',
|
||||
children: [{
|
||||
text: '东花市街道',
|
||||
value: '10010101'
|
||||
}, {
|
||||
text: '龙潭街道',
|
||||
value: '10010102'
|
||||
}, {
|
||||
text: '体育馆路街道',
|
||||
value: '10010103'
|
||||
}, {
|
||||
text: '天坛街道',
|
||||
value: '10010104'
|
||||
}]
|
||||
}, {
|
||||
text: '西城区',
|
||||
value: '100102',
|
||||
children: [{
|
||||
text: '陶然亭街道',
|
||||
value: '10010201'
|
||||
}, {
|
||||
text: '广安门内街道',
|
||||
value: '10010202'
|
||||
}, {
|
||||
text: '牛街街道',
|
||||
value: '10010203'
|
||||
}, {
|
||||
text: '白纸坊街道',
|
||||
value: '10010204'
|
||||
}]
|
||||
}, {
|
||||
text: '朝阳区',
|
||||
value: '100103',
|
||||
children: [{
|
||||
text: '黑庄户地区',
|
||||
value: '10010301'
|
||||
}, {
|
||||
text: '豆各庄地区',
|
||||
value: '10010302'
|
||||
}, {
|
||||
text: '王四营地区',
|
||||
value: '10010303'
|
||||
}, {
|
||||
text: '东湖街道',
|
||||
value: '10010304'
|
||||
}, {
|
||||
text: '首都机场街道',
|
||||
value: '10010305'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
text: '广东省',
|
||||
value: '440000',
|
||||
children: [{
|
||||
text: '广州市',
|
||||
value: '440100',
|
||||
children: [{
|
||||
text: '荔湾区',
|
||||
value: '440101',
|
||||
children: [{
|
||||
text: '茶滘街道',
|
||||
value: '44010101'
|
||||
}, {
|
||||
text: '东漖街道',
|
||||
value: '44010102'
|
||||
}, {
|
||||
text: '海龙街道',
|
||||
value: '44010103'
|
||||
}, {
|
||||
text: '东沙街道',
|
||||
value: '44010104'
|
||||
}, {
|
||||
text: '中南街道',
|
||||
value: '44010105'
|
||||
}]
|
||||
|
||||
}, {
|
||||
text: '越秀区',
|
||||
value: '440102',
|
||||
children: [{
|
||||
text: '珠光街道',
|
||||
value: '44010201'
|
||||
}, {
|
||||
text: '大东街道',
|
||||
value: '44010202'
|
||||
}, {
|
||||
text: '白云街道',
|
||||
value: '44010203'
|
||||
}, {
|
||||
text: '登峰街道',
|
||||
value: '44010204'
|
||||
}, {
|
||||
text: '矿泉街道',
|
||||
value: '44010205'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
text: '韶关市',
|
||||
value: '440200',
|
||||
children: [{
|
||||
text: '武江区',
|
||||
value: '440201',
|
||||
children: [{
|
||||
text: '西联镇',
|
||||
value: '44020101'
|
||||
}, {
|
||||
text: '西河镇',
|
||||
value: '44020102'
|
||||
}, {
|
||||
text: '龙归镇',
|
||||
value: '44020103'
|
||||
}, {
|
||||
text: '江湾镇',
|
||||
value: '44020104'
|
||||
}, {
|
||||
text: '重阳镇',
|
||||
value: '44020105'
|
||||
}]
|
||||
}, {
|
||||
text: '浈江区',
|
||||
value: '440202',
|
||||
children: [{
|
||||
text: '十里亭镇',
|
||||
value: '44020201'
|
||||
}, {
|
||||
text: '犁市镇',
|
||||
value: '44020202'
|
||||
}, {
|
||||
text: '花坪镇',
|
||||
value: '44020203'
|
||||
}, {
|
||||
text: '田螺冲办事处',
|
||||
value: '44020204'
|
||||
}, {
|
||||
text: '曲仁办事处',
|
||||
value: '44020205'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
options,
|
||||
options2,
|
||||
options3,
|
||||
options4,
|
||||
options5,
|
||||
options6,
|
||||
options7
|
||||
}
|
||||
157
pages/component/form/picker/picker.vue
Normal file
157
pages/component/form/picker/picker.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Picker <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Picker 选择器，用于数据的选择，可联动选择。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="一级选择" bold :margin="['24rpx']"
|
||||
@click="btnClick(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="二级选择 - 不联动" bold @click="btnClick(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="三级选择 - 不联动" bold :margin="['24rpx']"
|
||||
@click="btnClick(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="四级选择 - 不联动" bold @click="btnClick(4)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="二级选择 - 联动" bold :margin="['24rpx']"
|
||||
@click="btnClick(5)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="三级选择 - 联动" bold @click="btnClick(6)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="四级选择 - 联动" bold :margin="['24rpx']"
|
||||
@click="btnClick(7)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="设置默认值 / 暗黑" bold @click="pickerShow">
|
||||
</fui-button>
|
||||
|
||||
<view class="fui-picker__result">
|
||||
选择的值为：{{result}}
|
||||
</view>
|
||||
</view>
|
||||
<fui-picker :layer="layer" :options="items" :linkage="linkage" :show="show" @change="change" @cancel="cancel">
|
||||
</fui-picker>
|
||||
|
||||
<fui-picker theme="dark" title="请选择时间" :value="value" param="dark" :options="options" @change="onChange"
|
||||
ref="picker">
|
||||
</fui-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pkData from './picker.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ['10:00-11:30'],
|
||||
result: '',
|
||||
layer: 1,
|
||||
items: [],
|
||||
linkage: false,
|
||||
show: false,
|
||||
options: pkData.options,
|
||||
options2: pkData.options2,
|
||||
options3: pkData.options3,
|
||||
options4: pkData.options4,
|
||||
options5: pkData.options5,
|
||||
options6: pkData.options6,
|
||||
options7: pkData.options7
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
btnClick(type) {
|
||||
this.show = false;
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.layer = 1;
|
||||
this.linkage = false;
|
||||
this.items = this.options
|
||||
break;
|
||||
case 2:
|
||||
this.layer = 2;
|
||||
this.linkage = false;
|
||||
this.items = this.options2
|
||||
break;
|
||||
case 3:
|
||||
this.layer = 3;
|
||||
this.linkage = false;
|
||||
this.items = this.options3
|
||||
break;
|
||||
case 4:
|
||||
this.layer = 4;
|
||||
this.linkage = false;
|
||||
this.items = this.options4
|
||||
break;
|
||||
case 5:
|
||||
this.layer = 2;
|
||||
this.linkage = true;
|
||||
this.items = this.options5
|
||||
break;
|
||||
case 6:
|
||||
this.layer = 3;
|
||||
this.linkage = true;
|
||||
this.items = this.options6
|
||||
break;
|
||||
case 7:
|
||||
this.layer = 4;
|
||||
this.linkage = true;
|
||||
this.items = this.options7
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = true;
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
this.show = false
|
||||
this.onChange(e)
|
||||
},
|
||||
onChange(e) {
|
||||
console.log(e)
|
||||
this.result = JSON.stringify(e || {})
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
pickerShow() {
|
||||
//显示选择器
|
||||
this.$refs.picker.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-picker__result {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
word-break: break-all;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
141
pages/component/form/radio/radio.vue
Normal file
141
pages/component/form/radio/radio.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186140 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Radio</view>
|
||||
<view class="fui-page__desc">Radio 单项选择器。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-radio-group name="radio" v-model="val" @change="change">
|
||||
<view class="fui-list__item">
|
||||
<fui-label>
|
||||
<view class="fui-align__center">
|
||||
<fui-radio value="1"></fui-radio>
|
||||
<text class="fui-text">选中</text>
|
||||
</view>
|
||||
</fui-label>
|
||||
<fui-label :margin="['0','0','0','40rpx']">
|
||||
<view class="fui-align__center">
|
||||
<fui-radio value="2"></fui-radio>
|
||||
<text class="fui-text">未选中</text>
|
||||
</view>
|
||||
</fui-label>
|
||||
</view>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-radio-group>
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-radio :checked="item.checked" :value="item.value" color="#FFB703"
|
||||
borderColor="#B2B2B2">
|
||||
</fui-radio>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-radio-group>
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-radio :checked="item.checked" :value="item.value">
|
||||
</fui-radio>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-radio-group>
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-list__cell">
|
||||
<text>{{item.name}}</text>
|
||||
<fui-radio isCheckMark checkMarkColor="#FF2B2B" :scaleRatio="1.3" :checked="item.checked"
|
||||
:value="item.value">
|
||||
</fui-radio>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
<view class="fui-section__title">修改圆角值</view>
|
||||
<fui-radio-group>
|
||||
<fui-label v-for="(item,index) in radioItems" :key="index">
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<fui-radio :checked="item.checked" :value="item.value" color="#FFB703" borderColor="#B2B2B2"
|
||||
borderRadius="8rpx">
|
||||
</fui-radio>
|
||||
<text class="fui-text">{{item.name}}</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</fui-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val: '1',
|
||||
radioItems: [{
|
||||
name: '小于18岁',
|
||||
value: '1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '18~28岁',
|
||||
value: '2',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
name: '29~40岁',
|
||||
value: '3',
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change:' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 28rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.fui-list__cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
53
pages/component/form/rate/rate.vue
Normal file
53
pages/component/form/rate/rate.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 140 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Rate <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Rate 评分，对评价进行展示或对事物进行快速的评级操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-rate @change="change"></fui-rate>
|
||||
<view class="fui-section__title">设置颜色</view>
|
||||
<fui-rate color="#888" activeColor="#465CFF" @change="change"></fui-rate>
|
||||
<view class="fui-section__title">设置大小</view>
|
||||
<fui-rate :size="48" @change="change"></fui-rate>
|
||||
<view class="fui-section__title">设置最大评分数</view>
|
||||
<fui-rate :max="8" :score="5" @change="change"></fui-rate>
|
||||
<view class="fui-section__title">支持半星</view>
|
||||
<fui-rate allowHalf @change="change"></fui-rate>
|
||||
<view class="fui-section__title">仅展示，禁用操作</view>
|
||||
<fui-rate disabled :score="3" @change="change"></fui-rate>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e){
|
||||
//返回评分 e.score
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background: #fff;
|
||||
}
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
83
pages/component/form/searchBar/searchBar.vue
Normal file
83
pages/component/form/searchBar/searchBar.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 1 407254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">SearchBar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">SearchBar 搜索栏，主要用于内容搜索，跳转展示等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-search-bar @search="search"></fui-search-bar>
|
||||
<view class="fui-section__title">调整样式</view>
|
||||
<fui-search-bar background="#ededed" radius="36" searchColor="#FFB703" @search="search"></fui-search-bar>
|
||||
<view class="fui-section__title">插槽使用/返回箭头/不显示占位</view>
|
||||
<fui-search-bar background="#fff" radius="36" inputBackground="#fafafa" @search="search">
|
||||
<view class="fui-arrow__left" @tap.stop="back">
|
||||
<fui-icon name="arrowleft" size="56"></fui-icon>
|
||||
</view>
|
||||
</fui-search-bar>
|
||||
<view class="fui-section__title">占位内容左对齐</view>
|
||||
<fui-search-bar isLeft background="#111" color="#fff" inputBackground="#222" @search="search">
|
||||
</fui-search-bar>
|
||||
<view class="fui-section__title">禁用状态，只做跳转</view>
|
||||
<fui-search-bar disabled @click="onClick"></fui-search-bar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
search(e) {
|
||||
//输入框值
|
||||
console.log(e.detail.value)
|
||||
this.fui.toast(`搜索关键词:${e.detail.value}`)
|
||||
//搜索逻辑自行处理
|
||||
//...
|
||||
},
|
||||
onClick() {
|
||||
this.fui.toast('跳转至搜索页面~')
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-arrow__left {
|
||||
flex-shrink: 0;
|
||||
margin-left: -8rpx;
|
||||
padding-right: 12rpx;
|
||||
}
|
||||
|
||||
.fui-arrow__left:active {
|
||||
opacity: .5;
|
||||
}
|
||||
</style>
|
||||
129
pages/component/form/select/select.vue
Normal file
129
pages/component/form/select/select.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86140725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Select <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Select 选择器，用于弹出一个底部菜单给用户选择操作，可单选或多选。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="单选+默认选中" bold @click="btnClick(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="多选" bold :margin="['24rpx']"
|
||||
@click="btnClick(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="列表" bold @click="btnClick(3)">
|
||||
</fui-button>
|
||||
<view class="fui-picker__result">
|
||||
选择的值为：{{result}}
|
||||
</view>
|
||||
</view>
|
||||
<fui-select :show="show" :options="items" title="请选择平台" :type="type" @click="onTap"
|
||||
@confirm="onConfirm($event,1)" @close="onClose(1)">
|
||||
</fui-select>
|
||||
<!--多选-->
|
||||
<fui-select :show="show1" :options="items1" title="请选择银行" multiple isReverse checkboxColor="#FFC529"
|
||||
btnBackground="#FFC529" btnColor="#1A1D26" closeColor="#6D758A" @confirm="onConfirm($event,2)"
|
||||
@close="onClose(2)">
|
||||
</fui-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
text: 'First UI（App-vue）',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: 'First UI（App-Nvue）',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: 'First UI（微信小程序）',
|
||||
src: '/static/images/common/logo.png',
|
||||
//设置默认选中
|
||||
checked: true
|
||||
}, {
|
||||
text: 'First UI（支付宝小程序，禁用选择）',
|
||||
src: '/static/images/common/logo.png',
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'First UI（百度小程序）',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: 'First UI（字节小程序）',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: 'First UI（QQ小程序）',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: 'First UI（H5）',
|
||||
src: '/static/images/common/icon_tabbar.png'
|
||||
}],
|
||||
//需要设置默认选中时使用items数据格式
|
||||
items1: ['中国银行', '中国建设银行', '中国工商银行', '中国农业银行', '中国邮政储蓄银行'],
|
||||
show: false,
|
||||
show1: false,
|
||||
type: 'select',
|
||||
result: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
btnClick(type) {
|
||||
if (type === 2) {
|
||||
this.show1 = true;
|
||||
} else {
|
||||
this.type = type === 1 ? 'select' : 'list';
|
||||
setTimeout(() => {
|
||||
this.show = true;
|
||||
}, 80)
|
||||
}
|
||||
},
|
||||
onTap(e) {
|
||||
//仅type=list时有效
|
||||
console.log(e)
|
||||
this.result = JSON.stringify(e)
|
||||
|
||||
this.onClose(1)
|
||||
|
||||
},
|
||||
onConfirm(e, type) {
|
||||
//仅type=select时有效
|
||||
console.log(e)
|
||||
this.result = JSON.stringify(e)
|
||||
this.onClose(type)
|
||||
},
|
||||
onClose(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else {
|
||||
this.show1 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-picker__result {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
word-break: break-all;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
85
pages/component/form/slider/slider.vue
Normal file
85
pages/component/form/slider/slider.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Slider <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Slider 滑块选择器，用于在一个区间内选择特定值。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">默认使用</view>
|
||||
<fui-slider :width="width" @change="onChange" @changing="onChanging"></fui-slider>
|
||||
<view class="fui-section__title">初始值/显示value</view>
|
||||
<fui-slider :value="50" showValue></fui-slider>
|
||||
<view class="fui-section__title">仅显示/禁止滑动</view>
|
||||
<fui-slider :value="70" showValue disabled></fui-slider>
|
||||
<view class="fui-section__title">调整颜色</view>
|
||||
<fui-slider showValue background="rgba(255, 183, 3, .3)" activeColor="#FFB703" blockColor="#FFB703"
|
||||
valueColor="#FFB703"></fui-slider>
|
||||
<view class="fui-section__title">区间选择/min/max</view>
|
||||
<fui-slider showValue section width="220" :min="100" :max="800" :value="100" :endValue="800"
|
||||
@change="sectionChange">
|
||||
</fui-slider>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 头条小程序边缘侧滑返回事件与touch事件有冲突
|
||||
// 头条小程序中组件不要靠屏幕边缘太近
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
init: true,
|
||||
width: uni.upx2px(600)
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef MP-TOUTIAO
|
||||
//禁用侧滑返回
|
||||
// tt.setSwipeBackMode(0);
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
onChange(e) {
|
||||
console.log(e)
|
||||
if (!this.init || e.value !== 0) {
|
||||
this.fui.toast(`您选择的值为：${e.value}`)
|
||||
}
|
||||
this.init = false
|
||||
},
|
||||
//需要实时数据时使用
|
||||
onChanging(e) {
|
||||
//console.log(e)
|
||||
},
|
||||
//区间选择返回数据
|
||||
sectionChange(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
/* 头条小程序边缘侧滑返回事件与touch事件有冲突
|
||||
头条小程序中组件不要靠屏幕边缘太近 */
|
||||
|
||||
/* #ifdef MP-TOUTIAO */
|
||||
.fui-page__spacing {
|
||||
padding-left: 64rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
83
pages/component/form/switch/switch.vue
Normal file
83
pages/component/form/switch/switch.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1407 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Switch</view>
|
||||
<view class="fui-page__desc">Switch 开关选择器，原生组件增强。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-list-cell :highlight="false" :padding="['28rpx','32rpx']">
|
||||
<view class="fui-cells">
|
||||
<text>状态：{{status?'ON':'OFF'}}</text>
|
||||
<fui-switch @change="change"></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">默认打开</view>
|
||||
<fui-list-cell :highlight="false" :padding="['28rpx','32rpx']">
|
||||
<view class="fui-cells">
|
||||
<text>checked</text>
|
||||
<fui-switch checked></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">禁用状态</view>
|
||||
<fui-list-cell :highlight="false" :padding="['28rpx','32rpx']">
|
||||
<view class="fui-cells">
|
||||
<text>checked/disabled</text>
|
||||
<fui-switch checked disabled></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">改变大小、颜色</view>
|
||||
<fui-label>
|
||||
<fui-list-cell>
|
||||
<view class="fui-cells">
|
||||
<text>scaleRatio</text>
|
||||
<fui-switch :scaleRatio="0.8" color="#FFB703"></fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
<view class="fui-section__title">展示为checkbox</view>
|
||||
<fui-label>
|
||||
<fui-list-cell>
|
||||
<view class="fui-cells">
|
||||
<text>type=checkbox</text>
|
||||
<fui-switch type="checkbox" color="#FFB703" :scaleRatio="1.1">
|
||||
</fui-switch>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-label>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.status = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-cells {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
63
pages/component/form/textarea/textarea.vue
Normal file
63
pages/component/form/textarea/textarea.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4 0 72 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Textarea</view>
|
||||
<view class="fui-page__desc">Textarea 多行输入框，该组件是对原生textarea组件的增强，内置了常用布局样式，同时包含 textarea 所有功能。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基本使用</view>
|
||||
<fui-textarea placeholder="请输入内容"></fui-textarea>
|
||||
<view class="fui-section__title">带标题</view>
|
||||
<fui-textarea flexStart label="标题" placeholder="请输入内容"></fui-textarea>
|
||||
<view class="fui-section__title">调整高度、必填</view>
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<fui-textarea required height="40rpx" label="标题" placeholder="请输入内容"></fui-textarea>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
<fui-textarea required height="40rpx" label="标题"></fui-textarea>
|
||||
<!-- #endif -->
|
||||
<view class="fui-section__title">输入长度计数、双向绑定</view>
|
||||
<fui-textarea isCounter placeholder="请输入内容" v-model="text"></fui-textarea>
|
||||
<view class="fui-section__title">带边框</view>
|
||||
<view class="fui-textarea__box">
|
||||
<fui-textarea textareaBorder placeholder="请输入简介"></fui-textarea>
|
||||
</view>
|
||||
<view class="fui-section__title">设置圆角</view>
|
||||
<view class="fui-textarea__box">
|
||||
<fui-textarea :radius="24" textareaBorder border-color="#FFB703" background-color="#f8f8f8" placeholder="请输入内容"></fui-textarea>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-textarea__box {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
225
pages/component/form/upload/upload.vue
Normal file
225
pages/component/form/upload/upload.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Upload <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Upload 图片上传，用于选择或拍照进行上传图片。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">自动上传</view>
|
||||
<fui-upload :max="5" immediate :url="url" ref="upload" @success="success" @error="error"
|
||||
@complete="complete" @preview="preview">
|
||||
</fui-upload>
|
||||
<view class="fui-section__title">手动上传/自定义加号图标/背景/圆角</view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="开始上传" bold @click="startUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-upload background="#333" radius="20" :fileList="fileList" :url="url" ref="upload2" @success="success2"
|
||||
@error="error2" @complete="complete2" @preview="preview">
|
||||
<fui-icon name="plussign" color="#d1d1d1"></fui-icon>
|
||||
</fui-upload>
|
||||
<view class="fui-section__title">传入文件上传函数，返回一个promise</view>
|
||||
|
||||
<fui-upload :max="3" call-upload border-color="#FFB703" border-sytle="dashed" ref="uploader"
|
||||
@reupload="reUpload" @complete="complete3" @preview="preview">
|
||||
</fui-upload>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button :margin="['48rpx','0']" type="gray" btn-size="medium" text="调用upload方法上传" bold
|
||||
@click="callUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
<!--previewImage：百度小程序只支持预览网络路径图片，这里为了做兼容-->
|
||||
<!-- #ifdef MP-BAIDU -->
|
||||
<fui-gallery :show="show" :current="current" :urls="preUrls" @hide="hideGallery"></fui-gallery>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-BAIDU
|
||||
//预览图片列表
|
||||
preUrls: [],
|
||||
show: false,
|
||||
current: 0,
|
||||
// #endif
|
||||
//上传接口地址
|
||||
url: 'https://ffa.firstui.cn/api/example/upload-file',
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status: '',
|
||||
//上传的图片地址列表
|
||||
urls: [],
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status2: '',
|
||||
//初始化已上传的图片列表
|
||||
fileList: ['https://res.firstui.cn/static/images/common/logo.png'],
|
||||
//上传的图片地址列表
|
||||
urls2: [],
|
||||
//调用upload 方法上传
|
||||
status3: '',
|
||||
urls3: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.urls2 = this.fileList
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
success(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的图片地址
|
||||
//e.index为图片索引值
|
||||
this.$refs.upload.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error(e) {
|
||||
this.status = e.status
|
||||
},
|
||||
complete(e) {
|
||||
this.status = e.status
|
||||
this.urls = e.urls
|
||||
if (this.status === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的图片列表 this.urls
|
||||
console.log(this.urls)
|
||||
}
|
||||
},
|
||||
preview(e) {
|
||||
// #ifdef MP-BAIDU
|
||||
this.preUrls = e.urls;
|
||||
this.current = e.index;
|
||||
setTimeout(() => {
|
||||
this.show = true;
|
||||
}, 50)
|
||||
// #endif
|
||||
},
|
||||
hideGallery() {
|
||||
this.show = false;
|
||||
},
|
||||
success2(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的图片地址
|
||||
//e.index为图片索引值
|
||||
this.$refs.upload2.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error2(e) {
|
||||
this.status2 = e.status
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e)
|
||||
})
|
||||
},
|
||||
complete2(e) {
|
||||
this.status2 = e.status
|
||||
this.urls2 = e.urls
|
||||
if (this.status2 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的图片列表 this.urls2
|
||||
console.log(this.urls2)
|
||||
}
|
||||
},
|
||||
startUpload() {
|
||||
if (!this.status2 || this.status2 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的图片！')
|
||||
return
|
||||
}
|
||||
//开始上传
|
||||
this.$refs.upload2.start()
|
||||
},
|
||||
/*
|
||||
以下为调用upload方法手动上传的所有方法内容
|
||||
*/
|
||||
//调用upload方法上传时传入的回调函数
|
||||
uploadFile(file) {
|
||||
//上传的文件信息
|
||||
console.log('upload file', file)
|
||||
// 文件上传的函数，返回一个promise
|
||||
//上传成功后返回上传后的图片地址，上传失败则返回false即可
|
||||
return new Promise((resolve, reject) => {
|
||||
//调用api上传，所有需要参数自行补充
|
||||
uni.uploadFile({
|
||||
url: this.url,
|
||||
name: 'file',
|
||||
// header: {},
|
||||
// formData:{},
|
||||
filePath: file.path,
|
||||
success: (res) => {
|
||||
//以下成功或失败逻辑根据接口自行处理
|
||||
const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
|
||||
if (data.statusCode === 200) {
|
||||
//返回上传成功后的图片
|
||||
resolve(data.data.url)
|
||||
} else {
|
||||
//上传失败
|
||||
reject(false)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
//上传失败
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
callUpload() {
|
||||
//注意：此方法上传函数需要页面自行实现，如上 uploadFile（当组件内部方法无法满足时使用该方法自行去实现上传）
|
||||
if (!this.status3 || this.status3 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的图片！')
|
||||
return
|
||||
}
|
||||
//调用upload 方法上传，并传入函数，此时请勿传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile)
|
||||
},
|
||||
//重新上传
|
||||
reUpload(e) {
|
||||
/*
|
||||
callUpload 中上传失败时会出现重新上传按钮
|
||||
点击重新上传按钮触发（仅call-upload 为true 时有效）
|
||||
*/
|
||||
//当前上传按钮索引值
|
||||
console.log(e.index)
|
||||
//调用upload 方法上传，并传入函数，且此时需要传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile, e.index)
|
||||
},
|
||||
complete3(e) {
|
||||
console.log(e)
|
||||
this.status3 = e.status
|
||||
this.urls3 = e.urls
|
||||
if (this.status3 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的图片列表 this.urls3
|
||||
// console.log(this.urls3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
211
pages/component/form/uploadVideo/uploadVideo.vue
Normal file
211
pages/component/form/uploadVideo/uploadVideo.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 4 0 72 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">UploadVideo <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">UploadVideo 视频上传，拍摄或从手机相册中选择视频进行上传。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">自动上传/设置边框</view>
|
||||
<fui-upload-video immediate border-color="#FFB703" border-sytle="dashed" :url="url" ref="upload"
|
||||
@success="success" @error="error" @complete="complete">
|
||||
</fui-upload-video>
|
||||
<view class="fui-section__title">手动上传/自定义加号图标/背景</view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="开始上传" bold @click="startUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-upload-video :width="340" :max="2" background="#333" addColor="#d1d1d1" :fileList="fileList" :url="url"
|
||||
ref="upload2" @success="success2" @error="error2" @complete="complete2">
|
||||
<fui-icon name="plussign" color="#d1d1d1" :size="80"></fui-icon>
|
||||
</fui-upload-video>
|
||||
<view class="fui-section__title">传入文件上传函数，返回一个promise</view>
|
||||
<fui-upload-video call-upload ref="uploader" @reupload="reUpload" @complete="complete3"></fui-upload-video>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button :margin="['48rpx','0']" type="gray" btn-size="medium" text="调用upload方法上传" bold
|
||||
@click="callUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//上传接口地址
|
||||
url: 'https://ffa.firstui.cn/api/example/upload-file',
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status: '',
|
||||
//上传的视频地址列表
|
||||
urls: [],
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status2: '',
|
||||
//初始化已上传的视频列表
|
||||
fileList: ['https://ffa.firstui.cn/uploadfile/220831211231709.mp4'],
|
||||
//上传的视频地址列表
|
||||
urls2: [],
|
||||
//调用upload 方法上传
|
||||
status3: '',
|
||||
urls3: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.urls2 = this.fileList
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
success(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的视频地址
|
||||
//e.index为视频索引值
|
||||
this.$refs.upload.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error(e) {
|
||||
this.status = e.status
|
||||
},
|
||||
complete(e) {
|
||||
this.status = e.status
|
||||
this.urls = e.urls
|
||||
if (this.status === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls
|
||||
console.log(this.urls)
|
||||
}
|
||||
},
|
||||
success2(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的视频地址
|
||||
//e.index为视频索引值
|
||||
this.$refs.upload2.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error2(e) {
|
||||
this.status2 = e.status
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e)
|
||||
})
|
||||
},
|
||||
complete2(e) {
|
||||
this.status2 = e.status
|
||||
this.urls2 = e.urls
|
||||
if (this.status2 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls
|
||||
console.log(this.urls)
|
||||
}
|
||||
},
|
||||
startUpload() {
|
||||
if (!this.status2 || this.status2 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的视频！')
|
||||
return
|
||||
}
|
||||
//开始上传
|
||||
this.$refs.upload2.start()
|
||||
},
|
||||
/*
|
||||
以下为调用upload方法手动上传的所有方法内容
|
||||
*/
|
||||
//调用upload方法上传时传入的回调函数
|
||||
uploadFile(filePath, index) {
|
||||
//filePath：上传的临时文件路径；index：位置索引值（更新上传进度使用）
|
||||
console.log('upload filePath', filePath)
|
||||
|
||||
// 文件上传的函数，返回一个promise
|
||||
//上传成功后返回上传后的视频地址，上传失败则返回false即可
|
||||
return new Promise((resolve, reject) => {
|
||||
//调用api上传，所有需要参数自行补充
|
||||
const uploadTask = uni.uploadFile({
|
||||
url: this.url,
|
||||
name: 'file',
|
||||
// header: {},
|
||||
// formData: {},
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
//以下成功或失败逻辑根据接口自行处理
|
||||
const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
|
||||
if (data.statusCode === 200) {
|
||||
//返回上传成功后的视频（约定返回格式，不可修改）
|
||||
resolve(data.data.url)
|
||||
} else {
|
||||
//上传失败（约定返回格式，不可修改）
|
||||
reject(false)
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
//上传失败（约定返回格式，不可修改）
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
//更新上传进度
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
//调用方法更新组件内当前视频上传进度
|
||||
this.$refs.uploader.setProgress(res.progress, index)
|
||||
});
|
||||
})
|
||||
},
|
||||
callUpload() {
|
||||
//注意：此方法上传函数需要页面自行实现，如上 uploadFile（当组件内部方法无法满足时使用该方法自行去实现上传）
|
||||
if (!this.status3 || this.status3 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的视频！')
|
||||
return
|
||||
}
|
||||
//调用upload 方法上传，并传入函数，此时请勿传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile)
|
||||
},
|
||||
//重新上传
|
||||
reUpload(e) {
|
||||
/*
|
||||
callUpload 中上传失败时会出现重新上传按钮
|
||||
点击重新上传按钮触发（仅call-upload 为true 时有效）
|
||||
*/
|
||||
//当前上传按钮索引值
|
||||
console.log(e.index)
|
||||
//调用upload 方法上传，并传入函数，且此时需要传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile, e.index)
|
||||
},
|
||||
complete3(e) {
|
||||
console.log(e)
|
||||
this.status3 = e.status
|
||||
this.urls3 = e.urls
|
||||
if (this.status3 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls3
|
||||
// console.log(this.urls3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
padding-left: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
64
pages/component/js/clipboard/clipboard.vue
Normal file
64
pages/component/js/clipboard/clipboard.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Clipboard<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Clipboard 复制文本，主要针对H5做兼容。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="www.firstui.cn" bold :margin="['24rpx']"
|
||||
@click="copy"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="doc.firstui.cn" bold
|
||||
@click="copyText($event,'doc.firstui.cn')">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import $fui from '@/components/firstui/fui-clipboard';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: mapState(['status']),
|
||||
methods: {
|
||||
copy(e) {
|
||||
const text = "www.firstui.cn"
|
||||
this.copyText(e, text, '官网地址复制成功')
|
||||
},
|
||||
copyText(e, text, tips) {
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
if (this.status == 0) {
|
||||
this.fui.toast('功能完善中~');
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
$fui.getClipboardData(text, res => {
|
||||
if (res) {
|
||||
this.fui.toast(tips || '文档地址复制成功');
|
||||
}
|
||||
}, e);
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
167
pages/component/js/request/request.vue
Normal file
167
pages/component/js/request/request.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Request<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Request 网络请求，支持Promise，可在发起请求和请求响应之前进行拦截，更多使用请参考文档。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="GET 返回全部数据" bold :margin="['24rpx']"
|
||||
@click="get(false)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="GET 返回简洁数据" bold @click="get(true)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="GET 传参数{id}" bold :margin="['24rpx']"
|
||||
@click="get2">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="POST 返回全部数据" bold @click="post(false)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="POST 返回简洁数据" bold :margin="['24rpx']"
|
||||
@click="post(true)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="自定义接口域名" bold @click="changeHost">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="合并多个请求" bold :margin="['24rpx']" @click="all">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="同步请求" bold @click="sync">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="使用request方法请求" bold :margin="['24rpx']"
|
||||
@click="request">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//该组件已全局引入，请查看文档使用
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//brief 是否返回简洁数据
|
||||
get(brief) {
|
||||
this.http.get('/api/example/info', {
|
||||
brief: brief
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (brief) {
|
||||
if (res.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
} else {
|
||||
const d = res.data;
|
||||
if (d.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
get2() {
|
||||
this.http.get('/api/example/info', {
|
||||
data: {
|
||||
id: 1
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const d = res.data;
|
||||
if (d.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
//brief 是否返回简洁数据
|
||||
post(brief) {
|
||||
this.http.post('/api/example/info', {
|
||||
brief: brief,
|
||||
data: {
|
||||
Id: 2,
|
||||
Name: '张三'
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (brief) {
|
||||
if (res.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
} else {
|
||||
const d = res.data;
|
||||
if (d.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
changeHost() {
|
||||
this.http.get('/api/example/info', {
|
||||
//此处只是为了演示
|
||||
host: 'https://ffa.firstui.cn'
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const d = res.data;
|
||||
if (d.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
all() {
|
||||
//合并多个请求：都返回数据后再进行其他操作
|
||||
let func1 = this.http.get('/api/example/info')
|
||||
let func2 = this.http.get('/api/example/info', {
|
||||
data: {
|
||||
id: 3
|
||||
}
|
||||
})
|
||||
this.http.all([func1, func2]).then(res => {
|
||||
console.log(res)
|
||||
this.fui.toast('请求成功！')
|
||||
}).catch(e => {})
|
||||
},
|
||||
async sync() {
|
||||
console.log('同步请求start...')
|
||||
let res = await this.http.get('/api/example/info')
|
||||
console.log(res)
|
||||
console.log('同步请求end...')
|
||||
this.fui.toast('请求成功！')
|
||||
},
|
||||
request() {
|
||||
this.http.request({
|
||||
url: '/api/example/info',
|
||||
method: 'GET',
|
||||
data: {
|
||||
id: '100'
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const d = res.data;
|
||||
if (d.succeeded) {
|
||||
this.fui.toast('请求成功！')
|
||||
}
|
||||
}).catch(e => {})
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
149
pages/component/js/utils/utils.vue
Normal file
149
pages/component/js/utils/utils.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0 7 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Utils</view>
|
||||
<view class="fui-page__desc">Utils 工具类，更多使用请查看文档。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">英文首字母大写</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">转换：english</view>
|
||||
<fui-button type="gray" btn-size="medium" text="首字母转大写" bold :margin="['24rpx']"
|
||||
@click="titleCase"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">压缩连续的字母字符串</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">压缩：aabbbcddddddddd</view>
|
||||
<fui-button type="gray" btn-size="medium" text="压缩" bold :margin="['24rpx']"
|
||||
@click="compressLetter"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">等待多少毫秒再执行 ，同步阻塞</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<fui-button type="gray" btn-size="medium" text="等待 1000毫秒" bold :margin="['24rpx']"
|
||||
@click="sleep"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">去字符串左右空格</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">字符串 abcd </view>
|
||||
<fui-button type="gray" btn-size="medium" text="去左右空格" bold :margin="['24rpx']"
|
||||
@click="trim"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">去字符串所有空格</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">字符串 a b c d </view>
|
||||
<fui-button type="gray" btn-size="medium" text="去所有空格" bold :margin="['24rpx']"
|
||||
@click="trimAll"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">替换所有相同字符串</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">将字符串：##a###b#######c# 中#替换为空</view>
|
||||
<fui-button type="gray" btn-size="medium" text="替换" bold :margin="['24rpx']"
|
||||
@click="replaceAll"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">格式化手机号码</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">手机号：15715600012</view>
|
||||
<fui-button type="gray" btn-size="medium" text="格式化" bold :margin="['24rpx']"
|
||||
@click="numberFormatter"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">格式化金额，保留两位小数</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">金额：2021</view>
|
||||
<fui-button type="gray" btn-size="medium" text="格式化" bold :margin="['24rpx']"
|
||||
@click="moneyFormatter"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">函数节流，连续触发事件</view>
|
||||
<view class="fui-btn__flex-center">
|
||||
<view class="fui-page__desc">3s执行一次，6s执行2次...：{{num}}</view>
|
||||
<fui-button type="gray" btn-size="medium" text="执行 +1" bold :margin="['24rpx']"
|
||||
@click="btnThrottle"></fui-button>
|
||||
</view>
|
||||
<view class="fui-section__title">其他功能</view>
|
||||
<view class="fui-page__desc">
|
||||
除以上功能以外，还有：日期时间格式化，RGB颜色转十六进制颜色，十六进制颜色转RGB颜色，获取唯一标识，获取uuid，简单数组合并去重，获取日期时间段，获取Url参数，函数防抖，函数节流等功能，具体使用请查看文档。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from '@/components/firstui/fui-utils';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.throttle = utils.throttle(() => {
|
||||
this.num++
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
titleCase() {
|
||||
const text = 'english';
|
||||
const val = utils.titleCase(text);
|
||||
console.log(val);
|
||||
this.fui.toast(val)
|
||||
},
|
||||
compressLetter() {
|
||||
const text = 'aabbbcddddddddd';
|
||||
const val = utils.compressLetter(text);
|
||||
console.log(val);
|
||||
this.fui.toast(val)
|
||||
},
|
||||
sleep() {
|
||||
utils.sleep(1000)
|
||||
this.fui.toast('1000ms后执行！')
|
||||
},
|
||||
trim() {
|
||||
const text = ' abcd ';
|
||||
const val = utils.trim(text);
|
||||
console.log(val);
|
||||
this.fui.toast(`字符串${val}`)
|
||||
},
|
||||
trimAll() {
|
||||
const text = ' a b c d ';
|
||||
const val = utils.trimAll(text);
|
||||
console.log(val);
|
||||
this.fui.toast(`字符串${val}`)
|
||||
},
|
||||
replaceAll() {
|
||||
const text = '##a###b#######c#';
|
||||
const val = utils.replaceAll(text, '#', '');
|
||||
console.log(val);
|
||||
this.fui.toast(val)
|
||||
},
|
||||
numberFormatter() {
|
||||
const text = '15715600012';
|
||||
const val = utils.numberFormatter(text);
|
||||
console.log(val);
|
||||
this.fui.toast(val)
|
||||
},
|
||||
moneyFormatter() {
|
||||
const text = '2021';
|
||||
const val = utils.moneyFormatter(text);
|
||||
console.log(val);
|
||||
this.fui.toast(val)
|
||||
},
|
||||
btnThrottle() {
|
||||
this.throttle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__flex-center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-section__title:not(:first-child) {
|
||||
margin-top: 72rpx;
|
||||
}
|
||||
</style>
|
||||
127
pages/component/js/validator/validator.vue
Normal file
127
pages/component/js/validator/validator.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 4 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Validator<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Validator 表单验证，提供了常用的表单校验方法（完整内容请查看文档），支持传入自定义校验方法。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-input required label="姓名" borderTop placeholder="请输入姓名" v-model="formData.name"></fui-input>
|
||||
<fui-input required label="手机号" placeholder="请输入手机号码" v-model="formData.mobile"></fui-input>
|
||||
<fui-input required label="密码" password placeholder="请输入密码" v-model="formData.password">
|
||||
</fui-input>
|
||||
<fui-input required label="确认密码" password placeholder="请再次输入密码" v-model="formData.confirmPwd">
|
||||
</fui-input>
|
||||
<fui-input label="年龄" placeholder="请输入年龄" v-model="formData.age"></fui-input>
|
||||
<fui-input label="身份证" placeholder="请输入身份证号码" v-model="formData.idCard"></fui-input>
|
||||
<fui-input label="邮箱" placeholder="请输入邮箱" v-model="formData.email"></fui-input>
|
||||
<fui-input label="个人主页" placeholder="请输入个人主页" v-model="formData.url">
|
||||
</fui-input>
|
||||
<fui-input label="商品金额" placeholder="请输入商品金额" v-model="formData.amount">
|
||||
</fui-input>
|
||||
<fui-input label="微信号" :bottomLeft="0" placeholder="自定义校验，6至20位，字母，数字..." v-model="formData.wechatNo">
|
||||
</fui-input>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button text="Submit" bold @click="submit"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import form from '@/components/firstui/fui-validator/fui-validator'
|
||||
//自定义校验方法
|
||||
function checkWxNo(value) {
|
||||
return /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value);
|
||||
}
|
||||
const rules = [{
|
||||
name: "name",
|
||||
rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
|
||||
msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
|
||||
}, {
|
||||
name: "mobile",
|
||||
rule: ["required", "isMobile"],
|
||||
msg: ["请输入手机号", "请输入正确的手机号"]
|
||||
}, {
|
||||
name: "password",
|
||||
rule: ["required", "isEnAndNo"],
|
||||
msg: ["请输入密码", "密码为4~30位数字和字母组合"]
|
||||
}, {
|
||||
name: "confirmPwd",
|
||||
rule: ["required", "isSame:password"],
|
||||
msg: ["请输入确认密码", "两次输入的密码不一致"]
|
||||
}, {
|
||||
name: "age",
|
||||
rule: ["isNumber", "range:[1,149]"],
|
||||
msg: ["请输入正确的年龄", "请输入正确的年龄范围：1~149"]
|
||||
}, {
|
||||
name: "idCard",
|
||||
rule: ["isIdCard"],
|
||||
msg: ["请输入正确的身份证号码"]
|
||||
}, {
|
||||
name: "email",
|
||||
rule: ["isEmail"],
|
||||
msg: ["请输入正确的邮箱"]
|
||||
}, {
|
||||
name: "url",
|
||||
rule: ["isUrl"],
|
||||
msg: ["请输入正确的URL地址"]
|
||||
}, {
|
||||
name: "amount",
|
||||
rule: ["isAmount"],
|
||||
msg: ["请输入正确的金额，允许保留两位小数"]
|
||||
}, {
|
||||
name: "wechatNo",
|
||||
validator: [{
|
||||
msg: "微信号不正确！请输入6~20位以字母开头，字母、数字、减号、下划线组合的微信号",
|
||||
method: checkWxNo
|
||||
}]
|
||||
}];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
name: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
confirmPwd: '',
|
||||
age: '',
|
||||
idCard: '',
|
||||
email: '',
|
||||
url: '',
|
||||
amount: '',
|
||||
wechatNo: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log(this.formData)
|
||||
let res = form.validator(this.formData, rules);
|
||||
console.log(res)
|
||||
if (res.isPassed) {
|
||||
this.fui.toast('校验通过！')
|
||||
} else {
|
||||
this.fui.toast(res.errorMsg)
|
||||
}
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
padding: 64rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
59
pages/component/layout/arc/arc.vue
Normal file
59
pages/component/layout/arc/arc.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">BannerArc <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">BannerArc 横幅底部圆弧，常用的布局组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-section is-line title="纯背景色" margin-top="32"></fui-section>
|
||||
<fui-banner-arc background="#465CFF" margin-top="32"></fui-banner-arc>
|
||||
<fui-section is-line title="渐变背景/调整高度/弧度" margin-top="96"></fui-section>
|
||||
<!-- ratio 用于调整弧度大小，值越大弧度越小 -->
|
||||
<fui-banner-arc background="linear-gradient(#6831FF,#465CFF)" :height="500" :ratio="1.5"
|
||||
margin-top="32"></fui-banner-arc>
|
||||
<fui-section is-line title="图片设置弧度" margin-top="96"></fui-section>
|
||||
<fui-banner-arc margin-top="32" background="#EDF9FF" height="512" :ratio="1.5">
|
||||
<image class="fui-banner" src="https://res.firstui.cn/static/images/my/light/img_banner_3x.png" mode="widthFix"></image>
|
||||
</fui-banner-arc>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.fui-banner {
|
||||
width: 750rpx;
|
||||
height: 512rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 750rpx;
|
||||
border-bottom-left-radius: 750rpx;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
103
pages/component/layout/card/card.vue
Normal file
103
pages/component/layout/card/card.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Card</view>
|
||||
<view class="fui-page__desc">Card 卡片，常用的布局组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-card :src="src" title="标题文字" tag="额外信息">
|
||||
<view class="fui-card__content">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
|
||||
</fui-card>
|
||||
<view class="fui-section__title">通栏展示</view>
|
||||
<fui-card :padding="['20rpx','32rpx']" full :src="src" title="标题文字" tag="额外信息">
|
||||
<view class="fui-card__content fui-padding">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
|
||||
</fui-card>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-card :src="src2" imageRadius="50%" title="First UI" color="#465CFF" tag="23小时前" :headerLine="false" showBorder>
|
||||
<view class="fui-list__item">
|
||||
<image class="fui-cover" :src="`${resUrl}/cooperate/light/img_banner_3x.png`" mode="widthFix">
|
||||
</image>
|
||||
<view class="fui-list__title">First UI重磅上线，一款轻量、全面、可靠的移动端组件库。</view>
|
||||
</view>
|
||||
</fui-card>
|
||||
<view class="fui-section__title">推荐布局</view>
|
||||
<fui-card>
|
||||
<view class="fui-list__item">
|
||||
<image class="fui-cover" :src="`${resUrl}/cooperate/dark/img_banner_3x.png`" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="fui-card__title">
|
||||
First UI重磅上线，一款轻量、全面、可靠的移动端组件库。
|
||||
</view>
|
||||
</fui-card>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resUrl:this.fui.resUrl(),
|
||||
src: '/static/images/common/icon_tabbar_3x.png',
|
||||
src2: '/static/images/common/img_logo.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-card__content {
|
||||
font-size: 28rpx;
|
||||
padding: 32rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-padding {
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
width: 100%;
|
||||
height: 385rpx;
|
||||
position: relative;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.fui-cover {
|
||||
width: 100%;
|
||||
height: 385rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fui-list__title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding: 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.fui-card__title {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
95
pages/component/layout/grid/grid.vue
Normal file
95
pages/component/layout/grid/grid.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Grid</view>
|
||||
<view class="fui-page__desc">Grid 宫格，主要使用场景如：热门内容等。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">九宫格</view>
|
||||
<fui-grid>
|
||||
<fui-grid-item v-for="(item,index) in nums" :key="index">
|
||||
<view class="fui-grid__cell">
|
||||
<image src="/static/images/common/icon_tabbar_3x.png" class="fui-icon" mode="widthFix"></image>
|
||||
<text>Grid</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
<view class="fui-section__title">高度自适应</view>
|
||||
<fui-grid :square="false">
|
||||
<fui-grid-item v-for="(item,index) in nums" :key="index">
|
||||
<view class="fui-grid__cell fui-padding">
|
||||
<image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
|
||||
</image>
|
||||
<text>Grid</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
<view class="fui-section__title">改变列数（4列）</view>
|
||||
<fui-grid :columns="4">
|
||||
<fui-grid-item v-for="(item,index) in arrs" :key="index">
|
||||
<view class="fui-grid__cell fui-padding">
|
||||
<image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
|
||||
</image>
|
||||
<text>Grid</text>
|
||||
</view>
|
||||
</fui-grid-item>
|
||||
</fui-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//百度小程序循环数字有问题
|
||||
nums: [0, 1, 2, 3, 4, 5, 6, 7, 8],
|
||||
arrs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
||||
}
|
||||
},
|
||||
onLoad() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
/* 非nvue端可通过此变量控制边框颜色 */
|
||||
/* --fui-color-border:#465CFF; */
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-grid__cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fui-padding {
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
|
||||
.fui-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fui-icon__2x {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fui-flex__column {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">HorizontalScroll <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">HorizontalScroll 横向滚动的视图容器，主要用于菜单导航，热门商品区等场景。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">商品展示</view>
|
||||
<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
|
||||
<view class="fui-list">
|
||||
<view class="fui-list--item" v-for="(item,index) in goodsList" :key="index">
|
||||
<fui-lazyload radius="16" marginBottom="20" :width="128" :height="128" :src="item.src"
|
||||
mode="aspectFill">
|
||||
</fui-lazyload>
|
||||
<fui-text :text="`￥${item.price}`" color="#FF2B2B" size="24"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-horizontal-scroll>
|
||||
<view class="fui-section__title">菜单展示</view>
|
||||
<fui-horizontal-scroll>
|
||||
<view>
|
||||
<view class="fui-list" :class="{'fui-mtop':index!==0}" v-for="(list,index) in menuList" :key="index">
|
||||
<view class="fui-list--item fui-mr--52" v-for="(item,idx) in list" :key="item.text">
|
||||
<fui-lazyload background="transparent" marginBottom="12" :width="96" :height="96" :src="item.icon"
|
||||
mode="aspectFill">
|
||||
</fui-lazyload>
|
||||
<fui-text un-shrink :text="item.text" color="#888" size="24"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</fui-horizontal-scroll>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from './index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList: data.goodsList,
|
||||
menuList: data.menuList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-list--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.fui-mr--52{
|
||||
margin-right: 52rpx;
|
||||
}
|
||||
|
||||
.fui-list--item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.fui-mtop{
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
89
pages/component/layout/horizontal-scroll/index.js
Normal file
89
pages/component/layout/horizontal-scroll/index.js
Normal file
@ -0,0 +1,89 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const goodsList = [{
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
|
||||
price: '29.90',
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
|
||||
price: '8.90'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
|
||||
price: '29.90',
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
|
||||
price: '8.90'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}]
|
||||
|
||||
const menuList = [
|
||||
[{
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '百亿补贴'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '查快递'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '实时低价'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '摇现金'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '家电清洗'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '活动日历'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '资质规则'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '限时秒杀'
|
||||
}],
|
||||
[{
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '签到'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '医药馆'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '断码清仓'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '爱回收'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '买车养车'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '家用电器'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '免费水果'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '充值中心'
|
||||
}]
|
||||
]
|
||||
export default {
|
||||
goodsList,
|
||||
menuList
|
||||
}
|
||||
181
pages/component/layout/layout/layout.vue
Normal file
181
pages/component/layout/layout/layout.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Layout</view>
|
||||
<view class="fui-page__desc">Layout 栅格布局，将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础布局</view>
|
||||
<fui-row margin-bottom="24rpx">
|
||||
<fui-col>
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
<fui-row margin-bottom="24rpx">
|
||||
<fui-col :span="12">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="12">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="24rpx">
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="24rpx">
|
||||
<fui-col :span="6">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="6">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="6">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="6">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
<fui-row marginBottom="24rpx">
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<view class="fui-section__title">混合布局</view>
|
||||
<fui-row marginBottom="24rpx" :gutter="gutter">
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="24rpx" :gutter="gutter">
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="16">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="4">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<view class="fui-section__title">分栏偏移</view>
|
||||
<fui-row marginBottom="10px" :gutter="gutter">
|
||||
<fui-col :span="8">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="8" :offset="6">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="10px" :gutter="gutter">
|
||||
<fui-col :span="6" :offset="6">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="6" :offset="6">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="10px" :gutter="gutter">
|
||||
<fui-col :span="12" :pullRight="0">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :span="6" :pushLeft="6">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
|
||||
<fui-row marginBottom="24rpx" :gutter="gutter">
|
||||
<fui-col :span="12" :offset="6">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
<view class="fui-section__title">响应式布局</view>
|
||||
<fui-row marginBottom="24rpx" :gutter="gutter">
|
||||
<fui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
<fui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="fui-col__item fui-color__black"></view>
|
||||
</fui-col>
|
||||
<fui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="fui-col__item fui-color__yellow"></view>
|
||||
</fui-col>
|
||||
</fui-row>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gutter: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-col__item {
|
||||
height: 84rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fui-color__black {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.fui-color__yellow {
|
||||
background-color: #FFB703;
|
||||
}
|
||||
</style>
|
||||
162
pages/component/layout/list/list.vue
Normal file
162
pages/component/layout/list/list.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">List</view>
|
||||
<view class="fui-page__desc">List 列表，常用的布局组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-list>
|
||||
<fui-list-cell>标题文字</fui-list-cell>
|
||||
<fui-list-cell>
|
||||
<text>标题文字</text>
|
||||
<text class="fui-text__explain">说明文字</text>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow>
|
||||
<text>标题文字</text>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow>
|
||||
<view class="fui-list__item">
|
||||
<text>标题文字</text>
|
||||
<text class="fui-text__explain">说明文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow :bottomLeft="0">
|
||||
<view class="fui-list__item">
|
||||
<text>标题文字</text>
|
||||
<fui-badge value="1" type="danger"></fui-badge>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</fui-list>
|
||||
<view class="fui-section__title" style="margin-bottom: 0;">无点击效果、带标题</view>
|
||||
<fui-list bottomBorder title="带标题的列表">
|
||||
<fui-list-cell :highlight="false">标题文字</fui-list-cell>
|
||||
<fui-list-cell :bottomBorder="false" :highlight="false" arrow>标题文字</fui-list-cell>
|
||||
</fui-list>
|
||||
<view class="fui-section__title">带图标的列表</view>
|
||||
<fui-list-cell topBorder>
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell>
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
<text class="fui-text__explain">说明文字</text>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow>
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow :bottomLeft="0">
|
||||
<view class="fui-list__item">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
<text class="fui-text__explain">说明文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
|
||||
<view class="fui-section__title">改变底部线条左侧偏移距离</view>
|
||||
<fui-list-cell topBorder :bottomLeft="104">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :bottomLeft="0">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">改变底部线条右侧偏移距离</view>
|
||||
<fui-list-cell :bottomRight="32">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :bottomBorder="false">
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<view class="fui-section__title">无线条</view>
|
||||
<fui-list-cell :bottomBorder="false" arrow>
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
<fui-list-cell :bottomBorder="false" arrow>
|
||||
<view class="fui-align__center">
|
||||
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
|
||||
</image>
|
||||
<text>标题文字</text>
|
||||
</view>
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
/* 非nvue端使用此变量改变list线条颜色，nvue端请查看文档 */
|
||||
/* --fui-color-border:#B2B2B2; */
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-list__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fui-text__explain {
|
||||
font-size: 28rpx;
|
||||
color: #7F7F7F;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fui-list__icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
60
pages/component/layout/movable-view/movable-view.vue
Normal file
60
pages/component/layout/movable-view/movable-view.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1407 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">MovableView <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image></view>
|
||||
<view class="fui-page__desc">MovableView 可移动的视图容器，在页面中可以拖拽滑动，暂不支持缩放。</view>
|
||||
</view>
|
||||
<fui-movable-view @change="change">
|
||||
<view class="fui-fab--box" @tap="handleClick">
|
||||
<fui-icon name="edit" color="#fff"></fui-icon>
|
||||
</view>
|
||||
</fui-movable-view>
|
||||
|
||||
<fui-movable-view top="200">
|
||||
<view class="fui-fab--box" @tap="handleClick">
|
||||
<fui-icon name="share" color="#fff"></fui-icon>
|
||||
</view>
|
||||
</fui-movable-view>
|
||||
|
||||
<fui-movable-view left="80">
|
||||
<view class="fui-fab--box" @tap="handleClick">
|
||||
<fui-icon name="plus" color="#fff"></fui-icon>
|
||||
</view>
|
||||
</fui-movable-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
change(e){
|
||||
console.log(e)
|
||||
},
|
||||
handleClick(){
|
||||
this.fui.toast('点击了~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-fab--box{
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 50%;
|
||||
background: #465CFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
98
pages/component/layout/panel/panel.vue
Normal file
98
pages/component/layout/panel/panel.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Panel <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image></view>
|
||||
<view class="fui-page__desc">Panel 面板，常用的布局组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-panel :panelData="panelData" radius="24" fontWeight="600"></fui-panel>
|
||||
<fui-panel :panelData="panelData2" :marginTop="24" :size="34" :descSize="26"></fui-panel>
|
||||
<fui-panel :panelData="panelData3" :marginTop="24" :size="34" :descSize="26">
|
||||
<fui-list-cell arrow :bottomBorder="false" topBorder topLeft="32">
|
||||
<text class="fui-text__link">查看更多</text>
|
||||
</fui-list-cell>
|
||||
</fui-panel>
|
||||
<fui-panel :panelData="panelData4" radius="16" :marginTop="24" width="60" height="60" :size="32"></fui-panel>
|
||||
<fui-panel :panelData="panelData5" :marginTop="24" :size="32" @click="itemClick">
|
||||
</fui-panel>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
panelData: {
|
||||
src: '/static/images/common/img_logo.png',
|
||||
title: '基础使用',
|
||||
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
|
||||
},
|
||||
panelData2: {
|
||||
head: '带标题的列表',
|
||||
src: '/static/images/common/logo.png',
|
||||
title: 'First UI组件库',
|
||||
desc: 'First UI是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
|
||||
},
|
||||
panelData3: {
|
||||
head: 'First UI介绍',
|
||||
list: [{
|
||||
src: '/static/images/common/logo.png',
|
||||
title: 'First UI组件库',
|
||||
desc: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
|
||||
}, {
|
||||
src: '/static/images/common/logo.png',
|
||||
title: 'First UI跨平台UI组件库',
|
||||
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
|
||||
}]
|
||||
},
|
||||
panelData4: {
|
||||
head: '设置图片大小',
|
||||
list: [{
|
||||
src: '/static/images/common/img_logo.png',
|
||||
title: 'First UI组件库'
|
||||
}, {
|
||||
src: '/static/images/common/img_logo.png',
|
||||
title: 'First UI跨平台UI组件库'
|
||||
}]
|
||||
},
|
||||
panelData5: {
|
||||
head: '附加信息',
|
||||
list: [{
|
||||
title: 'First UI组件库',
|
||||
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
|
||||
source: '开源中国',
|
||||
time: '2021-08-09'
|
||||
}, {
|
||||
title: 'First UI跨平台UI组件库',
|
||||
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
|
||||
source: 'GitHub',
|
||||
time: '2021-08-09',
|
||||
extra: 'Apache License 2.0'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-text__link {
|
||||
color: #465CFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
98
pages/component/layout/preview/preview.vue
Normal file
98
pages/component/layout/preview/preview.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 407 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Preview <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Preview 表单预览，常用的布局组件。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-preview :previewData="previewData"></fui-preview>
|
||||
<!-- 标签文本两端对齐 -->
|
||||
<fui-preview labelAlign="justify" labelWidth="112" :previewData="previewData2" marginTop="24"
|
||||
@click="btnClick"></fui-preview>
|
||||
<!-- 内容文本左对齐 -->
|
||||
<fui-preview bd-align="left" :labelWidth="136" :hdLabelWidth="136" :previewData="previewData"
|
||||
marginTop="24"></fui-preview>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
previewData: {
|
||||
label: '订单金额',
|
||||
value: '￥29.90',
|
||||
list: [{
|
||||
label: '订单号',
|
||||
// labelColor:'#FF2B2B',
|
||||
value: 'Fui00000111112',
|
||||
valueColor: '#FF2B2B'
|
||||
}, {
|
||||
label: '物流单号',
|
||||
value: '34409992021080911'
|
||||
}, {
|
||||
label: '创建时间',
|
||||
value: '2021-08-09 09:20'
|
||||
}, {
|
||||
label: '付款时间',
|
||||
value: '2021-08-09 09:30'
|
||||
}, {
|
||||
label: '订单备注',
|
||||
value: '路上请安全第一，如果超时可提前按已送达或与我联系。辛苦了！'
|
||||
}],
|
||||
buttons: [{
|
||||
text: '联系客服'
|
||||
}]
|
||||
},
|
||||
previewData2: {
|
||||
label: '个人信息',
|
||||
list: [{
|
||||
label: '姓名',
|
||||
value: '张三'
|
||||
}, {
|
||||
label: '性别',
|
||||
value: '男'
|
||||
}, {
|
||||
label: '年龄',
|
||||
value: '36'
|
||||
}, {
|
||||
label: '手机号码',
|
||||
value: '189****0020'
|
||||
}, {
|
||||
label: '家庭住址',
|
||||
value: '广东省深圳市龙华区深圳北站'
|
||||
}],
|
||||
buttons: [{
|
||||
id: 1, //自定义属性，非约定
|
||||
text: '修改',
|
||||
color: '#181818'
|
||||
}, {
|
||||
id: 2,
|
||||
text: '删除',
|
||||
color: '#FF2B2B'
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btnClick(e) {
|
||||
console.log(e)
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
37
pages/component/layout/section/section.vue
Normal file
37
pages/component/layout/section/section.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<fui-section title="Section" descr="Section 标题栏，主要用于文章、列表详情等标题展示。" :margin-top="52"></fui-section>
|
||||
<view class="fui-page__bd">
|
||||
<fui-section title="装饰线条" isLine margin-top="64"></fui-section>
|
||||
<fui-section title="线条宽度/颜色调整" line-width="8rpx" line-color="#FF2B2B" isLine margin-top="96"></fui-section>
|
||||
<fui-section title="标题/无线条/带描述" descr="我是描述文本~" margin-top="96"></fui-section>
|
||||
<fui-section :padding="['32rpx','32rpx']" background="#fff" title="设置背景" isLine
|
||||
margin-top="96"></fui-section>
|
||||
<fui-section title="插槽使用/加图标" margin-top="64">
|
||||
<template v-slot:right>
|
||||
<image class="fui-vip__icon" src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</template>
|
||||
</fui-section>
|
||||
<fui-section title="线条渐变色/调整字体大小" line-width="3px" size="48" isLine
|
||||
line-color="linear-gradient(to bottom , #FFB703, #FF416C)" margin-top="96"></fui-section>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
80
pages/component/nav/bottomNavbar/bottomNavbar.vue
Normal file
80
pages/component/nav/bottomNavbar/bottomNavbar.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">BottomNavbar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">BottomNavbar 底部导航栏，用于提供页面的导航能力。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-bottom-navbar :items="items" :isFixed="false"></fui-bottom-navbar>
|
||||
<view class="fui-section__title">改变颜色</view>
|
||||
<fui-bottom-navbar background="#222" color="#d1d1d1" lineColor="#333" :items="items" :isFixed="false">
|
||||
</fui-bottom-navbar>
|
||||
</view>
|
||||
<fui-bottom-navbar @init="init" @click="onClick" left="8" :items="options">
|
||||
</fui-bottom-navbar>
|
||||
<fui-bubble-box width="200" :size="28" direction="top" :show="show" :triangle="{left:100}" :bottom="height"
|
||||
:left="32" :items="subItems" @click="subClick" @close="onClose"></fui-bubble-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: ['历史文章', '面试总结', '欢迎投稿'],
|
||||
options: [{
|
||||
text: '最新动态',
|
||||
name: 'menu',
|
||||
size: 24
|
||||
}, {
|
||||
text: '学习平台'
|
||||
}, {
|
||||
text: '加入我们'
|
||||
}],
|
||||
subItems: [{
|
||||
text: '官方新闻'
|
||||
}, {
|
||||
text: '线下活动'
|
||||
}, {
|
||||
text: '商城优惠'
|
||||
}],
|
||||
height: 100,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
init(e) {
|
||||
this.height = Math.ceil(e.height / e.windowWidth * 750)
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
if (e.index === 0) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.fui.toast(e.text)
|
||||
}
|
||||
},
|
||||
subClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(this.subItems[e.index].text)
|
||||
this.onClose()
|
||||
},
|
||||
onClose() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
176
pages/component/nav/bottomPopup/bottomPopup.vue
Normal file
176
pages/component/nav/bottomPopup/bottomPopup.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 4 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">BottomPopup</view>
|
||||
<view class="fui-page__desc">BottomPopup 底部弹出层，从底部弹出的浮层，引导用户进行相关操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showPopup(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="案例一" bold @click="showPopup(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="内容可滚动" :margin="['24rpx']" bold
|
||||
@click="showPopup(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
|
||||
<fui-bottom-popup :show="show" @close="closePopup(1)">
|
||||
<view class="fui-custom__wrap">
|
||||
这是自定义内容区
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
|
||||
<!--案例一-->
|
||||
<fui-bottom-popup :show="show2" :maskClosable="false">
|
||||
<view class="fui-popup__container">
|
||||
<text class="fui-title">测试标题一</text>
|
||||
<text class="fui-sub__title">测试标题一的副标题</text>
|
||||
<text class="fui-descr">辅助描述内容，可根据实际需要安排</text>
|
||||
<text class="fui-sub__descr">辅助提示内容，可根据实际需要安排</text>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" width="240rpx" height="80rpx" text="辅助操作" :margin="['0','16rpx']">
|
||||
</fui-button>
|
||||
<fui-button width="240rpx" height="80rpx" text="主操作" :margin="['0','16rpx']"></fui-button>
|
||||
</view>
|
||||
|
||||
<view class="fui-icon__close" @tap="closePopup(2)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
|
||||
<fui-bottom-popup :show="show3" @close="closePopup(3)">
|
||||
<view class="fui-scroll__wrap">
|
||||
<view class="fui-title fui-title__pb">测试标题二</view>
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<fui-list-cell v-for="(item,index) in itemList" :key="index">item{{index+1}}</fui-list-cell>
|
||||
</scroll-view>
|
||||
<view class="fui-icon__close" @tap="closePopup(3)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
itemList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else if (type === 2) {
|
||||
this.show2 = true
|
||||
} else {
|
||||
this.show3 = true
|
||||
}
|
||||
},
|
||||
closePopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else if (type === 2) {
|
||||
this.show2 = false
|
||||
} else {
|
||||
this.show3 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-custom__wrap {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 案例一 start*/
|
||||
.fui-popup__container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-sub__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #7F7F7F;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
font-weight: bold;
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-sub__descr {
|
||||
font-size: 26rpx;
|
||||
color: #B2B2B2;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
height: 144rpx;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
/* 案例一 end*/
|
||||
.fui-scroll__wrap {
|
||||
padding-top: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
|
||||
.fui-title__pb {
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
</style>
|
||||
146
pages/component/nav/bubbleBox/bubbleBox.vue
Normal file
146
pages/component/nav/bubbleBox/bubbleBox.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 4072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">BubbleBox <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">BubbleBox 气泡框，弹出气泡式的卡片浮层。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-bubble-box :items="items" direction="top" position="absolute" :show="show1"
|
||||
@click="itemClick($event,1)" @close="onClose(1)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="上方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(1)"></fui-button>
|
||||
</fui-bubble-box>
|
||||
<view class="fui-bubble-box">
|
||||
<fui-bubble-box background="#4c4c4c" color='#fff' lineColor="#666" :items="items" direction="right"
|
||||
position="absolute" :triangle="{top:78}" :show="show3" @click="itemClick($event,3)"
|
||||
@close="onClose(3)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="右侧显示" bold @click="bubble(3)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
<fui-bubble-box :items="items" direction="left" position="absolute" :triangle="{top:78}" :show="show2"
|
||||
@click="itemClick($event,2)" @close="onClose(2)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="左侧显示" bold @click="bubble(2)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
</view>
|
||||
<fui-bubble-box :items="items" direction="bottom" position="absolute" :show="show4"
|
||||
@click="itemClick($event,4)" @close="onClose(4)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="下方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(4)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="左上方显示" bold @click="bubble(5)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="右上方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(6)">
|
||||
</fui-button>
|
||||
<fui-bubble-box :items="items" :show="show5" :left="8" :triangle="{left:56}" @click="itemClick($event,5)"
|
||||
@close="onClose(5)"></fui-bubble-box>
|
||||
<fui-bubble-box :padding="['26rpx','30rpx']" :right="8" background="#4c4c4c" color='#fff' lineColor="#666" :items="items" :show="show6"
|
||||
@click="itemClick($event,6)" @close="onClose(6)">
|
||||
</fui-bubble-box>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
text: 'First UI',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: '气泡框',
|
||||
src: '/static/images/common/logo.png'
|
||||
}],
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
bubble(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.show1 = true
|
||||
break;
|
||||
case 2:
|
||||
this.show2 = true
|
||||
break;
|
||||
case 3:
|
||||
this.show3 = true
|
||||
break;
|
||||
case 4:
|
||||
this.show4 = true
|
||||
break;
|
||||
case 5:
|
||||
this.show5 = true
|
||||
break;
|
||||
case 6:
|
||||
this.show6 = true
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
itemClick(e, type) {
|
||||
console.log(e)
|
||||
this.onClose(type)
|
||||
},
|
||||
onClose(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.show1 = false
|
||||
break;
|
||||
case 2:
|
||||
this.show2 = false
|
||||
break;
|
||||
case 3:
|
||||
this.show3 = false
|
||||
break;
|
||||
case 4:
|
||||
this.show4 = false
|
||||
break;
|
||||
case 5:
|
||||
this.show5 = false
|
||||
break;
|
||||
case 6:
|
||||
this.show6 = false
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-bubble-box {
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
100
pages/component/nav/drawer/drawer.vue
Normal file
100
pages/component/nav/drawer/drawer.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Drawer</view>
|
||||
<view class="fui-page__desc">Drawer 抽屉，抽屉式导航，用于展示侧滑菜单，侧滑导航。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="从右往左开" bold :margin="['24rpx']"
|
||||
@click="showDrawer(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="从左往右开" bold @click="showDrawer(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-drawer :show="show" @close="closeDrawer(1)">
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<view>
|
||||
<fui-list-cell arrow v-for="(item,index) in itemList" :key="index">
|
||||
item{{index+1}}
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</fui-drawer>
|
||||
|
||||
<fui-drawer :show="show2" direction="left" :radius="24" :maskClosable="false">
|
||||
<view class="fui-scroll__view">
|
||||
<view class="fui-title">左侧菜单栏</view>
|
||||
<scroll-view scroll-y style="height: 720rpx;">
|
||||
<view>
|
||||
<fui-list-cell v-for="(item,index) in itemList" :key="index">
|
||||
item{{index+1}}
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="warning" btn-size="medium" text="关闭菜单栏" bold @click="closeDrawer(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</fui-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show2: false,
|
||||
itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDrawer(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.show2 = true
|
||||
}
|
||||
},
|
||||
closeDrawer(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else {
|
||||
this.show2 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 520rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
padding: 64rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
131
pages/component/nav/fab/fab.vue
Normal file
131
pages/component/nav/fab/fab.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Fab <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Fab 浮动按钮，主要特点是轻盈、便捷、高效，用于在屏幕上执行主要或最常见的操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']" @click="fab(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="更换背景色" bold @click="fab(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="图标换为文本" bold :margin="['24rpx']" @click="fab(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="切换位置" bold @click="fab(4)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-fab :background="background" :position="isLeft?'left':'right'" :fabs="fabs" @click="handleClick"></fui-fab>
|
||||
|
||||
<fui-fab :zIndex="10" :position="isLeft?'right':'left'" @click="fabClick">
|
||||
<fui-icon name="edit-fill" color="#fff"></fui-icon>
|
||||
</fui-fab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLeft: true,
|
||||
items: [{
|
||||
name: 'star',
|
||||
text: '收藏'
|
||||
}, {
|
||||
name: 'share',
|
||||
text: '分享'
|
||||
}, {
|
||||
name: 'fabulous',
|
||||
text: '点赞'
|
||||
}, {
|
||||
name: 'comment',
|
||||
text: '评论'
|
||||
}],
|
||||
items2: [{
|
||||
name: 'calendar',
|
||||
text: '日程安排',
|
||||
background: '#3BBE88'
|
||||
}, {
|
||||
name: 'location',
|
||||
text: '地理位置',
|
||||
background: '#F7953B'
|
||||
}, {
|
||||
name: 'community',
|
||||
text: '社区交流',
|
||||
background: '#3493F0'
|
||||
}],
|
||||
list: [{
|
||||
abbr: 'A',
|
||||
abbrSize: 48,
|
||||
text: 'Apple'
|
||||
}, {
|
||||
abbr: 'F',
|
||||
abbrSize: 48,
|
||||
text: 'firstui@126.com'
|
||||
}, {
|
||||
abbr: 'S',
|
||||
abbrSize: 48,
|
||||
text: 'subject@126.com'
|
||||
}, {
|
||||
name: 'message-fill',
|
||||
abbrSize: 56,
|
||||
text: '提醒'
|
||||
}],
|
||||
background: '#465CFF',
|
||||
fabs: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fabs = this.items
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
fab(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.fabs = this.items
|
||||
this.background = '#465CFF';
|
||||
this.fui.toast('已恢复默认状态~')
|
||||
break;
|
||||
case 2:
|
||||
this.fabs = this.items2
|
||||
this.background = 'linear-gradient(300deg, #F53423 0%, #F67F48 100%)';
|
||||
this.fui.toast('已更换~')
|
||||
break;
|
||||
case 3:
|
||||
this.fabs = this.list
|
||||
this.background = '#465CFF';
|
||||
this.fui.toast('已切换~')
|
||||
break;
|
||||
case 4:
|
||||
this.isLeft = !this.isLeft
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您点击了【${this.fabs[e.index].text}】按钮~`)
|
||||
},
|
||||
fabClick() {
|
||||
this.fui.toast('这是一个单独的按钮~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
292
pages/component/nav/indexList-A/index.list.js
Normal file
292
pages/component/nav/indexList-A/index.list.js
Normal file
@ -0,0 +1,292 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 407254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
//约定的数据格式如下，其他属性可自行补充
|
||||
export default [{
|
||||
//索引，右侧显示，单字符，必选
|
||||
letter: '★',
|
||||
//索引描述，列表内容上方显示，若为空则显示letter，可选
|
||||
descr: '★ 星标朋友',
|
||||
//该索引下内容，可选，不传则不显示该索引
|
||||
data: [{
|
||||
//主内容。必选
|
||||
text: 'FirstUI',
|
||||
//图片。isSrc为true时生效，可选
|
||||
src: '/static/images/common/img_logo.png',
|
||||
//是否选中。isSelect为true时生效，可选
|
||||
//checked:false,
|
||||
//附属内容。可选
|
||||
// subText: ''
|
||||
}, {
|
||||
text: '爸爸',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '妈妈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'A',
|
||||
data: [{
|
||||
text: '阿杰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'A 甜心',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '阿威',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Aaron',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'B',
|
||||
data: [{
|
||||
text: '爸爸',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '毕果',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '别亦难',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '斌斌',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '冰冰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '兵兵兵',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'C',
|
||||
data: [{
|
||||
text: 'c.',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Carry',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '测试-小张',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '产品经理',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'CoCo',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'D',
|
||||
data: [{
|
||||
text: '大河马',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Daisy',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '叮叮',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'E',
|
||||
data: [{
|
||||
text: 'emmi',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'eqq',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'F',
|
||||
data: [{
|
||||
text: 'Fast',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '风居',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'FirstUI',
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'G',
|
||||
data: [{
|
||||
text: '感恩',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '干饭人',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '公寓小区',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'H',
|
||||
data: [{
|
||||
text: '哈哈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '海绵',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '厚德载物',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'I',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'J',
|
||||
data: [{
|
||||
text: 'Jennie',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '江月明',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '经理',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'K',
|
||||
data: [{
|
||||
text: '开学了',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Kevin',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '空谷幽兰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'L',
|
||||
data: [{
|
||||
text: 'L-Zz',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '老费',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '李美丽',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'M',
|
||||
data: [{
|
||||
text: '妈妈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '芒果味的橙子',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Me',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'N',
|
||||
data: [{
|
||||
text: 'NeiL',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '牛气冲天',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '诺言',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'O',
|
||||
data: [{
|
||||
text: '欧大大',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '欧-HR',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'P',
|
||||
data: [{
|
||||
text: 'Peter',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '蒲公英',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Q',
|
||||
data: [{
|
||||
text: '七语',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '全球时刻',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'R',
|
||||
data: [{
|
||||
text: '冉不三',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Rose',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'S',
|
||||
data: [{
|
||||
text: 'sandy',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '时光匆匆',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'T',
|
||||
data: [{
|
||||
text: '谭五',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '田六',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'U',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'V',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'W',
|
||||
data: [{
|
||||
text: '王不休',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'X',
|
||||
data: [{
|
||||
text: '西红柿炒鸡蛋',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Y',
|
||||
data: [{
|
||||
text: '烟花易冷',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Z',
|
||||
data: [{
|
||||
text: '中国电信',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: '#',
|
||||
data: [{
|
||||
text: '69号公寓',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '2513',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}]
|
||||
47
pages/component/nav/indexList-A/indexList-A.vue
Normal file
47
pages/component/nav/indexList-A/indexList-A.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<fui-index-list isSrc :listData="lists" @init="init" @click="itemClick">
|
||||
<fui-search-bar @search="search"></fui-search-bar>
|
||||
<template v-slot:footer>
|
||||
<fui-loadmore v-if="!show"></fui-loadmore>
|
||||
<fui-divider text="66个朋友及联系人" v-if="show"></fui-divider>
|
||||
</template>
|
||||
</fui-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lists from './index.list.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//如果是请求数据返回，返回后直接整体赋值给lists（注意数据格式正确）
|
||||
lists: lists,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
// this.show = true;
|
||||
// }, 500)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.show = true;
|
||||
},
|
||||
search(e) {
|
||||
this.fui.toast(`搜索：${e.detail.value}`)
|
||||
//相关逻辑自行处理
|
||||
// ...
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
362
pages/component/nav/indexList-B/index.list.js
Normal file
362
pages/component/nav/indexList-B/index.list.js
Normal file
@ -0,0 +1,362 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
//约定的数据格式如下，其他内容可自行补充
|
||||
export default [{
|
||||
letter: 'A',
|
||||
data: [{
|
||||
text: '阿克苏机场',
|
||||
checked: false,
|
||||
//自定义属性，非约定
|
||||
value: '1001'
|
||||
}, {
|
||||
text: '阿拉山口机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '阿勒泰机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '阿里昆莎机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '安庆天柱山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '澳门国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'B',
|
||||
data: [{
|
||||
text: '保山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '包头机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北海福成机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北京南苑机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北京首都国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'C',
|
||||
data: [{
|
||||
text: '长白山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长春龙嘉国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '常德桃花源机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昌都邦达机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长沙黄花国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长治王村机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '常州奔牛机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '成都双流国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '赤峰机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'D',
|
||||
data: [{
|
||||
text: '大理机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大连周水子国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大庆萨尔图机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大同东王庄机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'E',
|
||||
data: [{
|
||||
text: '鄂尔多斯机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '恩施许家坪机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '二连浩特赛乌苏国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'F',
|
||||
data: [{
|
||||
text: '阜阳西关机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '福州长乐国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'G',
|
||||
data: [{
|
||||
text: '赣州黄金机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '格尔木机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '固原六盘山机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'H',
|
||||
data: [{
|
||||
text: '哈尔滨太平国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '哈密机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '海口美兰国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '海拉尔东山国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '邯郸机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '合肥骆岗国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'I',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'J',
|
||||
data: [{
|
||||
text: '济南遥墙国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '济宁曲阜机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '鸡西兴凯湖机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '佳木斯东郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '嘉峪关机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'K',
|
||||
data: [{
|
||||
text: '喀什机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '克拉玛依机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '库车龟兹机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '库尔勒机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昆明巫家坝国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'L',
|
||||
data: [{
|
||||
text: '拉萨贡嘎机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '兰州中川机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '丽江三义机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '连云港白塔埠机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '洛阳北郊机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'M',
|
||||
data: [{
|
||||
text: '满洲里西郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '绵阳南郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '漠河古莲机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'N',
|
||||
data: [{
|
||||
text: '南昌昌北国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '南充高坪机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '南京禄口国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '宁波栎社国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'O',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'P',
|
||||
data: [{
|
||||
text: '普洱思茅机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Q',
|
||||
data: [{
|
||||
text: '齐齐哈尔三家子机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '秦皇岛山海关机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '青岛流亭国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'R',
|
||||
data: [{
|
||||
text: '日喀则和平机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'S',
|
||||
data: [{
|
||||
text: '三亚凤凰国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '汕头外砂机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '上海虹桥国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '深圳宝安国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'T',
|
||||
data: [{
|
||||
text: '塔城机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '太原武宿国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '天津滨海国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '通辽机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'U',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'V',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'W',
|
||||
data: [{
|
||||
text: '万州五桥机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '潍坊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '威海大水泊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '文山普者黑机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '温州永强国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '武汉天河国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '乌鲁木齐地窝堡国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'X',
|
||||
data: [{
|
||||
text: '西安咸阳国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '西双版纳嘎洒机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '厦门高崎国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '香港国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Y',
|
||||
data: [{
|
||||
text: '延安二十里堡机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '盐城机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '银川河东机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '榆林榆阳机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Z',
|
||||
data: [{
|
||||
text: '湛江机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昭通机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '郑州新郑国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '舟山朱家尖机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '珠海三灶机场',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user