video.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814
  1. <template>
  2. <view class="content" @click="copy">
  3. <video x5-video-player-type="h5-page" webkit-playsinline="true"
  4. x5-video-orientation="portraint" id="myVideo" :src="video_url"
  5. @click="copy"
  6. object-fit="contain" :controls="controls"
  7. loop="true"
  8. ></video>
  9. <image @click="closehj" v-if="video_index" class="video-bg" :src="video_index"></image>
  10. <view class="sheet" v-if="info.video_state==1">
  11. <image class="sheet-avatar" :src="video_face" mode=""></image>
  12. <view class="sheet-dz">
  13. <text v-if="Status" class="iconfont animate red iconxihuan"></text>
  14. <text v-if="dzd_status" class="iconfont iconxihuan red"></text>
  15. <block v-if="Status_set">
  16. <text v-if="Status" class="iconfont iconxihuan red"></text>
  17. <text v-if="!Status" @click="bindxin" class="iconfont iconxihuan "></text>
  18. </block>
  19. <view class="ft22">
  20. {{info.video_zan}}
  21. </view>
  22. </view>
  23. <view class="sheet-fx" @click="phone">
  24. <text class="iconfont iconlianxi"></text>
  25. <view class="ft22">
  26. {{info.video_ping}}
  27. </view>
  28. </view>
  29. <view class="sheet-fx" @click="share">
  30. <text class="iconfont iconzhuanfa"></text>
  31. </view>
  32. </view>
  33. <view class="sheet-conent">
  34. <block v-if="close">
  35. <view v-if="info.jump_state==1" >
  36. <view v-if="info.jump_type==1" :style="'width:'+jump_width+'px'+';'+'height:'+jump_height+'px'" @click="href" class="flex-y-center sheet-conent-ad sheet-conent-ad-home">
  37. <image class="sheet-conent-ad-icon" :style="'width:'+icon_width+'px'+';'+'height:'+icon_width+'px'" :src="URL+info.jump_img" mode=""></image>
  38. <image @click.stop="del" class="del" src="../../static/images/shanchu.png" mode=""></image>
  39. <view class="sheet-conent-ad-text" :style="'width:'+text_width+'px'">
  40. <view class="text-1">
  41. {{info.jump_title}}
  42. </view>
  43. <view class="sheet-conent-ad-desc text-2">
  44. {{info.jump_cont}}
  45. </view>
  46. </view>
  47. </view>
  48. <view v-else class="sheet-conent-ad sheet-conent-ad-home">
  49. <view v-html="wxOpenTags">
  50. </view>
  51. <image @click.stop="del" class="del" src="../../static/images/shanchu.png" mode=""></image>
  52. </view>
  53. </view>
  54. </block>
  55. <block v-if="info.video_state==1">
  56. <view class="sheet-conent-title text-1">
  57. {{info.video_title?'@':''}}{{info.video_title}}
  58. </view>
  59. <view class="sheet-conent-desc text-2">
  60. {{info.video_desc}}
  61. </view>
  62. </block>
  63. </view>
  64. <view class="model" @click="close_share" v-if="isdown">
  65. <view class="model-home">
  66. <image class="model-img" src="/static/images/jt.png" />
  67. <view>1.请点击右上角
  68. <block>选择分享好友或者朋友圈</block>
  69. </view>
  70. </view>
  71. <view class="model-close">
  72. 2.点击关闭遮盖层
  73. </view>
  74. </view>
  75. <view class="model_s flex-center" v-if="hj_state" @click="closehj">
  76. <view class="">
  77. <view class="wave ripple danger">
  78. <view class="circle"></view>
  79. <view class="circle"></view>
  80. <view class="circle"></view>
  81. <view class="circle"></view>
  82. <view class="circle"></view>
  83. <view class="circle"></view>
  84. <view class="model_s_pa flex-center">
  85. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  86. </view>
  87. </view>
  88. <view class="model_s_text flex-center">
  89. 开始播放
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. </template>
  95. <script>
  96. // #ifdef H5
  97. import getWXSign from "@/static/js/config.js";
  98. // #endif
  99. export default {
  100. data() {
  101. return {
  102. video_face: "../../static/images/avatar.png",
  103. video_index: "",
  104. dzd_status: false,
  105. Status: false,
  106. Status_set: true,
  107. close: true,
  108. info: {},
  109. URL: getApp().globalData.URL,
  110. isdown: false,
  111. autoplay: true,
  112. controls: false,
  113. hj_state: false,
  114. video_url: "",
  115. wxOpenTags: "",
  116. jump_width:"",
  117. jump_height:"",
  118. icon_width:"",
  119. // icon_height:"",
  120. text_width:""
  121. }
  122. },
  123. onLoad(e) {
  124. var windowWidth =uni.getSystemInfoSync().windowWidth, // 获取当前窗口的宽度
  125. windowHeight= uni.getSystemInfoSync().windowHeight; // 获取当前窗口的高度
  126. this.jump_width=windowWidth/1.4;
  127. this.jump_height=(windowWidth/1.4)/3.1;
  128. this.icon_width=this.jump_height-20;
  129. this.text_width=this.jump_width-this.icon_width-16
  130. getWXSign().then(res => {
  131. console.log(res)
  132. })
  133. function getUrlParam(paraName) {
  134. let url = window.location.href;
  135. var arrObj = url.split("?");
  136. if (arrObj.length > 1) {
  137. var arr;
  138. for (var i = 0; i < arrObj.length; i++) {
  139. arr = arrObj[i].split("=");
  140. console.log(arr)
  141. if (arr != null && arr[0] == paraName) {
  142. return arr[1];
  143. }
  144. }
  145. return "";
  146. } else {
  147. return "";
  148. }
  149. }
  150. this.http(getUrlParam('card_num'));
  151. // this.http("1611546211O2S2853V");
  152. },
  153. onReady(e) {
  154. // if(/iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
  155. // }else{
  156. // }
  157. this.videoContext = uni.createVideoContext('myVideo');
  158. this.videoContext.requestFullScreen();
  159. },
  160. methods: {
  161. closehj(e) {
  162. this.videoContext.play();
  163. this.hj_state = false;
  164. this.video_index = "";
  165. this.copy();
  166. },
  167. copy(e) {
  168. let content = this.info.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
  169. if (!document.queryCommandSupported('copy')) {
  170. // 不支持
  171. return false
  172. }
  173. let textarea = document.createElement("input")
  174. textarea.value = content
  175. textarea.readOnly = "readOnly"
  176. document.body.appendChild(textarea)
  177. textarea.select() // 选择对象
  178. textarea.setSelectionRange(0, content.length) //核心
  179. let result = document.execCommand("copy") // 执行浏览器复制命令
  180. textarea.remove();
  181. return result
  182. },
  183. href(e) {
  184. location.href = this.info.jump_web;
  185. },
  186. share(e) {
  187. this.isdown = true;
  188. },
  189. close_share() {
  190. this.isdown = false;
  191. },
  192. del(e) {
  193. this.close = false
  194. },
  195. phone(e) {
  196. uni.makePhoneCall({
  197. phoneNumber: this.info.video_tel //仅为示例
  198. });
  199. },
  200. http(card_num) {
  201. this.request({
  202. url: "funeng/scan",
  203. data: {
  204. card_num: card_num,
  205. },
  206. }).then(res => {
  207. console.log(res, "res")
  208. if (res.code === '200') {
  209. this.info = res.data;
  210. this.hj_state = res.data.hj_state == 1 ? true : false;
  211. uni.setNavigationBarTitle({
  212. title: res.data.video_title
  213. })
  214. if (res.data.video_otherurl) {
  215. this.getup(res.data.video_otherurl);
  216. } else {
  217. this.video_url = res.data.video_url;
  218. }
  219. if (res.data.jump_type == 2) {
  220. let jump_title = res.data.jump_title,
  221. jump_img=this.URL+res.data.jump_img,
  222. jump_cont = res.data.jump_cont,
  223. xcx_original_id = res.data.xcx_original_id,
  224. xcx_link = res.data.xcx_link;
  225. console.log("xcx_original_id",xcx_original_id)
  226. var jump_width= this.jump_width;
  227. var jump_height= this.jump_height;
  228. var icon_width=this.icon_width;
  229. var text_width =this.text_width;
  230. setTimeout(() => {
  231. this.wxOpenTags =
  232. `<wx-open-launch-weapp id="launch-wxapp" username="${xcx_original_id}" path="${xcx_link}" >
  233. <template>
  234. <style>
  235. .flex-y-center {
  236. display: -webkit-box;
  237. display: -webkit-flex;
  238. display: flex;
  239. -webkit-box-align: center;
  240. -webkit-align-items: center;
  241. -ms-flex-align: center;
  242. -ms-grid-row-align: center;
  243. align-items: center;
  244. }
  245. .sheet-conent-add {
  246. width: ${jump_width-10}px;
  247. height:${jump_height}px;
  248. }
  249. .sheet-conent-ad-home {
  250. position: relative;
  251. }
  252. .sheet-conent-ad-icon {
  253. width: ${icon_width}px;
  254. height: ${icon_width}px;
  255. min-width: 60px;
  256. margin: 0 10px;
  257. }
  258. .sheet-conent-ad-text {
  259. width: ${text_width-10}px;
  260. }
  261. .sheet-conent-ad-desc {
  262. font-size: 12px;
  263. font-family: PingFang SC, PingFang SC-Regular;
  264. font-weight: 400;
  265. color: #666666;
  266. margin-top:5px;
  267. min-height: 31px;
  268. }
  269. .text-1{
  270. overflow: hidden;
  271. text-overflow:ellipsis;
  272. white-space: nowrap;
  273. }
  274. </style>
  275. <div class="flex-y-center sheet-conent-add">
  276. <img class="sheet-conent-ad-icon" src="${jump_img}" mode=""></img>
  277. <div class="sheet-conent-ad-text">
  278. <div class="text-1">
  279. ${jump_title}
  280. </div>
  281. <div class="sheet-conent-ad-desc text-2">
  282. ${jump_cont}
  283. </div>
  284. </div>
  285. </div>
  286. </template>
  287. </wx-open-launch-weapp>`;
  288. }, 500);
  289. }
  290. if (res.data.wx_state == 1) {
  291. var super_id= this.info.super_id;
  292. getWXSign(super_id).then(r => {
  293. var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
  294. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  295. this.$wx.updateAppMessageShareData({
  296. title: res.data.wx_title, // 分享标题
  297. desc: res.data.wx_desc, // 分享描述
  298. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  299. imgUrl: imgUrl, // 分享图标
  300. success: (res) => {
  301. // 设置成功
  302. console.log("设置成功", res)
  303. }
  304. })
  305. this.$wx.updateTimelineShareData({
  306. title: res.data.wx_title, // 分享标题
  307. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  308. imgUrl: imgUrl, // 分享图标
  309. success: (res) => {
  310. // 设置成功
  311. console.log("设置成功", res)
  312. }
  313. })
  314. } else {
  315. // alert("pc")
  316. this.$wx.onMenuShareTimeline({
  317. title: res.data.wx_title, // 分享标题
  318. desc: res.data.wx_desc, // 分享描述
  319. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  320. imgUrl: imgUrl, // 分享图标
  321. success: (res) => {
  322. // 设置成功
  323. console.log("设置成功", res)
  324. }
  325. })
  326. this.$wx.onMenuShareAppMessage({
  327. title: res.data.wx_title, // 分享标题
  328. desc: res.data.wx_desc, // 分享描述
  329. link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  330. imgUrl: imgUrl, // 分享图标
  331. success: (res) => {
  332. // 设置成功
  333. console.log("设置成功", res)
  334. }
  335. })
  336. }
  337. })
  338. }
  339. }
  340. }).catch((res) => {});
  341. },
  342. getup(url) {
  343. this.request({
  344. url: "videofuneng/video_down",
  345. data: {
  346. url: url,
  347. },
  348. }).then(res => {
  349. console.log(res, "res")
  350. if (res.code === '200') {
  351. this.video_url = res.data.video_url;
  352. this.video_face = res.data.video_face;
  353. this.video_index = res.data.video_index;
  354. }
  355. }).catch((res) => {
  356. uni.showToast({
  357. title: res.message,
  358. icon: 'none'
  359. })
  360. });
  361. },
  362. bindxin(e) {
  363. // 说明已经点赞了, 如果再次点击 就是取消点赞
  364. if (this.dzd_status) {
  365. this.dzd_status = false
  366. var video_num = this.info.video_zan + "";
  367. if (video_num.indexOf("w") == -1) {
  368. this.info.video_zan = Number(this.info.video_zan) - 1
  369. }
  370. return
  371. }
  372. this.Status = true;
  373. setTimeout(() => {
  374. this.dzd_status = true
  375. this.Status = false;
  376. this.Status_set = false;
  377. var video_num = this.info.video_zan + "";
  378. if (video_num.indexOf("w") == -1) {
  379. console.log("video_zan")
  380. this.info.video_zan = Number(this.info.video_zan) + 1
  381. }
  382. }, 2000);
  383. },
  384. }
  385. }
  386. </script>
  387. <style>
  388. page {
  389. height: 100vh;
  390. width: 100%;
  391. }
  392. .content {
  393. height: 100%;
  394. width: 100%;
  395. }
  396. .content video {
  397. height: 100%;
  398. width: 100%;
  399. }
  400. .sheet {
  401. position: absolute;
  402. right: 30rpx;
  403. bottom: 300rpx;
  404. font-size: 30rpx;
  405. font-family: PingFang SC, PingFang SC-Regular;
  406. font-weight: 400;
  407. color: #ffffff;
  408. text-align: center;
  409. z-index: 999;
  410. }
  411. .video-bg {
  412. position: absolute;
  413. top: 0;
  414. width: 100%;
  415. height: 100%;
  416. z-index: 998;
  417. left: 0;
  418. }
  419. .sheet-avatar {
  420. width: 90rpx;
  421. height: 90rpx;
  422. margin-bottom: 30rpx;
  423. border-radius: 50%;
  424. }
  425. .sheet-dz {
  426. margin-bottom: 30rpx;
  427. position: relative;
  428. }
  429. .sheet-dz text {
  430. /* width: 58rpx;
  431. height: 48rpx; */
  432. font-size: 58rpx;
  433. margin-bottom: 4rpx;
  434. }
  435. .sheet-fx {
  436. margin-bottom: 30rpx;
  437. }
  438. .sheet-fx text {
  439. /* width: 58rpx;
  440. height: 48rpx; */
  441. font-size: 50rpx;
  442. margin-bottom: 4rpx;
  443. }
  444. .sheet-conent {
  445. position: absolute;
  446. z-index: 999;
  447. left: 50rpx;
  448. bottom: 100rpx;
  449. width: 600rpx;
  450. }
  451. .sheet-conent-ad {
  452. width: 530rpx;
  453. /* 270px */
  454. height: 168rpx;
  455. /* 168rpx */
  456. background: #ffffff;
  457. border-radius: 8rpx;
  458. box-shadow: 0px 4rpx 12rpx 0px rgba(208, 208, 208, 0.16);
  459. margin-bottom: 24rpx;
  460. padding-right: 20rpx;
  461. }
  462. .sheet-conent-ad-home {
  463. position: relative;
  464. }
  465. .sheet-conent-ad-text {
  466. width: 350rpx;
  467. }
  468. .sheet-conent-ad .sheet-conent-ad-icon {
  469. width: 120rpx;
  470. height: 120rpx;
  471. min-width: 120rpx;
  472. margin: 0 8px;
  473. }
  474. .sheet-conent-ad-desc {
  475. font-size: 24rpx;
  476. font-family: PingFang SC, PingFang SC-Regular;
  477. font-weight: 400;
  478. color: #666666;
  479. margin-top: 10rpx;
  480. min-height: 62rpx;
  481. }
  482. .sheet-conent-title {
  483. font-size: 36rpx;
  484. font-family: PingFang SC, PingFang SC-Medium;
  485. font-weight: 500;
  486. color: #ffffff;
  487. margin-bottom: 24rpx;
  488. }
  489. .sheet-conent-desc {
  490. font-size: 30rpx;
  491. font-family: PingFang SC, PingFang SC-Medium;
  492. font-weight: 500;
  493. color: #ffffff;
  494. }
  495. .del {
  496. position: absolute;
  497. right: 20rpx;
  498. top: 8rpx;
  499. width: 30rpx;
  500. height: 30rpx;
  501. /* background: #cbcbcb; */
  502. border-radius: 1rpx;
  503. }
  504. .sheet-dz .animate {
  505. position: absolute;
  506. z-index: 100;
  507. animation: ClickLikeAni 2s ease-in-out alternate forwards;
  508. /* background-image: url("../../assets/images/dzd.png"); */
  509. background-size: cover;
  510. }
  511. @keyframes ClickLikeAni {
  512. 0% {
  513. top: 0px;
  514. }
  515. 10% {
  516. top: -3px;
  517. }
  518. 20% {
  519. top: -9px;
  520. }
  521. 30% {
  522. top: -15px;
  523. }
  524. 40% {
  525. top: -21px;
  526. transform: rotate(6deg);
  527. }
  528. 50% {
  529. top: -27px;
  530. transform: rotate(12deg);
  531. }
  532. 60% {
  533. top: -36px;
  534. transform: rotate(6deg);
  535. }
  536. 70% {
  537. top: -42px;
  538. transform: rotate(0deg);
  539. }
  540. 80% {
  541. top: -48px;
  542. transform: rotate(-6deg);
  543. }
  544. 90% {
  545. top: -54px;
  546. transform: rotate(-12deg);
  547. }
  548. 100% {
  549. top: -60px;
  550. transform: rotate(-6deg);
  551. opacity: 0;
  552. }
  553. }
  554. .sheet-dz .red {
  555. color: red;
  556. }
  557. .model {
  558. position: fixed;
  559. width: 100%;
  560. height: 100%;
  561. left: 0;
  562. right: 0;
  563. top: 0;
  564. bottom: 0;
  565. margin: auto;
  566. z-index: 9999;
  567. background: rgba(0, 0, 0, 0.5);
  568. font-size: 18px;
  569. }
  570. .model-home {
  571. width: 135px;
  572. height: 100px;
  573. position: fixed;
  574. right: 24px;
  575. top: 32px;
  576. text-align: center;
  577. color: #FFFFFF;
  578. }
  579. .model-close {
  580. width: 100%;
  581. height: 100px;
  582. position: fixed;
  583. right: 24px;
  584. top: 200px;
  585. text-align: right;
  586. color: #FFFFFF;
  587. }
  588. .model-img {
  589. width: 50px;
  590. height: 50px;
  591. }
  592. .model_s {
  593. height: 100%;
  594. width: 100%;
  595. position: fixed;
  596. z-index: 999;
  597. left: 0;
  598. top: 0;
  599. background: rgba(0, 0, 0, 0.5);
  600. }
  601. .model_s_pa {
  602. position: absolute;
  603. width: 300rpx;
  604. height: 300rpx;
  605. }
  606. .model_s_sz {
  607. width: 160rpx;
  608. height: 160rpx;
  609. margin-top: 52rpx;
  610. margin-left: 24rpx;
  611. }
  612. .model_s_text {
  613. font-size: 40rpx;
  614. color: #FFFFFF;
  615. }
  616. .container_title {
  617. font-size: 48rpx;
  618. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  619. margin-top: 90rpx;
  620. padding: 0 20rpx;
  621. }
  622. /************以下为具体实现************/
  623. .wave {
  624. position: relative;
  625. width: 300rpx;
  626. height: 300rpx;
  627. text-align: center;
  628. font-size: 28rpx;
  629. margin: 0 auto;
  630. }
  631. .wave .circle {
  632. position: absolute;
  633. border-radius: 50%;
  634. opacity: 0;
  635. }
  636. /* 波纹效果 */
  637. .wave.ripple .circle {
  638. width: calc(100% - 6px);
  639. /* 减去边框的大小 */
  640. height: calc(100% - 6px);
  641. /* 减去边框的大小 */
  642. border: 3px solid #fff;
  643. }
  644. .wave.ripple .circle:first-child {
  645. animation: circle-opacity 2s infinite;
  646. }
  647. .wave.ripple .circle:nth-child(2) {
  648. animation: circle-opacity 2s infinite;
  649. animation-delay: 0.3s;
  650. }
  651. .wave.ripple .circle:nth-child(3) {
  652. animation: circle-opacity 2s infinite;
  653. animation-delay: 0.6s;
  654. }
  655. .wave.ripple .circle:nth-child(4) {
  656. animation: circle-opacity 2s infinite;
  657. animation-delay: 0.8s;
  658. }
  659. .wave.ripple .circle:nth-child(5) {
  660. animation: circle-opacity 2s infinite;
  661. animation-delay: 1s;
  662. }
  663. .wave.ripple .circle:nth-child(6) {
  664. animation: circle-opacity 2s infinite;
  665. animation-delay: 1.2s;
  666. }
  667. .wave.ripple.danger {
  668. color: #FFFFFF;
  669. }
  670. .wave.ripple.danger .circle {
  671. border-color: #FFFFFF;
  672. }
  673. .wave.ripple.warning {
  674. color: orange;
  675. }
  676. .wave.ripple.warning .circle {
  677. border-color: orange;
  678. }
  679. /* 波动效果 */
  680. /*
  681. .wave.solid .circle {
  682. width: 100%;
  683. height: 100%;
  684. background: #fff;
  685. }
  686. .wave.solid .circle:first-child {
  687. animation: circle-opacity 2s infinite;
  688. }
  689. .wave.solid.danger {
  690. color: red;
  691. }
  692. .wave.solid.danger .circle {
  693. background: red;
  694. }
  695. .wave.solid.warning {
  696. color: orange;
  697. }
  698. .wave.solid.warning .circle {
  699. background: orange;
  700. } */
  701. @keyframes circle-opacity {
  702. from {
  703. opacity: 1;
  704. transform: scale(0);
  705. }
  706. to {
  707. opacity: 0;
  708. transform: scale(1);
  709. }
  710. }
  711. </style>