feat: 首次提交
This commit is contained in:
peerless_hero
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>
|
||||
Reference in New Issue
Block a user