plDetail.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. <template>
  2. <view class="content">
  3. <view class="top"><image :src="info.main_pic || ''" mode="widthFix"></image></view>
  4. <view class="title">{{ info.title || '' }}</view>
  5. <view class="tip">{{ info.comment || '' }}</view>
  6. <view class="main" v-for="(ls, index) in info.pics" :key="index"><image :src="ls" mode="widthFix"></image></view>
  7. <view class="navbar flex">
  8. <view class="navbar-item" @click.stop="shareLink()">
  9. <view class="navbar-icon"><image src="../../static/icon/sharejt.png" mode=""></image></view>
  10. <view class="navbar-font">分享</view>
  11. </view>
  12. <view class="xian"></view>
  13. <view class="navbar-item" @click.stop="wzdz()">
  14. <view class="navbar-icon" v-if="info.user_good == 1"><image src="../../static/icon/zanguo.png" mode=""></image></view>
  15. <view class="navbar-icon" v-else><image src="../../static/icon/zan.png" mode=""></image></view>
  16. <view class="navbar-font">{{ info.goods_count }}</view>
  17. </view>
  18. </view>
  19. <view v-if="shareShow" class="Shraremask" @click="cancel">
  20. <view class="mask-content">
  21. <scroll-view class="view-content" scroll-y>
  22. <view class="share-header">分享到</view>
  23. <view class="share-list">
  24. <view class="share-item">
  25. <button class="wechat-box" open-type="share">
  26. <image class="itemImage" src="../../static/icon/share1.png" mode=""></image>
  27. <text class="itemText">微信好友</text>
  28. </button>
  29. <view class="wechat-box" @click="navTo('/pages/zc/plshare?id=' + id)">
  30. <image class="itemImage" src="../../static/icon/share2.png" mode=""></image>
  31. <text class="itemText">朋友圈</text>
  32. </view>
  33. <view class="wechat-box" @click="copy()">
  34. <image class="itemImage" src="../../static/icon/share3.png" mode=""></image>
  35. <text class="itemText">复制链接</text>
  36. </view>
  37. <view class="wechat-box" @click="shareToFriend()">
  38. <image class="itemImage" src="../../static/icon/share4.png" mode=""></image>
  39. <text class="itemText">生成海报</text>
  40. </view>
  41. </view>
  42. </view>
  43. </scroll-view>
  44. <view class="bottomButtom b-t" @click="cancel">取消</view>
  45. </view>
  46. </view>
  47. <uni-popup ref="popupshare" type="center">
  48. <view class="share-box"><image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image></view>
  49. </uni-popup>
  50. </view>
  51. </template>
  52. <script>
  53. import { reply_detail, reply_good, short_link, reply_poster } from '@/api/activity.js';
  54. import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
  55. export default {
  56. data() {
  57. return { id: '', info: {}, shareShow: false, shareImage: '' };
  58. },
  59. onLoad(option) {
  60. if (option.id) {
  61. this.id = option.id;
  62. }
  63. // #ifdef MP
  64. if (option.scene) {
  65. if (typeof option.scene == 'string') {
  66. // let scene = ('{' + option.scene + "}").replace('qr%26', '').replace(/%3D/g, ':').replace(/%26/g, ',')
  67. // .replace('id', '\"id\"').replace('pid', '\"pid\"');
  68. let scene = ('{' + option.scene + '}')
  69. .replace('qr%26', '')
  70. .replace(/%3D/g, ':')
  71. .replace(/%26/g, ',')
  72. .replace('id', '"id"')
  73. .replace('pid', '"pid"')
  74. .replace(/=/g, ':')
  75. .replace(/&/g, ',');
  76. console.log(scene, 'scene');
  77. let opt = JSON.parse(scene);
  78. console.log(opt);
  79. // 保存拼团订单id
  80. this.id = opt.id;
  81. if (opt.pid) {
  82. // 存储邀请人
  83. this.spread = opt.pid;
  84. uni.setStorageSync('spread', opt.pid);
  85. }
  86. }
  87. }
  88. // #endif
  89. },
  90. onShow() {
  91. this.loadData();
  92. },
  93. onReachBottom() {},
  94. onReady() {},
  95. // #ifdef MP
  96. onShareAppMessage: function(res) {
  97. console.log(this.share);
  98. if (res.from === 'button') {
  99. // 来自页面内分享按钮
  100. let pages = getCurrentPages();
  101. // 获取当前页面
  102. let page = pages[pages.length - 1];
  103. let path = '/' + page.route + '?';
  104. // 保存传值
  105. for (let i in page.options) {
  106. path += i + '=' + page.options[i] + '&';
  107. }
  108. // 保存邀请人
  109. let data = {
  110. path: path,
  111. imageUrl: this.info.share_images[0],
  112. title: this.info.title
  113. };
  114. console.log('data', data);
  115. return data;
  116. }
  117. },
  118. // #endif
  119. methods: {
  120. loadData() {
  121. reply_detail({}, this.id).then(({ data }) => {
  122. this.info = data;
  123. });
  124. },
  125. // 文章点赞
  126. wzdz() {
  127. reply_good({}, this.id).then(e => {
  128. if (this.info.user_good == 0) {
  129. this.info.user_good = 1;
  130. this.info.goods_count += 1;
  131. } else {
  132. this.info.user_good = 0;
  133. this.info.goods_count -= 1;
  134. }
  135. });
  136. },
  137. navTo(url) {
  138. uni.navigateTo({
  139. url
  140. });
  141. },
  142. shareLink(item) {
  143. console.log('dainjideniang');
  144. this.shareShow = true;
  145. },
  146. shareToFriend() {
  147. let obj = this;
  148. uni.showLoading({
  149. title: 'Loading...',
  150. mask: true
  151. });
  152. reply_poster({}, this.id)
  153. .then(({ data }) => {
  154. obj.shareImage = data.url;
  155. console.log(obj.shareImage, '123456');
  156. uni.hideLoading();
  157. this.$refs.popupshare.open();
  158. })
  159. .catch(e => {
  160. uni.hideLoading();
  161. });
  162. },
  163. copy() {
  164. short_link({ url: 'pages/zc/plDetail?id=' + this.id }).then(({ data }) => {
  165. console.log(data);
  166. this.comfirm(data.link);
  167. });
  168. },
  169. comfirm(text) {
  170. console.log(text);
  171. const result = uniCopy(text);
  172. if (result === false) {
  173. uni.showToast({
  174. title: '不支持'
  175. });
  176. } else {
  177. uni.showToast({
  178. title: '复制成功',
  179. icon: 'none'
  180. });
  181. }
  182. },
  183. //取消分享
  184. cancel() {
  185. this.shareShow = false;
  186. },
  187. saveImg(w) {
  188. console.log(w);
  189. let obj = this;
  190. uni.downloadFile({
  191. //下载图片
  192. url: obj.shareImage,
  193. success: res => {
  194. console.log(res.tempFilePath);
  195. uni.saveImageToPhotosAlbum({
  196. //将图片保存在手机
  197. filePath: res.tempFilePath, //保存的位置
  198. success: res => {
  199. uni.showToast({
  200. title: '保存成功',
  201. icon: 'none'
  202. });
  203. }
  204. });
  205. }
  206. });
  207. },
  208. // 富文本视频解析
  209. getVideo(data) {
  210. let videoList = [];
  211. let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
  212. let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
  213. let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
  214. let articleList = data.split('</video>'); // 把字符串 从视频标签分成数组
  215. arr.forEach((item, index) => {
  216. var src = item.match(srcReg);
  217. videoList.push(src[1]); //所要显示的字符串中 所有的video 标签 的路径
  218. });
  219. let needArticleList = [];
  220. articleList.forEach((item, index) => {
  221. if (item != '' && item != undefined) {
  222. // 常见的标签渲染
  223. needArticleList.push({
  224. type: 'rich-text',
  225. value: item + '</video>'
  226. });
  227. }
  228. let articleListLength = articleList.length; // 插入到原有video 标签位置
  229. if (index < articleListLength && videoList[index] != undefined) {
  230. needArticleList.push({
  231. type: 'video',
  232. value: videoList[index]
  233. });
  234. }
  235. });
  236. return needArticleList;
  237. }
  238. }
  239. };
  240. </script>
  241. <style lang="scss">
  242. page,
  243. .content {
  244. min-height: 100%;
  245. height: auto;
  246. }
  247. .top {
  248. width: 750rpx;
  249. image {
  250. width: 100%;
  251. }
  252. }
  253. .title {
  254. margin-top: 20rpx;
  255. text-align: center;
  256. font-size: 32rpx;
  257. font-family: PingFang SC;
  258. font-weight: 800;
  259. color: #303030;
  260. }
  261. .tip {
  262. margin-top: 20rpx;
  263. padding: 0 10rpx;
  264. font-size: 24rpx;
  265. font-family: PingFang SC;
  266. font-weight: 500;
  267. color: #969696;
  268. }
  269. .main {
  270. margin-top: 60rpx;
  271. image {
  272. width: 750rpx;
  273. }
  274. }
  275. .navbar {
  276. background: #ffffff;
  277. position: fixed;
  278. bottom: 0;
  279. left: 0;
  280. right: 0;
  281. width: 750rpx;
  282. padding: 50rpx 0;
  283. .xian {
  284. width: 2px;
  285. background: #999999;
  286. height: 36rpx;
  287. }
  288. .navbar-item {
  289. width: 50%;
  290. display: flex;
  291. justify-content: center;
  292. align-items: center;
  293. .navbar-icon {
  294. width: 36rpx;
  295. height: 36rpx;
  296. image {
  297. width: 100%;
  298. height: 100%;
  299. }
  300. }
  301. .navbar-font {
  302. margin-left: 17rpx;
  303. font-size: 22rpx;
  304. font-family: PingFang SC;
  305. font-weight: 500;
  306. color: #333333;
  307. }
  308. }
  309. }
  310. .Shraremask {
  311. position: fixed;
  312. left: 0;
  313. top: 0;
  314. right: 0;
  315. bottom: 0;
  316. display: flex;
  317. justify-content: center;
  318. align-items: flex-end;
  319. z-index: 998;
  320. transition: 0.3s;
  321. background-color: rgba(51, 51, 51, 0.6);
  322. .bottomButtom {
  323. position: absolute;
  324. left: 0;
  325. bottom: 0;
  326. display: flex;
  327. justify-content: center;
  328. align-items: center;
  329. width: 100%;
  330. height: 90rpx;
  331. background: #fff;
  332. z-index: 9;
  333. font-size: $font-base + 2rpx;
  334. color: $font-color-dark;
  335. }
  336. }
  337. .mask-content {
  338. margin-bottom: 88rpx;
  339. width: 100%;
  340. height: 380rpx;
  341. transition: 0.3s;
  342. background: #fff;
  343. &.has-bottom {
  344. padding-bottom: 90rpx;
  345. }
  346. .view-content {
  347. height: 100%;
  348. }
  349. }
  350. .share-header {
  351. height: 110rpx;
  352. font-size: $font-base + 2rpx;
  353. color: font-color-dark;
  354. display: flex;
  355. align-items: center;
  356. justify-content: center;
  357. padding-top: 10rpx;
  358. &:before,
  359. &:after {
  360. content: '';
  361. width: 240rpx;
  362. height: 0;
  363. border-top: 1px solid $border-color-base;
  364. transform: scaleY(0.5);
  365. margin-right: 30rpx;
  366. }
  367. &:after {
  368. margin-left: 30rpx;
  369. margin-right: 0;
  370. }
  371. }
  372. .share-list {
  373. display: flex;
  374. width: 80%;
  375. margin: 0rpx auto;
  376. }
  377. .share-item {
  378. min-width: 33.33%;
  379. display: flex;
  380. justify-content: center;
  381. align-items: center;
  382. height: 180rpx;
  383. width: 100%;
  384. .wechat-box {
  385. width: 50%;
  386. height: 100%;
  387. background: #ffffff;
  388. border: 0;
  389. display: flex;
  390. align-items: center;
  391. flex-direction: column;
  392. &::after {
  393. border: 0;
  394. }
  395. .itemImage {
  396. width: 80rpx;
  397. height: 80rpx;
  398. margin-bottom: 16rpx;
  399. }
  400. .itemText {
  401. font-size: $font-base;
  402. color: $font-color-base;
  403. line-height: 2;
  404. }
  405. }
  406. }
  407. .share-box {
  408. width: 600rpx;
  409. height: 1000rpx;
  410. background: red;
  411. .box-img {
  412. width: 600rpx;
  413. height: 1000rpx;
  414. }
  415. }
  416. </style>