更新众多VIP页面模板

vipPage/components/drag/basic-drag/basic-drag.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="vip-component-basic-drag">
+  
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>Drag拖拽</tn-nav-bar>
+  
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <view class="operation">
+        <view class="operation__item">
+          <view class="operation__title">设置columns</view>
+          <view class="operation__content">
+            <view class="tn-margin-right">columns:</view>
+            <tn-number-box v-model="columns" :min="3" :max="5" :disabledInput="true"></tn-number-box>
+          </view>
+        </view>
+        <view class="operation__item">
+          <view class="operation__title">设置固定项</view>
+          <view class="operation__content">
+            <view class="tn-margin-right">随机固定:</view>
+            <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" @click="setFixed">随机固定</tn-button>
+          </view>
+        </view>
+      </view>
+      
+      <view class="drag__wrap tn-margin-top">
+        <tn-drag :list="list" :columns="columns" :itemHeight="itemHeight" @change="onChange" @end="onEnd">
+          <template slot-scope="{entity, height, fixed}">
+            <view class="drag__item" :style="{height: `${height}rpx`}">
+              <image :src="entity.url" :style="{height: `${height}rpx`}" mode="widthFix"></image>
+              <view v-if="fixed" class="drag__item__fixed">Fixed</view>
+            </view>
+          </template>
+        </tn-drag>
+      </view>
+  
+    </view>
+  
+  </view>
+</template>
+
+<script> 
+  export default {
+    name: 'VipComponentBasicDrag',
+    data() {
+      return {
+        list: [],
+        scrollTop: 0,
+        columns: 3,
+        itemHeight: 210,
+        sliderValue: 3,
+      }
+    },
+    onLoad() {
+      const list = []
+      for (let i = 0; i < 15; i++) {
+        list.push({
+          url: i % 2 == 0 ? 'https://resource.tuniaokj.com/images/shop/bag1.jpg' : 'https://resource.tuniaokj.com/images/shop/bag2.jpg',
+          fixed: false
+        })
+      }
+      this.list = list
+    },
+    watch: {
+      columns(val) {
+        uni.pageScrollTo({
+          scrollTop: 0
+        })
+        this.itemHeight = [210, 160, 120][val - 3]
+      }
+    },
+    methods: {
+      onChange(data) {
+        // console.log(data.data);
+      },
+      onEnd(data) {
+        console.log(data.data);
+      },
+      // 设置动态固定项
+      setFixed() {
+        const rand = Math.floor(Math.random() * (15 - 1))
+        console.log(rand);
+        this.list.forEach((item) => {
+          item.fixed = false
+        })
+        this.list[rand].fixed = true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .operation {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 100rpx;
+    margin-top: 100rpx;
+    
+    &__item {
+      width: 100%;
+      margin-top: 20rpx;
+    }
+    
+    &__title {
+      font-size: 36rpx;
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      margin-top: 10rpx;
+    }
+  }
+  
+  .drag {
+    &__wrap {
+      padding-left: 30rpx;
+      padding-right: 30rpx;
+    }
+    
+    &__item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #FFFFFF;
+      padding: 20rpx;
+      box-sizing: border-box;
+      border: 1rpx solid #F6F6F6;
+      position: relative;
+      
+      image {
+        display: block;
+        flex-shrink: 0;
+        width: 100%;
+      }
+      
+      &__fixed {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.5);
+        font-size: 40rpx;
+      }
+    }
+  }
+</style>