home_merge.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <template>
  2. <view class="content">
  3. <block v-if="isclose">
  4. <view v-if="info.hj_state==2" class="model" @click="close"></view>
  5. <view class="model_s flex-center" v-else @click="close">
  6. <view class="">
  7. <view class="wave ripple danger">
  8. <view class="circle"></view>
  9. <view class="circle"></view>
  10. <view class="circle"></view>
  11. <view class="circle"></view>
  12. <view class="circle"></view>
  13. <view class="circle"></view>
  14. <view class="model_s_pa flex-center">
  15. <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
  16. </view>
  17. </view>
  18. <view class="model_s_text">
  19. 点击进入
  20. </view>
  21. </view>
  22. </view>
  23. </block>
  24. <web-view :src="info.url"></web-view>
  25. </view>
  26. </template>
  27. <script>
  28. // #ifdef H5
  29. import getWXSign from "@/static/js/config.js";
  30. // #endif
  31. export default {
  32. data() {
  33. return {
  34. info: {},
  35. url: "",
  36. URL: getApp().globalData.URL,
  37. isclose: true,
  38. }
  39. },
  40. onLoad(e) {
  41. function getUrlParam(paraName) {
  42. let url = window.location.href;
  43. var arrObj = url.split("?");
  44. if (arrObj.length > 1) {
  45. var arr;
  46. for (var i = 0; i < arrObj.length; i++) {
  47. arr = arrObj[i].split("=");
  48. console.log(arr)
  49. if (arr != null && arr[0] == paraName) {
  50. return arr[1];
  51. }
  52. }
  53. return "";
  54. } else {
  55. return "";
  56. }
  57. }
  58. this.https(getUrlParam('card_num'));
  59. },
  60. methods: {
  61. https(card_num) {
  62. this.request({
  63. url: "picture/sacn",
  64. data: {
  65. card_num: card_num,
  66. },
  67. }).then(res => {
  68. console.log(res)
  69. this.info = res.data;
  70. }).catch((res) => {
  71. // this.iscopy = false
  72. // console.log(res, "card_num=20ttp")
  73. uni.showToast({
  74. title: res.message,
  75. icon: 'none'
  76. })
  77. });
  78. },
  79. // 遮盖层复制
  80. close(e) {
  81. console.log(e)
  82. let content = this.info.way_power;
  83. this.isclose = false;
  84. if (!document.queryCommandSupported('copy')) {
  85. // 不支持
  86. return false
  87. }
  88. let textarea = document.createElement("input")
  89. textarea.value = content
  90. textarea.readOnly = "readOnly"
  91. document.body.appendChild(textarea)
  92. textarea.select() // 选择对象
  93. textarea.setSelectionRange(0, content.length) //核心
  94. let result = document.execCommand("copy") // 执行浏览器复制命令
  95. console.log("gggg", result)
  96. textarea.remove();
  97. window.location.href = this.info.url;
  98. return result
  99. },
  100. }
  101. }
  102. </script>
  103. <style>
  104. page {
  105. height: 100%;
  106. width: 100%;
  107. }
  108. .container_main {
  109. height: 100%;
  110. width: 100%;
  111. text-align: center;
  112. }
  113. .iFrame {
  114. height: 100%;
  115. width: 100%;
  116. border: none;
  117. }
  118. .container_main .container_img {
  119. height: 100%;
  120. width: 100%;
  121. position: fixed;
  122. z-index: 999;
  123. left: 0;
  124. }
  125. .model {
  126. height: 100%;
  127. width: 100%;
  128. position: fixed;
  129. z-index: 999;
  130. left: 0;
  131. }
  132. .model_s {
  133. height: 100%;
  134. width: 100%;
  135. position: fixed;
  136. z-index: 999;
  137. left: 0;
  138. top: 0;
  139. background: rgba(0, 0, 0, 0.5);
  140. }
  141. .model_s_pa {
  142. position: absolute;
  143. width: 300rpx;
  144. height: 300rpx;
  145. }
  146. .model_s_sz {
  147. width: 160rpx;
  148. height: 160rpx;
  149. margin-top: 52rpx;
  150. margin-left: 24rpx;
  151. }
  152. .model_s_text {
  153. font-size: 40rpx;
  154. color: #FFFFFF;
  155. text-align: center;
  156. }
  157. .container_title {
  158. font-size: 48rpx;
  159. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  160. margin-top: 90rpx;
  161. padding: 0 20rpx;
  162. }
  163. .container_desc {
  164. padding: 0 20rpx;
  165. margin-top: 50rpx;
  166. font-size: 38rpx;
  167. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  168. }
  169. .go_btn_pf {
  170. /* position: fixed; */
  171. /* bottom: 40rpx; */
  172. width: 100%;
  173. margin-top: 130rpx;
  174. font-size: 32rpx;
  175. }
  176. .go_btn {
  177. width: 630rpx;
  178. background: rgb(64, 158, 255);
  179. color: #FFFFFF;
  180. }
  181. /************以下为具体实现************/
  182. .wave {
  183. position: relative;
  184. width: 300rpx;
  185. height: 300rpx;
  186. text-align: center;
  187. font-size: 28rpx;
  188. margin: 0 auto;
  189. }
  190. .wave .circle {
  191. position: absolute;
  192. border-radius: 50%;
  193. opacity: 0;
  194. }
  195. /* 波纹效果 */
  196. .wave.ripple .circle {
  197. width: calc(100% - 6px);
  198. /* 减去边框的大小 */
  199. height: calc(100% - 6px);
  200. /* 减去边框的大小 */
  201. border: 3px solid #fff;
  202. }
  203. .wave.ripple .circle:first-child {
  204. animation: circle-opacity 2s infinite;
  205. }
  206. .wave.ripple .circle:nth-child(2) {
  207. animation: circle-opacity 2s infinite;
  208. animation-delay: 0.3s;
  209. }
  210. .wave.ripple .circle:nth-child(3) {
  211. animation: circle-opacity 2s infinite;
  212. animation-delay: 0.6s;
  213. }
  214. .wave.ripple .circle:nth-child(4) {
  215. animation: circle-opacity 2s infinite;
  216. animation-delay: 0.8s;
  217. }
  218. .wave.ripple .circle:nth-child(5) {
  219. animation: circle-opacity 2s infinite;
  220. animation-delay: 1s;
  221. }
  222. .wave.ripple .circle:nth-child(6) {
  223. animation: circle-opacity 2s infinite;
  224. animation-delay: 1.2s;
  225. }
  226. .wave.ripple.danger {
  227. color: #FFFFFF;
  228. }
  229. .wave.ripple.danger .circle {
  230. border-color: #FFFFFF;
  231. }
  232. .wave.ripple.warning {
  233. color: orange;
  234. }
  235. .wave.ripple.warning .circle {
  236. border-color: orange;
  237. }
  238. /* 波动效果 */
  239. /*
  240. .wave.solid .circle {
  241. width: 100%;
  242. height: 100%;
  243. background: #fff;
  244. }
  245. .wave.solid .circle:first-child {
  246. animation: circle-opacity 2s infinite;
  247. }
  248. .wave.solid.danger {
  249. color: red;
  250. }
  251. .wave.solid.danger .circle {
  252. background: red;
  253. }
  254. .wave.solid.warning {
  255. color: orange;
  256. }
  257. .wave.solid.warning .circle {
  258. background: orange;
  259. } */
  260. @keyframes circle-opacity {
  261. from {
  262. opacity: 1;
  263. transform: scale(0);
  264. }
  265. to {
  266. opacity: 0;
  267. transform: scale(1);
  268. }
  269. }
  270. </style>