demingshangjia/pages/index/index.vue

<template>
	<view class="home">
		<view class="image-swiper"><u-swiper :list="imageList" mode="dot" border-radius="20"></u-swiper></view>
		<view class="tab-swiper">
			<u-tabs-swiper
				ref="uTabs"
				:list="list"
				:current="current"
				@change="tabsChange"
				active-color="#FF780F"
				inactive-color="#333333"
				font-size="26"
				height="98"
				:show-bar="false"
				swiperWidth="750"
				gutter="52"
			></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" class="order-list">
					<view v-for="(item, index) in allorder" :key="index">
						<OrderItem :info="item"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index"><OrderItem :cur="current"></OrderItem></view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index"><OrderItem :cur="current"></OrderItem></view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="complaint">
						<view class="select-container">
							<view class="title">选择骑手</view>
							<view class="worker" v-if="JSON.stringify(worker) != '{}'">
								<view>{{ worker.company + ' ' + worker.name }}</view>
								<u-icon name="edit-pen" @click="worker = {}"></u-icon>
							</view>
							<view v-else class="select" @click="showSelect = true">
								<view>请选择</view>
								<image src="/static/image/home/5.png"></image>
							</view>
						</view>
						<view class="textarea">
							<view class="title">投诉简介</view>
							<textarea placeholder-style="color:#999999" placeholder="请输入内容" />
						</view>
						<!-- 事件 -->
						<view class="btn" @click="showComplaint = true">确定</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index"><OrderItem :cur="current"></OrderItem></view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 15" :key="index"><OrderItem :cur="current"></OrderItem></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="release-btn" @click="publish">
			<image src="../../static/image/index/publish.png"></image>
			<view class="text">发布</view>
		</view>
		<u-select v-model="showSelect" mode="mutil-column-auto" :list="workerList" @confirm="setWorker"></u-select>
		<u-popup v-model="showComplaint" mode="center" border-radius="10">
			<view class="confirm-complaint">
				<view class="text">
					<view>投诉成功</view>
					<view>请等待审核结果</view>
				</view>
				<view class="btn" @click="showComplaint = false">确认</view>
			</view>
		</u-popup>
		<u-popup v-model="publishstate" mode="bottom">
			<view class="publish">
				<view class="list">
					<view @click="navto('release/tosign')">
						<image src="../../static/image/index/live.png"></image>
						<text>直播</text>
					</view>
					<view @click="navto('release/index')">
						<image src="../../static/image/index/photo.png"></image>
						<text>图文</text>
					</view>
					<view @click="navto('release/video')">
						<image src="../../static/image/index/video.png"></image>
						<text>视频</text>
					</view>
				</view>
				<image src="../../static/image/index/close.png" class="off" @click="close"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import OrderItem from '@/components/order-item/index';
