123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- <template>
- <view class="content">
- <block v-if="isclose">
- <view v-if="info.hj_state==2" class="model" @click="close"></view>
- <view class="model_s flex-center" v-else @click="close">
- <view class="">
- <view class="wave ripple danger">
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="circle"></view>
- <view class="model_s_pa flex-center">
- <image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
- </view>
- </view>
- <view class="model_s_text">
- 点击进入
- </view>
- </view>
- </view>
- </block>
- <web-view :src="info.url"></web-view>
- </view>
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- data() {
- return {
- info: {},
- url: "",
- URL: getApp().globalData.URL,
- isclose: true,
- }
- },
- onLoad(e) {
- function getUrlParam(paraName) {
- let url = window.location.href;
- var arrObj = url.split("?");
- if (arrObj.length > 1) {
- var arr;
- for (var i = 0; i < arrObj.length; i++) {
- arr = arrObj[i].split("=");
- console.log(arr)
- if (arr != null && arr[0] == paraName) {
- return arr[1];
- }
- }
- return "";
- } else {
- return "";
- }
- }
- this.https(getUrlParam('card_num'));
- },
- methods: {
- https(card_num) {
- this.request({
- url: "picture/sacn",
- data: {
- card_num: card_num,
- },
- }).then(res => {
- console.log(res)
- this.info = res.data;
- }).catch((res) => {
- // this.iscopy = false
- // console.log(res, "card_num=20ttp")
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
-
- // 遮盖层复制
- close(e) {
- console.log(e)
- let content = this.info.way_power;
- this.isclose = false;
- if (!document.queryCommandSupported('copy')) {
- // 不支持
- return false
- }
- let textarea = document.createElement("input")
- textarea.value = content
- textarea.readOnly = "readOnly"
- document.body.appendChild(textarea)
- textarea.select() // 选择对象
- textarea.setSelectionRange(0, content.length) //核心
- let result = document.execCommand("copy") // 执行浏览器复制命令
- console.log("gggg", result)
- textarea.remove();
- window.location.href = this.info.url;
- return result
- },
- }
- }
- </script>
- <style>
- page {
- height: 100%;
- width: 100%;
- }
- .container_main {
- height: 100%;
- width: 100%;
- text-align: center;
- }
- .iFrame {
- height: 100%;
- width: 100%;
- border: none;
- }
- .container_main .container_img {
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 999;
- left: 0;
- }
- .model {
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 999;
- left: 0;
- }
- .model_s {
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 999;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.5);
- }
- .model_s_pa {
- position: absolute;
- width: 300rpx;
- height: 300rpx;
- }
- .model_s_sz {
- width: 160rpx;
- height: 160rpx;
- margin-top: 52rpx;
- margin-left: 24rpx;
- }
- .model_s_text {
- font-size: 40rpx;
- color: #FFFFFF;
- text-align: center;
- }
- .container_title {
- font-size: 48rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- margin-top: 90rpx;
- padding: 0 20rpx;
- }
- .container_desc {
- padding: 0 20rpx;
- margin-top: 50rpx;
- font-size: 38rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- }
- .go_btn_pf {
- /* position: fixed; */
- /* bottom: 40rpx; */
- width: 100%;
- margin-top: 130rpx;
- font-size: 32rpx;
- }
- .go_btn {
- width: 630rpx;
- background: rgb(64, 158, 255);
- color: #FFFFFF;
- }
- /************以下为具体实现************/
- .wave {
- position: relative;
- width: 300rpx;
- height: 300rpx;
- text-align: center;
- font-size: 28rpx;
- margin: 0 auto;
- }
- .wave .circle {
- position: absolute;
- border-radius: 50%;
- opacity: 0;
- }
- /* 波纹效果 */
- .wave.ripple .circle {
- width: calc(100% - 6px);
- /* 减去边框的大小 */
- height: calc(100% - 6px);
- /* 减去边框的大小 */
- border: 3px solid #fff;
- }
- .wave.ripple .circle:first-child {
- animation: circle-opacity 2s infinite;
- }
- .wave.ripple .circle:nth-child(2) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.3s;
- }
- .wave.ripple .circle:nth-child(3) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.6s;
- }
- .wave.ripple .circle:nth-child(4) {
- animation: circle-opacity 2s infinite;
- animation-delay: 0.8s;
- }
- .wave.ripple .circle:nth-child(5) {
- animation: circle-opacity 2s infinite;
- animation-delay: 1s;
- }
- .wave.ripple .circle:nth-child(6) {
- animation: circle-opacity 2s infinite;
- animation-delay: 1.2s;
- }
- .wave.ripple.danger {
- color: #FFFFFF;
- }
- .wave.ripple.danger .circle {
- border-color: #FFFFFF;
- }
- .wave.ripple.warning {
- color: orange;
- }
- .wave.ripple.warning .circle {
- border-color: orange;
- }
- /* 波动效果 */
- /*
- .wave.solid .circle {
- width: 100%;
- height: 100%;
- background: #fff;
- }
- .wave.solid .circle:first-child {
- animation: circle-opacity 2s infinite;
- }
- .wave.solid.danger {
- color: red;
- }
- .wave.solid.danger .circle {
- background: red;
- }
- .wave.solid.warning {
- color: orange;
- }
- .wave.solid.warning .circle {
- background: orange;
- } */
- @keyframes circle-opacity {
- from {
- opacity: 1;
- transform: scale(0);
- }
- to {
- opacity: 0;
- transform: scale(1);
- }
- }
- </style>
|