zhibo/pages_company/card.vue

<template>
  <view class="content">
    <view class="images">
       <image class="slide-image" :src="url" mode="widthFix" show-menu-by-longpress />
    </view>
	<view class="btn-box">
		<view class="btn" @click="shareQr()">分享</view>
	</view>
    
  </view>
</template>
<script>
 
import { getCompanyUserCard} from '@/api/companyUser'
export default {
  components: {
  },
  props: {},
  data: function() {
    return {
       url:null,
	   cardId:null,
    }
  },
  onLoad(options) {
		console.log(options)
		if(options.id!=null){
			this.cardId=options.id;
		}
		this.getCompanyUserCard()
  },
  methods: {
	getCompanyUserCard(){
	  	var data={cardId:this.cardId}
	  	getCompanyUserCard(data).then(
	  		res => {
	  			this.url =res.data.imageUrl
	  		},
	  		rej => {}
	  	);
	},
	shareQr(){
		wx.downloadFile({
		    url: this.url,
		    success: (res) => {
		      wx.showShareImageMenu({
		        path: res.tempFilePath
		      })
		    }
		})
	},
     
     
  },
}
</script>

<style lang="less">
page {
	height: 100%;
}

.content {
	width: 100%;
	height: 100%;
  
}

.images {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.images .slide-image {
	width: 80%;
	height: auto;
}
.btn-box{
 	height: 140upx;
 	z-index: 9999;
 	width: 100%;
 	padding: 0rpx 30upx;
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	box-sizing: border-box;
 	background-color: #ffffff;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	.btn{
 		width: 100%;
 		height: 88upx;
 		line-height: 88upx;
 		text-align: center;
 		font-size: 34upx;
 		font-family: PingFang SC;
 		font-weight: 400;
 		color: #FFFFFF;
 		background:#2BC7B9 !important;
 		border-radius: 44upx;
 	}
 }
</style>