lanan-old/lanan-master-uniapp/pages/tabBar/mine/validation.vue

<template>
	<view style="background-color: #242A38; height: auto;">
		<view class="w700 flex-row justify-center">
			<u-tabs :list="list" :current="current" @click="changeTab" lineWidth="250rpx" lineColor="#d2c3af"
				lineHeight="5rpx" :activeStyle="{
			    color: '#d2c3af',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#d2c3af',
			    transform: 'scale(1)'
			}" itemStyle="margin-top: 20rpx;margin-bottom: 20rpx; width:300rpx; "></u-tabs>

		</view>

		<view class="w700  flex-col align-center " style="height: 100%;" v-if="current == 0">
			<view class="scanBox">
				<u-icon name="scan" color="#cbcbcb" size="300rpx" @click="validation"></u-icon>
			</view>
			<view class="validationInput flex-col align-center">
				<view class="margin-bottom">
					<u--input placeholder="请输入核销码16位" v-model="accessCode" border="bottom" inputAlign="center"
						fontSize="30rpx" color="#fff" type="number" maxlength="16"></u--input>
				</view>

				<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))"
					:customStyle="{color:'#000'}" shape="circle" text="立即核销" throttleTime="1500"
					@click="validation(accessCode)" :disabled="accessCode.length != 16"></u-button>
			</view>
		</view>

		<view class="w750 padding flex-col align-center " v-if="current == 1" style="min-height: 100%;">
			<view class="response padding bg-white margin-bottom border-bottom" style="border-radius: 20rpx;"
				v-for="(item, index) in validationlist" :key="index">
				<view class="margin-bottom-xs">
					<text>核销码:{{item.accessCode}}</text>
				</view>
				<view class="margin-bottom-xs">
					<text>商品/服务名称:{{item.goodsTitle}}</text>
				</view>
				<view class="margin-bottom-xs">
					<text>被核销人:{{item.realName}}</text>
				</view>
				<view class="margin-bottom-xs">

				</view>
				<view class="flex-row justify-between">
					<text>核销人手机号:{{item.phonenumber}}</text>
					<text class="daju">￥{{item.goodsPrice / 100}}</text>
				</view>
				<view class="flex-row justify-between">
					<text class="font-sm">{{item.validationTime}}</text>
					<text>核销人:{{item.validationRealName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '订单核销',
				}, {
					name: '核销纪录',
				}],
				current: 0,
				validationlist: [],
				accessCode: '',
				loadingShow: true,
				isLoadMore: false, //是否加载中
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				status: 'loadmore',

			}
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.status = 'loading';
				this.isLoadMore = true
				this.params.pageNum++
				this.getValidationlist()
			}
		},
		onLoad(option) {
			this.current = option.tab
			console.log('optioncurrent: ', this.current);
		},
		onShow() {
			this.getValidationlist()
		},
		methods: {
			changeTab(e) {
				console.log(e);
				this.current = e.index
			},
			// 核销 扫码和录入
			async validation(accessCode) {
				if (accessCode) { // 录入
					if (accessCode.length != 16) {
						return this.$modal.msgError("核销码应为16位数字")
					}
					const scanRes = await this.$request({
						url: '/orderApi/validation',
						method: 'POST',
						data: {
							accessCode
						}
					});
					console.log(scanRes);
					this.$modal.alert(scanRes.msg)
				} else {
					uni.scanCode({ //扫码核销
						onlyFromCamera: true,
						success: res => {
							if (res.scanType == 'QR_CODE' && res.result.length == 16) {
								this.$request({
									url: '/orderApi/validation',
									method: 'POST',
									data: {
										accessCode: res.result.toString()
									}
								}).then((scanRes) => {
									console.log(scanRes);
									this.$modal.alert(scanRes.msg)
								})
							}
						}
					});
				}
			},
			// 核销记录
			async getValidationlist() {
				const res = await this.$request({
					url: '/orderApi/validationListWx',
					data: this.params
				});
				this.validationlist = this.validationlist.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}

				this.loadingShow = false
				// this.validationlist = res.rows
				console.log(res);
			}

		}
	}
</script>

<style>
	.scanBox {
		border: 1px solid #cbcbcb;
		width: 400prx;
		height: 400rpx;
		padding: 50rpx;
		margin-top: 100rpx;
	}

	.validationInput {
		margin-top: 50rpx;

	}

	.daju {
		font-size: 18px;
		font-weight: bold;
		color: #F9654D;
	}

	page {
		height: 100vh;
		background: #242A38;
	}
</style>