molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-06-06 19:44:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增10+页面模板

Browse Source 
新增form表单部分组件的演示代码

新增图标

添加第三方开发插件演示（所属权归属第三方）

新增tn-scroll-view下拉组件开发（会员）

新增tn-stack-swiper堆叠轮播添加垂直滚动属性（会员）

新增tn-waterfall瀑布流组件（会员）

新增tn-tree-view树形菜单组件（会员）

新增tn-cascade-selection级联选择组件（会员）

新增tn-custom-swiper组件（会员【实验室】）

新增tn-lazy-load懒加载组件

新增tn-load-more加载更多组件

新增tn-sekeleton骨架屏组件

新增tn-empty空白页组件

新增tn-landscape压屏窗组件

新增tn-verification-code-input验证码输入组件

新增tn-goods-nav商品导航组件

修复tn-slider在tn-form-item下在H5端无法滑动的bug

修复tn-swipe-action-item点击回调事件中无法读取name属性的bug

修复群友已反馈的bug

优化部分页面在iphone上底部确实的问题
This commit is contained in:
JaylenTech
2022-03-16 09:13:58 +08:00
parent 4883c3ff4c
commit 81579ccee5
56 changed files with 6297 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
basicPage/avatar/avatar.vue
+1 -1
View File
@@ -85,7 +85,7 @@
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
</view>
<view class="tn-margin-sm">
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
</view>
</view>
</demo-title>
basicPage/button/button.vue
+1 -1
View File
@@ -97,7 +97,7 @@
}
},
methods: {
},
}
}
</script>
basicPage/flex-layout/flex-layout.vue
+3
View File
@@ -434,6 +434,9 @@
return {
}
},
onLoad() {
},
methods: {
basicPage/icon/iconfont.js
+1 -1
View File
File diff suppressed because one or more lines are too long
common/config.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
baseUrl: 'http://api.youzixy.com'
}
componentsPage/check-box/check-box.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<view class="components-check-box tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>按钮</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox>
<tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox>
</demo-title>
<demo-title title="圆形选框">
<tn-checkbox-group shape="circle">
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group>
</demo-title>
<demo-title title="竖直排列">
<tn-checkbox-group width="100%" wrap>
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group>
</demo-title>
<demo-title title="禁止点击标签">
<tn-checkbox-group disabledLabel>
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group>
</demo-title>
<demo-title title="自定义尺寸">
<view>
<tn-checkbox-group :size="26" :iconSize="18">
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox>
</tn-checkbox-group>
</view>
<view class="tn-margin-top">
<tn-checkbox-group :size="46" :iconSize="40">
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3">选项3</tn-checkbox>
</tn-checkbox-group>
</view>
</demo-title>
<demo-title title="自定义颜色">
<tn-checkbox-group activeColor="#31E749">
<tn-checkbox name="选项1">选项1</tn-checkbox>
<tn-checkbox name="选项2">选项2</tn-checkbox>
<tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox>
</tn-checkbox-group>
</demo-title>
<demo-title title="自定义图标">
<tn-checkbox-group>
<tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox>
<tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox>
<tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox>
</tn-checkbox-group>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'ComponentsCheckBox',
components: {demoTitle},
data() {
return {
value1: false,
value2: false
}
}
}
</script>
<style lang="scss" scoped>
</style>
componentsPage/empty/empty.vue
+101
View File
@@ -0,0 +1,101 @@
<template>
<view class="components-empty tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>空页面</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="内置图标">
<block v-for="(item, index) in inlineMode" :key="index">
<view class="empty__item">
<tn-empty :mode="item"></tn-empty>
</view>
</block>
</demo-title>
<demo-title title="自定义图标">
<view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静"></tn-empty>
</view>
</demo-title>
<demo-title title="自定义图片">
<view class="empty__item">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty>
</view>
<block v-for="(value, key, index) in imgEmpty" :key="index">
<view class="empty__item">
<tn-empty :icon="value" :mode="key"></tn-empty>
</view>
</block>
</demo-title>
<demo-title title="隐藏文字">
<view class="empty__item">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty>
</view>
<view class="empty__item tn-margin-top">
<tn-empty icon="help" mode=""></tn-empty>
</view>
</demo-title>
<demo-title title="带跳转按钮">
<view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button>
</tn-empty>
</view>
</demo-title>
<demo-title title="自定义样式">
<view class="empty__item">
<tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
</view>
<view class="empty__item tn-margin-top">
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
</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: 'ComponentsEmpty',
components: { demoTitle },
data() {
return {
inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'],
imgEmpty: {
cart: '/componentsPage/static/images/empty/cart.jpg',
comment: '/componentsPage/static/images/empty/comment.jpg',
data: '/componentsPage/static/images/empty/data.jpg',
network: '/componentsPage/static/images/empty/network.jpg',
page: '/componentsPage/static/images/empty/page.jpg',
permission: '/componentsPage/static/images/empty/permission.jpg',
search: '/componentsPage/static/images/empty/search.jpg'
}
}
}
}
</script>
<style lang="scss" scoped>
.components-empty {
background-color: $tn-bg-gray-color;
}
.empty {
&__item {
background-color: #FFFFFF;
padding: 20rpx 0;
}
}
</style>
componentsPage/goods-nav/goods-nav.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<view class="components-goods-nav tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>商品导航</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-goods-nav></tn-goods-nav>
</demo-title>
<demo-title title="选项设置为头像">
<tn-goods-nav :options="avatarOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置角标">
<tn-goods-nav :options="countOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置边距按钮">
<tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
</demo-title>
<demo-title title="设置圆角按钮">
<tn-goods-nav buttonType="round"></tn-goods-nav>
</demo-title>
<demo-title title="不设置选项">
<tn-goods-nav :options="[]"></tn-goods-nav>
</demo-title>
<demo-title title="自定义颜色">
<tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
</demo-title>
<demo-title title="固定在底部">
<tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
</demo-title>
<view style="padding-bottom: 88rpx;"></view>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'ComponentsGoodsNav',
components: { demoTitle },
data() {
return {
avatarOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
},{
icon: 'service',
text: '客服'
},{
icon: 'star',
text: '收藏'
}],
countOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
count: 10
},{
icon: 'service',
text: '客服',
count: 100
},{
icon: 'star',
text: '收藏'
}],
customOptions: [{
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
count: 10,
countBackgroundColor: '#E83A30'
},{
icon: 'service',
text: '客服',
count: 100,
countBackgroundColor: 'transparent',
countFontColor: '#E83A30'
},{
icon: 'star',
text: '收藏',
iconColor: '#838383',
fontColor: '#080808'
}],
customButtonGroups: [{
text: '加入购物车',
backgroundColor: 'tn-cool-bg-color-8',
color: '#FFFFFF'
},{
text: '结算',
backgroundColor: 'tn-cool-bg-color-8--reverse',
color: '#FFFFFF'
}]
}
},
methods: {
// 选项点击事件
onOptionClick(e) {
this.$t.messageUtils.toast(`点击了第${e.index}个选项`)
},
// 按钮点击事件
onButtonClick(e) {
this.$t.messageUtils.toast(`点击了第${e.index}个按钮`)
}
}
}
</script>
<style lang="scss" scoped>
.components-goods-nav {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
componentsPage/input/input.vue
+231
View File
@@ -0,0 +1,231 @@
<template>
<view class="components-input tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Input输入框</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view>
<view class="content__data tn-flex-1">
<tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="禁止输入" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" disabled></tn-input>
</view>
</view>
</demo-title>
<demo-title title="对齐方式" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">居中对齐</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">右对齐</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="边框" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" border></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">文本</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="右边显示图标" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本</view>
<view class="content__data tn-flex-1">
<tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="文本域" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">文本域</view>
<view class="content__data tn-flex-1">
<tn-input type="textarea" placeholder="请输入文本"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="内置类型" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">整数</view>
<view class="content__data tn-flex-1">
<tn-input type="number" placeholder="请输入整数"></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">小数</view>
<view class="content__data tn-flex-1">
<tn-input type="digit" placeholder="请输入小数"></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">身份证</view>
<view class="content__data tn-flex-1">
<tn-input type="idcard" placeholder="请输入身份证"></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">电话号码</view>
<view class="content__data tn-flex-1">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="密码输入框" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
<view class="content__title">密码</view>
<view class="content__data tn-flex-1">
<tn-input type="password" placeholder="请输入密码"></tn-input>
</view>
</view>
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">密码</view>
<view class="content__data tn-flex-1">
<tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="弹出选择" :contentPadding="false">
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
<view class="content__title">业务</view>
<view class="content__data tn-flex-1">
<tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
</view>
</view>
</demo-title>
<demo-title title="配合formItem使用" :contentPadding="false">
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="姓名">
<tn-input type="text" placeholder="请输入姓名"></tn-input>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="姓名" labelPosition="top" required>
<tn-input type="text" placeholder="请输入姓名"></tn-input>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="center">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="right">
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="验证码" :labelWidth="200">
<tn-input type="text" placeholder="请输入验证码"></tn-input>
<tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button>
</tn-form-item>
</view>
<view class="content tn-padding-left tn-padding-right">
<tn-form-item label="身份证" :labelWidth="200" leftIcon="identity">
<tn-input type="idcard" placeholder="请输入身份证号码"></tn-input>
</tn-form-item>
</view>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
<!-- 业务类型select -->
<tn-select
v-model="selectShow"
mode="single"
:list="selectList"
@confirm="businessSelectConfirm"
></tn-select>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'ComponentsInput',
components: { demoTitle },
data() {
return {
inputValue: '',
selectShow: false,
selectList: [
{
label: '免费',
value: 1101
},
{
label: '会员',
value: 1102
},
{
label: '全新开发',
value: 1103
}
]
}
},
methods: {
businessSelectConfirm() {
}
}
}
</script>
<style lang="scss" scoped>
.components-input {
background-color: $tn-bg-gray-color;
min-height: 100vh;
.content {
background-color: #FFFFFF;
&__title {
padding: 30rpx;
}
&__data {
margin: 10rpx 0;
margin-right: 30rpx;
}
}
}
</style>
componentsPage/landscape/landscape.vue
+185
View File
@@ -0,0 +1,185 @@
<template>
<view class="components-landscape">
<!-- 顶部自定义导航 -->
<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">
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view>
</dynamic-demo-template>
</view>
<!-- 压屏窗-->
<tn-landscape
:show="show"
:closeBtn="closeBtn"
:closeColor="closeColor"
:closeSize="closeSize"
:closePosition="closePosition"
:closeTop="closeTop"
:closeRight="closeRight"
:closeBottom="closeBottom"
:closeLeft="closeLeft"
:mask="mask"
:maskCloseable="maskCloseable"
@close="closeLandscape"
>
<image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image>
</tn-landscape>
</view>
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default {
name: 'ComponentsLandscape',
components: {dynamicDemoTemplate},
data() {
return {
show: false,
closeBtn: true,
closeColor: '',
closeSize: 0,
closePosition: 'rightTop',
closeTop: 0,
closeRight: 0,
closeBottom: 0,
closeLeft: 0,
mask: true,
maskCloseable: true,
tips: ['无需依赖额外的样式文件','使用tn-landscape组件'],
sectionList: [
{
name: '参数切换',
section: [
{
title: '关闭按钮',
optional: ['显示','隐藏'],
methods: 'closeBtnChange'
},
{
title: '关闭按钮位置',
optional: ['左上','右上','底部'],
methods: 'closePositionChange',
current: 1
},
{
title: '自定义关闭按钮',
optional: ['默认','自定义'],
methods: 'customCloseChange'
},
{
title: '遮罩',
optional: ['显示','隐藏'],
methods: 'maskChange'
},
{
title: '点击遮罩关闭',
optional: ['允许','不允许'],
methods: 'maskCloseableChange'
}
]
}
]
}
},
methods: {
click(event) {
this[event.methods] && this[event.methods](event)
},
// 弹出压屏窗
showLandscape() {
this.openLandscape()
},
// 切换关闭按钮显示隐藏
closeBtnChange(event) {
switch (event.index) {
case 0:
this.closeBtn = true
this.$refs.demoTemplate.updateSectionBtnsState([1,2], true)
break
case 1:
this.closeBtn = false
this.$refs.demoTemplate.updateSectionBtnsState([1,2], false)
break
}
this.openLandscape()
},
// 切换关闭按钮位置
closePositionChange(event) {
switch (event.index) {
case 0:
this.closePosition = 'leftTop'
break
case 1:
this.closePosition = 'rightTop'
break
case 2:
this.closePosition = 'bottom'
break
}
this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0)
this.customCloseChange({index: 0})
this.openLandscape()
},
// 切换自定义关闭按钮样式
customCloseChange(event) {
if (event.index === 0) {
this.closeTop = 0
this.closeRight = 0
this.closeBottom = 0
this.closeLeft = 0
this.closeColor = ''
this.closeSize = 0
} else if (event.index === 1) {
if (this.closePosition === 'leftTop') {
this.closeTop = -40
this.closeLeft = 30
} else if (this.closePosition === 'rightTop') {
this.closeTop = -40
this.closeRight = 30
} else if (this.closePosition === 'bottom') {
this.closeBottom = -60
}
this.closeColor = '#E83A30'
this.closeSize = 60
}
this.openLandscape()
},
// 切换遮罩显示隐藏
maskChange(event) {
this.mask = event.index === 0 ? true : false
this.openLandscape()
},
// 切换遮罩关闭状态
maskCloseableChange(event) {
this.maskCloseable = event.index === 0 ? true : false
this.openLandscape()
},
// 打开压屏窗
openLandscape() {
this.show = true
},
// 关闭压屏窗
closeLandscape() {
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
</style>
componentsPage/lazy-load/lazy-load.vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<view class="components-lazy-load">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>懒加载</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="content">
<block v-for="(item, index) in list" :key="index">
<view class="item">
<tn-lazy-load
:index="index"
:image="item.src"
:threshold="-450"
:height="400"
imgMode="aspectFill"
></tn-lazy-load>
</view>
</block>
</view>
<tn-load-more :status="status" @loadmore="getData"></tn-load-more>
</view>
</view>
</template>
<script>
export default {
name: 'ComponentsLazyLoad',
data() {
return {
status: 'loadmore',
list: [],
data: [
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
{ src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
{ src: 'error.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
{ src: 'error.jpg' }
]
}
},
onLoad() {
this.getData()
},
onReachBottom() {
uni.$emit('tOnLazyLoadReachBottom')
this.getData()
},
methods: {
getData() {
let index = 0
this.status = 'loading'
setTimeout(() => {
for (let i = 0; i < 10; i++) {
index = this.$t.number.random(0, this.data.length - 1)
this.list.push({
src: this.data[index].src
})
}
this.status = 'loadmore'
}, 1500)
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 30rpx;
.item {
flex: 0 0 335rpx;
height: 400rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
}
</style>
componentsPage/load-more/load-more.vue
+81
View File
@@ -0,0 +1,81 @@
<template>
<view class="components-load-more tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>加载更多</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="默认">
<tn-load-more></tn-load-more>
</demo-title>
<demo-title title="加载中">
<tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
</view>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
</view>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
</view>
</demo-title>
<demo-title title="没有更多">
<tn-load-more status="nomore"></tn-load-more>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
</view>
</demo-title>
<demo-title title="修改提示语">
<tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
</view>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
</view>
</demo-title>
<demo-title title="修改颜色">
<tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more>
</view>
<view class="tn-margin-top">
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
</view>
</demo-title>
<demo-title title="修改字体尺寸">
<tn-load-more :fontSize="32"></tn-load-more>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'ComponentsLoadMore',
components: { demoTitle },
data() {
return {
loadText: {
loadmore: '下拉加载',
loading: '快速加载中...',
nomore: '已经没有了啊'
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
componentsPage/nav-bar/nav-bar.vue
+2 -2
View File
@@ -29,7 +29,7 @@
</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>
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
</view>
</view>
</tn-nav-bar>
@@ -46,7 +46,7 @@
>
<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>
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
</view>
</view>
</tn-nav-bar>
componentsPage/radio/radio.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<view class="components-radio tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>Radio单选按钮</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础">
<tn-radio-group>
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio>
<tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group>
</demo-title>
<demo-title title="方形选框">
<tn-radio-group shape="square">
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group>
</demo-title>
<demo-title title="竖直排列">
<tn-radio-group width="100%" wrap>
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group>
</demo-title>
<demo-title title="禁止点击标签">
<tn-radio-group :disabledLabel="true">
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group>
</demo-title>
<demo-title title="自定义尺寸">
<view>
<tn-radio-group :size="20" :iconSize="14">
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio>
</tn-radio-group>
</view>
<view class="tn-margin-top">
<tn-radio-group :size="46" :iconSize="36">
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3">选项3</tn-radio>
</tn-radio-group>
</view>
</demo-title>
<demo-title title="自定义颜色">
<tn-radio-group activeColor="#31E749">
<tn-radio name="选项1">选项1</tn-radio>
<tn-radio name="选项2">选项2</tn-radio>
<tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio>
</tn-radio-group>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'componentsRadio',
components: {demoTitle},
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
componentsPage/skeleton/skeleton.vue
+236
View File
@@ -0,0 +1,236 @@
<template>
<view class="components-skeleton tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>骨架屏</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-padding-top"></view>
<view class="news tn-skeleton">
<block v-for="(item, index) in list" :key="index">
<view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top">
<view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center">
<view class="news__item__avatar tn-skeleton-circle">
<image :src="item.userInfo.avatar"></image>
</view>
<view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around">
<view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view>
<view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view>
</view>
</view>
<view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center">
<view class="news__item__content__data">
<view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view>
<view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view>
</view>
<view class="news__item__main-image tn-skeleton-rect">
<image :src="item.content.mainImage" mode="aspectFill"></image>
</view>
</view>
</view>
</block>
</view>
<view class="tn-padding-bottom-lg"></view>
</view>
<!-- 引用组件 -->
<tn-skeleton :show="showSkeleton"></tn-skeleton>
</view>
</template>
<script>
export default {
name: 'ComponentsSkeleton',
data() {
return {
showSkeleton: true,
list: [
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
},
{
userInfo: {
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
nickName: '图鸟科技-北北'
},
content: {
title: '全新UI框架，tuniaoUI正式发布',
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
releaseDate: '2020年12月30日'
}
}
]
}
},
onLoad() {
// 模拟加载数据完毕
setTimeout(() => {
this.showSkeleton = false
}, 3000)
}
}
</script>
<style lang="scss" scoped>
.components-skeleton {
// background-color: $tn-bg-gray-color;
}
.news {
position: relative;
&__item {
margin: 0 30rpx;
padding: 10rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
margin-bottom: 30rpx;
&__info {
height: 80rpx;
margin-bottom: 20rpx;
}
&__avatar {
width: 80rpx;
height: 100%;
border-radius: 100%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
&__outline {
height: 100%;
margin-left: 20rpx;
}
&__nick-name {
font-size: 30rpx;
margin-bottom: 6rpx;
}
&__release-date {
font-size: 22rpx;
color: $tn-font-sub-color;
}
&__content {
height: 140rpx;
&__data {
width: 60%;
margin-right: 10rpx;
}
}
&__title {
width: 100%;
font-size: 30rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
&__desc {
width: 100%;
word-break: break-all;
font-size: 24rpx;
}
&__main-image {
width: 40%;
height: 100%;
border-radius: 5rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
</style>
componentsPage/slider/slider.vue
+10 -1
View File
@@ -39,6 +39,14 @@
</tn-slider>
</demo-title>
<demo-title title="配合formItem使用">
<tn-form>
<tn-form-item label="价格区间" :labelWidth="140">
<tn-slider v-model="value8"></tn-slider>
</tn-form-item>
</tn-form>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
</view>
@@ -60,7 +68,8 @@
value4: 0,
value5: 0,
value6: 0,
value7: 0
value7: 0,
value8: 0
}
},
methods: {
componentsPage/static/images/empty/cart.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

componentsPage/static/images/empty/comment.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

componentsPage/static/images/empty/data.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

componentsPage/static/images/empty/network.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

componentsPage/static/images/empty/page.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

componentsPage/static/images/empty/permission.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

componentsPage/static/images/empty/search.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

componentsPage/subsection/subsection.vue
+68
View File
@@ -0,0 +1,68 @@
<template>
<view class="components-subsection tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>分段器</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基本使用">
<tn-subsection :list="list"></tn-subsection>
</demo-title>
<demo-title title="按钮模式">
<tn-subsection :list="list" mode="button"></tn-subsection>
<view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
</view>
</demo-title>
<demo-title title="取消切换动画">
<tn-subsection :list="list" :animation="false"></tn-subsection>
</demo-title>
<demo-title title="贝塞尔曲线切换动画">
<tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
<view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
</view>
</demo-title>
<demo-title title="选中字体设置为粗体">
<tn-subsection :list="list" :bold="true"></tn-subsection>
</demo-title>
<demo-title title="自定义样式">
<tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
<view class="tn-margin-top">
<tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
</view>
<view class="tn-margin-top">
<tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection>
</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: 'ComponentsSubsection',
components: { demoTitle },
data() {
return {
list: ['全部','未付款','待发货','待收货','待评价']
}
}
}
</script>
<style lang="scss" scoped>
</style>
componentsPage/verification-code-input/verification-code-input.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<view class="components-verification-code-input tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>验证码输入</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础使用">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value1"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="居中提示线">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="底部提示线">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="修改验证码长度">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="使用圆点隐藏已输入">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="不带呼吸效果">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="字体加粗">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
</view>
</demo-title>
<demo-title title="自定义样式">
<view class="tn-bg-white">
<tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input>
</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: 'ComponentsVerificationCode',
components: { demoTitle },
data() {
return {
value1: '24',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: '',
value8: '',
value9: '',
value10: '',
}
}
}
</script>
<style lang="scss" scoped>
.components-verification-code-input {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
libs/mixin/template_page_mixin.js
+28 -1
View File
@@ -7,6 +7,10 @@ module.exports = {
}
},
onLoad() {
// 更新顶部导航栏信息
this.updateCustomBarInfo()
},
methods: {
// 点击左上角返回按钮时触发事件
goBack() {
@@ -14,7 +18,7 @@ module.exports = {
const pages = getCurrentPages()
if (pages && pages.length > 0) {
const firstPage = pages[0]
if (!firstPage.route || firstPage.route != 'pages/index/index') {
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
uni.reLaunch({
url: '/pages/index/index'
})
@@ -28,6 +32,29 @@ module.exports = {
url: '/pages/index/index'
})
}
},
// 更新顶部导航栏信息
async updateCustomBarInfo() {
// 获取vuex中的自定义顶栏的高度
let customBarHeight = this.vuex_custom_bar_height
let statusBarHeight = this.vuex_status_bar_height
// 如果获取失败则重新获取
if (!customBarHeight) {
try {
const navBarInfo = await this.$t.updateCustomBar()
customBarHeight = navBarInfo.customBarHeight
statusBarHeight = navBarInfo.statusBarHeight
} catch(e) {
setTimeout(() => {
this.updateCustomBarInfo()
}, 10)
return
}
}
// 更新vuex中的导航栏信息
this.$t.vuex('vuex_status_bar_height', statusBarHeight)
this.$t.vuex('vuex_custom_bar_height', customBarHeight)
}
}
}
mock/components_page.js
+55
View File
@@ -81,6 +81,31 @@ export default {
icon: 'star',
title: 'fab悬浮按钮',
url: '/componentsPage/fab/fab'
},
{
icon: 'star',
title: '懒加载',
url: '/componentsPage/lazy-load/lazy-load'
},
{
icon: 'star',
title: '加载更多',
url: '/componentsPage/load-more/load-more'
},
{
icon: 'star',
title: '骨架屏',
url: '/componentsPage/skeleton/skeleton'
},
{
icon: 'star',
title: '空页面',
url: '/componentsPage/empty/empty'
},
{
icon: 'star',
title: '商品导航',
url: '/componentsPage/goods-nav/goods-nav'
}
]
},
@@ -108,6 +133,11 @@ export default {
title: '提示信息框',
url: '/componentsPage/tips/tips'
},
{
icon: 'creative',
title: '压屏窗',
url: '/componentsPage/landscape/landscape'
}
]
},
{
@@ -119,6 +149,21 @@ export default {
title: 'Form表单',
url: '/componentsPage/form/form'
},
{
icon: 'image-text',
title: 'Input输入框',
url: '/componentsPage/input/input'
},
{
icon: 'image-text',
title: 'Radio单选框',
url: '/componentsPage/radio/radio'
},
{
icon: 'image-text',
title: 'Checkbox复选框',
url: '/componentsPage/check-box/check-box'
},
{
icon: 'ticket',
title: 'ActionSheet操作菜单',
@@ -159,6 +204,16 @@ export default {
title: '签名板',
url: '/componentsPage/sign-board/sign-board'
},
{
icon: 'edit-write',
title: '验证码输入',
url: '/componentsPage/verification-code-input/verification-code-input'
},
{
icon: 'edit-write',
title: '分段器',
url: '/componentsPage/subsection/subsection'
}
]
},
{
mock/template_page.js
+39 -3
View File
@@ -33,6 +33,30 @@ export default {
}
]
},
{
title: '个人中心',
backgroundColor: 'tn-cool-bg-color-1',
list: [
{
icon: 'send',
title: '夏天个人',
author: '可我会像',
url: '/templatePage/my/demo1/demo1'
},
{
icon: 'send',
title: '图鸟个人',
author: '可我会像',
url: '/templatePage/my/demo2/demo2'
},
{
icon: 'send',
title: '外卖个人',
author: '可我会像',
url: '/templatePage/my/demo3/demo3'
}
]
},
{
title: '常用首页',
backgroundColor: 'tn-cool-bg-color-1',
@@ -92,6 +116,12 @@ export default {
author: '可我会像',
url: '/templatePage/life/fullpage/fullpage'
},
{
icon: 'like-break',
title: '浏览器',
author: '可我会像',
url: '/templatePage/life/browser/browser'
},
{
icon: 'like-break',
title: '时钟',
@@ -136,19 +166,25 @@ export default {
list: [
{
icon: 'send',
title: '3D全景',
title: '3D全景(第三方，约120￥一年)',
author: '可我会像 & 芊云全景',
url: '/templatePage/life/pano/pano'
},
{
icon: 'like-break',
title: '隔壁的小生',
title: 'Ucharts图表(第三方，免费开源)',
author: '可我会像 & Ucharts秋云',
url: '/templatePage/life/candle/candle'
},
{
icon: 'like-break',
title: '隔壁的小生(第三方，赞赏6￥可商用)',
author: '隔壁的小生',
url: '/templatePage/life/candle/candle'
},
{
icon: 'like-break',
title: '阿凡提·污克西西',
title: '阿凡提·污克西西(第三方，免费开源)',
author: '阿凡提·污克西西',
url: '/templatePage/life/candle/candle'
},
pages.json
+500 -410
View File
@@ -1,6 +1,6 @@
{
"easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
@@ -13,422 +13,512 @@
],
"subPackages": [{
"root": "basicPage",
"pages": [
{
"path": "flex-layout/flex-layout",
"style": {
"navigationBarTitleText": "Flex布局",
"enablePullDownRefresh": false
}
}, {
"path": "grid-layout/grid-layout",
"style": {
"navigationBarTitleText": "Grid布局",
"enablePullDownRefresh": false
}
}, {
"path": "color/color",
"style": {
"navigationBarTitleText": "配色",
"enablePullDownRefresh": false
}
}, {
"path": "icon/icon",
"style": {
"navigationBarTitleText": "图标",
"enablePullDownRefresh": false
}
}, {
"path": "button/button",
"style": {
"navigationBarTitleText": "按钮",
"enablePullDownRefresh": false
}
}, {
"path": "tag/tag",
"style": {
"navigationBarTitleText": "标签",
"enablePullDownRefresh": false
}
}, {
"path": "border/border",
"style": {
"navigationBarTitleText": "边框",
"enablePullDownRefresh": false
}
}, {
"path": "shadow/shadow",
"style": {
"navigationBarTitleText": "阴影",
"enablePullDownRefresh": false
}
}, {
"path": "badge/badge",
"style": {
"navigationBarTitleText": "微标",
"enablePullDownRefresh": false
}
}, {
"path": "avatar/avatar",
"style": {
"navigationBarTitleText": "头像",
"enablePullDownRefresh": false
}
"pages": [{
"path": "flex-layout/flex-layout",
"style": {
"navigationBarTitleText": "Flex布局",
"enablePullDownRefresh": false
}
]
},{
}, {
"path": "grid-layout/grid-layout",
"style": {
"navigationBarTitleText": "Grid布局",
"enablePullDownRefresh": false
}
}, {
"path": "color/color",
"style": {
"navigationBarTitleText": "配色",
"enablePullDownRefresh": false
}
}, {
"path": "icon/icon",
"style": {
"navigationBarTitleText": "图标",
"enablePullDownRefresh": false
}
}, {
"path": "button/button",
"style": {
"navigationBarTitleText": "按钮",
"enablePullDownRefresh": false
}
}, {
"path": "tag/tag",
"style": {
"navigationBarTitleText": "标签",
"enablePullDownRefresh": false
}
}, {
"path": "border/border",
"style": {
"navigationBarTitleText": "边框",
"enablePullDownRefresh": false
}
}, {
"path": "shadow/shadow",
"style": {
"navigationBarTitleText": "阴影",
"enablePullDownRefresh": false
}
}, {
"path": "badge/badge",
"style": {
"navigationBarTitleText": "微标",
"enablePullDownRefresh": false
}
}, {
"path": "avatar/avatar",
"style": {
"navigationBarTitleText": "头像",
"enablePullDownRefresh": false
}
}]
}, {
"root": "componentsPage",
"pages": [
{
"path": "list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false
}
}, {
"path": "popup/popup",
"style": {
"navigationBarTitleText": "弹出层",
"enablePullDownRefresh": false
}
}, {
"path": "modal/modal",
"style": {
"navigationBarTitleText": "模态框",
"enablePullDownRefresh": false
}
}, {
"path": "toast/toast",
"style": {
"navigationBarTitleText": "Toast",
"enablePullDownRefresh": false
}
}, {
"path": "tips/tips",
"style": {
"navigationBarTitleText": "提示信息",
"enablePullDownRefresh": false
}
}, {
"path": "form/form",
"style": {
"navigationBarTitleText": "Form表单",
"enablePullDownRefresh": false
}
}, {
"path": "action-sheet/action-sheet",
"style": {
"navigationBarTitleText": "操作菜单",
"enablePullDownRefresh": false
}
}, {
"path": "picker/picker",
"style": {
"navigationBarTitleText": "Picker选择器",
"enablePullDownRefresh": false
}
}, {
"path": "select/select",
"style": {
"navigationBarTitleText": "Select列选择器",
"enablePullDownRefresh": false
}
}, {
"path": "verification-code/verification-code",
"style": {
"navigationBarTitleText": "验证码倒计时",
"enablePullDownRefresh": false
}
}, {
"path": "loading/loading",
"style": {
"navigationBarTitleText": "Loading加载",
"enablePullDownRefresh": false
}
}, {
"path": "switch/switch",
"style": {
"navigationBarTitleText": "Switch开关",
"enablePullDownRefresh": false
}
}, {
"path": "progress/progress",
"style": {
"navigationBarTitleText": "Progress进度条",
"enablePullDownRefresh": false
}
}, {
"path": "image-upload/image-upload",
"style": {
"navigationBarTitleText": "图片上传",
"enablePullDownRefresh": false
}
}, {
"path": "rate/rate",
"style": {
"navigationBarTitleText": "rate评分",
"enablePullDownRefresh": false
}
}, {
"path": "slider/slider",
"style": {
"navigationBarTitleText": "slider滑动条",
"enablePullDownRefresh": false
}
}, {
"path": "number-box/number-box",
"style": {
"navigationBarTitleText": "numberBox步进输入",
"enablePullDownRefresh": false
}
}, {
"path": "keyboard/keyboard",
"style": {
"navigationBarTitleText": "keyboard键盘",
"enablePullDownRefresh": false
}
}, {
"path": "tabs/tabs",
"style": {
"navigationBarTitleText": "tabs标签",
"enablePullDownRefresh": false
}
}, {
"path": "count-down/count-down",
"style": {
"navigationBarTitleText": "countDown倒计时",
"enablePullDownRefresh": false
}
}, {
"path": "count-to/count-to",
"style": {
"navigationBarTitleText": "countTo数字跳转",
"enablePullDownRefresh": false
}
}, {
"path": "count-scroll/count-scroll",
"style": {
"navigationBarTitleText": "countTo数字滚动",
"enablePullDownRefresh": false
}
}, {
"path": "sticky/sticky",
"style": {
"navigationBarTitleText": "sticky吸顶",
"enablePullDownRefresh": false
}
}, {
"path": "nav-bar/nav-bar",
"style": {
"navigationBarTitleText": "navBar导航栏",
"enablePullDownRefresh": false
}
}, {
"path": "notice-bar/notice-bar",
"style": {
"navigationBarTitleText": "noticeBar通知栏",
"enablePullDownRefresh": false
}
}, {
"path": "swiper/swiper",
"style": {
"navigationBarTitleText": "swiper轮播图",
"enablePullDownRefresh": false
}
}, {
"path": "collapse/collapse",
"style": {
"navigationBarTitleText": "collapse折叠面板",
"enablePullDownRefresh": false
}
}, {
"path": "read-more/read-more",
"style": {
"navigationBarTitleText": "readMore查看更多",
"enablePullDownRefresh": false
}
}, {
"path": "steps/steps",
"style": {
"navigationBarTitleText": "steps步骤条",
"enablePullDownRefresh": false
}
}, {
"path": "time-line/time-line",
"style": {
"navigationBarTitleText": "timeLine时间轴",
"enablePullDownRefresh": false
}
}, {
"path": "index-list/index-list",
"style": {
"navigationBarTitleText": "indexList索引列表",
"enablePullDownRefresh": false
}
}, {
"path": "calendar/calendar",
"style": {
"navigationBarTitleText": "calendar日历",
"enablePullDownRefresh": false
}
}, {
"path": "scroll-list/scroll-list",
"style": {
"navigationBarTitleText": "scrollList横向滚动",
"enablePullDownRefresh": false
}
}, {
"path": "swipe-action/swipe-action",
"style": {
"navigationBarTitleText": "swipeAction滑动菜单",
"enablePullDownRefresh": false
}
}, {
"path": "sign-board/sign-board",
"style": {
"navigationBarTitleText": "signBoard签名板",
"enablePullDownRefresh": false
// "pageOrientation": "landscape"
}
}, {
"path": "fab/fab",
"style": {
"navigationBarTitleText": "fab悬浮按钮",
"enablePullDownRefresh": false
// "pageOrientation": "landscape"
}
"pages": [{
"path": "list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false
}
]
},{
"root":"templatePage",
"pages": [
{
"path": "login/demo1/demo1",
"style": {
"navigationBarTitleText": "火箭登录",
"enablePullDownRefresh": false
}
},{
"path": "login/demo2/demo2",
"style": {
"navigationBarTitleText": "粒子登录",
"enablePullDownRefresh": false
}
},{
"path": "login/demo3/demo3",
"style": {
"navigationBarTitleText": "背景登录",
"enablePullDownRefresh": false
}
},{
"path": "login/demo4/demo4",
"style": {
"navigationBarTitleText": "简约登录",
"enablePullDownRefresh": false
}
},{
"path": "health/qrcode/qrcode",
"style": {
"navigationBarTitleText": "健康码",
"enablePullDownRefresh": false
}
}, {
"path": "home/course/course",
"style": {
"navigationBarTitleText": "课程首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/music/music",
"style": {
"navigationBarTitleText": "音乐首页",
"enablePullDownRefresh": false
}
},{
"path": "home/design/design",
"style": {
"navigationBarTitleText": "设计首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/job/job",
"style": {
"navigationBarTitleText": "招聘首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/screen/screen",
"style": {
"navigationBarTitleText": "投屏首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/wallpaper/wallpaper",
"style": {
"navigationBarTitleText": "壁纸首页",
"enablePullDownRefresh": false
}
}, {
"path": "life/fullpage/fullpage",
"style": {
"navigationBarTitleText": "全屏轮播",
"enablePullDownRefresh": false
}
},{
"path": "life/pano/pano",
"style": {
"navigationBarTitleText": "3D全景",
"enablePullDownRefresh": false
}
},{
"path": "life/plus/plus",
"style": {
"navigationBarTitleText": "会员协议",
"enablePullDownRefresh": false
}
},{
"path": "life/candle/candle",
"style": {
"navigationBarTitleText": "敬请期待",
"enablePullDownRefresh": false
}
},{
"path": "time/clock/clock",
"style": {
"navigationBarTitleText": "时钟",
"enablePullDownRefresh": false
}
},{
"path": "animate/loading/loading",
"style": {
"navigationBarTitleText": "加载动效",
"enablePullDownRefresh": false
}
}, {
"path": "animate/particle/particle",
"style": {
"navigationBarTitleText": "随机粒子",
"enablePullDownRefresh": false
}
}, {
"path": "animate/photo/photo",
"style": {
"navigationBarTitleText": "相册图集",
"enablePullDownRefresh": false
}
}, {
"path": "animate/hollow/hollow",
"style": {
"navigationBarTitleText": "镂空效果",
"enablePullDownRefresh": false
}
}, {
"path": "popup/popup",
"style": {
"navigationBarTitleText": "弹出层",
"enablePullDownRefresh": false
}
]
}, {
"path": "modal/modal",
"style": {
"navigationBarTitleText": "模态框",
"enablePullDownRefresh": false
}
}, {
"path": "toast/toast",
"style": {
"navigationBarTitleText": "Toast",
"enablePullDownRefresh": false
}
}, {
"path": "tips/tips",
"style": {
"navigationBarTitleText": "提示信息",
"enablePullDownRefresh": false
}
}, {
"path": "form/form",
"style": {
"navigationBarTitleText": "Form表单",
"enablePullDownRefresh": false
}
}, {
"path": "action-sheet/action-sheet",
"style": {
"navigationBarTitleText": "操作菜单",
"enablePullDownRefresh": false
}
}, {
"path": "picker/picker",
"style": {
"navigationBarTitleText": "Picker选择器",
"enablePullDownRefresh": false
}
}, {
"path": "select/select",
"style": {
"navigationBarTitleText": "Select列选择器",
"enablePullDownRefresh": false
}
}, {
"path": "verification-code/verification-code",
"style": {
"navigationBarTitleText": "验证码倒计时",
"enablePullDownRefresh": false
}
}, {
"path": "loading/loading",
"style": {
"navigationBarTitleText": "Loading加载",
"enablePullDownRefresh": false
}
}, {
"path": "switch/switch",
"style": {
"navigationBarTitleText": "Switch开关",
"enablePullDownRefresh": false
}
}, {
"path": "progress/progress",
"style": {
"navigationBarTitleText": "Progress进度条",
"enablePullDownRefresh": false
}
}, {
"path": "image-upload/image-upload",
"style": {
"navigationBarTitleText": "图片上传",
"enablePullDownRefresh": false
}
}, {
"path": "rate/rate",
"style": {
"navigationBarTitleText": "rate评分",
"enablePullDownRefresh": false
}
}, {
"path": "slider/slider",
"style": {
"navigationBarTitleText": "slider滑动条",
"enablePullDownRefresh": false
}
}, {
"path": "number-box/number-box",
"style": {
"navigationBarTitleText": "numberBox步进输入",
"enablePullDownRefresh": false
}
}, {
"path": "keyboard/keyboard",
"style": {
"navigationBarTitleText": "keyboard键盘",
"enablePullDownRefresh": false
}
}, {
"path": "tabs/tabs",
"style": {
"navigationBarTitleText": "tabs标签",
"enablePullDownRefresh": false
}
}, {
"path": "count-down/count-down",
"style": {
"navigationBarTitleText": "countDown倒计时",
"enablePullDownRefresh": false
}
}, {
"path": "count-to/count-to",
"style": {
"navigationBarTitleText": "countTo数字跳转",
"enablePullDownRefresh": false
}
}, {
"path": "count-scroll/count-scroll",
"style": {
"navigationBarTitleText": "countTo数字滚动",
"enablePullDownRefresh": false
}
}, {
"path": "sticky/sticky",
"style": {
"navigationBarTitleText": "sticky吸顶",
"enablePullDownRefresh": false
}
}, {
"path": "nav-bar/nav-bar",
"style": {
"navigationBarTitleText": "navBar导航栏",
"enablePullDownRefresh": false
}
}, {
"path": "notice-bar/notice-bar",
"style": {
"navigationBarTitleText": "noticeBar通知栏",
"enablePullDownRefresh": false
}
}, {
"path": "swiper/swiper",
"style": {
"navigationBarTitleText": "swiper轮播图",
"enablePullDownRefresh": false
}
}, {
"path": "collapse/collapse",
"style": {
"navigationBarTitleText": "collapse折叠面板",
"enablePullDownRefresh": false
}
}, {
"path": "read-more/read-more",
"style": {
"navigationBarTitleText": "readMore查看更多",
"enablePullDownRefresh": false
}
}, {
"path": "steps/steps",
"style": {
"navigationBarTitleText": "steps步骤条",
"enablePullDownRefresh": false
}
}, {
"path": "time-line/time-line",
"style": {
"navigationBarTitleText": "timeLine时间轴",
"enablePullDownRefresh": false
}
}, {
"path": "index-list/index-list",
"style": {
"navigationBarTitleText": "indexList索引列表",
"enablePullDownRefresh": false
}
}, {
"path": "index-list/base/index-list",
"style": {
"navigationBarTitleText": "indexList索引列表",
"enablePullDownRefresh": false
}
}, {
"path": "index-list/avatar/index-list",
"style": {
"navigationBarTitleText": "indexList索引列表",
"enablePullDownRefresh": false
}
}, {
"path": "calendar/calendar",
"style": {
"navigationBarTitleText": "calendar日历",
"enablePullDownRefresh": false
}
}, {
"path": "scroll-list/scroll-list",
"style": {
"navigationBarTitleText": "scrollList横向滚动",
"enablePullDownRefresh": false
}
}, {
"path": "swipe-action/swipe-action",
"style": {
"navigationBarTitleText": "swipeAction滑动菜单",
"enablePullDownRefresh": false
}
}, {
"path": "sign-board/sign-board",
"style": {
"navigationBarTitleText": "signBoard签名板",
"enablePullDownRefresh": false
// "pageOrientation": "landscape"
}
}, {
"path": "fab/fab",
"style": {
"navigationBarTitleText": "fab悬浮按钮",
"enablePullDownRefresh": false
}
}, {
"path": "input/input",
"style": {
"navigationBarTitleText": "输入框",
"enablePullDownRefresh": false
}
}, {
"path": "radio/radio",
"style": {
"navigationBarTitleText": "单选框",
"enablePullDownRefresh": false
}
}, {
"path": "check-box/check-box",
"style": {
"navigationBarTitleText": "复选框",
"enablePullDownRefresh": false
}
}, {
"path": "lazy-load/lazy-load",
"style": {
"navigationBarTitleText": "懒加载",
"enablePullDownRefresh": false
}
}, {
"path": "load-more/load-more",
"style": {
"navigationBarTitleText": "加载更多",
"enablePullDownRefresh": false
}
}, {
"path": "skeleton/skeleton",
"style": {
"navigationBarTitleText": "骨架屏",
"enablePullDownRefresh": false
}
}, {
"path": "empty/empty",
"style": {
"navigationBarTitleText": "空页面",
"enablePullDownRefresh": false
}
}, {
"path": "landscape/landscape",
"style": {
"navigationBarTitleText": "压屏窗",
"enablePullDownRefresh": false
}
}, {
"path": "verification-code-input/verification-code-input",
"style": {
"navigationBarTitleText": "验证码输入",
"enablePullDownRefresh": false
}
}, {
"path": "subsection/subsection",
"style": {
"navigationBarTitleText": "分段器",
"enablePullDownRefresh": false
}
}, {
"path": "goods-nav/goods-nav",
"style": {
"navigationBarTitleText": "商品导航",
"enablePullDownRefresh": false
}
}]
}, {
"root": "templatePage",
"pages": [{
"path": "login/demo1/demo1",
"style": {
"navigationBarTitleText": "火箭登录",
"enablePullDownRefresh": false
}
}, {
"path": "login/demo2/demo2",
"style": {
"navigationBarTitleText": "粒子登录",
"enablePullDownRefresh": false
}
}, {
"path": "login/demo3/demo3",
"style": {
"navigationBarTitleText": "背景登录",
"enablePullDownRefresh": false
}
}, {
"path": "login/demo4/demo4",
"style": {
"navigationBarTitleText": "简约登录",
"enablePullDownRefresh": false
}
}, {
"path": "health/qrcode/qrcode",
"style": {
"navigationBarTitleText": "健康码",
"enablePullDownRefresh": false
}
}, {
"path": "home/course/course",
"style": {
"navigationBarTitleText": "课程首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/music/music",
"style": {
"navigationBarTitleText": "音乐首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/design/design",
"style": {
"navigationBarTitleText": "设计首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/job/job",
"style": {
"navigationBarTitleText": "招聘首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/screen/screen",
"style": {
"navigationBarTitleText": "投屏首页",
"enablePullDownRefresh": false
}
}, {
"path": "home/wallpaper/wallpaper",
"style": {
"navigationBarTitleText": "壁纸首页",
"enablePullDownRefresh": false
}
}, {
"path": "life/fullpage/fullpage",
"style": {
"navigationBarTitleText": "全屏轮播",
"enablePullDownRefresh": false
}
}, {
"path": "life/pano/pano",
"style": {
"navigationBarTitleText": "3D全景",
"enablePullDownRefresh": false
}
}, {
"path": "life/plus/plus",
"style": {
"navigationBarTitleText": "会员协议",
"enablePullDownRefresh": false
}
}, {
"path": "life/candle/candle",
"style": {
"navigationBarTitleText": "敬请期待",
"enablePullDownRefresh": false
}
}, {
"path": "time/clock/clock",
"style": {
"navigationBarTitleText": "时钟",
"enablePullDownRefresh": false
}
}, {
"path": "animate/loading/loading",
"style": {
"navigationBarTitleText": "加载动效",
"enablePullDownRefresh": false
}
}, {
"path": "animate/particle/particle",
"style": {
"navigationBarTitleText": "随机粒子",
"enablePullDownRefresh": false
}
}, {
"path": "animate/photo/photo",
"style": {
"navigationBarTitleText": "相册图集",
"enablePullDownRefresh": false
}
}, {
"path": "animate/hollow/hollow",
"style": {
"navigationBarTitleText": "镂空效果",
"enablePullDownRefresh": false
}
}, {
"path": "my/demo1/demo1",
"style": {
"navigationBarTitleText": "夏天个人",
"enablePullDownRefresh": false
}
}, {
"path": "my/demo2/demo2",
"style": {
"navigationBarTitleText": "图鸟个人",
"enablePullDownRefresh": false
}
}, {
"path": "my/demo3/demo3",
"style": {
"navigationBarTitleText": "外卖个人",
"enablePullDownRefresh": false
}
}]
}],
"preloadRule": {
"pages/index/index": {
"network":"all",
"packages": ["basicPage","componentsPage","templatePage"]
"network": "all",
"packages": ["basicPage", "componentsPage", "templatePage"]
}
},
"globalStyle": {
pages/basic/basic.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<view class="basic">
<view class="basic tn-safe-area-inset-bottom">
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
@@ -9,7 +9,7 @@
<view class="nav_title tn-cool-bg-color-15">基 / 础 / 元 / 素</view>
</view>
<view class='nav-list tn-margin-bottom'>
<view class='nav-list'>
<block v-for="(item, index) in navList" :key="index">
<navigator
@@ -32,7 +32,7 @@
</view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
pages/components/components.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="components">
<view class="components tn-safe-area-inset-bottom">
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
@@ -34,7 +34,7 @@
</view>
</block>
<view class="tn-padding-bottom"></view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
pages/template/template.vue
+2 -21
View File
@@ -1,5 +1,5 @@
<template>
<view class="vip">
<view class="template tn-safe-area-inset-bottom">
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
@@ -40,7 +40,7 @@
</view>
</block>
<view class="tn-padding-bottom"></view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
@@ -134,25 +134,6 @@
// align-items: center;
// justify-content: space-between;
.author-title{
position: absolute;
z-index: -1;
background-color: #FFFFFF;
width: 100%;
height: 100%;
left: 0;
bottom: -100%;
border-radius: 10upx;
opacity: 1;
transform: scale(1);
.title {
color: #000000;
text-align: left;
}
}
/* 元素标题 start */
.nav-link {
flex: 1;
pages/tuniao/tuniao.vue
+3 -13
View File
@@ -1,5 +1,5 @@
<template>
<view class="about">
<view class="about tn-safe-area-inset-bottom">
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
@@ -8,20 +8,10 @@
<view class="about__wrap">
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- #ifdef H5 -->
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
</view>
<view class="user-info__nick-name">图鸟科技</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="user-info__avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="user-info__nick-name" style="height: 50rpx;">
<open-data type="userNickName"></open-data>
</view>
<!-- #endif -->
<view class="user-info__nick-name">图鸟小伙伴</view>
</view>
<!-- 数据信息 -->
@@ -106,7 +96,7 @@
</view>
</view>
<view class="tn-padding-bottom"></view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
templatePage/animate/hollow/hollow.vue
+1 -2
View File
@@ -67,8 +67,7 @@
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，</text>
<open-data type="userNickName"></open-data>
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好
templatePage/health/qrcode/qrcode.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-screen">
<view class="template-screen tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -131,7 +131,7 @@
<!-- 图文 -->
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 170rpx;">
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 110rpx;">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
templatePage/home/course/course.vue
+3 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-course">
<view class="template-course tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -129,7 +129,7 @@
</view>
<!-- 比例 start-->
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
<view class="tn-flex tn-flex-wrap tn-margin-sm">
<block v-for="(item, index) in content" :key="index">
<view class="" style="width: 50%;">
<view class="tn-blogger-content__wrap">
@@ -195,6 +195,7 @@
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
templatePage/home/design/design.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-design">
<view class="template-design tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -71,7 +71,7 @@
<!-- 图文 -->
<view class="tn-flex tn-flex-direction-column tn-margin-bottom">
<view class="tn-flex tn-flex-direction-column">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -154,6 +154,7 @@
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -353,7 +354,6 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-design{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 图标容器10 start */
.icon10 {
templatePage/home/job/job.vue
+121 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-job">
<view class="template-job tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -58,7 +58,7 @@
</view>
<!-- 方式16 start-->
<view class="tn-flex tn-flex-wrap tn-margin job-shadow tn-margin-bottom-xl">
<view class="tn-flex tn-flex-wrap tn-margin job-shadow">
<block v-for="(item, index) in icons" :key="index">
<view class=" " style="width: 25%;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
@@ -74,6 +74,51 @@
</view>
<!-- 方式16 end-->
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
</view>
<view class="tn-color-black">职位</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
</view>
<view class="tn-color-black">简历</view>
</view>
<view class="action">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-message-fill tn-color-white">
</view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-level">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
</view>
<view class="tn-color-black">提升</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -286,6 +331,8 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-job{
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
@@ -436,4 +483,76 @@
}
}
/* 图标容器16 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
// line-height: 50rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.tabbar .action .bar-circle {
position: relative;
display: block;
margin: -30rpx auto 20rpx;
text-align: center;
font-size: 52rpx;
line-height: 90rpx;
background-color: #E72F8C;
width: 90rpx !important;
height: 90rpx !important;
overflow: hidden;
border-radius: 50%;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
}
.tabbar .action .bar-circle image {
width: 60rpx;
height: 60rpx;
display: inline-block;
margin: 15rpx auto 15rpx;
}
</style>
templatePage/home/music/music.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-music">
<view class="template-music tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -120,7 +120,7 @@
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -205,6 +205,7 @@
</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -403,7 +404,6 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-music{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 自定义导航栏内容 start */
templatePage/home/screen/screen.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-screen">
<view class="template-screen tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -134,7 +134,7 @@
<!-- 方式7 end-->
<!-- 图文 -->
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 170rpx;">
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 110rpx;">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
templatePage/home/wallpaper/wallpaper.vue
+82 -2
View File
@@ -1,5 +1,5 @@
<template>
<view class="template-wallpaper" style="background-color: #343434;">
<view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@@ -106,7 +106,7 @@
<!-- 比例 end-->
<!-- 图文 -->
<view class="tn-flex tn-flex-direction-column tn-padding-bottom">
<view class="tn-flex tn-flex-direction-column">
<block v-for="(item,index) in content" :key="index">
<view class="tn-blogger-content__wrap">
@@ -148,6 +148,35 @@
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
</view>
<view class="tn-color-white">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-watercup tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
</view>
<view class="tn-color-gray">投稿</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-ticket tn-color-gray">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
@@ -358,6 +387,8 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wallpaper{
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
@@ -531,4 +562,53 @@
}
/* 文章内容 end*/
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #080808;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
</style>
templatePage/life/plus/plus.vue
+5 -5
View File
@@ -25,7 +25,7 @@
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格）</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
</view>
<view class="plus-text">
@@ -61,7 +61,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星好评</view>
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
@@ -71,7 +71,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，于12月30上线</view>
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
@@ -81,7 +81,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">会员特权</view>
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
@@ -89,7 +89,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">关于作者</view>
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>
templatePage/my/demo1/demo1.vue
+343
View File
@@ -0,0 +1,343 @@
<template>
<view class="template-about tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="about__wrap">
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
</view>
<view class="user-info__nick-name">图鸟科技</view>
</view>
<!-- 消息&数据 -->
<view class="tn-shadow-warp" style="margin-top: 100rpx;border-radius: 12rpx;background-color: rgba(255,255,255,1);">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-orange">1.29W</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-fire"></text>
<text class="tn-padding-left-xs">人气</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-blue">216</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-share-circle"></text>
<text class="tn-padding-left-xs">分享</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-red">962</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-like"></text>
<text class="tn-padding-left-xs">爱心</text>
</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</view>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'about-demo-1',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -330rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 170rpx;
height: 170rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 图标容器1 start */
.icon1 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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_bg.png);
}
}
}
}
/* 图标容器1 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
</style>
templatePage/my/demo2/demo2.vue
+801
View File
@@ -0,0 +1,801 @@
<template>
<view class="template-about tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
</view>
<button @click="navTuniaoHome">
<view class="dong">
<view class="monster">
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view>
</view>
<view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view>
</view>
</view>
</view>
</view>
</button>
<view class="about__wrap">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
<view class="justify-content-item">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
</view>
</view>
<view class="tn-padding-right tn-color-white">
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
图鸟小伙伴
</view>
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
</view>
</view>
</view>
</view>
<!-- 方式7 start-->
<view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx;">
<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
</view>
</view>
</view>
<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
</view>
<view class="tn-text-center">
<view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
</view>
</view>
</view>
</view>
<!-- 方式7 end-->
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</view>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'about-demo-2',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
// 跳转到
navTuniaoHome(e) {
wx.vibrateLong();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 用户头像 start */
.logo-image{
width: 120rpx;
height: 120rpx;
position: relative;
background-color: #FFFFFF;
}
.logo-pic{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 50%;
overflow: hidden;
}
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -230rpx;
}
}
/* 页面 end*/
.my-shadow{
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
border-radius: 20rpx;
}
/* 图标容器7 start */
.icon7 {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 10rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 0;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
}
}
}
/* 图标容器1 start */
.icon1 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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_bg.png);
}
}
}
}
/* 图标容器1 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
/* 大嘴鸟*/
.dong {
z-index: 9999;
position: fixed;
top: -40px;
right: -80px;
transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}
.monster {
transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
/* IE 9 */
-moz-transform: rotate(-50deg);
/* Firefox */
-webkit-transform: rotate(-50deg);
/* Safari 和 Chrome */
-o-transform: rotate(-50deg);
/* Opera */
display: flex;
justify-content: center;
position: relative;
width: 170px;
height: 400px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #3C47D7;
box-shadow: 20px 20px 60px #4650E5;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 14%;
width: 75%;
height: 160px;
}
.monster__noses {
top: 50%;
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__nose {
width: 8px;
height: 12px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
.avatar-eye {
position: absolute;
top: -10%;
width: 65px;
height: 65px;
background: linear-gradient(105deg, white, #cb87f4);
border-radius: 100%;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
margin: 3px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.avatar-eye--green {
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}
.avatar-eye--violet {
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}
.eye--left {
left: 10%;
}
.eye--right {
left: 85%;
}
.eye--center {
left: 45%;
top: 10%;
}
.avatar-eye-pupil {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
z-index: 100;
border-radius: 100%;
}
.pupil--green {
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}
.pupil--pink {
background: linear-gradient(135deg, #f1a183, #8535cd);
}
.avatar-eye-pupil-blackThing {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
background: #2c2f32;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.avatar-eye-pupil-lightReflection {
position: absolute;
width: 7px;
height: 7px;
left: 25%;
top: 10%;
background: #ebebeb;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/**/
@keyframes t {
0%,
10%,
80%,
100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%,
10%,
80%,
100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%,
10%,
100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%,
20%,
100% {
bottom: -80px;
}
30%,
90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
</style>
templatePage/my/demo3/demo3.vue
+955
View File
@@ -0,0 +1,955 @@
<template>
<view class="template-about tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
</view>
<button @click="navTuniaoHome">
<view class="dong">
<view class="monster">
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view>
</view>
<view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view>
</view>
</view>
</view>
</view>
</button>
<view class="about__wrap">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
<view class="justify-content-item">
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="logo-pic tn-shadow" >
<view class="logo-image">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
</view>
</view>
<view class="tn-padding-right tn-color-white">
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
图鸟小伙伴
</view>
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
<!-- 方式12 start-->
<view class="tn-flex tn-flex-row-center tn-radius">
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-vip"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">我的订单</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-money"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">余额充值</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-ticket"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">消费明细</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-lucky-money"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">红包卡券</text>
</view>
</view>
</view>
</view>
<view class="tn-flex tn-flex-row-center tn-radius">
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-shop"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">积分商城</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-order"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">积分订单</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-star"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">店铺收藏</text>
</view>
</view>
</view>
<view class="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="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-icon-map"></view>
</view>
<view class="tn-text-center">
<text class="tn-text-ellipsis">收货地址</text>
</view>
</view>
</view>
</view>
<!-- 方式12 end-->
</view>
<view class="tn-flex tn-flex-row-between tn-padding-top-xl">
<view class="justify-content-item tn-text-bold tn-text-lg">
<text class="">更多功能</text>
</view>
<view class="justify-content-item tn-text-df">
<text class="tn-padding-xs">全部</text>
<text class="tn-icon-right"></text>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
<block v-for="(item, index) in historyData" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<view :class="[`tn-icon-${item.icon}`]"></view>
</view>
<view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
<text class="tn-text-ellipsis" >{{ item.title }}</text>
</view>
</view>
</view>
</block>
</view>
</tn-scroll-list>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</view>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">福利</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'about-demo-3',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
historyData: [
{
title: '分销中心',
icon: 'organizatio',
color: 'orange',
},
{
title: '积分商城',
icon: 'level',
color: 'purple',
},
{
title: '限时秒杀',
icon: 'clock',
color: 'blue',
},
{
title: '社区团购',
icon: 'team',
color: 'purplered',
},
{
title: '大转盘',
icon: 'group-circle',
color: 'teal',
},
{
title: '商品核销',
icon: 'scan',
color: 'orangered',
},
{
title: '满减优惠',
icon: 'coupon',
color: 'indigo',
},
{
title: '视频直播',
icon: 'video',
color: 'green',
}
]
}
},
methods: {
// 跳转到
navTuniaoHome(e) {
wx.vibrateLong();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 用户头像 start */
.logo-image{
width: 120rpx;
height: 120rpx;
position: relative;
}
.logo-pic{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 50%;
overflow: hidden;
background-color: #FFFFFF;
}
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -230rpx;
}
}
/* 页面 end*/
/* 图标容器1 start */
.icon1 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
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_bg.png);
}
}
}
}
/* 图标容器1 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
/* 图标容器12 start */
.icon12 {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
// border-radius: 50%;
margin-bottom: 0rpx;
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_bg.png);
}
}
}
}
/* 图标容器11 start */
.icon11 {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
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_bg.png);
}
}
}
}
/* 大嘴鸟*/
.dong {
z-index: 9999;
position: fixed;
top: -40px;
right: -80px;
transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}
.monster {
transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
/* IE 9 */
-moz-transform: rotate(-50deg);
/* Firefox */
-webkit-transform: rotate(-50deg);
/* Safari 和 Chrome */
-o-transform: rotate(-50deg);
/* Opera */
display: flex;
justify-content: center;
position: relative;
width: 170px;
height: 400px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #3C47D7;
box-shadow: 20px 20px 60px #4650E5;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 14%;
width: 75%;
height: 160px;
}
.monster__noses {
top: 50%;
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__nose {
width: 8px;
height: 12px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
.avatar-eye {
position: absolute;
top: -10%;
width: 65px;
height: 65px;
background: linear-gradient(105deg, white, #cb87f4);
border-radius: 100%;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
margin: 3px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.avatar-eye--green {
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}
.avatar-eye--violet {
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}
.eye--left {
left: 10%;
}
.eye--right {
left: 85%;
}
.eye--center {
left: 45%;
top: 10%;
}
.avatar-eye-pupil {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
z-index: 100;
border-radius: 100%;
}
.pupil--green {
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}
.pupil--pink {
background: linear-gradient(135deg, #f1a183, #8535cd);
}
.avatar-eye-pupil-blackThing {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
background: #2c2f32;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.avatar-eye-pupil-lightReflection {
position: absolute;
width: 7px;
height: 7px;
left: 25%;
top: 10%;
background: #ebebeb;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/**/
@keyframes t {
0%,
10%,
80%,
100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%,
10%,
80%,
100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%,
10%,
100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%,
20%,
100% {
bottom: -80px;
}
30%,
90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
</style>
tuniao-ui/components/tn-empty/tn-empty.vue
+190
View File
@@ -0,0 +1,190 @@
<template>
<view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
<view
v-if="!isImage"
class="tn-empty__icon"
:class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]"
:style="[iconStyle]"
></view>
<image
v-else
class="tn-empty__image"
:style="[imageStyle]"
:src="icon"
mode="widthFix"
></image>
<view
class="tn-empty__text"
:style="[textStyle]"
>{{ text ? text : icons[mode]}}</view>
<view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
<slot/>
</view>
</view>
</template>
<script>
export default {
name: 'tn-empty',
props: {
// 显示空白页
show: {
type: Boolean,
default: true
},
// 内置icon的名称
// 图片路径，建议使用绝对路径
icon: {
type: String,
default: ''
},
// 预置图标类型
mode: {
type: String,
default: 'data'
},
// 提示文字
text: {
type: String,
default: ''
},
// 文字颜色
textColor: {
type: String,
default: ''
},
// 文字大小，单位rpx
textSize: {
type: Number,
default: 0
},
// 图标颜色
iconColor: {
type: String,
default: ''
},
// 图标大小，单位rpx
iconSize: {
type: Number,
default: 0
},
// 图片宽度（当图标为图片时生效），单位rpx
imgWidth: {
type: Number,
default: 0
},
// 图片高度（当图标为图片时生效），单位rpx
imgHeight: {
type: Number,
default: 0
},
// 自定义组件样式
customStyle: {
type: Object,
default() {
return {}
}
}
},
computed: {
emptyStyle() {
let style = {}
Object.assign(style, this.customStyle)
return style
},
iconStyle() {
let style = {}
if (this.iconSize) {
style.fontSize = this.iconSize + 'rpx'
}
if (this.iconColor) {
style.color = this.iconColor
}
return style
},
imageStyle() {
let style = {}
if (this.imgWidth) {
style.width = this.imgWidth + 'rpx'
}
if (this.imgHeight) {
style.height = this.imgHeight + 'rpx'
}
return style
},
textStyle() {
let style = {}
if (this.textColor) {
style.color = this.textColor
}
if (this.textSize) {
style.fontSize = this.textSize + 'rpx'
}
return style
},
// 判断传递的icon是否为图片
isImage() {
return this.icon.indexOf('/') >= 0
}
},
data() {
return {
icons: {
cart: '购物车为空',
page: '页面不存在',
search: '搜索结果为空',
address: '地址为空',
network: '网络不通',
order: '订单为空',
coupon: '优惠券为空',
favor: '暂无收藏',
permission: '无权限',
history: '历史记录为空',
message: '暂无消息',
list: '列表为空',
data: '暂无数据',
comment: '暂无评论'
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&__icon {
margin-top: 14rpx;
color: #AAAAAA;
font-size: 90rpx;
}
&__image {
width: 160rpx;
height: 160rpx;
}
&__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20rpx;
color: #AAAAAA;
font-size: 30rpx;
}
&__slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
}
</style>
tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
+359
View File
@@ -0,0 +1,359 @@
<template>
<view
class="tn-goods-nav-class tn-goods-nav"
:class="[
backgroundColorClass,
{
'tn-goods-nav--fixed': fixed,
'tn-safe-area-inset-bottom': safeAreaInsetBottom
}
]"
:style="[backgroundColorStyle, navStyle]"
>
<view class="options">
<view
v-for="(item, index) in optionsData"
:key="index"
class="options__item"
:class="[{'options__item--avatar': item.showAvatar}]"
@tap="handleOptionClick(index)"
>
<block v-if="item.showAvatar">
<tn-avatar
:src="item.avatar"
size="sm"
:badge="item.showBadge"
:badgeText="item.count"
:badgeBgColor="item.countBackgroundColor"
:badgeColor="item.countFontColor"
:badgeSize="26"
></tn-avatar>
</block>
<block v-else>
<view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]">
<tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge>
</view>
<view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view>
</block>
</view>
</view>
<view class="buttons">
<view
v-for="(item, index) in buttonGroupsData"
:key="index"
class="buttons__item"
:class="[buttonClass(index)]"
:style="[buttonStyle(index)]"
@tap="handleButtonClick(index)"
>
<view class="buttons__item__text">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-goods-nav',
props: {
// 选项信息
// 建议不超过3个
// {
// icon: '', // 图标名称
// text: '', // 显示的文本
// count: '', // 角标的值
// countBackgroundColor: '', // 角标背景颜色
// countFontColor: '', // 角标字体颜色
// iconColor: '', // 图标颜色
// textColor: '', // 文本颜色
// avatar: '', // 显示头像（此时将不显示图标和文本）
// }
options: {
type: Array,
default() {
return [{
icon: 'shop',
text: '店铺'
},{
icon: 'service',
text: '客服'
},{
icon: 'star',
text: '收藏'
}]
}
},
// 按钮组
// 建议不超过2个
// {
// text: '', // 显示的文本
// backgroundColor: '', // 按钮背景颜色
// color: '' // 文本颜色
// }
buttonGroups: {
type: Array,
default() {
return [{
text: '加入购物车',
backgroundColor: '#FFA726',
color: '#FFFFFF'
},{
text: '结算',
backgroundColor: '#FF7043',
color: '#FFFFFF'
}]
}
},
// 背景颜色
backgroundColor: {
type: String,
default: ''
},
// 导航的高度，单位rpx
height: {
type: Number,
default: 0
},
// 导航的层级
zIndex: {
type: Number,
default: 0
},
// 按钮类型
// rect -> 方形 paddingRect -> 上下带边距方形 round -> 圆角
buttonType: {
type: String,
default: 'rect'
},
// 是否固定在底部
fixed: {
type: Boolean,
default: false
},
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: {
type: Boolean,
default: false
}
},
computed: {
backgroundColorStyle() {
return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
},
navStyle() {
let style = {}
if (this.height) {
style.height = this.height + 'rpx'
}
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav
return style
},
// 选项style
optionStyle() {
return (index, type) => {
let style = {}
const item = this.optionsData[index]
if (type === 'icon' && item.iconColor) {
style.color = item.iconColor
} else if (type === 'text' && item.fontColor) {
style.color = item.fontColor
}
return style
}
},
// 按钮class
buttonClass() {
return (index) => {
let clazz = ''
const item = this.buttonGroupsData[index]
if (item.backgroundColorClass) {
clazz += ` ${item.backgroundColorClass}`
}
if (item.colorClass) {
clazz += ` ${item.colorClass}`
}
clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}`
return clazz
}
},
// 按钮style
buttonStyle() {
return (index) => {
let style = {}
const item = this.buttonGroupsData[index]
if (item.backgroundColorStyle) {
style.backgroundColor = item.backgroundColorStyle
}
if (item.colorStyle) {
style.color = item.colorStyle
}
return style
}
}
},
watch: {
options(val) {
this.initData()
},
buttonGroups(val) {
this.initData()
}
},
data() {
return {
// 保存选项数据
optionsData: [],
// 保存按钮组数据
buttonGroupsData: []
}
},
created() {
this.initData()
},
methods: {
// 初始化选项和按钮数据
initData() {
this.handleOptionsData()
this.handleButtonGroupsData()
},
// 选项点击事件
handleOptionClick(index) {
this.$emit('optionClick', {
index: index
})
},
// 按钮点击事件
handleButtonClick(index) {
this.$emit('buttonClick', {
index: index
})
},
// 处理选项组数据
handleOptionsData() {
this.optionsData = this.options.map((item) => {
let option = {...item}
option.showAvatar = item.hasOwnProperty('avatar')
if (item.hasOwnProperty('count')) {
const count = this.$t.number.formatNumberString(item.count, 2)
option.showBadge = true
option.count = typeof count === 'number' ? String(count) : count
option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF'
}
return option
})
},
// 处理按钮组数据
handleButtonGroupsData() {
this.buttonGroupsData = this.buttonGroups.map((item) => {
let button = {...item}
if (item.hasOwnProperty('backgroundColor')) {
button.backgroundColorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.backgroundColor)
button.backgroundColorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.backgroundColor)
}
if (item.hasOwnProperty('color')) {
button.colorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.color)
button.colorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.color)
}
return button
})
}
}
}
</script>
<style lang="scss" scoped>
.tn-goods-nav {
background-color: #FFFFFF;
display: flex;
flex-direction: row;
align-items: center;
height: 88rpx;
width: 100%;
box-sizing: content-box;
&--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.options {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
color: #AAAAAA;
&__item {
padding: 0 26rpx;
&--avatar {
padding: 0rpx 0rpx 0rpx 26rpx !important;
}
&__icon {
position: relative;
font-size: 36rpx;
margin-bottom: 6rpx;
}
&__text {
font-size: 22rpx;
}
}
}
.buttons {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
&__item {
flex: 1;
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: center;
&--rect {
height: 100%;
}
&--padding-rect {
height: 80%;
}
&--round {
height: 75%;
&:first-child {
border-top-left-radius: 100rpx;
border-bottom-left-radius: 100rpx;
}
&:last-child {
border-top-right-radius: 100rpx;
border-bottom-right-radius: 100rpx;
}
}
&__text {
display: inline-block;
font-weight: bold;
font-size: 30rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
</style>
tuniao-ui/components/tn-landscape/tn-landscape.vue
+225
View File
@@ -0,0 +1,225 @@
<template>
<view class="tn-landscape-class tn-landscape">
<view v-if="showValue" class="tn-landscape__container" :style="[containerStyle]">
<slot></slot>
<view
v-if="closeBtn"
class="tn-landscape__icon tn-icon-close-fill"
:class="[{
'tn-landscape__icon--left-top': closePosition === 'leftTop',
'tn-landscape__icon--right-top': closePosition === 'rightTop',
'tn-landscape__icon--bottom': closePosition === 'bottom'
}]"
:style="[closeBtnStyle]"
@tap="close"
></view>
</view>
<view
v-if="mask"
class="tn-landscape__mask"
:class="[{'tn-landscape__mask--show': showValue}]"
:style="[maskStyle]"
@tap="closeMask"
></view>
</view>
</template>
<script>
export default {
name: 'tn-landscape',
props: {
// 显示
show: {
type: Boolean,
default: false
},
// 显示关闭图标
closeBtn: {
type: Boolean,
default: true
},
// 关闭图标颜色
closeColor: {
type: String,
default: ''
},
// 关闭图标大小，单位rpx
closeSize: {
type: Number,
default: 0
},
// 关闭图标位置
// leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
closePosition: {
type: String,
default: 'rightTop'
},
// 关闭图标top值，单位rpx
// 当关闭图标在leftTop或者rightTop时生效
closeTop: {
type: Number,
default: 0
},
// 关闭图标right值，单位rpx
// 当关闭图标在RightTop时生效
closeRight: {
type: Number,
default: 0
},
// 关闭图标bottom值，单位rpx
// 当关闭图标在bottom时生效
closeBottom: {
type: Number,
default: 0
},
// 关闭图标left值，单位rpx
// 当关闭图标在leftTop时生效
closeLeft: {
type: Number,
default: 0
},
// 显示遮罩
mask: {
type: Boolean,
default: true
},
// 点击遮罩可以关闭
maskCloseable: {
type: Boolean,
default: true
},
// zIndex
zIndex: {
type: Number,
default: 0
}
},
computed: {
containerStyle() {
let style = {}
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.landsacpe
return style
},
closeBtnStyle() {
let style = {}
if (this.closePosition === 'leftTop') {
if (this.closeTop) {
style.top = this.closeTop + 'rpx'
}
if (this.closeLeft) {
style.left = this.closeLeft + 'rpx'
}
} else if (this.closePosition === 'rightTop') {
if (this.closeTop) {
style.top = this.closeTop + 'rpx'
}
if (this.closeRight) {
style.right = this.closeRight + 'rpx'
}
} else if (this.closePosition === 'bottom') {
if (this.closeBottom) {
style.bottom = this.closeBottom + 'rpx'
}
}
if (this.closeSize) {
style.fontSize = this.closeSize + 'rpx'
}
if (this.closeColor) {
style.color = this.closeColor
}
return style
},
maskStyle() {
let style = {}
style.zIndex = this.zIndex ? this.zIndex - 1 : this.$t.zIndex.landsacpe - 1
return style
}
},
watch: {
show: {
handler(val) {
this.showValue = val
},
immediate: true
}
},
data() {
return {
showValue: false
}
},
methods: {
// 关闭压屏窗
close() {
this.showValue = false
this.$emit('close')
},
// 点击遮罩关闭
closeMask() {
if (!this.maskCloseable) return
this.close()
}
}
}
</script>
<style lang="scss" scoped>
.tn-landscape {
width: 100%;
overflow: hidden;
&__container {
max-width: 100%;
position: fixed;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&__icon {
position: absolute;
text-align: center;
font-size: 50rpx;
color: #FFFFFF;
&--left-top {
top: -40rpx;
left: 20rpx;
}
&--right-top {
top: -40rpx;
right: 40rpx;
}
&--bottom {
left: 50%;
bottom: -40rpx;
transform: translateX(-50%);
}
}
&__mask {
position: fixed;
width: 100%;
height: 100%;
background-color: $tn-mask-bg-color;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transform: scale3d(1, 1, 0);
transition: all 0.25s ease-in;
&--show {
opacity: 1 !important;
transform: scale3d(1, 1, 1);
}
}
}
</style>
tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
+254
View File
@@ -0,0 +1,254 @@
<template>
<view class="tn-lazy-load-class tn-lazy-load">
<view
class="tn-lazy-load__item"
:class="[`tn-lazy-load__item--${elIndex}`]"
:style="[lazyLoadItemStyle]"
>
<view class="tn-lazy-load__item__content">
<image
v-if="!error"
class="tn-lazy-load__item__image"
:style="[imageStyle]"
:src="show ? image : loadingImg"
:mode="imgMode"
@load="handleImgLoaded"
@error="handleImgError"
@tap="handleImgClick"
></image>
<image
v-else
class="tn-lazy-load__item__image tn-lazy-load__item__image--error"
:style="[imageStyle]"
:src="errorImg"
:mode="imgMode"
@load="handleErrorImgLoaded"
@tap="handleImgClick"
></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-lazy-load',
props: {
// 组件标识
index: {
type: [String, Number],
default: ''
},
// 待显示的图片地址
image: {
type: String,
default: ''
},
// 图片裁剪模式
imgMode: {
type: String,
default: 'scaleToFill'
},
// 占位图片路径
loadingImg: {
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
},
// 加载失败的错误占位图
errorImg: {
type: String,
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162trcPDw5ubm7i4uNzc3Obm5s3NzaGhoeHh4cjIyKenp9LS0r29vbKysuvr67sDMEkAAAlpSURBVHja7NzpYqMgAIVRUVHc8/5PO66R1WAbOzX97q+ZtDEpR0AWTR7kVyWhCAAhgABCAAGEAAIIAQQQAggBBBACCCAEEEAIIIAQQAgggBBAACGAAEIAAYQAQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAsqeX5QWHKIcs/Ptl03lfL4zDFPWfBGmSpPn+IZzSH5KkCL5B+n+oklwz6Iz//R2QzFOabzhEmiRirAmZt/bl0w/dpMbLqeeo4wEdpC7zR5WAPKziHKtO7ql+ReKvIa9BxgNaL5ZtEkpeAGIVp5jKJa09xVo9vgSSzQcszdYvmOqjQNSQ6pHK6rO1n1Xj32788miwHLaZz1Tl9i/yayDlYJ/60/+lp8GSY7OY1B8E4p55bWmfquFk22GLuUUxi78cX+m+BjL2GLkhMrV+/muS6Sfic0CEp5T1Yu2OQdTzsKV0MJV73KVjroyTffxfuv5Tf3fd6iLT9wz8YdVHgUzF2Is9/Xhi5sYJqP1w/GUpjOiHVbaI0w2L+pg3GZzvtokcgHxWDXHaiy78l3sPke01qphamT5c+dqyeAGSumdL/mkggauTam0e3L/mPEiqtzKDbl0Z1Wn8xOa4ySo8X/7TQIJnY/seEKWf12UmC72CKP9xYjr19RPT7NNA+oMO+R0gwmlotAry+C6I0f59ch8yXVQOr0BKYcXt1IUYRyCt+Ur9HGsrQKI79WY9sY9ARPKlzFOFdb41ioD8b5Bp+mqeeRKAxINkESBFGpOpKhgv9OuYpH8A8l4Qa3qp60Kl2/k+rG2sWafuuyCBafb2j4JkgZUob3nWcmicpkxEgmTLLGejTxnWSWCi8lPmsk6DlIHFJv24ojiYyYoGacwL8zXTLEAVaDI/Ybb3NIgKDSv2oXpmHkvNs+PTpMASEdlk7fOZeRk37fwJ6yGnQarQsGIfqqcvx43rTOXY6jf7uKXdRzdLDRPbjIrx1cIj3Kr4KyBFezzgUGuR5893qkOQ19fR2uVBaU+r16LphJNOiatK7PeBZK/Kb+tUn71rcQjSvARpghfH/yG/D2RetTuI3N5QrMWdP46brP7FmKZ//CGQ9At9SL01DLkzY/Vs8Z97fQZ7gelw7jHqCz+/Wile5J4g3Vc79eb5a6oLSue+Ve83gaSv2jp5PxCzjzwFUm9zw9MllSMil1kS4d2E9SaQ1xNo9wMxx0+nQNLnew/WDHvveMAHYm08mofl3TFI/8pD3Q6kMAv6DIi2jTCwRJUvNdDYrrJum9oHhusCbWALonwxBRk1vXMnEGWuT5wAmfYuVGUYpJ7fUZujCN92hvzwWlrFgxSfANKb10DxIMbShnfrynyZZV30imA7P43ArXXHbvBVkTCIuGy25AdBrHmNeBCpL214QdLp9LZarG3IMWrmW0ehtuO7F2PS09UcgqS3B7FKPhpknrStD0HGF/vQRne37LwLG8EbHT4WxN7/Fg0yD9Yr/3br4nnstA+0Il6QxzdBmg8A6a2/IRbkcK9h/uzV8zywF/oSkOyageCPglRWgcWClHnEzs9q/t/SENVXgFijlsq3VtXdCsRp4qObrLLLgjuzSq3fX89ZZW6AfxNIzF6X9FYgThN/fk093KkvHX/hbWd+DqS/FUhlf+G3gohEXzVs3g9iDluWoaW8fL73QhB34u+tIHIf19nLuF4Q98a09Eynnl56q+ePgEhnX+dbQOp6H5XnJ0ACd8dFgkwf12nTOTcEqd2pom+CFF02TIPw6dKmrLS5qOtBpo8b5quUtrwrSGbuqPkeSJqllTFHO02NPxdMrm+y5LKdWyWXjw4vA5nGEtnjuyCFyHqNYvEolzmASm3zK1Eg5zr13lhqV1tlksnVw8Pkwgri7O07AVKLJkutRYw87bPlRpBpNXE8xGb+fhBlvEGrGPLqViu5sILIx9dAmqF1705sxF4M8+R8P5dOdQwi12fMnATpjJ2JSt/POIvU9wPJEs/jduJAjLvU0yFT0i64Yb1bsVi79dA4pEy3TzoHMq2O7Re4vXm5O9+l290NpE4CU+YRIMNye2iaqbVS2AUnn2fsekthYKReVNutVedA5juttyIXrT38mOds+ps9DWhwL7GWc61/DVKPzVN9UHDarf1icU98IOU8tm6L031Iq63t1tKzj3fe/FCpO4F0/i0Z2+yvA1KeGBjqj1qYx8/zoxpKZ1Yl367I1k+sfcft/QPy9csXy/32qX1qLZsrryG5BGQaRj0vc/b7N54XXq293TCLB5HO42Fy517obW19b+qjl3CHp0fdLJcWvmdy1etESi/uAdJrs1hTaUklHuW8qSDdC3UfXVR5cnD3rAFSSqtFb7z7eapErx7rC739jCXfbK3aWiipjXo8UbmxXPa7QQq9R289j2Gr88N7Ag5AlHPRKc37pNZv0CZtX1tVMG6rm8qW1/KlCgQvcMss933ybwXZz3dReW5yce4ByZtHFIhwT9kmjxg8BzbKDUe1PB9edBJqSN7/KM1LmqyuMZ5BpeTUw1aD/uDI0relPfSHa/Wn8Pxq1BNfxy/h3IdwOJqIKumb9CHvTqMefyY82RoQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAGEAAIIAQQQAgggBBBACCAEEEAIIIAQQAAhgABCACGAAEIAAYQAAggBBBACCAEEEAIIIAQQQAggfyL/BBgA8PgLdH0TBtkAAAAASUVORK5CYII='
},
// 图片进入可见区域前多少像素前，单位rpx，开始加载图片
// 负数为图片超出屏幕底部多少像素后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发（图片还没出现在屏幕上）
threshold: {
type: [Number, String],
default: 100
},
// 是否开启过渡效果
isEffect: {
type: Boolean,
default: true
},
// 动画过渡时间
duration: {
type: [String, Number],
default: 500
},
// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
effect: {
type: String,
default: 'ease-in-out'
},
// 图片高度，单位rpx
height: {
type: [String, Number],
default: 450
},
// 图片圆角
borderRadius: {
type: String,
default: ''
}
},
computed: {
thresholdValue() {
// 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
let threshold = uni.upx2px(Math.abs(this.threshold))
return this.threshold < 0 ? -threshold : threshold
},
lazyLoadItemStyle() {
let style = {}
style.opacity = Number(this.opacity)
if (this.borderRadius) {
style.borderRadius = this.borderRadius
}
// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
style.transition = `opacity ${this.time / 1000}s ${this.effect}`
style.height = this.$t.string.getLengthUnitValue(this.height)
return style
},
imageStyle() {
let style = {}
if (typeof this.height === 'string' && this.height.indexOf('%') === -1) {
style.height = this.$t.string.getLengthUnitValue(this.height)
}
return style
}
},
watch: {
show(val) {
// 如果不开启过渡效果直接返回
if (!this.effect) return
this.time = 0
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
this.opacity = 0
setTimeout(() => {
this.time = this.duration
this.opacity = 1
}, 30)
},
image(val) {
// 修改图片后重置部分变量
if (!val) {
// 如果传入null或者''，或者undefined，标记为错误状态
this.error = true
} else {
this.init()
this.error = false
}
}
},
data() {
return {
elIndex: this.$t.uuid(),
// 显示图片
show: false,
// 图片透明度
opacity: 1,
// 动画时间
time: this.duration,
// 懒加载状态
// loadlazy-懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
loadStatus: '',
// 图片加载失败
error: false
}
},
created() {
// 由于一些特殊原因，不能将此变量放到data中定义
this.observer = {}
this.observerName = 'lazyLoadContentObserver'
},
mounted() {
// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
this.$nextTick(() => {
uni.$once('tOnLazyLoadReachBottom', () => {
if (!this.show) this.show = true
})
})
// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
setTimeout(() => {
this.disconnectObserver(this.observerName)
const contentObserver = uni.createIntersectionObserver(this)
contentObserver.relativeToViewport({
bottom: this.thresholdValue
}).observe(`.tn-lazy-load__item--${this.elIndex}`, (res) => {
if (res.intersectionRatio > 0) {
// 懒加载状态改变
this.show = true
// 如果图片已经加载，去掉监听，减少性能消耗
this.disconnectObserver(this.observerName)
}
})
this[this.observerName] = contentObserver
}, 50)
},
methods: {
// 初始化
init() {
this.error = false
this.loadStatus = ''
},
// 处理图片点击事件
handleImgClick() {
let whichImg = ''
// 如果show为false，则表示图片还没有开始加载，点击的是最开始占位图
if (this.show === false) whichImg = 'lazyImg'
// 如果error为true，则表示图片加载失败，点击的是错误占位图
else if (this.error === true) whichImg = 'errorImg'
// 点击了正常的图片
else whichImg = 'realImg'
this.$emit('click', {
index: this.index,
whichImg: whichImg
})
},
// 处理图片加载完成事件，通过show来区分是占位图触发还是加载真正的图片触发
handleImgLoaded() {
if (this.loadStatus = '') {
// 占位图加载完成
this.loadStatus = 'lazyed'
}
else if (this.loadStatus == 'lazyed') {
// 真正的图片加载完成
this.loadStatus = 'loaded'
this.$emit('loaded', this.index)
}
},
// 处理错误图片加载完成
handleErrorImgLoaded() {
this.$emit('error', this.index)
},
// 处理图片加载失败
handleImgError() {
this.error = true
},
disconnectObserver(observerName) {
const observer = this[observerName]
observer && observer.disconnect()
}
}
}
</script>
<style lang="scss" scoped>
.tn-lazy-load {
&__item {
background-color: $tn-bg-gray-color;
overflow: hidden;
&__image {
// 解决父容器会多出3px的问题
display: block;
width: 100%;
// 骗系统开启硬件加速
transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下”
will-change: transform;
}
}
}
</style>
tuniao-ui/components/tn-load-more/tn-load-more.vue
+188
View File
@@ -0,0 +1,188 @@
<template>
<view class="tn-load-more-class tn-load-more">
<view
class="tn-load-more__wrap"
:class="[backgroundColorClass]"
:style="[loadStyle]"
>
<view class="tn-load-more__line"></view>
<view
class="tn-load-more__content"
:class="[{'tn-load-more__content--more': (status === 'loadmore' || status === 'nomore')}]"
>
<view class="tn-load-more__loading">
<tn-loading
class="tn-load-more__loading__icon"
:mode="loadingIconType"
:show="status === 'loading' && loadingIcon"
:color="loadingIconColor"
></tn-loading>
</view>
<view
class="tn-load-more__text"
:class="[fontColorClass, {'tn-load-more__text--dot': (status === 'nomore' && dot)}]"
:style="[loadTextStyle]"
>{{ showText }}</view>
</view>
<view class="tn-load-more__line"></view>
</view>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
name: 'tn-load-more',
mixins: [componentsColorMixin],
props: {
// 加载状态
// loadmore -> 加载更多
// loading -> 加载中
// nomore -> 没有更多
status: {
type: String,
default: 'loadmore'
},
// 显示加载图标
loadingIcon: {
type: Boolean,
default: true
},
// 加载图标样式，参考tn-loading组件的加载类型
loadingIconType: {
type: String,
default: 'circle'
},
// 在圆圈加载状态下，圆圈的颜色
loadingIconColor: {
type: String,
default: ''
},
// 显示的文字
loadText: {
type: Object,
default() {
return {
loadmore: '加载更多',
loading: '正在加载...',
nomore: '没有更多了'
}
}
},
// 是否显示粗点，在nomore状态下生效
dot: {
type: Boolean,
default: false
},
// 自定义组件样式
customStyle: {
type: Object,
default() {
return {}
}
}
},
computed: {
loadStyle() {
let style = {}
if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
}
// 合并用户自定义样式
if (Object.keys(this.customStyle).length > 0) {
Object.assign(style, this.customStyle)
}
return style
},
loadTextStyle() {
let style = {}
if (this.fontColorStyle) {
style.color = this.fontColorStyle
}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
style.lineHeight = this.$t.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
}
return style
},
// 显示的提示文字
showText() {
let text = ''
if (this.status === 'loadmore') text = this.loadText.loadmore || '加载更多'
else if (this.status === 'loading') text = this.loadText.loading || '正在加载...'
else if (this.status === 'nomore' && this.dot) text = this.dotText
else text = this.loadText.nomore || '没有更多了'
return text
}
},
data() {
return {
// 粗点
dotText: '●'
}
},
methods: {
// 处理加载更多事件
loadMore() {
// 只有在 loadmore 状态下点击才会发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
if (this.status === 'loadmore') this.$emit('loadmore')
}
}
}
</script>
<style lang="scss" scoped>
.tn-load-more {
&__wrap {
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: $tn-content-color;
}
&__line {
vertical-align: middle;
border: 1px solid $tn-content-color;
width: 50rpx;
transform: scaleY(0.5);
}
&__content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 12rpx;
&--more {
position: relative;
}
}
&__loading {
margin-right: 8rpx;
&__icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
&__text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 30rpx;
&--dot {
font-size: 28rpx;
}
}
}
</style>
tuniao-ui/components/tn-skeleton/tn-skeleton.vue
+254
View File
@@ -0,0 +1,254 @@
<template>
<view
v-if="show"
class="tn-skeleton-class tn-skeleton"
:class="[backgroundColorClass]"
:style="[skeletonStyle]"
@touchmove.stop.prevent
>
<view
v-for="(item, index) in rectNodes"
:key="$t.uuid()"
class="tn-skeleton__item tn-skeleton__item--rect"
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
:style="[itemStyle('rect', item)]"
></view>
<view
v-for="(item, index) in circleNodes"
:key="$t.uuid()"
class="tn-skeleton__item tn-skeleton__item--circle"
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
:style="[itemStyle('circle', item)]"
></view>
<view
v-for="(item, index) in filletNodes"
:key="$t.uuid()"
class="tn-skeleton__item tn-skeleton__item--fillet"
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
:style="[itemStyle('fillet', item)]"
></view>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
name: 'tn-skeleton',
mixins: [ componentsColorMixin ],
props: {
// 显示骨架屏
show: {
type: Boolean,
default: false
},
// 需要渲染的元素背景颜色
elBackgroundColor: {
type: String,
default: ''
},
// 开启加载动画
animation: {
type: Boolean,
default: true
},
// 矩形元素自定义样式
rectCustomStyle: {
type: Object,
default() {
return {}
}
},
// 圆形元素自定义样式
circleCustomStyle: {
type: Object,
default() {
return {}
}
},
// 圆角元素自定义样式
filletCustomStyle: {
type: Object,
default() {
return {}
}
}
},
computed: {
elBackgroundColorStyle() {
return this.$t.colorUtils.getBackgroundColorStyle(this.elBackgroundColor)
},
elBackgroundColorClass() {
return this.$t.colorUtils.getBackgroundColorInternalClass(this.elBackgroundColor)
},
// 骨架屏样式
skeletonStyle() {
let style = {}
style.width = this.skeletonWidth + 'px'
style.height = this.skeletonHeight + 'px'
if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
}
style.left = this.left + 'px'
style.top = this.top + 'px'
return style
},
// 元素样式
itemStyle() {
return (type, item) => {
let style = {}
style.width = item.width + 'px'
style.height = item.height + 'px'
if (this.elBackgroundColorStyle) {
style.backgroundColor = this.elBackgroundColorStyle
}
style.left = (item.left - this.left) + 'px'
style.top = (item.top - this.top) + 'px'
if (type === 'rect') {
Object.assign(style, this.rectCustomStyle)
} else if (type === 'circle') {
style.borderRadius = (item.width / 2) + 'px'
Object.assign(style, this.circleCustomStyle)
} else if (type === 'fillet') {
Object.assign(style, this.filletCustomStyle)
}
return style
}
}
},
data() {
return {
// 骨架屏宽度
skeletonWidth: 750,
// 骨架屏高度
skeletonHeight: 1500,
// 圆角元素
filletNodes: [],
// 圆形元素
circleNodes: [],
// 矩形元素
rectNodes: [],
// 元素偏移位置
top: 0,
left: 0
}
},
mounted() {
this.$nextTick(() => {
// 获取系统信息
const systemInfo = uni.getSystemInfoSync()
this.skeletonWidth = systemInfo.safeArea.width
this.skeletonHeight = systemInfo.safeArea.height
this.selectQueryInfo()
})
},
methods: {
// 查询节点信息
selectQueryInfo() {
// 获取整个父容器的宽高作为骨架屏的宽高
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
let query = null
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
// #ifdef MP-WEIXIN
query = uni.createSelectorQuery().in(this.$parent)
// #endif
// #ifndef MP-WEIXIN
query = uni.createSelectorQuery()
// #endif
query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
console.log(res);
this.skeletonWidth = res[0][0].width
this.skeletonHeight = res[0][0].height
this.top = res[0][0].bottom - res[0][0].height
this.left = res[0][0].left
})
// 获取元素列表
this.getRectElements()
this.getCircleElements()
this.getFillteElements()
},
// 矩形元素列表
getRectElements() {
let query = null
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
// #ifdef MP-WEIXIN
query = uni.createSelectorQuery().in(this.$parent)
// #endif
// #ifndef MP-WEIXIN
query = uni.createSelectorQuery()
// #endif
query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
this.rectNodes = res[0]
})
},
// 圆形元素列表
getCircleElements() {
let query = null
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
// #ifdef MP-WEIXIN
query = uni.createSelectorQuery().in(this.$parent)
// #endif
// #ifndef MP-WEIXIN
query = uni.createSelectorQuery()
// #endif
query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
this.circleNodes = res[0]
})
},
// 圆角元素列表
getFillteElements() {
let query = null
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
// #ifdef MP-WEIXIN
query = uni.createSelectorQuery().in(this.$parent)
// #endif
// #ifndef MP-WEIXIN
query = uni.createSelectorQuery()
// #endif
query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
this.filletNodes = res[0]
})
}
}
}
</script>
<style lang="scss" scoped>
.tn-skeleton {
position: absolute;
z-index: 9998;
overflow: hidden;
background-color: #FFFFFF;
&__item {
position: absolute;
background-color: #F0F0F0;
&--fillet {
border-radius: 10rpx;
}
&--fade {
width: 100%;
height: 100%;
background-color: #E6E6E6;
animation-duration: 1.5s;
animation-name: blink;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
</style>
tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
+324
View File
@@ -0,0 +1,324 @@
<template>
<view class="tn-verification-code-class tn-verification-code">
<view class="tn-code__container">
<input class="tn-code__input" :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxLength" @input="getValue" />
<view v-for="(item, index) in loopCharArr" :key="index">
<view
class="tn-code__item"
:class="[{
'tn-code__item--breathe': breathe && charArrLength === index,
'tn-code__item__box': mode === 'box',
'tn-code__item__box--active': mode === 'box' && charArrLength === index
}]"
:style="[itemStyle(index)]"
>
<view
v-if="mode !== 'middleLine'"
class="tn-code__item__line tn-code__item__line--placeholder"
:style="[placeholderLineStyle(index)]"
></view>
<view
v-if="mode === 'middleLine' && charArrLength <= index"
class="tn-code__item__line tn-code__item__line--middle"
:class="[{
'tn-code__item__line--bold': bold,
'tn-code__item--breathe': breathe && charArrLength === index,
'tn-code__item__line--active': charArrLength === index
}]"
:style="[lineStyle(index)]"
></view>
<view
v-if="mode === 'bottomLine'"
class="tn-code__item__line tn-code__item__line--bottom"
:class="[{
'tn-code__item__line--bold': bold,
'tn-code__item--breathe': breathe && charArrLength === index,
'tn-code__item__line--active': charArrLength === index
}]"
:style="[lineStyle(index)]"
></view>
<block v-if="!dotFill">
<text>{{ charArr[index] ? charArr[index] : '' }}</text>
</block>
<block v-else>
<text class="tn-code__item__dot">{{ charArr[index] ? '●' : '' }}</text>
</block>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-verification-code',
props: {
// 验证码的值
value: {
type: [String, Number],
default: ''
},
// 最大输入长度
maxLength: {
type: Number,
default: 4
},
// 显示模式
// box -> 盒子 bottomLine -> 底部横线 middleLine -> 中间横线
mode: {
type: String,
default: 'box'
},
// 用圆点填充空白位置
dotFill: {
type: Boolean,
default: false
},
// 字体加粗
bold: {
type: Boolean,
default: false
},
// 字体大小
fontSize: {
type: [String, Number],
default: ''
},
// 激活时颜色
activeColor: {
type: String,
default: ''
},
// 未激活时颜色
inactiveColor: {
type: String,
default: ''
},
// 输入框宽度，单位rpx
inputWidth: {
type: Number,
default: 80
},
// 当前激活的item带呼吸效果
breathe: {
type: Boolean,
default: true
},
// 自动获取焦点
focus: {
type: Boolean,
default: false
},
// 隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可
disabledKeyboard: {
type: Boolean,
default: false
}
},
computed: {
// 拆分要显示的字符
charArr() {
return this.valueModel.split('')
},
// 当前输入字符的长度
charArrLength() {
return this.charArr.length
},
// 输入框的个数
loopCharArr() {
return new Array(this.maxLength)
},
itemStyle() {
return (index) => {
let style = {}
style.fontWeight = this.bold ? 'bold' : 'normal'
if (this.fontSize) {
style.fontSize = this.fontSize + 'rpx'
}
if (this.inputWidth) {
style.width = this.inputWidth + 'rpx'
style.height = this.inputWidth + 'rpx'
style.lineHeight = this.inputWidth + 'rpx'
}
if (this.inactiveColor) {
style.color = this.inactiveColor
style.borderColor = this.inactiveColor
}
if (this.mode === 'box' && this.charArrLength === index) {
style.borderColor = this.activeColor
}
return style
}
},
placeholderLineStyle() {
return (index) => {
let style = {}
style.display = this.charArrLength === index ? 'block' : 'none'
if (this.inputWidth) {
style.height = (this.inputWidth * 0.5) + 'rpx'
}
return style
}
},
lineStyle() {
return (index) => {
let style = {}
if (this.inactiveColor) {
style.backgroundColor = this.inactiveColor
}
if (this.charArrLength === index && this.activeColor) {
style.backgroundColor = this.activeColor
}
return style
}
}
},
watch: {
value: {
handler(val) {
// 转换为字符串
val = String(val)
// 截掉超出的部分
this.valueModel = val.substring(0, this.maxLength)
},
immediate: true
}
},
data() {
return {
valueModel: ''
}
},
methods: {
// 获取填写的值
getValue(e) {
const {
value
} = e.detail
this.valueModel = value
// 判断输入的长度是否超出了maxlength的值
if (String(value).length > this.maxLength) return
// 未达到maxlength之前，触发change事件，否则触发finish事件
this.$emit('change', value)
this.$emit('input', value)
if (String(value).length == this.maxLength) {
this.$emit('finish', value)
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-verification-code {
text-align: center;
.tn-code {
&__container {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
&__input {
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
text-align: left;
z-index: 9;
opacity: 0;
background: none;
}
&__item {
position: relative;
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 10rpx 10rpx;
font-size: 60rpx;
font-weight: bold;
color: #838383;
&--breathe {
animation: breathe 2s infinite ease;
}
&__box {
border: 2rpx solid #AAAAAA;
border-radius: 6rpx;
&--active {
animation-timing-function: ease-in-out;
animation-duration: 1500ms;
animation-iteration-count: infinite;
animation-direction: alternate;
overflow: hidden;
border: 2rpx solid #01BEFF;
}
}
&__line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #AAAAAA;
&--bold {
height: 4px !important;
}
&--placeholder {
display: none;
width: 2rpx;
height: 40rpx;
}
&--middle, &--bottom {
width: 80%;
height: 2px;
border-radius: 2px;
}
&--bottom {
top: auto !important;
bottom: 0;
transform: translateX(-50%) !important;
}
&--active {
background-color: #01BEFF !important;
}
}
&__dot {
font-size: 34rpx;
line-height: 34rpx;
}
}
}
}
@keyframes breathe {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
</style>
tuniao-ui/iconfont.css
+83 -3
View File
File diff suppressed because one or more lines are too long
tuniao-ui/libs/config/zIndex.js
+2
View File
@@ -1,7 +1,9 @@
// 各组件的z-index值
export default {
landsacpe: 29100,
navbar: 29090,
toast: 20090,
goodsNav: 20089,
alert: 20085,
modal: 20080,
popup: 20075,
tuniao-ui/libs/function/number.js
+17 -1
View File
@@ -89,8 +89,24 @@ function getDigit(number) {
return digit
}
/**
* 获取指定范围的随机数
* @param {Object} min 最小值
* @param {Object} max 最大值
*/
function random(min, max) {
if (min >= 0 && max > 0 && max >= min) {
let gab = max - min + 1
return Math.floor(Math.random() * gab + min)
} else {
return 0
}
}
export default {
formatNumberString,
formatNumberAddZero,
formatNumberAddUnit
formatNumberAddUnit,
random
}
tuniao-ui/libs/function/string.js
+26 -1
View File
@@ -32,7 +32,32 @@ function getLengthUnitValue(value, unit = 'rpx') {
else return value + unit
}
/**
* 将驼峰命名的字符串转换为指定连接符来进行连接
*
* @param {Object} string 待转换的字符串
* @param {Object} replace 进行连接的字符
*/
function humpConvertChar(string, replace = '_') {
if (!string || !replace) {
return ''
}
return string.replace(/([A-Z])/g, `${replace}$1`).toLowerCase()
}
function charConvertHump(string, replace = '_') {
if (!string || !replace) {
return ''
}
let reg = RegExp("//" + replace + "(/w)/", "g")
return string.replace(reg, function(all, letter) {
return letter.toUpperCase()
})
}
export default {
trim,
getLengthUnitValue
getLengthUnitValue,
humpConvertChar,
charConvertHump
}