P003-WX-HomeTeacher/education_uni/subpkg/my/share/my_share.vue

<template>
	<view class="share-container">
		<view class="requires2">
			<uni-row >
					<text>分享后，有用户登录，即可查看分享规则!</text>
			</uni-row>
		</view>
		<form >
			<view>
				<button class="alias-submit" type="primary" @click="queryResult" >分享结果</button>
			</view>			
			<view class="share-begin">
				<button open-type="share" form-type="submit" class="alias-submit" type="primary">链接分享</button>
			</view>
			<view v-if="isShowShareQR">
				<button class="alias-submit" type="primary" @click="showOwnQRCode" >二维码分享</button>
			</view>	
			<view v-if="isShowGetQR">
				<button class="alias-submit" type="primary" @click="generateOwnQRCode" >生成二维码</button>
			</view>	
		</form>
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				isShowGetQR: true,
				isShowShareQR: false
			};
		},
		created() {
			this.getOwnQRCodeUrl();
		},
		methods: {
			/**
			 * 分享处理函数，可以响应2类事件，1是button,2是右上角的menu中的Send to Chat
			 * button用法：<button class="forshare" open-type="share">share</button>
			 * menu用法：不用引入变量，当页面有这个函数时， Send to Chat会启用，否则灰色
			 * path中的uid=txj123,txj123应该换为真实的用户号，当这个分享的卡片被打开时，小程序可以取到这个号
			 */
			onShareAppMessage: function () {
				//console.log(this.userinfo)
				return {
				  title:'来自  ' +  this.userinfo.alias + '  的分享',
				  path: '/pages/home/home?uid=' + this.userinfo.uid,
				  imageUrl: '/static/share.jpg',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				}
			},
			queryResult(){
				uni.navigateTo({
					url: '/subpkg/my/share/my_share_result'
				})
			},
			showOwnQRCode(){
				uni.navigateTo({
					url: '/subpkg/my/share/my_share_qrcode'
				})
			},
			async generateOwnQRCode() {
				const {
					data: result
				} = await uni.$http.get('/file/generateQRcodeUrl?uid='+ this.userinfo.uid)
				//console.log(result.data.QRurl)
				if (result.data.QRurl != undefined) {
					if (result.data.QRurl != "") {
						
					this.setQRCodeUrl(this.userinfo.uid,result.data.QRurl)
					
					uni.$showMsg('二维码申请成功' , 2000)
					this.isShowGetQR = false
					this.isShowShareQR = true
					
					}
				}
			
			},
			async getOwnQRCodeUrl() {
				const {
					data: result
				} = await uni.$http.get('/ucenter/mini-program-openid-uid/getOwnQRcodeUrl?uid='+ this.userinfo.uid)
				//console.log(result.data.QRurl)
				if (result.data.QRurl != undefined) {
					if (result.data.QRurl != "0") {
						this.isShowGetQR = false
						this.isShowShareQR = true
					}
				}
			
			},
			async setQRCodeUrl(uid,qrurl) {
				// 准备参数对象
				const query = {
					uid: uid,
					qrurl: qrurl
				}
				const {
					data: result
				} = await uni.$http.get('/ucenter/mini-program-openid-uid/setOwnQRcodeUrl',query)
				//console.log(result.data)
				if (result.data.OK != "qrurl设置成功") {
					uni.$showMsg('二维码申请失败' , 2000)
				}
			
			},
		}
	}
</script>

<style lang="scss" scoped>

	.share-container{
		height: 100%;
		padding: 0 40rpx;
		// background-color: #fff;
		
	}
	.share-begin{
		padding-top: 50rpx;
		margin-top: -50rpx;
	}
	.alias-submit {
		margin-top: 50rpx;
		border-radius: 50rpx;
		background-color: #35b882;
		font-size: 35rpx;
		//font-weight: bold;
		padding: 10rpx;
	}
	.requires2 {
		background-color: #FFF;
		margin: 20rpx 20rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		//font-weight: bold;
		color: gray;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
</style>