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