167 lines
3.0 KiB
Vue
167 lines
3.0 KiB
Vue
<template>
|
|
<uni-popup ref="showshare" type="bottom" @change="change">
|
|
<view class="uni-share">
|
|
<!-- <text class="uni-share-title">分享到</text> -->
|
|
<view class="uni-share-content">
|
|
<view v-for="(item, index) in bottomData" :key="index" @tap="shareItems(item.name)"
|
|
class="uni-share-content-box">
|
|
<view class="uni-share-content-image">
|
|
<image :src="item.icon" class="content-image" mode="widthFix" />
|
|
</view>
|
|
<text class="uni-share-content-text">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="uni-share-btn" @click="cancel('share')">取消</text>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
props: {
|
|
shareurl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
components: {
|
|
uniPopup
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
bottomData: [{
|
|
text: '刷新',
|
|
icon: '/static/img/miniProgram.png',
|
|
name: 'miniProgram'
|
|
}
|
|
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log(this.shareurl)
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$nextTick(() => {
|
|
this.$refs['showshare'].open()
|
|
})
|
|
},
|
|
change(e) {
|
|
// console.log('是否打开:' + e.show)
|
|
},
|
|
shareItems(provider) {
|
|
|
|
|
|
switch (provider) {
|
|
|
|
case 'miniProgram':
|
|
|
|
uni.reLaunch({
|
|
url: this.shareurl,
|
|
success: (res) => {
|
|
this.$nextTick(() => {
|
|
this.$refs['showshare'].close
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
console.log(res)
|
|
}
|
|
})
|
|
|
|
break;
|
|
|
|
case 'more':
|
|
plus.share.sendWithSystem({
|
|
type: "web",
|
|
title: shareOPtions.shareTitle,
|
|
thumbs: [shareOPtions.shareImage],
|
|
href: shareOPtions.shareHref,
|
|
content: shareOPtions.summary,
|
|
})
|
|
default:
|
|
break;
|
|
}
|
|
|
|
},
|
|
cancel() {
|
|
this.$refs['showshare'].close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 底部分享 */
|
|
.uni-share {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* #endif */
|
|
background-color: #fff;
|
|
}
|
|
|
|
.uni-share-title {
|
|
line-height: 60rpx;
|
|
font-size: 24rpx;
|
|
padding: 15rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.uni-share-content {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 15px;
|
|
}
|
|
|
|
.uni-share-content-box {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.uni-share-content-image {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.content-image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.uni-share-content-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
padding-top: 5px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.uni-share-btn {
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: 14px;
|
|
border-top-color: #f5f5f5;
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
</style> |