myjtp/pages/apply/verification.vue

<template>
	<view class="verification">
		<view :isBack="true" titleTintColor="#fff" search class='headerNav'>
		    <text></text>
		    <image class="uni_btnImage" src="../../static/img/cm.png" @click="scanCode"></image>
		</view>
		<view class="">
				<view class="letter" v-for="l in list">
					<view class="header">
						<view class="left tico">
							订单号: {{ l.id }}
						</view>
						<view class="right">
							待核销
						</view>
					</view>
					<view class="middle">
						<image src="../../static/img/verification.png" mode=""></image>
						<view class="inf">
							<text class="name"><b>{{ l.ticket_name }}</b></text><br>
							<text class="time tico">{{ getTime(l.add_time) }}</text>
						</view>
					</view>
					<view class="footer">
						<view class="about tico">
							当前已核销{{ l.num }}次，还剩{{ l.all_num - l.num }}次
						</view>
						<view class="button" @click="navTo(l.ticket_code)">
							出示核销
						</view>
					</view>
				</view>
				<view class="jz">
					-------{{ loadingType=='loadmore'?'加载中':'加载完成'}}-------
				</view>
		</view>
	</view>
</template>

<script>
import weichatObj from "@/plugin/jweixin-module/index.js";
import { sanCode } from '../../utils/wxAuthorized.js'
import { getTicket,check } from '../../api/apply.js'
// import { mapState } from 'vuex';
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				loadingType: 'loadmore',
				list: [],
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 初始化数据
			init() {
				const that = this// 获取项目对象
				if (that.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (that.loadingType === 'nomore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				that.loadingType = 'loading';
				const data = {page: this.page,limit: this.limit}
				console.log(data);
				getTicket(data)
				.then(e => {
					const data = e.data.list
					that.list = data
					that.page++;
					if (that.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'loadmore';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'nomore';
					}
				}).catch(e => {
					that.loadingType = 'loadmore';
					console.log(e);
				});
			},// 页面下拉到底部加载
			onReachBottom() {
				this.ticketList()
				console.log("dddd")
			},
			ticketList() {
				const that = this// 获取项目对象
				if (that.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (that.loadingType === 'nomore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				that.loadingType = 'loading';
				const data = {page: this.page+1,limit: this.limit}
				console.log(data);
				getTicket(data)
				.then(e => {
					const data = e.data.list;
					that.list = data
					that.page++;
					if (that.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'loadmore';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'nomore';
					}
				}).catch(e => {
					that.loadingType = 'loadmore';
					console.log(e);
				});
			},
			navTo(id) {
				uni.navigateTo({
					url: '/pages/apply/qrcode?id='+id
				})
			},
			// 扫一扫
			scanCode() {
				console.log("===");
				// const weichatObj = this.$store.state.weichatObj
				console.log(weichatObj)
				weichatObj.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						console.log(res.resultStr);
						// obj.orderVerific(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
						check({code: res.resultStr}).then(res => {
							console.log(res);
							this.scanCodeSuccessTo()
						})
					}
				});
			},
			// 核销成功
			scanCodeSuccessTo() {
				const that = this
				uni.showToast({
					title: '核销成功',
					duration: 2000,
					position: 'top'
				});
			},
			// 时间戳转换成时间
			getTime(time) {
				const num =13 - (time+'').length;
				let l = 1;//倍数
				for (let i = 0; i < num; i++) {
					l+='0';
				}
				// 重新解析为数字
				l = parseInt(l)
				const date = new Date(parseInt(time) * l);
				const year = date.getFullYear();
				const mon = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minu = date.getMinutes();
				const sec = date.getSeconds();
				return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tico {
		color: #999;
	}
	.nav {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		.isclick {
			color: #3b66f5;
			border-bottom: solid 5rpx #3b66f5;
		}
		.item {
			padding: 20rpx;
		}
	}
	.letter {
		margin: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow:2rpx 2rpx 20rpx  #dedede;
		.header {
			display: flex;
			justify-content: space-between;
			.left {
				color: #999;
			}
			.right {
				color: red;
			}
		}
		.middle {
			display: flex;
			margin: 20rpx 0;
			image {
				width: 80rpx;
				height: 80rpx;
				margin: auto 0;
			}
			.inf {
				margin: auto 20rpx;
				text {
					padding: 20rpx 0;
				}
				.name {
					font-size: 30rpx;
				}
			}
		}
		.footer {
			display: flex;
			justify-content: space-between;
			.button {
				background-color: #3b66f5;
				color: #fff;
				padding: 6rpx 20rpx;
				border-radius: 50rpx;
			}
		}
	}
	.jz {
		text-align: center;
		color: #999;
	}
	.headerNav {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.uni_btnImage {
		width: 50rpx;
		height: 50rpx;
	}
</style>