webapp / GreenwayWeb

<template>
	<view class="page">
		<view class="screen-list">
			<view class="list" @click="show = true">
				<text>日期：{{dataTime}}</text>
				<image :src="$imgUrl('/down.png')"></image>
			</view>
			<view class="list">
			<u-button type="info" style="height:26px;font-size:14px;" @click="close">重置</u-button>
			</view>
			
		</view>
		<u-collapse-item :title="`订单${item.orderId}`" v-for="(item, index) in list" :key="index">
			<view style="display: flex;justify-content: space-between;">
				<view>下单账号</view>
				<view>{{item.customerName}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>支付单号</view>
				<view>{{item.transactionId}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>支付时间</view>
				<view>{{item.paymentTime}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>商品名称</view>
				<view>{{item.products[0].productName}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>支付金额</view>
				<view>{{item.price}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view>订单状态</view>
				<view>
					<span v-if="item.state == 1">待付款</span>
					<span v-if="item.state == 2">待发货</span>
					<span v-if="item.state == 3">已发货</span>
					<span v-if="item.state == 4">已完成</span>
					<span v-if="item.state == 5">已关闭</span>
					<span v-if="item.state == 6">待成团</span>
					<span v-if="item.state == 7">待售后</span>
					<span v-if="item.state == 8">已退款</span>
				</view>
			</view>
		</u-collapse-item>
		<u-calendar v-model="show" mode="range" @change="change" @close="handleClose" active-bg-color="#19be6b" active-color="#fff" range-bg-color="#19be6b" range-color="#fff" btn-type="success"></u-calendar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				pageindex: {
					afterState: "",
					dates: [],
					page: 1,
					pageSize: 10,
					search: "",
					searchType: "1",
					state: ""
				},
				dataTime:''
			};
		},
		mounted() {
			this.getALL()
		},
		onLoad(optiong) {

		},
		methods: {
			change(e){
				console.log(e)
				this.dataTime = `${e.startDate}-${e.endDate}`
				this.getALL()
			},
			close(){
			this.dataTime = ''
			this.getALL()
			},
			getALL() {
				// this.$http.sendRequest('/order/getAll', 'POST', this.pageindex, 2).then(res => {
				// 	//成功回调	
				// 	this.list = res.data.data.list
				// })
			}

		}
	}
</script>

<style scoped lang="scss">
	// @import 'application.scss';	
	.page {
		background-color: #fff;
		padding: 20px;
	}

	.juli {
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;

		.u-transition {
			// width: 31%;
			margin: 1%;
			// width: 212rpx;
			// height: 80rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: rgba(21, 98, 214, 0.1);
			// line-height: 80rpx;
			text-align: center;
			font-style: normal;
			color: #1562D6;
			font-size: 28rpx;
			border-radius: 2px;

		}

		::v-deep .u-tag--primary--plain {
			border: 0px;
			border-radius: 2px;
			background-color: #ebebeb;

			.u-tag__text--primary--plain {
				color: #000;

			}
		}

		::v-deep .u-tag--primary {
			background-color: rgba(245, 178, 160, 0.3);
			border: 0px;
			border-radius: 2px;

			.u-tag__text--primary {
				color: #ff3442;
			}
		}

		.jinbutiao {
			display: flex;
			width: 100%;
			align-items: center;

			.u-slider {
				width: 80%;
				margin-right: 20rpx;
			}
		}
	}

	.choose1 {
		width: 100%;
		display: flex;

		.choose1left {
			width: 26%;
			border-right: 2rpx solid #f6f6f6;

			.leftItem1 {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
			}
		}

		.choose1right {
			flex: 1;

			// width: 70%;
			.rightBox {
				width: 90%;
				margin: 0 auto;

				.weizhiName {
					display: flex;
					justify-content: space-between;
					align-items: center;

					// height: 80rpx;
					.weizhiLeft {
						display: flex;
						align-items: center;

						.weizhiInput {
							color: #959595;
						}
					}

					.weizhiSpan {
						color: #D32D25;
					}
				}

				.juli {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.u-transition {
						// width: 31%;
						margin: 1%;
						// width: 212rpx;
						// height: 80rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						background-color: rgba(21, 98, 214, 0.1);
						// line-height: 80rpx;
						text-align: center;
						font-style: normal;
						color: #1562D6;
						font-size: 28rpx;

					}

					.u-tag-wrapper {
						width: 100%;
						height: 100%;
						border: none !important;
					}

					.u-tag {
						padding: 0;
						width: 212rpx !important;
						height: 60rpx !important;
					}

					.u-tag__text {
						width: 100%;
						font-size: 25rpx;
						text-align: center;
						margin: 0 auto;
					}

				}
			}

			.quyu {
				display: flex;
				padding-left: 20rpx;
				height: 300px;
				width: 100%;

				.sl_city {
					width: 48%;
					margin-right: 0px;
					overflow: auto;

				}
			}
		}
	}

	::v-deep .u-input__input {
		text-align: right;
	}
	.screen-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.zidong{
				width: 160rpx;
				background-color: #19be6b;
			color: #fff;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			text-align: center;
			}
			.list {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				text {
					font-size: 26rpx;
					color: #555555;
				}
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
			.action {
				text {
					color: $base;
				}
			}
		}
	
</style>