增加other分包页面

我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）

tuniao-ui/components/tn-list-view/tn-list-view.vue

@@ -0,0 +1,184 @@
+<template>
+  <view
+    class="tn-list-view-class tn-list-view"
+    :class="[
+      backgroundColorClass,
+      viewClass
+    ]"
+    :style="[viewStyle]"
+  >
+    <view
+      v-if="showTitle"
+      class="tn-list-view__title"
+      :class="[
+        fontColorClass
+      ]"
+      :style="[titleStyle]"
+      @tap="handleClickTitle"
+    >{{ title }}</view>
+    
+    <view
+      v-else
+      :class="[{'tn-list-view__title--card': card}]"
+      @tap="handleClickTitle"
+    >
+      <slot name="title"></slot>
+    </view>
+    
+    <view
+      class="tn-list-view__content tn-border-solid-top tn-border-solid-bottom"
+      :class="[contentClass]"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-list-view',
+    props: {
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 去掉边框 上边框 top, 下边框 bottom, 所有边框 all
+      unlined: {
+        type: String,
+        default: 'all'
+      },
+      // 上外边距
+      marginTop: {
+        type: String,
+        default: ''
+      },
+      // 内容是否显示为卡片模式
+      card: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自定义标题
+      customTitle: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      showTitle() {
+        return !this.customTitle && this.title
+      },
+      viewClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view--card'
+        }
+        
+        return clazz
+      },
+      viewStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.marginTop) {
+          style.marginTop = this.marginTop
+        }
+        
+        return style
+      },
+      titleStyle() {
+        let style = {}
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        return style
+      },
+      contentClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view__content--card'
+        }
+        
+        switch(this.unlined) {
+          case 'top':
+            clazz += ' tn-none-border-top'
+            break
+          case 'bottom':
+            clazz += ' tn-none-border-bottom'
+            break
+          case 'all':
+            clazz += ' tn-none-border'
+            break
+        }
+        
+        return clazz
+      }
+    },
+    data () {
+      return {
+        kindShowFlag: this.showKind
+      }
+    },
+    methods: {
+      // 处理标题点击事件
+      handleClickTitle() {
+        if (!this.kindList) return
+        this.kindShowFlag = !this.kindShowFlag
+        this.$emit("clickTitle", {})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-list-view {
+    background-color: #FFFFFF;
+    
+    &__title {
+      width: 100%;
+      padding: 30rpx;
+      font-size: 30rpx;
+      line-height: 30rpx;
+      box-sizing: border-box;
+      
+      &--card {
+        // margin: 0rpx 30rpx;
+      }
+    }
+    
+    &__content {
+      width: 100%;
+      position: relative;
+      border-radius: 0;
+      
+      &--card {
+        // width: auto;
+        // overflow: hidden;
+        // margin-right: 30rpx;
+        // margin-left: 30rpx;
+        // border-radius: 20rpx
+      }
+    }
+    
+    &--card {
+      // padding-bottom: 30rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
+    }
+    
+  }
+  
+</style>