veterans_H5/h5_web/pages/mycode/mycode.vue

<!-- 0审核中,1不通过,2通过,9未提交 -->
	<template>
		<view>
			<image class="bg" src="../../static/img/mycode-bg.png" mode="widthFix"></image>
			<view class="content" style="padding-top: 20vh;">
				<view class="qrimg">
					<tki-qrcode
						ref="qrcode"
						cid="cid"
						:showLoading="false"
						:val="memberinfo.id"
						:size="384"
						background="#000"
						foreground="#fff"
						pdground="#fff"
						:usingComponents="true"
						:onval="true"
						@result="qrR"
					/>
					<!-- :icon="icon"
						:iconSize="40" -->
				</view>
			</view>
			<view class="code-text" v-if="memberinfo.auditStatus == 2">
				<view class="code-id">{{ memberinfo.id }}</view>
				<view class="thanks">
					{{memberinfo.name}}{{memberinfo.menSex | verifySexFilter}},感谢您为国家的付出
				</view>
				<view v-if="!memberinfo.id">还没有退役军人码</view>
			</view>
			<view class="content fixed" v-if="memberinfo.auditStatus == 9">
				<!-- 9未提交 -->
				<view class="tip">
					提交退役军人身份审核，获取退役军人码，并享受平台提供的专享培训、就业服务。
				</view>
			</view>
			<view class="content fixed" v-else-if="memberinfo.auditStatus == 0">
				<!-- 0审核中 -->
				<view class="tip">
					您已提交退役军人身份审核，通过后生成退役军人码，并可享受平台提供的专享培训、就业服务，请耐心等待。
				</view>
			</view>
			<view class="content fixed" v-else-if="memberinfo.auditStatus==1">
				<!-- 1不通过 -->
				<view class="tip">
					很抱歉，您提交的退役军人身份信息未通过审核，请审查后重新提交。
				</view>
			</view>

			<!-- ########################## -- 底部导航栏 -- ################################ -->
			<u-tabbar :list="tabbarConfig.tabbarList" :height="tabbarConfig.height" :mid-button="tabbarConfig.midButton"
				:inactive-color="tabbarConfig.inactiveColor" :active-color="tabbarConfig.activeColor"
				:mid-button-size="tabbarConfig.midButtonSize"></u-tabbar>
		</view>
	</template>

	<script>
		import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
		import tabbarconfig from 'tabbarconfig.js';
		export default {
			components: {
				tkiQrcode
			},
			data() {
				return {
					memberinfo: {},
					icon: '/static/icons/index.png',
					tabbarConfig: tabbarconfig
				}
			},
			onLoad(page) {

			},
			onShow() {
				this.getmemberinfo();
			},
			filters: {
				verifySexFilter(value) {
					if (value == 0) {
						return '先生';
					} else if (value == 1) {
						return '女士';
					}
				}
			},
			methods: {
				getmemberinfo() {
					this.$u.api.getmemberinfo().then(res => {
						if (res.code == 200) {
							this.memberinfo = res.data;
							if (this.memberinfo.auditStatus !== 2) {
								this.memberinfo.id = null;
								this.$refs.qrcode._clearCode()
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				},
				qrR(e) {
					// console.log(e)
				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.bg {
			z-index: -1;
			width: 100%;
			height: auto;
			position: fixed;
			left: 0;
			top: 100rpx;
			opacity: 0.2;
		}

		.qrimg {
			min-height: 100rpx;
		}

		.content {
			text-align: center;
			padding: 60vh 24rpx 24rpx;
		}

		.content.fixed {
			position: absolute;
			left: 0;
			top: 60vh;
			right: 0;
			padding-top: 0;
		}

		.content .tip {
			font-size: 32rpx;
			margin: 0 24rpx;
			text-align: left;
			text-indent: 2em;
			color: #3D5D4C;
		}

		.code-text {
			margin: 0 auto;
			text-align: center;
		}

		.code-id {
			font-size: 36rpx;
			font-weight: 500;
			color: #000000;
		}

		.thanks {
			margin-top: 100rpx;
			font-size: 36rpx;
			color: #3D5D4C;
		}
	</style>