<template>
	<view class="content">
		<view class="title">
			<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
		</view>
		<view class="top">
			<dragImg :listData="imgList" @change="changeImgList" :columns="4"></dragImg>
		</view>
		<view class="bottom" @click="next">
			下一步
		</view>
	</view>
</template>

<script>
	import dragImg from "../components/dragImg/dragImg.vue"
	export default {
		components:{
			dragImg
		},
		data() {
			return {
				imgList: [{
						images: '/static/images/swipe/1.png'
					},
					{
						images: '/static/images/swipe/2.png'
					},
					{
						images: '/static/images/swipe/3.png'
					},
					{
						images: '/static/images/swipe/4.png'
					},
					{
						images: '/static/images/swipe/5.png'
					},
					{
						images: '/static/images/swipe/6.png'
					},
					{
						images: '/static/images/swipe/7.png'
					},
					{
						images: '/static/images/swipe/8.png'
					},
					{
						images: '/static/images/swipe/9.png'
					},
					{
						images: '/static/images/swipe/10.png'
					}
				],
				sortImglist:[]
			}
		},
		onLoad() { //代替 vue 里面的 created
		},
		onReady() { //代替 vue 里面的 mounted
		},
		methods: {
			changeImgList(res) {
				this.sortImglist=res.listData
			},
			next(){//下一步
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url:"pages/vlog/orderPay/orderPay",
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		height: 100%;
		width: 100%;
		position: relative;
		.title{
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			color: #ABABAB;
			background-color: #fff;
			position: fixed;top: 0;z-index: 10;
		}
		.top{
			margin-top: 50rpx;
			border-top: 1px dashed #ccc;
			margin-bottom: 100rpx;
		}
		.bottom{position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color:#FFE600;right: 0;line-height: 100rpx;font-size: 32rpx;font-weight: bold;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;z-index: 10;text-align: center;}
	}
</style>
