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

修改$t为$tn

Browse Source 
修改部分函数api的名称
This commit is contained in:
jaylen
2022-11-27 16:58:51 +08:00
parent 72d0c5872a
commit fa70ad608a
92 changed files with 1475 additions and 1461 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
basicPage/color/color.vue
+2 -2
View File
@@ -459,12 +459,12 @@
return
}
this.isUpdateColorInfo = true
this.$t.message.loading('加载中...')
this.$tn.message.loading('加载中...')
// this.containerScrollTop = Math.random()
setTimeout(() => {
// this.containerScrollTop = 0
this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
this.$t.message.closeLoading()
this.$tn.message.closeLoading()
this.isUpdateColorInfo = false
}, 10)
// setTimeout(() => {
basicPage/grid-layout/grid-layout.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<!-- #endif-->
<!-- #ifdef MP-WEIXIN -->
<tn-grid-item :style="{width: gridItemWidth}">
<view class="icon__item--icon tn-cool-color-icon" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="icon__item--icon tn-cool-color-icon" :class="[$tn.color.getRandomCoolBgClass(index)]">
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
</view>
</tn-grid-item>
basicPage/icon/icon.vue
+1 -1
View File
@@ -72,7 +72,7 @@
// 点击图标
clickIcon(index, name) {
this.currentIconIndex = index
this.$t.message.toast(name, false, null, 'none', 5000)
this.$tn.message.toast(name, false, null, 'none', 5000)
},
}
}
basicPage/utils/color/index.vue
+13 -13
View File
@@ -48,9 +48,9 @@
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
@@ -68,29 +68,29 @@
methods: {
// 获取随机背景颜色
getRandomBgColor() {
this.randomBgColorClass = this.$t.color.getRandomColorClass()
this.randomBgColorClass = this.$tn.color.getRandomColorClass()
},
// 获取随机颜色
getRandomColor() {
this.randomColorClass = this.$t.color.getRandomColorClass('color')
this.randomColorClass = this.$tn.color.getRandomColorClass('color')
},
// 获取随机酷炫背景颜色
getRandomCoolColor() {
this.randomCoolBgColorClass = this.$t.color.getRandomCoolBgClass()
this.randomCoolBgColorClass = this.$tn.color.getRandomCoolBgClass()
},
// 将hex与rgb互转
convertToRGBOrHex() {
if (this.rgbFlag) {
this.hexRGBValue = this.$t.color.rgbToHex(this.hexRGBValue)
this.hexRGBValue = this.$tn.color.rgbToHex(this.hexRGBValue)
} else {
this.hexRGBValue = this.$t.color.hexToRGB(this.hexRGBValue)
this.hexRGBValue = this.$tn.color.hexToRGB(this.hexRGBValue)
}
this.rgbFlag = !this.rgbFlag
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.basic-utils__color {
background-color: $tn-bg-gray-color;
@@ -101,5 +101,5 @@
width: auto;
padding: 10rpx 20rpx;
}
}
</style>
}
</style>
basicPage/utils/message/index.vue
+25 -25
View File
@@ -91,9 +91,9 @@
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
@@ -107,70 +107,70 @@
methods: {
// 弹出toast
openToast_1() {
this.$t.message.toast('弹出toast')
this.$tn.message.toast('弹出toast')
},
openToast_2() {
this.$t.message.toast('弹出toast icon', false, null, 'success')
this.$tn.message.toast('弹出toast icon', false, null, 'success')
},
openToast_3() {
this.$t.message.toast('弹出toast mask', true)
this.$tn.message.toast('弹出toast mask', true)
},
openToast_4() {
this.$t.message.toast('弹出toast duration', false, null, 'none', 3000)
this.$tn.message.toast('弹出toast duration', false, null, 'none', 3000)
},
openToast_5() {
this.$t.message.toast('弹出toast cb', true, () => {
this.$tn.message.toast('弹出toast cb', true, () => {
setTimeout(() => {
this.$t.message.toast('执行完毕后弹出', true, null, 'success')
this.$tn.message.toast('执行完毕后弹出', true, null, 'success')
}, 500)
})
},
// 关闭Toast
closeToast() {
this.$t.message.closeToast()
this.$tn.message.closeToast()
},
// 弹出loading
openLoading() {
this.$t.message.loading('弹出loading')
this.$tn.message.loading('弹出loading')
setTimeout(() => {
this.closeLoading()
}, 3000)
},
// 关闭loading
closeLoading() {
this.$t.message.closeLoading()
this.$tn.message.closeLoading()
},
// 弹出modal
openModal_1() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了确认按钮')
}, true, () => {
this.$t.message.toast('点击了取消按钮')
this.$tn.message.toast('点击了取消按钮')
})
},
openModal_2() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了确认按钮')
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了确认按钮')
}, false, null)
},
openModal_3() {
this.$t.message.modal("提示", "请进行登录后进行操作", () => {
this.$t.message.toast('点击了跳转按钮')
this.$tn.message.modal("提示", "请进行登录后进行操作", () => {
this.$tn.message.toast('点击了跳转按钮')
}, true, () => {
this.$t.message.toast('点击了拒绝按钮')
this.$tn.message.toast('点击了拒绝按钮')
}, "跳转登录", "拒绝登录")
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.basic-utils__message {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
}
</style>
basicPage/utils/number/index.vue
+23 -23
View File
@@ -12,25 +12,25 @@
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(56) }}</view>
<view>{{ $tn.number.formatNumberString(56) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过2位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(100) }}</view>
<view>{{ $tn.number.formatNumberString(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(899, 3) }}</view>
<view>{{ $tn.number.formatNumberString(899, 3) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过3位自动添加'+'号</view>
<view>{{ $t.number.formatNumberString(1000, 3) }}</view>
<view>{{ $tn.number.formatNumberString(1000, 3) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
@@ -41,19 +41,19 @@
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>只有一位时会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(6) }}</view>
<view>{{ $tn.number.formatNumberAddZero(6) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(16) }}</view>
<view>{{ $tn.number.formatNumberAddZero(16) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>超过两位时不会往前面添加'0'</view>
<view>{{ $t.number.formatNumberAddZero(106) }}</view>
<view>{{ $tn.number.formatNumberAddZero(106) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
@@ -64,37 +64,37 @@
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(100) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>不带单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(100.88) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(100.88) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1000) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(1000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带K单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(1032.89) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(1032.89) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10000) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(10000) }}</view>
</view>
</tn-list-cell>
<tn-list-cell>
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
<view>带W单位</view>
<view>{{ $t.number.formatNumberAddPriceUnit(10875.90) }}</view>
<view>{{ $tn.number.formatNumberAddPriceUnit(10875.90) }}</view>
</view>
</tn-list-cell>
</tn-list-view>
@@ -124,9 +124,9 @@
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
@@ -141,19 +141,19 @@
methods: {
// 获取随机值
getRandomValue() {
this.randomValue = this.$t.number.random(0, 100.99)
this.randomValue = this.$tn.number.random(0, 100.99)
},
// 获取整数随机值
getIntRandomValue() {
this.intRandomValue = this.$t.number.randomInt(0, 100)
this.intRandomValue = this.$tn.number.randomInt(0, 100)
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.basic-utils__number {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
}
</style>
basicPage/utils/string/index.vue
+11 -11
View File
@@ -49,9 +49,9 @@
<view class="tn-padding-bottom-lg"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
@@ -67,23 +67,23 @@
methods: {
// 处理去除空格
handlerTrim() {
this.trimValue = this.$t.string.trim(this.trimValue)
this.trimValue = this.$tn.string.trim(this.trimValue)
},
// 处理将大写字符串转换为指定的连接符连接的字符串
handlerHumpChar() {
this.humpCharValue = this.$t.string.humpConvertChar(this.humpCharValue, '_')
this.humpCharValue = this.$tn.string.humpConvertChar(this.humpCharValue, '_')
},
// 处理将指定的连接字符连接的字符串转换为大写的字符串
handlerCharHump() {
this.charHumpValue = this.$t.string.charConvertHump(this.charHumpValue, '_')
this.charHumpValue = this.$tn.string.charConvertHump(this.charHumpValue, '_')
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.basic-utils__string {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
}
</style>
componentsPage/action-sheet/action-sheet.vue
+2 -2
View File
@@ -116,7 +116,7 @@
// 点击了选项
clickActionSheetItem(index) {
if (index === 1) {
this.$t.message.toast('选择正确')
this.$tn.message.toast('选择正确')
}
this.closedActionSheet()
},
@@ -136,4 +136,4 @@
</script>
<style lang="scss" scoped>
</style>
</style>
componentsPage/fab/fab.vue
+2 -2
View File
@@ -185,7 +185,7 @@
// 点击悬浮按钮的内容
clickFabItem(e) {
this.$t.message.toast(`点击了第 ${e.index} 个选项`)
this.$tn.message.toast(`点击了第 ${e.index} 个选项`)
}
}
@@ -193,4 +193,4 @@
</script>
<style lang="scss" scoped>
</style>
</style>
componentsPage/form/form.vue
+14 -14
View File
@@ -89,9 +89,9 @@
</view>
</view>
</template>
</view>
</template>
<script>
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
export default {
@@ -201,7 +201,7 @@
{
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
validator: (rule, value, callback) => {
return this.$t.test.chinese(value);
return this.$tn.test.chinese(value);
},
message: '姓名必须为中文',
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
@@ -448,7 +448,7 @@
if (valid) {
// 验证通过
if (!this.model.agreement) {
this.$t.message.toast('请勾选协议')
this.$tn.message.toast('请勾选协议')
return
}
} else {
@@ -480,15 +480,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 验证码倒计时时间改变
@@ -504,9 +504,9 @@
this.model.agreement = event.value
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.agreement {
@@ -519,5 +519,5 @@
color: $tn-font-sub-color;
}
}
</style>
</style>
componentsPage/goods-nav/goods-nav.vue
+107 -107
View File
@@ -1,126 +1,126 @@
<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="基础" :contentPadding="false">
<tn-goods-nav></tn-goods-nav>
</demo-title>
<demo-title title="显示阴影" :contentPadding="false">
<tn-goods-nav :shadow="true"></tn-goods-nav>
</demo-title>
<demo-title title="选项设置为头像" :contentPadding="false">
<tn-goods-nav :options="avatarOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置角标" :contentPadding="false">
<tn-goods-nav :options="countOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置边距按钮" :contentPadding="false">
<tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
</demo-title>
<demo-title title="设置圆角按钮" :contentPadding="false">
<tn-goods-nav buttonType="round"></tn-goods-nav>
</demo-title>
<demo-title title="不设置选项" :contentPadding="false">
<tn-goods-nav :options="[]"></tn-goods-nav>
</demo-title>
<demo-title title="自定义颜色" :contentPadding="false">
<tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
</demo-title>
<demo-title title="固定在底部" :contentPadding="false">
<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>
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>商品导航</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<demo-title title="基础" :contentPadding="false">
<tn-goods-nav></tn-goods-nav>
</demo-title>
<demo-title title="显示阴影" :contentPadding="false">
<tn-goods-nav :shadow="true"></tn-goods-nav>
</demo-title>
<demo-title title="选项设置为头像" :contentPadding="false">
<tn-goods-nav :options="avatarOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置角标" :contentPadding="false">
<tn-goods-nav :options="countOptions"></tn-goods-nav>
</demo-title>
<demo-title title="设置边距按钮" :contentPadding="false">
<tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
</demo-title>
<demo-title title="设置圆角按钮" :contentPadding="false">
<tn-goods-nav buttonType="round"></tn-goods-nav>
</demo-title>
<demo-title title="不设置选项" :contentPadding="false">
<tn-goods-nav :options="[]"></tn-goods-nav>
</demo-title>
<demo-title title="自定义颜色" :contentPadding="false">
<tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
</demo-title>
<demo-title title="固定在底部" :contentPadding="false">
<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>
<script>
import demoTitle from '@/libs/components/demo-title.vue'
export default {
name: 'ComponentsGoodsNav',
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'
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.message.toast(`点击了第${e.index}个选项`)
},
// 按钮点击事件
onButtonClick(e) {
this.$t.message.toast(`点击了第${e.index}个按钮`)
}
},
methods: {
// 选项点击事件
onOptionClick(e) {
this.$tn.message.toast(`点击了第${e.index}个选项`)
},
// 按钮点击事件
onButtonClick(e) {
this.$tn.message.toast(`点击了第${e.index}个按钮`)
}
}
}
</script>
<style lang="scss" scoped>
.components-goods-nav {
background-color: $tn-bg-gray-color;
min-height: 100vh;
.components-goods-nav {
background-color: $tn-bg-gray-color;
min-height: 100vh;
}
</style>
componentsPage/image-upload/image-upload.vue
+2 -2
View File
@@ -203,7 +203,7 @@
console.log('上传文件列表发生改变', lists, index);
this.lists.splice(0, this.lists.length)
this.$nextTick(() => {
this.lists = this.$t.deepClone(lists)
this.lists = this.$tn.deepClone(lists)
if (this.customStyle && lists.length > 4) {
this.fullWindowsScroll = true
} else {
@@ -270,4 +270,4 @@
justify-content: center;
border-radius: 30rpx;
}
</style>
</style>
componentsPage/keyboard/keyboard.vue
+8 -8
View File
@@ -194,15 +194,15 @@
this.inputValue += e
} else if (this.mode === 'car') {
// 判断输入的值是否正确
if (this.currentLicensePlateIndex === 0 && !this.$t.test.chinese(e)) {
this.$t.message.toast('车牌归属地选择错误')
if (this.currentLicensePlateIndex === 0 && !this.$tn.test.chinese(e)) {
this.$tn.message.toast('车牌归属地选择错误')
return
} else if (this.currentLicensePlateIndex === 1 && !this.$t.test.letter(e)) {
this.$t.message.toast('车牌归属地字母选择错误')
} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
this.$tn.message.toast('车牌归属地字母选择错误')
return
}
if (this.currentLicensePlateIndex !== 0 && !this.$t.test.enOrNum(e)) {
this.$t.message.toast('车牌号码选择错误')
if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
this.$tn.message.toast('车牌号码选择错误')
return
}
// this.licensePlateValue[this.currentLicensePlateIndex] = e
@@ -216,11 +216,11 @@
},
// 点击了取消按钮
onCancel() {
this.$t.message.toast('点击了取消按钮')
this.$tn.message.toast('点击了取消按钮')
},
// 点击了确认按钮
onConfirm() {
this.$t.message.toast('点击了确认按钮')
this.$tn.message.toast('点击了确认按钮')
this.value = false
},
// 点击了退格按钮
componentsPage/lazy-load/lazy-load.vue
+83 -83
View File
@@ -1,102 +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>
<!-- 顶部自定义导航 -->
<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 {
export default {
name: 'ComponentsLazyLoad',
data() {
return {
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' }
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.randomInt(0, this.data.length - 1)
this.list.push({
src: this.data[index].src
})
}
this.status = 'loadmore'
}, 1500)
}
},
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.$tn.number.randomInt(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;
}
.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/modal/modal.vue
+2 -2
View File
@@ -241,7 +241,7 @@
// 点击按钮
clickBtn(event) {
this.show = false
this.$t.message.toast('点击了第'+(event.index + 1)+'个按钮')
this.$tn.message.toast('点击了第'+(event.index + 1)+'个按钮')
}
},
@@ -274,4 +274,4 @@
}
}
}
</style>
</style>
componentsPage/picker/picker.vue
+1 -1
View File
@@ -259,7 +259,7 @@
// 点击取消按钮
cancelPicker(event) {
this.$t.message.toast('点击了取消按钮')
this.$tn.message.toast('点击了取消按钮')
},
// 点击确认按钮
confirmPicker(event) {
componentsPage/scroll-list/scroll-list.vue
+3 -3
View File
@@ -14,7 +14,7 @@
<block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view>
</view>
<view class="tn-color-black tn-text-lg tn-text-center">
@@ -33,7 +33,7 @@
<block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view>
</view>
<view class="tn-color-black tn-text-lg tn-text-center">
@@ -52,7 +52,7 @@
<block v-for="(item, index) in 14" :key="index">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.color.getRandomCoolBgClass(index)]">
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
<view class="tn-icon-gloves-fill"></view>
</view>
<view class="tn-color-black tn-text-lg tn-text-center">
componentsPage/select/select.vue
+1 -1
View File
@@ -326,7 +326,7 @@
// 点击取消按钮
cancelSelect(event) {
this.$t.message.toast('点击了取消按钮')
this.$tn.message.toast('点击了取消按钮')
},
// 点击确认按钮
confirmSelect(event) {
componentsPage/sign-board/sign-board.vue
+2 -2
View File
@@ -106,7 +106,7 @@
resolve()
return
}
this.$t.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
this.$tn.message.modal('操作提示','当前已经打开了签名板，是否确认需要关闭', () => {
resolve()
}, true, () => {
reject()
@@ -131,4 +131,4 @@
.button {
margin-top: 20rpx;
}
</style>
</style>
componentsPage/swipe-action/swipe-action.vue
+3 -3
View File
@@ -205,9 +205,9 @@
// 处理swiperActionItem点击事件
onSwiperItemClick(e) {
if (e.type === 'button') {
this.$t.message.toast(`点击了第${e.index}个按钮`)
this.$tn.message.toast(`点击了第${e.index}个按钮`)
} else if (e.type === 'item') {
this.$t.message.toast(`点击了item标签,name为${e.name}`)
this.$tn.message.toast(`点击了item标签,name为${e.name}`)
}
}
}
@@ -241,4 +241,4 @@
}
}
}
</style>
</style>
componentsPage/tips/tips.vue
+2 -2
View File
@@ -120,7 +120,7 @@
},
// 关闭Tips
closeTips() {
this.$t.message.toast('tips提示框关闭了')
this.$tn.message.toast('tips提示框关闭了')
}
},
@@ -130,4 +130,4 @@
<style lang="scss" scoped>
</style>
</style>
componentsPage/toast/toast.vue
+2 -2
View File
@@ -126,7 +126,7 @@
},
// 关闭Toast
closedToast() {
this.$t.message.toast('Toast关闭')
this.$tn.message.toast('Toast关闭')
}
},
@@ -136,4 +136,4 @@
<style lang="scss" scoped>
</style>
</style>
componentsPage/verification-code/verification-code.vue
+7 -7
View File
@@ -119,15 +119,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
@@ -138,11 +138,11 @@
// 开始倒计时
codeStart() {
this.$t.message.toast('倒计时开始')
this.$tn.message.toast('倒计时开始')
},
// 结束倒计时
codeEnd() {
this.$t.message.toast('倒计时结束')
this.$tn.message.toast('倒计时结束')
},
// 正在倒计时
codeChange(event) {
@@ -155,4 +155,4 @@
</script>
<style lang="scss" scoped>
</style>
</style>
libs/components/dynamic-demo-template.vue
+3 -3
View File
@@ -120,7 +120,7 @@
data() {
return {
// 图鸟颜色列表
tuniaoColorList: this.$t.color.getTuniaoColorList(),
tuniaoColorList: this.$tn.color.getTuniaoColorList(),
// 保存选项列表信息（由于prop中的数据时不能被修改的）
_sectionList: [],
// 模式列表信息
@@ -310,7 +310,7 @@
}
})
this._sectionList = this.$t.deepClone(this.sectionList)
this._sectionList = this.$tn.deepClone(this.sectionList)
// 给本地选项按钮列表给默认show属性
this._sectionList.map((item) => {
const section = item.section.map((section_item) => {
@@ -353,7 +353,7 @@
// 更新选项按钮状态信息
updateSectionBtnsState(sectionIndex = -1, showState = true) {
// 判断sectionIndex是否为数组
if (this.$t.array.isArray(sectionIndex)) {
if (this.$tn.array.isArray(sectionIndex)) {
if (sectionIndex.length === 0) {
return
}
libs/mixin/template_page_mixin.js
+3 -3
View File
@@ -41,7 +41,7 @@ module.exports = {
// 如果获取失败则重新获取
if (!customBarHeight) {
try {
const navBarInfo = await this.$t.updateCustomBar()
const navBarInfo = await this.$tn.updateCustomBar()
customBarHeight = navBarInfo.customBarHeight
statusBarHeight = navBarInfo.statusBarHeight
} catch(e) {
@@ -53,8 +53,8 @@ module.exports = {
}
// 更新vuex中的导航栏信息
this.$t.vuex('vuex_status_bar_height', statusBarHeight)
this.$t.vuex('vuex_custom_bar_height', customBarHeight)
this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
}
}
}
main.js
+4 -4
View File
@@ -1,7 +1,7 @@
import App from './App'
import store from './store'
import Vue from 'vue'
import store from './store'
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
@@ -10,7 +10,7 @@ import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI)
// 引入TuniaoUI提供的vuex简写方法
let vuexStore = require('@/store/$t.mixin.js')
let vuexStore = require('@/store/$tn.mixin.js')
Vue.mixin(vuexStore)
// 引入TuniaoUI对小程序分享的mixin封装
mock/components_page.js
+14 -14
View File
@@ -18,7 +18,7 @@ export default {
url: '/componentsPage/loading/loading'
},
{
icon: 'share',
icon: 'tag',
title: 'tabs标签',
url: '/componentsPage/tabs/tabs'
},
@@ -73,37 +73,37 @@ export default {
url: '/componentsPage/scroll-list/scroll-list'
},
{
icon: 'star',
icon: 'brand',
title: 'swipeAction滑动菜单',
url: '/componentsPage/swipe-action/swipe-action'
},
{
icon: 'star',
icon: 'pharmacy',
title: 'fab悬浮按钮',
url: '/componentsPage/fab/fab'
},
{
icon: 'star',
icon: 'cardbag',
title: '懒加载',
url: '/componentsPage/lazy-load/lazy-load'
},
{
icon: 'star',
icon: 'down-double',
title: '加载更多',
url: '/componentsPage/load-more/load-more'
},
{
icon: 'star',
icon: 'menu-more',
title: '骨架屏',
url: '/componentsPage/skeleton/skeleton'
},
{
icon: 'star',
icon: 'empty-search',
title: '空页面',
url: '/componentsPage/empty/empty'
},
{
icon: 'star',
icon: 'share',
title: '商品导航',
url: '/componentsPage/goods-nav/goods-nav'
}
@@ -134,7 +134,7 @@ export default {
url: '/componentsPage/tips/tips'
},
{
icon: 'creative',
icon: 'reply',
title: '压屏窗',
url: '/componentsPage/landscape/landscape'
}
@@ -150,17 +150,17 @@ export default {
url: '/componentsPage/form/form'
},
{
icon: 'image-text',
icon: 'square',
title: 'Input输入框',
url: '/componentsPage/input/input'
},
{
icon: 'image-text',
icon: 'circle-fill',
title: 'Radio单选框',
url: '/componentsPage/radio/radio'
},
{
icon: 'image-text',
icon: 'copy',
title: 'Checkbox复选框',
url: '/componentsPage/check-box/check-box'
},
@@ -205,12 +205,12 @@ export default {
url: '/componentsPage/sign-board/sign-board'
},
{
icon: 'edit-write',
icon: 'safe',
title: '验证码输入',
url: '/componentsPage/verification-code-input/verification-code-input'
},
{
icon: 'edit-write',
icon: 'expand',
title: '分段器',
url: '/componentsPage/subsection/subsection'
}
pages/basic/basic.vue
+1 -1
View File
@@ -67,7 +67,7 @@
},
methods: {
getRandomCoolBg() {
return this.$t.color.getRandomCoolBgClass()
return this.$tn.color.getRandomCoolBgClass()
}
}
}
pages/components/components.vue
+1 -1
View File
@@ -67,7 +67,7 @@
},
methods: {
getRandomCoolBg() {
return this.$t.color.getRandomCoolBgClass()
return this.$tn.color.getRandomCoolBgClass()
}
}
}
pages/template/template.vue
+1 -1
View File
@@ -73,7 +73,7 @@
},
methods: {
getRandomCoolBg() {
return this.$t.color.getRandomCoolBgClass()
return this.$tn.color.getRandomCoolBgClass()
}
}
}
pages/tuniao/tuniao.vue
+563 -334
View File
@@ -1,334 +1,563 @@
<template>
<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>
</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-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
<block v-for="(item, index) in tuniaoData" :key="index">
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow">
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<view :class="[`tn-icon-${item.icon}`]"></view>
</view>
<view class="tn-info__item__left__content">
<view class="tn-info__item__left__content--title">{{ item.title }}</view>
<view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
</view>
</view>
<view class="tn-info__item__right">
<view class="tn-info__item__right--icon">
<view class="tn-icon-code"></view>
</view>
</view>
</view>
</block>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoWebsite">
<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" @click="copyGitee">
<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-gitee"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">Gitee地址</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" @click="navPlus">
<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-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>
<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-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm">合作勾搭</view>
</button>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
<view class="tn-icon-comment-fill"></view>
</view>
<view class="tn-margin-left-sm">问题反馈</view>
</button>
</tn-list-cell>
</view>
</view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
<script>
export default {
name: 'Tuniao',
data() {
return {
tuniaoData: [
{
title: 'View',
icon: 'eye',
color: 'indigo',
value: '1.22 W'
},
{
title: 'Star',
icon: 'star',
color: 'orange',
value: '406'
},
{
title: 'Fork',
icon: 'fork',
color: 'purplered',
value: '129'
},
{
title: 'Version',
icon: 'trusty',
color: 'green',
value: '1.0.0'
}
]
}
},
methods: {
// 跳转到图鸟官网
navTuniaoWebsite() {
uni.navigateToMiniProgram({
appId: 'wxa698b1eee960632f'
})
},
// 跳转到会员协议
navPlus() {
uni.navigateTo({
url: '/templatePage/life/plus/plus'
})
},
// 复制Gitee地址
copyGitee() {
uni.setClipboardData({
data: "https://gitee.com/TSpecific/tuniao-ui",
})
},
}
}
</script>
<style lang="scss" scoped>
/* 顶部背景图 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: -180rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 180rpx;
height: 180rpx;
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: 42rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 信息展示 start */
.tn-info {
&__container {
margin-top: 40rpx;
}
&__item {
width: 48%;
margin: 15rpx 0rpx;
padding: 28rpx;
border-radius: 15rpx;
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/6.png);
}
&__left {
&--icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
font-size: 40rpx;
margin-right: 20rpx;
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_bg5.png);
}
}
&__content {
font-size: 30rpx;
&--data {
margin-top: 5rpx;
font-weight: bold;
}
}
}
&__right {
&--icon {
font-size: 60rpx;
opacity: 0.15;
}
}
}
}
/* 信息展示 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 */
</style>
<template>
<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>
</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-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.jpg');width: 180rpx;height: 180rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
</view>
<view class="user-info__nick-name">图鸟小伙伴</view>
</view>
<!-- banner start-->
<!-- <view class="tn-flex tn-flex-wrap tn-padding-xs" @click="navTuniaoVue3">
<view class="" style="width: 100%;">
<view class="image-piccapsule tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/capsule-banner/banner-Vue3.png');">
<view class="image-capsule">
</view>
</view>
</view>
</view> -->
<!-- banner end-->
<view class="tn-margin-left tn-margin-right">
<!-- 方式20 start-->
<view class="tn-flex">
<view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 15rpx 0 0;padding: 30rpx 0;" @click="navTuniaoWebsite">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orangered tn-color-white">
<view class="tn-icon-computer-fill"></view>
</view>
<view class="tn-text-center" style="font-size: 30rpx;">
<view class="tn-text-ellipsis">图鸟官网</view>
</view>
</view>
</view>
<view class="tn-flex-1 about-shadow tn-bg-white" style="margin: 50rpx 0 0 15rpx;padding: 30rpx 0;" @click="navShare">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
<view class="tn-icon-moon-fill"></view>
</view>
<view class="tn-text-center" style="font-size: 30rpx;">
<view class="tn-text-ellipsis">图鸟公众号</view>
</view>
</view>
</view>
</view>
<!-- 数据信息 -->
<!-- <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
<block v-for="(item, index) in tuniaoData" :key="index">
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between about-shadow">
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<view :class="[`tn-icon-${item.icon}`]"></view>
</view>
<view class="tn-info__item__left__content">
<view class="tn-info__item__left__content--title">{{ item.title }}</view>
<view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
</view>
</view>
<view class="tn-info__item__right">
<view class="tn-info__item__right--icon">
<view class="tn-icon-code"></view>
</view>
</view>
</view>
</block>
</view> -->
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyDCloud">
<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-fire-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" @click="copyGitee">
<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-3 tn-color-white">
<view class="tn-icon-star-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">Gitee地址</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" @click="navPlus">
<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-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-send-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-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm">合作勾搭</view>
</button>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
<view class="tn-icon-comment-fill"></view>
</view>
<view class="tn-margin-left-sm">问题反馈</view>
</button>
</tn-list-cell>
</view>
<view class="tn-flex tn-flex-row-between">
<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-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
<tn-scroll-list :indicator="false">
<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
<navigator target="miniProgram" :app-id="item.appid" :path="item.path" version="release" delta="1" hover-class="none"
v-for="(item, index) in linksData" :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="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
:style="'background-image:url('+ item.url + ');background-size:100% 100%;'">
</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>
</navigator>
</view>
</tn-scroll-list>
</view>
</view>
</view>
<view class="tn-padding-bottom-xs"></view>
</view>
</template>
<script>
export default {
name: 'Tuniao',
data() {
return {
tuniaoData: [
{
title: 'View',
icon: 'eye',
color: 'indigo',
value: '1.22 W'
},
{
title: 'Star',
icon: 'star',
color: 'orange',
value: '406'
},
{
title: 'Fork',
icon: 'fork',
color: 'purplered',
value: '129'
},
{
title: 'Version',
icon: 'trusty',
color: 'green',
value: '1.2.0'
}
],
linksData: [{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646920408332-assets/web-upload/6ea58bb4-cb0d-4034-b9ac-a0155d5c3afb.jpeg',
title: 'uCharts',
appid: 'wx37a9ee6a7398dec0',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1646963464962-assets/web-upload/3c14732e-cc92-4726-9a9c-1fa7133f8147.jpeg',
title: '芊云全景',
appid: 'wx9f77d65eb4eff65b',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648734439954-assets/web-upload/2e3d3e73-a28c-4c5d-885a-e5cdf2da13af.jpeg',
title: '前端铺子',
appid: 'wx201efd3f86fa2ba7',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/png/280373/1647178609988-assets/web-upload/37a6d22c-410b-4f51-a083-993306bbc4fa.png',
title: 'DIY神器',
appid: 'wxda438798441f31f1',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880969854-assets/web-upload/95902944-1be6-4c23-a2f5-47cf78eda072.jpeg',
title: '江夏生活',
appid: 'wx2257f5c246ad1bcd',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1667656184223-assets/web-upload/cc3dbf5c-1483-4c74-83fc-03c2bd7c373e.jpeg',
title: '多客社交',
appid: 'wx86cc21f2f7fa3efa',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647505953019-assets/web-upload/a6c0a823-5b55-4cb7-aee5-5b82990533ed.jpeg',
title: '样式库',
appid: 'wx853f345b163a00d6',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1647765849135-assets/web-upload/dfcacf41-b1c0-4dbf-8613-3f948e43d125.jpeg',
title: '旺石头科技',
appid: 'wx6007249d6b2348ea',
path: ''
},
{
url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1655887617723-assets/web-upload/028185c8-fac6-4863-a00f-7e9bbe3ea54e.jpeg',
title: '邻邻邦',
appid: 'wxf7512cb916d6d1c2',
path: ''
},
]
}
},
methods: {
// 跳转到图鸟官网
navTuniaoWebsite() {
uni.navigateToMiniProgram({
appId: 'wxa698b1eee960632f'
})
},
// 跳转到图鸟Vue3
navTuniaoVue3(e) {
wx.vibrateLong();
uni.navigateToMiniProgram({
appId: 'wxd4296f570b8b39c9'
})
},
// 跳转到会员协议
navPlus() {
uni.navigateTo({
url: '/templatePage/life/plus/plus'
})
},
// 跳转到图鸟公众号
navShare() {
uni.navigateTo({
url: '/templatePage/life/share/share'
})
},
// 复制插件市场地址
copyDCloud() {
uni.setClipboardData({
data: "https://ext.dcloud.net.cn/publisher?id=356088",
})
},
// 复制Gitee地址
copyGitee() {
uni.setClipboardData({
data: "https://gitee.com/TSpecific/tuniao-ui",
})
},
}
}
</script>
<style lang="scss" scoped>
/* 顶部背景图 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 0rpx;
margin-top: -180rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 180rpx;
height: 180rpx;
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: 42rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 信息展示 start */
.tn-info {
&__container {
margin-top: 0rpx;
}
&__item {
width: 48%;
margin: 15rpx 0rpx;
padding: 28rpx;
border-radius: 15rpx;
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/6.png);
}
&__left {
&--icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
font-size: 40rpx;
margin-right: 20rpx;
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_bg5.png);
}
}
&__content {
font-size: 30rpx;
&--data {
margin-top: 5rpx;
font-weight: bold;
}
}
}
&__right {
&--icon {
font-size: 60rpx;
opacity: 0.15;
}
}
}
}
/* 信息展示 end */
/* 图标容器5 start */
.icon5 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 0rpx;
margin: 0rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
}
}
}
.icon20 {
&__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);
}
}
}
}
/* 图标容器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 */
/* 胶囊banner*/
.image-capsule{
padding: 100rpx 0rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-piccapsule{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 20rpx 20rpx 0 0;
}
</style>
store/$t.mixin.js → store/$tn.mixin.js
+3 -3
View File
@@ -13,9 +13,9 @@ module.exports = {
beforeCreate() {
// 将vuex方法挂在在$t中
// 使用方法:
// 修改vuex的state中的user.name变量为图鸟小菜 => this.$t.vuex('user.name', '图鸟小菜')
// 修改vuexde state中的version变量为1.0.1 => this.$t.vuex('version', 1.0.1)
this.$t.vuex = (name, value) => {
// 修改vuex的state中的user.name变量为图鸟小菜 => this.$tn.vuex('user.name', '图鸟小菜')
// 修改vuexde state中的version变量为1.0.1 => this.$tn.vuex('version', 1.0.1)
this.$tn.vuex = (name, value) => {
this.$store.commit('$tStore', {
name, value
})
templatePage/animate/bubble/bubble.vue
+7 -7
View File
@@ -66,7 +66,7 @@
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
@@ -103,16 +103,16 @@
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
x: this.$tn.number.random(0.22 * width, 0.33 * width),
y: this.$tn.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
x: this.$tn.number.random(0, 0.88 * width),
y: this.$tn.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
x: this.$tn.number.random(0, 0.88 * width),
y: this.$tn.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
templatePage/home/job/job.vue
+1 -1
View File
@@ -63,7 +63,7 @@
<view class=" " style="width: 25%;">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
<view class="icon16__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
<view class="tn-cool-color-icon16" :class="[$t.color.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
<view class="tn-cool-color-icon16" :class="[$tn.color.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
</view>
<view class="tn-color-black tn-text-lg tn-text-center">
<text class="tn-text-ellipsis">{{item.title}}</text>
templatePage/life/about/about.vue
+7 -7
View File
@@ -68,7 +68,7 @@
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$tn.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
@@ -105,16 +105,16 @@
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
x: this.$tn.number.random(0.22 * width, 0.33 * width),
y: this.$tn.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
x: this.$tn.number.random(0, 0.88 * width),
y: this.$tn.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
x: this.$tn.number.random(0, 0.88 * width),
y: this.$tn.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
templatePage/life/candle/candle.vue
+1 -1
View File
@@ -44,7 +44,7 @@
</view>
</view>
<view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;">
<view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;overflow-y: hidden;">
敬请期待
</view>
templatePage/life/plus/plus.vue
+141 -9
View File
@@ -9,7 +9,68 @@
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="tn-bdhook-shadow" style="border-radius: 10rpx;overflow: hidden;margin: 50rpx 30rpx 30rpx 30rpx;">
<view class="tn-flex tn-flex-row-between tn-padding tn-text-center tn-color-white" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">
<view class="tn-flex-1">
<view class="tn-text-bold tn-text-lg">
开源项目
</view>
<view class="tn-text-sm">
不喜勿喷
</view>
</view>
<view class="tn-flex-1">
<view class="tn-text-bold tn-text-lg">
普通用户
</view>
<view class="tn-text-sm">
免费开源
</view>
</view>
<view class="tn-flex-1">
<view class="tn-text-bold tn-text-lg">
至尊VIP
</view>
<view class="tn-text-sm">
会员福利
</view>
</view>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-sm" v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
<view class="tn-flex-1 tn-text-center">
<view class="">
{{ item.title }}
</view>
<!-- <view class="tn-color-gray tn-text-xs">
{{ item.title2 }}
</view> -->
</view>
<view class="tn-flex-1">
<view class="">
{{ item.common }}
</view>
<view class="">
{{ item.common2 }}
</view>
</view>
<view class="tn-flex-1">
<view class="">
{{ item.vip }}
</view>
<view class="">
{{ item.vip2 }}
</view>
</view>
</view>
</view>
</view>
<view class="tn-text-center tn-margin tn-text-lg plus-box" style="padding-top: 60rpx;">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
@@ -35,7 +96,7 @@
<view class="plus-text">
<view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
<view class="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
<view class="tn-margin-bottom-xl">（毕竟前端开发圈子就那么小）</view>
</view>
<view class="plus-text">
@@ -51,8 +112,10 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">会员人数会达到50+叭</view>
<view class="tn-margin-bottom-xl">（希望够垫付服务器+CDN支出）</view>
<view class="tn-text-bold">开源希望能得到理解</view>
<view class="">（做开源本身就不是为了赚取）</view>
<view class="">（毕竟还不如多找几个会员进行项目合作）</view>
<view class="tn-margin-bottom-xl">（会员费用仅垫付服务器+工作室支出）</view>
</view>
<view class="plus-text">
@@ -67,7 +130,7 @@
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.yuque.com/tuniao）</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.tuniaokj.com/）</view>
</view>
<view class="plus-text">
@@ -99,7 +162,7 @@
</view>
<view class="plus-text">
<view class="tn-text-bold">北北感恩你的支持</view>
<view class="tn-text-bold">图鸟小小团队感恩你的支持</view>
<view class="tn-margin-bottom-xl"></view>
</view>
@@ -116,13 +179,64 @@
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
return {
setList: [
{
title: "图鸟UI",
title2: "UI组件",
common: "免费商用",
common2: "插件市场获取",
vip: "免费商用",
vip2: "会员群直接获取"
},
{
title: "图鸟VUE3 ",
title2: "UI组件",
common: "免费商用",
common2: "插件市场获取",
vip: "免费商用",
vip2: "会员群直接获取"
},
{
title: "圈子博客",
title2: "纯前端模板",
common: "免费商用",
common2: "插件市场获取",
vip: "免费商用",
vip2: "会员群直接获取"
},
{
title: "简约商圈",
title2: "纯前端模板",
common: "免费商用",
common2: "插件市场获取",
vip: "免费商用",
vip2: "会员群直接获取"
},
{
title: "凶姐壁纸",
title2: "纯前端模板",
common: "免费商用",
common2: "插件市场获取",
vip: "免费商用",
vip2: "会员群直接获取"
},
{
title: "无名小程序",
title2: "前后端项目",
common: "无",
common2: "",
vip: "会员专属",
vip2: "前后端开发ing"
}
]
}
},
methods: {
// 复制语雀地址
// 复制地址
copyYuque() {
uni.setClipboardData({
data: "https://www.yuque.com/tuniao",
data: "https://www.tuniaokj.com/",
})
},
// 复制微信号
@@ -138,6 +252,24 @@
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 间隔线 start*/
.tn-strip-bottom-min {
width: 100%;
border-bottom: 1rpx solid #F8F9FB;
}
.tn-strip-bottom {
width: 100%;
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
/* 页面阴影 start*/
.tn-bdhook-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 内容 开始 */
.plus-box {
counter-reset: index;
templatePage/life/share/share.vue
+12 -11
View File
@@ -1,23 +1,27 @@
<template>
<template>
<view class="">
<web-view src="https://mp.weixin.qq.com/s/1apBuGcPQXMfz2osv5wwiQ"></web-view>
</view>
</template>
<!-- <template>
<view class="template-course">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<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> -->
</tn-nav-bar>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
</template> -->
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
@@ -36,8 +40,7 @@
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
/* @import '@/static/css/templatePage/custom_nav_bar.scss';
.bottom-backgroup {
height: 700rpx;
z-index: -1;
@@ -46,8 +49,6 @@
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 4100rpx;
// z-index: -1;
}
}
/* 背景图 end */
} */
</style>
templatePage/login/demo1/demo1.vue
+4 -4
View File
@@ -169,15 +169,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
templatePage/login/demo2/demo2.vue
+4 -4
View File
@@ -261,15 +261,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
templatePage/login/demo3/demo3.vue
+4 -4
View File
@@ -161,15 +161,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
templatePage/login/demo4/demo4.vue
+4 -4
View File
@@ -183,15 +183,15 @@
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
this.$tn.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
this.$tn.message.closeLoading()
this.$tn.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
+1 -1
View File
@@ -139,7 +139,7 @@
}
},
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
}
},
methods: {
tuniao-ui/components/tn-badge/tn-badge.vue
+10 -10
View File
@@ -10,9 +10,9 @@
@click="handleClick"
>
<slot v-if="!dot"></slot>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -110,10 +110,10 @@
}
if (this.top) {
style.top = this.$t.string.getLengthUnitValue(this.top)
style.top = this.$tn.string.getLengthUnitValue(this.top)
}
if (this.right) {
style.right = this.$t.string.getLengthUnitValue(this.right)
style.right = this.$tn.string.getLengthUnitValue(this.right)
}
return style
@@ -136,9 +136,9 @@
})
},
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-badge {
width: auto;
@@ -169,5 +169,5 @@
&--center-position {
transform: translate(50%, -50%);
}
}
</style>
}
</style>
tuniao-ui/components/tn-calendar/tn-calendar.vue
+9 -9
View File
@@ -86,9 +86,9 @@
</view>
</view>
</view>
</tn-popup>
</template>
</tn-popup>
</template>
<script>
import Calendar from '../../libs/utils/calendar.js'
@@ -242,7 +242,7 @@
return `${this.mode}-${this.minDate}-${this.maxDate}`
},
elIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
},
colorValue() {
return (index, type) => {
@@ -537,9 +537,9 @@
this.$emit('input', false)
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-calendar {
@@ -703,5 +703,5 @@
font-size: 28rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
+10 -10
View File
@@ -42,9 +42,9 @@
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-car-keyboard',
@@ -102,7 +102,7 @@
'警'
]
// 打乱顺序
if (this.randomEnabled) data = this.$t.array.random(data)
if (this.randomEnabled) data = this.$tn.array.random(data)
// 切割二维数组
let showData = []
showData[0] = data.slice(0, 10)
@@ -151,7 +151,7 @@
'M'
]
// 打乱顺序
if (this.randomEnabled) data = this.$t.array.random(data)
if (this.randomEnabled) data = this.$tn.array.random(data)
// 切割二维数组
let showData = []
showData[0] = data.slice(0, 10)
@@ -215,9 +215,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-car-keyboard {
@@ -316,5 +316,5 @@
&--hover {
background-color: #E6E6E6 !important;
}
}
</style>
}
</style>
tuniao-ui/components/tn-checkbox/tn-checkbox.vue
+10 -10
View File
@@ -19,9 +19,9 @@
>
<slot></slot>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-checkbox',
@@ -181,7 +181,7 @@
},
created() {
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
// this.parent = this.$t.$parent.call(this, 'tn-checkbox-group')
// this.parent = this.$tn.$parent.call(this, 'tn-checkbox-group')
// // 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
// this.parent && this.parent.children.push(this)
// // 初始化父组件的value值
@@ -239,7 +239,7 @@
} else {
// 超出最大可选项，弹出提示
if (this.parentData.value.length >= this.parentData.max) {
return this.$t.message.toast(`最多可选${this.parent.max}项`)
return this.$tn.message.toast(`最多可选${this.parent.max}项`)
}
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
this.emitEvent();
@@ -252,9 +252,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-checkbox {
@@ -324,5 +324,5 @@
color: $tn-font-sub-color;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
+11 -11
View File
@@ -31,9 +31,9 @@
<slot v-if="$slots.default || $slots.$default"></slot>
<view v-else-if="showPercent" class="tn-circle-progress__content__percent">{{ percent + '%' }}</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-circle-progress',
@@ -89,14 +89,14 @@
},
data() {
return {
// 微信小程序中不能使用this.$t.uuid()形式动态生成id值，否则会报错
// 微信小程序中不能使用this.$tn.uuid()形式动态生成id值，否则会报错
// #ifdef MP-WEIXIN
elBgId: 'tCircleProgressBgId',
elId: 'tCircleProgressElId',
// #endif
// #ifndef MP-WEIXIN
elBgId: this.$t.uuid(),
elId: this.$t.uuid(),
elBgId: this.$tn.uuid(),
elId: this.$tn.uuid(),
// #endif
// 活动圆上下文
progressContext: null,
@@ -188,9 +188,9 @@
}, preSecondTime)
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-circle-progress {
@@ -219,5 +219,5 @@
font-size: 28rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
+10 -10
View File
@@ -44,9 +44,9 @@
<slot></slot>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-collapse-item',
@@ -101,7 +101,7 @@
data() {
return {
isShow: false,
elId: this.$t.uuid(),
elId: this.$tn.uuid(),
// body高度
height: 0,
// 头部样式
@@ -133,7 +133,7 @@
methods: {
// 异步获取内容或者修改了内容时重新获取内容的信息
init() {
this.parent = this.$t.$parent.call(this, 'tn-collapse')
this.parent = this.$tn.$parent.call(this, 'tn-collapse')
if (this.parent) {
this.nameSync = this.name ? this.name : this.parent.childrens.length
// 不存在才添加对应实例
@@ -178,9 +178,9 @@
})
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-collapse-item {
@@ -232,5 +232,5 @@
padding-left: 24rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-count-down/tn-count-down.vue
+13 -13
View File
@@ -87,9 +87,9 @@
>
秒
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -168,7 +168,7 @@
itemStyle() {
let style = {}
if (this.height) {
style.height = this.$t.string.getLengthUnitValue(this.height)
style.height = this.$tn.string.getLengthUnitValue(this.height)
style.width = style.height
}
if (this.showBorder) {
@@ -250,10 +250,10 @@
minute = Math.floor(seconds / 60) - (hour * 60) - (day * 24 * 60)
second = Math.floor(seconds) - (minute * 60) - (hour * 60 * 60) - (day * 24 * 60 * 60)
// 如果小于0在前面进行补0操作
showHour = this.$t.number.formatNumberAddZero(showHour)
minute = this.$t.number.formatNumberAddZero(minute)
second = this.$t.number.formatNumberAddZero(second)
day = this.$t.number.formatNumberAddZero(day)
showHour = this.$tn.number.formatNumberAddZero(showHour)
minute = this.$tn.number.formatNumberAddZero(minute)
second = this.$tn.number.formatNumberAddZero(second)
day = this.$tn.number.formatNumberAddZero(day)
this.d = day
this.h = showHour
@@ -273,9 +273,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-countdown {
@@ -310,5 +310,5 @@
padding: 0 5rpx;
line-height: 1;
}
}
</style>
}
</style>
tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
+9 -9
View File
@@ -5,7 +5,7 @@
:key="index"
class="tn-count-scroll__box"
:style="{
width: $t.string.getLengthUnitValue(width),
width: $tn.string.getLengthUnitValue(width),
height: heightPxValue + 'px'
}"
>
@@ -33,9 +33,9 @@
</view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -139,9 +139,9 @@
this.keys = indexs
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-count-scroll {
@@ -167,5 +167,5 @@
justify-content: center;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-fab/tn-fab.vue
+25 -25
View File
@@ -4,9 +4,9 @@
class="tn-fab__box"
:class="{'tn-fab--right': left === 'auto'}"
:style="{
left: $t.string.getLengthUnitValue(fabLeft || left),
right: $t.string.getLengthUnitValue(fabRight || right),
bottom: $t.string.getLengthUnitValue(fabBottom || bottom),
left: $tn.string.getLengthUnitValue(fabLeft || left),
right: $tn.string.getLengthUnitValue(fabRight || right),
bottom: $tn.string.getLengthUnitValue(fabBottom || bottom),
zIndex: elZIndex
}"
>
@@ -34,7 +34,7 @@
:class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']"
:style="{
color: item.textColor || '#FFF',
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
fontSize: $tn.string.getLengthUnitValue(item.textSize || 28)
}"
>{{ item.text || '' }}</view>
@@ -43,11 +43,11 @@
class="tn-fab__item__btn"
:class="[!item.bgColor ? backgroundColorClass : '']"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height),
lineHeight: $t.string.getLengthUnitValue(height),
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height),
lineHeight: $tn.string.getLengthUnitValue(height),
backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF',
borderRadius: $t.string.getLengthUnitValue(radius)
borderRadius: $tn.string.getLengthUnitValue(radius)
}"
>
<!-- 无图片和无图标时只显示文字 -->
@@ -56,7 +56,7 @@
class="tn-fab__item__btn__title"
:style="{
color: item.textColor || '#fff',
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
fontSize: $tn.string.getLengthUnitValue(item.textSize || 28)
}"
>{{ item.text || '' }}</view>
<!-- 图标 -->
@@ -66,7 +66,7 @@
:class="[`tn-icon-${item.icon}`]"
:style="{
color: item.iconColor || '#fff',
fontSize: $t.string.getLengthUnitValue(item.iconSize || iconSize || 64)
fontSize: $tn.string.getLengthUnitValue(item.iconSize || iconSize || 64)
}"
></view>
<!-- 图片 -->
@@ -74,8 +74,8 @@
v-else-if="!item.icon && item.imgUrl"
class="tn-fab__item__btn__image"
:style="{
width: $t.string.getLengthUnitValue(item.imgWidth || 64),
height: $t.string.getLengthUnitValue(item.imgHeight || 64),
width: $tn.string.getLengthUnitValue(item.imgWidth || 64),
height: $tn.string.getLengthUnitValue(item.imgHeight || 64),
}"
:src="item.imgUrl"
></image>
@@ -87,24 +87,24 @@
class="tn-fab__item__btn tn-fab__item__btn--fab"
:class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height),
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height),
backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '',
color: fontColorStyle || '#fff',
borderRadius: $t.string.getLengthUnitValue(radius),
borderRadius: $tn.string.getLengthUnitValue(radius),
zIndex: elZIndex - 1
}"
@tap.stop="fabClick"
>
<slot>
<view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $t.string.getLengthUnitValue(iconSize || 64)}"></view>
<view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $tn.string.getLengthUnitValue(iconSize || 64)}"></view>
</slot>
</view>
</view>
<view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -234,7 +234,7 @@
},
computed: {
elZIndex() {
return this.zIndex || this.$t.zIndex.fab
return this.zIndex || this.$tn.zIndex.fab
},
propsData() {
return [this.width, this.height, this.left, this.right, this.bottom]
@@ -380,9 +380,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-fab {
@@ -519,5 +519,5 @@
100% {
transform: scale(1);
}
}
</style>
}
</style>
tuniao-ui/components/tn-form-item/tn-form-item.vue
+1 -1
View File
@@ -250,7 +250,7 @@
mounted() {
// 组件创建完成后，保存当前实例到form组件中
// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用\
this.parent = this.$t.$parent.call(this, 'tn-form')
this.parent = this.$tn.$parent.call(this, 'tn-form')
if (this.parent) {
// 遍历parentData属性，将parent中同名的属性赋值给parentData
Object.keys(this.parentData).map(key => {
tuniao-ui/components/tn-form/tn-form.vue
+9 -9
View File
@@ -1,9 +1,9 @@
<template>
<view class="tn-form-class tn-form">
<slot></slot>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-form',
@@ -122,7 +122,7 @@
if (this.errorType.indexOf('none') === -1 &&
this.errorType.indexOf('toast') >= 0 &&
errors.length > 0) {
this.$t.message.toast(errors[0])
this.$tn.message.toast(errors[0])
}
// 调用回调方法
if (typeof callback == 'function') callback(valid)
@@ -132,8 +132,8 @@
})
}
}
}
</script>
<style>
</style>
}
</script>
<style>
</style>
tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
+9 -9
View File
@@ -144,17 +144,17 @@
},
computed: {
backgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
},
navStyle() {
let style = {}
if (this.height) {
style.height = this.height + 'rpx'
}
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav
style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.goodsNav
return style
},
// 选项style
@@ -182,7 +182,7 @@
clazz += ` ${item.colorClass}`
}
clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}`
clazz += ` buttons__item--${this.$tn.string.humpConvertChar(this.buttonType, '-')}`
return clazz
}
@@ -245,7 +245,7 @@
let option = {...item}
option.showAvatar = item.hasOwnProperty('avatar')
if (item.hasOwnProperty('count')) {
const count = this.$t.number.formatNumberString(item.count, 2)
const count = this.$tn.number.formatNumberString(item.count, 2)
option.showBadge = true
option.count = typeof count === 'number' ? String(count) : count
option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
@@ -260,12 +260,12 @@
this.buttonGroupsData = this.buttonGroups.map((item) => {
let button = {...item}
if (item.hasOwnProperty('backgroundColor')) {
button.backgroundColorClass = this.$t.color.getBackgroundColorInternalClass(item.backgroundColor)
button.backgroundColorStyle = this.$t.color.getBackgroundColorStyle(item.backgroundColor)
button.backgroundColorClass = this.$tn.color.getBackgroundColorInternalClass(item.backgroundColor)
button.backgroundColorStyle = this.$tn.color.getBackgroundColorStyle(item.backgroundColor)
}
if (item.hasOwnProperty('color')) {
button.colorClass = this.$t.color.getBackgroundColorInternalClass(item.color)
button.colorStyle = this.$t.color.getBackgroundColorStyle(item.color)
button.colorClass = this.$tn.color.getBackgroundColorInternalClass(item.color)
button.colorStyle = this.$tn.color.getBackgroundColorStyle(item.color)
}
return button
})
tuniao-ui/components/tn-image-upload/tn-image-upload.vue
+11 -11
View File
@@ -6,8 +6,8 @@
:key="index"
class="tn-image-upload__item tn-image-upload__item-preview"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height)
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height)
}"
>
<!-- 删除按钮 -->
@@ -62,8 +62,8 @@
hover-class="tn-hover-class"
hover-stay-time="150"
:style="{
width: $t.string.getLengthUnitValue(width),
height: $t.string.getLengthUnitValue(height)
width: $tn.string.getLengthUnitValue(width),
height: $tn.string.getLengthUnitValue(height)
}"
>
<view class="tn-image-upload__item-add--icon tn-icon-add"></view>
@@ -342,7 +342,7 @@
// 提示用户信息
showToast(message, force = false) {
if (this.showTips || force) {
this.$t.message.toast(message)
this.$tn.message.toast(message)
}
},
// 手动上传，通过ref进行调用
@@ -354,7 +354,7 @@
this.lists[index].progress = 0
this.lists[index].error = false
this.lists[index].response = null
this.$t.message.loading('重新上传')
this.$tn.message.loading('重新上传')
this.uploadFile(index)
},
// 上传文件
@@ -378,7 +378,7 @@
// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
// 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，
// 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)
let beforeResponse = this.beforeUpload.bind(this.$t.$parent.call(this))(index, this.lists)
let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)
// 判断是否返回了Promise
if (!!beforeResponse && typeof beforeResponse.then === 'function') {
await beforeResponse.then(res => {
@@ -410,7 +410,7 @@
header: this.header,
success: res => {
// 判断啊是否为json字符串，将其转换为json格式
let data = this.toJson && this.$t.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
if (![200, 201, 204].includes(res.statusCode)) {
this.uploadError(index, data)
} else {
@@ -424,7 +424,7 @@
this.uploadError(index, err)
},
complete: res => {
this.$t.message.closeLoading()
this.$tn.message.closeLoading()
this.uploading = false
this.uploadFile(index + 1)
this.$emit('on-change', res, index, this.lists, this.index)
@@ -449,14 +449,14 @@
// 删除一个图片
deleteItem(index) {
if (!this.deleteable) return
this.$t.message.modal(
this.$tn.message.modal(
'提示',
'您确定要删除吗？',
async () => {
// 先检查是否有定义before-remove移除前钩子
// 执行before-remove钩子
if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
let beforeResponse = this.beforeRemove.bind(this.$t.$parent.call(this))(index, this.lists)
let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)
// 判断是否返回promise
if (!!beforeResponse && typeof beforeResponse.then === 'function') {
await beforeResponse.then(res => {
tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
+10 -10
View File
@@ -11,9 +11,9 @@
</block>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-index-anchor',
@@ -43,7 +43,7 @@
},
data() {
return {
elId: this.$t.uuid(),
elId: this.$tn.uuid(),
// 内容的高度
height: 0,
// 内容的top
@@ -59,15 +59,15 @@
this.parent = false
},
mounted() {
this.parent = this.$t.$parent.call(this, 'tn-index-list')
this.parent = this.$tn.$parent.call(this, 'tn-index-list')
if (this.parent) {
this.parent.childrens.push(this)
this.parent.updateData()
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-index-anchor {
@@ -86,5 +86,5 @@
color: $tn-main-color;
background-color: #FFFFFF;
}
}
</style>
}
</style>
tuniao-ui/components/tn-index-list/tn-index-list.vue
+11 -11
View File
@@ -37,9 +37,9 @@
<text>{{ indexList[touchMoveIndex] }}</text>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
// 生成 A-Z的字母列表
let indexList = function() {
@@ -96,7 +96,7 @@
computed: {
// 选中索引列表弹出提示框的z-index
selectAlertZIndex() {
return this.$t.zIndex.toast
return this.$tn.zIndex.toast
},
// 吸顶的偏移高度
stickyOffsetTop() {
@@ -223,7 +223,7 @@
anchorStyle = {
position: 'fixed',
top: `${stickyOffsetTop}px`,
zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
zIndex: `${zIndex ? zIndex : this.$tn.zIndex.indexListSticky}`,
color: `${activeColor}`
}
}
@@ -239,7 +239,7 @@
const anchorStyle = {
position: 'relative',
transform: `translate3d(0, ${translateY}px, 0)`,
zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
zIndex: `${zIndex ? zIndex : this.$tn.zIndex.indexListSticky}`,
color: `${activeColor}`
}
item.active = false
@@ -308,9 +308,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-index-list {
@@ -357,5 +357,5 @@
line-height: 50rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-input/tn-input.vue
+3 -3
View File
@@ -293,7 +293,7 @@
handleInput(event) {
let value = event.detail.value
// 是否需要去掉空格
if (this.trim) value = this.$t.string.trim(value)
if (this.trim) value = this.$tn.string.trim(value)
// 原生事件
this.$emit('input', value)
// model赋值
@@ -304,7 +304,7 @@
setTimeout(() => {
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
// #ifdef MP-TOUTIAO
if (this.$t.string.trim(value) === this.lastValue) return
if (this.$tn.string.trim(value) === this.lastValue) return
this.lastValue = value
// #endif
@@ -331,7 +331,7 @@
setTimeout(() => {
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
// #ifdef MP-TOUTIAO
if (this.$t.string.trim(value) === this.lastValue) return
if (this.$tn.string.trim(value) === this.lastValue) return
this.lastValue = value
// #endif
tuniao-ui/components/tn-keyboard/tn-keyboard.vue
+9 -9
View File
@@ -48,9 +48,9 @@
<tn-car-keyboard :randomEnabled="randomEnabled" :switchEnMode="switchEnMode" @change="change" @backspace="backspaceClick"></tn-car-keyboard>
</block>
</tn-popup>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-keyboard',
@@ -139,7 +139,7 @@
},
computed: {
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
}
},
data() {
@@ -171,9 +171,9 @@
this.$emit('backspace')
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-keyboard {
@@ -216,5 +216,5 @@
}
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-landscape/tn-landscape.vue
+10 -10
View File
@@ -21,9 +21,9 @@
:style="[maskStyle]"
@tap="closeMask"
></view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-landscape',
@@ -97,7 +97,7 @@
computed: {
containerStyle() {
let style = {}
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.landsacpe
style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.landsacpe
return style
},
closeBtnStyle() {
@@ -131,7 +131,7 @@
},
maskStyle() {
let style = {}
style.zIndex = this.zIndex ? this.zIndex - 1 : this.$t.zIndex.landsacpe - 1
style.zIndex = this.zIndex ? this.zIndex - 1 : this.$tn.zIndex.landsacpe - 1
return style
}
},
@@ -160,9 +160,9 @@
this.close()
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-landscape {
width: 100%;
@@ -221,5 +221,5 @@
transform: scale3d(1, 1, 1);
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
+12 -12
View File
File diff suppressed because one or more lines are too long
tuniao-ui/components/tn-line-progress/tn-line-progress.vue
+4 -4
View File
@@ -6,7 +6,7 @@
<view
class="tn-line-progress--active"
:class="[
$t.color.getBackgroundColorInternalClass(activeColor),
$tn.color.getBackgroundColorInternalClass(activeColor),
striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
]"
:style="[progressActiveStyle]"
@@ -70,7 +70,7 @@
let style = {}
style.borderRadius = this.round ? '100rpx' : 0
if (this.height) {
style.height = this.$t.string.getLengthUnitValue(this.height)
style.height = this.$tn.string.getLengthUnitValue(this.height)
}
if (this.inactiveColor) {
style.backgroundColor = this.inactiveColor
@@ -80,8 +80,8 @@
progressActiveStyle() {
let style = {}
style.width = this.percent + '%'
if (this.$t.color.getBackgroundColorStyle(this.activeColor)) {
style.backgroundColor = this.$t.color.getBackgroundColorStyle(this.activeColor)
if (this.$tn.color.getBackgroundColorStyle(this.activeColor)) {
style.backgroundColor = this.$tn.color.getBackgroundColorStyle(this.activeColor)
}
return style
}
tuniao-ui/components/tn-load-more/tn-load-more.vue
+9 -9
View File
@@ -26,9 +26,9 @@
</view>
<view class="tn-load-more__line"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -101,7 +101,7 @@
}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
style.lineHeight = this.$t.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
style.lineHeight = this.$tn.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
}
return style
},
@@ -129,9 +129,9 @@
if (this.status === 'loadmore') this.$emit('loadmore')
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-load-more {
@@ -184,5 +184,5 @@
font-size: 28rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
+5 -5
View File
@@ -167,7 +167,7 @@
return style
},
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.navbar
return this.zIndex ? this.zIndex : this.$tn.zIndex.navbar
}
},
data() {
@@ -206,7 +206,7 @@
// 如果获取失败则重新获取
if (!customBarHeight) {
try {
const navBarInfo = await this.$t.updateCustomBar()
const navBarInfo = await this.$tn.updateCustomBar()
customBarHeight = navBarInfo.customBarHeight
statusBarHeight = navBarInfo.statusBarHeight
} catch(e) {
@@ -218,8 +218,8 @@
}
// 更新vuex中的导航栏信息
this && this.$t.vuex('vuex_status_bar_height', statusBarHeight)
this && this.$t.vuex('vuex_custom_bar_height', customBarHeight)
this && this.$tn.vuex('vuex_status_bar_height', statusBarHeight)
this && this.$tn.vuex('vuex_custom_bar_height', customBarHeight)
this.customBarHeight = customBarHeight
this.statusBarHeight = statusBarHeight
@@ -230,7 +230,7 @@
// 执行回调，同时传入索引当作参数
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
let beforeBack = this.beforeBack.bind(this.$t.$parent.call(this))()
let beforeBack = this.beforeBack.bind(this.$tn.$parent.call(this))()
// 判断是否返回了Promise
if (!!beforeBack && typeof beforeBack.then === 'function') {
await beforeBack.then(res => {
tuniao-ui/components/tn-number-box/tn-number-box.vue
+13 -13
View File
@@ -10,7 +10,7 @@
]"
:style="{
backgroundColor: backgroundColorStyle,
height: $t.string.getLengthUnitValue(inputHeight),
height: $tn.string.getLengthUnitValue(inputHeight),
color: fontColorStyle,
fontSize: fontSizeStyle
}"
@@ -31,8 +31,8 @@
{'tn-number-box__input--disabled': disabledInput || disabled}
]"
:style="{
width: $t.string.getLengthUnitValue(inputWidth),
height: $t.string.getLengthUnitValue(inputHeight),
width: $tn.string.getLengthUnitValue(inputWidth),
height: $tn.string.getLengthUnitValue(inputHeight),
color: fontColorStyle,
fontSize: fontSizeStyle,
backgroundColor: backgroundColorStyle
@@ -51,7 +51,7 @@
]"
:style="{
backgroundColor: backgroundColorStyle,
height: $t.string.getLengthUnitValue(inputHeight),
height: $tn.string.getLengthUnitValue(inputHeight),
color: fontColorStyle,
fontSize: fontSizeStyle
}"
@@ -60,9 +60,9 @@
>
<view class="tn-icon-add"></view>
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColor from '../../libs/mixin/components_color.js'
@@ -170,7 +170,7 @@
if (newVal === '') return
let value = 0
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
let isNumber = this.$t.test.number(newVal)
let isNumber = this.$tn.test.number(newVal)
if (isNumber && newVal >= this.min && newVal <= this.max) value = newVal
else value = oldVal
@@ -347,9 +347,9 @@
})
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-number-box {
@@ -397,5 +397,5 @@
background: $tn-font-holder-color !important;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
+3 -3
View File
@@ -62,7 +62,7 @@
if (!this.randomEnabled) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
} else {
let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
data.splice(-1, 0, '')
return data
}
@@ -70,7 +70,7 @@
if (!this.randomEnabled) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]
} else {
let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
data.splice(-1, 0, this.dot)
return data
}
@@ -78,7 +78,7 @@
if (!this.randomEnabled) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]
} else {
let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
let data = this.$tn.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
data.splice(-1, 0, this.cardX)
return data
}
tuniao-ui/components/tn-picker/tn-picker.vue
+2 -2
View File
@@ -287,7 +287,7 @@
return [this.year, this.month]
},
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
}
},
data() {
@@ -366,7 +366,7 @@
},
// 往数字前面补0
formatNumber(num) {
return this.$t.number.formatNumberAddZero(num)
return this.$tn.number.formatNumberAddZero(num)
},
// 生成递进的数组
generateArray(start, end) {
tuniao-ui/components/tn-popup/tn-popup.vue
+15 -15
View File
@@ -66,9 +66,9 @@
<view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -187,7 +187,7 @@
popupStyle() {
let style = {}
if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
style.marginTop = this.$t.string.getLengthUnitValue(this.marginTop, 'px')
style.marginTop = this.$tn.string.getLengthUnitValue(this.marginTop, 'px')
}
return style
@@ -198,14 +198,14 @@
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
if (this.mode === 'left' || this.mode === 'right') {
style = {
width: this.width ? this.$t.string.getLengthUnitValue(this.width) : this.$t.string.getLengthUnitValue(this.length),
width: this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length),
height: '100%',
transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
}
} else if (this.mode === 'top' || this.mode === 'bottom') {
style = {
width: '100%',
height: this.height ? this.$t.string.getLengthUnitValue(this.height) : this.$t.string.getLengthUnitValue(this.length),
height: this.height ? this.$tn.string.getLengthUnitValue(this.height) : this.$tn.string.getLengthUnitValue(this.length),
transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
}
}
@@ -238,12 +238,12 @@
// 中部弹窗的样式
centerStyle() {
let style = {}
style.width = this.width ? this.$t.string.getLengthUnitValue(this.width) : this.$t.string.getLengthUnitValue(this.length)
style.width = this.width ? this.$tn.string.getLengthUnitValue(this.width) : this.$tn.string.getLengthUnitValue(this.length)
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
style.height = this.height ? this.$t.string.getLengthUnitValue(this.height) : 'auto'
style.height = this.height ? this.$tn.string.getLengthUnitValue(this.height) : 'auto'
style.zIndex = this.elZIndex
if (this.negativeTop) {
style.marginTop = `-${this.$t.string.getLengthUnitValue(this.negativeTop)}`
style.marginTop = `-${this.$tn.string.getLengthUnitValue(this.negativeTop)}`
}
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`
@@ -267,7 +267,7 @@
return style
},
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
}
},
data() {
@@ -350,9 +350,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-popup {
@@ -487,5 +487,5 @@
opacity: 1;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-rate/tn-rate.vue
+14 -14
View File
@@ -20,9 +20,9 @@
></view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-rate',
@@ -148,8 +148,8 @@
return index => {
let style = {}
style.fontSize = this.$t.string.getLengthUnitValue(this.size)
style.padding = `0 ${this.$t.string.getLengthUnitValue(this.gutter / 2)}`
style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
style.padding = `0 ${this.$tn.string.getLengthUnitValue(this.gutter / 2)}`
// 当前图标的颜色
if (this.allowHalf && this.halfIcon) {
style.color = this.activeIndex > index + 1 ? this.elActionColor : this.inactiveColor
@@ -163,8 +163,8 @@
halfIconStyle() {
let style = {}
style.fontSize = this.$t.string.getLengthUnitValue(this.size)
style.padding = `0 ${this.$t.string.getLengthUnitValue(this.gutter / 2)}`
style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
style.padding = `0 ${this.$tn.string.getLengthUnitValue(this.gutter / 2)}`
style.color = this.elActionColor
return style
}
@@ -172,8 +172,8 @@
data() {
return {
// 保证控件的唯一性
elId: this.$t.uuid(),
elClass: this.$t.uuid(),
elId: this.$tn.uuid(),
elClass: this.$tn.uuid(),
// 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
starBoxLeft: 0,
// 当前激活的星星的序号
@@ -303,9 +303,9 @@
this.$emit('input', this.activeIndex)
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-rate {
@@ -330,5 +330,5 @@
}
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-read-more/tn-read-more.vue
+9 -9
View File
@@ -23,9 +23,9 @@
</view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
import componentsColorMixin from '../../libs/mixin/components_color.js'
export default {
@@ -127,7 +127,7 @@
},
data() {
return {
elId: this.$t.uuid(),
elId: this.$tn.uuid(),
// 标记是否已经初始化高度完成
initHeight: false,
// 是否需要隐藏一部分内容
@@ -175,9 +175,9 @@
this.$emit(this.showMore ? 'open' : 'closed', this.index)
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-read-more {
@@ -218,5 +218,5 @@
margin-left: 14rpx;
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-select/tn-select.vue
+10 -10
View File
@@ -49,9 +49,9 @@
</view>
</view>
</tn-popup>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-select',
@@ -138,7 +138,7 @@
},
computed: {
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.popup
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
}
},
data() {
@@ -189,7 +189,7 @@
setDefaultSelector() {
// 如果没有传入默认值，生成用0填充长度为columnNum的数组
this.defaultSelector = this.defaultValue.length === this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0)
this.lastSelectIndex = this.$t.deepClone(this.defaultSelector)
this.lastSelectIndex = this.$tn.deepClone(this.defaultSelector)
},
// 计算列数
setColumnNum() {
@@ -310,9 +310,9 @@
this.close()
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-select {
@@ -376,5 +376,5 @@
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-sign-board/tn-sign-board.vue
+13 -13
View File
@@ -34,9 +34,9 @@
<view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
<canvas canvas-id="temp-tn-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-sign-board',
@@ -290,14 +290,14 @@
this.getRotateImage(res.tempFilePath).then((res) => {
this.$emit('save', res)
}).catch(err => {
this.$t.message.toast('旋转图片失败')
this.$tn.message.toast('旋转图片失败')
})
} else {
this.$emit('save', res.tempFilePath)
}
},
fail: () => {
this.$t.message.toast('保存失败')
this.$tn.message.toast('保存失败')
}
}, this)
},
@@ -315,7 +315,7 @@
urls: [res]
})
}).catch(err => {
this.$t.message.toast('旋转图片失败')
this.$tn.message.toast('旋转图片失败')
})
} else {
uni.previewImage({
@@ -324,13 +324,13 @@
}
},
fail: (e) => {
this.$t.message.toast('预览失败')
this.$tn.message.toast('预览失败')
}
}, this)
},
// 关闭签名板
closeBoard() {
this.$t.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
this.$tn.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
this.$emit('closed')
}, true)
},
@@ -595,9 +595,9 @@
})
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-sign-board {
@@ -686,5 +686,5 @@
}
}
}
}
</style>
}
</style>
tuniao-ui/components/tn-skeleton/tn-skeleton.vue
+5 -5
View File
@@ -8,21 +8,21 @@
>
<view
v-for="(item, index) in rectNodes"
:key="$t.uuid()"
:key="$tn.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()"
:key="$tn.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()"
:key="$tn.uuid()"
class="tn-skeleton__item tn-skeleton__item--fillet"
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
:style="[itemStyle('fillet', item)]"
@@ -75,10 +75,10 @@
},
computed: {
elBackgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.elBackgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.elBackgroundColor)
},
elBackgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.elBackgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.elBackgroundColor)
},
// 骨架屏样式
skeletonStyle() {
tuniao-ui/components/tn-slider/tn-slider.vue
+11 -11
View File
@@ -13,7 +13,7 @@
:style="[
barStyle,
{
height: this.$t.string.getLengthUnitValue(lineHeight),
height: this.$tn.string.getLengthUnitValue(lineHeight),
backgroundColor: activeColor
}
]"
@@ -33,16 +33,16 @@
v-else
class="tn-slider__button"
:style="[blockStyle, {
height: this.$t.string.getLengthUnitValue(blockWidth),
width: this.$t.string.getLengthUnitValue(blockWidth),
height: this.$tn.string.getLengthUnitValue(blockWidth),
width: this.$tn.string.getLengthUnitValue(blockWidth),
backgroundColor: blockColor
}]"
></view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-slider',
@@ -210,9 +210,9 @@
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-slider {
width: 100%;
@@ -251,5 +251,5 @@
&--disabled {
opacity: 0.6;
}
}
</style>
}
</style>
tuniao-ui/components/tn-sticky/tn-sticky.vue
+4 -4
View File
@@ -64,13 +64,13 @@
},
computed: {
elZIndex() {
return this.zIndex ? this.zIndex : this.$t.zIndex.sticky
return this.zIndex ? this.zIndex : this.$tn.zIndex.sticky
},
backgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
},
stickyClass() {
let clazz = ''
@@ -97,7 +97,7 @@
// 监听组件别名
stickyObserverName: 'tnStickyObserver',
// 组件的唯一编号
elClass: this.$t.uuid(),
elClass: this.$tn.uuid(),
// 是否固定
fixed: false,
// 高度
tuniao-ui/components/tn-subsection/tn-subsection.vue
+2 -2
View File
@@ -215,7 +215,7 @@
},
itemBarClass() {
let clazz = ''
const buttonBgClass = this.$t.color.getBackgroundColorInternalClass(this.buttonColor)
const buttonBgClass = this.$tn.color.getBackgroundColorInternalClass(this.buttonColor)
if (this.animation) {
clazz += ' tn-subsection__bg__animation'
if (this.animationType) {
@@ -230,7 +230,7 @@
// 滑块样式
itemBarStyle() {
let style = {}
const buttonBgStyle = this.$t.color.getBackgroundColorStyle(this.buttonColor)
const buttonBgStyle = this.$tn.color.getBackgroundColorStyle(this.buttonColor)
if (buttonBgStyle) {
style.backgroundColor = this.buttonColor
}
tuniao-ui/components/tn-swiper/tn-swiper.vue
+2 -2
View File
@@ -177,10 +177,10 @@
},
computed: {
backgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
},
swiperStyle() {
let style = {}
tuniao-ui/components/tn-switch/tn-switch.vue
+12 -12
View File
@@ -34,9 +34,9 @@
!value ? 'tn-switch__icon--show' : ''
]"
:style="[iconStyle]"></view>
</view>
</template>
</view>
</template>
<script>
export default {
name: 'tn-switch',
@@ -105,7 +105,7 @@
computed: {
switchStyle() {
let style = {}
style.fontSize = this.$t.string.getLengthUnitValue(this.size)
style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
style.backgroundColor = this.value ?
this.activeColor ? this.activeColor : '#01BEFF' :
this.inactiveColor ? this.inactiveColor : '#AAAAAA'
@@ -113,14 +113,14 @@
},
switchNodeStyle() {
let style = {}
style.width = this.$t.string.getLengthUnitValue(this.size)
style.width = this.$tn.string.getLengthUnitValue(this.size)
style.height = style.width
return style
},
iconStyle() {
let style = {}
style.fontSize = this.$t.string.getLengthUnitValue(this.size - 20)
style.lineHeight = this.$t.string.getLengthUnitValue(this.size)
style.fontSize = this.$tn.string.getLengthUnitValue(this.size - 20)
style.lineHeight = this.$tn.string.getLengthUnitValue(this.size)
return style
},
loadingColor() {
@@ -144,9 +144,9 @@
}
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-switch {
@@ -237,5 +237,5 @@
&--disabled {
opacity: 0.4;
}
}
</style>
}
</style>
tuniao-ui/components/tn-tabbar/tn-tabbar.vue
+8 -8
View File
@@ -61,7 +61,7 @@
:absolute="true"
:top="2"
>
{{ $t.number.formatNumberString(item.count) }}
{{ $tn.number.formatNumberString(item.count) }}
</tn-badge>
</view>
@@ -220,13 +220,13 @@
}
// 判断是否获取内部样式
if (style) {
if (this.$t.color.getFontColorStyle(color) !== '') {
if (this.$tn.color.getFontColorStyle(color) !== '') {
return color
} else {
return ''
}
} else {
if (this.$t.color.getFontColorStyle(color) === '') {
if (this.$tn.color.getFontColorStyle(color) === '') {
return color
} else {
return ''
@@ -246,13 +246,13 @@
}
// 判断是否获取内部样式
if (style) {
if (this.$t.color.getFontColorStyle(color) !== '') {
if (this.$tn.color.getFontColorStyle(color) !== '') {
return color
} else {
return ''
}
} else {
if (this.$t.color.getFontColorStyle(color) === '') {
if (this.$tn.color.getFontColorStyle(color) === '') {
return color + ' tn-tabbar__content__item__icon--clip'
} else {
return ''
@@ -277,7 +277,7 @@
let clazz = ''
if (this.list[index]['out']) {
clazz += 'tn-tabbar__content__item__button--out'
if (this.$t.color.getFontColorStyle(this.activeIconColor) === '') {
if (this.$tn.color.getFontColorStyle(this.activeIconColor) === '') {
clazz += ` ${this.activeIconColor}`
}
if (this.value === index) {
@@ -297,7 +297,7 @@
return (index) => {
let style = {}
if (this.list[index]['out']) {
if (this.$t.color.getFontColorStyle(this.activeIconColor) !== '') {
if (this.$tn.color.getFontColorStyle(this.activeIconColor) !== '') {
style.backgroundColor = this.activeIconColor
}
style.width = `${this.outHeight - 35}rpx`
@@ -378,7 +378,7 @@
// 执行回调，同时传入索引当作参数
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
let beforeSwitch = this.beforeSwitch.bind(this.$t.$parent.call(this))(index)
let beforeSwitch = this.beforeSwitch.bind(this.$tn.$parent.call(this))(index)
// 判断是否返回了Promise
if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
await beforeSwitch.then(res => {
tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
+6 -6
View File
@@ -1,5 +1,5 @@
<template>
<view class="tn-tabs-swiper-class tn-tabs-swiper" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px'), zIndex: zIndex}">
<view class="tn-tabs-swiper-class tn-tabs-swiper" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $tn.string.getLengthUnitValue(top, 'px'), zIndex: zIndex}">
<scroll-view scroll-x class="tn-tabs-swiper__scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{zIndex: zIndex + 1}">
<view class="tn-tabs-swiper__scroll-view__box" :class="{'tn-tabs-swiper__scroll-view--flex': !isScroll}">
@@ -171,8 +171,8 @@
tabItemStyle() {
return index => {
let style = {
height: this.$t.string.getLengthUnitValue(this.height),
lineHeight: this.$t.string.getLengthUnitValue(this.height),
height: this.$tn.string.getLengthUnitValue(this.height),
lineHeight: this.$tn.string.getLengthUnitValue(this.height),
fontSize: this.fontSizeStyle || '28rpx',
color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,
padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
@@ -191,8 +191,8 @@
// 底部滑块样式
tabBarStyle() {
let style = {
width: this.$t.string.getLengthUnitValue(this.barWidth),
height: this.$t.string.getLengthUnitValue(this.barHeight),
width: this.$tn.string.getLengthUnitValue(this.barWidth),
height: this.$tn.string.getLengthUnitValue(this.barHeight),
borderRadius: `${this.barHeight / 2}rpx`,
backgroundColor: this.activeColor,
left: this.scrollBarLeft + 'px'
@@ -245,7 +245,7 @@
this.setScrollViewToCenter()
})
// 获取渐变颜色数组
this.colorGradientArr = this.$t.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
this.colorGradientArr = this.$tn.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
},
// 发送事件
emit(index) {
tuniao-ui/components/tn-tabs/tn-tabs.vue
+7 -7
View File
@@ -1,5 +1,5 @@
<template>
<view class="tn-tabs-class tn-tabs" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px')}">
<view class="tn-tabs-class tn-tabs" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $tn.string.getLengthUnitValue(top, 'px')}">
<!-- _tgetRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
<view :id="id">
@@ -140,8 +140,8 @@
// 底部滑块样式
tabBarStyle() {
let style = {
width: this.$t.string.getLengthUnitValue(this.barWidth),
height: this.$t.string.getLengthUnitValue(this.barHeight),
width: this.$tn.string.getLengthUnitValue(this.barWidth),
height: this.$tn.string.getLengthUnitValue(this.barHeight),
borderRadius: `${this.barHeight / 2}rpx`,
backgroundColor: this.activeColor,
opacity: this.barMoveFirst ? 0 : 1,
@@ -155,9 +155,9 @@
tabItemStyle() {
return index => {
let style = {
width: this.$t.string.getLengthUnitValue(this.itemWidth),
height: this.$t.string.getLengthUnitValue(this.height),
lineHeight: this.$t.string.getLengthUnitValue(this.height),
width: this.$tn.string.getLengthUnitValue(this.itemWidth),
height: this.$tn.string.getLengthUnitValue(this.height),
lineHeight: this.$tn.string.getLengthUnitValue(this.height),
fontSize: this.fontSizeStyle || '28rpx',
padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
flex: this.isScroll ? 'auto' : '1',
@@ -179,7 +179,7 @@
data() {
return {
// id值
id: this.$t.uuid(),
id: this.$tn.uuid(),
// 滚动scroll-view的左边距离
scrollLeft: 0,
// 存放查询后tab菜单的节点信息
tuniao-ui/components/tn-tips/tn-tips.vue
+5 -5
View File
@@ -67,21 +67,21 @@
if ((this.position === 'top' || this.position === '') && this.top) {
style.top = this.top + 'px'
}
style.zIndex = (this.zIndex ? this.zIndex : this.$t.zIndex.tips) + 1
style.zIndex = (this.zIndex ? this.zIndex : this.$tn.zIndex.tips) + 1
return style
},
backgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
},
fontColorStyle() {
return this.$t.color.getFontColorStyle(this.fontColor)
return this.$tn.color.getFontColorStyle(this.fontColor)
},
fontColorClass() {
return this.$t.color.getFontColorInternalClass(this.fontColor)
return this.$tn.color.getFontColorInternalClass(this.fontColor)
},
},
data() {
tuniao-ui/components/tn-toast/tn-toast.vue
+10 -10
View File
@@ -21,9 +21,9 @@
</view>
<view class="tn-toast__mask" :class="[visible ? 'tn-toast__mask--show' : '']" :style="[maskStyle]"></view>
</view>
</template>
</view>
</template>
<script>
export default {
@@ -58,13 +58,13 @@
// style.width = this.content ? '420rpx' : '360rpx'
}
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.toast
style.zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.toast
return style
},
maskStyle() {
let style = {}
const zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.toast
const zIndex = this.zIndex ? this.zIndex : this.$tn.zIndex.toast
style.zIndex = zIndex - 1
return style
},
@@ -137,9 +137,9 @@
this.image = ''
}
}
}
</script>
}
</script>
<style lang="scss" scoped>
.tn-toast {
@@ -223,5 +223,5 @@
}
}
}
</style>
</style>
tuniao-ui/index.js
+3 -3
View File
@@ -38,7 +38,7 @@ import zIndex from './libs/config/zIndex.js'
// 主题颜色信息
import colorInfo from './libs/config/color.js'
const $t = {
const $tn = {
updateCustomBar: updateCustomBarInfo,
color,
message,
@@ -54,7 +54,7 @@ const $t = {
}
// 挂载到uni对象上
uni.$t = $t
uni.$tn = $tn
const install = Vue => {
// 全局混入
@@ -62,7 +62,7 @@ const install = Vue => {
// Filter格式化
Vue.prototype.$t = $t
Vue.prototype.$tn = $tn
}
export default {
tuniao-ui/libs/css/style.mp.scss
+1 -5
View File
@@ -40,11 +40,7 @@
}
}
}
/* 双标签 end*/
page {
// overflow-y: auto;
}
/* 双标签 end*/
/* #endif */
/* 微信小程序编译后页面有组件名的元素，特别处理 end */
tuniao-ui/libs/function/colorUtils.js
-270
View File
@@ -1,270 +0,0 @@
let color = [
'red',
'purplered',
'purple',
'bluepurple',
'aquablue',
'blue',
'indigo',
'cyan',
'teal',
'green',
'yellowgreen',
'lime',
'yellow',
'orangeyellow',
'orange',
'orangered',
'brown',
'grey',
'gray'
]
// 酷炫颜色的数量
const COOL_BG_COLOR_COUNT = 16
/**
* 获取图鸟配色颜色列表
*/
function getTuniaoColorList() {
return color
}
/**
* 获取指定类型的随机颜色对应的类
* @param {String} type 颜色类型
*/
function getRandomColorClass(type = 'bg') {
const index = Math.floor(Math.random() * color.length)
const colorValue = color[index]
return 'tn-' + type + '-' + colorValue
}
/**
* 随机获取酷炫背景对应的类
*/
function getRandomCoolBgClass() {
const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
return 'tn-cool-bg-color-' + Math.floor(index)
}
/**
* 根据传入的值获取内部背景颜色类
*
* @param {String} backgroundColor 背景颜色信息
*/
function getBackgroundColorInternalClass(backgroundColor = '') {
if (!backgroundColor) return ''
if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
return backgroundColor.includes(item)
})) {
return backgroundColor
}
return ''
}
/**
* 根据传入的值获取背景颜色样式
*
* @param {String} backgroundColor 背景颜色信息
*/
function getBackgroundColorStyle(backgroundColor = '') {
if (!backgroundColor) return ''
if (!backgroundColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
return backgroundColor.includes(item)
})) {
return backgroundColor
}
return ''
}
/**
* 根据传入的值获取内部字体颜色类
*
* @param {String} fontColor 背景颜色信息
*/
function getFontColorInternalClass(fontColor = '') {
if (!fontColor) return ''
if (['tn-color'].some(item => {
return fontColor.includes(item)
})) {
return fontColor
}
return ''
}
/**
* 根据传入的值获取字体颜色样式
*
* @param {String} fontColor 背景颜色信息
*/
function getFontColorStyle(fontColor = '') {
if (!fontColor) return ''
if (!fontColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
return fontColor.includes(item)
})) {
return fontColor
}
return ''
}
/**
* 求两个颜色之间的渐变值
*
* @param {String} startColor 开始颜色
* @param {String} endColor 结束颜色
* @param {Number} step 颜色等分的份额
*/
function colorGradient(startColor = 'rgb(0, 0, 0)', endColor='rgb(255, 255, 255)', step = 10) {
let startRGB = hexToRGB(startColor, false)
let startR = startRGB[0]
let startG = startRGB[1]
let startB = startRGB[2]
let endRGB = hexToRGB(endColor, false)
let endR = endRGB[0]
let endG = endRGB[1]
let endB = endRGB[2]
// 求差值
let R = (endR - startR) / step
let G = (endG - startG) / step
let B = (endB - startB) / step
let colorArr = []
for (let i = 0; i < step; i++) {
// 计算每一步的hex值
let hex = rgbToHex(`rgb(${Math.round(R * i + startR)}, ${Math.round(G * i + startG)}, ${Math.round(B * i + startB)})`)
colorArr.push(hex)
}
return colorArr
}
/**
* 将hex的颜色表示方式转换为rgb表示方式
*
* @param {String} color 颜色
* @param {Boolean} str 是否返回字符串
* @return {Array|String} rgb的值
*/
function hexToRGB(color, str = true) {
let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
color = color.toLowerCase()
if (color && reg.test(color)) {
// #000 => #000000
if (color.length === 4) {
let colorNew = '#'
for (let i = 1; i < 4; i++) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
}
color = colorNew
}
// 处理六位的颜色值
let colorChange = []
for (let i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
}
if (!str) {
return colorChange
} else {
return `rgb(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]})`
}
} else if (/^(rgb|RGB)/.test(color)) {
let arr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(',')
return arr.map(item => Number(item))
} else {
return color
}
}
/**
* 将rgb的颜色表示方式转换成hex表示方式
*
* @param {Object} rgb rgb颜色值
*/
function rgbToHex(rgb) {
let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
if (/^(rgb|RGB)/.test(rgb)) {
let color = rgb.replace(/(?:\(|\)|rgb|GRB)*/g, "").split(',')
let strHex = '#'
for (let i = 0; i < color.length; i++) {
let hex = Number(color[i]).toString(16)
// 保证每个值否是两位数
hex = String(hex).length === 1 ? 0 + '' + hex: hex
if (hex === '0') {
hex += hex
}
strHex += hex
}
if (strHex.length !== 7) {
strHex = rgb
}
return strHex
} else if (reg.test(rgb)) {
let num = rgb.replace(/#/, '').split('')
if (num.length === 6) {
return rgb
} else if (num.length === 3) {
let numHex = '#'
for (let i = 0; i < num.length; i++) {
numHex += (num[i] + num[i])
}
return numHex
}
} else {
return rgb
}
}
/**
* 将传入的颜色值转换为rgba字符串
*
* @param {String} color 颜色
* @param {Number} alpha 透明度
*/
function colorToRGBA(color, alpha = 0.3) {
color = rgbToHex(color)
// 十六进制颜色值的正则表达式
let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
color = color.toLowerCase()
if (color && reg.test(color)) {
// #000 => #000000
if (color.length === 4) {
let colorNew = '#'
for (let i = 1; i < 4; i++) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
}
color = colorNew
}
// 处理六位的颜色值
let colorChange = []
for (let i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
}
return `rgba(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]}, ${alpha})`
} else {
return color
}
}
export default {
COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
getTuniaoColorList,
getRandomColorClass,
getRandomCoolBgClass,
getBackgroundColorInternalClass,
getBackgroundColorStyle,
getFontColorInternalClass,
getFontColorStyle,
colorGradient,
hexToRGB,
rgbToHex,
colorToRGBA
}
tuniao-ui/libs/function/messageUtils.js
-74
View File
@@ -1,74 +0,0 @@
/**
* 弹出系统内置的toast
*/
function toast(title, mask = false, cb = null, icon = 'none', duration = 1500) {
uni.showToast({
title: title,
icon: icon,
mask: mask,
duration: duration,
success: () => {
setTimeout(() => {
cb && cb()
}, duration)
}
})
}
/**
* 弹出内置的加载框
*/
function loading(title) {
uni.showLoading({
title: title,
mask: true
})
}
/**
* 弹出系统内置的modal
*/
function modal(title,
content,
confirmCb,
showCancel = false,
cancelCb = null,
confirmText = "确定",
cancelText = "取消") {
uni.showModal({
title: title,
content: content,
showCancel: showCancel,
cancelText: cancelText,
confirmText: confirmText,
success: (res) => {
if (res.cancel) {
cancelCb && cancelCb()
} else if (res.confirm) {
confirmCb && confirmCb()
}
}
})
}
/**
* 关闭系统内置toast
*/
function closeToast() {
uni.hideToast()
}
/**
* 关闭系统内置的加载框
*/
function closeLoading() {
uni.hideLoading()
}
export default {
toast,
loading,
modal,
closeToast,
closeLoading
}
tuniao-ui/libs/mixin/components_color.js
+5 -5
View File
@@ -26,19 +26,19 @@ module.exports = {
},
computed: {
backgroundColorStyle() {
return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
return this.$tn.color.getBackgroundColorStyle(this.backgroundColor)
},
backgroundColorClass() {
return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
return this.$tn.color.getBackgroundColorInternalClass(this.backgroundColor)
},
fontColorStyle() {
return this.$t.color.getFontColorStyle(this.fontColor)
return this.$tn.color.getFontColorStyle(this.fontColor)
},
fontColorClass() {
return this.$t.color.getFontColorInternalClass(this.fontColor)
return this.$tn.color.getFontColorInternalClass(this.fontColor)
},
fontSizeStyle() {
return this.$t.string.getLengthUnitValue(this.fontSize, this.fontUnit)
return this.$tn.string.getLengthUnitValue(this.fontSize, this.fontUnit)
}
},
methods: {
tuniao-ui/libs/mixin/mixin.js
+3 -3
View File
@@ -4,12 +4,12 @@ module.exports = {
},
onLoad() {
// getRect挂载再$t上，用为这个方法需要使用in（this），所以无法把它独立层一个单独的文件导出
this.$t.getRect = this._tGetRect
this.$tn.getRect = this._tGetRect
},
beforeDestory() {
// 判断当前页面是否存在parent和children
// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
if (this.parent && uni.$t.test.array(this.parent.children)) {
if (this.parent && uni.$tn.test.array(this.parent.children)) {
// 组件销毁时，移除子组件在父组件children数组中的实例
const childrenList = this.parent.children
childrenList.map((child, index) => {
@@ -50,7 +50,7 @@ module.exports = {
// 通过获取父组件实例
// 将父组件this中对应的参数，赋值给本组件的parentData对象中对应的属性
// 头条小程序不支持通过this.parent.xxx去监听父组件参数的变化，所以需要本方法进行实现
this.parent = this.$t.$parent.call(this, parentName)
this.parent = this.$tn.$parent.call(this, parentName)
if (this.parent) {
// 遍历parentData中的属性，将parent中同名的属性赋值给parentData
Object.keys(this.parentData).map(key => {
tuniao-ui/libs/mixin/mpShare.js
+6 -6
View File
@@ -1,7 +1,7 @@
module.exports = {
onLoad() {
// 设置默认的转发参数
this.$t.mpShare = {
this.$tn.mpShare = {
// 分享的标题，默认为小程序名称
title: '',
// 分享的路径，默认为当前页面
@@ -11,19 +11,19 @@ module.exports = {
// 当前页面是否可以分享
share: true
}
if (!this.$t.mpShare.share) {
if (!this.$tn.mpShare.share) {
uni.hideShareMenu()
}
},
onShareAppMessage() {
return this.$t.mpShare
return this.$tn.mpShare
},
// #ifdef MP-WEIXIN
onShareTimeline() {
return {
title: this.$t.mpShare.title,
query: this.$t.mpShare.path.substring(this.$t.mpShare.path.indexOf('?') + 1, this.$t.mpShare.path.length),
imageUrl: this.$t.mpShare.imageUrl
title: this.$tn.mpShare.title,
query: this.$tn.mpShare.path.substring(this.$tn.mpShare.path.indexOf('?') + 1, this.$tn.mpShare.path.length),
imageUrl: this.$tn.mpShare.imageUrl
}
}
// #endif