hyshop/user/page/hexiao.vue

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

		<view class="wipe-top">
			<view class="top-left" @click="smsh">
				<image src="../../static/icon/sm.png" mode=""></image>
				<view class="">
					扫码核销
				</view>
			</view>
			<view class="top-right" @click="srhx">
				<image src="../../static/icon/sr.png" mode=""></image>
				<view class="">
					输入核销
				</view>
			</view>
			<view class="top-jg"></view>
		</view>
		<uni-popup ref="popuphx" class="agree-wrapper">
			<view class="hx-wrapper">
				<view class="hx-img">
					<image src="https://hy.liuniu946.com/app/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,
		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,
				loadingType: 'more',
				loaded: '',
			};
		},
		onLoad() {
			this.loadData()
		},
		onReady(res) {
			var _this = this;
		},
		methods: {
			loadData() {
				let obj = this
				if (obj.loadingType == 'loading') {
					return
				}
				if (obj.loadingType == 'noMore') {
					return
				}
				},
			srhx() {
				this.$refs.popuphx.open()

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

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

			},
			qhx() {
				if (this.code == '') {
					return this.$api.msg('请输入核销码')
				}
				uni.showLoading({
					title: '核销中...',
					mask: true
				})
				if (this.code.indexOf('ticket:') != -1) {
					exchangeOrderVerific({
						code: this.code,
					}).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({
						code: this.code,
					}).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;
			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 {
				font-size: 32rpx;
				line-height: 120rpx;
				border-radius: 20rpx;
				background-color: #fff;
				height:420rpx;
				margin:5%;
				width:90%;
				vertical-align: middle;

				image {
					margin-top: 120rpx;
					width: 87rpx;
					height: 85rpx;
					margin-right: 10rpx;
				}
			}

			.top-right {
				font-size: 32rpx;
				border-radius: 20rpx;
				background-color: #fff;
				height:420rpx;
				vertical-align: middle;
				margin:5%;
				width:90%;

				image {
					margin-top: 120rpx;
					width: 87rpx;
					height: 85rpx;
					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>