v3-lab-xcx/pages_student/views/integralManage/codeSuccess.vue

<!--扫码成功-->
<template>
	<view id="codeSuccess">
		<view class="top-title-box" v-if="pageShow">
			<img v-if="pageType" class="img-box-one" src="@/pages_student/images/icon_dhli.png">
			<img v-else class="img-box-two" src="@/pages_student/images/icon_dhlp_dhcg.png">
			<view class="text-p">{{pageType?'兑换礼品':'兑换成功'}}</view>
		</view>
		<view class="bottom-text-box" v-if="pageShow">
			<view class="min-text">
				<view>机器号</view>
				<view>{{mid}}</view>
			</view>
			<view class="min-text">
				<view>货道号</view>
				<view>{{sid}}</view>
			</view>
			<view class="min-text">
				<view>商品编号</view>
				<view>{{pid}}</view>
			</view>
			<view class="min-text">
				<view>积分</view>
				<view>{{pri}}</view>
			</view>
		</view>
		<view class="bottom-button-p" v-if="pageType&&pageShow"
			:class="pageType?'bottom-button-p-one':'bottom-button-p-two'" @click="clickButton">兑换</view>
	</view>
</template>

<script>
	import {
		exchangePoints
	} from '@/pages_student/api/index.js'
	export default {
		name: "codeSuccess",
		data() {
			return {
				mid: "",
				sid: "",
				pid: "",
				pri: "",
				pageType: true,
				pageShow: false,
			}
		},
		onLoad(option) {
			let self = this;
			if (option.q) {
				let text = decodeURIComponent(option.q)
				text = text.replace('"', '')
				text = text.replace('"', '')
				let list = text.split("?")[1].split("&");
				for (let i = 0; i < list.length; i++) {
					let newList = list[i].split("=");
					if (newList[0] == 'mid') {
						self.mid = newList[1];
					} else if (newList[0] == 'sid') {
						self.sid = newList[1];
					} else if (newList[0] == 'pid') {
						self.pid = newList[1];
					} else if (newList[0] == 'pri') {
						self.pri = newList[1];
					}
				}
				if (!uni.getStorageSync('token')) {
					uni.setStorageSync('mid', this.mid);
					uni.setStorageSync('sid', this.sid);
					uni.setStorageSync('pid', this.pid);
					uni.setStorageSync('pri', this.pri);
					uni.redirectTo({
						url: '/pages/views/login/login',
					});
					return
				}
				this.pageShow = true;
			} else {
				if (!uni.getStorageSync('token')) {
					uni.setStorageSync('mid', this.mid);
					uni.setStorageSync('sid', this.sid);
					uni.setStorageSync('pid', this.pid);
					uni.setStorageSync('pri', this.pri);
					uni.redirectTo({
						url: '/pages/views/login/login',
					});
					return
				}
				if (!uni.getStorageSync('mid')) {
					uni.redirectTo({
						url: '/pages/views/home/home',
					});
					return
				}
				this.mid = uni.getStorageSync('mid');
				this.sid = uni.getStorageSync('sid');
				this.pid = uni.getStorageSync('pid');
				this.pri = uni.getStorageSync('pri');
				uni.removeStorageSync('mid');
				uni.removeStorageSync('sid');
				uni.removeStorageSync('pid');
				uni.removeStorageSync('pri');
				this.pageShow = true;
			}

		},
		methods: {
			clickButton() {
				let self = this;
				if (self.pageType) {
					uni.showModal({
						title: '提示',
						content: '确认兑换吗?',
						success: function(res) {
							if (res.confirm) {
								self.exchangePoints();
							}
						}
					});
				}
			},
			async exchangePoints() {
				let self = this;
				let obj = {
					mid: this.mid,
					sid: this.sid,
					pid: this.pid,
					pri: this.pri,
				};
				const {
					data
				} = await exchangePoints(obj)
				if (data.code == 200) {
					uni.showToast({
						title: '兑换成功',
						mask: true,
						duration: 2000
					});
					this.pageType = false;
				} else {
					uni.showToast({
						title: data.msg,
						icon: "error",
						mask: true,
						duration: 2000
					});
				}
			}

		}
	}
</script>

<style lang="stylus" scoped>
	#codeSuccess {
		height: 100%;
		width: 100%;

		.top-title-box {
			overflow hidden;
			background #fff;
			height: 290rpx;
			border-bottom: 1rpx solid #dedede;

			.img-box-one {
				width: 150rpx;
				height: 135rpx;
				margin: 64rpx auto 0;
			}

			.img-box-two {
				width: 120rpx;
				height: 120rpx;
				margin: 64rpx auto 0;
			}

			.text-p {
				text-align center;
				line-height: 86rpx;
				font-size: 26rpx;
			}

			.num-p {
				text-align center;
				line-height: 64rpx;
				font-size: 36rpx;
				font-weigth: 700;
			}
		}

		.bottom-text-box {
			padding: 30rpx 100rpx;

			background #fff;
			.min-text {
				display: flex;

				view {
					font-size: 26rpx;
					line-height: 72rpx;
				}

				view:nth-child(1) {
					width: 192rpx;
					color: #999;
				}

				view:nth-child(2) {
					flex: 1;
				}
			}
		}

		.bottom-button-p {
			height: 70rpx;
			line-height: 70rpx;
			text-align center;
			border-radius: 10rpx;
			width: 300rpx;
			margin: 40rpx auto;
		}

		.bottom-button-p-one {
			color: #fff;
			background #00B68A
		}

		.bottom-button-p-two {
			color: #fff;
			background #dedede
		}
	}
</style>