TraceabilityAPP/components/own-share/own-share.vue

167 lines
3.0 KiB
Vue
Raw Normal View History

2023-11-30 17:51:39 +08:00
<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>