TraceabilityAPP/components/own-share/own-share.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>