share-box.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  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. import { shareHealth } from '@/api/integral.js'
  36. export default {
  37. name: "share-box",
  38. props: {
  39. shareItem: {
  40. type: Object,
  41. default: function() {
  42. return {
  43. imageUrl: "",
  44. title: "",
  45. url: "",
  46. summary: url,
  47. courseId: 0,
  48. videoId: 0,
  49. isMini: false,
  50. compressImage: 0, // 是否需要压缩
  51. }; // type 0:课程 1视频
  52. }
  53. },
  54. },
  55. data() {
  56. return {
  57. };
  58. },
  59. methods: {
  60. wxShare(type) {
  61. if (this.$isEmpty(this.shareItem.title)) {
  62. uni.showToast({
  63. title: "数据未加载",
  64. icon: "none",
  65. position: 'top',
  66. duration: 2000
  67. })
  68. return;
  69. }
  70. // #ifdef APP-PLUS
  71. if (!plus.runtime.isAgreePrivacy()) {
  72. uni.showToast({
  73. title: "请同意隐私政策",
  74. icon: "none",
  75. position: 'top',
  76. duration: 2000
  77. })
  78. return;
  79. }
  80. // #endif
  81. let that = this;
  82. let sceneStr = type == 0 ? "WXSceneSession" : "WXSceneTimeline";
  83. // 仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码
  84. if (sceneStr == 'WXSceneTimeline' || !this.shareItem.isMini) {
  85. uni.share({
  86. provider: "weixin",
  87. scene: sceneStr,
  88. type: 0,
  89. imageUrl: this.shareItem.imageUrl, //分享封面图片
  90. title: this.shareItem.title, // 分享标题
  91. href: this.shareItem.url, //跳转链接
  92. summary: this.shareItem.summary, // 分享内容文字
  93. success: function(res) {
  94. that.doShare();
  95. uni.showToast({
  96. title: "分享成功",
  97. icon: 'none'
  98. });
  99. },
  100. fail: function(err) {
  101. // 此处是调起微信分享失败的回调
  102. },
  103. complete: (e) => {
  104. console.log("WXSceneTimeline", e)
  105. }
  106. });
  107. } else {
  108. if(this.shareItem.compressImage == 1) {
  109. uni.downloadFile({
  110. url: this.shareItem.imageUrl, //仅为示例,并非真实接口地址。
  111. success: (images)=> {
  112. uni.compressImage({
  113. src: images.tempFilePath,
  114. quality: 40,
  115. width: '50%',
  116. height: '50%',
  117. success: res => {
  118. this.shareMini(res.tempFilePath,sceneStr)
  119. },
  120. fail: function(err) {
  121. }
  122. })
  123. }
  124. });
  125. }else {
  126. this.shareMini(this.shareItem.imageUrl,sceneStr)
  127. }
  128. }
  129. },
  130. shareMini(imageUrl,sceneStr) {
  131. const that = this
  132. uni.share({
  133. provider: "weixin",
  134. scene: sceneStr,
  135. type: 5,
  136. imageUrl: imageUrl, //分享封面图片
  137. title: this.shareItem.title, // 分享标题
  138. //summary: this.shareItem.summary, // 分享内容文字
  139. miniProgram: {
  140. id: "gh_7a6a32e5ef61",
  141. path: this.shareItem.path,
  142. type: 0, //0-正式版; 1-测试版; 2-体验版。 默认值为0。
  143. webUrl: "http://uniapp.dcloud.io"
  144. },
  145. success: function(res) {
  146. that.doShare();
  147. uni.showToast({
  148. title: "分享成功",
  149. icon: 'none'
  150. });
  151. },
  152. fail: function(err) {
  153. // 此处是调起微信分享失败的回调
  154. },
  155. complete: (e) => {
  156. console.log("WXSceneSession", e)
  157. }
  158. });
  159. },
  160. doShare() {
  161. if (!this.shareItem.isMini) {
  162. if (this.shareItem.courseId > 0) {
  163. this.shareCourse();
  164. }
  165. }
  166. if(this.shareItem.videoId > 0) {
  167. this.shareVideo();
  168. }else if(this.shareItem.healthId > 0) {
  169. this.shareHealth();
  170. }
  171. },
  172. shareCourse() {
  173. shareCourse(this.shareItem.courseId).then(res => {
  174. },
  175. rej => {}
  176. );
  177. },
  178. shareVideo() {
  179. shareVideo({videoId:this.shareItem.videoId})
  180. },
  181. shareHealth() {
  182. shareHealth({logType:3})
  183. },
  184. copyUrl() {
  185. uni.setClipboardData({
  186. data: this.shareItem.url,
  187. success: () => {
  188. uni.showToast({
  189. title: '复制成功',
  190. icon: 'none'
  191. });
  192. },
  193. fail: () => {
  194. uni.showToast({
  195. title: '复制失败',
  196. icon: 'none'
  197. });
  198. }
  199. });
  200. },
  201. closeShare() {
  202. return this.$emit('closeShare');
  203. }
  204. }
  205. }
  206. </script>
  207. <style lang="scss" scoped>
  208. .share-content {
  209. background-color: #FFF;
  210. border-radius: 40upx 40upx 0px 0px;
  211. .share-inner {
  212. padding: 70upx 0 0 0;
  213. display: flex;
  214. flex-wrap: wrap;
  215. .share-item {
  216. width: 25%;
  217. display: flex;
  218. flex-direction: column;
  219. align-items: center;
  220. justify-content: center;
  221. margin-bottom: 66upx;
  222. image {
  223. width: 80upx;
  224. height: 80upx;
  225. margin-bottom: 20upx;
  226. }
  227. .text {
  228. font-size: 28upx;
  229. font-family: PingFang SC;
  230. font-weight: 500;
  231. color: #111111;
  232. line-height: 1;
  233. }
  234. }
  235. }
  236. .cancel-btn {
  237. height: 96upx;
  238. line-height: 96upx;
  239. text-align: center;
  240. font-size: 32upx;
  241. font-family: PingFang SC;
  242. font-weight: 500;
  243. color: #111111;
  244. border-top: 2upx solid #E8E8E8;
  245. background-color: #FFF;
  246. }
  247. }
  248. </style>