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

feat: 首次提交

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

71
pages/component/expand/backtop/backtop.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>