template view class=content view class=input-box input type=text placeholder=网站url v-model=shareUrl class=input view br view class=input-box input type=text placeholder=网站标题 v-model=sh

<template>
	<view class="content">
	  <view class="input-box">
	    <input type="text" placeholder="网站url" :value="shareUrl" @input="shareUrl = $event.target.value" class="input">
	  </view>
	  <br>
	  <view class="input-box">
	    <input type="text" placeholder="网站标题" :value="shareTitle" @input="shareTitle = $event.target.value" class="input">
	  </view>
	  <br>
	  <view class="input-box">
	    <input type="text" placeholder="网站描述" :value="shareContent" @input="shareContent = $event.target.value" class="input">
	  </view>
	  <br>
	  <view class="input-box">
	    <input type="text" placeholder="略缩图" :value="shareImg" @input="shareImg = $event.target.value" class="input">
	  </view>
	  <br>
	  <button type="default" @click="onShare()" class="share-btn">点击分享</button>
	</view>
</template>
<script>
	import appShare, { closeShare } from "@/utils/share.js"
	export default {
		data() {
			return {
				shareUrl: '',
				shareTitle: '',
				shareContent: '',
				shareImg: ''
			}
		},
		onLoad() {

		},
		methods: {
			onShare(){
				let shareData = {
					shareUrl: this.shareUrl,
					shareTitle: this.shareTitle,
					shareContent: this.shareContent,
					shareImg: this.shareImg
				};
				let shareObj = appShare(shareData,res => {
					console.log("分享成功回调",res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式
					closeShare();
				});
				setTimeout(() => {
					// 第二种关闭弹窗的方式
					shareObj.close();
				},5000); 
			},
			onShareType(type){
				let shareData = {
					shareUrl: this.shareUrl,
					shareTitle: this.shareTitle,
					shareContent: this.shareContent,
					shareImg: this.shareImg
				}
				
				appShare(shareData,res => {
					console.log("分享成功回调",res);
				});
			}
		}
	}
</script>
<style>
	.content {
	    max-width: 500px;
	  }
	  .input-box {
	    border: none; /* 去除边框 */
	        border-radius: 15px; /* 圆角边框 */
	        padding: 10px; /* 内边距 */
	        font-size: 16px; /* 字体大小 */
	        color: #333; /* 字体颜色 */
	        background-color: #f2f2f2; /* 背景颜色 */
			
	  }
	  .input {
	    flex: 1;
	    border: none;
	    outline: none;
	    font-size: 16px;
		text-align:center
	  }
	  .share-btn {
	    background-color: #969696;
	    color: #fff;
	    border: none;
	    border-radius: 20px;
	    padding: 10px;
	    font-size: 20px;
	    cursor: pointer;
		max-width: 80%
	  }
</style