uni-popup-share.vue 3.8 KB

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