crm-mobile/components/uni-popup/uni-popup-share.vue

<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">
        <view v-for="(item,index) in bottomData" :key="index" class="uni-share-content-item" @click.stop="select(item,index)">
          <image class="uni-share-image" :src="item.icon" mode="aspectFill" />
          <text class="uni-share-text">
            {{ item.text }}
          </text>
        </view>
      </view>
    </view>
    <view class="uni-share-button-box">
      <button class="uni-share-button" @click="close">
        取消
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'UniPopupShare',
    inject: ['popup'],
    props: {
      title: {
        type: String,
        default: '分享到'
      }
    },
    data() {
      return {
        bottomData: [{
                       text: '微信',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
                       name: 'wx'
                     },
                     {
                       text: '支付宝',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
                       name: 'wx'
                     },
                     {
                       text: 'QQ',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
                       name: 'qq'
                     },
                     {
                       text: '新浪',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
                       name: 'sina'
                     },
                     {
                       text: '百度',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
                       name: 'copy'
                     },
                     {
                       text: '其他',
                       icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
                       name: 'more'
                     }
        ]
      }
    },
    created() {},
    methods: {
      /**
       * 选择内容
       */
      select(item, index) {
        this.$emit('select', {
          item,
          index
        }, () => {
          this.popup.close()
        })
      },
      /**
       * 关闭窗口
       */
      close() {
        this.popup.close()
      }
    }
  }
</script>
<style scoped>
	.uni-popup-share {
		background-color: #fff;
	}

	.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: row;
		flex-wrap: wrap;
		width: 360px;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}
</style>