share.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent"
  3. :style="{backgroundColor: backgroundColor}"
  4. >
  5. <view
  6. class="mask-content"
  7. @click.stop.prevent="stopPrevent"
  8. :style="[{
  9. height: config.height,
  10. transform: transform
  11. }]"
  12. >
  13. <scroll-view class="view-content" scroll-y>
  14. <view class="share-header">
  15. 分享到
  16. </view>
  17. <view class="share-list">
  18. <view
  19. v-for="(item, index) in shareList" :key="index"
  20. class="share-item"
  21. @click="shareToFriend(item.text)"
  22. >
  23. <image :src="item.icon" mode=""></image>
  24. <text>{{item.text}}</text>
  25. </view>
  26. </view>
  27. </scroll-view>
  28. <view class="bottom b-t" @click="toggleMask">取消</view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. transform: 'translateY(50vh)',
  37. timer: 0,
  38. backgroundColor: 'rgba(0,0,0,0)',
  39. show: false,
  40. config: {},
  41. };
  42. },
  43. props:{
  44. contentHeight:{
  45. type: Number,
  46. default: 0
  47. },
  48. //是否是tabbar页面
  49. hasTabbar:{
  50. type: Boolean,
  51. default: false
  52. },
  53. shareList:{
  54. type: Array,
  55. default: function(){
  56. return [];
  57. }
  58. }
  59. },
  60. created() {
  61. const height = uni.upx2px(this.contentHeight) + 'px';
  62. this.config = {
  63. height: height,
  64. transform: `translateY(${height})`,
  65. backgroundColor: 'rgba(0,0,0,.4)',
  66. }
  67. this.transform = this.config.transform;
  68. },
  69. methods:{
  70. toggleMask(){
  71. //防止高频点击
  72. if(this.timer == 1){
  73. return;
  74. }
  75. this.timer = 1;
  76. setTimeout(()=>{
  77. this.timer = 0;
  78. }, 500)
  79. if(this.show){
  80. this.transform = this.config.transform;
  81. this.backgroundColor = 'rgba(0,0,0,0)';
  82. setTimeout(()=>{
  83. this.show = false;
  84. this.hasTabbar && uni.showTabBar();
  85. }, 200)
  86. return;
  87. }
  88. this.show = true;
  89. //等待mask重绘完成执行
  90. if(this.hasTabbar){
  91. uni.hideTabBar({
  92. success: () => {
  93. setTimeout(()=>{
  94. this.backgroundColor = this.config.backgroundColor;
  95. this.transform = 'translateY(0px)';
  96. }, 10)
  97. }
  98. });
  99. }else{
  100. setTimeout(()=>{
  101. this.backgroundColor = this.config.backgroundColor;
  102. this.transform = 'translateY(0px)';
  103. }, 10)
  104. }
  105. },
  106. //防止冒泡和滚动穿透
  107. stopPrevent(){},
  108. //分享操作
  109. shareToFriend(type){
  110. this.$api.msg(`分享给${type}`);
  111. this.toggleMask();
  112. },
  113. }
  114. }
  115. </script>
  116. <style lang='scss'>
  117. .mask{
  118. position:fixed;
  119. left: 0;
  120. top: 0;
  121. right: 0;
  122. bottom: 0;
  123. display:flex;
  124. justify-content: center;
  125. align-items: flex-end;
  126. z-index: 998;
  127. transition: .3s;
  128. .bottom{
  129. position:absolute;
  130. left: 0;
  131. bottom: 0;
  132. display:flex;
  133. justify-content: center;
  134. align-items: center;
  135. width: 100%;
  136. height: 90upx;
  137. background: #fff;
  138. z-index: 9;
  139. font-size: $font-base + 2upx;
  140. color: $font-color-dark;
  141. }
  142. }
  143. .mask-content{
  144. width: 100%;
  145. height: 580upx;
  146. transition: .3s;
  147. background: #fff;
  148. &.has-bottom{
  149. padding-bottom: 90upx;
  150. }
  151. .view-content{
  152. height: 100%;
  153. }
  154. }
  155. .share-header{
  156. height: 110upx;
  157. font-size: $font-base+2upx;
  158. color: font-color-dark;
  159. display:flex;
  160. align-items:center;
  161. justify-content: center;
  162. padding-top: 10upx;
  163. &:before, &:after{
  164. content: '';
  165. width: 240upx;
  166. heighg: 0;
  167. border-top: 1px solid $border-color-base;
  168. transform: scaleY(.5);
  169. margin-right: 30upx;
  170. }
  171. &:after{
  172. margin-left: 30upx;
  173. margin-right: 0;
  174. }
  175. }
  176. .share-list{
  177. display:flex;
  178. flex-wrap: wrap;
  179. }
  180. .share-item{
  181. min-width: 33.33%;
  182. display:flex;
  183. flex-direction: column;
  184. justify-content: center;
  185. align-items: center;
  186. height: 180upx;
  187. image{
  188. width: 80upx;
  189. height: 80upx;
  190. margin-bottom: 16upx;
  191. }
  192. text{
  193. font-size: $font-base;
  194. color: $font-color-base;
  195. }
  196. }
  197. </style>