更新众多VIP页面模板

2026-06-08 12:33:17 +08:00 · 2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
@@ -0,0 +1,111 @@
+<template>
+  <view class="">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>列表排序长按拖拽</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view class="tn-bg-gray--light" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
+      
+      <view class="drag__wrap tn-margin-top-sm tn-padding-bottom-xl">
+        
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;background-color: #FFFFFF;margin: 10rpx;border-radius: 10rpx;">
+          <view class="justify-content-item tn-text-bold tn-text-lg">
+            推荐
+          </view>
+          <view class="justify-content-item">
+            <text class="tn-icon-expand tn-text-xl tn-color-gray--disabled"></text>
+          </view>
+        </view>
+        
+        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
+          <template slot-scope="{entity, height}">
+            <view class="drag__item" :style="{height: `${height}rpx`}">
+              <view class="drag__item__name">
+                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="height: 100%;">
+                  <view class="justify-content-item tn-text-bold tn-text-lg">
+                    {{entity.name}}
+                  </view>
+                  <view class="justify-content-item">
+                    <text class="tn-icon-expand tn-text-xl"></text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </tn-drag>
+      </view>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script> 
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplateSet',
+    mixins: [template_page_mixin],
+    data() {
+      return {
+        list: [
+          {name: '商城'},
+          {name: '关注'},
+          {name: '团购'},
+          {name: '同城'},
+          {name: '经验'},
+          {name: '视频'},
+          {name: '直播'},
+          {name: '热点'},
+          {name: '治愈'}
+        ],
+        scrollTop: 0,
+        columns: 1,
+        itemHeight: 120,
+        sliderValue: 1,
+      }
+    },
+    methods: {
+      onChange(data) {
+        // console.log(data.data);
+      },
+      onEnd(data) {
+        // console.log(data.data);
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .drag {
+    &__wrap {
+      padding-left: 20rpx;
+      padding-right: 20rpx;
+    }
+    
+    &__item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background-color: #FF5656;
+      box-sizing: border-box;
+      padding: 10rpx;
+      // border: 1rpx solid #000000;
+      position: relative;
+      
+      &__fixed {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+      }
+      
+      &__name {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+        border-radius: 10rpx;
+      }
+    }
+  }
+</style>