更新众多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,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>