mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-08 04:23:17 +08:00
更新众多VIP页面模板
This commit is contained in:
kert
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="vip-component-upload-image-drag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>可拖拽图片上传</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="drag__wrap tn-margin-top">
|
||||
<tn-image-upload-drag ref="imageUpload" :action="action" :height="220" :width="220" :formData="formData"
|
||||
:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
|
||||
:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
|
||||
:customBtn="customBtn" @sort-list="onSortList" />
|
||||
<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
|
||||
<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
||||
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx"
|
||||
@tap="clear">清空列表</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VipComponentUploadImageDrag',
|
||||
data() {
|
||||
return {
|
||||
action: 'https://www.hualigs.cn/api/upload',
|
||||
// action: '',
|
||||
formData: {
|
||||
apiType: 'this,ali',
|
||||
token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
|
||||
image: null
|
||||
},
|
||||
fileList: [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag1.jpg'
|
||||
}],
|
||||
showUploadList: true,
|
||||
customBtn: false,
|
||||
autoUpload: true,
|
||||
showProgress: true,
|
||||
deleteable: true,
|
||||
customStyle: false,
|
||||
maxCount: 9,
|
||||
disabled: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.pushFileList().then(res=>{
|
||||
this.fileList=[...this.fileList,...res]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//模拟异步获取数据
|
||||
async pushFileList() {
|
||||
return [{
|
||||
url: 'https://resource.tuniaokj.com/images/shop/bag2.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup1.jpg'
|
||||
}, {
|
||||
url: 'https://resource.tuniaokj.com/images/shop/cup2.jpg'
|
||||
}]
|
||||
},
|
||||
// 手动上传文件
|
||||
upload() {
|
||||
this.$refs.imageUpload.upload()
|
||||
},
|
||||
// 手动清空列表
|
||||
clear() {
|
||||
this.$refs.imageUpload.clear()
|
||||
},
|
||||
// 图片拖拽重新排序
|
||||
onSortList(list) {
|
||||
console.log(list);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drag {
|
||||
&__wrap {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user