mnsx/user/page/wipe.vue

<template>
	<view class="wipe-wrapper">

		<view class="wipe-top flex">
			<view class="top-left" @click="smsh">
				<image src="../../static/icon/sm.png" mode=""></image>
				扫码核销
			</view>
			<view class="top-right" @click="srhx">
				<image src="../../static/icon/sr.png" mode=""></image>
				输入核销
			</view>
			<view class="top-jg"></view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadData" class="good-content" :style="{'height': height}">
			<view>
				<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
				<empty v-if="goodList.length === 0"></empty>
				<view class="good" v-for="item in goodList">
					<view class="good-top">
						<view class="top-num">订单编号:{{ item.order_id }}</view>
						<view class="top-status">待核销</view>
					</view>
					<view class="goods-box-single" v-for="itemt in item._info">
						<image class="goods-img" :src="itemt.cart_info.productInfo.image" mode="scaleToFill"></image>
						<view class="right">
							<view class="flex-start">
								<text class="title clamp">{{ itemt.cart_info.productInfo.store_name }}</text>
								<text class="price"
									style="flex-grow: 1;text-align: right;color: #901B21;font-size: 30rpx;font-weight: bold;">
									{{ itemt.cart_info.productInfo.price }}
								</text>
							</view>
							<view class="row flex">
								<!-- <text class="row_title">{{ goodsItem.productInfo.attrInfo ? '商品退款' : '押金退款' }}</text> -->
								<text class="attr-box">x {{ itemt.cart_info.cart_num}}</text>
							</view>
						</view>
					</view>
					
					<view class="fh-btn-wrap" style="padding-bottom:10rpx;">
						<view class="fh-btn-tit">
							自提信息
						</view>
						<view class="fh-btn-info">
							<view class="">
								自提人：<text>{{item.real_name}}</text>
							</view>
							
							<view class="">
								联系方式：<text>{{item.user_phone}}</text>
							</view>
							<view class="">
								自提时间：<text>{{item.time_area}}</text>
							</view>
						</view>
					</view>
					<view class="fh-btn-wrap" style="padding-bottom:10rpx;" v-if="item.point.name">
						<view class="fh-btn-tit">
							自提点信息
						</view>
						<view class="fh-btn-info">
							<view class="">
								自提点：<text>{{item.point.name}}</text>
							</view>
							<view class="">
								详细地址：<text>{{item.point.detailed_address}}}</text>
							</view>
							<view class="">
								联系方式：<text>{{item.point.phone}}</text>
							</view>
						</view>
					</view>
					<view class="good-hj">一共{{ item.total_num }}件商品
						实付：￥{{ (item.total_price*1 + item.deposit*1).toFixed(2) }}
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</scroll-view>


		<uni-popup ref="popuphx" class="agree-wrapper">
			<view class="hx-wrapper">
				<view class="hx-img">
					<image src="../../static/img/hxbg.png" mode=""></image>
				</view>
				<view class="hx-body">
					<view class="hx-title">
						输入核销码核销
					</view>
					<input type="text" v-model="code" placeholder="请输入核销码" placeholder-class="hx-placeholder" />
					<view class="hx-btn" @click="qhx">
						立即核销
					</view>
				</view>
				<view class="hx-close" @click="close">
					<image src="../../static/icon/close.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		orderData,
		getUserInfo,
		getSpreadCount,
		bindAdmin,
		orderVerific,
		getAllList,
		exchangeOrderVerific
	} from '@/api/user.js';
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {
		components: {
			empty,
			uniPopup
		},
		data() {
			return {
				height: '',
				code: '',
				limit: 10,
				page: 1,
				goodList: [], //待核销商品，
				loadingType: 'more',
				loaded: '',
			};
		},
		onLoad() {
			this.loadData()
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.good-content').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			loadData() {
				let obj = this
				if (obj.loadingType == 'loading') {
					return
				}
				if (obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				getAllList({
					status: 5,
					limit: obj.limit,
					page: obj.page
				}).then(({
					data
				}) => {
					obj.page++
					obj.goodList = obj.goodList.concat(data)
					console.log(data.length)
					if (obj.limit == data.length) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			},
			srhx() {
				this.$refs.popuphx.open()

			},
			close() {
				this.$refs.popuphx.close()

			},
			smsh() {
				// #ifdef H5
				let wx = require('jweixin-module');
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						orderVerific({
							verify_code: this.code,
							is_confirm: 1,
						}).then(res => {
							console.log(res, '++++++++++++++++++++++++++++++')
							this.$refs.popuphx.close()
							this.code = ''
							uni.showToast({
								title: '核销成功',
								duration: 2000
							});
						}).catch(err => {
							console.log('dddd')
						})
					}
				});
				// #endif
				// #ifndef H5
				uni.scanCode({
					success: (res) => {
						this.code = res.result
						this.srhx()
						// orderVerific({
						// 	verify_code: this.code,
						// 	is_confirm: 1,
						// }).then( res => {

						// 	this.$api.msg(res.msg)
						// 	console.log(res,'++++++++++++++++++++++++++++++')
						// 	this.$refs.popuphx.close()
						// 	this.code = ''
						// }).catch( err => {
						// 	console.log('dddd')
						// })
					}
				})
				// #endif

			},
			qhx() {
				if (this.code == '') {
					return this.$api.msg('请输入核销码')
				}
				uni.showLoading({
					title: '核销中...',
					mask: true
				})
				if (this.code.indexOf('ticket:') != -1) {
					exchangeOrderVerific({
						verify_code: this.code,
						is_confirm: 1,
					}).then(res => {
						uni.hideLoading()
						// this.$api.msg(res.msg) 

						console.log(res, '++++++++++++++++++++++++++++++')
						this.$refs.popuphx.close()
						this.code = ''
						this.page = 1
						this.loadingType = 'more'
						this.goodList = []
						uni.showToast({
							title: '核销成功',
							duration: 2000
						});
						this.loadData()
					}).catch(err => {
						console.log('dddd')
					})
				} else {
					orderVerific({
						verify_code: this.code,
						is_confirm: 1,
					}).then(res => {
						uni.hideLoading()
						// this.$api.msg(res.msg) 

						console.log(res, '++++++++++++++++++++++++++++++')
						this.$refs.popuphx.close()
						this.code = ''
						this.page = 1
						this.loadingType = 'more'
						this.goodList = []
						uni.showToast({
							title: '核销成功',
							duration: 2000
						});
						this.loadData()
					}).catch(err => {
						console.log('dddd')
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f8f6f6;
	}

	.wipe-wrapper {
		.wipe-top {
			justify-content: space-around;
			width: 750rpx;
			height: 80rpx;
			background: #ffffff;
			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
			font-size: 28rpx;
			font-weight: 500;
			color: #ef041f;
			line-height: 80rpx;
			text-align: center;
			position: relative;
			z-index: 10;

			.top-left {
				vertical-align: middle;
				width: 50%;

				image {
					width: 27rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
			}

			.top-right {
				vertical-align: middle;
				width: 50%;

				image {
					width: 27rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
			}

			.top-jg {
				width: 2rpx;
				height: 80rpx;
				background: #f0f0f0;
				position: absolute;
				// background: red;
			}
		}
	}

	.good-content {
		height: 100%;
		padding-top: 20rpx;
	}

	.good {
		width: 702rpx;
		// height: 304rpx;

		background: #ffffff;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		margin: 0 auto 20rpx;
		position: relative;

		.goods-box-single {
			display: flex;
			padding: 20rpx 0;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;

				.row {
					margin-top: 10rpx;
					justify-content: flex-end;
				}

				.row_title {
					padding: 5rpx 10rpx;
					background-color: #dddddd;
					border-radius: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
					background: #ffeee9;
					border-radius: 5rpx;
					color: #f55e5c;
				}

				.title {
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					line-height: 1;
					width: 80%;
				}

				.attr-box {
					display: flex;
					justify-content: flex-end;
					font-size: $font-sm + 2rpx;
					color: $font-color-light;
				}

				.price {
					display: inline;
					font-size: $font-base + 2rpx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
					}
				}
			}
		}

		.good-top {
			height: 85rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 85rpx;
			display: flex;
			justify-content: space-between;

			.top-status {
				font-size: 28rpx;
				font-weight: 500;
				color: #EF041F;
			}
		}

		.goods-buttom {
			height: 160rpx;
			display: flex;

			.good-img {
				width: 160rpx;
				height: 160rpx;

				// overflow: hidden;
				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.good-title {
				width: 350rpx;
				padding-top: 6rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #3F454B;
				line-height: 1;
				padding-left: 10rpx;
			}

			.shop-info {
				padding-top: 11rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #DCB876;
				line-height: 1;

				// padding-left: 10rpx;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 14rpx;
					margin-right: 4rpx;
				}
			}

			.good-tag {
				display: inline-block;
				height: 36rpx;
				background: #ffeee9;
				// opacity: 0.2;
				border-radius: 5rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #F23030;
				padding: 0 9rpx;
				line-height: 36rpx;
				margin-top: 15rpx;
				margin-left: 10rpx;
			}

		}

		.good-hj {
			line-height: 1;
			height: 26rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			text-align: right;
		}

		.good-price {
			text-align: left;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 1;
			color: #333333;
			position: absolute;
			right: 31rpx;
			top: 98rpx;
		}

		.good-num {
			text-align: left;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 1;
			color: #333333;
			position: absolute;
			right: 31rpx;
			top: 136rpx;
		}
	}

	.hx-wrapper {
		width: 536rpx;
		height: 630rpx;
		position: relative;

		// background-color: #fff;
		.hx-img {
			width: 536rpx;
			height: 281rpx;

			image {
				width: 536rpx;
				height: 281rpx;
			}
		}

		.hx-close {
			position: absolute;
			left: 243rpx;
			bottom: -80rpx;
			width: 52rpx;
			height: 52rpx;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.hx-body {
			width: 536rpx;
			height: 349rpx;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;

			.hx-title {
				width: 536rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
				padding-top: 42rpx;
				text-align: center;
			}

			input {
				width: 439rpx;
				height: 68rpx;
				background: #eeddde;
				border-radius: 10rpx;
				margin: 39rpx auto 0;
				padding-left: 26rpx;

				.hx-placeholder {
					font-size: 26rpx;
					font-weight: 500;
					color: #901b21;
				}
			}

			.hx-btn {
				margin: 44rpx auto 0;
				width: 353rpx;
				height: 71rpx;
				background: #901b21;
				border-radius: 34rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #F8F9F9;
				line-height: 71rpx;
				text-align: center;
			}


		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
	.fh-btn-wrap {
		display: flex;
		// height: 55rpx;
		flex-direction: column;
		// justify-content: flex-end;
		// width: ;
		font-size: 28rpx;
		color: #999999;
		.fh-btn-tit {
			color: #000000;
			font-weight: bold;
		}
		.fh-btn-info {
			padding-left: 20rpx;
		}
		.fh-btn {
			margin-top: 10rpx;
			align-self: flex-end;
			width: 144rpx;
			height: 55rpx;
			border: 1px solid #901b21;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #901b21;
			line-height: 55rpx;
			text-align: center;
		}
	}
</style>