![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7d1730d52fd9685992ab92f6d3302aa2.png#pic_center)
选择海报组件 share.vue
<template>
<view class=''>
<u-popup class="popup flex flex-column" height="790" v-model="isshow" mode="bottom" @close="close">
<!-- 分享按钮 -->
<view class="bg-white fixed-bottom">
<view class="center bb" style="height: 88rpx;">选择海报</view>
<swiper class="swiper u-p-t-20 u-p-l-50 u-p-r-50" :indicator-dots="false" :display-multiple-items="2">
<!-- :style="{backgroundImage:'url('+item.img+')'}" -->
<swiper-item class="item text-center relative" v-for="(item,i) in list" :key="i" @click="getPoster(i)">
<image :src="item.img" mode=""></image>
<image class="absolute radio" v-if="i==current" src="../static/share-active.png" mode=""></image>
<image class="absolute radio" v-else src="../static/share-no-active.png" mode=""></image>
</swiper-item>
</swiper>
<view class="flex1 u-p-30 bt u-m-t-20">
<view class="u-flex-1 text-center" @click="toWx(1)">
<image class="icon-img" src="../static/vx-icon.png" mode=""></image>
<view class="gray-1 u-font-24">微信好友</view>
</view>
<view class="u-flex-1 text-center" @click="toWx(2)">
<image class="icon-img" src="../static/moments-icon.png" mode=""></image>
<view class="gray-1 u-font-24">微信朋友圈</view>
</view>
<view class="u-flex-1 text-center" @click="toSave()">
<image class="icon-img" src="../static/share-save.png" mode=""></image>
<view class="gray-1 u-font-24">保存图片</view>
</view>
<view class="u-flex-1 text-center" @click="toCopy()">
<image class="icon-img" src="../static/link-icon.png" mode=""></image>
<view class="gray-1 u-font-24">复制链接</view>
</view>
</view>
<view class="center bt blue" style="height: 88rpx;" @click="close">取消</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
isshow: {
type: Boolean,
value: false
},
code: {
type: String,
value: ''
}
},
data() {
return {
current: 0,
list: [{
img: '../../static/share-1-zh.png'
},
{
img: '../../static/share-2-zh.png'
},
{
img: '../../static/share-3-zh.png'
}
],
img: '',
}
},
mounted() {
},
onUnload() {
uni.hideLoading()
},
onShow() {
if(this.$i18n.locale == "zh"){
this.list[0].img = '../../static/share-1-zh.png'
this.list[1].img = '../../static/share-2-zh.png'
this.list[2].img = '../../static/share-3-zh.png'
}else if(this.$i18n.locale == "hk"){
this.list[0].img = '../../static/share-1-hk.png'
this.list[1].img = '../../static/share-2-hk.png'
this.list[2].img = '../../static/share-3-hk.png'
}else{
this.list[0].img = '../../static/share-1-en.png'
this.list[1].img = '../../static/share-2-en.png'
this.list[2].img = '../../static/share-3-en.png'
}
},
methods: {
getPoster(i) {
this.current = i
},
close() {
this.$emit('close')
},
toWx(type) {
uni.showLoading({
title: this.$t('share.toast3')
})
this.$http('/api/share_url', {
type: this.current + 1
}).then(data => {
console.log(data)
this.img = data
uni.share({
provider: "weixin",
scene: type == 1 ? "WXSceneSession" : "WXSenceTimeline",
type: 2,
imageUrl: this.img,
success: function(res) {
uni.hideLoading()
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
uni.hideLoading()
console.log("fail111:" + JSON.stringify(err));
}
});
})
},
toSave() {
let _this = this
this.$http('/api/share_url').then(data => {
this.img = data
uni.downloadFile({
url: _this.img,
success: (res) => {
if (res.statusCode === 200) {
_this.save(res.tempFilePath)
}
}
});
})
},
save(file) {
uni.saveImageToPhotosAlbum({
filePath: file,
success: () => {
uni.showToast({
title: this.$t('share.toast1')
})
},
fail: () => {
uni.showToast({
title: this.$t('share.toast2')
})
},
});
},
toCopy() {
uni.setClipboardData({
data: "http://teex.xjdm88.com/webTeex/?invite=" + this.code,
success: function() {
uni.getClipboardData({
success: function(res) {
}
});
}
});
}
},
}
</script>
<style scoped lang='scss'>
.popup {
background-color: rgba(0, 0, 0, .1);
}
uni-swiper {
height: 400rpx;
image {
height: 100%;
width: 250rpx;
border-radius: 10rpx;
}
}
.item {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: relative;
.radio {
width: 40rpx;
height: 40rpx;
bottom: 10rpx;
right: 50rpx;
}
}
.code-con {
position: absolute;
left: 50%;
top: 64%;
transform: translate(-50%, -50%);
width: 400rpx;
height: 380rpx;
padding: 20rpx;
border-radius: 10rpx;
margin: 500rpx auto 0;
text-align: center;
padding: 50rpx;
}
.icon-img {
width: 70rpx;
height: 70rpx;
}
</style>
页面中应用
import share from "./components/share.vue";
Vue.component('share', share)
<!-- 分享 -->
<share :isshow="showShare" :code="userInfo.invite_code" @close="closeShare"></share>