share-box.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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" @click="qwShare()">
  13. <image src="/static/images/icon_qwshare.png" mode=""></image>
  14. <text class="text">发给同事</text>
  15. </view> -->
  16. <!-- <view class="share-item">
  17. <image src="/static/images/icon_xcxhb.png" mode=""></image>
  18. <text class="text">小程序海报</text>
  19. </view>
  20. <view class="share-item">
  21. <image src="/static/images/icon_xccard.png" mode=""></image>
  22. <text class="text">小程序卡片</text>
  23. </view>
  24. <view class="share-item">
  25. <image src="/static/images/icon_code.png" mode=""></image>
  26. <text class="text">二维码</text>
  27. </view> -->
  28. <view class="share-item" @click="copyUrl()">
  29. <image src="/static/images/icon_copy_link.png" mode=""></image>
  30. <text class="text">复制链接</text>
  31. </view>
  32. </view>
  33. <view class="cancel-btn" @click="closeShare">取消</view>
  34. </view>
  35. </template>
  36. <script>
  37. import {
  38. shareCourse
  39. } from '@/api/course'
  40. import {
  41. shareVideo
  42. } from '@/api/shortvideo'
  43. import {
  44. shareHealth
  45. } from '@/api/integral.js'
  46. import {
  47. getQwCompanyList
  48. } from '@/api/common.js'
  49. import {
  50. registerQW
  51. } from '@/utils/common.js'
  52. export default {
  53. name: "share-box",
  54. props: {
  55. shareItem: {
  56. type: Object,
  57. default: function() {
  58. return {
  59. imageUrl: "",
  60. title: "",
  61. url: "",
  62. summary: url,
  63. courseId: 0,
  64. videoId: 0,
  65. isMini: false,
  66. compressImage: 0, // 是否需要压缩
  67. }; // type 0:课程 1视频
  68. }
  69. },
  70. },
  71. data() {
  72. return {
  73. companyList: []
  74. };
  75. },
  76. methods: {
  77. wxShare(type) {
  78. if (this.$isEmpty(this.shareItem.title)) {
  79. uni.showToast({
  80. title: "数据未加载",
  81. icon: "none",
  82. position: 'top',
  83. duration: 2000
  84. })
  85. return;
  86. }
  87. // #ifdef APP-PLUS
  88. if (!plus.runtime.isAgreePrivacy() && uni.$u.os() === 'android') {
  89. uni.showToast({
  90. title: "请同意隐私政策",
  91. icon: "none",
  92. position: 'top',
  93. duration: 2000
  94. })
  95. return;
  96. }
  97. // #endif
  98. let that = this;
  99. let sceneStr = type == 0 ? "WXSceneSession" : "WXSceneTimeline";
  100. console.log("qxj shareItem:", this.shareItem);
  101. // 仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码
  102. if (this.shareItem.yyb) {
  103. uni.share({
  104. provider: "weixin",
  105. scene: sceneStr,
  106. type: 0,
  107. imageUrl: this.shareItem.imageUrl, //分享封面图片
  108. title: this.shareItem.title, // 分享标题
  109. href: `https://a.app.qq.com/o/simple.jsp?pkgname=com.mytek.zklive&android_schema=${encodeURIComponent(this.shareItem.path)}`, //跳转链接
  110. summary: this.shareItem.summary, // 分享内容文字
  111. success: function(res) {
  112. that.doShare();
  113. uni.showToast({
  114. title: "分享成功",
  115. icon: 'none'
  116. });
  117. },
  118. fail: function(err) {
  119. // 此处是调起微信分享失败的回调
  120. },
  121. complete: (e) => {
  122. console.log("WXSceneTimeline", e)
  123. }
  124. });
  125. return
  126. }
  127. if (sceneStr == 'WXSceneTimeline' || !this.shareItem.isMini) {
  128. uni.share({
  129. provider: "weixin",
  130. scene: sceneStr,
  131. type: 0,
  132. imageUrl: this.shareItem.imageUrl, //分享封面图片
  133. title: this.shareItem.title, // 分享标题
  134. href: this.shareItem.url, //跳转链接
  135. summary: this.shareItem.summary, // 分享内容文字
  136. success: function(res) {
  137. that.doShare();
  138. uni.showToast({
  139. title: "分享成功",
  140. icon: 'none'
  141. });
  142. },
  143. fail: function(err) {
  144. // 此处是调起微信分享失败的回调
  145. },
  146. complete: (e) => {
  147. console.log("WXSceneTimeline", e)
  148. }
  149. });
  150. } else {
  151. if (this.shareItem.compressImage == 1) {
  152. this.shareMini(this.shareItem.imageUrl + "?imageMogr2/thumbnail/300x", sceneStr);
  153. // uni.downloadFile({
  154. // url: this.shareItem.imageUrl, //仅为示例,并非真实接口地址。
  155. // success: (images)=> {
  156. // uni.compressImage({
  157. // src: images.tempFilePath,
  158. // quality: 40,
  159. // width: '50%',
  160. // height: '50%',
  161. // success: res => {
  162. // this.shareMini(res.tempFilePath,sceneStr)
  163. // },
  164. // fail: function(err) {
  165. // // 此处是压缩失败
  166. // }
  167. // })
  168. // }
  169. // });
  170. } else {
  171. this.shareMini(this.shareItem.imageUrl, sceneStr)
  172. }
  173. }
  174. },
  175. shareMini(imageUrl, sceneStr) {
  176. const that = this
  177. uni.share({
  178. provider: "weixin",
  179. scene: sceneStr,
  180. type: 5,
  181. imageUrl: imageUrl, //分享封面图片
  182. title: this.shareItem.title, // 分享标题
  183. //summary: this.shareItem.summary, // 分享内容文字
  184. miniProgram: {
  185. id: getApp().globalData.miniprogamId,
  186. path: this.shareItem.path,
  187. type: 0, //0-正式版; 1-测试版; 2-体验版。 默认值为0。
  188. webUrl: "http://uniapp.dcloud.io"
  189. },
  190. success: function(res) {
  191. that.doShare();
  192. uni.showToast({
  193. title: "分享成功",
  194. icon: 'none'
  195. });
  196. },
  197. fail: function(err) {
  198. // 此处是调起微信分享失败的回调
  199. },
  200. complete: (e) => {
  201. console.log("WXSceneSession", e)
  202. }
  203. });
  204. },
  205. doShare() {
  206. if (!this.shareItem.isMini) {
  207. if (this.shareItem.courseId > 0) {
  208. this.shareCourse();
  209. }
  210. }
  211. if (this.shareItem.videoId > 0) {
  212. this.shareVideo();
  213. } else if (this.shareItem.healthId > 0) {
  214. this.shareHealth();
  215. }
  216. },
  217. shareCourse() {
  218. shareCourse(this.shareItem.courseId).then(res => {
  219. },
  220. rej => {}
  221. );
  222. },
  223. shareVideo() {
  224. shareVideo({
  225. videoId: this.shareItem.videoId
  226. })
  227. },
  228. shareHealth() {
  229. shareHealth({
  230. logType: 3
  231. })
  232. },
  233. copyUrl() {
  234. uni.setClipboardData({
  235. data: this.shareItem.url,
  236. success: () => {
  237. uni.showToast({
  238. title: '复制成功',
  239. icon: 'none'
  240. });
  241. },
  242. fail: () => {
  243. uni.showToast({
  244. title: '复制失败',
  245. icon: 'none'
  246. });
  247. }
  248. });
  249. },
  250. closeShare() {
  251. return this.$emit('closeShare');
  252. },
  253. qwShare() {
  254. if (this.$isEmpty(this.shareItem.title)) {
  255. uni.showToast({
  256. title: "数据未加载",
  257. icon: "none",
  258. position: 'top',
  259. duration: 2000
  260. })
  261. return;
  262. }
  263. // #ifdef APP-PLUS
  264. if (!plus.runtime.isAgreePrivacy()) {
  265. uni.showToast({
  266. title: "请同意隐私政策",
  267. icon: "none",
  268. position: 'top',
  269. duration: 2000
  270. })
  271. return;
  272. }
  273. // #endif
  274. this.getQwCompanyList()
  275. },
  276. getQwCompanyList() {
  277. let token = uni.getStorageSync('CompanyUserToken');
  278. if (!token) {
  279. uni.showToast({
  280. title: "请先登录销售账号",
  281. icon: 'none'
  282. });
  283. return
  284. }
  285. uni.showLoading()
  286. getQwCompanyList().then(res => {
  287. uni.hideLoading()
  288. if (res.code == 200 && res.qwCompanyList && res.qwCompanyList.length > 0) {
  289. this.companyList = res.qwCompanyList
  290. if (this.companyList.length == 1) {
  291. this.initregisterQW(0)
  292. } else {
  293. uni.showActionSheet({
  294. itemList: this.companyList.map(item => item.corpName),
  295. success: (res) => {
  296. console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  297. this.initregisterQW(res.tapIndex)
  298. },
  299. fail: (res) => {
  300. console.log(res.errMsg);
  301. }
  302. });
  303. }
  304. } else {
  305. uni.showToast({
  306. title: "暂无可分享企业微信账号",
  307. icon: 'none'
  308. });
  309. }
  310. }).catch(() => {
  311. uni.hideLoading()
  312. })
  313. },
  314. // 初始化注册到企业微信并分享
  315. initregisterQW(index) {
  316. getApp().globalData.shareSchema = this.companyList[index].yjfyySchema; //应用跳转标识,显示在具体应用下的 Schema字段
  317. getApp().globalData.shareCorpId = this.companyList[index].corpId; //企业唯一标识。创建企业后显示在,我的企业 CorpID字段
  318. getApp().globalData.shareAgentid = this.companyList[index].yjfyyAgentId; //应用
  319. getApp().globalData.shareAppid_gh = this.companyList[index].yjfyyAppId;
  320. registerQW((installed) => {
  321. this.doShare();
  322. this.$emit('closeShare')
  323. }, this.shareItem)
  324. },
  325. }
  326. }
  327. </script>
  328. <style lang="scss" scoped>
  329. .share-content {
  330. background-color: #FFF;
  331. border-radius: 40upx 40upx 0px 0px;
  332. .share-inner {
  333. padding: 70upx 0 0 0;
  334. display: flex;
  335. flex-wrap: wrap;
  336. .share-item {
  337. width: 25%;
  338. display: flex;
  339. flex-direction: column;
  340. align-items: center;
  341. justify-content: center;
  342. margin-bottom: 66upx;
  343. image {
  344. width: 80upx;
  345. height: 80upx;
  346. margin-bottom: 20upx;
  347. }
  348. .text {
  349. font-size: 28upx;
  350. font-family: PingFang SC;
  351. font-weight: 500;
  352. color: #111111;
  353. line-height: 1;
  354. }
  355. }
  356. }
  357. .cancel-btn {
  358. height: 96upx;
  359. line-height: 96upx;
  360. text-align: center;
  361. font-size: 32upx;
  362. font-family: PingFang SC;
  363. font-weight: 500;
  364. color: #111111;
  365. border-top: 2upx solid #E8E8E8;
  366. background-color: #FFF;
  367. }
  368. }
  369. </style>