Rbottom.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. <template>
  2. <div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
  3. <audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
  4. <div class="box1">
  5. <div class="mainll mainrr">
  6. <div
  7. v-show="list.length !== 0 || item.type > 2"
  8. @click="leftCutClick(item.type)"
  9. class="row"
  10. :class="{ active2: item.done }"
  11. v-for="item in leftList"
  12. :key="item.type"
  13. >
  14. <img
  15. :src="
  16. require(`@/assets/img/LeftTop/inco${item.type}${
  17. item.done ? 'Ac' : ''
  18. }.png`)
  19. "
  20. alt=""
  21. />
  22. <p>{{ item.name }}</p>
  23. </div>
  24. </div>
  25. <div class="mainrr">
  26. <div
  27. class="row"
  28. @click="rightClisk(item.type)"
  29. v-for="item in rightList"
  30. :key="item.type"
  31. :class="{
  32. active2:
  33. (music && item.type === 2) ||
  34. (like && item.type === 3) ||
  35. (share && item.type === 4) ||
  36. (isFullscreen && item.type === 5),
  37. }"
  38. >
  39. <img
  40. :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
  41. alt=""
  42. v-if="music && item.type === 2"
  43. />
  44. <img
  45. :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
  46. alt=""
  47. v-else-if="like && item.type === 3"
  48. />
  49. <img
  50. :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
  51. alt=""
  52. v-else-if="share && item.type === 4"
  53. />
  54. <img
  55. :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
  56. alt=""
  57. v-else-if="isFullscreen && item.type === 5"
  58. />
  59. <img
  60. :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
  61. alt=""
  62. v-else
  63. />
  64. <transition name="likeAddAnimate">
  65. <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
  66. </transition>
  67. <p>
  68. {{ item.name }}
  69. </p>
  70. </div>
  71. </div>
  72. </div>
  73. <div
  74. class="box2"
  75. :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`"
  76. >
  77. <div class="swiper-container">
  78. <div class="swiper-wrapper" v-if="list.length">
  79. <div
  80. @click="cutGoods(index)"
  81. class="swiper-slide"
  82. v-for="(item, index) in list[0].list"
  83. :class="{ active: acList === index }"
  84. :key="index"
  85. >
  86. <img :src="item.enter.cover" alt="" />
  87. <!-- <p>666</p> -->
  88. <div
  89. class="plan"
  90. v-show="acList === index"
  91. :style="{ width: progress + '%' }"
  92. ></div>
  93. </div>
  94. <div class="swiper-slide" style="pointer-events: none"></div>
  95. </div>
  96. <div class="swiper-scrollbar"></div>
  97. </div>
  98. </div>
  99. <!-- 分享页面 -->
  100. <div class="shareBox" :class="{ shareBoxShow: share }">
  101. <div class="shareMain">
  102. <div class="close" @click="share = false"></div>
  103. <h3>分享</h3>
  104. <p>
  105. 请使用手机扫描二维码或
  106. <br />
  107. 复制分享链接
  108. </p>
  109. <img src="@/assets/img/Goods/Rcode.jpg" alt="" />
  110. <div class="btnn" @click="copyPcTxt">复制分享链接</div>
  111. </div>
  112. </div>
  113. </div>
  114. </template>
  115. <script>
  116. import { addNumAPI } from "@/utils/api";
  117. import Swiper from "./swiper.js";
  118. export default {
  119. name: "Rbottom",
  120. components: {},
  121. props: ["acList", "progress"],
  122. data() {
  123. //这里存放数据
  124. return {
  125. rightList: [
  126. { name: "首页", type: 1 },
  127. { name: "声音", type: 2 },
  128. { name: "点赞", type: 3 },
  129. { name: "分享", type: 4 },
  130. { name: "全屏", type: 5 },
  131. ],
  132. rightType: "",
  133. music: false,
  134. like: false,
  135. share: false,
  136. isFullscreen: false,
  137. // --------------
  138. leftList: [
  139. { name: "自动漫游", type: 1, done: false },
  140. { name: "场景导览", type: 2, done: false },
  141. { name: "全景漫游", type: 3, done: true },
  142. { name: "迷你模型", type: 4, done: false },
  143. { name: "顶部俯视", type: 5, done: false },
  144. ],
  145. list: [],
  146. Swiper: null,
  147. };
  148. },
  149. //监听属性 类似于data概念
  150. computed: {},
  151. //监控data中的数据变化
  152. watch: {
  153. acList(val) {
  154. let temp = val - 2;
  155. if (temp < 0) temp = 0;
  156. this.Swiper.slideTo(temp);
  157. },
  158. music(val) {
  159. let dom = document.querySelector("#bacMusic");
  160. if (val) dom.play();
  161. else dom.pause();
  162. },
  163. },
  164. //方法集合
  165. methods: {
  166. cutGoods(index) {
  167. this.$emit("daoLanCut", index);
  168. this.leftList[0].done = false;
  169. if (window.bacMusic) {
  170. setTimeout(() => {
  171. this.music = true;
  172. }, 100);
  173. }
  174. },
  175. leftCutClick(type) {
  176. this.$emit("cutKankan", type - 1);
  177. if (type === 1) {
  178. let dom = document.querySelector("#bacMusic");
  179. if (!this.leftList[0].done) {
  180. // 防止多次点击自动漫游
  181. let mainApp = document.querySelector("#app");
  182. mainApp.style.pointerEvents = "none";
  183. // 自动漫游开始的时候的音乐播放状态
  184. window.bacMusic = !dom.paused;
  185. setTimeout(() => {
  186. this.music = false;
  187. }, 200);
  188. } else {
  189. if (window.bacMusic) {
  190. setTimeout(() => {
  191. this.music = true;
  192. }, 100);
  193. }
  194. }
  195. this.leftList[1].done = true;
  196. this.leftList[0].done = !this.leftList[0].done;
  197. } else if (type === 2) {
  198. this.leftList[1].done = !this.leftList[1].done;
  199. } else if (type >= 4) {
  200. this.$emit("stopPlay", true);
  201. }
  202. },
  203. // 给父组件调用的控制音乐播放的方法
  204. opMusic(val) {
  205. this.music = val;
  206. },
  207. // 给父组件操作控制左边按钮的方法
  208. leftCut(index) {
  209. if (index > 2) {
  210. if (window.bacMusic) {
  211. setTimeout(() => {
  212. this.music = true;
  213. }, 100);
  214. }
  215. this.leftList.forEach((v, i) => {
  216. if (i === index) v.done = true;
  217. else v.done = false;
  218. });
  219. } else if (index === -1) {
  220. if (window.bacMusic) {
  221. setTimeout(() => {
  222. this.music = true;
  223. }, 100);
  224. }
  225. this.leftList[0].done = false;
  226. } else if (index === 2) {
  227. this.leftList[2].done = true;
  228. this.leftList[3].done = this.leftList[4].done = false;
  229. }
  230. },
  231. // 点击全屏
  232. fullShow() {
  233. let element = document.documentElement;
  234. if (this.isFullscreen) {
  235. if (document.exitFullscreen) {
  236. document.exitFullscreen();
  237. } else if (document.webkitCancelFullScreen) {
  238. document.webkitCancelFullScreen();
  239. } else if (document.mozCancelFullScreen) {
  240. document.mozCancelFullScreen();
  241. } else if (document.msExitFullscreen) {
  242. document.msExitFullscreen();
  243. }
  244. } else {
  245. if (element.requestFullscreen) {
  246. element.requestFullscreen();
  247. } else if (element.webkitRequestFullScreen) {
  248. element.webkitRequestFullScreen();
  249. } else if (element.mozRequestFullScreen) {
  250. element.mozRequestFullScreen();
  251. } else if (element.msRequestFullscreen) {
  252. element.msRequestFullscreen();
  253. }
  254. }
  255. // 改变当前全屏状态
  256. this.isFullscreen = !this.isFullscreen;
  257. },
  258. rightClisk(type) {
  259. if (type === 1) window.location.replace("/YHT/index.html");
  260. else if (type === 2) {
  261. let dom = document.querySelector("#bacMusic");
  262. window.bacMusic = dom.paused;
  263. this.music = !this.music;
  264. this.$emit("stopPlay");
  265. } else if (type === 3) {
  266. if (this.like) return;
  267. this.like = true;
  268. setTimeout(() => {
  269. this.like = false;
  270. }, 2000);
  271. addNumAPI("star");
  272. } else if (type === 4) {
  273. this.$emit("stopPlay");
  274. this.share = true;
  275. } else this.fullShow();
  276. },
  277. //点击复制链接
  278. copyPcTxt() {
  279. // 存储传递过来的数据
  280. let OrderNumber = window.location.origin+'/YHT/index.html';
  281. // 创建一个input 元素
  282. // createElement() 方法通过指定名称创建一个元素
  283. let newInput = document.createElement("input");
  284. // 讲存储的数据赋值给input的value值
  285. newInput.value = OrderNumber;
  286. // appendChild() 方法向节点添加最后一个子节点。
  287. document.body.appendChild(newInput);
  288. // 选中input元素中的文本
  289. // select() 方法用于选择该元素中的文本。
  290. newInput.select();
  291. // 执行浏览器复制命令
  292. // execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令
  293. document.execCommand("Copy");
  294. // 清空输入框
  295. newInput.remove();
  296. alert("复制成功");
  297. },
  298. // 初始化轮播图
  299. baseSw(data) {
  300. this.list = data;
  301. this.$nextTick(() => {
  302. this.Swiper = new Swiper(".swiper-container", {
  303. slidesPerView: 9,
  304. spaceBetween: 25,
  305. scrollbar: {
  306. el: ".swiper-scrollbar",
  307. },
  308. });
  309. });
  310. },
  311. },
  312. //生命周期 - 创建完成(可以访问当前this实例)
  313. created() {},
  314. //生命周期 - 挂载完成(可以访问DOM元素)
  315. mounted() {
  316. // 监听esc事件
  317. document.addEventListener("webkitfullscreenchange", (e) => {
  318. if (!e.currentTarget.webkitIsFullScreen) this.isFullscreen = false;
  319. });
  320. document.addEventListener("fullscreenchange", (e) => {
  321. if (!document.fullscreenElement) this.isFullscreen = false;
  322. });
  323. document.addEventListener("MSFullscreenChange", (e) => {
  324. if (!document.msFullscreenElement) this.isFullscreen = false;
  325. });
  326. document.addEventListener("mozfullscreenchange", (e) => {
  327. if (!document.mozFullScreenElement) this.isFullscreen = false;
  328. });
  329. },
  330. beforeCreate() {}, //生命周期 - 创建之前
  331. beforeMount() {}, //生命周期 - 挂载之前
  332. beforeUpdate() {}, //生命周期 - 更新之前
  333. updated() {}, //生命周期 - 更新之后
  334. beforeDestroy() {}, //生命周期 - 销毁之前
  335. destroyed() {}, //生命周期 - 销毁完成
  336. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  337. };
  338. </script>
  339. <style lang='less' scoped>
  340. .swiper-scrollbar {
  341. height: 4px;
  342. background-color: #fff;
  343. overflow: hidden;
  344. }
  345. /deep/.swiper-scrollbar-drag {
  346. background-color: #930909;
  347. }
  348. @import "./swiper.css";
  349. .likeAddAnimate-enter-active,
  350. .likeAddAnimate-leave-active {
  351. transition: all 2s ease;
  352. }
  353. .likeAddAnimate-enter,
  354. .likeAddAnimate-leave {
  355. transform: translateY(0) scale(0);
  356. opacity: 0;
  357. }
  358. .likeAddAnimate-enter-to,
  359. .likeAddAnimate-leave-to {
  360. transform: translateY(-50px) scale(1.2);
  361. opacity: 1;
  362. }
  363. .Rbottom {
  364. transition: all 0.5s;
  365. z-index: 10;
  366. position: absolute;
  367. bottom: 24px;
  368. right: 0px;
  369. width: 100%;
  370. .box1 {
  371. padding: 0 25px;
  372. width: 100%;
  373. display: flex;
  374. justify-content: space-between;
  375. .mainrr {
  376. display: flex;
  377. .row {
  378. position: relative;
  379. cursor: pointer;
  380. width: 50px;
  381. text-align: center;
  382. margin-left: 18px;
  383. color: #fff;
  384. & > img {
  385. width: 50px;
  386. }
  387. p {
  388. font-size: 12px;
  389. }
  390. .likeMove {
  391. color: #930909;
  392. position: absolute;
  393. top: 10px;
  394. width: 100%;
  395. text-align: center;
  396. }
  397. }
  398. .active2 {
  399. color: #930909;
  400. font-weight: 700;
  401. p {
  402. font-size: 12px;
  403. }
  404. }
  405. }
  406. .mainll {
  407. .row {
  408. width: 80px;
  409. margin-left: 0;
  410. }
  411. }
  412. }
  413. .box2 {
  414. overflow: hidden;
  415. transition: height 0.5s;
  416. margin-top: 5px;
  417. width: 100%;
  418. height: 150px;
  419. background-color: #d8b275;
  420. padding: 15px 25px 0;
  421. .swiper-container {
  422. cursor: grab;
  423. height: 100%;
  424. .swiper-slide {
  425. cursor: pointer;
  426. height: 120px;
  427. img {
  428. width: 100%;
  429. height: 110px;
  430. object-fit: cover;
  431. }
  432. p {
  433. text-align: center;
  434. height: 30px;
  435. line-height: 30px;
  436. color: #ffffff;
  437. font-size: 14px;
  438. }
  439. .plan {
  440. height: 4px;
  441. background-color: #930909;
  442. }
  443. }
  444. .active {
  445. img {
  446. border: 3px solid #930909;
  447. }
  448. }
  449. }
  450. }
  451. }
  452. .shareBox {
  453. z-index: 11;
  454. position: fixed;
  455. top: 0;
  456. left: 0;
  457. width: 100%;
  458. height: 100%;
  459. opacity: 0;
  460. pointer-events: none;
  461. backdrop-filter: blur(4px);
  462. transition: opacity 0.5s;
  463. .shareMain {
  464. padding: 40px 30px 0;
  465. position: absolute;
  466. top: 50%;
  467. left: 50%;
  468. transform: translate(-50%, -50%);
  469. width: 450px;
  470. height: 650px;
  471. background-image: url("../assets/img/Goods/shareBac.png");
  472. background-size: 100% 100%;
  473. text-align: center;
  474. .close {
  475. width: 48px;
  476. height: 48px;
  477. cursor: pointer;
  478. position: absolute;
  479. right: -24px;
  480. top: -24px;
  481. background-image: url("../assets/img/Goods/shareClose.png");
  482. background-size: 100% 100%;
  483. }
  484. h3 {
  485. text-align: left;
  486. color: #d8b275;
  487. font-size: 24px;
  488. margin-bottom: 50px;
  489. }
  490. p {
  491. font-size: 20px;
  492. color: #ffffff;
  493. margin-bottom: 40px;
  494. }
  495. img {
  496. width: 240px;
  497. margin-bottom: 50px;
  498. }
  499. .btnn {
  500. cursor: pointer;
  501. width: 280px;
  502. margin: 0 auto;
  503. height: 60px;
  504. border-radius: 30px;
  505. border: 2px solid #d8b275;
  506. line-height: 58px;
  507. font-size: 20px;
  508. color: #ffffff;
  509. }
  510. }
  511. }
  512. .shareBoxShow {
  513. opacity: 1;
  514. pointer-events: auto;
  515. }
  516. </style>