czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加other分包页面

Browse Source 
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
YeMingfei666
2024-12-20 18:01:37 +08:00
parent 908205200b
commit b2fd3ba347
154 changed files with 43228 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
tuniao-ui/components/tn-steps/tn-steps.vue Normal file
View File

@@ -0,0 +1,346 @@
<template>
<view
class="tn-steps-class tn-steps"
:style="{
flexDirection: direction
}"
>
<view
v-for="(item, index) in list"
:key="index"
class="tn-steps__item"
:class="[`tn-steps__item--${direction}`]"
@tap="clickStepItem(index)"
>
<!-- 数值模式 -->
<view
v-if="mode === 'number'"
class="tn-steps__item__number"
:style="{
backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
borderColor: currentIndex <= index ? inActiveColor : activeColor
}"
>
<text
class="tn-steps__item__number__text"
:class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
:style="{
color: currentIndex <= index ? inActiveColor : activeColor
}"
>
{{ index + 1}}
</text>
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
</view>
<!-- 点模式 -->
<view
v-if="mode === 'dot'"
class="tn-steps__item__dot"
:style="{
backgroundColor: currentIndex <= index ? inActiveColor : activeColor
}"
></view>
<!-- 图标模式 -->
<view
v-if="mode === 'icon'"
class="tn-steps__item__icon"
:class="[iconModeClass(index)]"
:style="{
color: currentIndex <= index ? inActiveColor : activeColor
}"
></view>
<!-- 点图标模式 -->
<view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
<view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
<view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
</view>
<!-- 步骤下的文字 -->
<text
v-if="showTitle"
class="tn-steps__item__text tn-text-ellipsis"
:class="[`tn-steps__item__text--${direction}`]"
:style="{
color: currentIndex <= index ? inActiveColor : activeColor
}"
>
{{ item.name }}
</text>
<!-- 连接的横线 -->
<view
v-if="index < list.length - 1"
class="tn-steps__item__line"
:class="[`tn-steps__item__line--${mode}`]"
:style="{
borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
}"
></view>
</view>
</view>
</template>
<script>
export default {
name: 'tn-steps',
props: {
// 模式类型
// dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
mode: {
type: String,
default: 'dot'
},
// 步骤条的方向
// row -> 横向 column -> 竖向
direction: {
type: String,
default: 'row'
},
// 步骤条数据
list: {
type: Array,
default() {
return []
}
},
// 当前激活的步数
current: {
type: Number,
default: 0
},
// 激活步骤的颜色
activeColor: {
type: String,
default: '#01BEFF'
},
// 未激活步骤的颜色
inActiveColor: {
type: String,
default: '#AAAAAA'
},
// 激活后显示的图标，在数字模式下有效
icon: {
type: String,
default: 'success'
},
// 是否显示标题
showTitle: {
type: Boolean,
default: true
}
},
computed: {
// icon模式下图标的值
iconModeClass() {
return (index) => {
const item = this.list[index]
// 状态被选中并且对应数据下存在selectIcon属性
if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
return `tn-icon-${item.selectIcon}`
} else {
// 未选中
return `tn-icon-${item.icon || this.icon}`
}
}
}
},
data() {
return {
currentIndex: 0
}
},
watch: {
current: {
handler(val) {
this.currentIndex = val
},
immediate: true
}
},
methods: {
// 点击了某一个选项
clickStepItem(index) {
const chooseIndex = index + 1
this.currentIndex = chooseIndex
this.$emit('click', { index: chooseIndex })
}
}
}
</script>
<style lang="scss" scoped>
$tn-steps-item-number-width: 44rpx;
$tn-steps-item-dot-width: 20rpx;
.tn-steps {
display: flex;
flex-direction: row;
&__item {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-width: 100rpx;
font-size: 28rpx;
text-align: center;
&__number {
// display: flex;
// flex-wrap: wrap;
// align-items: center;
// justify-content: center;
position: relative;
width: $tn-steps-item-number-width;
height: $tn-steps-item-number-width;
line-height: calc(#{$tn-steps-item-number-width} - 2rpx);
border: 1px solid #AAAAAA;
border-radius: 50%;
overflow: hidden;
transition: all 0.3s linear;
&__text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: inherit;
transform: translateY(-#{$tn-steps-item-number-width});
&--visible {
transform: translateY(0);
}
}
&__icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
color: #FFFFFF;
transition: all 0.3s linear;
transform: translateY(#{$tn-steps-item-number-width});
&--visible {
transform: translateY(0);
}
}
}
&__dot {
width: $tn-steps-item-dot-width;
height: $tn-steps-item-dot-width;
display: flex;
flex-direction: row;
border-radius: 50%;
transition: all 0.3s linear;
&--icon {
width: $tn-steps-item-number-width;
height: $tn-steps-item-number-width;
}
}
&__icon {
width: $tn-steps-item-number-width;
height: $tn-steps-item-number-width;
font-size: $tn-steps-item-number-width;
transition: all 0.3s linear;
}
&__dot-icon {
width: $tn-steps-item-number-width;
height: $tn-steps-item-number-width;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
&--dot {
width: $tn-steps-item-dot-width;
height: $tn-steps-item-dot-width;
border-radius: 50%;
transition: inherit;
}
&--icon {
width: $tn-steps-item-number-width;
height: $tn-steps-item-number-width;
font-size: $tn-steps-item-number-width;
transition: inherit;
}
}
&__text {
transition: all 0.3s linear;
&--row {
margin-top: 14rpx;
}
&--column {
margin-left: 14rpx;
}
}
&__line {
position: absolute;
z-index: 0;
vertical-align: middle;
transition: all 0.3s linear;
}
&--row {
display: flex;
flex-direction: column;
.tn-steps__item__line {
border-bottom-width: 1px;
border-bottom-style: solid;
width: 50%;
left: 75%;
&--dot {
top: calc(#{$tn-steps-item-dot-width} / 2);
}
&--number, &--icon, &--dotIcon {
top: calc(#{$tn-steps-item-number-width} / 2);
}
}
}
&--column {
display: flex;
flex-direction: row;
justify-content: flex-start;
min-height: 120rpx;
.tn-steps__item__line {
border-left-width: 1px;
border-left-style: solid;
height: 50%;
top: 75%;
&--dot {
left: calc(#{$tn-steps-item-dot-width} / 2);
}
&--number, &--icon, &--dotIcon {
left: calc(#{$tn-steps-item-number-width} / 2);
}
}
}
}
}
</style>