activitys-uniapp/components/alert/sharePopup.vue

<template>
	<view class="">
		<u-popup v-model="shareShow" mode="bottom" height="460" border-radius="30" :safe-area-inset-bottom="true">
			<view class="flex flex-direction" style="height: 100%;">
				<view class="center flex-twice"
					style="width: 100%;font-size: 32rpx;color: #353535;font-family: PingFang-SC-Heavy;">
					<text class="">分享到</text>
				</view>
				<view class="flex-treble padding-bottom-30">
					<view class="">
						<view class="cu-list grid col-3 no-border" style="border-radius:20rpx ;">
							<button class="cu-item u-reset-button" :open-type="item.name=='好友'?'share':''"
								v-for="(item,index) in posterList" :key="index" @click="confirm(item)">
								<view class="grid-icon">
									<image style="width: 88rpx;height: 88rpx;" :src="item.icon" />
								</view>
								<text style="color: #222222;font-size: 26rpx;">{{item.name}}</text>
							</button>
						</view>
					</view>
				</view>
				<view @click="shareShow=false" class="center flex-sub"
					style="color: #888888;background-color: #fefefe;border-top: #F6F6F6;">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				shareShow: false,
				posterList: [{
						icon: '/static/poster/wx.png',
						name: '好友'
					},
					{
						icon: '/static/poster/pyq.png',
						name: '朋友圈'
					},
					{
						icon: '/static/poster/haibao.png',
						name: '海报'
					},
				],
			};
		},
		methods: {
			show() {
				this.shareShow = true
			},
			hide() {
				this.shareShow = false
			},
			confirm(item){
				this.shareShow=false
				this.$emit('confirm',item)
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>