jje_uniapp/pages/qrCode/index.vue

<template>
	<view class="page">

		<view class="content" :style="{'height':height}">
			<view class="outView flex-col">
				<view class="member-head-img flex-row justify-center">
					<image class="imageLogo"  :src="selfPhotoUrl || '/static/logo.png'" mode=""></image> <!-- 用户头像 -->
				</view>
				<view class="member-content flex-col">
					<view class="user-name flex-row justify-center">
						<text>hi.亲爱的{{userInfo.ncikName}}</text>
					</view> <!-- 用户名 -->
<!--					<view @click="perfectUserInfo()"  class="flex-row justify-center">-->
<!--						<text>你前资料尚不完善,</text>-->
<!--						<text>立即完善</text>-->
<!--					</view>-->
					<view class="qrcode flex-row justify-center">
<!--						<image class="qrcodeImage" v-if="qrCodeImg" :src="qrCodeImg" mode=""></image> &lt;!&ndash; 二维码图片 &ndash;&gt;-->
<!--						<image class="qrcodeImage" v-else src="../../static/index/u41.png" mode=""></image> &lt;!&ndash; 二维码图片 &ndash;&gt;-->
						<uv-qrcode ref="qrcode" size="400rpx" :value="qrcodeUrl" :options="options"></uv-qrcode>
					</view>
					<view class="qrcode-desc flex-row justify-center">
						<text>会员码，分享邀请好友加入</text>
					</view>
				</view>
			</view>


		</view>

<!--		<view class="tabBarLineHeight"></view>-->
<!--		<view class="tabBarView">-->
<!--			<tab-bar :tabIndex="tabIndex"></tab-bar>-->
<!--		</view>-->
	</view>
</template>

<script>
	import tabBar from "../../components/tabBar/tabBar";
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				height: '',
				tabIndex:2,
				userInfo:{},
				qrCodeImg:'',
				selfPhotoUrl:'',
				qrcodeUrl: 'https://jje.admin.xinyuekj.com.cn/recharge/recharge?scene={shareUserId}',
				options: {
					// 指定二维码前景，一般可在中间放logo
					foregroundImagePadding: 2,
					foregroundImageBorderRadius: 5,
					foregroundImageSrc: '/static/logo.png'
				}

			}
		},
		onLoad() {
			// 用户信息

			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.screenHeight - (sysInfo.screenWidth/750)*138 + 'px'

		},
		onShow(){
			this.userInfo = uni.getStorageSync('userInfo');
			// this.getImgUrlByOssId(this.userInfo.selfPhoto, 1)
			// this.getImgUrlByOssId(this.userInfo.wxQrCode, 2)

			this.createQrCodeUrl()
		},

		methods: {

			createQrCodeUrl(){
				let data = {
					shareUserId: this.userInfo.id,
				};
				for (let key in data) {
					let regexp = new RegExp("{" + key + "}"); // 构造正则表达式
					this.qrcodeUrl = this.qrcodeUrl.replace(regexp, data[key]); // 执行替换操作
				}
			},

			getImgUrlByOssId(ossId, type) {
				if (ossId===null){
					return
				}
				this.$api.getImgUrlByOssId({
					ossId:ossId,
					auth:true
				}).then(res=>{
					console.log(res)
					if (type === 1) {
						this.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:");
					} else if (type === 2) {
						this.qrCodeImg = res.data.data[0].url.replace(/^http:/, "https:");
					}
				})

			},

			/* 用户信息 */
			perfectUserInfo() {
				uni.navigateTo({
					url: '/pages/me/user-info',
				})
			},
		}
	}
</script>

<style>
	@import '/common/css/common.css';
	@import './index.rpx.css';
</style>