web-africa-h5/pages/maker-space/anti-aging/index.vue

<template>
	<view>
		<view class="top-head pb20">
			<template>
				<Countdown :config="countdownConfig"></Countdown>
				<view class="d-b-c search-data f26">
					<view class="flex-1 gray9">{{ $t('w_0352') }}</view>
					<picker mode="date" :value="form.startDate" :start="startDate" :end="endDate" @change="bindDateChange1">
						<view class="picker-item-data">{{ form.startDate || $t('CK_KS_3') }}</view>
					</picker>
					<view style="margin: 0 60rpx;">{{ $t('w_0139') }}</view>
					<picker mode="date" :value="form.endDate" :start="startDate" :end="endDate" @change="bindDateChange2">
						<view class="picker-item-data">{{ form.endDate || $t('CK_KS_9') }}</view>
					</picker>
					<view class="search-radio" @click="searchSubmit"><text class="icon iconfont icon-sousuo"></text></view>
				</view>
			</template>
		</view>
		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="pb200">
				<view class="item-box" v-for="(item, index) in listData" :key="index">
					<view @click="gotoPage('/pages/maker-space/anti-aging/gift-pack?pkId=' + item.pkId)">
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('CK_KS_12') }}</view>
							<view class="item-content f26 gray3" :class="'status_' + index">{{ item.isReachVal }}</view>
						</view>
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('CK_KS_8') }}</view>
							<view class="item-content f26 domation">{{ item.giftNum }}</view>
						</view>
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('CK_KS_3') }}</view>
							<view class="item-content f26 gray3">{{ item.enableDate }}</view>
						</view>
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('CK_KS_9') }}</view>
							<view class="item-content f26 gray3">{{ item.endDate }}</view>
						</view>
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('N_I_181') }}({{ $t('S_L_6') }})</view>
							<view class="item-content f26 gray3">{{ item.useDate }}</view>
						</view>
						<view class=" d-b-c mb20">
							<view class="label-name">{{ $t('CK_KS_11') }}</view>
							<view class="item-content f26 gray3">{{ item.surplusDate }}</view>
						</view>
					</view>
				</view>
				<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">{{ $t('w_0405') }}</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>

		<!-- <button class="normal-sub-btn" @click="gotoPage('/pages/maker-space/anti-aging/gift-pack')">抗衰能量仓礼包</button> -->
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown-aa.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		Countdown,
		uniLoadMore
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			type: 0,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*最后一页码数*/
			// last_page: 0,
			/*当前页面*/
			// page: 1,
			/*每页条数*/
			// list_rows: 10,
			/*有没有等多*/
			no_more: false,
			/*是否正在加载*/
			loading: true,
			/*数据*/
			listData: [],
			/*倒计时配置*/
			countdownConfig: {},
			form: {
				pageNum: 1,
				pageSize: 10,
				startDate: '',
				endDate: '',
				memberCode: ''
			}
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onShow() {
		/*获取数据*/
		this.listData = [];
		this.form.pageNum = 1;
		this.getData();
	},
	mounted() {
		this.init();
	},
	methods: {
		changeType(e) {
			let self = this;
			if (self.loading) {
				return;
			}
			self.page = 1;
			self.loading = true;
			self.type = e;
			self.getData();
		},
		getData() {
			let self = this;
			self.loading = true;
			var formdata = self.form;
			self._post(
				'member/api/silo/list',
				formdata,
				function(res) {
					self.listData = res.rows;
					self.total = res.total;
					if (self.total < self.form.pageNum * self.form.pageSize) {
						self.no_more = true;
					}
					if (self.total >= 1) {
						self.countdownConfig.startstamp = self.transTime(self.listData[0].enableDate);
						self.countdownConfig.endstamp = self.transTime(self.listData[0].endDate);
						console.log(self.countdownConfig);
					}
				},
				{},
				() => {
					self.loading = false;
				}
			);
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.no_more) {
				return;
			}
			if (self.form.pageNum * self.form.pageSize < self.total) {
				self.form.pageNum++;
				self.getData();
			} else {
				self.no_more = true;
			}
		},
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-head');
					view.boundingClientRect(data => {
						let h = self.phoneHeight - data.height;
						self.scrollviewHigh = h;
					}).exec();
				}
			});
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange1: function(e) {
			this.form.startDate = e.detail.value;
		},
		bindDateChange2: function(e) {
			this.form.endDate = e.detail.value;
		},
		searchSubmit: function() {
			/*获取数据*/
			this.listData = [];
			this.form.pageNum = 1;
			this.getData();
		},
		transTime(date) {
			// const dates = '2021-12-30 15:40:30'
			// safari 浏览器需要转换格式为  '2021/12/30 15:40:30'
			const timesStamp = new Date(date).getTime() / 1000;
			return timesStamp;
		}
	}
};
</script>

<style lang="scss">
.label-name {
	font-size: 26rpx;
	color: #999;
	word-break: break-all;
	width: 60%;
	flex-shrink: 0;
	line-height: 1.5;
}

.item-content {
	flex-shrink: 0;
	width: 40%;
	word-break: break-all;
	line-height: 1.5;
	text-align: right;
}

.item-box {
	width: 750rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 32rpx 26rpx;
	background: #ffffff;
}

.status_0 {
	color: #333;
}

.status_1 {
	color: #2ebc42;
}

.status_2 {
	color: #fb3024;
}

.top-countdown {
	width: 750rpx;
	height: 256rpx;
	background: linear-gradient(180deg, #fe5541, #f65c1a);
}

.normal-sub-btn {
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 60rpx;
}
</style>