share.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <view class="share">
  3. <!-- :mask-close-able="false" :closeable="true" -->
  4. <u-popup v-model="show" mode="bottom" @close="close">
  5. <u-grid :col="2" style="background-color: #fff;">
  6. <u-grid-item @click="weixinShare">
  7. <u-icon name="weixin-circle-fill" :size="46" class="icon"></u-icon>
  8. <view class="grid-text">微信</view>
  9. </u-grid-item>
  10. <u-grid-item @click="weixinMoments">
  11. <u-icon name="moments" :size="46"></u-icon>
  12. <view class="grid-text">微信朋友圈</view>
  13. </u-grid-item>
  14. <!-- <u-grid-item @click="QQkongjianShare">
  15. <u-icon name="qzone" :size="46"></u-icon>
  16. <view class="grid-text">qq空间</view>
  17. </u-grid-item>
  18. <u-grid-item @click="QQShare">
  19. <u-icon name="qq-fill" :size="46"></u-icon>
  20. <view class="grid-text">QQ</view>
  21. </u-grid-item>
  22. <u-grid-item @click="weiboShare">
  23. <u-icon name="weibo" :size="46"></u-icon>
  24. <view class="grid-text">微博</view>
  25. </u-grid-item> -->
  26. <!-- <u-grid-item>
  27. <u-icon name="zhifubao" :size="46"></u-icon>
  28. <view class="grid-text">支付宝</view>
  29. </u-grid-item> -->
  30. </u-grid>
  31. <!-- <view class="" style="margin-top: 0upx;">
  32. <u-button >取消</u-button>
  33. </view> -->
  34. </u-popup>
  35. <u-toast ref="uToast" />
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. props:{
  41. show: {
  42. type: Boolean,
  43. default: false
  44. },
  45. title:{
  46. type: String,
  47. default: '能联全球'
  48. },
  49. summary:{
  50. type: String,
  51. default: ''
  52. },
  53. href:{
  54. type: String,
  55. default: 'https://www.geidcp.com/#/'
  56. },
  57. imageUrl:{
  58. type: String,
  59. default: 'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'
  60. }
  61. },
  62. data() {
  63. return {
  64. canvasShow: false
  65. };
  66. },
  67. methods:{
  68. close(){
  69. this.$emit('closeShare',false);
  70. },
  71. // 微信
  72. weixinShare(){
  73. console.log("进入微信分享")
  74. const that = this;
  75. uni.share({
  76. provider: "weixin",
  77. scene: "WXSceneSession",
  78. type: 0,
  79. href: this.href,
  80. title: this.title,
  81. summary: this.summary,
  82. imageUrl: this.imageUrl,
  83. success: function (res) {
  84. that.$refs.uToast.show({
  85. title: '分享成功',
  86. type: 'success',
  87. })
  88. },
  89. fail: function (err) {
  90. that.$refs.uToast.show({
  91. title: '分享失败',
  92. type: 'error',
  93. })
  94. }
  95. });
  96. },
  97. // 微信朋友圈
  98. weixinMoments(){
  99. const that = this;
  100. uni.share({
  101. provider: "weixin",
  102. scene: "WXSenceTimeline",
  103. type: 0,
  104. href: this.href,
  105. title: this.title,
  106. summary: this.summary,
  107. imageUrl: this.imageUrl,
  108. success: function (res) {
  109. that.$refs.uToast.show({
  110. title: '分享成功',
  111. type: 'success',
  112. });
  113. },
  114. fail: function (err) {
  115. that.$refs.uToast.show({
  116. title: '分享失败',
  117. type: 'error',
  118. })
  119. }
  120. });
  121. },
  122. // QQ
  123. QQShare(){
  124. if(uni.getSystemInfoSync().platform =='ios'){
  125. uni.share({
  126. provider: "qq",
  127. scene: "WXSceneSession",
  128. type: 1,
  129. summary:this.summary + this.href,
  130. success: function (res) {
  131. // that.$refs.popup.close()
  132. },
  133. fail: function (err) {
  134. console.log("fail:" + JSON.stringify(err));
  135. }
  136. });
  137. }else{
  138. uni.share({
  139. provider: "qq",
  140. scene: "WXSceneSession",
  141. title:this.title,
  142. type: 1,
  143. href:this.href,
  144. summary:this.summary + this.href,
  145. success: function (res) {
  146. // that.$refs.popup.close()
  147. },
  148. fail: function (err) {
  149. console.log("fail:" + JSON.stringify(err));
  150. }
  151. });
  152. }
  153. },
  154. // QQ空间
  155. QQkongjianShare(){
  156. if(uni.getSystemInfoSync().platform =='ios'){
  157. uni.share({
  158. provider: "qq",
  159. scene: "WXSenceTimeline",
  160. type: 1,
  161. summary:this.summary + this.href,
  162. success: function (res) {
  163. // that.$refs.popup.close()
  164. },
  165. fail: function (err) {
  166. console.log("fail:" + JSON.stringify(err));
  167. }
  168. });
  169. }else{
  170. uni.share({
  171. provider: "qq",
  172. scene: "WXSenceTimeline",
  173. title:this.title,
  174. type: 1,
  175. href:this.href,
  176. summary:this.summary + this.href,
  177. success: function (res) {
  178. // that.$refs.popup.close()
  179. },
  180. fail: function (err) {
  181. console.log("fail:" + JSON.stringify(err));
  182. }
  183. });
  184. }
  185. },
  186. weiboShare(){
  187. uni.share({
  188. provider: "sinaweibo",
  189. scene: "WXSceneSession",
  190. "type": 0,
  191. title:this.title,
  192. "summary": this.summary,
  193. "imageUrl":this.imageUrl,
  194. success: function (res) {
  195. // that.$refs.popup.close()
  196. },
  197. fail: function (err) {
  198. console.log("fail:" + JSON.stringify(err));
  199. }
  200. });
  201. }
  202. }
  203. }
  204. </script>
  205. <style scoped>
  206. .share /deep/ .u-drawer-bottom {
  207. background-color: #fff;
  208. }
  209. .icon {
  210. }
  211. </style>