uni-popup-share.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <view class="uni-popup-share">
  3. <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
  4. <view class="uni-share-content">
  5. <view class="uni-share-content-box">
  6. <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
  7. <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
  8. <text class="uni-share-text">{{item.text}}</text>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="uni-share-button-box">
  13. <button class="uni-share-button" @click="close">取消</button>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name: 'UniPopupShare',
  20. props: {
  21. title: {
  22. type: String,
  23. default: '分享到'
  24. }
  25. },
  26. inject: ['popup'],
  27. data() {
  28. return {
  29. bottomData: [{
  30. text: '微信',
  31. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
  32. name: 'wx'
  33. },
  34. {
  35. text: '支付宝',
  36. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
  37. name: 'wx'
  38. },
  39. {
  40. text: 'QQ',
  41. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
  42. name: 'qq'
  43. },
  44. {
  45. text: '新浪',
  46. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
  47. name: 'sina'
  48. },
  49. {
  50. text: '百度',
  51. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
  52. name: 'copy'
  53. },
  54. {
  55. text: '其他',
  56. icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
  57. name: 'more'
  58. }
  59. ]
  60. }
  61. },
  62. created() {},
  63. methods: {
  64. /**
  65. * 选择内容
  66. */
  67. select(item, index) {
  68. this.$emit('select', {
  69. item,
  70. index
  71. }, () => {
  72. this.popup.close()
  73. })
  74. },
  75. /**
  76. * 关闭窗口
  77. */
  78. close() {
  79. this.popup.close()
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. .uni-popup-share {
  86. background-color: #fff;
  87. }
  88. .uni-share-title {
  89. /* #ifndef APP-NVUE */
  90. display: flex;
  91. /* #endif */
  92. flex-direction: row;
  93. align-items: center;
  94. justify-content: center;
  95. height: 40px;
  96. }
  97. .uni-share-title-text {
  98. font-size: 14px;
  99. color: #666;
  100. }
  101. .uni-share-content {
  102. /* #ifndef APP-NVUE */
  103. display: flex;
  104. /* #endif */
  105. flex-direction: row;
  106. justify-content: center;
  107. padding-top: 10px;
  108. }
  109. .uni-share-content-box {
  110. /* #ifndef APP-NVUE */
  111. display: flex;
  112. /* #endif */
  113. flex-direction: row;
  114. flex-wrap: wrap;
  115. width: 360px;
  116. }
  117. .uni-share-content-item {
  118. width: 90px;
  119. /* #ifndef APP-NVUE */
  120. display: flex;
  121. /* #endif */
  122. flex-direction: column;
  123. justify-content: center;
  124. padding: 10px 0;
  125. align-items: center;
  126. }
  127. .uni-share-content-item:active {
  128. background-color: #f5f5f5;
  129. }
  130. .uni-share-image {
  131. width: 30px;
  132. height: 30px;
  133. }
  134. .uni-share-text {
  135. margin-top: 10px;
  136. font-size: 14px;
  137. color: #3B4144;
  138. }
  139. .uni-share-button-box {
  140. /* #ifndef APP-NVUE */
  141. display: flex;
  142. /* #endif */
  143. flex-direction: row;
  144. padding: 10px 15px;
  145. }
  146. .uni-share-button {
  147. flex: 1;
  148. border-radius: 50px;
  149. color: #666;
  150. font-size: 16px;
  151. }
  152. .uni-share-button::after {
  153. border-radius: 50px;
  154. }
  155. </style>