code.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
  1. <template>
  2. <view class="container">
  3. <view class="header">
  4. <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
  5. <view class="info-block flex-row-between">
  6. <view class="info">
  7. <view class="title" :data-type="type">
  8. {{type==7?'游戏':type==6?'视频':type==1?'收款码':type==2?'公众号':type==4?'二维码':'网站'}}{{$test.$test}}</view>
  9. <view class="desc">{{$test.$desc}}</view>
  10. </view>
  11. <!-- <view class="btn" @click="setup">修改</view> -->
  12. </view>
  13. </view>
  14. <view class="main">
  15. <view class="page-title flex-row-between">
  16. <view class="title">推广详情</view>
  17. </view>
  18. <view class="cell flex-row-start" v-if="info.mid_title">
  19. <view class="name">中转标题</view>
  20. <view class="content">{{info.mid_title}}</view>
  21. </view>
  22. <view class="cell flex-row-start" v-if="info.card_num">
  23. <view class="name">二维码ID</view>
  24. <view class="content">{{info.card_num}}</view>
  25. </view>
  26. <view class="cell flex-row-start" v-if="info.url">
  27. <view class="name">访问地址</view>
  28. <view class="content ">{{info.url}}
  29. <!-- <text @click="copy" style="color:#00BFFF;margin-left: 20rpx;">复制</text> -->
  30. </view>
  31. </view>
  32. <view class="cell flex-row-start" v-if="info.moshi">
  33. <view class="name">模式</view>
  34. <view class="content">{{info.moshi==1?'普通模式':'高级模式'}}<block v-if="info.moshi==2">-{{info.moshi_type==2?'时间方式':'轮询方式'}} </block> </view>
  35. </view>
  36. <view class="cell flex-row-start" v-if="info.qrurl">
  37. <view class="name">分享链接</view>
  38. <view class="content">{{info.qrurl}} <text @click="copy" style="color:#00BFFF;margin-left: 20rpx;">复制</text></view>
  39. </view>
  40. <view class="cell flex-row-start">
  41. <view class="name">{{$test.$test}}次数</view>
  42. <view class="content">{{info.scan_num}}次</view>
  43. </view>
  44. <block v-if="info.type!=7">
  45. <view class="cell flex-row-start">
  46. <view class="name">换量联盟</view>
  47. <view class="content" style="color:#000;">{{info.is_exchange=='Y'?'已加入':'未加入'}}</view>
  48. </view>
  49. <view class="cell flex-row-start">
  50. <view class="name">换量效益</view>
  51. <view class="content">{{info.exchange_num}}次
  52. | <text style="color:#000;margin-left: 20rpx;" @click="detail(2)">查看明细</text>
  53. </view>
  54. </view>
  55. </block>
  56. <view v-if="info.type==7" class="cell flex-row-start">
  57. <view class="name">游戏名称</view>
  58. <view class="content">{{info.game==1?'大转盘':'砸金蛋'}}
  59. </view>
  60. </view>
  61. <view class="cell flex-row-start">
  62. <view class="name">生成时间</view>
  63. <view class="content">{{info.create_time}}</view>
  64. </view>
  65. <view class="cell flex-row-start" v-if="info.description">
  66. <view class="name">{{$test.$test}}备注</view>
  67. <view class="content">{{info.description}}</view>
  68. </view>
  69. <image :src="info.qrcode" mode="aspectFit" class="code-img"></image>
  70. </view>
  71. <view class="btm-btn-block">
  72. <view class="content flex-row-between">
  73. <!-- #ifdef H5 -->
  74. <block v-if="type==1">
  75. <view class="btn btn22" @click="upCode">下载二维码</view>
  76. <view class="btn btn11" @click="setup" data-index="index">修改</view>
  77. </block>
  78. <block v-else>
  79. <view class="btn btn22" style="background: #07c160;color: #FFFFFF;" @click="Wechat">分享好友/朋友圈</view>
  80. <view class="btn btn11" @click="setup" data-index="index">修改</view>
  81. </block>
  82. <!-- #endif -->
  83. <!-- #ifdef MP-WEIXIN -->
  84. <block>
  85. <view class="btn btn22" @click="upCode">下载二维码</view>
  86. <view class="btn btn11" @click="setup" data-index="index">修改</view>
  87. </block>
  88. <!-- #endif -->
  89. </view>
  90. </view>
  91. <view class="model" @click="close" v-if="isdown">
  92. <view class="model-home">
  93. <image class="model-img" src="/static/images/jt.png" />
  94. <view>1.请点击右上角
  95. <block>选择分享好友或者朋友圈</block>
  96. </view>
  97. </view>
  98. <view class="model-close">
  99. 2.点击关闭遮盖层
  100. </view>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. // #ifdef H5
  106. import getWXSign from "@/static/js/config.js";
  107. // #endif
  108. // #ifdef MP-WEIXIN
  109. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  110. // #endif
  111. export default {
  112. data() {
  113. return {
  114. $test: this.$test.$test,
  115. useing: false,
  116. info: {
  117. code: "",
  118. url: "",
  119. qrurl: "",
  120. qrurl: "",
  121. scan_num: "",
  122. create_time: "",
  123. description: "",
  124. },
  125. type: 1,
  126. isdown: false,
  127. wx_content: {},
  128. }
  129. },
  130. onLoad(e) {
  131. console.log(e, "e")
  132. uni.setNavigationBarTitle({
  133. title: `${this.$test.$test}详情`
  134. })
  135. this.card_num = e.card_num;
  136. this.type = Number(e.type);
  137. },
  138. onShow() {
  139. this.funeng_detail();
  140. // this.scan();
  141. },
  142. methods: {
  143. share(e) {
  144. var ua = navigator.userAgent.toLowerCase();
  145. if (ua.match(/MicroMessenger/i) == "micromessenger") {
  146. getWXSign().then(res => {
  147. // console.log("dddddddddd")
  148. var imgUrl = this.wx_content.wximg_url ? this.wx_content.wximg_url : getApp().globalData.URL + this.wx_content.wx_img;
  149. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  150. this.$wx.updateAppMessageShareData({
  151. title: this.wx_content.wx_title, // 分享标题
  152. desc: this.wx_content.wx_desc, // 分享描述
  153. link: this.info.qrurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  154. imgUrl: imgUrl, // 分享图标
  155. success: (res) => {
  156. // 设置成功
  157. console.log("设置成功", res)
  158. }
  159. })
  160. this.$wx.updateTimelineShareData({
  161. title: this.wx_content.wx_title, // 分享标题
  162. link: this.info.qrurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  163. imgUrl: imgUrl, // 分享图标
  164. success: (res) => {
  165. // 设置成功
  166. console.log("设置成功", res)
  167. }
  168. })
  169. } else {
  170. this.$wx.onMenuShareTimeline({
  171. title: this.wx_content.wx_title, // 分享标题
  172. desc: this.wx_content.wx_desc, // 分享描述
  173. link: this.info.qrurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  174. imgUrl: imgUrl, // 分享图标
  175. success: function() {
  176. // 用户点击了分享后执行的回调函数
  177. }
  178. })
  179. this.$wx.onMenuShareAppMessage({
  180. title: this.wx_content.wx_title, // 分享标题
  181. desc: this.wx_content.wx_desc, // 分享描述
  182. link: this.info.qrurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  183. imgUrl: imgUrl, // 分享图标
  184. success: function() {
  185. // 用户点击了分享后执行的回调函数
  186. }
  187. })
  188. }
  189. })
  190. }
  191. },
  192. close() {
  193. this.isdown = false;
  194. },
  195. Wechat(e) {
  196. this.isdown = true;
  197. },
  198. setup(e) {
  199. console.log("eeee", this.type)
  200. var type = this.type;
  201. let url = type == 7 ? '/pages/index/games' : type == 6 ? '/pages/index/video' : type == 1 ? '/pages/index/enable' : type == 2 ? '/pages/index/public' :
  202. type == 4 ?
  203. '/pages/index/standard' : '/pages/index/article'
  204. uni.navigateTo({
  205. url: url + '?card_num=' + this.card_num,
  206. })
  207. },
  208. back(e) {
  209. uni.reLaunch({
  210. url: "/pages/index/index"
  211. })
  212. },
  213. upCode(e) {
  214. // #ifdef H5
  215. uni.showModal({
  216. title: '提示',
  217. content: '请长按二维码图片进行保存',
  218. showCancel: false,
  219. confirmText: '好的',
  220. });
  221. // #endif
  222. // #ifdef MP-WEIXIN
  223. var url = this.info.qrcode;
  224. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  225. //成功的逻辑
  226. console.log(res, "保存成功")
  227. wx.showToast({
  228. title: '保存成功',
  229. icon: 'none',
  230. mask: true,
  231. })
  232. }).catch((err) => {
  233. console.log(err, "保存失败")
  234. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg ===
  235. "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  236. "saveImageToPhotosAlbum:fail authorize no response") {
  237. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  238. uni.showModal({
  239. title: '提示',
  240. content: '需要您授权保存相册',
  241. showCancel: false,
  242. success: modalSuccess => {
  243. uni.openSetting({
  244. success(settingdata) {
  245. console.log("settingdata", settingdata)
  246. if (settingdata.authSetting['scope.writePhotosAlbum']) {
  247. uni.showModal({
  248. title: '提示',
  249. content: '获取权限成功,再次点击图片即可保存',
  250. showCancel: false,
  251. })
  252. } else {
  253. uni.showModal({
  254. title: '提示',
  255. content: '获取权限失败,将无法保存到相册哦~',
  256. showCancel: false,
  257. })
  258. }
  259. },
  260. fail(failData) {
  261. console.log("failData", failData)
  262. },
  263. complete(finishData) {
  264. console.log("finishData", finishData)
  265. }
  266. })
  267. }
  268. })
  269. }
  270. // 失败后的逻辑
  271. })
  272. return
  273. uni.downloadFile({
  274. url: this.info.qrcode, //仅为示例,并非真实的资源
  275. success: (res) => {
  276. if (res.statusCode === 200) {
  277. console.log('下载成功', res.tempFilePath);
  278. uni.saveImageToPhotosAlbum({
  279. filePath: res.tempFilePath,
  280. success: (res) => {
  281. console.log('save success');
  282. uni.showModal({
  283. title: '提示',
  284. content: '保存成功',
  285. showCancel: false,
  286. confirmText: '好的',
  287. });
  288. }
  289. });
  290. }
  291. }
  292. });
  293. // #endif
  294. },
  295. funeng_detail() {
  296. // var url = this.type == 6 ? "videofuneng/funeng_detailnew" : "funeng/funeng_detailnew";
  297. var url = "funeng/funeng_detailnew";
  298. this.request({
  299. url: url,
  300. data: {
  301. card_num: this.card_num,
  302. token: uni.getStorageSync("token"),
  303. },
  304. }).then(res => {
  305. console.log(res, "res")
  306. if (res.code === '200') {
  307. this.info = res.data;
  308. if (res.data.type==3&&!res.data.wx_title) {
  309. // #ifdef H5
  310. this.Crawler(res.data.url);
  311. // #endif
  312. } else {
  313. this.wx_content = res.data;
  314. // #ifdef H5
  315. this.share();
  316. // #endif
  317. }
  318. }
  319. }).catch((res) => {
  320. // this.iscopy=false
  321. uni.showToast({
  322. title: res.message,
  323. icon: 'none'
  324. })
  325. });
  326. },
  327. Crawler(url){
  328. this.request({
  329. url:"Exchange/Crawler",
  330. data: {
  331. url: url,
  332. token: uni.getStorageSync("token"),
  333. },
  334. method:"GET",
  335. }).then(res => {
  336. console.log(res, "res")
  337. if (res.code === '200') {
  338. var wx_content = {
  339. wx_title: res.data.title,
  340. wx_desc: res.data.desc,
  341. wximg_url: res.data.img,
  342. }
  343. this.wx_content = wx_content;
  344. // #ifdef H5
  345. this.share();
  346. // #endif
  347. }
  348. });
  349. },
  350. detail(e) {
  351. uni.navigateTo({
  352. url: "../createRecordsDetail/createRecordsDetail?card_num=" + this.info.card_num
  353. })
  354. },
  355. copy(e) {
  356. // #ifdef MP-WEIXIN
  357. uni.setClipboardData({
  358. data: this.info.qrurl,
  359. success: function() {
  360. console.log('success');
  361. }
  362. });
  363. // #endif
  364. // #ifdef H5
  365. let content = this.info.qrurl;
  366. if (!document.queryCommandSupported('copy')) {
  367. // 不支持
  368. return false
  369. }
  370. let textarea = document.createElement("input")
  371. textarea.value = content
  372. textarea.readOnly = "readOnly"
  373. document.body.appendChild(textarea)
  374. textarea.select() // 选择对象
  375. textarea.setSelectionRange(0, content.length) //核心
  376. let result = document.execCommand("copy") // 执行浏览器复制命令
  377. textarea.remove();
  378. uni.showToast({
  379. title: "复制成功",
  380. icon: 'none'
  381. })
  382. return result
  383. // #endif
  384. },
  385. onChangeType(e) {
  386. console.log(e)
  387. this.request({
  388. url: "funeng/save_state",
  389. data: {
  390. code: this.info.code,
  391. state: e.detail.value ? 1 : 2
  392. },
  393. }).then(res => {
  394. console.log(res, "res")
  395. if (res.code === '200') {
  396. }
  397. });
  398. }
  399. }
  400. }
  401. </script>
  402. <style>
  403. .header {
  404. width: 100%;
  405. height: 198rpx;
  406. position: relative;
  407. }
  408. .header .bg-img {
  409. display: block;
  410. position: absolute;
  411. left: 0;
  412. top: 0;
  413. z-index: -1;
  414. width: 100%;
  415. height: 198rpx;
  416. }
  417. .header .info-block {
  418. padding: 0 40rpx 0 48rpx;
  419. height: 198rpx;
  420. }
  421. .header .info-block .title {
  422. font-size: 36rpx;
  423. color: #fff;
  424. font-weight: 500;
  425. line-height: 50rpx;
  426. }
  427. .header .info-block .desc {
  428. font-size: 28rpx;
  429. font-weight: 500;
  430. color: #fff;
  431. line-height: 40rpx;
  432. margin-top: 8rpx;
  433. }
  434. .header .info-block .btn {
  435. width: 120rpx;
  436. height: 56rpx;
  437. border: 2rpx solid #fff;
  438. border-radius: 28rpx;
  439. background-color: rgba(255, 255, 255, 0.2);
  440. text-align: center;
  441. line-height: 52rpx;
  442. font-size: 28rpx;
  443. font-weight: 500;
  444. color: #fff;
  445. }
  446. .main {
  447. background-color: #fff;
  448. border-radius: 20rpx 20rpx 0 0;
  449. margin-top: -20rpx;
  450. padding: 20rpx 40rpx 0;
  451. }
  452. .main .page-title {
  453. padding: 28rpx 0 40rpx;
  454. }
  455. .main .page-title .title {
  456. font-size: 36rpx;
  457. color: #262626;
  458. line-height: 50rpx;
  459. font-weight: 600;
  460. }
  461. .main .page-title .btn-block .name {
  462. font-size: 28rpx;
  463. color: #7e7e7e;
  464. line-height: 50rpx;
  465. font-weight: 400;
  466. }
  467. .main .page-title .btn-block .switch-btn {
  468. width: 72rpx;
  469. height: 36rpx;
  470. border-radius: 18rpx;
  471. margin-left: 10rpx;
  472. position: relative;
  473. }
  474. .main .page-title .btn-block .switch-btn::before {
  475. content: "";
  476. display: block;
  477. width: 100%;
  478. height: 100%;
  479. background-color: #E8EEFF;
  480. border-radius: 18rpx;
  481. }
  482. .main .page-title .btn-block .switch-btn::after {
  483. content: "";
  484. display: block;
  485. width: 36rpx;
  486. height: 36rpx;
  487. background-color: #fff;
  488. border-radius: 18rpx;
  489. position: absolute;
  490. left: 0;
  491. top: 0;
  492. box-shadow: 0 0 20rpx #ccc;
  493. transition: all 0.3s ease-out;
  494. }
  495. .main .page-title .btn-block .switch-btn.checked::after {
  496. left: 36rpx;
  497. background-color: #3387FF;
  498. box-shadow: 0 0 20rpx #3387FF;
  499. }
  500. .main .cell {
  501. font-size: 30rpx;
  502. line-height: 42rpx;
  503. color: #666;
  504. margin-bottom: 24rpx;
  505. }
  506. .main .cell .name {
  507. flex: none;
  508. width: 176rpx;
  509. }
  510. .main .code-img {
  511. display: block;
  512. width: 400rpx;
  513. height: 400rpx;
  514. margin: 90rpx auto 126rpx;
  515. }
  516. /* */
  517. .content {
  518. word-wrap: break-word;
  519. word-break: break-all;
  520. }
  521. .btm-btn-block .content {
  522. padding: 0 40rpx 90rpx;
  523. }
  524. .btm-btn-block .content .btn {
  525. flex: none;
  526. width: 325rpx;
  527. height: 98rpx;
  528. border-radius: 8rpx;
  529. text-align: center;
  530. line-height: 98rpx;
  531. font-size: 32rpx;
  532. font-weight: 500;
  533. }
  534. .btm-btn-block .content .btn11 {
  535. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  536. /* box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2); */
  537. color: #fff;
  538. }
  539. .btm-btn-block .content .btn22 {
  540. background: #FFBE2C;
  541. /* box-shadow: 0px 0px 8px 0px rgba(207, 219, 234, 0.4); */
  542. color: #fff;
  543. }
  544. .model {
  545. position: fixed;
  546. width: 100%;
  547. height: 100%;
  548. left: 0;
  549. right: 0;
  550. top: 0;
  551. bottom: 0;
  552. margin: auto;
  553. z-index: 9999;
  554. background: rgba(0, 0, 0, 0.5);
  555. font-size: 18px;
  556. }
  557. .model-home {
  558. width: 135px;
  559. height: 100px;
  560. position: fixed;
  561. right: 24px;
  562. top: 32px;
  563. text-align: center;
  564. color: #FFFFFF;
  565. }
  566. .model-close {
  567. width: 100%;
  568. height: 100px;
  569. position: fixed;
  570. right: 24px;
  571. top: 200px;
  572. text-align: right;
  573. color: #FFFFFF;
  574. }
  575. .model-img {
  576. width: 50px;
  577. height: 50px;
  578. }
  579. </style>