CBB3/pages/guild/order/info/buyorder.vue

<template>
	<view class="app">
		<view></view>
		<view></view>
		<view class="box-nav">
			<view class="bn fx-r">
				<view v-for="(item,index) of navList" :key="index" class="bn-item fx-h fx-bc fx-ac"
					@tap="tapChange(index)">
					<view class="bni" :class="[current == index ? 'select':'']">{{item.name}}

					</view>
					<view class="ii" v-if="item.count > 0"></view>
				</view>
			</view>
		</view>


		<scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 45vw -  ' + statusBarHeight + 'px - 44px);'"
			@scrolltolower="onBottom">
			<view class="fx-h fx-bc  fx-ac select-time">


				<view class="week fx-r" hidden>
					<view class="item" :class="item.value == week ? 'on' : ''" @tap="tapWeek(item)"
						v-for="item in weekAr">{{ item.name }}</view>


				</view>


				<view class="date-time fx-r fx-bc  fx-ac" hidden @tap="isDateTimeOpen()">
					<image src="/static/img/datetime.png" class="time"></image>
					<view v-if="dateTime  != ''">{{ dateTime }}</view>
					<view v-else>选择时间</view>
				</view>
			</view>

			<view class="app-body">
				<view class="order-item" v-for="item in orderList" @tap="tapItem(item)">
					<view class="order-itop fx-r">
						<view class="order-id">{{ item.order_id }}</view>
						<view class="fx-g1"></view>
						<view class="status" v-if="item.status == 0">已过期</view>
						<view class="status" v-if="item.status == 1">待支付</view>
						<view class="status" v-if="item.status == 2">待审核</view>
						<template v-if="current == 3">
							<view class="status" v-if="item.status == 3">挂售</view>
						</template>
						<template v-else>
							<view class="status" v-if="item.status == 3">完成</view>
						</template>


					</view>

					<view class="goods-item fx-r fx-bc">
						<image :src="item.image" class="img" mode="aspectFill"></image>
						<view class="info">
							<view class="title">{{ item.name }}</view>
							<view class="price">￥{{ item.price }}</view>
						</view>
						<view class="fx-g1"></view>
						<view class="count">x1</view>
					</view>
					<view class="fx-r fx-be order-foot">
						<view class="time"> {{ item.create_time }}</view>
						<view class="fx-g1"></view>
						<view class="ii">共</view>
						<view class="i2">1</view>
						<view class="i2">实付款</view>
						<view class="ii">￥</view>
						<view class="price">{{ item.price }}</view>
					</view>

					<view class="order-btn" v-if="item.status == 1">
						<view v-if="item.overtime_type == 0" class="fx-r" style="font-size:12px;color: #787878;">
							离超时:
							<countdown :startTime="utils.date('Y-m-d H:i:s')"
								:endTime="utils.date('Y-m-d H:i:s',item.end_time_one)" />
						</view>

						<view v-if="item.overtime_type == 1" class="fx-r" style="font-size:12px;color: #787878;">
							离过期:
							<countdown :startTime="utils.date('Y-m-d H:i:s')"
								:endTime="utils.date('Y-m-d H:i:s',item.end_time_two)" />
						</view>

						<view class="fx-g1"></view>
						<view class="btn" @tap.stop="tapPay(item)">立即支付</view>

					</view>

					<view class="order-btn" v-if="item.status == 2">
						<view class="btn" @tap.stop="tapPay(item)">修改凭证</view>
					</view>


					<view class="order-btn" v-if="item.status == 3 && current == 3">
						<view class="btn" @tap.stop="tapPutSalt(item)">立即挂售</view>
					</view>

				</view>
				<uv-empty v-if="orderList.length == 0" mode="data" icon="/static/img/no-empty.png"></uv-empty>
				<view v-if="orderList.length > 0">
					<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
						<image src="/static/img/xloading.png"></image>
						<text>正在载入更多...</text>
					</view>
					<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
				</view>
			</view>
		</scroll-view>
		<uv-datetime-picker ref="datetimePicker" v-model="dateTimeNum" mode="date" closeOnClickOverlay  @confirm="tapDateTime"></uv-datetime-picker>

	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import dayjs from 'dayjs';
	import countdown from "@/components/cz-countdown/cz-countdown.vue";
	import {
		stringify
	} from 'uuid';
	export default {
		computed: mapState(['user']),
		components: {
			countdown
		},
		name: "buyorder",
		data() {
			return {
				statusBarHeight: 20,
				page: {
					isFirst: false,
					isLoad: false,
					isFoot: false,
					page: 1
				},
				dateTime: "",
				dateTimeNum: Number(new Date()),
				week: "",
				weekAr: [{
						name: "周一",
						value: 1
					},
					{
						name: "周二",
						value: 2
					},
					{
						name: "周三",
						value: 3
					},
					{
						name: "周四",
						value: 4
					},
					{
						name: "周五",
						value: 5
					},
					{
						name: "周六",
						value: 6
					},
					{
						name: "周日",
						value: 7
					}
				],

				minData: "",
				orderList: [],
				current: 0,
				navList: [{
						"name": "全部",
						"code": "",
						"count": 0
					},
					{
						"name": "待支付",
						"code": 1,
						"count": 0
					},
					{
						"name": "待审核",
						"code": 2,
						"count": 0
					},
					{
						"name": "待挂售",
						"code": 4,
						"count": 0
					},
				]
			}
		},
		methods: {
			/**
			 * 加载基础配置
			 */
			initView: function() {
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.getData(true);
				this.ckInit();
				this.minData = dayjs().subtract(10, 'month').format('YYYY-MM-DD');
			},


			tapChange: function(ev) {
				this.current = ev;
				this.getData(true);
			},



			onBottom() {
				if (this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page++;
				this.getData();
			},
			/**
			 * 待支付
			 */
			tapPay: function(item) {
				uni.navigateTo({
					url: "/pages/guild/order/hallpay?id=" + item.id
				})
			},
			/**
			 * 查看详情
			 * @param {Object} item
			 */
			tapItem: function(item) {
				uni.navigateTo({
					url: "/pages/guild/order/orderItem?id=" + item.id
				})
			},
			/**
			 * 我要挂售
			 * @param {Object} item
			 */
			tapPutSalt: function(item) {
				uni.navigateTo({
					url: "/pages/guild/order/putSalt?id=" + item.id
				});
			},
			/**
			 * 判断是否红点
			 */
			ckInit: function() {
				this
					.request
					.get("auctionOrderInit")
					.then(res => {
						if (res.code == 200) {
							for (let i in this.navList) {
								if (this.navList[i].code == 1) {
									this.navList[i].count = res.data.noCount;
								}
								if (this.navList[i].code == 2) {
									this.navList[i].count = res.data.autoCount;
								}
								if (this.navList[i].code == 4) {
									this.navList[i].count = res.data.gsCount;
								}
							}
						}
					});
			},
			tapDateTime: function(ev) {
				this.dateTime = this.utils.date('Y-m-d', ev.value / 1000);
				this.$refs.datetimePicker.close();
				this.getData(true);
			},
			isDateTimeOpen(){
				this.$refs.datetimePicker.open();
			},
			tapWeek: function(item) {
				this.week = item.value;
				this.getData(true);
			},

			getData: function(isPull = false) {
				if (this.page.isLoad) return;
				this.page.isLoad = true;
				if (isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({
					title: '获取数据中..'
				});
				var post = {};
				post.page = this.page.page;
				post.type = this.navList[this.current].code;
				post.time = this.dateTime;
				post.week = this.week;
				this
					.request
					.post("auctionOrder", post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if (res.code == 200) {
							if (isPull) {
								this.orderList = res.data.list;
							} else {
								this.orderList = this.orderList.concat(res.data.list);
							}
							//是否到底
							if (res.data.list.length != res.data.pageSize) {
								this.page.isFoot = true;
							}

						} else {
							uni.showModal({
								title: '系统提示',
								content: res.msg,
								showCancel: false
							});
						}
						//that.CountDowm();
					})
					.catch(res => {
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});
			},
		},
	}
</script>


<style lang="scss">
	.navlist {
		width: 100%;
		background: #fff;
		height: 40px;
	}

	.app-body {
		position: relative;
		z-index: 9;

		.order-item {
			display: flex;
			flex-direction: column;
			background: #fff;
			margin-top: 9px;

			.order-itop {
				display: flex;
				align-items: center;
				height: 45px;
				font-size: 16px;
				color: #303133;
				position: relative;
				padding: 0 17px;

				.order-id {
					font-size: 16px;
					color: #787878;
				}

				.status {
					color: #dc262b;
					font-size: 16px;
				}
			}

			.goods-item {
				padding: 11px 17px;
				background: #f7f7f7;

				.img {
					width: 68px;
					height: 68px;
				}

				.info {
					margin-left: 20px;

					.title {
						font-size: 18px;
						color: #303133;
						margin-bottom: 20rpx;
					}

					.price {
						display: inline;
						font-size: 16px;
						color: #303133;
					}

				}

				.count {
					font-size: 16px;
					color: #787878;
				}
			}

			.order-foot {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 11px 17px;
				font-size: 16px;
				color: #909399;
				border-bottom: 1px solid #f1f1f1;

				.i2 {
					margin: 0 4px;
					color: #303133;
				}

				.price {
					font-size: 18px;
					color: #303133;
				}
			}

			.order-btn {
				padding: 0 17px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 57px;
				position: relative;

				.btn {
					width: 91px;
					height: 34px;
					margin: 0;
					margin-left: 13px;
					padding: 0;
					text-align: center;
					line-height: 34px;
					font-size: 14px;
					color: #303133;
					background: #fff;
					border-radius: 100px;
					border: 1px solid #fd3b39;
					border-radius: 28px;
					color: #dc262b;
				}
			}
		}
	}


	.popinput {
		padding: 20rpx;
	}

	.popinput .time {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.box-nav {
		width: 100%;
		height: 50px;
		background-color: #fff;
		border-top: 1px #f5f5f5 solid;
		position: relative;
		z-index: 9;
	}

	.bn {
		align-items: center;
		height: 50px
	}

	.bn-item {
		width: 25%;
		text-align: center;
		position: relative;
		height: 50px;
		background: #fff;
	}

	.bni {
		color: #3F3E3E;
		font-size: 14px;
		box-sizing: border-box;
		position: relative;
	}

	.select {
		width: 100%;
		color: #ef4034
	}

	.select::after {
		content: "";
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #ef4034;
		width: 24px;
		height: 2px
	}

	.bn-item .ii {
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: red;
		right: 20%;
		top: 10px;
	}

	.select-time {
		padding: 0 10px;

		image {
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}

		.date-time {
			font-size: 14px;
		}
	}

	.week {
		width: 100%;
	}

	.week .item {
		width: 14%;
		text-align: center;
		padding: 10px 0;
	}

	.week .item.on {
		color: #ef4034;
	}
</style>