mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 04:23:17 +08:00
更新众多VIP页面模板
This commit is contained in:
kert
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="vip-component-cascade-selection tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>级联选择</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础">
|
||||
<tn-cascade-selection :list="list" @complete="handleCompleteSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置默认值">
|
||||
<tn-cascade-selection :list="list" :defaultValue="defaultValue" @complete="handleCompleteSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="异步加载">
|
||||
<tn-cascade-selection :list="asyncList" request :receiveData="receiveData" @complete="handleCompleteSelection2" @change="handleChangeSelection"></tn-cascade-selection>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
import city from '../../static/mock/cascade-city.js'
|
||||
export default {
|
||||
name: 'VipComponentsCascadeSelection',
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: city,
|
||||
asyncList: [
|
||||
{
|
||||
text: '总经办',
|
||||
subText: '10人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: '财务',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: '采购',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
text: '销售',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
text: '售后',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
text: '研发',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
text: '质检',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
text: '生产',
|
||||
subText: '30人',
|
||||
src: '/static/favicon.ico',
|
||||
value: 8
|
||||
}
|
||||
],
|
||||
receiveData: [],
|
||||
defaultValue: ['440000','440100','440113']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理完成选中回调
|
||||
handleCompleteSelection(e) {
|
||||
this.$tn.message.toast(e.text)
|
||||
},
|
||||
// 处理异步请求完成选中回调
|
||||
handleCompleteSelection2(e) {
|
||||
this.$tn.message.toast(e.text)
|
||||
},
|
||||
// 处理异步请求列切换
|
||||
handleChangeSelection(e) {
|
||||
const {
|
||||
index,
|
||||
text,
|
||||
value
|
||||
} = e
|
||||
if (index === 7) {
|
||||
//实际中以请求数据为准，无下级数据则传空数组
|
||||
this.receiveData = []
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '请求中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
//请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
|
||||
switch (index) {
|
||||
case 0:
|
||||
const data = []
|
||||
for (let i = 0; i < (value === 1 ? 10 : 30); i++) {
|
||||
data.push({
|
||||
text: text + '员工' + (i + 1),
|
||||
subText: i % 2 === 0 ? '男' : '女',
|
||||
value: Number(value + i + '')
|
||||
})
|
||||
}
|
||||
this.receiveData = data
|
||||
break
|
||||
case 1:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '他说',
|
||||
value: 0
|
||||
},{
|
||||
text: '她说',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 2:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '我要加工资',
|
||||
value: 0
|
||||
},{
|
||||
text: '我要加班班',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 3:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '老板回复',
|
||||
value: 0
|
||||
},{
|
||||
text: '直接辞退',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 4:
|
||||
if (value === 0) {
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '等明年吧',
|
||||
value: 0
|
||||
},{
|
||||
text: '批准',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.receiveData = []
|
||||
}
|
||||
break
|
||||
case 5:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '巴拉巴拉',
|
||||
value: 0
|
||||
},{
|
||||
text: '沉默了啊',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 6:
|
||||
this.receiveData = [
|
||||
{
|
||||
text: '结束了',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
break
|
||||
}
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-cascade-selection {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="vip-component-cropper">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Cropper图片裁剪</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="cropper-options">
|
||||
<view class="cropper-options__item" @tap="chooseImage">选择图片</view>
|
||||
<view class="cropper-options__item" @tap="switchBorderRect">{{ switchText }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<tn-cropper
|
||||
:imageUrl="imageUrl"
|
||||
:isRound="isRound"
|
||||
@cropper="cropperFinish"
|
||||
></tn-cropper>
|
||||
|
||||
<tn-popup
|
||||
v-model="showCropperImage"
|
||||
:marginTop="vuex_custom_bar_height"
|
||||
length="80%"
|
||||
mode="center"
|
||||
:closeBtn="true"
|
||||
>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-center" style="margin: 40rpx 60rpx;">
|
||||
<image :src="cropperImageUrl" style="width: 80%;" mode="widthFix"></image>
|
||||
</view>
|
||||
</tn-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
export default {
|
||||
name: 'vipComponentCropper',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
imageUrl: '',
|
||||
isRound: false,
|
||||
switchText: '切换为圆形裁剪框',
|
||||
showCropperImage: false,
|
||||
cropperImageUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album','camera'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths[0]
|
||||
this.imageUrl = tempFilePaths
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换裁剪框形状
|
||||
switchBorderRect() {
|
||||
this.isRound = !this.isRound
|
||||
if (this.isRound) {
|
||||
this.switchText = '切换为正方形裁剪框'
|
||||
} else {
|
||||
this.switchText = '切换为圆形裁剪框'
|
||||
}
|
||||
},
|
||||
// 裁剪完成
|
||||
cropperFinish(res) {
|
||||
// console.log(res);
|
||||
this.showCropperImage = true
|
||||
if (res.url) {
|
||||
this.cropperImageUrl = res.url
|
||||
}
|
||||
if (res.base64) {
|
||||
this.cropperImageUrl = `${res.base64}`
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cropper-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
margin-top: 80rpx;
|
||||
|
||||
&__item {
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
padding: 18rpx 36rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
z-index: 1000;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图鸟轮播(横向)</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-custom-swiper
|
||||
class="swiper"
|
||||
:current="current"
|
||||
:intervel="3000"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
indicatorType="round"
|
||||
:indicator="true"
|
||||
indicatorPosition="topCenter"
|
||||
indicatorActiveColor="#838383"
|
||||
:customSwiperStyle="customSwiperStyle"
|
||||
:prevSwiperStyle="prevSwiperStyle"
|
||||
:nextSwiperStyle="nextSwiperStyle"
|
||||
>
|
||||
<block v-for="(item, index) in swiperList" :key="index">
|
||||
<tn-custom-swiper-item class="swiper__item">
|
||||
<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
|
||||
<view class="text">{{ item.title }}</view>
|
||||
</tn-custom-swiper-item>
|
||||
</block>
|
||||
</tn-custom-swiper>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentCustomHorizontalSwiper',
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperList: [
|
||||
{
|
||||
title: '图鸟UI 会员促销1',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销2',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销3',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销4',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI 会员促销5',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
}
|
||||
],
|
||||
// 当前swiper的自定义样式
|
||||
customSwiperStyle: {
|
||||
transform: 'scale(0.7)',
|
||||
transformOrigin: 'center center',
|
||||
transition: 'all 0.5s ease-out',
|
||||
left: '0px'
|
||||
},
|
||||
// 前一个swiper的自定义样式
|
||||
prevSwiperStyle: {
|
||||
transform: 'scale(0.8) perspective(200rpx) rotateY(-10deg) translateZ(-280rpx)',
|
||||
left: '280rpx'
|
||||
},
|
||||
// 后一个swiper的自定义样式
|
||||
nextSwiperStyle: {
|
||||
transform: 'scale(0.8) perspective(200rpx) rotateY(10deg) translateZ(-280rpx)',
|
||||
left: '-280rpx'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-custom-swiper--horizontal {
|
||||
background-color: $tn-bg-gray-color;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 390rpx;
|
||||
display: block;
|
||||
|
||||
&__item {
|
||||
image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
font-size: 46rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图鸟轮播(实验)</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsCustomSwiper',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '横向滑动', desc: '横向滑动轮播', url: '/vipPage/components/custom-swiper/horizontal/custom-swiper' },
|
||||
{ title: '纵向滑动', desc: '纵向滑动轮播', url: '/vipPage/components/custom-swiper/vertical/custom-swiper' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图鸟轮播(纵向)</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="container" :style="{height: containerHeight + 'px'}">
|
||||
<tn-custom-swiper
|
||||
class="swiper"
|
||||
:current="0"
|
||||
:duration="450"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
:vertical="true"
|
||||
:indicator="true"
|
||||
indicatorType="round"
|
||||
indicatorPosition="topCenter"
|
||||
indicatorActiveColor="#838383"
|
||||
>
|
||||
<block v-for="(item, index) in swiperList" :key="index">
|
||||
<tn-custom-swiper-item class="swiper__item">
|
||||
<image :src="item.image" mode="heightFix"></image>
|
||||
<view class="text">{{ item.title }}</view>
|
||||
</tn-custom-swiper-item>
|
||||
</block>
|
||||
</tn-custom-swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentCustomVerticalSwiper',
|
||||
data() {
|
||||
return {
|
||||
containerHeight: 0,
|
||||
swiperList: [
|
||||
{
|
||||
title: '图鸟UI YYDS-1',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-2',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-3',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-4',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
},
|
||||
{
|
||||
title: '图鸟UI YYDS-5',
|
||||
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getContainerHeight()
|
||||
},
|
||||
methods: {
|
||||
// 获取可用区域的高度
|
||||
getContainerHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-custom-swiper--horizontal {
|
||||
background-color: $tn-bg-gray-color;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
font-size: 46rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-drag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Drag拖拽</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="operation">
|
||||
<view class="operation__item">
|
||||
<view class="operation__title">设置columns</view>
|
||||
<view class="operation__content">
|
||||
<view class="tn-margin-right">columns:</view>
|
||||
<tn-number-box v-model="columns" :min="3" :max="5" :disabledInput="true"></tn-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation__item">
|
||||
<view class="operation__title">设置固定项</view>
|
||||
<view class="operation__content">
|
||||
<view class="tn-margin-right">随机固定:</view>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="setFixed">随机固定</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="drag__wrap tn-margin-top">
|
||||
<tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
|
||||
<template slot-scope="{entity, height, fixed}">
|
||||
<view class="drag__item" :style="{height: `${height}rpx`}">
|
||||
<image :src="entity.url" :style="{height: `${height}rpx`}" mode="widthFix"></image>
|
||||
<view v-if="fixed" class="drag__item__fixed">Fixed</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-drag>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicDrag',
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
scrollTop: 0,
|
||||
columns: 3,
|
||||
itemHeight: 210,
|
||||
sliderValue: 3,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const list = []
|
||||
for (let i = 0; i < 15; i++) {
|
||||
list.push({
|
||||
url: i % 2 == 0 ? 'https://resource.tuniaokj.com/images/shop/bag1.jpg' : 'https://resource.tuniaokj.com/images/shop/bag2.jpg',
|
||||
fixed: false
|
||||
})
|
||||
}
|
||||
this.list = list
|
||||
},
|
||||
watch: {
|
||||
columns(val) {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0
|
||||
})
|
||||
this.itemHeight = [210, 160, 120][val - 3]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
onEnd(data) {
|
||||
console.log(data.data);
|
||||
},
|
||||
// 设置动态固定项
|
||||
setFixed() {
|
||||
const rand = Math.floor(Math.random() * (15 - 1))
|
||||
console.log(rand);
|
||||
this.list.forEach((item) => {
|
||||
item.fixed = false
|
||||
})
|
||||
this.list[rand].fixed = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 100rpx;
|
||||
margin-top: 100rpx;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid #F6F6F6;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>列表排序长按拖拽</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="tn-bg-gray--light" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
|
||||
|
||||
<view class="drag__wrap tn-margin-top-sm tn-padding-bottom-xl">
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;background-color: #FFFFFF;margin: 10rpx;border-radius: 10rpx;">
|
||||
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||
推荐
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<text class="tn-icon-expand tn-text-xl tn-color-gray--disabled"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
|
||||
<template slot-scope="{entity, height}">
|
||||
<view class="drag__item" :style="{height: `${height}rpx`}">
|
||||
<view class="drag__item__name">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;">
|
||||
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||
{{entity.name}}
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<text class="tn-icon-expand tn-text-xl"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-drag>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateSet',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{name: '商城'},
|
||||
{name: '关注'},
|
||||
{name: '团购'},
|
||||
{name: '同城'},
|
||||
{name: '经验'},
|
||||
{name: '视频'},
|
||||
{name: '直播'},
|
||||
{name: '热点'},
|
||||
{name: '治愈'}
|
||||
],
|
||||
scrollTop: 0,
|
||||
columns: 1,
|
||||
itemHeight: 120,
|
||||
sliderValue: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
onEnd(data) {
|
||||
// console.log(data.data);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: #FF5656;
|
||||
box-sizing: border-box;
|
||||
padding: 10rpx;
|
||||
// border: 1rpx solid #000000;
|
||||
position: relative;
|
||||
|
||||
&__fixed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="vip-component-upload-image-drag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="drag__wrap tn-margin-top">
|
||||
<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
|
||||
:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
|
||||
:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
|
||||
:customBtn="customBtn" @sort-list="onSortList" />
|
||||
<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>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentUploadImageDrag',
|
||||
data() {
|
||||
return {
|
||||
action: 'https://www.hualigs.cn/api/upload',
|
||||
// action: '',
|
||||
formData: {
|
||||
apiType: 'this,ali',
|
||||
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
|
||||
image: null
|
||||
},
|
||||
fileList: [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
|
||||
}],
|
||||
showUploadList: true,
|
||||
customBtn: false,
|
||||
autoUpload: true,
|
||||
showProgress: true,
|
||||
deleteable: true,
|
||||
customStyle: false,
|
||||
maxCount: 9,
|
||||
disabled: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.pushFileList().then(res=>{
|
||||
this.fileList=[...this.fileList,...res]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//模拟异步获取数据
|
||||
async pushFileList() {
|
||||
return [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
|
||||
}]
|
||||
},
|
||||
// 手动上传文件
|
||||
upload() {
|
||||
this.$refs.imageUpload.upload()
|
||||
},
|
||||
// 手动清空列表
|
||||
clear() {
|
||||
this.$refs.imageUpload.clear()
|
||||
},
|
||||
// 图片拖拽重新排序
|
||||
onSortList(list) {
|
||||
console.log(list);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-scroll-view">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-scroll-view
|
||||
:customNavHeight="vuex_custom_bar_height"
|
||||
:refreshState="refreshState"
|
||||
@refresh="handleRefresh"
|
||||
>
|
||||
<view class="scroll-view__content">
|
||||
<block v-for="i in 10" :key="i">
|
||||
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
|
||||
<view class="list__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
|
||||
</view>
|
||||
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
|
||||
<view class="list__content__title">tuniaoUI</view>
|
||||
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicScrollView',
|
||||
data() {
|
||||
return {
|
||||
refreshState: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理触发刷新事件
|
||||
handleRefresh() {
|
||||
this.refreshState = true
|
||||
setTimeout(() => {
|
||||
this.refreshState = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-view {
|
||||
|
||||
&__content {
|
||||
|
||||
.list {
|
||||
&__item {
|
||||
height: 140rpx;
|
||||
margin: 0 10rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 16rpx;
|
||||
height: 100%;
|
||||
width: 580rpx;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
&__desc {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="vip-component-basic-scroll-view">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-scroll-view
|
||||
:customNavHeight="vuex_custom_bar_height"
|
||||
:refreshState="refreshState"
|
||||
@refresh="handleRefresh"
|
||||
@refreshReady="handleRefreshReady"
|
||||
@refreshStop="resetRefresh"
|
||||
>
|
||||
<template v-slot:pulldown>
|
||||
<view class="refresh">
|
||||
<view class="refresh__icon" :class="[`tn-icon-down-arrow`, {'refresh__icon--revolve': refreshIconRevolve}]"></view>
|
||||
<view class="refresh__text">{{ refreshText }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="scroll-view__content">
|
||||
<block v-for="i in 10" :key="i">
|
||||
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
|
||||
<view class="list__image">
|
||||
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
|
||||
</view>
|
||||
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
|
||||
<view class="list__content__title">tuniaoUI</view>
|
||||
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentBasicScrollView',
|
||||
data() {
|
||||
return {
|
||||
refreshState: false,
|
||||
refreshText: '下拉刷新',
|
||||
refreshIconRevolve: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理触发刷新事件
|
||||
handleRefresh() {
|
||||
this.refreshState = true
|
||||
this.refreshText = '正在刷新'
|
||||
setTimeout(() => {
|
||||
this.refreshState = false
|
||||
this.resetRefresh()
|
||||
}, 2000)
|
||||
},
|
||||
// 处理刷新准备事件
|
||||
handleRefreshReady() {
|
||||
this.refreshText = '松开刷新'
|
||||
this.refreshIconRevolve = true
|
||||
},
|
||||
// 重置刷新
|
||||
resetRefresh() {
|
||||
this.refreshText = '下拉刷新'
|
||||
this.refreshIconRevolve = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-view {
|
||||
|
||||
&__content {
|
||||
|
||||
.list {
|
||||
&__item {
|
||||
height: 140rpx;
|
||||
margin: 0 10rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 16rpx;
|
||||
height: 100%;
|
||||
width: 580rpx;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
&__desc {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
transition: transform 0.25s ease-in-out;
|
||||
transform-origin: center center;
|
||||
&--revolve {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="vip-component-scroll-view">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsScrollView',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通下拉加载', desc: '使用默认的下拉样式', url: '/vipPage/components/scroll-view/basic/scroll-view' },
|
||||
{ title: '自定义下拉加载', desc: '通过传递的事件自定义下拉样式', url: '/vipPage/components/scroll-view/custom/scroll-view' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="vip-component-stack-swiper tn-safe-area-inset-bottom">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>StackSwiper堆叠轮播</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础使用">
|
||||
<tn-stack-swiper :list="list"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自动轮播">
|
||||
<tn-stack-swiper :list="list" :autoplay="autoplay"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="切换阈值">
|
||||
<tn-stack-swiper :list="list" :switchRate="50"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="修改轮播图的宽高">
|
||||
<tn-stack-swiper :list="list" :height="300" width="80%"></tn-stack-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="垂直堆叠轮播">
|
||||
<view class="tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="navVerticalStackSwiper">演示(建议全屏使用)</tn-button>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentStackSwiper',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
list: [
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg'},
|
||||
{image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg'}
|
||||
]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 一定要这样，否者会导致定时器不工作
|
||||
this.autoplay = true
|
||||
},
|
||||
onHide() {
|
||||
this.autoplay = false
|
||||
},
|
||||
methods: {
|
||||
navVerticalStackSwiper() {
|
||||
uni.navigateTo({
|
||||
url: '/vipPage/home/card/card'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-stack-swiper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式1">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="index === 2 ? 16 : 8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="idx === 2 ? 16 : 8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式2">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :grow="index === 2" :width="['90px','160rpx','auto'][index]" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :grow="idx === 2" :width="['90px','160rpx','auto'][idx]" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="right" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐之文字右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" textAlign="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="去掉纵向边框">
|
||||
<tn-table :borderRight="true">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :borderRight="false" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :borderRight="false" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="无边框">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-table borderColor="#FFFFFF">
|
||||
<tn-tr backgroundColor="transparent" borderColor="#FFFFFF" fontColor="#01BEFF" :fontSize="34">
|
||||
<tn-td v-for="(item, index) in header" :key="index" borderColor="#FFFFFF" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" backgroundColor="transparent" borderColor="#FFFFFF">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" borderColor="#FFFFFF" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="文字超出隐藏">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :ellipsis="true" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsBasicTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__basic {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">图鸟UI 2月开发进度</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">页面模板</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">博客页面</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">炫酷首页</tn-td>
|
||||
<tn-td :span="16" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员需求</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="12" borderWidth="1rpx">功能首页</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="12" borderWidth="1rpx">短视频页面</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">组件开发</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">免费组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right" borderWidth="1rpx">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :bold="true" :span="8">合计</tn-td>
|
||||
<tn-td alignItems="right" :span="16">16天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsComplexTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__complex {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-column">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定列表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格叠加">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="index === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="index !== 0"
|
||||
:fixed="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="idx === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="idx !== 0"
|
||||
:fixed="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:hidden="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:hidden="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格叠加-多列">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="[0,1].includes(index) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(index)"
|
||||
:fixed="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="[0,1].includes(idx) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(idx)"
|
||||
:fixed="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:hidden="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:hidden="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedColumnTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '销售金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '顾客数量', key: 'customers' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', customers: '600', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', customers: '2000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', customers: '1500', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-column {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定头部表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view>
|
||||
<tn-table :borderTop="false" :borderLeft="false">
|
||||
<tn-tr :fixed="true" :borderTop="true" :top="vuex_custom_bar_height + 'px'">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :margin="index === 0 ? '48rpx 0 0 0' : ''">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</view>
|
||||
|
||||
<demo-title title="配合scroll-view使用">
|
||||
<tn-table>
|
||||
<tn-tr left="32rpx" right="30rpx" width="auto">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<scroll-view style="height: 400px" scroll-y>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</scroll-view>
|
||||
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 4, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 5, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 6, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 7, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 8, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 9, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 10, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 11, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 12, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 13, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 14, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 15, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 16, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 17, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 18, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 19, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 20, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 21, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 22, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 23, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 24, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view class="vip-component-table tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>表格</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsTable',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通表格', desc: '表格基本使用', url: '/vipPage/components/table/basic/index' },
|
||||
{ title: '斑马纹表格', desc: '带斑马纹的表格', url: '/vipPage/components/table/stripe/index' },
|
||||
{ title: '固定头部表格', desc: '固定头部表格', url: '/vipPage/components/table/fixed-header/index' },
|
||||
{ title: '固定列表格', desc: '固定列表格', url: '/vipPage/components/table/fixed-column/index' },
|
||||
{ title: '多表头表格', desc: '多表头表格', url: '/vipPage/components/table/multi-header/index' },
|
||||
{ title: '复杂表格', desc: '复杂表格', url: '/vipPage/components/table/complex/index' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view class="vip-components-table__multi-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>多表头表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="多表头表格">
|
||||
<tn-table>
|
||||
<tn-tr backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" :span="6">日期</tn-td>
|
||||
<tn-td :borderRight="true" :bold="true" :span="12" :ellipsis="true" padding="0">
|
||||
<tn-td :bold="true" :borderBottom="true" :borderRight="false" alignItems="center">金额</tn-td>
|
||||
<tn-tr borderWidth="0" backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" alignItems="center" borderWidth="1rpx">金额</tn-td>
|
||||
<tn-td :bold="true" alignItems="center">收益</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
<tn-td :span="6">备注</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="6" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsMultiHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__multi-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="vip-components-table__stripe">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>斑马纹表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格样式-1">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? '#FFFFFF' : '#E6E6E6'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格样式-2">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? 'tn-bg-green--light' : 'tn-bg-red--light'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsStripeTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__stripe {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view class="vip-component-tree-view tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>树形菜单</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="基础">
|
||||
<tn-tree-view :treeData="treeData" @click="onClick"></tn-tree-view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentTreeView',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
treeData: [{
|
||||
text: 'TuniaoUI',
|
||||
value: 1,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: false,
|
||||
children: [{
|
||||
text: 'tn-button',
|
||||
value: 10,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: false,
|
||||
children: [{
|
||||
text: 'tn-button.vue',
|
||||
value: 100,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-button.js',
|
||||
value: 101,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-button.css',
|
||||
value: 102,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-avatar',
|
||||
value: 11,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-avatar.vue',
|
||||
value: 110,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-avatar.js',
|
||||
value: 111,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-avatar.css',
|
||||
value: 112,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-icon',
|
||||
value: 12,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-icon.vue',
|
||||
value: 120,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-icon.js',
|
||||
value: 121,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-icon.css',
|
||||
value: 122,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
},{
|
||||
text: 'tn-navbar',
|
||||
value: 13,
|
||||
image: '/vipPage/static/images/tree_view/folder.png',
|
||||
activeImage: '/vipPage/static/images/tree_view/folder_open.png',
|
||||
collapsed: true,
|
||||
children: [{
|
||||
text: 'tn-navbar.vue',
|
||||
value: 130,
|
||||
image: '/vipPage/static/images/tree_view/file_vue.png'
|
||||
},{
|
||||
text: 'tn-navbar.js',
|
||||
value: 131,
|
||||
image: '/vipPage/static/images/tree_view/file_js.png'
|
||||
},{
|
||||
text: 'tn-navbar.css',
|
||||
value: 132,
|
||||
image: '/vipPage/static/images/tree_view/file_css.png'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$tn.message.toast(`点击了${e.text}节点`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="vip-component-waterfall">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>瀑布流</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-padding">
|
||||
<tn-waterfall ref="waterfall" v-model="list" @finish="handleWaterFallFinish">
|
||||
<template v-slot:left="{ leftList }">
|
||||
<view v-for="(item, index) in leftList" :key="item.id" class="product__item">
|
||||
<view class="item__image">
|
||||
<tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
|
||||
</view>
|
||||
<view class="item__data">
|
||||
<view class="item__title-container">
|
||||
<view v-if="item.newProduct" class="item__store-type tn-cool-bg-color-8">图鸟趋势</view>
|
||||
<view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
|
||||
<text class="item__title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view v-if="item.tags && item.tags.length > 0" class="item__tags-container">
|
||||
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
|
||||
</view>
|
||||
<view class="item__price-container">
|
||||
<text class="item__price--unit">￥</text>
|
||||
<text class="item__price--integer">{{ item.priceInteger }}</text>
|
||||
<text class="item__price--dot">.</text>
|
||||
<text class="item__price--decimal">{{ item.priceDecimal }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{ rightList }">
|
||||
<view v-for="(item, index) in rightList" :key="item.id" class="product__item">
|
||||
<view class="item__image">
|
||||
<tn-lazy-load :threshold="-450" height="100%" :image="item.mainImage" :index="item.id" imgMode="widthFix"></tn-lazy-load>
|
||||
</view>
|
||||
<view class="item__data">
|
||||
<view class="item__title-container">
|
||||
<view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">自营</view>
|
||||
<text class="item__title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="item__tags-container">
|
||||
<view v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex" class="item__tag">{{ tagItem }}</view>
|
||||
</view>
|
||||
<view class="item__price-container">
|
||||
<text class="item__price--unit">￥</text>
|
||||
<text class="item__price--integer">{{ item.priceInteger }}</text>
|
||||
<text class="item__price--dot">.</text>
|
||||
<text class="item__price--decimal">{{ item.priceDecimal }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-waterfall>
|
||||
</view>
|
||||
|
||||
<tn-load-more :status="loadStatus"></tn-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadStatus: 'loadmore',
|
||||
list: [],
|
||||
data: [
|
||||
{
|
||||
title: '图鸟科技 设计师专属笔记本 告别卡慢热',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: ['满1000减80','免息'],
|
||||
price: 6999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 开发便携笔记本 告别笨重外出',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['免息'],
|
||||
price: 7999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 T10 宇宙9000 10G全网通',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: [],
|
||||
price: 4999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 T10Pro 宇宙9010 10G全网通',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/phonecase1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: true, // 是否为新品
|
||||
tags: [],
|
||||
price: 6999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 运动手表 不用插卡即可通话',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/watch1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: [],
|
||||
price: 2999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 页面设计 专为第三方提供精美酷炫页面',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
|
||||
storeType: 2, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['酷炫'],
|
||||
price: 10999
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 海报设计 想不到就过来聊聊吧',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
|
||||
storeType: 2, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['哎呀'],
|
||||
price: 399
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 环保袋',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/bag1.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['合作免费送'],
|
||||
price: 0
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 纸杯',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/cup2.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: ['合作免费送'],
|
||||
price: 0
|
||||
},
|
||||
{
|
||||
title: '图鸟科技 抱枕',
|
||||
mainImage: 'https://resource.tuniaokj.com/images/shop/pillow.jpg',
|
||||
storeType: 1, // 1 自营 2 第三方店铺
|
||||
newProduct: false, // 是否为新品
|
||||
tags: [],
|
||||
price: 99
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getRandomData()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getRandomData()
|
||||
},
|
||||
methods: {
|
||||
// 获取随机数据
|
||||
getRandomData() {
|
||||
this.loadStatus = 'loading'
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let index = this.$tn.number.randomInt(0, this.data.length - 1)
|
||||
let item = JSON.parse(JSON.stringify(this.data[index]))
|
||||
let price = this.getPrice(item.price)
|
||||
item.id = this.$tn.uuid()
|
||||
item.priceInteger = price[0]
|
||||
item.priceDecimal = price[1]
|
||||
this.list.push(item)
|
||||
}
|
||||
},
|
||||
// 瀑布流加载完毕事件
|
||||
handleWaterFallFinish() {
|
||||
this.loadStatus = 'loadmore'
|
||||
},
|
||||
// 获取价格整数和小数部分
|
||||
getPrice(price) {
|
||||
const priceStr = String(price)
|
||||
if (priceStr.indexOf('.') !== -1) {
|
||||
return priceStr.split('.')
|
||||
} else {
|
||||
return [priceStr, '00']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-component-waterfall {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.product__item {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin: 0 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.item {
|
||||
/* 图片 start */
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/* 图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__data {
|
||||
padding: 8rpx 14rpx;
|
||||
}
|
||||
|
||||
/* 标题 start */
|
||||
&__title-container {
|
||||
text-align: justify;
|
||||
line-height: 38rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&__store-type {
|
||||
height: 28rpx;
|
||||
font-size: 20rpx;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 6rpx;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
top: -2rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
&__title {
|
||||
|
||||
}
|
||||
/* 标题 end */
|
||||
|
||||
/* 标签 start */
|
||||
&__tags-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&__tag {
|
||||
margin-left: 10rpx;
|
||||
color: #E83A30;
|
||||
border: 2rpx solid #E83A30;
|
||||
padding: 0 6rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 20rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0rpx !important;
|
||||
}
|
||||
}
|
||||
/* 标签 end */
|
||||
|
||||
/* 价格 start */
|
||||
&__price-container {
|
||||
font-size: 24rpx;
|
||||
color: #E83A30;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__price {
|
||||
&--unit {
|
||||
|
||||
}
|
||||
&--integer {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
&--decimal {
|
||||
|
||||
}
|
||||
}
|
||||
/* 价格 end */
|
||||
/* 内容 end */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user