home.vue 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025
  1. <template>
  2. <view class="container_main ">
  3. <!-- 不设置遮盖层的时候 -->
  4. <!-- 这是引导页mid_state 中转状态1使用2不使用 -->
  5. <!-- pay_company==1微信2支付宝3其他" -->
  6. <!-- 收款码 -->
  7. <block v-if="info.pay_company!=4">
  8. <block v-if="info.type==1">
  9. <block v-for="(item,index) of info.urls" :key='index'>
  10. <!-- pay_company==3聚合码 -->
  11. <block v-if="item.pay_company==3">
  12. <block v-if='info.mid_state==1'>
  13. <!-- 引导页的安全认证 -->
  14. <block v-if="info.mid_type==10086">
  15. <image class="container_img" @click="Copy_nav_ali" :data-url="item.url"
  16. src="../../merchant/static/images/web_ua.png"
  17. mode="aspectFill">
  18. </image>
  19. </block>
  20. <!-- 其他的引导页 -->
  21. <block v-else>
  22. <image :src="URL+info.mid_img" class="container_img" @click="Copy_nav_ali" :data-url="item.url" mode="aspectFill"></image>
  23. </block>
  24. </block>
  25. <block v-else>
  26. <block v-if="isclose">
  27. <view v-if="info.hj_state==2" class="model" @click="juhecode" :data-url="item.url"></view>
  28. <view class="model_s flex-center" v-else @click="juhecode" :data-url="item.url">
  29. <view class="">
  30. <view class="wave ripple danger">
  31. <view class="circle"></view>
  32. <view class="circle"></view>
  33. <view class="circle"></view>
  34. <view class="circle"></view>
  35. <view class="circle"></view>
  36. <view class="circle"></view>
  37. <view class="model_s_pa flex-center">
  38. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  39. </view>
  40. </view>
  41. <view class="model_s_text">
  42. 点击进入
  43. </view>
  44. </view>
  45. </view>
  46. </block>
  47. <web-view :src="item.url"></web-view>
  48. <!-- <iframe class="iFrame" id="iFrame"></iframe> -->
  49. </block>
  50. </block>
  51. <block v-else>
  52. <!-- mid_state==1配置引导页 -->
  53. <block v-if='info.mid_state==1'>
  54. <!-- 引导页的安全认证 -->
  55. <block v-if="info.mid_type==10086">
  56. <image v-if="is_ua=='WeiXIN'&&item.pay_company==1" class="container_img"
  57. @click="Copy_nav"
  58. :data-url="item.url"
  59. src="../../merchant/static/images/wx_ua.png" mode="aspectFill">
  60. </image>
  61. <image v-if="is_ua=='Alipay'&&item.pay_company==2" class="container_img" @click="Copy_nav_ali" :data-url="item.url"
  62. src="../../merchant/static/images/ali_ua.png" mode="aspectFill">
  63. </image>
  64. </block>
  65. <!-- 其他的引导页 -->
  66. <block v-else>
  67. <image v-if="is_ua=='WeiXIN'&&item.pay_company==1" :src="URL+info.mid_img" class="container_img" @click="Copy_nav"
  68. :data-url="item.url" mode="aspectFill"></image>
  69. <image v-if="item.pay_company==5" :src="URL+info.mid_img" class="container_img"
  70. @click="Copy_nav_ali" :data-url="item.url"
  71. mode="aspectFill"></image>
  72. <image v-if="is_ua=='false'&&item.pay_company==1" :src="URL+info.mid_img" class="container_img" @click="Copy_nav"
  73. :data-url="item.url" mode="aspectFill"></image>
  74. <image v-if="is_ua=='Alipay'&&item.pay_company==2" :src="URL+info.mid_img" class="container_img" @click="Copy_nav_ali"
  75. :data-url="item.url" mode="aspectFill"></image>
  76. </block>
  77. </block>
  78. <block v-else>
  79. <block v-if="isclose">
  80. <image v-if="item.pay_company==1" src="../../merchant/static/images/wx_code.png" style="width: 100%;height: 100%;" mode="widthFix"></image>
  81. <image v-if="item.pay_company==2" src="../../merchant/static/images/ali_code.png" style="width: 100%;height: 100%;" mode="widthFix"></image>
  82. <view class="model_s flex-center" v-if="item.pay_company==2" @click="Copy_nav_ali" :data-url="item.url">
  83. <view class="">
  84. <view class="wave ripple danger">
  85. <view class="circle"></view>
  86. <view class="circle"></view>
  87. <view class="circle"></view>
  88. <view class="circle"></view>
  89. <view class="circle"></view>
  90. <view class="circle"></view>
  91. <view class="model_s_pa flex-center">
  92. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  93. </view>
  94. </view>
  95. <view class="model_s_text">
  96. 点击进入
  97. </view>
  98. </view>
  99. </view>
  100. <view class="model_s flex-center" v-if="item.pay_company==1"
  101. @click="Copy_nav" :data-url="item.url">
  102. <view class="">
  103. <view class="wave ripple danger">
  104. <view class="circle"></view>
  105. <view class="circle"></view>
  106. <view class="circle"></view>
  107. <view class="circle"></view>
  108. <view class="circle"></view>
  109. <view class="circle"></view>
  110. <view class="model_s_pa flex-center">
  111. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  112. </view>
  113. </view>
  114. <view class="model_s_text">
  115. 点击进入
  116. </view>
  117. </view>
  118. </view>
  119. </block>
  120. </block>
  121. </block>
  122. </block>
  123. </block>
  124. <block v-else-if="info.type==4">
  125. <block v-if='mid_state==1'>
  126. <block v-if="mid_type==10086">
  127. <!-- 引导页的安全认证 -->
  128. <image v-if="is_ua=='WeiXIN'" class="container_img" @click="Copy_four" src="../../merchant/static/images/wx_ua.png" mode="aspectFill"></image>
  129. <image v-if="is_ua=='Alipay'" class="container_img" @click="Copy_four" src="../../merchant/static/images/ali_ua.png" mode="aspectFill"></image>
  130. <image v-if="is_ua=='false'" class="container_img" @click="Copy_four" src="../../merchant/static/images/web_ua.png" mode="aspectFill"></image>
  131. </block>
  132. <image v-else class="container_img" @click="Copy_four" :src="URL+info.mid_img" mode="aspectFill"></image>
  133. </block>
  134. <block v-else>
  135. <block v-if="info.is_real==2">
  136. <view v-if="hj_state==2" class="model" @click="Copy_four"></view>
  137. <view class="model_s flex-center" v-else @click="Copy_four">
  138. <view class="">
  139. <view class="wave ripple danger">
  140. <view class="circle"></view>
  141. <view class="circle"></view>
  142. <view class="circle"></view>
  143. <view class="circle"></view>
  144. <view class="circle"></view>
  145. <view class="circle"></view>
  146. <view class="model_s_pa flex-center">
  147. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  148. </view>
  149. </view>
  150. <view class="model_s_text">
  151. 点击进入
  152. </view>
  153. </view>
  154. </view>
  155. <web-view :src="url"></web-view>
  156. </block>
  157. <block v-else>
  158. <block v-if="isclose">
  159. <view v-if="hj_state==2" class="model" @click="close"></view>
  160. <view class="model_s flex-center" v-else @click="close">
  161. <view class="">
  162. <view class="wave ripple danger">
  163. <view class="circle"></view>
  164. <view class="circle"></view>
  165. <view class="circle"></view>
  166. <view class="circle"></view>
  167. <view class="circle"></view>
  168. <view class="circle"></view>
  169. <view class="model_s_pa flex-center">
  170. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png"></image>
  171. </view>
  172. </view>
  173. <view class="model_s_text">
  174. 点击进入
  175. </view>
  176. </view>
  177. </view>
  178. </block>
  179. <view class="flex-center" style="width: 100%;height: 100%;">
  180. <image style="width: 100%;" mode="widthFix" class="model_s_sz_original" :src="URL+info.img_file"></image>
  181. </view>
  182. </block>
  183. </block>
  184. </block>
  185. <block v-else>
  186. <block v-if='mid_state==1'>
  187. <block v-if="mid_type==10086">
  188. <!-- 引导页的安全认证 -->
  189. <image v-if="is_ua=='WeiXIN'" class="container_img" @click="Copy" src="../../merchant/static/images/wx_ua.png" mode="aspectFill"></image>
  190. <image v-if="is_ua=='Alipay'" class="container_img" @click="Copy" src="../../merchant/static/images/ali_ua.png" mode="aspectFill"></image>
  191. <image v-if="is_ua=='false'" class="container_img" @click="Copy" src="../../merchant/static/images/web_ua.png" mode="aspectFill"></image>
  192. </block>
  193. <image v-else class="container_img" @click="Copy" :src="URL+info.mid_img" mode="aspectFill"></image>
  194. </block>
  195. <block v-else>
  196. <!-- 公众号==2 -->
  197. <block v-if="info.type==2">
  198. <block v-if="isclose">
  199. <view v-if="hj_state==2" class="model" @click="wxclose"></view>
  200. <block v-else>
  201. <!-- 查看原文 -->
  202. <view v-if="info.hj_type==2" class="model" @click="close">
  203. <view class="model-look">
  204. <view class="">
  205. 查看全文 <image class="look" src="../../static/images/look.png" mode=""></image>
  206. </view>
  207. </view>
  208. </view>
  209. <view v-else class="model_s flex-center" @click="wxclose">
  210. <view>
  211. <view class="wave ripple danger">
  212. <view class="circle"></view>
  213. <view class="circle"></view>
  214. <view class="circle"></view>
  215. <view class="circle"></view>
  216. <view class="circle"></view>
  217. <view class="circle"></view>
  218. <view class="model_s_pa flex-center">
  219. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  220. </view>
  221. </view>
  222. <view class="model_s_text">
  223. 点击进入
  224. </view>
  225. </view>
  226. </view>
  227. </block>
  228. </block>
  229. <block v-if="isios">
  230. <iframe title referrerpolicy="no-referrer" class="iFrame" id="iFrames"></iframe>
  231. </block>
  232. <block v-else>
  233. <iframe title referrerpolicy="no-referrer" class="iFrame" id="iFrames" :scrolling="isclose?'no':'yes'">
  234. </iframe>
  235. </block>
  236. <view class="box-pack-between wx-nav" @click="WxNav">
  237. <view class="">
  238. <!-- 阅读全文 -->
  239. </view>
  240. <view class="flex-center">
  241. <view class="flex-y-center wx-nav-left">
  242. <image src="../../static/images/wx-zan.png" class="wx-zan"></image> 赞
  243. </view>
  244. <view class="flex-y-center">
  245. <image src="../../static/images/wx-look.png" class="wx-zan"></image> 在看
  246. </view>
  247. </view>
  248. </view>
  249. </block>
  250. <!-- 网站==3 -->
  251. <block v-else>
  252. <block v-if="isclose">
  253. <view v-if="hj_state==2" class="model" @click="close"></view>
  254. <block v-else>
  255. <!-- 查看原文 -->
  256. <view v-if="info.hj_type==2" class="model" @click="close">
  257. <view class="model-look">
  258. <view class="">
  259. 查看全文 <image class="look" src="../../static/images/look.png" mode=""></image>
  260. </view>
  261. </view>
  262. </view>
  263. <view v-else class="model_s flex-center" @click="close">
  264. <view class="">
  265. <view class="wave ripple danger">
  266. <view class="circle"></view>
  267. <view class="circle"></view>
  268. <view class="circle"></view>
  269. <view class="circle"></view>
  270. <view class="circle"></view>
  271. <view class="circle"></view>
  272. <view class="model_s_pa flex-center">
  273. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  274. </view>
  275. </view>
  276. <view class="model_s_text">
  277. 点击进入
  278. </view>
  279. </view>
  280. </view>
  281. </block>
  282. </block>
  283. <block v-if="isios">
  284. <iframe title referrerpolicy="origin" :src="url" class="iFrame" id="iFrame"></iframe>
  285. </block>
  286. <block v-else>
  287. <iframe title referrerpolicy="origin" :src="url" class="iFrame" id="iFrame" :scrolling="isclose?'no':'yes'">
  288. </iframe>
  289. </block>
  290. </block>
  291. <!-- 文章==end-->
  292. </block>
  293. </block>
  294. </block>
  295. <canvas canvas-id='myCanvas' class="myCanvas"
  296. :style="'height:'+windowHeight+'px'+';'+'width:'+windowWidth+'px'">
  297. </canvas>
  298. </view>
  299. </template>
  300. <script>
  301. // import Clipboard from 'clipboard';
  302. // #ifdef H5
  303. import getWXSign from "@/static/js/config.js";
  304. // #endif
  305. export default {
  306. data() {
  307. return {
  308. list: [],
  309. total: 0,
  310. page: 1,
  311. url: "",
  312. content: "",
  313. iscopy: true,
  314. info: {},
  315. URL: getApp().globalData.URL,
  316. windowWidth: uni.getSystemInfoSync().windowWidth,
  317. isclose: true,
  318. istrue: true,
  319. mid_state: 1,
  320. is_ua: "",
  321. mid_type: "",
  322. hj_state: "",
  323. is_real: "",
  324. isios: false,
  325. pixelRatio:uni.getSystemInfoSync().pixelRatio,
  326. windowHeight:uni.getSystemInfoSync().windowHeight,
  327. paycode_img: "",
  328. showBgImagePath2: '../../static/images/wx_bg.png',
  329. showBgImagePath1: '../../static/images/pay_wx.png',
  330. URL: getApp().globalData.URL,
  331. imagePath: "",
  332. tempFilePath: ""
  333. }
  334. },
  335. onLoad(e) {
  336. const oMeta = document.createElement('meta');
  337. oMeta.name = "referrer";
  338. oMeta.content = "never";
  339. document.getElementsByTagName('head')[0].appendChild(oMeta);
  340. if (/iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  341. this.isios = true;
  342. }
  343. function getUrlParam(paraName) {
  344. let url = window.location.href;
  345. var arrObj = url.split("?");
  346. if (arrObj.length > 1) {
  347. var arr;
  348. for (var i = 0; i < arrObj.length; i++) {
  349. arr = arrObj[i].split("=");
  350. // console.log(arr)
  351. if (arr != null && arr[0] == paraName) {
  352. return arr[1];
  353. // var strs = arr[1].split("&");
  354. // console.log(strs)
  355. // return strs[0];
  356. }
  357. }
  358. return "";
  359. } else {
  360. return "";
  361. }
  362. }
  363. this.http(getUrlParam('card_num'));
  364. },
  365. onReady(e) {
  366. this.is_ua = IsWeixinOrAlipay();
  367. // console.log(this.is_ua);
  368. // alert(this.is_ua)
  369. function IsWeixinOrAlipay() {
  370. var ua = window.navigator.userAgent.toLowerCase();
  371. //判断是不是微信
  372. if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  373. return "WeiXIN";
  374. }
  375. //判断是不是支付宝
  376. if (ua.match(/AlipayClient/i) == 'alipayclient') {
  377. return "Alipay";
  378. }
  379. //哪个都不是
  380. return "false";
  381. }
  382. },
  383. onReachBottom(e) {
  384. },
  385. methods: {
  386. drawCanvas() {
  387. console.log("eeeeee")
  388. var that = this;
  389. let ctx = uni.createCanvasContext('myCanvas');
  390. // 画布宽高
  391. let ctxW = this.windowWidth;
  392. let ctxH = this.windowHeight;
  393. console.log(ctxW,ctxH,"eeeeee")
  394. ctx.drawImage(this.showBgImagePath2, 0, 0, ctxW, ctxH);
  395. ctx.fillStyle = '#ffffff';
  396. ctx.fillRect(ctxW / 2 - 200 / 2, ctxH / 2 - 120, 200, 240);
  397. ctx.drawImage(this.tempFilePath, ctxW / 2 - 180 / 2, ctxH / 2 - 110, 180, 180);
  398. ctx.font = 'bold 20px Arial';
  399. ctx.textAlign = 'center';
  400. ctx.fillStyle = '#000000';
  401. var texTwidth = ctx.measureText('长按识别付款').width;
  402. ctx.fillText("长按识别付款", ctxW / 2, ctxH / 2 + 100);
  403. ctx.stroke();
  404. // ctx.draw();
  405. // console.log(ctx,this.tempFilePath,ctxW,ctxH,"eeeeee")
  406. ctx.draw(false, () => {
  407. uni.canvasToTempFilePath({
  408. canvasId: 'myCanvas',
  409. success: (res) => {
  410. console.log(res, "myCanvas");
  411. that.imagePath = res.tempFilePath;
  412. this.request({
  413. url: "funeng/addpicturce",
  414. data: {
  415. image: res.tempFilePath,
  416. },
  417. }).then(res => {
  418. console.log(res, "图片")
  419. var img = res.data;
  420. this.$wx.previewImage({
  421. urls: [this.URL + img],
  422. success: (res) => {
  423. // 设置成功
  424. console.log("设置成功", res)
  425. }
  426. })
  427. })
  428. }
  429. })
  430. })
  431. },
  432. http(card_num) {
  433. this.request({
  434. url: "funeng/scan",
  435. data: {
  436. card_num: card_num,
  437. },
  438. }).then(res => {
  439. // console.log(res, "res")
  440. if (res.code == '200') {
  441. var a = document.createElement('a');
  442. if (res.data.url) {
  443. a.href = res.data.url;
  444. if ("boss.passiontec.cn" == a.host) {
  445. const oMeta = document.createElement('meta');
  446. oMeta.name = "viewport";
  447. oMeta.content = "width=720";
  448. document.getElementsByTagName('head')[0].appendChild(oMeta);
  449. }
  450. }
  451. this.info = res.data;
  452. getWXSign(res.data.super_id).then(res => {
  453. console.log("super_id")
  454. })
  455. this.url = res.data.url;
  456. this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  457. this.mid_state = res.data.mid_state;
  458. this.mid_type = res.data.mid_type;
  459. this.hj_state = res.data.hj_state;
  460. var title = "";
  461. if (res.data.mid_state == 1 && res.data.mid_title) {
  462. title = res.data.mid_title;
  463. } else if (res.data.wx_state == 1 && res.data.wx_title) {
  464. title = res.data.wx_title;
  465. } else {
  466. title = "";
  467. }
  468. uni.setNavigationBarTitle({
  469. title: title
  470. });
  471. if (res.data.pay_company == 4) {
  472. for (let i of res.data.urls) {
  473. if (i.pay_company == 4) {
  474. window.location.href = i.url + "?card_num=" + card_num;
  475. }
  476. }
  477. }
  478. if (res.data.type == 2 || res.data.type == 3 || res.data.type == 4) {
  479. // 网站赋能 type=3
  480. if (res.data.type == 3) {
  481. if (res.data.wx_title) {
  482. this.wxShare(res);
  483. } else {
  484. // this.Crawler(res);
  485. }
  486. } else {
  487. this.wxShare(res);
  488. }
  489. if (res.data.type == 2) {
  490. setTimeout(() => {
  491. let html = res.data.url_content;
  492. html = html.replace(/data-src/g, "src")
  493. html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
  494. html = html.replace(/https/g, "http");
  495. let html_src=html;
  496. var pattern = /<meta.*?property="og:url".*?content="(.*?)".*?>/i;
  497. var arr = pattern.exec(html);
  498. let biz = getUrlParam(arr[1])[0];
  499. function getUrlParam(url) {
  500. var arrObj = url.split("?");
  501. if (arrObj.length > 1) {
  502. var arr;
  503. for (var i = 0; i < arrObj.length; i++) {
  504. arr = arrObj[i].split("&");
  505. }
  506. return arr;
  507. }
  508. }
  509. let iframe = document.getElementById('iFrames');
  510. iframe.src = html_src;
  511. var doc = iframe.contentDocument || iframe.document;
  512. doc.write(html_src);
  513. doc.getElementById("js_content").style.visibility = "visible";
  514. doc.getElementById("js_name").addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数
  515. function showMsg() {
  516. window.location.href = `https://mp.weixin.qq.com/mp/profile_ext?action=home&${biz}#wechat_redirect`
  517. }
  518. }, 500)
  519. }
  520. }
  521. }
  522. }).catch((res) => {
  523. this.iscopy = false
  524. uni.showToast({
  525. title: res.message,
  526. icon: 'none'
  527. })
  528. });
  529. },
  530. // 摘取网站信息
  531. Crawler(e) {
  532. this.request({
  533. url: "Exchange/Crawler",
  534. data: {
  535. url: e.data.url,
  536. },
  537. method: "GET",
  538. }).then(res => {
  539. console.log(res, "res")
  540. if (res.code === '200') {
  541. e.data.wx_title = res.data.title;
  542. e.data.wx_desc = res.data.desc;
  543. e.data.wximg_url = res.data.img;
  544. this.wxShare(e);
  545. }
  546. });
  547. },
  548. wxShare(res) {
  549. var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
  550. var super_id= this.info.super_id;
  551. getWXSign(super_id).then(r => {
  552. console.log(r, "imgURL")
  553. if (r) {
  554. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  555. this.$wx.updateAppMessageShareData({
  556. title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
  557. desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
  558. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  559. imgUrl: imgUrl, // 分享图标
  560. success: (res) => {
  561. // 设置成功
  562. console.log("设置成功", res)
  563. }
  564. })
  565. this.$wx.updateTimelineShareData({
  566. title: res.data.wx_title, // 分享标题
  567. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  568. imgUrl: imgUrl, // 分享图标
  569. success: (res) => {
  570. // 设置成功
  571. console.log("设置成功", res)
  572. }
  573. })
  574. } else {
  575. // alert("pc")
  576. this.$wx.onMenuShareTimeline({
  577. title: res.data.wx_title, // 分享标题
  578. desc: res.data.wx_desc, // 分享描述
  579. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  580. imgUrl: imgUrl, // 分享图标
  581. success: (res) => {
  582. // 设置成功
  583. console.log("设置成功", res)
  584. }
  585. })
  586. this.$wx.onMenuShareAppMessage({
  587. title: res.data.wx_title, // 分享标题
  588. desc: res.data.wx_desc, // 分享描述
  589. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  590. imgUrl: imgUrl, // 分享图标
  591. success: (res) => {
  592. // 设置成功
  593. console.log("设置成功", res)
  594. }
  595. })
  596. }
  597. }
  598. })
  599. },
  600. WxNav(e){
  601. window.location.href = this.url;
  602. },
  603. juhecode(e) {
  604. let content = this.content;
  605. this.isclose = false;
  606. if (!document.queryCommandSupported('copy')) {
  607. // 不支持
  608. return false
  609. }
  610. let textarea = document.createElement("textarea")
  611. textarea.value = content
  612. textarea.readOnly = "readOnly"
  613. document.body.appendChild(textarea)
  614. textarea.select() // 选择对象
  615. textarea.setSelectionRange(0, content.length) //核心
  616. let result = document.execCommand("copy") // 执行浏览器复制命令
  617. window.location.href = e.currentTarget.dataset.url;
  618. // this.url;
  619. textarea.remove();
  620. return result
  621. },
  622. // 遮盖层复制
  623. close(e) {
  624. // console.log(e)
  625. let content = this.content;
  626. this.isclose = false;
  627. if (!document.queryCommandSupported('copy')) {
  628. // 不支持
  629. return false
  630. }
  631. let textarea = document.createElement("textarea")
  632. textarea.value = content
  633. textarea.readOnly = "readOnly"
  634. document.body.appendChild(textarea)
  635. textarea.select() // 选择对象
  636. textarea.setSelectionRange(0, content.length) //核心
  637. let result = document.execCommand("copy") // 执行浏览器复制命令
  638. // console.log("gggg", result)
  639. textarea.remove();
  640. return result
  641. },
  642. wxclose(e) {
  643. // console.log(e)
  644. let content = this.content;
  645. this.isclose = false;
  646. if (!document.queryCommandSupported('copy')) {
  647. // 不支持
  648. return false
  649. }
  650. let textarea = document.createElement("textarea")
  651. textarea.value = content
  652. textarea.readOnly = "readOnly"
  653. document.body.appendChild(textarea)
  654. textarea.select() // 选择对象
  655. textarea.setSelectionRange(0, content.length) //核心
  656. let result = document.execCommand("copy") // 执行浏览器复制命令
  657. textarea.remove();
  658. return result
  659. },
  660. // 引导页复制跳转
  661. Copy() {
  662. let content = this.content;
  663. if (!document.queryCommandSupported('copy')) {
  664. // 不支持
  665. return false
  666. }
  667. let textarea = document.createElement("textarea")
  668. textarea.value = content
  669. textarea.readOnly = "readOnly"
  670. document.body.appendChild(textarea)
  671. textarea.select() // 选择对象
  672. textarea.setSelectionRange(0, content.length) //核心
  673. let result = document.execCommand("copy") // 执行浏览器复制命令
  674. textarea.remove();
  675. window.location.href = this.url;
  676. return result
  677. },
  678. Copy_four(e) {
  679. let content = this.content;
  680. if (!document.queryCommandSupported('copy')) {
  681. // 不支持
  682. return false
  683. }
  684. let textarea = document.createElement("textarea")
  685. textarea.value = content
  686. textarea.readOnly = "readOnly"
  687. document.body.appendChild(textarea)
  688. textarea.select() // 选择对象
  689. textarea.setSelectionRange(0, content.length) //核心
  690. let result = document.execCommand("copy") // 执行浏览器复制命令
  691. textarea.remove();
  692. if (this.info.is_real == 1) {
  693. uni.navigateTo({
  694. url: "original?imagePath=" + this.info.img_file,
  695. })
  696. } else {
  697. window.location.href = this.url;
  698. }
  699. return result
  700. },
  701. Copy_nav(e) {
  702. let content = this.content;
  703. if (!document.queryCommandSupported('copy')) {
  704. // 不支持
  705. return false
  706. }
  707. let textarea = document.createElement("textarea")
  708. textarea.value = content
  709. textarea.readOnly = "readOnly"
  710. document.body.appendChild(textarea)
  711. textarea.select() // 选择对象
  712. textarea.setSelectionRange(0, content.length) //核心
  713. let result = document.execCommand("copy") // 执行浏览器复制命令
  714. textarea.remove();
  715. // window.location.href = e.currentTarget.dataset.url;
  716. uni.downloadFile({
  717. url: e.currentTarget.dataset.url, //仅为示例,并非真实的资源
  718. success: (res) => {
  719. if (res.statusCode === 200) {
  720. this.tempFilePath = res.tempFilePath;
  721. this.drawCanvas();
  722. }
  723. }
  724. });
  725. return result
  726. },
  727. Copy_nav_ali(e) {
  728. // alert("Copy_nav_ali")
  729. let content = this.content;
  730. if (!document.queryCommandSupported('copy')) {
  731. // 不支持
  732. return false
  733. }
  734. let textarea = document.createElement("textarea")
  735. textarea.value = content
  736. textarea.readOnly = "readOnly"
  737. document.body.appendChild(textarea)
  738. textarea.select() // 选择对象
  739. textarea.setSelectionRange(0, content.length) //核心
  740. let result = document.execCommand("copy") // 执行浏览器复制命令
  741. textarea.remove();
  742. window.location.href = e.currentTarget.dataset.url;
  743. return result
  744. },
  745. },
  746. }
  747. </script>
  748. <style>
  749. .myCanvas {
  750. position: fixed;
  751. bottom: 999px;
  752. left: 0 ;
  753. }
  754. page {
  755. height: 100%;
  756. width: 100%;
  757. }
  758. .wx-nav{
  759. padding: 20rpx;font-size: 28rpx;
  760. /* border-top: 2rpx solid #ccc; */
  761. }
  762. .wx-nav-left{
  763. margin-right: 30rpx;
  764. }
  765. .wx-zan{
  766. width:30rpx;
  767. height: 30rpx;
  768. margin-right: 15rpx;
  769. }
  770. .container_main {
  771. height: 100%;
  772. width: 100%;
  773. text-align: center;
  774. }
  775. .iFrame {
  776. height: 100%;
  777. width: 100%;
  778. border: none;
  779. }
  780. .container_main .container_img {
  781. height: 100%;
  782. width: 100%;
  783. position: fixed;
  784. z-index: 999;
  785. left: 0;
  786. }
  787. .model {
  788. height: 100%;
  789. width: 100%;
  790. position: fixed;
  791. z-index: 999;
  792. left: 0;
  793. top: 0;
  794. /* background: rgba(0,0,0,0.8); */
  795. }
  796. .model_s {
  797. height: 100%;
  798. width: 100%;
  799. position: fixed;
  800. z-index: 999;
  801. left: 0;
  802. top: 0;
  803. background: rgba(0, 0, 0, 0.5);
  804. }
  805. .model_s_pa {
  806. position: absolute;
  807. width: 300rpx;
  808. height: 300rpx;
  809. }
  810. .model_s_sz {
  811. width: 160rpx;
  812. height: 160rpx;
  813. margin-top: 52rpx;
  814. margin-left: 24rpx;
  815. }
  816. .model_s_text {
  817. font-size: 40rpx;
  818. color: #FFFFFF;
  819. }
  820. .model-look {
  821. background: rgba(255, 255, 255, 0.9);
  822. position: fixed;
  823. bottom: 0px;
  824. width: 100%;
  825. color: #1296db;
  826. padding-top: 30rpx;
  827. border-top: 1rpx solid #f1f1f1;
  828. height: 600rpx;
  829. }
  830. .look {
  831. margin-left: 10rpx;
  832. width: 30rpx;
  833. height: 30rpx;
  834. }
  835. .container_title {
  836. font-size: 48rpx;
  837. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  838. margin-top: 90rpx;
  839. padding: 0 20rpx;
  840. }
  841. .container_desc {
  842. padding: 0 20rpx;
  843. margin-top: 50rpx;
  844. font-size: 38rpx;
  845. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  846. }
  847. .go_btn_pf {
  848. /* position: fixed; */
  849. /* bottom: 40rpx; */
  850. width: 100%;
  851. margin-top: 130rpx;
  852. font-size: 32rpx;
  853. }
  854. .go_btn {
  855. width: 630rpx;
  856. background: rgb(64, 158, 255);
  857. color: #FFFFFF;
  858. }
  859. /************以下为具体实现************/
  860. .wave {
  861. position: relative;
  862. width: 300rpx;
  863. height: 300rpx;
  864. text-align: center;
  865. font-size: 28rpx;
  866. margin: 0 auto;
  867. }
  868. .wave .circle {
  869. position: absolute;
  870. border-radius: 50%;
  871. opacity: 0;
  872. }
  873. /* 波纹效果 */
  874. .wave.ripple .circle {
  875. width: calc(100% - 6px);
  876. /* 减去边框的大小 */
  877. height: calc(100% - 6px);
  878. /* 减去边框的大小 */
  879. border: 3px solid #fff;
  880. }
  881. .wave.ripple .circle:first-child {
  882. animation: circle-opacity 2s infinite;
  883. }
  884. .wave.ripple .circle:nth-child(2) {
  885. animation: circle-opacity 2s infinite;
  886. animation-delay: 0.3s;
  887. }
  888. .wave.ripple .circle:nth-child(3) {
  889. animation: circle-opacity 2s infinite;
  890. animation-delay: 0.6s;
  891. }
  892. .wave.ripple .circle:nth-child(4) {
  893. animation: circle-opacity 2s infinite;
  894. animation-delay: 0.8s;
  895. }
  896. .wave.ripple .circle:nth-child(5) {
  897. animation: circle-opacity 2s infinite;
  898. animation-delay: 1s;
  899. }
  900. .wave.ripple .circle:nth-child(6) {
  901. animation: circle-opacity 2s infinite;
  902. animation-delay: 1.2s;
  903. }
  904. .wave.ripple.danger {
  905. color: #FFFFFF;
  906. }
  907. .wave.ripple.danger .circle {
  908. border-color: #FFFFFF;
  909. }
  910. .wave.ripple.warning {
  911. color: orange;
  912. }
  913. .wave.ripple.warning .circle {
  914. border-color: orange;
  915. }
  916. /* 波动效果 */
  917. /*
  918. .wave.solid .circle {
  919. width: 100%;
  920. height: 100%;
  921. background: #fff;
  922. }
  923. .wave.solid .circle:first-child {
  924. animation: circle-opacity 2s infinite;
  925. }
  926. .wave.solid.danger {
  927. color: red;
  928. }
  929. .wave.solid.danger .circle {
  930. background: red;
  931. }
  932. .wave.solid.warning {
  933. color: orange;
  934. }
  935. .wave.solid.warning .circle {
  936. background: orange;
  937. } */
  938. @keyframes circle-opacity {
  939. from {
  940. opacity: 1;
  941. transform: scale(0);
  942. }
  943. to {
  944. opacity: 0;
  945. transform: scale(1);
  946. }
  947. }
  948. </style>