menu.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <template>
  2. <div class="smenu">
  3. <audio
  4. ref="vbgm"
  5. class="noshow"
  6. loop
  7. :src="require(`@/assets/audio/bgm.mp3`)"
  8. ></audio>
  9. <template v-if="!tourStatus">
  10. <div class="sdaolan brightness">
  11. <div @click="toggle" class="daolan ">
  12. <img :src="require(`@/assets/images/project/menu/daolan.png`)" alt="" />
  13. </div>
  14. </div>
  15. <div class="btm-menu">
  16. <img :src="require('@/assets/images/mobile/tab.png')" alt="" />
  17. <div class="brightness"></div>
  18. <ul>
  19. <li v-for="(item, i) in menu" :key="i">
  20. <div @click="onClick(item)">
  21. <img
  22. v-if="item.id != 'bgm'"
  23. :src="require(`@/assets/images/project/menu/${item.id}.png`)"
  24. alt=""
  25. />
  26. <img
  27. v-else
  28. :src="
  29. require(`@/assets/images/project/menu/${
  30. isBgm ? item.muted : item.id
  31. }.png`)
  32. "
  33. alt=""
  34. />
  35. <span>{{ item.name }}</span>
  36. </div>
  37. </li>
  38. </ul>
  39. </div>
  40. </template>
  41. <div class="stoptour brightness" v-else>
  42. <div @click="toggle" class="daolan">
  43. <img
  44. :src="require(`@/assets/images/project/menu/zanting.png`)"
  45. alt=""
  46. />
  47. </div>
  48. </div>
  49. <transition name="likeAddAnimate">
  50. <div class="good" v-show="isShowGood">
  51. <div class="pic">
  52. <img
  53. :src="require(`@/assets/images/project/icon/zan_${theme}.png`)"
  54. alt=""
  55. />
  56. </div>
  57. <div class="num">+{{ goodNum + 1 }}</div>
  58. </div>
  59. </transition>
  60. </div>
  61. </template>
  62. <script>
  63. import { supCount, getsupCount } from "@/config/api";
  64. let menu = [
  65. {
  66. id: "daka",
  67. name: "打卡",
  68. cp: "daka",
  69. },
  70. {
  71. id: "content",
  72. name: "留言",
  73. cp: "vcontent",
  74. },
  75. {
  76. id: "zan",
  77. name: "点赞",
  78. },
  79. {
  80. id: "qrcode",
  81. name: "分享",
  82. cp: "qrcode",
  83. },
  84. {
  85. id: "bgm",
  86. name: "播放",
  87. muted: "jingyin",
  88. },
  89. ];
  90. export default {
  91. props: ["tourStatus"],
  92. data() {
  93. return {
  94. menu,
  95. goodNum: 1099,
  96. isShowGood: false,
  97. isBgm: false,
  98. };
  99. },
  100. watch: {
  101. isBgm(newVal) {
  102. !newVal ? this.$refs.vbgm.pause() : this.$refs.vbgm.play();
  103. },
  104. },
  105. methods: {
  106. onClick(item) {
  107. item.path && this.$router.push(item.path);
  108. item.cp && this.$emit("opencp", item.cp);
  109. item.id == "bgm" && (this.isBgm = !this.isBgm);
  110. item.id == "zan" && this.dianzan();
  111. },
  112. dianzan() {
  113. if (this.isShowGood) return;
  114. getsupCount((res) => {
  115. this.goodNum = res.data;
  116. this.isShowGood = true;
  117. setTimeout(() => {
  118. this.isShowGood = false;
  119. }, 2500);
  120. supCount(() => {});
  121. });
  122. },
  123. toggle(){
  124. let fn = this.tourStatus?'stopTour':'startAndPlay'
  125. this.$bus.$emit('ifrMessage',{
  126. events:'toggleTour',
  127. data:fn
  128. })
  129. }
  130. },
  131. mounted() {},
  132. };
  133. </script>
  134. <style lang="less" scoped>
  135. .smenu {
  136. width: 100%;
  137. .sdaolan,
  138. .stoptour {
  139. position: fixed;
  140. cursor: pointer;
  141. bottom: 113px;
  142. width: 45px;
  143. height: 45px;
  144. left: 14px;
  145. border-radius: 50%;
  146. overflow: hidden;
  147. background: rgba(0, 0, 0, 0.4);
  148. &::before{
  149. backdrop-filter: blur(10px) brightness(60%);
  150. }
  151. .daolan {
  152. position: absolute;
  153. top: 50%;
  154. left: 50%;
  155. transform: translate(-50%, -50%);
  156. width: 100%;
  157. text-align: center;
  158. > img {
  159. width: 20px;
  160. }
  161. }
  162. }
  163. .stoptour {
  164. .daolan {
  165. position: absolute;
  166. top: 50%;
  167. left: 50%;
  168. transform: translate(-50%, -50%);
  169. text-align: center;
  170. > img {
  171. width: 30px;
  172. }
  173. }
  174. }
  175. .btm-menu {
  176. position: fixed;
  177. bottom: 0%;
  178. left: 0%;
  179. z-index: 999;
  180. width: 100%;
  181. width: 100%;
  182. height: 103px;
  183. border-radius: 30px 30px 0 0;
  184. overflow: hidden;
  185. > img {
  186. position: absolute;
  187. bottom: 0;
  188. left: 0;
  189. width: 100%;
  190. z-index: 0;
  191. }
  192. .brightness{
  193. &::before{
  194. backdrop-filter: blur(10px) brightness(60%);
  195. }
  196. }
  197. > ul {
  198. width: 100%;
  199. height: 100%;
  200. display: flex;
  201. justify-content: space-around;
  202. align-items: center;
  203. text-align: center;
  204. margin-top: -10px;
  205. position: relative;
  206. z-index: 9999;
  207. > li {
  208. display: inline-block;
  209. padding: 0 0;
  210. width: 8%;
  211. > div {
  212. > img {
  213. width: 100%;
  214. }
  215. >span{
  216. font-size: 12px;
  217. }
  218. }
  219. }
  220. }
  221. }
  222. }
  223. .likeAddAnimate-enter-active,
  224. .likeAddAnimate-leave-active {
  225. transition: all 2.5s ease;
  226. }
  227. .likeAddAnimate-enter,
  228. .likeAddAnimate-leave {
  229. transform: translate(-50%, 0) scale(0);
  230. opacity: 0;
  231. }
  232. .likeAddAnimate-enter-to,
  233. .likeAddAnimate-leave-to {
  234. transform: translate(-50%, -80px) scale(1.2);
  235. opacity: 1;
  236. }
  237. .good {
  238. position: fixed;
  239. bottom: 60px;
  240. left: 50%;
  241. display: flex;
  242. .pic {
  243. width: 35px;
  244. > img {
  245. width: 100%;
  246. height: 100%;
  247. }
  248. }
  249. .num {
  250. margin-top: 10px;
  251. margin-left: 10px;
  252. }
  253. }
  254. .noshow {
  255. position: fixed;
  256. top: -100px;
  257. left: -100px;
  258. opacity: 0;
  259. visibility: hidden;
  260. }
  261. </style>