export default {
	data() {
		return {
			list: [
				{
					name: '全部订单'
				},
				{
					name: '试穿订单'
				},
				{
					name: '待处理订单'
				},
				{
					name: '投诉骑手'
				},
				{
					name: '已完成订单'
				},
				{
					name: '退货订单'
				}
			],
			imageList: [],
			showSelect: false,
			current: 0,
			swiperCurrent: 0,
			showComplaint: false,
			worker: {},
			workerList: [
				{
					label: '百世快递公司',
					children: [
						{
							label: '小米'
						},
						{
							label: '小亮'
						}
					]
				},
				{
					label: '中通快递公司',
					children: [
						{
							label: '小红'
						}
					]
				},
				{
					label: '申通快递公司',
					children: [
						{
							label: '小蓝'
						}
					]
				}
			],
			publishstate: false,
			num: 0,
			allorder:[],//所有订单
		};
	},
	components: {
		OrderItem
	},
	onLoad() {
		this.getswiper();
		this.getallorder();
		// 订单状态：0:已取消 10:未付款 20:已付款 30:已发货 40:已收货
	},
	onReachBottom() {
		this.num++
	},
	methods: {
		// 关闭发布弹窗
		close() {
			this.publishstate = false;
		},
		// 获取全部订单
		getallorder() {
			let that = this;
			this.$u.api.getorderlist({
				page: that.num
			}).then(res => {
				console.log(res);
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.allorder = res.data
				}
			});
		},
		// 获取轮播图
		getswiper() {
			this.imageList =[{
						image: '../../static/image/index/swiper.png'
					},
					{
						image: '../../static/image/index/swiper.png'
					},
					{
						image: '../../static/image/index/swiper.png'
					}
				]
		},
		// 打开发布弹窗
		publish() {
			this.publishstate = true;
		},
		setWorker(e) {
			// console.log(e);
			this.worker = {
				company: e[0].label,
				name: e[1].label
			};
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			// this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		navto(url) {
			this.$u.route({
				url: `/pages/${url}`
			});
			// console.log(`/pages/${url}`)
			// uni.navigateTo({
			// 	url: `/pages/${url}`
			// });
		}
	}
};
</script>
<style lang="scss" scoped>
.home {
	min-height: calc(100vh - var(--window-top));
	background-color: #ececec;
	display: flex;
	flex-direction: column;
	// padding-bottom: 100rpx;
	> uni-swiper {
		flex: 1;
	}
	.image-swiper {
		background-color: #ffffff;
		padding: 0 30rpx 16rpx;
	}
	.tab-swiper {
		margin: 2rpx 0 20rpx 0;
	}
	.swiper-item {
		.complaint {
			margin: 0 30rpx;
			padding: 75rpx 30rpx;
			background-color: #ffffff;
			.select-container {
				display: flex;
				align-items: center;
				margin-bottom: 60rpx;
				.title {
					font-size: 30rpx;
					color: rgba(51, 51, 51, 1);
					margin-right: 20rpx;
				}
				.select {
					padding: 18rpx 20rpx;
					width: 490rpx;
					height: 60rpx;
					background: rgba(236, 236, 236, 1);
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					> view {
						font-size: 26rpx;
						color: #999999;
					}
					> image {
						width: 24rpx;
						height: 13rpx;
					}
				}
				.worker {
					display: flex;
					align-items: center;
					> view {
						font-size: 30rpx;
						color: rgba(51, 51, 51, 1);
						margin-right: 20rpx;
					}
				}
			}
			.textarea {
				box-sizing: border-box;
				display: flex;
				.title {
					font-size: 30rpx;
					color: rgba(51, 51, 51, 1);
					margin-right: 20rpx;
				}
				> textarea {
					padding: 20rpx;
					width: 430rpx;
					height: 220rpx;
					border: 1rpx solid #999999;
					font-size: 26rpx;
				}
			}
			.btn {
				margin: 90rpx auto 0;
				width: 630rpx;
				height: 88rpx;
				background: rgba(255, 120, 15, 1);
				border-radius: 44rpx;
				font-size: 36rpx;
				color: rgba(255, 255, 255, 1);
				line-height: 88rpx;
				text-align: center;
			}
		}
	}
	.release-btn {
		position: fixed;
		bottom: 475rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: rgba(255, 120, 15, 1);
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(255, 120, 15, 0.22);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		> image {
			width: 36rpx;
			height: 36rpx;
			flex-shrink: 0;
			margin-bottom: 2rpx;
		}
		.text {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 1);
		}
	}
	.confirm-complaint {
		text-align: center;
		padding-bottom: 20rpx;
		.text {
			text-align: center;
			width: 420rpx;
			padding: 55rpx 112rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 4r2px;
			> view:first-child {
				margin-bottom: 20rpx;
			}
		}
		.btn {
			width: 200rpx;
			height: 60rpx;
			background: rgba(255, 120, 15, 1);
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 1);
			margin: 0 auto;
		}
	}
	.publish {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 84rpx 31rpx 78rpx;
		image {
		}
		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			> view {
				display: flex;
				flex-direction: column;
				align-items: center;
				> image {
					width: 94rpx;
					height: 80rpx;
				}
				> text {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 400;
				}
			}
		}
		.off {
			margin-top: 81rpx;
			width: 37rpx;
			height: 37rpx;
		}
	}
}
</style>