<template> <view class="uni-popup-share"> <!-- <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view> --> <view class="uni-share-content"> <view class="uni-share-content-box"> <button class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" :open-type="item.name === 'friend' ? 'share': ''" @click.stop="select(item,index)" > <image class="uni-share-image" :src="item.icon" mode="aspectFill" ></image> <view class="uni-share-text">{{item.text}}</view> </button> </view> </view> <view @tap="close" class="uni-share-button-box" > 取消 </view> </view> </template> <script> export default { name: 'UniPopupShare', props: { title: { type: String, default: '分享到', }, }, inject: ['popup'], data() { return { bottomData: [{ text: '推荐到好物圈', icon: '/static/img/share/recommend.png', name: 'recommend', }, { text: '转发给朋友/群', icon: '/static/img/share/friend.png', name: 'friend', }, { text: '生成海报', icon: '/static/img/share/poster.png', name: 'poster', }, ], } }, created() {}, methods: { /** * 选择内容 */ select(item, index) { this.$emit('select', { item, index, }, () => { this.popup.close() }) }, /** * 关闭窗口 */ close() { this.popup.close() }, }, } </script> <style lang="scss" scoped> .uni-popup-share { background-color: #fff; border-radius: 8px 8px 0px 0px; } .uni-share-title { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; align-items: center; justify-content: center; height: 40px; } .uni-share-title-text { font-size: 14px; color: #666; } .uni-share-content { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: center; padding-top: 10px; } .uni-share-content-box { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; justify-content: space-between; width: 360px; } .uni-share-content-item { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; flex-wrap: wrap; padding: 10px 0; align-items: center; border-bottom: 1px solid #f2f2f2; background-color: #fff; font-family: PingFangSC-Regular; font-size: 16px; color: #333333; letter-spacing: -0.3px; margin: 0; &::after { border: 0; } } .uni-share-content-item:active { background-color: #f5f5f5; } .uni-share-image { width: 84rpx; height: 84rpx; vertical-align: middle; margin-left: 40rpx; } .uni-share-text { font-family: PingFangSC-Regular; font-size: 16px; color: #3b4144; margin-left: 20rpx; } // .share_button { // border: none; // } .uni-share-button-box { /* #ifndef APP-NVUE */ // display: flex; /* #endif */ // flex-direction: row; // padding: 10px 15px; height: 100rpx; font-family: PingFangSC-Regular; font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: center; line-height: 100rpx; } .uni-share-button { flex: 1; border-radius: 50px; color: #666; font-size: 16px; } .uni-share-button::after { border-radius: 50px; } </style>