share-box.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <view class="share-content">
  3. <view class="share-inner">
  4. <view class="share-item" @click="wxShare(0)">
  5. <image src="/static/images/icon_wx.png" mode=""></image>
  6. <text class="text">微信</text>
  7. </view>
  8. <view class="share-item" @click="wxShare(1)">
  9. <image src="/static/images/icon_pyq.png" mode=""></image>
  10. <text class="text">朋友圈</text>
  11. </view>
  12. <!-- <view class="share-item">
  13. <image src="/static/images/icon_xcxhb.png" mode=""></image>
  14. <text class="text">小程序海报</text>
  15. </view>
  16. <view class="share-item">
  17. <image src="/static/images/icon_xccard.png" mode=""></image>
  18. <text class="text">小程序卡片</text>
  19. </view>
  20. <view class="share-item">
  21. <image src="/static/images/icon_code.png" mode=""></image>
  22. <text class="text">二维码</text>
  23. </view> -->
  24. <view class="share-item" @click="copyUrl()">
  25. <image src="/static/images/icon_copy_link.png" mode=""></image>
  26. <text class="text">复制链接</text>
  27. </view>
  28. </view>
  29. <view class="cancel-btn" @click="closeShare">取消</view>
  30. </view>
  31. </template>
  32. <script>
  33. import { shareCourse } from '@/api/course'
  34. import { shareVideo } from '@/api/shortvideo'
  35. export default {
  36. name: "share-box",
  37. props: {
  38. shareItem: {
  39. type: Object,
  40. default: function() {
  41. return {
  42. imageUrl: "",
  43. title: "",
  44. url: "",
  45. summary: url,
  46. courseId: 0,
  47. videoId: 0,
  48. isMini: false
  49. }; // type 0:课程 1视频
  50. }
  51. },
  52. },
  53. data() {
  54. return {
  55. };
  56. },
  57. methods: {
  58. wxShare(type) {
  59. if (this.$isEmpty(this.shareItem.title)) {
  60. uni.showToast({
  61. title: "数据未加载",
  62. icon: "none",
  63. position: 'top',
  64. duration: 2000
  65. })
  66. return;
  67. }
  68. // #ifdef APP-PLUS
  69. if (!plus.runtime.isAgreePrivacy()) {
  70. uni.showToast({
  71. title: "请同意隐私政策",
  72. icon: "none",
  73. position: 'top',
  74. duration: 2000
  75. })
  76. return;
  77. }
  78. // #endif
  79. let that = this;
  80. let sceneStr = type == 0 ? "WXSceneSession" : "WXSceneTimeline";
  81. // 仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码
  82. if (sceneStr == 'WXSceneTimeline' || !this.shareItem.isMini) {
  83. uni.share({
  84. provider: "weixin",
  85. scene: sceneStr,
  86. type: 0,
  87. imageUrl: this.shareItem.imageUrl, //分享封面图片
  88. title: this.shareItem.title, // 分享标题
  89. href: this.shareItem.url, //跳转链接
  90. summary: this.shareItem.summary, // 分享内容文字
  91. success: function(res) {
  92. that.doShare();
  93. uni.showToast({
  94. title: "分享成功",
  95. icon: 'none'
  96. });
  97. },
  98. fail: function(err) {
  99. // 此处是调起微信分享失败的回调
  100. },
  101. complete: (e) => {
  102. console.log("WXSceneTimeline", e)
  103. }
  104. });
  105. } else {
  106. uni.share({
  107. provider: "weixin",
  108. scene: sceneStr,
  109. type: 5,
  110. imageUrl: this.shareItem.imageUrl, //分享封面图片
  111. title: this.shareItem.title, // 分享标题
  112. //summary: this.shareItem.summary, // 分享内容文字
  113. miniProgram: {
  114. id: "gh_7a6a32e5ef61",
  115. path: this.shareItem.path,
  116. type: 0, //0-正式版; 1-测试版; 2-体验版。 默认值为0。
  117. webUrl: "http://uniapp.dcloud.io"
  118. },
  119. success: function(res) {
  120. that.doShare();
  121. uni.showToast({
  122. title: "分享成功",
  123. icon: 'none'
  124. });
  125. },
  126. fail: function(err) {
  127. // 此处是调起微信分享失败的回调
  128. },
  129. complete: (e) => {
  130. console.log("WXSceneSession", e)
  131. }
  132. });
  133. }
  134. },
  135. doShare() {
  136. if (!this.shareItem.isMini) {
  137. if (this.shareItem.courseId > 0) {
  138. this.shareCourse();
  139. }else if(this.shareItem.videoId > 0) {
  140. this.shareVideo();
  141. }
  142. }
  143. },
  144. shareCourse() {
  145. shareCourse(this.shareItem.courseId).then(res => {
  146. },
  147. rej => {}
  148. );
  149. },
  150. shareVideo() {
  151. shareVideo({videoId:this.shareItem.videoId})
  152. },
  153. copyUrl() {
  154. uni.setClipboardData({
  155. data: this.shareItem.url,
  156. success: () => {
  157. uni.showToast({
  158. title: '复制成功',
  159. icon: 'none'
  160. });
  161. },
  162. fail: () => {
  163. uni.showToast({
  164. title: '复制失败',
  165. icon: 'none'
  166. });
  167. }
  168. });
  169. },
  170. closeShare() {
  171. return this.$emit('closeShare');
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="scss" scoped>
  177. .share-content {
  178. background-color: #FFF;
  179. border-radius: 40upx 40upx 0px 0px;
  180. .share-inner {
  181. padding: 70upx 0 0 0;
  182. display: flex;
  183. flex-wrap: wrap;
  184. .share-item {
  185. width: 25%;
  186. display: flex;
  187. flex-direction: column;
  188. align-items: center;
  189. justify-content: center;
  190. margin-bottom: 66upx;
  191. image {
  192. width: 80upx;
  193. height: 80upx;
  194. margin-bottom: 20upx;
  195. }
  196. .text {
  197. font-size: 28upx;
  198. font-family: PingFang SC;
  199. font-weight: 500;
  200. color: #111111;
  201. line-height: 1;
  202. }
  203. }
  204. }
  205. .cancel-btn {
  206. height: 96upx;
  207. line-height: 96upx;
  208. text-align: center;
  209. font-size: 32upx;
  210. font-family: PingFang SC;
  211. font-weight: 500;
  212. color: #111111;
  213. border-top: 2upx solid #E8E8E8;
  214. background-color: #FFF;
  215. }
  216. }
  217. </style>