mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-06 19:44:38 +08:00
图鸟UI V1.0.0 版本提交
This commit is contained in:
JaylenTech
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
|
||||
<view class="components-action_sheet">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>操作菜单</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- actionSheet -->
|
||||
<tn-action-sheet
|
||||
v-model="show"
|
||||
:tips="tips"
|
||||
:list="list"
|
||||
:borderRadius="borderRadius"
|
||||
:cancelBtn="cancelBtn"
|
||||
:maskCloseable="maskCloseable"
|
||||
@click="clickActionSheetItem"
|
||||
@close="closedActionSheet"
|
||||
>
|
||||
</tn-action-sheet>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsActionSheet',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
tips: {
|
||||
text: '请选择正确的答案',
|
||||
fontSize: 26
|
||||
},
|
||||
list: [
|
||||
{
|
||||
text: 'A'
|
||||
},
|
||||
{
|
||||
text: 'B',
|
||||
subText: '这是正确答案'
|
||||
},
|
||||
{
|
||||
text: 'C',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: 'D'
|
||||
}
|
||||
],
|
||||
borderRadius: 0,
|
||||
cancelBtn: true,
|
||||
maskCloseable: true,
|
||||
|
||||
demoTips: ['无需依赖额外的样式文件','使用tn-action-sheet组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '显示取消按钮',
|
||||
optional: ['是','否'],
|
||||
methods: 'cancelBtnChange'
|
||||
},
|
||||
{
|
||||
title: '设置圆角',
|
||||
optional: ['0','23'],
|
||||
methods: 'borderRadiusChange'
|
||||
},
|
||||
{
|
||||
title: '点击遮罩关闭',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskCloseableChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出ActionSheet
|
||||
showActionSheet() {
|
||||
this.openActionSheet()
|
||||
},
|
||||
// 切换圆角
|
||||
borderRadiusChange(event) {
|
||||
this.borderRadius = Number(event.name)
|
||||
this.openActionSheet()
|
||||
},
|
||||
// 切换关闭按钮
|
||||
cancelBtnChange(event) {
|
||||
this.cancelBtn = event.index === 0 ? true : false
|
||||
this.openActionSheet()
|
||||
},
|
||||
// 切换点击遮罩关闭
|
||||
maskCloseableChange(event) {
|
||||
this.maskCloseable = event.index === 0 ? true : false
|
||||
this.openActionSheet()
|
||||
},
|
||||
|
||||
// 点击了选项
|
||||
clickActionSheetItem(index) {
|
||||
if (index === 1) {
|
||||
this.$t.messageUtils.toast('选择正确')
|
||||
}
|
||||
this.closedActionSheet()
|
||||
},
|
||||
|
||||
// 打开actionSheet
|
||||
openActionSheet() {
|
||||
this.show = true
|
||||
},
|
||||
// 关闭actionSheet
|
||||
closedActionSheet() {
|
||||
this.show = false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
|
||||
<view class="components-calendar">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Calendar日历</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center">
|
||||
<tn-button style="width: 100%;" width="100%" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
|
||||
<view v-if="result !== ''" class="calendar-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Calendar -->
|
||||
<tn-calendar
|
||||
v-if="show"
|
||||
v-model="show"
|
||||
:mode="mode"
|
||||
:showLunar="showLunar"
|
||||
:activeBgColor="activeBgColor"
|
||||
:activeColor="activeColor"
|
||||
:rangeBgColor="rangeBgColor"
|
||||
:rangeColor="rangeColor"
|
||||
:btnColor="btnColor"
|
||||
:lunarColor="lunarColor"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:toolTips="toolTips"
|
||||
:changeYear="changeYear"
|
||||
:changeMonth="changeMonth"
|
||||
@change="onChange"
|
||||
></tn-calendar>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsCalendar',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mode: 'date',
|
||||
showLunar: true,
|
||||
activeBgColor: '#01BEFF',
|
||||
activeColor: '#FFFFFF',
|
||||
rangeBgColor: '#E6E6E655',
|
||||
rangeColor: '#01BEFF',
|
||||
btnColor: '#01BEFF',
|
||||
lunarColor: '#AAAAAA',
|
||||
startText: '开始',
|
||||
endText: '结束',
|
||||
toolTips: '请选择日期',
|
||||
changeYear: true,
|
||||
changeMonth: true,
|
||||
result: '',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-calendar组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['单个日期','日期范围'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '农历显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showLunarChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义文案',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'textChange'
|
||||
},
|
||||
{
|
||||
title: '年月切换',
|
||||
optional: ['年月切换','月切换'],
|
||||
methods: 'yearMonthChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出日历
|
||||
showCalendar() {
|
||||
this.openCalendar()
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'date'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'range'
|
||||
}
|
||||
this.openCalendar()
|
||||
},
|
||||
// 切换农历显示
|
||||
showLunarChange(event) {
|
||||
this.showLunar = event.index === 0 ? true : false
|
||||
this.openCalendar()
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeBgColor = '#01BEFF'
|
||||
this.activeColor = '#FFFFFF'
|
||||
this.rangeBgColor = '#E6E6E655'
|
||||
this.rangeColor = '#01BEFF'
|
||||
this.btnColor = '#01BEFF'
|
||||
this.lunarColor = '#AAAAAA'
|
||||
break
|
||||
case 1:
|
||||
this.activeBgColor = '#E83A30'
|
||||
this.activeColor = '#FFFFFF'
|
||||
this.rangeBgColor = '#E6E6E680'
|
||||
this.rangeColor = '#E72F8C'
|
||||
this.btnColor = '#E83A30'
|
||||
this.lunarColor = '#080808'
|
||||
break
|
||||
}
|
||||
this.openCalendar()
|
||||
},
|
||||
// 切换文案
|
||||
textChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.startText = '开始'
|
||||
this.endText = '结束'
|
||||
this.toolTips = '请选择日期'
|
||||
break
|
||||
case 1:
|
||||
this.startText = '入住'
|
||||
this.endText = '离店'
|
||||
this.toolTips = '入住/离店日期'
|
||||
break
|
||||
}
|
||||
this.openCalendar()
|
||||
},
|
||||
// 切换年月
|
||||
yearMonthChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.changeYear = true
|
||||
this.changeMonth = true
|
||||
break
|
||||
case 1:
|
||||
this.changeYear = false
|
||||
this.changeMonth = true
|
||||
break
|
||||
}
|
||||
this.openCalendar()
|
||||
},
|
||||
|
||||
|
||||
// 打开日历
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
|
||||
// 日历日期有改变
|
||||
onChange(event) {
|
||||
if (this.mode === 'date') {
|
||||
this.result = event.date
|
||||
}
|
||||
if (this.mode === 'range') {
|
||||
this.result = `${event.startDate} 至 ${event.endDate}`
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.calendar-result {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: $tn-font-holder-color;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
|
||||
<view class="components-collapse">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-collapse v-if="!customCollapse" :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="item.disabled" :align="align">
|
||||
<view class="collapse-item-content">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
<tn-collapse v-else :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
|
||||
<tn-collapse-item title="足迹" :align="align">
|
||||
<tn-list-cell>广州</tn-list-cell>
|
||||
<tn-list-cell>深圳</tn-list-cell>
|
||||
<tn-list-cell>佛山</tn-list-cell>
|
||||
</tn-collapse-item>
|
||||
<tn-collapse-item title="时间">
|
||||
<tn-list-cell>12月</tn-list-cell>
|
||||
<tn-list-cell>11月</tn-list-cell>
|
||||
<tn-list-cell>10月</tn-list-cell>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsCollapse',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
title: '关雎',
|
||||
content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: '长歌行',
|
||||
content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: '秋风辞',
|
||||
content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
accordion: true,
|
||||
headStyle: {},
|
||||
bodyStyle: {},
|
||||
itemStyle: {},
|
||||
arrow: true,
|
||||
arrowColor: '#AAAAAA',
|
||||
hoverClass: 'tn-hover',
|
||||
align: 'left',
|
||||
|
||||
customCollapse: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-collapse、tn-collapse-item组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '手风琴模式',
|
||||
optional: ['开启','关闭'],
|
||||
methods: 'accoraionChange'
|
||||
},
|
||||
{
|
||||
title: '禁用打开',
|
||||
optional: ['无','禁止第二项打开'],
|
||||
methods: 'disabledChange'
|
||||
},
|
||||
{
|
||||
title: '点击效果',
|
||||
optional: ['默认','无'],
|
||||
methods: 'hoverClassChange'
|
||||
},
|
||||
{
|
||||
title: '箭头显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'arrowChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
},
|
||||
{
|
||||
title: '自定义Item内容',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customItemChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换手风琴模式
|
||||
accoraionChange(event) {
|
||||
this.accordion = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换Item禁止打开
|
||||
disabledChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.list[1].disabled = false
|
||||
} else {
|
||||
this.list[1].disabled = true
|
||||
}
|
||||
|
||||
},
|
||||
// 切换点击效果
|
||||
hoverClassChange(event) {
|
||||
this.hoverClass = event.index === 0 ? 'tn-hover' : ''
|
||||
},
|
||||
// 切换箭头显示
|
||||
arrowChange(event) {
|
||||
this.arrow = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.headStyle = {}
|
||||
this.bodyStyle = {}
|
||||
this.itemStyle = {}
|
||||
this.arrowColor = '#AAAAAA'
|
||||
this.align = 'left'
|
||||
break
|
||||
case 1:
|
||||
this.headStyle = {
|
||||
borderBottom: '1rpx solid #AAAAAA'
|
||||
}
|
||||
this.bodyStyle = {
|
||||
margin: '10rpx'
|
||||
}
|
||||
this.itemStyle = {
|
||||
'text-indent': '2em'
|
||||
}
|
||||
this.arrowColor = '#E6E6E6'
|
||||
this.align = 'center'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义item内容
|
||||
customItemChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.customCollapse = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
||||
break
|
||||
case 1:
|
||||
this.customCollapse = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 面板发生了改变
|
||||
change() {
|
||||
setTimeout(() => {
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 300)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collapse-item-content {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_down">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countdown倒计时</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-down
|
||||
:timestamp="timestamp"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:separator="separator"
|
||||
:separatorColor="separatorColor"
|
||||
:separatorSize="separatorSize"
|
||||
:showBorder="showBorder"
|
||||
:borderColor="borderColor"
|
||||
:showDays="showDays"
|
||||
:showHours="showHours"
|
||||
:showMinutes="showMinutes"
|
||||
:showSeconds="showSeconds"
|
||||
:hideZeroDay="hideZeroDay"
|
||||
@end="countDownEnd"
|
||||
></tn-count-down>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsCountDown',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
timestamp: 3600,
|
||||
backgroundColor: '#FFFFFF',
|
||||
fontSize: 30,
|
||||
fontColor: '#080808',
|
||||
separator: 'en',
|
||||
separatorSize: 30,
|
||||
separatorColor: '#080808',
|
||||
showBorder: true,
|
||||
borderColor: '#080808',
|
||||
showDays: true,
|
||||
showHours: true,
|
||||
showMinutes: true,
|
||||
showSeconds: true,
|
||||
hideZeroDay: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-down组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '时间',
|
||||
optional: ['360', '3600', '543000'],
|
||||
methods: 'timestampChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
optional: ['24', '30', '45'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '边框显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'borderChange'
|
||||
},
|
||||
{
|
||||
title: '分隔符',
|
||||
optional: ['冒号','中文'],
|
||||
methods: 'separatorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义格式',
|
||||
optional: ['日时分秒','时分秒'],
|
||||
methods: 'customFormatChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换时间
|
||||
timestampChange(event) {
|
||||
this.timestamp = Number(event.name)
|
||||
},
|
||||
// 切换边框显示
|
||||
borderChange(event) {
|
||||
this.showBorder = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换分隔符
|
||||
separatorChange(event) {
|
||||
this.separator = event.index === 0 ? 'en' : 'cn'
|
||||
},
|
||||
// 切换大小
|
||||
sizeChange(event) {
|
||||
this.fontSize = Number(event.name)
|
||||
this.separatorSize = Number(event.name)
|
||||
},
|
||||
// 切换自定义颜色
|
||||
customColorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#FFFFFF'
|
||||
this.separatorColor = '#080808'
|
||||
this.fontColor = '#080808'
|
||||
this.borderColor = '#080808'
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.separatorColor = '#01BEFF'
|
||||
this.fontColor = '#3D7EFF'
|
||||
this.borderColor = '#31C9E8'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义格式
|
||||
customFormatChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.showDays = true
|
||||
this.showHours = true
|
||||
this.showMinutes = true
|
||||
this.showSeconds = true
|
||||
break
|
||||
case 1:
|
||||
this.showDays = false
|
||||
this.showHours = true
|
||||
this.showMinutes = true
|
||||
this.showSeconds = true
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 倒计时结束
|
||||
countDownEnd() {
|
||||
this.$t.messageUtils.toast('倒计时结束')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_scroll">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-scroll
|
||||
:value="value"
|
||||
:height="height"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:bold="bold"
|
||||
:duration="duration"
|
||||
></tn-count-scroll>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsCountTo',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: 888.88,
|
||||
height: 32,
|
||||
fontColor: '#080808',
|
||||
fontSize: 32,
|
||||
bold: false,
|
||||
duration: 1.2,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-scroll组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '值',
|
||||
optional: ['90','1234','888.88'],
|
||||
methods: 'valueChange',
|
||||
current: 2
|
||||
},
|
||||
{
|
||||
title: '持续时间',
|
||||
optional: ['默认','0.5', '3'],
|
||||
methods: 'durationChange'
|
||||
},
|
||||
{
|
||||
title: '加粗',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'boldChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换持续时间
|
||||
durationChange(event) {
|
||||
this.duration = event.index === 0 ? 1.2 : Number(event.name)
|
||||
},
|
||||
// 切换加粗
|
||||
boldChange(event) {
|
||||
this.bold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.height = 32
|
||||
this.fontColor = '#080808'
|
||||
this.fontSize = 32
|
||||
break
|
||||
case 1:
|
||||
this.height = 80
|
||||
this.fontColor = '#E88C30'
|
||||
this.fontSize = 80
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_to">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countTo数字跳转</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-to
|
||||
:startVal="startVal"
|
||||
:endVal="endVal"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:decimals="decimals"
|
||||
:bold="bold"
|
||||
></tn-count-to>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsCountTo',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
fontColor: '#080808',
|
||||
fontSize: 50,
|
||||
startVal: 0,
|
||||
endVal: 1000,
|
||||
duration: 2000,
|
||||
decimals: 0,
|
||||
bold: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-to组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '滚动范围',
|
||||
optional: ['0-1000','100-2500'],
|
||||
methods: 'valChange'
|
||||
},
|
||||
{
|
||||
title: '小数显示位数',
|
||||
optional: ['不显示','1','2'],
|
||||
methods: 'decimalsChange'
|
||||
},
|
||||
{
|
||||
title: '加粗',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'boldChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换开始结束值
|
||||
valChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.startVal = Number(value[0])
|
||||
this.endVal = Number(value[1])
|
||||
},
|
||||
// 切换小数显示
|
||||
decimalsChange(event) {
|
||||
this.decimals = event.index === 0 ? 0 : Number(event.name)
|
||||
},
|
||||
// 切换加粗
|
||||
boldChange(event) {
|
||||
this.bold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.fontColor = '#080808'
|
||||
this.fontSize = 50
|
||||
break
|
||||
case 1:
|
||||
this.fontColor = '#A4E82F'
|
||||
this.fontSize = 100
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,523 @@
|
||||
<template>
|
||||
<view class="components-form">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Form表单</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
|
||||
<tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
|
||||
<tn-form-item label="姓名" prop="name" leftIcon="identity" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.name" type="text" placeholder="请输入姓名" :border="border"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="性别" prop="sex" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.sex" type="select" placeholder="请选择性别" :border="border" :selectOpen="actionSheetShow" @click="actionSheetShow = true"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="手机号码" prop="phone" rightIcon="phone" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.phone" type="number" placeholder="请输入手机号码" :border="border"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="介绍" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.desc" type="textarea" placeholder="请输入介绍" :border="border" inputAlign="center"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="密码" prop="password" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.password" type="password" placeholder="请输入密码" :border="border" :passwordIcon="true"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="确认密码" prop="rePassword" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.rePassword" type="password" placeholder="请再次输入密码" :border="border"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="水果" prop="fruit" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-checkbox-group v-model="model.fruit" :width="checkboxWidth" :wrap="checkboxWrap" @change="checkboxGroupChange">
|
||||
<tn-checkbox v-for="(item, index) in checkboxList" :key="index" v-model="item.check" :name="item.name" :disabled="item.disabled">{{ item.name }}</tn-checkbox>
|
||||
</tn-checkbox-group>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="支付方式" prop="payType" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-radio-group v-model="model.payType" :width="radioWidth" :wrap="radioWrap" @change="radioGroupChange">
|
||||
<tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</tn-radio>
|
||||
</tn-radio-group>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="所在地区" prop="region" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.region" type="select" placeholder="请选择所在地区" :border="border" :selectOpen="pickerShow" @click="pickerShow = true"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="商品类型" prop="goodsType" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.goodsType" type="select" placeholder="请选择商品类型" :border="border" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="验证码" prop="code" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-input v-model="model.code" type="text" placeholder="请输入验证码" :border="border"></tn-input>
|
||||
<tn-button slot="right" size="sm" backgroundColor="tn-bg-green" fontColor="tn-color-white" @click="getCode">{{ codeTips }}</tn-button>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="记住密码" prop="remember" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-switch v-model="model.remember" slot="right"></tn-switch>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="上传图片" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
|
||||
<tn-image-upload :fileList="model.photo" @on-list-change="imageUploadChange"></tn-image-upload>
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
<view class="agreement">
|
||||
<tn-checkbox v-model="model.agreement" @change="agreementCheckChange"></tn-checkbox>
|
||||
<view class="agreement-text">勾选同意当前协议</view>
|
||||
</view>
|
||||
<tn-button width="100%" @click="submit">提交</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
<!-- 性别选项 -->
|
||||
<tn-action-sheet
|
||||
v-model="actionSheetShow"
|
||||
:list="actionSheetList"
|
||||
@click="actionSheetClick"
|
||||
></tn-action-sheet>
|
||||
<!-- 地区picker -->
|
||||
<tn-picker
|
||||
v-model="pickerShow"
|
||||
mode="region"
|
||||
@confirm="regionPickerConfirm"
|
||||
></tn-picker>
|
||||
<!-- 商品类型select -->
|
||||
<tn-select
|
||||
v-model="selectShow"
|
||||
mode="single"
|
||||
:list="selectList"
|
||||
@confirm="goodsTypeSelectConfirm"
|
||||
></tn-select>
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
:seconds="60"
|
||||
@change="codeChange"
|
||||
></tn-verification-code>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsForm',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
errorType: ['message','border-bottom','toast'],
|
||||
labelPosition: 'left',
|
||||
labelAlign: 'right',
|
||||
border: false,
|
||||
actionSheetShow: false,
|
||||
labelWidth: 140,
|
||||
checkboxWidth: 'auto',
|
||||
checkboxWrap: false,
|
||||
radioWidth: 'auto',
|
||||
radioWrap: false,
|
||||
pickerShow: false,
|
||||
selectShow: false,
|
||||
codeTips: '获取验证码',
|
||||
checkboxList:[
|
||||
{
|
||||
name: '苹果',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '橘子',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '榴莲',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
radioList:[
|
||||
{
|
||||
name: '微信',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '支付宝',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: '云闪付',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
actionSheetList:[
|
||||
{
|
||||
text: '男'
|
||||
},
|
||||
{
|
||||
text: '女'
|
||||
},
|
||||
{
|
||||
text: '保密'
|
||||
}
|
||||
],
|
||||
selectList: [
|
||||
{
|
||||
label: '手机',
|
||||
value: 1101
|
||||
},
|
||||
{
|
||||
label: '笔记本',
|
||||
value: 1102
|
||||
},
|
||||
{
|
||||
label: '手表',
|
||||
value: 1103
|
||||
}
|
||||
],
|
||||
model: {
|
||||
name: '',
|
||||
sex: '',
|
||||
phone: '',
|
||||
desc: '',
|
||||
password: '',
|
||||
rePassword: '',
|
||||
fruit: ['橘子'],
|
||||
payType: '微信',
|
||||
region: '',
|
||||
goodsType: '',
|
||||
code: '',
|
||||
remember: false,
|
||||
photo: [],
|
||||
agreement: false
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '姓名长度在3到5个字符',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
return this.$t.test.chinese(value);
|
||||
},
|
||||
message: '姓名必须为中文',
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
{
|
||||
// 异步验证需要通过调用callback()，并且在里面抛出new Error()
|
||||
// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
|
||||
asyncValidator: (rule, value, callback) => {
|
||||
if (value === '图鸟') {
|
||||
callback(new Error('姓名重复'));
|
||||
} else {
|
||||
// 没有错误，也要执行callback()回调
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
}
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号码',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
desc: [
|
||||
{
|
||||
min: 5,
|
||||
message: '简介不能少于5个字',
|
||||
trigger: 'change'
|
||||
},
|
||||
{
|
||||
// 正则表达式验证演示
|
||||
pattern: /^[\u4e00-\u9fa5]+$/gi,
|
||||
message: '简介只能包含中文',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['change','blur']
|
||||
},
|
||||
{
|
||||
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
|
||||
message: '需同时含有字母和数字，长度在6-12之间',
|
||||
trigger: ['change','blur']
|
||||
}
|
||||
],
|
||||
rePassword: [
|
||||
{
|
||||
required: true,
|
||||
message: '请再次输入密码',
|
||||
trigger: ['change','blur']
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
return value === this.model.password;
|
||||
},
|
||||
message: '两次输入的密码不相等',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
fruit: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择水果',
|
||||
trigger: 'change',
|
||||
type: 'array'
|
||||
}
|
||||
],
|
||||
payType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择支付方式',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '所在地区不能为空',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
goodsType: [
|
||||
{
|
||||
required: true,
|
||||
message: '商品类型不能为空',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '验证码不能为空',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
remember: [
|
||||
{
|
||||
required: true,
|
||||
message: '记住密码不能为空',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
photo: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择图片',
|
||||
trigger: 'change',
|
||||
type: 'array'
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: 'label显示位置',
|
||||
optional: ['左边','上边'],
|
||||
methods: 'labelPositionChange'
|
||||
},
|
||||
{
|
||||
title: 'label对齐方式',
|
||||
optional: ['左对齐','右对齐','居中'],
|
||||
methods: 'labelAlignChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '边框显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'borderChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '可选项排列方式',
|
||||
optional: ['默认','宽度的50%','换行'],
|
||||
methods: 'checkRadioStyleChange'
|
||||
},
|
||||
{
|
||||
title: '错误提示方式',
|
||||
optional: ['message','toast','下划线','输入框'],
|
||||
methods: 'errorTypeChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换label显示位置
|
||||
labelPositionChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.labelPosition = 'left'
|
||||
break
|
||||
case 1:
|
||||
this.labelPosition = 'top'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换label对其方式
|
||||
labelAlignChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.labelAlign = 'left'
|
||||
break
|
||||
case 1:
|
||||
this.labelAlign = 'right'
|
||||
break
|
||||
case 2:
|
||||
this.labelAlign = 'center'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换边框显示
|
||||
borderChange(event) {
|
||||
this.border = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换可选项样式
|
||||
checkRadioStyleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.checkboxWidth = 'auto'
|
||||
this.checkboxWrap = false
|
||||
this.radioWidth = 'auto'
|
||||
this.radioWrap = false
|
||||
break
|
||||
case 1:
|
||||
this.checkboxWidth = '50%'
|
||||
this.checkboxWrap = false
|
||||
this.radioWidth = '50%'
|
||||
this.radioWrap = false
|
||||
break
|
||||
case 2:
|
||||
this.checkboxWidth = 'auto'
|
||||
this.checkboxWrap = true
|
||||
this.radioWidth = 'auto'
|
||||
this.radioWrap = true
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换错误提示方式
|
||||
errorTypeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.errorType = ['message']
|
||||
break
|
||||
case 1:
|
||||
this.errorType = ['toast']
|
||||
break
|
||||
case 2:
|
||||
this.errorType = ['border-bottom']
|
||||
break
|
||||
case 3:
|
||||
this.errorType = ['border']
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 表单提交
|
||||
submit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
// 验证通过
|
||||
if (!this.model.agreement) {
|
||||
this.$t.messageUtils.toast('请勾选协议')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// 验证失败
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击actionSheet选择性别
|
||||
actionSheetClick(index) {
|
||||
uni.hideKeyboard()
|
||||
this.model.sex = this.actionSheetList[index].text
|
||||
},
|
||||
// 点击地区选择器
|
||||
regionPickerConfirm(event) {
|
||||
this.model.region = event.province.label + '-' + event.city.label + '-' + event.area.label
|
||||
},
|
||||
// 点击商品类型列选择器
|
||||
goodsTypeSelectConfirm(event) {
|
||||
this.model.goodsType = `${event[0]['label']}`
|
||||
},
|
||||
// 多选项值改变事件
|
||||
checkboxGroupChange(event) {
|
||||
this.model.fruit = event
|
||||
},
|
||||
// 单选项值改变事件
|
||||
radioGroupChange(event) {
|
||||
this.model.payType = event
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
// 验证码倒计时时间改变
|
||||
codeChange(text) {
|
||||
this.codeTips = text
|
||||
},
|
||||
// 图片有修改
|
||||
imageUploadChange(lists) {
|
||||
this.model.photo = lists
|
||||
},
|
||||
// 同意协议状态修改
|
||||
agreementCheckChange(event) {
|
||||
this.model.agreement = event.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 40rpx 0;
|
||||
|
||||
&-text {
|
||||
padding-left: 8rpx;
|
||||
color: $tn-font-sub-color;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
|
||||
<view class="components-image_upload">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图片上传</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
|
||||
<tn-image-upload
|
||||
ref="imageUpload"
|
||||
:action="action"
|
||||
:formData="formData"
|
||||
:fileList="fileList"
|
||||
:disabled="disabled"
|
||||
:autoUpload="autoUpload"
|
||||
:maxCount="maxCount"
|
||||
:showUploadList="showUploadList"
|
||||
:showProgress="showProgress"
|
||||
:deleteable="deleteable"
|
||||
:customBtn="customBtn"
|
||||
:beforeUpload="beforeUpload"
|
||||
@on-list-change="listChange"
|
||||
@on-oversize="oversize"
|
||||
@on-exceed="exceed"
|
||||
@on-choose-complete="chooseComplete"
|
||||
@on-choose-fail="chooseFail"
|
||||
@on-uploaded="uploaded"
|
||||
@on-success="uploadSuccess"
|
||||
@on-change="uploadChange"
|
||||
@on-progress="uploadProgress"
|
||||
@on-error="uploadError"
|
||||
@on-remove="fileRemove"
|
||||
>
|
||||
<view v-if="!showUploadList" slot="file" style="width: 100%;">
|
||||
<view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item">
|
||||
<image
|
||||
class="tn-image-upload__item__image"
|
||||
:src="item.url || item.path"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <template v-if="!showUploadList" v-slot:file="data">
|
||||
<view v-for="(item,index) in data.file" :key="index" class="tn-image-upload__item">
|
||||
<image
|
||||
class="tn-image-upload__item__image"
|
||||
:src="item.url || item.path"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</template> -->
|
||||
<view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn" hover-class="tn-hover-class" hover-stay-time="150">
|
||||
<view>选择图片</view>
|
||||
</view>
|
||||
</tn-image-upload>
|
||||
<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
|
||||
<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
||||
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
|
||||
export default {
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
action: 'https://www.hualigs.cn/api/upload',
|
||||
// action: '',
|
||||
formData: {
|
||||
apiType: 'this,ali',
|
||||
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
|
||||
image: null
|
||||
},
|
||||
// 预上传列表
|
||||
// [{
|
||||
// url: 'http://127.0.0.1:8888/upload/tuniao.jpg'
|
||||
// }]
|
||||
fileList: [],
|
||||
showUploadList: true,
|
||||
customBtn: false,
|
||||
autoUpload: true,
|
||||
showProgress: true,
|
||||
deleteable: true,
|
||||
customStyle: false,
|
||||
maxCount: 9,
|
||||
disabled: false,
|
||||
|
||||
lists: [],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-image-upload组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '上传方式',
|
||||
optional: ['自动上传','手动上传'],
|
||||
methods: 'autoUploadChange'
|
||||
},
|
||||
{
|
||||
title: '进度显示',
|
||||
optional: ['是','否'],
|
||||
methods: 'showProgressChange'
|
||||
},
|
||||
{
|
||||
title: '删除按钮显示',
|
||||
optional: ['是','否'],
|
||||
methods: 'deleteableChange'
|
||||
},
|
||||
{
|
||||
title: '最大上传数',
|
||||
optional: ['2','6','9'],
|
||||
methods: 'maxCountChange',
|
||||
current: 2
|
||||
},
|
||||
{
|
||||
title: '自定义列表和上传按钮样式',
|
||||
optional: ['是','否'],
|
||||
methods: 'customUploadListChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '是否禁用',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
fullWindowsScroll: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换上传方式
|
||||
autoUploadChange(event) {
|
||||
this.autoUpload = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换进度显示
|
||||
showProgressChange(event) {
|
||||
this.showProgress = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换删除按钮显示
|
||||
deleteableChange(event) {
|
||||
this.deleteable = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换允许上传数
|
||||
maxCountChange(event) {
|
||||
this.maxCount = Number(event.name)
|
||||
},
|
||||
// 切换自定义列表样式
|
||||
customUploadListChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.customStyle = true
|
||||
this.showUploadList = false
|
||||
this.customBtn = true
|
||||
} else if (event.index === 1) {
|
||||
this.customStyle = false
|
||||
this.showUploadList = true
|
||||
this.customBtn = false
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换禁用
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
|
||||
// 手动上传文件
|
||||
upload() {
|
||||
this.$refs.imageUpload.upload()
|
||||
},
|
||||
// 手动清空列表
|
||||
clear() {
|
||||
this.$refs.imageUpload.clear()
|
||||
},
|
||||
|
||||
// 文件上传前执行
|
||||
beforeUpload(index, lists) {
|
||||
console.log('文件上传前执行', lists, index);
|
||||
console.log(this.formData);
|
||||
this.formData.image = lists[index].file
|
||||
return true
|
||||
},
|
||||
|
||||
|
||||
listChange(lists, index) {
|
||||
console.log('上传文件列表发生改变', lists, index);
|
||||
this.lists.splice(0, this.lists.length)
|
||||
this.$nextTick(() => {
|
||||
this.lists = this.$t.deepClone(lists)
|
||||
if (this.customStyle && lists.length > 4) {
|
||||
this.fullWindowsScroll = true
|
||||
} else {
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}
|
||||
})
|
||||
},
|
||||
oversize(val, lists, index) {
|
||||
console.log('上传的文件超过大小', val, lists, index);
|
||||
},
|
||||
exceed(val, lists, index) {
|
||||
console.log('上传的文件超过允许数量', val, lists, index);
|
||||
},
|
||||
chooseComplete(lists, index) {
|
||||
console.log('文件选择成功', lists, index);
|
||||
},
|
||||
chooseFail(err) {
|
||||
console.log('文件选择失败', err);
|
||||
},
|
||||
uploaded(lists, index) {
|
||||
console.log('全部上传文件处理完成', lists, index);
|
||||
},
|
||||
uploadSuccess(data, currentIndex, lists, index) {
|
||||
console.log('文件上传成功', data, currentIndex, lists, index);
|
||||
},
|
||||
uploadChange(res, currentIndex, lists, index) {
|
||||
console.log('文件上传信息有变', res, currentIndex, lists, index);
|
||||
},
|
||||
uploadProgress(res, currentIndex, lists, index) {
|
||||
console.log('文件上传进度', res, currentIndex, lists, index);
|
||||
},
|
||||
uploadError(err, currentIndex, lists, index) {
|
||||
console.log('文件上传失败', err, currentIndex, lists, index);
|
||||
},
|
||||
fileRemove(currentIndex, lists, index) {
|
||||
console.log('文件移除成功', currentIndex, lists, index);
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-image-upload__item {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tn-image-upload__custom-btn {
|
||||
background-color: $tn-font-holder-color;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
|
||||
<view class="components-index-list">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<tn-index-anchor :index="item.letter"></tn-index-anchor>
|
||||
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
|
||||
{{ data_item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</tn-index-list>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexList from '../mock/index.list.js'
|
||||
const letterArr = indexList.list.map(val => {
|
||||
return val.letter
|
||||
})
|
||||
export default {
|
||||
name: 'componentsIndexList',
|
||||
data() {
|
||||
return {
|
||||
// 滚动的距离
|
||||
scrollTop: 0,
|
||||
scrollTopArr: [0, 0],
|
||||
selectIndexScrollTop: [0 ,0],
|
||||
// 索引列表
|
||||
indexList: letterArr,
|
||||
list: indexList.list
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
onScroll(e, index) {
|
||||
// this.scrollTop = e.detail.scrollTop
|
||||
this.$set(this.scrollTopArr, index - 1, e.detail.scrollTop)
|
||||
},
|
||||
|
||||
// 侧边栏索引选中事件
|
||||
indexListSelect(e, index) {
|
||||
this.$set(this.selectIndexScrollTop, index - 1, e.scrollTop)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-list-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.index-list-image-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
|
||||
&__image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 8rpx 8rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
|
||||
<view class="components-keyboard">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>keyboard键盘</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<view v-if="mode === 'number' || mode === 'card'" class="number-value">
|
||||
<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容" @click="showKeyboard"></tn-input>
|
||||
<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx" height="70rpx" @click="clearInputValue">清空</tn-button>
|
||||
</view>
|
||||
<view v-else class="car-value">
|
||||
<block v-for="(item, index) in 8" :key="index">
|
||||
<view
|
||||
class="car-input"
|
||||
:class="{'new-energy': index === 7 && !licensePlateValue[index]}"
|
||||
@tap="chooseLicensePlateNumber(index)"
|
||||
>
|
||||
<block v-if="index === 7 && !licensePlateValue[index]">
|
||||
<view class="new-energy-car">
|
||||
<view class="icon tn-icon-add"></view>
|
||||
<view class="text">新能源</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
{{ licensePlateValue[index] || '' }}
|
||||
</block>
|
||||
</view>
|
||||
<view class="car-point" v-if="index === 1">
|
||||
<view class="point"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 键盘 -->
|
||||
<tn-keyboard
|
||||
v-model="value"
|
||||
:mode="mode"
|
||||
:dotEnabled="dotEnabled"
|
||||
:randomEnabled="randomEnabled"
|
||||
:switchEnMode="switchEnMode"
|
||||
:tooltip="tooltip"
|
||||
:mask="mask"
|
||||
@change="onChange"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
@backspace="onBackspace"
|
||||
></tn-keyboard>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsKeyboard',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
mode: 'number',
|
||||
dotEnabled: true,
|
||||
randomEnabled: false,
|
||||
switchEnMode: false,
|
||||
tooltip: true,
|
||||
mask: true,
|
||||
|
||||
// 输入的值
|
||||
inputValue: '',
|
||||
// 输入的车牌
|
||||
licensePlateValue: ['','','','','','','',''],
|
||||
// 当前选择输入的车牌号码位置
|
||||
currentLicensePlateIndex: 0,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-keyboard组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['数字','身份证','车牌'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '显示点',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'dotEnabledChange'
|
||||
},
|
||||
{
|
||||
title: '打乱顺序',
|
||||
optional: ['是','否'],
|
||||
methods: 'randomEnabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '显示顶部工具栏',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'tooltipChange'
|
||||
},
|
||||
{
|
||||
title: '遮罩显示',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mode(value) {
|
||||
switch (value) {
|
||||
case 'number':
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0)
|
||||
break
|
||||
case 'card':
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1)
|
||||
break
|
||||
case 'car':
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2)
|
||||
break
|
||||
}
|
||||
},
|
||||
currentLicensePlateIndex(value) {
|
||||
if (value === 0) {
|
||||
this.switchEnMode = false
|
||||
} else {
|
||||
this.switchEnMode = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出键盘
|
||||
showKeyboard() {
|
||||
this.value = true
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'number'
|
||||
this.dotEnabled = true
|
||||
this.value = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'card'
|
||||
this.value = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'car'
|
||||
this.licensePlateValue = ['','','','','','','','']
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换点显示
|
||||
dotEnabledChange(event) {
|
||||
this.dotEnabled = event.index === 0 ? true : false
|
||||
this.value = true
|
||||
},
|
||||
// 切换乱序显示
|
||||
randomEnabledChange(event) {
|
||||
this.randomEnabled = event.index === 0 ? true : false
|
||||
this.value = true
|
||||
},
|
||||
// 切换顶部工具栏显示
|
||||
tooltipChange(event) {
|
||||
this.tooltip = event.index === 0 ? true : false
|
||||
this.value = true
|
||||
},
|
||||
// 切换遮罩状态
|
||||
maskChange(event) {
|
||||
this.mask = event.index === 0 ? true : false
|
||||
this.value = true
|
||||
},
|
||||
|
||||
// 键盘输入值改变
|
||||
onChange(e) {
|
||||
if (this.mode === 'number' || this.mode === 'card') {
|
||||
this.inputValue += e
|
||||
} else if (this.mode === 'car') {
|
||||
// 判断输入的值是否正确
|
||||
if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
|
||||
this.$t.messageUtils.toast('车牌归属地选择错误')
|
||||
return
|
||||
} else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
|
||||
this.$t.messageUtils.toast('车牌归属地字母选择错误')
|
||||
return
|
||||
}
|
||||
if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
|
||||
this.$t.messageUtils.toast('车牌号码选择错误')
|
||||
return
|
||||
}
|
||||
// this.licensePlateValue[this.currentLicensePlateIndex] = e
|
||||
this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e)
|
||||
this.currentLicensePlateIndex++
|
||||
// 判断车牌是否已经选择完成
|
||||
if (this.currentLicensePlateIndex === 8) {
|
||||
this.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击了取消按钮
|
||||
onCancel() {
|
||||
this.$t.messageUtils.toast('点击了取消按钮')
|
||||
},
|
||||
// 点击了确认按钮
|
||||
onConfirm() {
|
||||
this.$t.messageUtils.toast('点击了确认按钮')
|
||||
this.value = false
|
||||
},
|
||||
// 点击了退格按钮
|
||||
onBackspace() {
|
||||
if (this.mode === 'number' || this.mode === 'card') {
|
||||
if (!this.inputValue) {
|
||||
return
|
||||
}
|
||||
this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
|
||||
} else if (this.mode === 'car') {
|
||||
let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex
|
||||
if (this.licensePlateValue[licensePlateIndex] !== '') {
|
||||
this.$set(this.licensePlateValue, licensePlateIndex, '')
|
||||
} else {
|
||||
licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex
|
||||
this.$set(this.licensePlateValue, licensePlateIndex, '')
|
||||
}
|
||||
this.currentLicensePlateIndex = licensePlateIndex
|
||||
}
|
||||
},
|
||||
|
||||
// 点击车牌对于位置进行选择输入
|
||||
chooseLicensePlateNumber(index) {
|
||||
this.currentLicensePlateIndex = index
|
||||
this.mode = 'car'
|
||||
this.value = true
|
||||
},
|
||||
|
||||
// 清空内容
|
||||
clearInputValue() {
|
||||
this.inputValue = ''
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.number-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.clear-btn {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.car-value {
|
||||
display: flex;
|
||||
|
||||
.car-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 74rpx;
|
||||
width: 64rpx;
|
||||
border: 1px solid $tn-border-solid-color;
|
||||
border-radius: 18rpx;
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
margin-left: 10rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&.new-energy {
|
||||
background: transparent;
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
.car-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 74rpx;
|
||||
width: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.point {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background-color: $tn-font-holder-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.new-energy-car {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16rpx;
|
||||
color: $tn-font-sub-color;
|
||||
|
||||
.icon {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
|
||||
<view class="components-list">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>列表</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-list-view
|
||||
:backgroundColor="viewBackgroundColor"
|
||||
:fontColor="viewFontColor"
|
||||
:fontSize="viewFontSize"
|
||||
:title="viewTitle"
|
||||
:unlined="viewUnlined"
|
||||
:card="viewCard"
|
||||
:marginTop="viewMarginTop"
|
||||
>
|
||||
<block v-if="viewCustomTitle">
|
||||
<view slot="title" class="list-title-container">
|
||||
<tn-button class="list-title-button">设置</tn-button>
|
||||
</view>
|
||||
</block>
|
||||
<block v-for="(item, index) in 3" :key="index">
|
||||
<tn-list-cell
|
||||
:backgroundColor="cellBackgroundColor"
|
||||
:fontColor="cellFontColor"
|
||||
:fontSize="cellFontSize"
|
||||
:arrow="cellArrow"
|
||||
:arrowRight="cellArrowRight"
|
||||
:hover="cellHover"
|
||||
:radius="cellRadius"
|
||||
:unlined="cellUnlined"
|
||||
:lineLeft="cellLineLeft"
|
||||
:lineRight="cellLineRight"
|
||||
>选项 {{ index }}</tn-list-cell>
|
||||
</block>
|
||||
</tn-list-view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsList',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
viewBackgroundColor: '',
|
||||
viewFontColor: '',
|
||||
viewFontSize: 0,
|
||||
viewTitle: '',
|
||||
viewCustomTitle: false,
|
||||
viewCard: false,
|
||||
viewMarginTop: '',
|
||||
viewUnlined: 'all',
|
||||
|
||||
cellBackgroundColor: '',
|
||||
cellFontColor: '',
|
||||
cellFontSize: 0,
|
||||
cellArrow: true,
|
||||
cellArrowRight: true,
|
||||
cellRadius: false,
|
||||
cellUnlined: false,
|
||||
cellLineLeft: true,
|
||||
cellLineRight: true,
|
||||
cellHover: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-list-view、tn-list-cell组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '容器参数',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'viewColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'viewSizeChange'
|
||||
},
|
||||
{
|
||||
title: '标题类型',
|
||||
optional: ['空白','文字标题','自定义标题'],
|
||||
methods: 'viewTitleChange'
|
||||
},
|
||||
{
|
||||
title: '容器类型',
|
||||
optional: ['默认','卡片'],
|
||||
methods: 'viewContainerChange'
|
||||
},
|
||||
{
|
||||
title: '边框类型',
|
||||
optional: ['全部显示','上边框','下边框','不显示'],
|
||||
methods: 'viewBoardChange',
|
||||
current: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '列表参数',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'cellColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'cellSizeChange'
|
||||
},
|
||||
{
|
||||
title: '显示类型',
|
||||
optional: ['默认','圆角'],
|
||||
methods: 'cellRadiusChange'
|
||||
},
|
||||
{
|
||||
title: '箭头',
|
||||
optional: ['隐藏','显示'],
|
||||
methods: 'cellArrowChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '箭头边距',
|
||||
optional: ['默认','无边距'],
|
||||
methods: 'cellArrowRightChange'
|
||||
},
|
||||
{
|
||||
title: '显示底边',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'cellUnlinedChange',
|
||||
},
|
||||
{
|
||||
title: '底边边距',
|
||||
optional: ['默认','无边距'],
|
||||
methods: 'cellLineChange',
|
||||
},
|
||||
{
|
||||
title: '点击效果',
|
||||
optional: ['无','有'],
|
||||
methods: 'cellHoverChange',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换容器颜色
|
||||
viewColorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.viewBackgroundColor = ''
|
||||
this.viewFontColor = ''
|
||||
} else {
|
||||
this.viewBackgroundColor = '#F8F7F8'
|
||||
this.viewFontColor = 'tn-color-grey'
|
||||
}
|
||||
},
|
||||
// 切换容器大小
|
||||
viewSizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.viewFontSize = 0
|
||||
this.viewMarginTop = ''
|
||||
} else {
|
||||
this.viewFontSize = 32
|
||||
this.viewMarginTop = '48rpx'
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器标题
|
||||
viewTitleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.viewTitle = ''
|
||||
this.viewCustomTitle = false
|
||||
break
|
||||
case 1:
|
||||
this.viewTitle = '请选择对应的选项'
|
||||
this.viewCustomTitle = false
|
||||
break
|
||||
case 2:
|
||||
this.viewTitle = ''
|
||||
this.viewCustomTitle = true
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器类型
|
||||
viewContainerChange(event) {
|
||||
this.viewCard = event.index === 0 ? false : true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器边框类型
|
||||
viewBoardChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.viewUnlined = ''
|
||||
break
|
||||
case 1:
|
||||
this.viewUnlined = 'bottom'
|
||||
break
|
||||
case 2:
|
||||
this.viewUnlined = 'top'
|
||||
break
|
||||
case 3:
|
||||
this.viewUnlined = 'all'
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 切换列表颜色
|
||||
cellColorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellBackgroundColor = ''
|
||||
this.cellFontColor = ''
|
||||
} else {
|
||||
this.cellBackgroundColor = '#D6F4FA'
|
||||
this.cellFontColor = 'tn-color-grey'
|
||||
}
|
||||
},
|
||||
// 切换列表大小
|
||||
cellSizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellFontSize = 0
|
||||
} else {
|
||||
this.cellFontSize = 36
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换列表圆角
|
||||
cellRadiusChange(event) {
|
||||
this.cellRadius = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换列表箭头显示
|
||||
cellArrowChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellArrow = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(4, false)
|
||||
} else {
|
||||
this.cellArrow = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(4, true)
|
||||
}
|
||||
},
|
||||
// 切换列表箭头贴边
|
||||
cellArrowRightChange(event) {
|
||||
this.cellArrowRight = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换列表底边显示
|
||||
cellUnlinedChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellUnlined = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(6, true)
|
||||
} else {
|
||||
this.cellUnlined = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(6, false)
|
||||
}
|
||||
},
|
||||
// 切换列表底边的边距
|
||||
cellLineChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellLineLeft = true
|
||||
this.cellLineRight = true
|
||||
} else if (event.index === 1) {
|
||||
this.cellLineLeft = false
|
||||
this.cellLineRight = false
|
||||
}
|
||||
},
|
||||
// 切换列表点击效果
|
||||
cellHoverChange(event) {
|
||||
this.cellHover = event.index === 0 ? false : true
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.list-title-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10rpx;
|
||||
|
||||
.list-title-button {
|
||||
width: 160rpx !important;
|
||||
height: 46rpx !important;
|
||||
color: #FFFFFF;
|
||||
margin: 10rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
<view class="components-loading">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Loading加载动画</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-loading
|
||||
:show="show"
|
||||
:mode="mode"
|
||||
:color="color"
|
||||
:size="size"
|
||||
></tn-loading>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsLoading',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
mode: 'circle',
|
||||
color: '',
|
||||
size: 34,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-loading组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showChange'
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['圆圈','花朵'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','#31E749','#31C9E8'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['28','34','54'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换是否显示
|
||||
showChange(event) {
|
||||
this.show = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'circle'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, true)
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'flower'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, false)
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
this.color = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,585 @@
|
||||
module.exports = {
|
||||
list: [{
|
||||
"letter": "A",
|
||||
"data": [{
|
||||
"name": "阿拉斯加",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿拉斯加ABA13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阿克苏",
|
||||
"mobile": "0551-4386721",
|
||||
"keyword": "阿克苏AKESU0551-4386721"
|
||||
},
|
||||
{
|
||||
"name": "阿拉善",
|
||||
"mobile": "4008009100",
|
||||
"keyword": "阿拉善ALASHAN4008009100"
|
||||
},
|
||||
{
|
||||
"name": "阿勒泰",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿勒泰ALETAI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阿里",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阿里ALI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "安阳",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "13588889999安阳ANYANG"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "B",
|
||||
"data": [{
|
||||
"name": "白城",
|
||||
"mobile": "该主子没有留电话~",
|
||||
"keyword": "白城BAICHENG"
|
||||
},
|
||||
{
|
||||
"name": "白山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "白山BAISHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "白银",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "白银BAIYIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "保定",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "保定BAODING13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "C",
|
||||
"data": [{
|
||||
"name": "沧州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "沧州CANGZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "长春",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "长春CHANGCHUN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "D",
|
||||
"data": [{
|
||||
"name": "大理",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "大理DALI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "大连",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "大连DALIAN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "E",
|
||||
"data": [{
|
||||
"name": "鄂尔多斯",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "鄂尔多斯EERDUOSI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "恩施",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "恩施ENSHI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "鄂州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "鄂州EZHOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "F",
|
||||
"data": [{
|
||||
"name": "防城港",
|
||||
"mobile": "该主子没有留电话~",
|
||||
"keyword": "防城港FANGCHENGGANG"
|
||||
},
|
||||
{
|
||||
"name": "抚顺",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "抚顺FUSHUN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阜新",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阜新FUXIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "阜阳",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "阜阳FUYANG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "抚州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "抚州FUZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "福州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "福州FUZHOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "G",
|
||||
"data": [{
|
||||
"name": "甘南",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "甘南GANNAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "赣州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "赣州GANZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "甘孜",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "甘孜GANZI13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "H",
|
||||
"data": [{
|
||||
"name": "哈尔滨",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "哈尔滨HAERBIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海北",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海北HAIBEI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海东",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海东HAIDONG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "海口",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "海口HAIKOU13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "I",
|
||||
"data": [{
|
||||
"name": "ice",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "佳木斯JIAMUSI13588889999"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"letter": "J",
|
||||
"data": [{
|
||||
"name": "佳木斯",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "佳木斯JIAMUSI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "吉安",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "吉安JIAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "江门",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "江门JIANGMEN13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "K",
|
||||
"data": [{
|
||||
"name": "开封",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "开封KAIFENG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "喀什",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "喀什KASHI13588889999"
|
||||
},
|
||||
{
|
||||
"name": "克拉玛依",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "克拉玛依KELAMAYI13588889999"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "L",
|
||||
"data": [{
|
||||
"name": "来宾",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "来宾LAIBIN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "兰州",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "兰州LANZHOU13588889999"
|
||||
},
|
||||
{
|
||||
"name": "拉萨",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "拉萨LASA13588889999"
|
||||
},
|
||||
{
|
||||
"name": "乐山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "乐山LESHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "凉山",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "凉山LIANGSHAN13588889999"
|
||||
},
|
||||
{
|
||||
"name": "连云港",
|
||||
"mobile": "13588889999",
|
||||
"keyword": "连云港LIANYUNGANG13588889999"
|
||||
},
|
||||
{
|
||||
"name": "聊城",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "聊城LIAOCHENG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "辽阳",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "辽阳LIAOYANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "辽源",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "辽源LIAOYUAN18322223333"
|
||||
},
|
||||
{
|
||||
"name": "丽江",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "丽江LIJIANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临沧",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临沧LINCANG18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临汾",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临汾LINFEN18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临夏",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临夏LINXIA18322223333"
|
||||
},
|
||||
{
|
||||
"name": "临沂",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "临沂LINYI18322223333"
|
||||
},
|
||||
{
|
||||
"name": "林芝",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "林芝LINZHI18322223333"
|
||||
},
|
||||
{
|
||||
"name": "丽水",
|
||||
"mobile": "18322223333",
|
||||
"keyword": "丽水LISHUI18322223333"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "M",
|
||||
"data": [{
|
||||
"name": "眉山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "眉山MEISHAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "梅州",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "梅州MEIZHOU15544448888"
|
||||
},
|
||||
{
|
||||
"name": "绵阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "绵阳MIANYANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "牡丹江",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "牡丹江MUDANJIANG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "N",
|
||||
"data": [{
|
||||
"name": "南昌",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南昌NANCHANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南充",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南充NANCHONG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南京",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南京NANJING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南宁",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南宁NANNING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "南平",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "南平NANPING15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "O",
|
||||
"data": [{
|
||||
"name": "欧阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "欧阳ouyang15544448888"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"letter": "P",
|
||||
"data": [{
|
||||
"name": "盘锦",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "盘锦PANJIN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "攀枝花",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "攀枝花PANZHIHUA15544448888"
|
||||
},
|
||||
{
|
||||
"name": "平顶山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "平顶山PINGDINGSHAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "平凉",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "平凉PINGLIANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "萍乡",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "萍乡PINGXIANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "普洱",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "普洱PUER15544448888"
|
||||
},
|
||||
{
|
||||
"name": "莆田",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "莆田PUTIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "濮阳",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "濮阳PUYANG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Q",
|
||||
"data": [{
|
||||
"name": "黔东南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔东南QIANDONGNAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "黔南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔南QIANNAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "黔西南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "黔西南QIANXINAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "R",
|
||||
"data": [{
|
||||
"name": "日喀则",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "日喀则RIKAZE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "日照",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "日照RIZHAO15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "S",
|
||||
"data": [{
|
||||
"name": "三门峡",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三门峡SANMENXIA15544448888"
|
||||
},
|
||||
{
|
||||
"name": "三明",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三明SANMING15544448888"
|
||||
},
|
||||
{
|
||||
"name": "三沙",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "三沙SANSHA15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "T",
|
||||
"data": [{
|
||||
"name": "塔城",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "塔城TACHENG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "漯河",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "漯河TAHE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "泰安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "泰安TAIAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "W",
|
||||
"data": [{
|
||||
"name": "潍坊",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "潍坊WEIFANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "威海",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "威海WEIHAI15544448888"
|
||||
},
|
||||
{
|
||||
"name": "渭南",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "渭南WEINAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "文山",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "文山WENSHAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "X",
|
||||
"data": [{
|
||||
"name": "厦门",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "厦门XIAMEN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "西安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "西安XIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "湘潭",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "湘潭XIANGTAN15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Y",
|
||||
"data": [{
|
||||
"name": "雅安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "雅安YAAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "延安",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "延安YANAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "延边",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "延边YANBIAN15544448888"
|
||||
},
|
||||
{
|
||||
"name": "盐城",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "盐城YANCHENG15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "Z",
|
||||
"data": [{
|
||||
"name": "枣庄",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "枣庄ZAOZHUANG15544448888"
|
||||
},
|
||||
{
|
||||
"name": "张家界",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "张家界ZHANGJIAJIE15544448888"
|
||||
},
|
||||
{
|
||||
"name": "张家口",
|
||||
"mobile": "15544448888",
|
||||
"keyword": "张家口ZHANGJIAKOU15544448888"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"letter": "#",
|
||||
"data": [{
|
||||
"name": "其他.",
|
||||
"mobile": "16666666666",
|
||||
"keyword": "echo16666666666"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
|
||||
<view class="modal">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>模态框</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<tn-modal
|
||||
v-model="show"
|
||||
:backgroundColor="backgroundColor"
|
||||
:width="width"
|
||||
:padding="padding"
|
||||
:radius="radius"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:title="title"
|
||||
:content="content"
|
||||
:button="button"
|
||||
:showCloseBtn="closeBtn || !maskCloseable"
|
||||
:maskCloseable="maskCloseable"
|
||||
:zoom="zoom"
|
||||
:custom="custom"
|
||||
@click="clickBtn"
|
||||
>
|
||||
<view v-if="custom">
|
||||
<view class="custom-modal-content">
|
||||
<tn-form :labelWidth="140">
|
||||
<tn-form-item label="手机号码" :borderBottom="false">
|
||||
<tn-input placeholder="请输入手机号码"></tn-input>
|
||||
</tn-form-item>
|
||||
<tn-form-item label="验证码" :borderBottom="false">
|
||||
<tn-input placeholder="请输入验证码"></tn-input>
|
||||
<view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<tn-button :fontSize="20" padding="10rpx" height="46rpx" fontColor="tn-color-white">获取验证码</tn-button>
|
||||
</view>
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
</view>
|
||||
</view>
|
||||
</tn-modal>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsModal',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
title: '使用提醒',
|
||||
content: '确定不使用TuniaoUI',
|
||||
show: false,
|
||||
backgroundColor: '',
|
||||
width: '84%',
|
||||
padding: '',
|
||||
radius: 12,
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
button:[
|
||||
{
|
||||
text: '取消',
|
||||
backgroundColor: '#A4E82F',
|
||||
fontColor: '#FFFFFF'
|
||||
},
|
||||
{
|
||||
text: '确定',
|
||||
backgroundColor: 'tn-bg-red',
|
||||
fontColor: '#FFFFFF'
|
||||
}
|
||||
],
|
||||
closeBtn: true,
|
||||
maskCloseable: true,
|
||||
zoom: true,
|
||||
custom: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-modal组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '自定义内容',
|
||||
optional: ['是','否'],
|
||||
methods: 'customChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '圆角',
|
||||
optional: ['默认','60'],
|
||||
methods: 'radiusChange'
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'titleChange'
|
||||
},
|
||||
{
|
||||
title: '按钮',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'buttonChange'
|
||||
},
|
||||
{
|
||||
title: '右上角关闭按钮',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'closeBtnChange'
|
||||
},
|
||||
{
|
||||
title: '点击mask关闭',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskCloseableChange'
|
||||
},
|
||||
{
|
||||
title: '动画',
|
||||
optional: ['有','无'],
|
||||
methods: 'zoomChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出模态框
|
||||
showModal(event) {
|
||||
this.openModal()
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
} else {
|
||||
this.backgroundColor = '#E4E9EC'
|
||||
this.fontColor = '#BA7027'
|
||||
}
|
||||
this.openModal()
|
||||
},
|
||||
// 切换大小
|
||||
sizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
// this.width = '84%'
|
||||
this.padding = ''
|
||||
this.fontSize = 0
|
||||
} else {
|
||||
// this.width = '480rpx'
|
||||
this.padding = '30rpx 26rpx'
|
||||
this.fontSize = 35
|
||||
}
|
||||
this.openModal()
|
||||
},
|
||||
// 切换自定义内容
|
||||
customChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.custom = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([4,5], false)
|
||||
} else {
|
||||
this.custom = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([4,5], true)
|
||||
}
|
||||
this.openModal()
|
||||
},
|
||||
// 切换圆角
|
||||
radiusChange(event) {
|
||||
this.radius = event.index === 0 ? 12 : Number(event.name)
|
||||
this.openModal()
|
||||
},
|
||||
// 切换标题信息
|
||||
titleChange(event) {
|
||||
this.title = event.index === 0 ? '使用提醒' : ''
|
||||
this.openModal()
|
||||
},
|
||||
// 切换按钮
|
||||
buttonChange(event) {
|
||||
this.button = event.index === 0 ? [
|
||||
{
|
||||
text: '取消',
|
||||
backgroundColor: '#E6E6E6',
|
||||
fontColor: '#FFFFFF'
|
||||
},
|
||||
{
|
||||
text: '确定',
|
||||
backgroundColor: 'tn-bg-indigo',
|
||||
fontColor: '#FFFFFF'
|
||||
}
|
||||
] : []
|
||||
this.openModal()
|
||||
},
|
||||
// 切换关闭按钮显示隐藏
|
||||
closeBtnChange(event) {
|
||||
this.closeBtn = event.index === 0 ? true : false
|
||||
this.openModal()
|
||||
},
|
||||
// 切换蒙版层关闭
|
||||
maskCloseableChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.maskCloseable = true
|
||||
} else {
|
||||
this.maskCloseable = false
|
||||
this.closeBtn = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 6, 0)
|
||||
}
|
||||
this.openModal()
|
||||
},
|
||||
// 切换动画
|
||||
zoomChange(event) {
|
||||
this.zoom = event.index === 0 ? true : false
|
||||
this.openModal()
|
||||
},
|
||||
|
||||
// 打开模态框
|
||||
openModal() {
|
||||
this.show = true
|
||||
},
|
||||
|
||||
// 点击按钮
|
||||
clickBtn(event) {
|
||||
this.show = false
|
||||
this.$t.messageUtils.toast('点击了第'+(event.index + 1)+'个按钮')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.tn-modal-class {
|
||||
.custom-modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: $tn-main-color;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
|
||||
<view class="components-nav_bar">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>navBar导航栏</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<!-- 普通导航栏 -->
|
||||
<tn-nav-bar v-if="mode === 'normal'" :fixed="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">图鸟科技</tn-nav-bar>
|
||||
<!-- 自定义内容导航栏，隐藏返回按钮 -->
|
||||
<tn-nav-bar v-if="mode === 'customNav'" :fixed="false" :isBack="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<!-- 自定义放回按钮 -->
|
||||
<tn-nav-bar v-if="mode === 'customBack'" :fixed="false" :customBack="true" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
|
||||
<view slot="back" class='tn-custom-nav-bar__back'>
|
||||
<view><text class='tn-icon-left'></text></view>
|
||||
<view><text class='tn-icon-home-capsule-fill'></text></view>
|
||||
</view>
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsNavbar',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
searchValue: '',
|
||||
mode: 'normal',
|
||||
height: 46,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alpha: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '高度',
|
||||
optional: ['默认','46','80'],
|
||||
methods: 'heightChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
optional: ['默认','自定义返回按钮', '隐藏返回栏自定义内容'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '背景颜色',
|
||||
optional: ['默认','#01BEFF','透明'],
|
||||
methods: 'backgroundColorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换高度
|
||||
heightChange(event) {
|
||||
this.height = event.index === 0 ? 0 : Number(event.name)
|
||||
},
|
||||
// 切换样式
|
||||
modeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.mode = 'normal'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'customBack'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'customNav'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换背景颜色
|
||||
backgroundColorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#FFFFFF'
|
||||
this.alpha = false
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = event.name
|
||||
this.alpha = false
|
||||
break
|
||||
case 2:
|
||||
this.alpha = true
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
.custom-nav-content {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.search-content {
|
||||
flex: 1;
|
||||
|
||||
.search-input {
|
||||
border-radius: 30rpx;
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
/deep/ .tn-input-class {
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
|
||||
<view class="components-notice-bar">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-notice-bar
|
||||
:show="show"
|
||||
:list="list"
|
||||
:mode="mode"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:playStatus="playStatus"
|
||||
:leftIcon="leftIcon"
|
||||
:leftIconName="leftIconName"
|
||||
:leftIconSize="leftIconSize"
|
||||
:rightIcon="rightIcon"
|
||||
:rightIconName="rightIconName"
|
||||
:rightIconSize="rightIconSize"
|
||||
:closeBtn="closeBtn"
|
||||
:radius="radius"
|
||||
:padding="padding"
|
||||
:autoplay="autoplay"
|
||||
:duration="duration"
|
||||
:speed="speed"
|
||||
:circular="circular"
|
||||
:autoHidden="autoHidden"
|
||||
@click="onClick"
|
||||
@close="close"
|
||||
@clickLeft="onLeftClick"
|
||||
@clickRight="onRightClick"
|
||||
@end="end"
|
||||
></tn-notice-bar>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsNoticeBar',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'TuniaoUI现已发布V1.0.0',
|
||||
'今天天气晴朗，适合处理bug',
|
||||
'TuniaoUIV2.0.0即将发布',
|
||||
'今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
|
||||
],
|
||||
|
||||
show: true,
|
||||
mode: 'horizontal',
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
playStatus: 'play',
|
||||
leftIcon: true,
|
||||
leftIconName: 'sound',
|
||||
leftIconSize: 34,
|
||||
rightIcon: false,
|
||||
rightIconName: 'right',
|
||||
rightIconSize: 26,
|
||||
closeBtn: false,
|
||||
radius: 0,
|
||||
padding: '18rpx 24rpx',
|
||||
autoplay: true,
|
||||
duration: 2000,
|
||||
speed: 160,
|
||||
circular: true,
|
||||
autoHidden: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-notice-bar组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '滚动模式',
|
||||
optional: ['水平连续','水平不连续','垂直'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '显示状态',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showChange'
|
||||
},
|
||||
{
|
||||
title: '播放状态',
|
||||
optional: ['播放','暂停'],
|
||||
methods: 'playStatusChange'
|
||||
},
|
||||
{
|
||||
title: '速度控制',
|
||||
optional: ['减速','加速'],
|
||||
methods: 'speedChange'
|
||||
},
|
||||
{
|
||||
title: '图标显示',
|
||||
optional: ['默认','显示右边图标','显示关闭按钮','全部不显示'],
|
||||
methods: 'iconChange'
|
||||
},
|
||||
{
|
||||
title: '自定义图标',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'iconNameChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换滚动模式
|
||||
modeChange(event) {
|
||||
this.speed = 160
|
||||
this.duration = 2000
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'horizontal'
|
||||
this.circular = true
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'horizontal'
|
||||
this.circular = false
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'vertical'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换显示状态
|
||||
showChange(event) {
|
||||
this.show = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换播放状态
|
||||
playStatusChange(event) {
|
||||
this.playStatus = event.index === 0 ? 'play' : 'paused'
|
||||
},
|
||||
// 切换滚动速度
|
||||
speedChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
if (this.mode === 'horizontal' && this.circular) {
|
||||
const speed = this.speed - 10
|
||||
this.speed = speed > 0 ? speed : 0
|
||||
} else {
|
||||
const duration = this.duration + 100
|
||||
if (duration > 3000) {
|
||||
this.$t.messageUtils.toast('达到速度最小值')
|
||||
this.duration = 3000
|
||||
} else {
|
||||
this.duration = duration
|
||||
}
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
if (this.mode === 'horizontal' && this.circular) {
|
||||
const speed = this.speed + 10
|
||||
if (speed > 300) {
|
||||
this.$t.messageUtils.toast('达到速度最大值')
|
||||
this.speed = 300
|
||||
} else {
|
||||
this.speed = speed
|
||||
}
|
||||
} else {
|
||||
const duration = this.duration - 100
|
||||
this.duration = this.duration > 0 ? duration : 0
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换图标显示
|
||||
iconChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.leftIcon = true
|
||||
this.rightIcon = false
|
||||
this.closeBtn = false
|
||||
break
|
||||
case 1:
|
||||
this.rightIcon = true
|
||||
break
|
||||
case 2:
|
||||
this.closeBtn = true
|
||||
break
|
||||
case 3:
|
||||
this.leftIcon = false
|
||||
this.rightIcon = false
|
||||
this.closeBtn = false
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义图标
|
||||
iconNameChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.leftIconName = 'sound'
|
||||
this.rightIconName = 'right'
|
||||
break
|
||||
case 1:
|
||||
this.leftIconName = 'tag'
|
||||
this.rightIconName = 'trophy'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = 'tn-bg-red'
|
||||
this.fontColor = '#FFFFFF'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.fontSize = 0
|
||||
this.radius = 0
|
||||
this.leftIconSize = 34
|
||||
this.rightIconSize = 26
|
||||
break
|
||||
case 1:
|
||||
this.fontSize = 40
|
||||
this.radius = 10
|
||||
this.leftIconSize = 50
|
||||
this.rightIconSize = 30
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 点击消息
|
||||
onClick(index) {
|
||||
this.$t.messageUtils.toast('点击了消息')
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$t.messageUtils.toast('点击关闭按钮')
|
||||
},
|
||||
// 点击左边图标
|
||||
onLeftClick() {
|
||||
this.$t.messageUtils.toast('点击左边图标')
|
||||
},
|
||||
// 点击右边图标
|
||||
onRightClick() {
|
||||
this.$t.messageUtils.toast('点击右边图标')
|
||||
},
|
||||
// 一个周期滚动结束
|
||||
end() {
|
||||
console.log('滚动结束');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
|
||||
<view class="components-number_box">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>numberBox步进输入</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-number-box
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:disabledInput="disabledInput"
|
||||
:inputWidth="inputWidth"
|
||||
:inputHeight="inputHeight"
|
||||
:positiveInteger="positiveInteger"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
></tn-number-box>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsNumberBox',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
disabledInput: false,
|
||||
inputWidth: 88,
|
||||
inputHeight: 50,
|
||||
positiveInteger: true,
|
||||
backgroundColor: '#E6E6E6',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-number-box组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '初始值',
|
||||
optional: ['0','1','2.5','3','4','5'],
|
||||
methods: 'valueChange'
|
||||
},
|
||||
{
|
||||
title: '最小最大值',
|
||||
optional: ['0-100','50-1000'],
|
||||
methods: 'minMaxChange'
|
||||
},
|
||||
{
|
||||
title: '步进值',
|
||||
optional: ['1','5','0.5'],
|
||||
methods: 'stepChange'
|
||||
},
|
||||
{
|
||||
title: '只允许输入正整数',
|
||||
optional: ['是','否'],
|
||||
methods: 'positiveIntegerChange'
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '禁用输入状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledInputChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义尺寸',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSizeChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换初始值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换最小最大值
|
||||
minMaxChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.min = Number(value[0])
|
||||
this.max = Number(value[1])
|
||||
},
|
||||
// 切换步进值
|
||||
stepChange(event) {
|
||||
this.step = Number(event.name)
|
||||
},
|
||||
// 切换允许正整数状态
|
||||
positiveIntegerChange(event) {
|
||||
this.positiveInteger = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用输入状态
|
||||
disabledInputChange(event) {
|
||||
this.disabledInput = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义尺寸
|
||||
customSizeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.inputWidth = 88
|
||||
this.inputHeight = 50
|
||||
this.fontSize = 0
|
||||
break
|
||||
case 1:
|
||||
this.inputWidth = 120
|
||||
this.inputHeight = 60
|
||||
this.fontSize = 40
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
customColorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.fontColor = ''
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = '#AAAAAA'
|
||||
this.fontColor = 'tn-color-grey'
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
|
||||
<view class="components-picker">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Picker选择器</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showPicker">弹出Picker</tn-button></view>
|
||||
<view class="picker-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- picker -->
|
||||
<tn-picker
|
||||
v-model="show"
|
||||
:mode="mode"
|
||||
:params="params"
|
||||
:range="range"
|
||||
:rangeKey="rangeKey"
|
||||
:defaultSelector="defaultSelector"
|
||||
:showTimeTag="showTimeTag"
|
||||
:startYear="startYear"
|
||||
:endYear="endYear"
|
||||
:defaultTime="defaultTime"
|
||||
:defaultRegin="defaultRegion"
|
||||
:areaCode="areaCode"
|
||||
:maskCloseable="maskCloseable"
|
||||
@cancel="cancelPicker"
|
||||
@confirm="confirmPicker"
|
||||
>
|
||||
</tn-picker>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
|
||||
export default {
|
||||
name: 'componentsPicker',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
result: 'Picker结果',
|
||||
show: false,
|
||||
mode: 'selector',
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
province: true,
|
||||
city: true,
|
||||
area: true,
|
||||
timestamp: true
|
||||
},
|
||||
showTimeTag: false,
|
||||
startYear: 2000,
|
||||
endYear: 2100,
|
||||
defaultTime: '2021/10/01 12:00:00',
|
||||
defaultRegion: ['广东省','广州市','天河区'],
|
||||
areaCode: [],
|
||||
maskCloseable: true,
|
||||
range: ['哆啦A梦','大熊','小夫','静香','胖虎'],
|
||||
rangeKey: '',
|
||||
defaultSelector: [0],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-picker组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['单列','多列','时间','地区'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '显示时分秒',
|
||||
optional: ['隐藏','显示'],
|
||||
methods: 'timeSecondChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '显示时间单位',
|
||||
optional: ['隐藏','显示'],
|
||||
methods: 'showTimeTagChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '指定起始年份',
|
||||
optional: ['2000-2100','2020-2030'],
|
||||
methods: 'timeRangeChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '默认时间',
|
||||
optional: ['2021/10/01 12:00:00','2021-10-01 17:00:00'],
|
||||
methods: 'defaultTimeChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '默认地区',
|
||||
optional: ['广东省-广州市-天河区','44-4401-440107'],
|
||||
methods: 'defaultRegionChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '点击遮罩关闭',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskCloseableChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出Picker
|
||||
showPicker(event) {
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.mode = 'selector'
|
||||
this.range = ['哆啦A梦','大熊','小夫','静香','胖虎']
|
||||
this.defaultSelector = [0]
|
||||
this.rangeKey = ''
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'multiSelector'
|
||||
this.range = [
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
name: '哆啦A梦'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '大熊'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '小夫'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '静香'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '胖虎'
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
name: '家'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '学校'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '操场'
|
||||
}
|
||||
]
|
||||
]
|
||||
this.defaultSelector = [0,0]
|
||||
this.rangeKey = 'name'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'time'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], true)
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'region'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, true)
|
||||
break
|
||||
}
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换显示时分秒
|
||||
timeSecondChange(event) {
|
||||
this.params = {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: true,
|
||||
province: true,
|
||||
city: true,
|
||||
area: true,
|
||||
timestamp: true
|
||||
}
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换显示时间单位
|
||||
showTimeTagChange(event) {
|
||||
this.showTimeTag = event.index === 0 ? false : true
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换起始年份
|
||||
timeRangeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.startYear = 2000
|
||||
this.endYear = 2100
|
||||
} else if (event.index === 1) {
|
||||
this.startYear = 2020
|
||||
this.endYear = 2030
|
||||
}
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换默认时间
|
||||
defaultTimeChange(event) {
|
||||
this.defaultTime = event.name
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换默认地区
|
||||
defaultRegionChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.defaultRegion = ['广东省','广州市','天河区']
|
||||
this.areaCode = []
|
||||
} else if (event.index === 1) {
|
||||
this.defaultRegion = []
|
||||
this.areaCode = ['44','4401','440111']
|
||||
}
|
||||
this.openPicker()
|
||||
},
|
||||
// 切换点击遮罩关闭
|
||||
maskCloseableChange(event) {
|
||||
this.maskCloseable = event.index === 0 ? true : false
|
||||
this.openPicker()
|
||||
},
|
||||
|
||||
// 点击取消按钮
|
||||
cancelPicker(event) {
|
||||
this.$t.messageUtils.toast('点击了取消按钮')
|
||||
},
|
||||
// 点击确认按钮
|
||||
confirmPicker(event) {
|
||||
switch (this.mode) {
|
||||
case 'selector':
|
||||
this.result = this.range[event[0]]
|
||||
this.defaultSelector = event
|
||||
break
|
||||
case 'multiSelector':
|
||||
this.result = `${this.range[0][event[0]][this.rangeKey]} - ${this.range[1][event[1]][this.rangeKey]}`
|
||||
this.defaultSelector = event
|
||||
break
|
||||
case 'time':
|
||||
this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
|
||||
this.defaultTime = this.result
|
||||
break
|
||||
case 'region':
|
||||
this.result = `${event.province.label}-${event.city.label}-${event.area.label}`
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 打开Picker
|
||||
openPicker() {
|
||||
this.show = true
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.picker-result {
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: $tn-font-holder-color;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
|
||||
<view class="components-popup">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>弹框</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- popup -->
|
||||
<tn-popup
|
||||
v-model="show"
|
||||
:marginTop="vuex_custom_bar_height"
|
||||
length="50%"
|
||||
:mode="mode"
|
||||
:backgroundColor="backgroundColor"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:borderRadius="borderRadius"
|
||||
:closeBtn="closeBtn"
|
||||
:closeBtnIcon="closeBtnIcon"
|
||||
:closeBtnPosition="closeBtnPosition"
|
||||
:maskCloseable="maskCloseable"
|
||||
@close="closedPopup"
|
||||
>
|
||||
<view class="popup-content" :class="{'popup-content--center': mode === 'center'}">
|
||||
<tn-button shape="round" @click="closedPopup" width="220rpx" fontColor="#080808">关闭弹窗</tn-button>
|
||||
</view>
|
||||
</tn-popup>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsPopup',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
mode: 'left',
|
||||
backgroundColor: '',
|
||||
width: '',
|
||||
height: '',
|
||||
borderRadius: 0,
|
||||
closeBtn: true,
|
||||
closeBtnIcon: 'close',
|
||||
closeBtnPosition: 'top-right',
|
||||
maskCloseable: true,
|
||||
|
||||
popupShowSubsectionIndex: 1,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-popup组件, 如果使用了自定义顶部，需要设置marginTop属性为自定义顶部的高度'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '背景颜色',
|
||||
optional: ['默认','tn-bg-grey--light','#C6D1D8'],
|
||||
methods: 'backgroundColorChange'
|
||||
},
|
||||
{
|
||||
title: '宽高',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'widthHeightChange'
|
||||
},
|
||||
{
|
||||
title: '圆角',
|
||||
optional: ['0','23'],
|
||||
methods: 'borderRadiusChange'
|
||||
},
|
||||
{
|
||||
title: '弹出位置',
|
||||
optional: ['上','下','中','左','右'],
|
||||
methods: 'modeChange',
|
||||
current: 3
|
||||
},
|
||||
{
|
||||
title: '关闭按钮',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'closeBtnChange'
|
||||
},
|
||||
{
|
||||
title: '关闭按钮图标',
|
||||
optional: ['close','cross-fill'],
|
||||
methods: 'closeBtnIconChange'
|
||||
},
|
||||
{
|
||||
title: '关闭按钮位置',
|
||||
optional: ['左上','右上','左下','右下'],
|
||||
methods: 'closeBtnPositionChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '点击遮罩关闭',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskCloseableChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出弹框
|
||||
showPopup() {
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换弹出位置
|
||||
modeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.mode = 'top'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'bottom'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'center'
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'left'
|
||||
break
|
||||
case 4:
|
||||
this.mode = 'right'
|
||||
break
|
||||
}
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换背景颜色
|
||||
backgroundColorChange(event) {
|
||||
this.backgroundColor = event.index === 0 ? '' : event.name
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换宽高设置
|
||||
widthHeightChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.width = ''
|
||||
this.height = ''
|
||||
} else {
|
||||
this.width = this.mode !== 'center' ? '30%' : '60%'
|
||||
this.height = this.mode !== 'center' ? '30%' : '20%'
|
||||
}
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换圆角
|
||||
borderRadiusChange(event) {
|
||||
this.borderRadius = Number(event.name)
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换关闭按钮
|
||||
closeBtnChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.closeBtn = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
|
||||
} else {
|
||||
this.closeBtn = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([5,6], false)
|
||||
}
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换关闭按钮图标
|
||||
closeBtnIconChange(event) {
|
||||
this.closeBtnIcon = event.name
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换关闭按钮的位置
|
||||
closeBtnPositionChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.closeBtnPosition = 'top-left'
|
||||
break
|
||||
case 1:
|
||||
this.closeBtnPosition = 'top-right'
|
||||
break
|
||||
case 2:
|
||||
this.closeBtnPosition = 'bottom-left'
|
||||
break
|
||||
case 3:
|
||||
this.closeBtnPosition = 'bottom-right'
|
||||
break
|
||||
}
|
||||
this.openPopup()
|
||||
},
|
||||
// 切换点击遮罩关闭
|
||||
maskCloseableChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.maskCloseable = true
|
||||
} else {
|
||||
this.maskCloseable = false
|
||||
this.closeBtn = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 4, 0)
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
|
||||
}
|
||||
this.openPopup()
|
||||
},
|
||||
|
||||
|
||||
// 打开Popup
|
||||
openPopup() {
|
||||
this.show = true
|
||||
},
|
||||
// 关闭Popup
|
||||
closedPopup() {
|
||||
this.show = false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.popup-content {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&--center {
|
||||
padding: 150rpx 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
|
||||
<view class="components-progress">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Progress进度条</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<block v-if="customPercent">
|
||||
<tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
|
||||
:striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent">
|
||||
<block v-if="customPercent">
|
||||
<view class="tn-color-white">加载中</view>
|
||||
</block>
|
||||
</tn-line-progress>
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
|
||||
<block v-if="customPercent">
|
||||
<view class="tn-color-red">加载中</view>
|
||||
</block>
|
||||
</tn-circle-progress>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
|
||||
:striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent"></tn-line-progress>
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
|
||||
</tn-circle-progress>
|
||||
</view>
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
|
||||
export default {
|
||||
name: 'componentsStriped',
|
||||
components: {
|
||||
dynamicDemoTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: 'line',
|
||||
percent: 50,
|
||||
height: 28,
|
||||
activeColor: '#01BEFF',
|
||||
showPercent: false,
|
||||
striped: false,
|
||||
stripedAnimation: true,
|
||||
customPercent: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件', '使用tn-line-progress、tn-circle-progress组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['线条','圆环'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
optional: ['减少10%','增加10%'],
|
||||
methods: 'percentChange'
|
||||
},
|
||||
{
|
||||
title: '高度',
|
||||
optional: ['18','28','38'],
|
||||
methods: 'heightChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '激活时颜色',
|
||||
optional: ['#01BEFF','#2DE88D'],
|
||||
methods: 'activeColorChange'
|
||||
},
|
||||
{
|
||||
title: '显示条纹',
|
||||
optional: ['是','否'],
|
||||
methods: 'stripedChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '动态条纹',
|
||||
optional: ['是','否'],
|
||||
methods: 'stripedAnimationChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '显示进度信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'showPercentChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义进度信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'customPercentChange',
|
||||
current: 1
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'line'
|
||||
if (this.striped) {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], true)
|
||||
} else {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4], true)
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'circle'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], false)
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换进度
|
||||
percentChange(event) {
|
||||
let percent = 0
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
percent = this.percent - 10
|
||||
this.percent = percent > 0 ? percent : 0
|
||||
break
|
||||
case 1:
|
||||
percent = this.percent + 10
|
||||
this.percent = percent > 100 ? 100 : percent
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换高度
|
||||
heightChange(event) {
|
||||
this.height = Number(event.name)
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换激活时颜色
|
||||
activeColorChange(event) {
|
||||
this.activeColor = event.name
|
||||
},
|
||||
// 切换进度信息显示
|
||||
showPercentChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.showPercent = true
|
||||
this.customPercent = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(7, false)
|
||||
} else {
|
||||
this.showPercent = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(7, true)
|
||||
}
|
||||
},
|
||||
// 切换条纹
|
||||
stripedChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.striped = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, true)
|
||||
} else {
|
||||
this.striped = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
||||
}
|
||||
},
|
||||
// 切换条纹动画
|
||||
stripedAnimationChange(event) {
|
||||
this.stripedAnimation = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义进度信息
|
||||
customPercentChange(event) {
|
||||
this.customPercent = event.index === 0 ? true : false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
tn-line-progress, .tn-line-progress {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
|
||||
<view class="components-rate">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>rate评分</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-rate
|
||||
v-model="value"
|
||||
:count="count"
|
||||
:disabled="disabled"
|
||||
:allowHalf="allowHalf"
|
||||
:size="size"
|
||||
:activeIcon="activeIcon"
|
||||
:inactiveIcon="inactiveIcon"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
:colors="colors"
|
||||
:icons="icons"
|
||||
></tn-rate>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsRate',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
count: 5,
|
||||
disabled: false,
|
||||
allowHalf: false,
|
||||
size: 32,
|
||||
activeIcon: 'star-fill',
|
||||
inactiveIcon: 'star',
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#AAAAAA',
|
||||
colors: [],
|
||||
icons: [],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-rate组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '初始值',
|
||||
optional: ['0','1','2.5','3','4','5'],
|
||||
methods: 'valueChange'
|
||||
},
|
||||
{
|
||||
title: '半星状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'allowHalfChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['24','32','68'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '图标数量',
|
||||
optional: ['3','4','5','6'],
|
||||
methods: 'countChange',
|
||||
current: 2
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'iconChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '根据选择数显示图标信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'showDiffChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换初始值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换半星状态
|
||||
allowHalfChange(event) {
|
||||
this.allowHalf = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
// 切换图标数量
|
||||
countChange(event) {
|
||||
this.count = Number(event.name)
|
||||
},
|
||||
// 切换图标
|
||||
iconChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeIcon = 'star-fill'
|
||||
this.inactiveIcon = 'star'
|
||||
break
|
||||
case 1:
|
||||
this.activeIcon = 'emoji-good-fill'
|
||||
this.inactiveIcon = 'emoji-good'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#31E749'
|
||||
this.inactiveColor = '#E7D5FA'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换不同状态显示不同的图标信息
|
||||
showDiffChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.colors = ['#01BEFF','#3D7EFF','#31C9E8']
|
||||
this.icons = ['star-fill','praise-fill','flower-fill']
|
||||
break
|
||||
case 1:
|
||||
this.colors = []
|
||||
this.icons = []
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
|
||||
<view class="components-read-more">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
|
||||
<tn-read-more
|
||||
:showHeight="showHeight"
|
||||
:closeBtn="closeBtn"
|
||||
:openText="openText"
|
||||
:closeText="closeText"
|
||||
:openIcon="openIcon"
|
||||
:closeIcon="closeIcon"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:shadowStyle="shadowStyle"
|
||||
@open="open"
|
||||
@closed="closed">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</tn-read-more>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsReadMore',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
content: `噫吁嚱，危乎高哉！
|
||||
蜀道之难，难于上青天！
|
||||
蚕丛及鱼凫，开国何茫然！
|
||||
尔来四万八千岁，不与秦塞通人烟。
|
||||
西当太白有鸟道，可以横绝峨眉巅。
|
||||
地崩山摧壮士死，然后天梯石栈相钩连。
|
||||
上有六龙回日之高标，下有冲波逆折之回川。
|
||||
黄鹤之飞尚不得过，猿猱欲度愁攀援。
|
||||
青泥何盘盘，百步九折萦岩峦。
|
||||
扪参历井仰胁息，以手抚膺坐长叹。
|
||||
|
||||
问君西游何时还？畏途巉岩不可攀。
|
||||
但见悲鸟号古木，雄飞雌从绕林间。
|
||||
又闻子规啼夜月，愁空山。
|
||||
蜀道之难，难于上青天，使人听此凋朱颜！
|
||||
连峰去天不盈尺，枯松倒挂倚绝壁。
|
||||
飞湍瀑流争喧豗，砯崖转石万壑雷。
|
||||
其险也如此，嗟尔远道之人胡为乎来哉！(也如此 一作：也若此)
|
||||
|
||||
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
|
||||
所守或匪亲，化为狼与豺。
|
||||
朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
|
||||
锦城虽云乐，不如早还家。
|
||||
蜀道之难，难于上青天，侧身西望长咨嗟！`,
|
||||
showHeight: 400,
|
||||
closeBtn: false,
|
||||
openText: '展开阅读全文',
|
||||
closeText: '收起',
|
||||
openIcon: 'down',
|
||||
closeIcon: 'up',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
shadowStyle: {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
},
|
||||
|
||||
fullWindowsScroll: false,
|
||||
tips: ['无需依赖额外的样式文件','使用tn-read-more组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '默认高度',
|
||||
optional: ['200','400', '600'],
|
||||
methods: 'showHeightChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '显示收起按钮',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'closeBtnChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换默认高度
|
||||
showHeightChange(event) {
|
||||
this.showHeight = Number(event.name)
|
||||
},
|
||||
// 切换收起按钮模式
|
||||
closeBtnChange(event) {
|
||||
this.closeBtn = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
customChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.openText = '展开阅读全文'
|
||||
this.closeText = '收起'
|
||||
this.openIcon = 'down'
|
||||
this.closeIcon = 'up'
|
||||
this.fontColor = ''
|
||||
this.fontSize = 0
|
||||
this.shadowStyle = {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
this.openText = '付费解锁剩余内容'
|
||||
this.closeText = '折起来'
|
||||
this.openIcon = 'money'
|
||||
this.closeIcon = 'close-circle'
|
||||
this.fontSize = 30
|
||||
this.shadowStyle = {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #AAA 100%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 展开
|
||||
open() {
|
||||
// setTimeout(() => {
|
||||
// this.$refs.demoTemplate.updateSectionScrollView()
|
||||
// }, 350)
|
||||
this.fullWindowsScroll = true
|
||||
},
|
||||
// 收起
|
||||
closed() {
|
||||
setTimeout(() => {
|
||||
this.fullWindowsScroll = false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 350)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
|
||||
<view class="components-toast">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-scroll-list
|
||||
:indicator="indicator"
|
||||
:indicatorWidth="indicatorWidth"
|
||||
:indicatorBarWidth="indicatorBarWidth"
|
||||
:indicatorColor="indicatorColor"
|
||||
:indicatorActiveColor="indicatorActiveColor"
|
||||
>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<block v-for="(item, index) in 14" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
|
||||
<view class="tn-icon-gloves-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">傻北</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsScrollList',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
indicator: true,
|
||||
indicatorWidth: 50,
|
||||
indicatorBarWidth: 20,
|
||||
indicatorColor: '#E6E6E6',
|
||||
indicatorActiveColor: '#01BEFF',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-scroll-list组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '指示条',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'indicatorChange'
|
||||
},
|
||||
{
|
||||
title: '指示条样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换指示条状态
|
||||
indicatorChange(event) {
|
||||
this.indicator = event.index === 0 ? true : false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换自定义指示条
|
||||
customChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.indicatorWidth = 50
|
||||
this.indicatorBarWidth = 20
|
||||
this.indicatorColor = '#E6E6E6'
|
||||
this.indicatorActiveColor = '#01BEFF'
|
||||
break
|
||||
case 1:
|
||||
this.indicatorWidth = 100
|
||||
this.indicatorBarWidth = 30
|
||||
this.indicatorColor = '#D6F4FA'
|
||||
this.indicatorActiveColor = '#27A1BA'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.icon3 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
margin-top: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 25%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
|
||||
<view class="components-select">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Select列选择器</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
|
||||
<view class="select-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- select -->
|
||||
<tn-select
|
||||
v-model="show"
|
||||
:mode="mode"
|
||||
title="请选择数据"
|
||||
:list="list"
|
||||
:maskCloseable="maskCloseable"
|
||||
@cancel="cancelSelect"
|
||||
@confirm="confirmSelect"
|
||||
>
|
||||
</tn-select>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
|
||||
export default {
|
||||
name: 'componentsSelect',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
result: 'Select结果',
|
||||
show: false,
|
||||
mode: 'single',
|
||||
list: [
|
||||
{
|
||||
value: 1,
|
||||
label: '哆啦A梦'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '大熊'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '小夫'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '静香'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '胖虎'
|
||||
}
|
||||
],
|
||||
maskCloseable: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-select组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['单列','多列','自动多列'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '点击遮罩关闭',
|
||||
optional: ['是','否'],
|
||||
methods: 'maskCloseableChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出Select
|
||||
showSelect(event) {
|
||||
this.openSelect()
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.mode = 'single'
|
||||
this.list = [
|
||||
{
|
||||
value: 1,
|
||||
label: '哆啦A梦'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '大熊'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '小夫'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '静香'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '胖虎'
|
||||
}
|
||||
]
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'multi'
|
||||
this.list = [
|
||||
[
|
||||
{
|
||||
value: 1,
|
||||
label: '哆啦A梦'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '大熊'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '小夫'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '静香'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '胖虎'
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
value: 1,
|
||||
label: '家'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '学校'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '操场'
|
||||
}
|
||||
]
|
||||
]
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'multi-auto'
|
||||
this.list = [
|
||||
{
|
||||
value: 11,
|
||||
label: '森林—1',
|
||||
children: [
|
||||
{
|
||||
value: 1101,
|
||||
label: '树-11',
|
||||
children: [
|
||||
{
|
||||
value: 110101,
|
||||
label: '树叶-111'
|
||||
},
|
||||
{
|
||||
value: 110102,
|
||||
label: '树叶-112'
|
||||
},
|
||||
{
|
||||
value: 110103,
|
||||
label: '树叶-113'
|
||||
},
|
||||
{
|
||||
value: 110104,
|
||||
label: '树叶-114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 1102,
|
||||
label: '树-12',
|
||||
children: [
|
||||
{
|
||||
value: 110201,
|
||||
label: '树叶-121'
|
||||
},
|
||||
{
|
||||
value: 110202,
|
||||
label: '树叶-122'
|
||||
},
|
||||
{
|
||||
value: 110203,
|
||||
label: '树叶-123'
|
||||
},
|
||||
{
|
||||
value: 110204,
|
||||
label: '树叶-124'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 1103,
|
||||
label: '树-13',
|
||||
children: [
|
||||
{
|
||||
value: 110301,
|
||||
label: '树叶-131'
|
||||
},
|
||||
{
|
||||
value: 110302,
|
||||
label: '树叶-132'
|
||||
},
|
||||
{
|
||||
value: 110303,
|
||||
label: '树叶-133'
|
||||
},
|
||||
{
|
||||
value: 110304,
|
||||
label: '树叶-134'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: '森林—2',
|
||||
children: [
|
||||
{
|
||||
value: 1201,
|
||||
label: '树-21',
|
||||
children: [
|
||||
{
|
||||
value: 120101,
|
||||
label: '树叶-211'
|
||||
},
|
||||
{
|
||||
value: 120102,
|
||||
label: '树叶-212'
|
||||
},
|
||||
{
|
||||
value: 120103,
|
||||
label: '树叶-213'
|
||||
},
|
||||
{
|
||||
value: 120104,
|
||||
label: '树叶-214'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 1202,
|
||||
label: '树-22',
|
||||
children: [
|
||||
{
|
||||
value: 120201,
|
||||
label: '树叶-221'
|
||||
},
|
||||
{
|
||||
value: 120202,
|
||||
label: '树叶-222'
|
||||
},
|
||||
{
|
||||
value: 120203,
|
||||
label: '树叶-223'
|
||||
},
|
||||
{
|
||||
value: 120204,
|
||||
label: '树叶-224'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 1203,
|
||||
label: '树-23',
|
||||
children: [
|
||||
{
|
||||
value: 120301,
|
||||
label: '树叶-231'
|
||||
},
|
||||
{
|
||||
value: 120302,
|
||||
label: '树叶-232'
|
||||
},
|
||||
{
|
||||
value: 120303,
|
||||
label: '树叶-233'
|
||||
},
|
||||
{
|
||||
value: 120304,
|
||||
label: '树叶-234'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
break
|
||||
}
|
||||
this.openSelect()
|
||||
},
|
||||
// 切换点击遮罩关闭
|
||||
maskCloseableChange(event) {
|
||||
this.maskCloseable = event.index === 0 ? true : false
|
||||
this.openSelect()
|
||||
},
|
||||
|
||||
// 点击取消按钮
|
||||
cancelSelect(event) {
|
||||
this.$t.messageUtils.toast('点击了取消按钮')
|
||||
},
|
||||
// 点击确认按钮
|
||||
confirmSelect(event) {
|
||||
console.log(event);
|
||||
switch (this.mode) {
|
||||
case 'single':
|
||||
this.result = event[0]['label']
|
||||
break
|
||||
case 'multi':
|
||||
this.result = ''
|
||||
if (event.length) {
|
||||
event.map((item, index) => {
|
||||
if (index !== 0) this.result += ' - '
|
||||
this.result += item.label
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'multi-auto':
|
||||
this.result = ''
|
||||
if (event.length) {
|
||||
event.map((item, index) => {
|
||||
if (index !== 0) this.result += ' - '
|
||||
this.result += item.label
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 打开Select
|
||||
openSelect() {
|
||||
this.show = true
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.select-result {
|
||||
margin-top: 10rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: $tn-font-holder-color;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
|
||||
<view class="components-toast">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed :beforeBack="beforeBack">SignBoard签字板</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<view class="image">
|
||||
<image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="button">
|
||||
<tn-button fontColor="tn-color-white" @click="showSignBoard">弹出签字板</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- SignBoard -->
|
||||
<tn-sign-board :show="show" :customBarHeight="vuex_custom_bar_height" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @closed="closeSign"></tn-sign-board>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
imageSrc: '',
|
||||
signSelectColor: ['#080808', '#E83A30'],
|
||||
rotate: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-sign-board组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '画笔颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '旋转签名',
|
||||
optional: ['不旋转','旋转'],
|
||||
methods: 'rotateChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出SignBoard
|
||||
showSignBoard() {
|
||||
this.show = true
|
||||
},
|
||||
// 切换画笔颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.signSelectColor = ['#080808', '#E83A30']
|
||||
break
|
||||
case 1:
|
||||
this.signSelectColor = ['#838383', '#01BEFF']
|
||||
break
|
||||
}
|
||||
this.showSignBoard()
|
||||
},
|
||||
// 切换旋转内容
|
||||
rotateChange(event) {
|
||||
this.rotate = event.index === 0 ? false : true
|
||||
this.showSignBoard()
|
||||
},
|
||||
|
||||
|
||||
// 保存签名
|
||||
saveSign(e) {
|
||||
// console.log(e);
|
||||
this.imageSrc = e
|
||||
this.show = false
|
||||
},
|
||||
// 关闭签名板
|
||||
closeSign() {
|
||||
this.show = false
|
||||
},
|
||||
|
||||
// 返回前判断是否已经关闭了签名板
|
||||
beforeBack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.show) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
this.$t.messageUtils.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
|
||||
resolve()
|
||||
}, true, () => {
|
||||
reject()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
height: 200rpx;
|
||||
|
||||
image {
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
|
||||
<view class="components-slider">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>slider滑动条</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-slider
|
||||
v-if="useSlot"
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:blockWidth="blockWidth"
|
||||
:blockColor="blockColor"
|
||||
:lineHeight="lineHeight"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
>
|
||||
<view class="tn-slider__custom-block">
|
||||
{{ value }}
|
||||
</view>
|
||||
</tn-slider>
|
||||
<tn-slider
|
||||
v-else
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:blockWidth="blockWidth"
|
||||
:blockColor="blockColor"
|
||||
:lineHeight="lineHeight"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
></tn-slider>
|
||||
|
||||
<view class="slider-value">
|
||||
<view class="slider-value__text">当前选值为：{{ value }}</view>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsSlider',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
blockWidth: 30,
|
||||
blockColor: '#FFFFFF',
|
||||
lineHeight: 8,
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#E6E6E6',
|
||||
useSlot: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-slider组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '最小最大值',
|
||||
optional: ['0-100','20-80'],
|
||||
methods: 'minMaxChange'
|
||||
},
|
||||
{
|
||||
title: '步进值',
|
||||
optional: ['1','10','30'],
|
||||
methods: 'stepChange'
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义尺寸',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSizeChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义滑块',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSliderBlockChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换最大最小值
|
||||
minMaxChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.min = Number(value[0])
|
||||
this.max = Number(value[1])
|
||||
},
|
||||
// 切换步进值
|
||||
stepChange(event) {
|
||||
this.step = Number(event.name)
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换尺寸
|
||||
customSizeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.blockWidth = 30
|
||||
this.lineHeight = 8
|
||||
break
|
||||
case 1:
|
||||
this.blockWidth = 50
|
||||
this.lineHeight = 12
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换颜色
|
||||
customColorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#E6E6E6'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#2DE88D'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换滑块
|
||||
customSliderBlockChange(event) {
|
||||
this.useSlot = event.index === 0 ? false : true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.slider-value {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
&__text {
|
||||
width: 260rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
background-color: $tn-font-holder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tn-slider__custom-block {
|
||||
background-color: $tn-color-orange;
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 5rpx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
|
||||
<view class="components-steps">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Steps步骤条</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-steps :list="list" :current="current" :mode="mode" :direction="direction" :showTitle="showTitle" :activeColor="activeColor" :inActiveColor="inActiveColor"></tn-steps>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsSteps',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '第一步'},
|
||||
{name: '第二步', icon: 'trusty', selectIcon: 'trusty-fill'},
|
||||
{name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
|
||||
{name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
|
||||
],
|
||||
current: 0,
|
||||
mode: 'dot',
|
||||
direction: 'row',
|
||||
showTitle: true,
|
||||
activeColor: '#01BEFF',
|
||||
inActiveColor: '#AAAAAA',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-steps组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '步骤',
|
||||
optional: ['上一步','下一步'],
|
||||
methods: 'currentChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['点模式','数值模式','图标模式','点图标模式'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '方向',
|
||||
optional: ['横向','竖直'],
|
||||
methods: 'directionChange'
|
||||
},
|
||||
{
|
||||
title: '显示标题',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showTitleChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换步骤
|
||||
currentChange(event) {
|
||||
let current = this.current
|
||||
if (event.index === 0) {
|
||||
current--
|
||||
this.current = current < 0 ? 0 : current
|
||||
} else {
|
||||
current++
|
||||
this.current = current > this.list.length ? this.list.length : current
|
||||
}
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'dot'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'number'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'icon'
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'dotIcon'
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换方向
|
||||
directionChange(event) {
|
||||
this.direction = event.index === 0 ? 'row' : 'column'
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换标题情况
|
||||
showTitleChange(event) {
|
||||
this.showTitle = event.index === 0 ? true : false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换颜色样式
|
||||
colorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inActiveColor = '#AAAAAA'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#24F083'
|
||||
this.inActiveColor = '#E6E6E6'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
|
||||
<view class="components-sticky" style="height: 200vh;">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>sticky吸顶</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
|
||||
<tn-sticky :offsetTop="offsetTop" :enabled="enabled" :customNavHeight="vuex_custom_bar_height" @fixed="fixed" @unfixed="unfixed">
|
||||
<view class="sticky-content">图鸟科技</view>
|
||||
</tn-sticky>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsSticky',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
offsetTop: 0,
|
||||
enabled: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-sticky组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '吸顶距离',
|
||||
optional: ['0','20','100'],
|
||||
methods: 'offsetTopChange'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
optional: ['允许吸顶', '不吸顶'],
|
||||
methods: 'enabledChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换吸顶距离
|
||||
offsetTopChange(event) {
|
||||
this.offsetTop = Number(event.name)
|
||||
},
|
||||
// 切换吸顶状态
|
||||
enabledChange(event) {
|
||||
this.enabled = event.index === 0 ? true: false
|
||||
},
|
||||
|
||||
// 监听是否吸顶
|
||||
fixed() {
|
||||
this.$t.messageUtils.toast('触发吸顶')
|
||||
},
|
||||
unfixed() {
|
||||
this.$t.messageUtils.toast('取消吸顶')
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.sticky-content {
|
||||
height: 80rpx;
|
||||
padding: 0 80rpx;
|
||||
margin: 0 10rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background-color: $tn-main-color;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
|
||||
<view class="components-index-list">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options1">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
基本使用
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
多菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options3">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
带图标菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options4">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
单图标菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
关联打开滑动菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，同时只能打开一个菜单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action :autoClose="false">
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
非关联打开滑动菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，允许同时打开多个菜单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'componentsSwipeAction',
|
||||
data() {
|
||||
return {
|
||||
// 滑动菜单
|
||||
options1: [{
|
||||
text: '置顶',
|
||||
style: {
|
||||
backgroundColor: '#FFA726'
|
||||
}
|
||||
}],
|
||||
options2: [{
|
||||
text: '置顶',
|
||||
style: {
|
||||
backgroundColor: '#FFA726'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#E83A30'
|
||||
}
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
text: '置顶',
|
||||
icon: 'star',
|
||||
style: {
|
||||
backgroundColor: '#FFA726'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
icon: 'delete',
|
||||
style: {
|
||||
backgroundColor: '#E83A30'
|
||||
}
|
||||
}
|
||||
],
|
||||
options4: [{
|
||||
icon: 'star',
|
||||
style: {
|
||||
backgroundColor: '#FFA726',
|
||||
width: '80rpx',
|
||||
height: '80rpx',
|
||||
margin: '0 12rpx',
|
||||
borderRadius: '100rpx'
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'delete',
|
||||
style: {
|
||||
backgroundColor: '#E83A30',
|
||||
width: '80rpx',
|
||||
height: '80rpx',
|
||||
margin: '0 12rpx',
|
||||
borderRadius: '100rpx'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swipe-action__item {
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
&__image {
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-left: 20rpx;
|
||||
|
||||
&__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: 5rpx;
|
||||
font-size: 22rpx;
|
||||
color: $tn-font-sub-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
|
||||
<view class="components-swiper">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Swiper轮播图</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-swiper
|
||||
:list="list"
|
||||
:height="height"
|
||||
:backgroundColor="backgroundColor"
|
||||
:title="title"
|
||||
:titleStyle="titleStyle"
|
||||
:radius="radius"
|
||||
:mode="mode"
|
||||
:indicatorPosition="indicatorPosition"
|
||||
:effect3d="effect3d"
|
||||
:effect3dPreviousSpacing="effect3dPreviousSpacing"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:circular="circular"
|
||||
></tn-swiper>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Toast -->
|
||||
<tn-toast
|
||||
ref="toast"
|
||||
@closed="closedToast"
|
||||
></tn-toast>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsSwiper',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'}
|
||||
],
|
||||
height: 250,
|
||||
backgroundColor: '',
|
||||
title: false,
|
||||
titleStyle: {},
|
||||
radius: 8,
|
||||
mode: 'round',
|
||||
indicatorPosition: 'bottomCenter',
|
||||
effect3d: false,
|
||||
effect3dPreviousSpacing: 50,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
circular: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-swiper组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '指示器模式',
|
||||
optional: ['方形','圆角方形','点','数值','隐藏'],
|
||||
methods: 'modeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '指示器位置',
|
||||
optional: ['左上','中上','右上','左下','中下','右下'],
|
||||
methods: 'indicatorPositionChange',
|
||||
current: 4
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'titleChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
},
|
||||
{
|
||||
title: '3d切换效果',
|
||||
optional: ['开启','关闭'],
|
||||
methods: 'effect3dChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '切换时间',
|
||||
optional: ['默认','5000'],
|
||||
methods: 'intervalChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换指示器模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'rect'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'round'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'dot'
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'number'
|
||||
break
|
||||
case 4:
|
||||
this.mode = ''
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换指示器位置
|
||||
indicatorPositionChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.indicatorPosition = 'topLeft'
|
||||
break
|
||||
case 1:
|
||||
this.indicatorPosition = 'topCenter'
|
||||
break
|
||||
case 2:
|
||||
this.indicatorPosition = 'topRight'
|
||||
break
|
||||
case 3:
|
||||
this.indicatorPosition = 'bottomLeft'
|
||||
break
|
||||
case 4:
|
||||
this.indicatorPosition = 'bottomCenter'
|
||||
break
|
||||
case 5:
|
||||
this.indicatorPosition = 'bottomRight'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换标题
|
||||
titleChange(event) {
|
||||
this.title = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.height = 250
|
||||
this.backgroundColor = ''
|
||||
this.titleStyle = {}
|
||||
this.radius = 8
|
||||
this.effect3dPreviousSpacing = 50
|
||||
break
|
||||
case 1:
|
||||
this.height = 300
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.titleStyle = {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
this.radius = 12
|
||||
this.effect3dPreviousSpacing = 100
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换3d效果
|
||||
effect3dChange(event) {
|
||||
this.effect3d = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换切换时间
|
||||
intervalChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.interval = 3000
|
||||
this.duration = 500
|
||||
break
|
||||
case 1:
|
||||
this.interval = 5000
|
||||
this.duration = 800
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 打开Toast
|
||||
openToast() {
|
||||
this.$refs.toast.show({
|
||||
title: this.title,
|
||||
content: this.content,
|
||||
icon: this.icon,
|
||||
image: this.image,
|
||||
duration: this.duration
|
||||
})
|
||||
},
|
||||
// 关闭Toast
|
||||
closedToast() {
|
||||
this.$t.messageUtils.toast('Toast关闭')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
|
||||
<view class="components-switch">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Switch开光</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-switch
|
||||
v-model="value"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:activeColor="color"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
:leftIcon="leftIcon"
|
||||
:rightIcon="rightIcon"
|
||||
></tn-switch>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsSwitch',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
shape: 'circle',
|
||||
color: '',
|
||||
size: 50,
|
||||
disabled: false,
|
||||
loading: false,
|
||||
leftIcon: '',
|
||||
rightIcon: '',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-switch组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '形状',
|
||||
optional: ['圆角','方角'],
|
||||
methods: 'shapeChange'
|
||||
},
|
||||
{
|
||||
title: '禁用',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','#A4E82F','#FFA4A4'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['40','50','80'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '加载中',
|
||||
optional: ['是','否'],
|
||||
methods: 'loadingChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '显示图标',
|
||||
optional: ['是','否'],
|
||||
methods: 'iconChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换形状
|
||||
shapeChange(event) {
|
||||
this.shape = event.index === 0 ? 'circle' : 'square'
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
this.color = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
// 切换加载状态
|
||||
loadingChange(event) {
|
||||
this.loading = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换图标状态
|
||||
iconChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.leftIcon = 'sex-female'
|
||||
this.rightIcon = 'sex-male'
|
||||
} else if (event.index === 1) {
|
||||
this.leftIcon = ''
|
||||
this.rightIcon = ''
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
|
||||
<view class="components-tabs">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>tabs标签</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-tabs
|
||||
v-if="show"
|
||||
:list="list"
|
||||
:current="current"
|
||||
:isScroll="isScroll"
|
||||
:height="height"
|
||||
:itemWidth="itemWidth"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
:activeItemStyle="activeItemStyle"
|
||||
:showBar="showBar"
|
||||
:barWidth="barWidth"
|
||||
:barHeight="barHeight"
|
||||
:barStyle="barStyle"
|
||||
:gutter="gutter"
|
||||
:badgeOffset="badgeOffset"
|
||||
@change="tabChange"
|
||||
></tn-tabs>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsTabs',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
data: [
|
||||
{name: '关注', count: 10},
|
||||
{name: '推荐'},
|
||||
{name: '热榜', count: '99+'},
|
||||
{name: '搞笑'},
|
||||
{name: '视频'},
|
||||
{name: '科技'},
|
||||
{name: '音乐'},
|
||||
{name: '电影'},
|
||||
{name: '游戏'}
|
||||
],
|
||||
list: [],
|
||||
current: 0,
|
||||
isScroll: true,
|
||||
height: 80,
|
||||
itemWidth: 'auto',
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#080808',
|
||||
activeItemStyle: {},
|
||||
showBar: true,
|
||||
barWidth: 40,
|
||||
barHeight: 6,
|
||||
barStyle: {},
|
||||
gutter: 30,
|
||||
badgeOffset: [20, 22],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-tabs组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式选择',
|
||||
optional: ['滑动','非滑动'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '标签数量',
|
||||
optional: ['2','3','4','5'],
|
||||
methods: 'countChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '显示底部滑块',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showBarChange'
|
||||
},
|
||||
{
|
||||
title: '自定义宽高',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customWidthHeightChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.list = this.data
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
this.show = false
|
||||
this.current = 0
|
||||
this.isScroll = event.index === 0 ? true : false
|
||||
|
||||
if (event.index === 0) {
|
||||
this.list = this.data
|
||||
this.badgeOffset = [20, 22]
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
} else if (event.index === 1) {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 1, 0)
|
||||
this.countChange({index: 0, name: 2})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换标签数量
|
||||
countChange(event) {
|
||||
this.show = false
|
||||
this.list = this.data.slice(0, Number(event.name))
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.badgeOffset = [20, 120]
|
||||
break
|
||||
case 1:
|
||||
this.badgeOffset = [20, 70]
|
||||
break
|
||||
case 2:
|
||||
this.badgeOffset = [20, 50]
|
||||
break
|
||||
case 3:
|
||||
this.badgeOffset = [20, 22]
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换底部滑块显示
|
||||
showBarChange(event) {
|
||||
this.show = false
|
||||
this.showBar = event.index === 0 ? true : false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换自定义宽高
|
||||
customWidthHeightChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.height = 80
|
||||
this.itemWidth = 'auto'
|
||||
this.barWidth = 40
|
||||
this.barHeight = 6
|
||||
this.gutter = 30
|
||||
break
|
||||
case 1:
|
||||
this.height = 100
|
||||
this.itemWidth = '40%'
|
||||
this.barWidth = 130
|
||||
this.barHeight = 4
|
||||
this.gutter = 10
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
})
|
||||
},
|
||||
// 切换颜色
|
||||
customColorChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#080808'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#31E749'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeItemStyle = {}
|
||||
this.barStyle = {}
|
||||
break
|
||||
case 1:
|
||||
this.activeItemStyle = {
|
||||
borderTop: '1rpx solid #E6E6E6'
|
||||
}
|
||||
this.barStyle = {
|
||||
boxShadow: `6rpx 6rpx 8rpx ${this.activeColor}`
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
|
||||
<view class="components-time-line">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Timeline时间轴</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="time-line__wrap">
|
||||
<tn-time-line>
|
||||
<block v-for="(item, index) in expressData" :key="index">
|
||||
<tn-time-line-item v-if="item.status !== 0" :top="2">
|
||||
<template slot="node">
|
||||
<view class="time-line-item__node">
|
||||
<view v-if="item.status === 1" class="time-line-item__node--icon tn-icon-image-text"></view>
|
||||
<view v-if="item.status === 2" class="time-line-item__node--icon tn-icon-prize"></view>
|
||||
<view v-if="item.status === 3" class="time-line-item__node--icon tn-icon-gift"></view>
|
||||
<view v-if="item.status === 4" class="time-line-item__node--icon tn-icon-logistics"></view>
|
||||
<view v-if="item.status === 5" class="time-line-item__node--icon tn-icon-my"></view>
|
||||
<view v-if="item.status === 6" class="time-line-item__node--icon tn-icon-cardbag"></view>
|
||||
<view v-if="item.status === 7" class="time-line-item__node--icon tn-icon-success"></view>
|
||||
</view>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<view>
|
||||
<view v-if="item.status === 1" class="time-line-item__content__title">已下单</view>
|
||||
<view v-if="item.status === 2" class="time-line-item__content__title">已发货</view>
|
||||
<view v-if="item.status === 3" class="time-line-item__content__title">已揽件</view>
|
||||
<view v-if="item.status === 4" class="time-line-item__content__title">运输中</view>
|
||||
<view v-if="item.status === 5" class="time-line-item__content__title">派送中</view>
|
||||
<view v-if="item.status === 6" class="time-line-item__content__title">待取件</view>
|
||||
<view v-if="item.status === 7" class="time-line-item__content__title">已签收</view>
|
||||
<view class="time-line-item__content__desc">{{ item.info }}</view>
|
||||
<view class="time-line-item__content__time">{{ item.time }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-time-line-item>
|
||||
<tn-time-line-item v-else>
|
||||
<template slot="content">
|
||||
<view>
|
||||
<view class="time-line-item__content__desc">{{ item.info }}</view>
|
||||
<view class="time-line-item__content__time">{{ item.time }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-time-line-item>
|
||||
</block>
|
||||
</tn-time-line>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'componentsTimeline',
|
||||
data() {
|
||||
return {
|
||||
expressData: [
|
||||
{
|
||||
info: '派送成功',
|
||||
status: 7,
|
||||
time: '2021-11-11 17:42'
|
||||
},
|
||||
{
|
||||
info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 17:31'
|
||||
},
|
||||
{
|
||||
info: '快件领取成功',
|
||||
status: 0,
|
||||
time: '2021-11-11 17:31'
|
||||
},
|
||||
{
|
||||
info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， 联系电话：18888888888 〖来自代收点〗',
|
||||
status: 6,
|
||||
time: '2021-11-11 17:15'
|
||||
},
|
||||
{
|
||||
info: '快件交给XXX，正在派送途中（联系电话：18888888888，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
|
||||
status: 5,
|
||||
time: '2021-11-11 17:07'
|
||||
},
|
||||
{
|
||||
info: '快件到达〖XXX合作点〗',
|
||||
status: 4,
|
||||
time: '2021-11-11 16:25'
|
||||
},
|
||||
{
|
||||
info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 13:50'
|
||||
},
|
||||
{
|
||||
info: '快件到达〖XXX营业点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 13:06'
|
||||
},
|
||||
{
|
||||
info: '快件在〖XXX集散点〗完成分拣，准备发往〖XXX营业点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 12:04'
|
||||
},
|
||||
{
|
||||
info: '快件到达〖XXX集散点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 10:14'
|
||||
},
|
||||
{
|
||||
info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX集散点〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 05:52'
|
||||
},
|
||||
{
|
||||
info: '快件到达〖XXX转场〗',
|
||||
status: 0,
|
||||
time: '2021-11-11 05:36'
|
||||
},
|
||||
{
|
||||
info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX中转场〗',
|
||||
status: 0,
|
||||
time: '2021-11-10 23:36'
|
||||
},
|
||||
{
|
||||
info: '快件到达〖XXX中转场〗',
|
||||
status: 0,
|
||||
time: '2021-11-10 22:34'
|
||||
},
|
||||
{
|
||||
info: '快件在〖XXX营业部〗完成分拣，准备发往〖XXX中转场〗',
|
||||
status: 0,
|
||||
time: '2021-11-10 22:01'
|
||||
},
|
||||
{
|
||||
info: '顺丰速运已收取快件',
|
||||
status: 3,
|
||||
time: '2021-11-10 21:54'
|
||||
},
|
||||
{
|
||||
info: '包裹正在等待揽收',
|
||||
status: 1,
|
||||
time: '2021-11-10 17:41'
|
||||
},
|
||||
{
|
||||
info: '商品已经下单',
|
||||
status: 1,
|
||||
time: '2021-11-10 12:17'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-time-line-class {
|
||||
.tn-time-line-item-class {
|
||||
&:first-child {
|
||||
.tn-time-line-item__node {
|
||||
.time-line-item__node {
|
||||
background-color: $tn-main-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-line {
|
||||
|
||||
&__wrap {
|
||||
padding: 60rpx 30rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
&-item {
|
||||
&__node {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #AAAAAA;
|
||||
|
||||
&--active {
|
||||
background-color: $tn-main-color;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
color: $tn-font-sub-color;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
&__time {
|
||||
color: $tn-font-holder-color;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
|
||||
<view class="components-tips">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>提示信息框</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Tips -->
|
||||
<tn-tips
|
||||
ref="tips"
|
||||
:position="position"
|
||||
:top="vuex_custom_bar_height"
|
||||
@close="closeTips"
|
||||
></tn-tips>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsTips',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
msg: '这是一条信息',
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
duration: 2000,
|
||||
position: '',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-tips组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '弹出位置',
|
||||
optional: ['默认','顶部','中间','底部'],
|
||||
methods: 'positionChange'
|
||||
},
|
||||
{
|
||||
title: '关闭时间',
|
||||
optional: ['默认','5000'],
|
||||
methods: 'durationChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出Tips
|
||||
showTips() {
|
||||
this.openTips()
|
||||
},
|
||||
// 切换弹出位置
|
||||
positionChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.position = ''
|
||||
break
|
||||
case 1:
|
||||
this.position = 'top'
|
||||
break
|
||||
case 2:
|
||||
this.position = 'center'
|
||||
break
|
||||
case 3:
|
||||
this.position = 'bottom'
|
||||
break
|
||||
}
|
||||
this.openTips()
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
} else {
|
||||
this.backgroundColor = 'tn-bg-gray--light'
|
||||
this.fontColor = '#E83A30'
|
||||
}
|
||||
this.openTips()
|
||||
},
|
||||
// 切换Tips关闭时间
|
||||
durationChange(event) {
|
||||
this.duration = event.index === 0 ? 2000 : Number(event.name)
|
||||
this.openTips()
|
||||
},
|
||||
|
||||
|
||||
// 打开Tips
|
||||
openTips() {
|
||||
this.$refs.tips.show({
|
||||
msg: this.msg,
|
||||
backgroundColor: this.backgroundColor,
|
||||
fontColor: this.fontColor,
|
||||
duration: this.duration
|
||||
})
|
||||
},
|
||||
// 关闭Tips
|
||||
closeTips() {
|
||||
this.$t.messageUtils.toast('tips提示框关闭了')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
|
||||
<view class="components-toast">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Toast</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Toast -->
|
||||
<tn-toast
|
||||
ref="toast"
|
||||
@closed="closedToast"
|
||||
></tn-toast>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsToast',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
title: '提示信息',
|
||||
content: '欢迎使用图鸟UI',
|
||||
icon: 'balancecar',
|
||||
image: '',
|
||||
duration: 2000,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '标题',
|
||||
optional: ['无标题','有标题'],
|
||||
methods: 'titleChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
optional: ['无内容','有内容'],
|
||||
methods: 'contentChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
optional: ['无图标','balancecar','图片'],
|
||||
methods: 'iconChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '关闭时间',
|
||||
optional: ['默认','5000'],
|
||||
methods: 'durationChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 弹出Toast
|
||||
showToast() {
|
||||
this.openToast()
|
||||
},
|
||||
// 切换Toast标题
|
||||
titleChange(event) {
|
||||
this.title = event.index === 0 ? '' : '提示信息'
|
||||
this.openToast()
|
||||
},
|
||||
// 切换Toast内容
|
||||
contentChange(event) {
|
||||
this.content = event.index === 0 ? '' : '欢迎使用图鸟UI'
|
||||
this.openToast()
|
||||
},
|
||||
// 切换Toast图标
|
||||
iconChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.icon = ''
|
||||
this.image = ''
|
||||
break
|
||||
case 1:
|
||||
this.icon = event.name
|
||||
this.image = ''
|
||||
break
|
||||
case 2:
|
||||
this.icon = ''
|
||||
this.image = '/static/logo1.png'
|
||||
break
|
||||
}
|
||||
this.openToast()
|
||||
},
|
||||
// 切换Toast关闭时间
|
||||
durationChange(event) {
|
||||
this.duration = event.index === 0 ? 2000 : Number(event.name)
|
||||
this.openToast()
|
||||
},
|
||||
|
||||
|
||||
// 打开Toast
|
||||
openToast() {
|
||||
this.$refs.toast.show({
|
||||
title: this.title,
|
||||
content: this.content,
|
||||
icon: this.icon,
|
||||
image: this.image,
|
||||
duration: this.duration
|
||||
})
|
||||
},
|
||||
// 关闭Toast
|
||||
closedToast() {
|
||||
this.$t.messageUtils.toast('Toast关闭')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
|
||||
<view class="components-verification_code">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>验证码倒计时</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-wrap">
|
||||
<view style="width: 100%;">
|
||||
<tn-form :labelWidth="120" :borderBottom="true">
|
||||
<tn-form-item label="验证码">
|
||||
<tn-input></tn-input>
|
||||
<view slot="right">
|
||||
<tn-button fontColor="tn-color-white" @click="getCode">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
</view>
|
||||
<view style="width: 100%;">
|
||||
<tn-button width="100%" backgroundColor="tn-bg-red" fontColor="tn-color-white" margin="30rpx 0 0 0" style="width: 100%;" @click="reset">重置</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- verification-code -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
:keepRunning="keepRunning"
|
||||
:seconds="seconds"
|
||||
:startText="startText"
|
||||
:countDownText="countDownText"
|
||||
:endText="endText"
|
||||
@end="codeEnd"
|
||||
@start="codeStart"
|
||||
@change="codeChange"
|
||||
>
|
||||
</tn-verification-code>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
|
||||
export default {
|
||||
name: 'componentsVerificationCode',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
tips: '获取验证码',
|
||||
keepRunning: true,
|
||||
seconds: 60,
|
||||
startText: '获取验证码',
|
||||
countDownText: 's秒后重新获取',
|
||||
endText: '重新获取',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-verification-code组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '倒计时间',
|
||||
optional: ['60s','30s','5s'],
|
||||
methods: 'secondsChange'
|
||||
},
|
||||
{
|
||||
title: '退出后保持运行',
|
||||
optional: ['是','否'],
|
||||
methods: 'keepRunningChange'
|
||||
},
|
||||
{
|
||||
title: '自定义提示语',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customTitleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换倒计时间
|
||||
secondsChange(event) {
|
||||
this.seconds = Number(event.name.replace('s',''))
|
||||
},
|
||||
// 切换是否保持
|
||||
keepRunningChange(event) {
|
||||
this.keepRunning = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换是否使用自定义提示语
|
||||
customTitleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.startText = '点击获取验证码'
|
||||
this.countDownText = '重新获取s秒后'
|
||||
this.endText = '再次获取'
|
||||
break
|
||||
case 1:
|
||||
this.startText = '获取验证码'
|
||||
this.countDownText = 's秒后重新获取'
|
||||
this.endText = '重新获取'
|
||||
break
|
||||
}
|
||||
this.reset()
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
|
||||
// 重置验证码
|
||||
reset() {
|
||||
this.$refs.code.reset()
|
||||
},
|
||||
|
||||
// 开始倒计时
|
||||
codeStart() {
|
||||
this.$t.messageUtils.toast('倒计时开始')
|
||||
},
|
||||
// 结束倒计时
|
||||
codeEnd() {
|
||||
this.$t.messageUtils.toast('倒计时结束')
|
||||
},
|
||||
// 正在倒计时
|
||||
codeChange(event) {
|
||||
this.tips = event
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user