web-app/pages/t-shart/t-shart.vue

<template>
	<view class="t-shart">
		<template v-if="list.length">
			<view class="title">T恤统计截止至5月16日下午6点，逾期不候</view>
			<view class="memberr-item" v-for="item in list" :key="item.mobile">
				<view class="userinfo">
					<text>{{ item.mobile }}</text>
					<text>{{ item.nickname }}</text>
					<text>总数量：{{ item.total }} / <text class="basecolor">{{ ' ' }}{{ item.type_l + item.type_xl + item.type_3xl }}</text></text>
				</view>
				<view class="size-item address">
					<text class="name">收货地址：</text>
					<text>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</text>
				</view>
				<view class="size-item">
					<text>L：</text>
					<NumInput :max="item.total - (item.type_l + item.type_xl + item.type_3xl) + item.type_l" v-model="item.type_l" />
				</view>
				<view class="size-item">
					<text>XL：</text>
					<NumInput :max="item.total - (item.type_l + item.type_xl + item.type_3xl) + item.type_xl" v-model="item.type_xl" />
				</view>
				<view class="size-item">
					<text>3XL：</text>
					<NumInput :max="item.total - (item.type_l + item.type_xl + item.type_3xl) + item.type_3xl" v-model="item.type_3xl" />
				</view>
			</view>
			<view class="big-btn bg" :class="{ not: !couldSubmit }" @click="submit"><text v-if="couldSubmit" class="countDown">距离截止还剩：{{ countDown }}</text>{{ couldSubmit ?  '提交' : '已截止' }}</view>
		</template>
		<template v-else>
			<view style="margin-top: 48vh;">暂无统计</view>
		</template>
	</view>
</template>

<script>
	import { _API_GetTShirtNum, _API_SubmitTShirtNum } from '@/apis/order.js'
	import NumInput from '@/components/public/num-input.vue'
	export default {
		components: {
			NumInput
		},
		data() {
			return {
				num: 20,
				L: 0,
				list: [],
				couldSubmit: false,
				s: 1589536800000,
				e: 1589623200000,
				n: 0
			};
		},
		computed: {
			countDown() {
				const add0 = num => num < 10 ? '0' + num : num
				const sec = Math.floor((this.e - this.n) / 1000)
				const day = Math.floor(sec / 86400)
				const hour = Math.floor((sec % 86400) / 3600)
				const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60)
				const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60)
				return `${add0(day)}天${add0(hour)}时${add0(minite)}分${add0(second)}秒`
			}
		},
		mounted() {
			uni.loading()
			_API_GetTShirtNum().then(({ data }) => {
				this.list = data
			})
			this.n = Date.now()
			if (this.n >= this.s && this.n <= this.e) {
				this.couldSubmit = true
				this.timer = setInterval(() => {
					if (this.n + 1000 >= this.e) {
						this.couldSubmit = false
						clearInterval(this.timer)
					}
					this.n = Date.now()
				}, 1000)
			}
		},
		methods: {
			submit() {
				// const find = this.list.find(item => item.total !== item.type_l + item.type_xl + item.type_3xl)
				// if (find) {
				// 	uni.toast(`${find.nickname}的数量没有选够`)
				// 	return
				// } else {
					if (!this.couldSubmit) {
						uni.toast('提交时间已截止')
						return
					}
					uni.loading()
					_API_SubmitTShirtNum({
						id: this.list.map(e => e.id),
						type_l: this.list.map(e => e.type_l),
						type_xl: this.list.map(e => e.type_xl),
						type_3xl: this.list.map(e => e.type_3xl),
					}).then(() => {
						uni.showModal({ showCancel: false, title: '提示', content: '提交成功' }).then(() => uni.navigateBack())
					})
				// }
			}
		}
	}
</script>

<style lang="scss">
.t-shart {
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling : touch;
	@include flex(column);
	padding-top: 66rpx;
	padding-bottom: 123rpx;
	box-sizing: border-box;
	background: $app-base-bg;
	justify-content: flex-start;
	.title {
		@include flex();
		background: #FFFFFF;
		color: #FF0000;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #C8C7CC;
		top: 0;
		width: 100%;
		height: 66rpx;
		position: fixed;
	}
	.memberr-item {
		width: 100%;
		margin-bottom: 10rpx;
		.userinfo {
			@include flex();
			padding: 30rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bold;
		}
		.size-item {
			&.address {
				font-size: 28rpx;
				.name {
					width: 280rpx;
					font-weight: bold;
				}
			}
			@include flex();
			background: #FFFFFF;
			margin-bottom: 1rpx;
			padding: 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
		}
	}
	.big-btn {
		height: 123rpx;
		position: fixed;
		bottom: 0;
		width: 100vw;
		border-radius: 0;
		&.not {
			background: #C8C7CC;
			border-color: #C8C7CC;
		}
		.countDown {
			top: 0;
			left: 8rpx;
			position: absolute;
			font-size: 28rpx;
		}
	}
}
</style>