Skip to content

N
newLive
Commit 834c050c authored by mengqr's avatar mengqr
Browse files
Options

修改直播卡片问题

parent 3ffebbdf
Hide whitespace changes
Inline Side-by-side
Showing with 1230 additions and 13921 deletions
package-lock.json
View file @ 834c050c
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 834c050c
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"@liveqing/liveplayer": "^2.7.0", "@liveqing/liveplayer": "^2.7.0",
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"html2canvas": "^1.4.1",
"jquery": "^3.6.1", "jquery": "^3.6.1",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"mint-ui": "^2.2.13", "mint-ui": "^2.2.13",
......
src/axios/request.js
View file @ 834c050c
...@@ -9,9 +9,9 @@ const appName = "test5" ...@@ -9,9 +9,9 @@ const appName = "test5"
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
// 接口路径 // 接口路径
const BASEURL_TEST = 'https://api.douniu8.com' const BASEURL_TEST = 'https://test6.douniu8.com'
// const BASEURL_TEST = 'http://39.105.193.58:8081' // const BASEURL_TEST = 'http://39.105.193.58:8081'
const BASEURL_PROD = 'https://api.douniu8.com' const BASEURL_PROD = 'https://test6.douniu8.com'
const CONTRACT_TEST = 'http://47.95.140.89:9090' const CONTRACT_TEST = 'http://47.95.140.89:9090'
const CONTRACT_PROD = 'http://ht.douniu8.com:9090' const CONTRACT_PROD = 'http://ht.douniu8.com:9090'
const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST; const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST;
......
src/components/plugin/shareCard.vue
View file @ 834c050c
<template> <template>
<div class="body"> <div class="body">
<img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt=""> <img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt="">
<div v-if="ifShow"> <img v-if="ifPhoto" :src="photoImg" class="photo-img" alt="">
<div v-if="ifShow" class="myImagePass" id="myImage">
<div >
<img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt=""> <img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt="">
<img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt=""> <img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt="">
<img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt=""> <img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt="">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<img class="shareTips" v-if="ifTips" @click="clickTips()" src="../../common/img/shareTips.png" alt="">
<!-- 信息样式 --> <!-- 信息样式 -->
<div v-if="checkType==0"> <div v-if="checkType==0">
<img class="headImg" :src="headPro" alt=""> <img class="headImg" :src="headPro" alt="">
...@@ -46,7 +49,14 @@ ...@@ -46,7 +49,14 @@
:logoScale="0.2"> :logoScale="0.2">
</vue-qr> </vue-qr>
</div>
</div> </div>
</div>
<div v-if="ifShow">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<img class="shareTips" v-if="ifTips" @click="clickTips()" src="../../common/img/shareTips.png" alt="">
<div class="bottom-countent"> <div class="bottom-countent">
<div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}"> <div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}">
<img class="small-img" src="../../common/img/thumbnail-One.png" alt=""> <img class="small-img" src="../../common/img/thumbnail-One.png" alt="">
...@@ -81,6 +91,7 @@ ...@@ -81,6 +91,7 @@
<script> <script>
import VueQr from 'vue-qr' import VueQr from 'vue-qr'
import html2canvas from "html2canvas";
export default { export default {
name: 'shareCard', name: 'shareCard',
components:{ components:{
...@@ -98,8 +109,9 @@ export default { ...@@ -98,8 +109,9 @@ export default {
checkType:0, checkType:0,
copyContent:window.location.href,//需要复制的内容 copyContent:window.location.href,//需要复制的内容
ifShow:false, ifShow:false,
ifPhoto:false,//显示拍照图片
imgUrl: 'https://baidu.com',//二维码地址 imgUrl: 'https://baidu.com',//二维码地址
photoImg:'',//拍照图片
headPro:'',//头像图片 headPro:'',//头像图片
udName:'',//主播名称 udName:'',//主播名称
lvrImg:'',//占位图 lvrImg:'',//占位图
...@@ -110,7 +122,7 @@ export default { ...@@ -110,7 +122,7 @@ export default {
created() { created() {
this.liveList()
// this.getMessage() // this.getMessage()
}, },
...@@ -118,6 +130,11 @@ export default { ...@@ -118,6 +130,11 @@ export default {
methods: { methods: {
checkImg(e){ checkImg(e){
this.checkType=e this.checkType=e
this.ifPhoto=false
//延时拍照
setTimeout(() => {
this.saveImage()
}, 1000);
}, },
onCopy({value}){ onCopy({value}){
// console.log('success',value); // console.log('success',value);
...@@ -126,6 +143,125 @@ export default { ...@@ -126,6 +143,125 @@ export default {
console.log('复制成功') console.log('复制成功')
}, },
//直播详情
liveList(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.liveDetail(temp).then(res=>{
let photo=res.data.data.udPhotoFileid
let boxImg=res.data.data.lvrImgLargeUrl
// this.headPro=res.data.data.udPhotoFileid//头像图片
this.udName=res.data.data.udNickname//主播名称
// this.lvrImg=res.data.data.lvrImgLargeUrl//占位图
this.liveName=res.data.data.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
this.urlTobase64(photo)
this.urlTobaseTwo64(boxImg)
})
},
//截取图片
saveImage() {
// let aaa=this.urlTobase64(this.coverImg)
// console.log("的撒发生",aaa) // 最终拿到的base64值
let aca=document.querySelector("#myImage")
console.log('萨芬',aca)
html2canvas(document.querySelector("#myImage"),{
useCORS: true, //这个为true代表允许跨域
allowTaint: false,
logging: false,
letterRendering: true,
// width:window.screen.availWidth,
// height:window.screen.availHeight,
// windowWidth:document.body.scrollWidth,
// windowHeight:document.body.scrollHeight,
// x:0,
// y:window.pageYOffset
}).then((canvas) => {
// var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log("案说法",canvas.toDataURL())
this.photoImg=canvas.toDataURL()
if(this.photoImg){
this.ifPhoto=true
}else{
this.ifPhoto=false
}
// var link = document.getElementById("link");
// link.setAttribute("download", "海报.png");
// link.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
// link.click();
})
},
//转换图片
urlTobase64(url) {
var that = this
var img = new Image()
img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存
//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64)
img.setAttribute('crossOrigin', '*')
if (url) {
img.onload = function() {
var base64Url = that.getBase64Image(img)
console.log("的撒发生",base64Url) // 最终拿到的base64值
that.headPro=base64Url
}
}
},
//转换图片
urlTobaseTwo64(url) {
var that = this
var img = new Image()
img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存
//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64)
img.setAttribute('crossOrigin', '*')
if (url) {
img.onload = function() {
var base64Url = that.getBase64ImageTwo(img)
that.lvrImg=base64Url
console.log("的撒发生",base64Url) // 最终拿到的base64值
}
}
},
//转换图片
getBase64Image(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/png
return dataURL
},
//转换图片
getBase64ImageTwo(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/png
return dataURL
},
onError({value}){ onError({value}){
// console.log('error',value) // console.log('error',value)
// console.log('复制成功') // console.log('复制成功')
...@@ -147,11 +283,21 @@ this.ifTips=false ...@@ -147,11 +283,21 @@ this.ifTips=false
}, },
//点击分享按钮 //点击分享按钮
clickShare(){ clickShare(){
if(this.ifShow==false){ if(this.ifShow==false){
this.ifShow=true this.ifShow=true
//延时拍照
setTimeout(() => {
this.saveImage()
}, 1000);
}else{ }else{
this.ifShow=false this.ifShow=false
this.ifPhoto=false
} }
console.log("头像信息",this.headPortrait) console.log("头像信息",this.headPortrait)
console.log("主播名称",this.udNickname) console.log("主播名称",this.udNickname)
console.log("直播名称",this.lvrName) console.log("直播名称",this.lvrName)
...@@ -160,11 +306,7 @@ clickShare(){ ...@@ -160,11 +306,7 @@ clickShare(){
// udName:'',//主播名称 // udName:'',//主播名称
// lvrImg:'',//占位图 // lvrImg:'',//占位图
// liveName:'',//房间名称 // liveName:'',//房间名称
this.headPro=this.headPortrait//头像图片
this.udName=this.udNickname//主播名称
this.lvrImg=this.lvrImgLargeUrl//占位图
this.liveName=this.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
} }
}, },
}; };
...@@ -177,9 +319,27 @@ this.imgUrl=window.location.href//二维码地址 ...@@ -177,9 +319,27 @@ this.imgUrl=window.location.href//二维码地址
.style-one{ .style-one{
height: 145vw; height: 145vw;
position: absolute; position: absolute;
top: 10vw; top: 0;
z-index: 99; z-index: 99;
left:0;
width: 85vw;
}
.myImagePass{
position: absolute;
top: 10vw;
left: 7.5vw;
/* background: greenyellow; */
z-index: -1;
height: 145vw;
width: 85vw;
}
.photo-img{
position: absolute;
top: 10vw;
left: 7.5vw; left: 7.5vw;
/* background: greenyellow; */
z-index: 130;
height: 145vw;
width: 85vw; width: 85vw;
} }
.bottom-countent{ .bottom-countent{
...@@ -306,89 +466,89 @@ font-size: 4vw; ...@@ -306,89 +466,89 @@ font-size: 4vw;
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14vw;
border-radius: 50%; border-radius: 50%;
} }
.headImgTwo{ .headImgTwo{
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14.5vw;
border-radius: 50%; border-radius: 50%;
} }
.headImgThree{ .headImgThree{
height: 19vw; height: 19vw;
width: 19vw; width: 19vw;
position: absolute; position: absolute;
top: 20vw; top: 10vw;
z-index: 100; z-index: 100;
left: 40.5vw; left: 32.5vw;
border-radius: 50%; border-radius: 50%;
} }
.udStyle{ .udStyle{
font-size: 5vw; font-size: 5vw;
color: white; color: white;
position: absolute; position: absolute;
top: 41vw; top: 31vw;
z-index: 100; z-index: 100;
left: 22vw; left: 14vw;
} }
.lvrImg{ .lvrImg{
height: 39vw; height: 39vw;
width: 73vw; width: 73vw;
position: absolute; position: absolute;
top: 62vw; top: 52vw;
border-radius: 1vw; border-radius: 1vw;
left: 13.5vw; left: 6vw;
z-index: 100; z-index: 100;
} }
.lvrImgTwo{ .lvrImgTwo{
height: 39vw; height: 39vw;
width: 71vw; width: 71vw;
position: absolute; position: absolute;
top: 62vw; top: 52vw;
border-radius: 1vw; border-radius: 1vw;
left: 14.5vw; left: 6.8vw;
z-index: 100; z-index: 100;
} }
.lvrImgThree{ .lvrImgThree{
height: 32vw; height: 32vw;
width: 58vw; width: 58vw;
position: absolute; position: absolute;
top: 68vw; top: 58vw;
border-radius: 1vw; border-radius: 1vw;
left: 20.5vw; left: 12.9vw;
z-index: 100; z-index: 100;
} }
.lvrName{ .lvrName{
font-size: 4vw; font-size: 4vw;
width: 68vw; width: 68vw;
position: absolute; position: absolute;
top: 102vw; top: 92vw;
z-index: 100; z-index: 100;
left: 15vw; left: 8vw;
} }
.lvrNameTwo{ .lvrNameTwo{
font-size: 3.8vw; font-size: 3.8vw;
width: 66vw; width: 66vw;
position: absolute; position: absolute;
top: 102vw; top: 92vw;
color: white; color: white;
z-index: 100; z-index: 100;
left: 16vw; left: 9vw;
} }
.lvrNameThree{ .lvrNameThree{
font-size: 3.8vw; font-size: 3.8vw;
position: absolute; position: absolute;
top: 100vw; top: 91vw;
width: 56vw; width: 56vw;
color: white; color: white;
z-index: 100; z-index: 100;
left: 21vw; left: 15vw;
} }
.pressShare{ .pressShare{
height: 5vw; height: 5vw;
...@@ -399,24 +559,24 @@ font-size: 4vw; ...@@ -399,24 +559,24 @@ font-size: 4vw;
} }
.qrCode{ .qrCode{
position: absolute; position: absolute;
top: 120vw; top: 110vw;
left: 58vw; left: 51vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
} }
.qrCodeTwo{ .qrCodeTwo{
position: absolute; position: absolute;
top: 124vw; top: 114vw;
left: 60.5vw; left: 53.5vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
} }
.qrCodeThree{ .qrCodeThree{
position: absolute; position: absolute;
top: 124vw; top: 114vw;
left: 17vw; left: 9vw;
height: 22vw; height: 22vw;
width: 22vw; width: 22vw;
z-index: 100; z-index: 100;
......
src/router/index.js
View file @ 834c050c
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import store from '../store/index' import store from '../store/index'
import test from '../views/test.vue'
import sign from '../views/sign' import sign from '../views/sign'
import password from '../views/password' import password from '../views/password'
import register from '../views/register' import register from '../views/register'
...@@ -54,7 +55,12 @@ const router = new Router({ ...@@ -54,7 +55,12 @@ const router = new Router({
component:sign, component:sign,
// 判断是否需要登录 // 判断是否需要登录
}, },
{
path: '/test',
name: 'test',
component:test,
// 判断是否需要登录
},
{ {
path: '/password', path: '/password',
name: 'password', name: 'password',
......
src/views/fullScreen.vue
View file @ 834c050c
...@@ -651,7 +651,7 @@ this.pten = false ...@@ -651,7 +651,7 @@ this.pten = false
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=true
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -676,8 +676,8 @@ this.pten = false ...@@ -676,8 +676,8 @@ this.pten = false
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=false
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
} }
...@@ -1087,11 +1087,11 @@ let temp=this.qs.stringify({ ...@@ -1087,11 +1087,11 @@ let temp=this.qs.stringify({
} }
.home-number{ .home-number{
font-size: 1vw; font-size: 1vw;
transform: scale(0.7); transform: scale(0.75);
position: absolute; position: absolute;
top: 6vw; top: 6vw;
left: 18vw; left: 18.5vw;
z-index:99; z-index: 99;
color: white; color: white;
} }
.follow-img{ .follow-img{
......
src/views/live.vue
View file @ 834c050c
...@@ -512,7 +512,7 @@ export default { ...@@ -512,7 +512,7 @@ export default {
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=true this.ifFollow=true
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -538,7 +538,7 @@ export default { ...@@ -538,7 +538,7 @@ export default {
let img=sessionStorage.getItem("isReg") let img=sessionStorage.getItem("isReg")
this.server.live.follow(temp).then(res=>{ this.server.live.follow(temp).then(res=>{
if(res.data.data.businessCode==20){ if(res.data.code==200){
this.ifFollow=false this.ifFollow=false
}else{ }else{
alert(res.data.data.businessMessage) alert(res.data.data.businessMessage)
...@@ -1149,11 +1149,11 @@ this.pten = false ...@@ -1149,11 +1149,11 @@ this.pten = false
z-index: 89; z-index: 89;
} }
.home-number{ .home-number{
font-size: 1vw; font-size: 1vw;
transform: scale(0.7); transform: scale(0.75);
position: absolute; position: absolute;
top: 63vw; top: 63vw;
left: 60vw; left: 59.5vw;
z-index: 89; z-index: 89;
color: white; color: white;
} }
......
src/views/liveList.vue
View file @ 834c050c
...@@ -57,6 +57,7 @@ export default { ...@@ -57,6 +57,7 @@ export default {
created(){ created(){
this.getState() this.getState()
}, },
mounted() { mounted() {
this.getRecommendList() this.getRecommendList()
this.getList() this.getList()
...@@ -135,6 +136,7 @@ export default { ...@@ -135,6 +136,7 @@ export default {
}) })
}, },
getState(){ getState(){
let token=sessionStorage.getItem("token") let token=sessionStorage.getItem("token")
let img=sessionStorage.getItem("udPhotoFileid") let img=sessionStorage.getItem("udPhotoFileid")
console.log("就阿婆啊v发",token) console.log("就阿婆啊v发",token)
...@@ -144,6 +146,7 @@ export default { ...@@ -144,6 +146,7 @@ export default {
this.userImg=img this.userImg=img
}else{ }else{
this.ifLog=1 this.ifLog=1
} }
}else{ }else{
...@@ -196,8 +199,8 @@ export default { ...@@ -196,8 +199,8 @@ export default {
this.server.live.tourist(temp).then(res=>{ this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token let thisToken= res.data.data.token
window.sessionStorage.setItem('token', thisToken);//token window.sessionStorage.setItem('token', thisToken);//token
this.$router.go(0) // this.$router.go(0)
window.location.reload();
}) })
}, },
mine(){ mine(){
......
src/views/sign.vue
View file @ 834c050c
<template> <template>
<div id="body"> <div id="body">
<!-- <div class="black-background"> <!-- <div class="black-background">
</div> --> </div> -->
<div > <div>
<span class="title">短信验证</span>
<span class="title">短信验证</span> <span class="registerOne">短信已发送至：</span>
<span class="registerOne">短信已发送至：</span> <span class="registerPhone">+86 {{ userPhone }}</span>
<span class="registerPhone">+86 {{userPhone}}</span> <span class="registerTwo">手机验证码</span>
<span class="registerTwo">手机验证码</span> <input
<input type="number" id="firstNumber" @input="changeInput(0)" @blur="searchChangeTwo(0)" @focus="searchChange(0)" v-model="numberOne" oninput="if(value.length>1)value=value.slice(0,6)" :class="{wbk11:!ifRed0,wbkRed:ifRed0}"> type="number"
<input type="number" id="secondNumber" @input="changeInput(1)" @blur="searchChangeTwo(1)" style="left:20vw" @focus="searchChange(1)" v-model="numberTwo" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed1,wbkRed:ifRed1}"> id="firstNumber"
<input type="number" id="threeNumber" @input="changeInput(2)" @blur="searchChangeTwo(2)" style="left:35vw" @focus="searchChange(2)" v-model="numberThree" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed2,wbkRed:ifRed2}"> @input="changeInput(0)"
<input type="number" id="fourNumber" @input="changeInput(3)" @blur="searchChangeTwo(3)" style="left:50vw" @focus="searchChange(3)" v-model="numberFour" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed3,wbkRed:ifRed3}"> @blur="searchChangeTwo(0)"
<input type="number" id="fiveNumber" @input="changeInput(4)" @blur="searchChangeTwo(4)" style="left:65vw" @focus="searchChange(4)" v-model="numberFive" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed4,wbkRed:ifRed4}"> @focus="searchChange(0)"
<input type="number" id="sixNumber" @input="changeInput(5)" @blur="searchChangeTwo(5)" style="left:80vw" @focus="searchChange(5)" v-model="numberSix" oninput="if(value.length>1)value=value.slice(0,1)" :class="{wbk11:!ifRed5,wbkRed:ifRed5}"> v-model="numberOne"
oninput="if(value.length>1)value=value.slice(0,6)"
<img class="default-img" v-if="ifClick==false" src="../common/img/default-img.png" alt=""> :class="{ wbk11: !ifRed0, wbkRed: ifRed0 }"
<img class="default-img" v-if="ifClick==true" @click="goTo()" src="../common/img/new-send.png" alt=""> />
<span v-show="ifSend" class="send" @click="sendButton()" >重新发送</span> <input
<span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S重新发送</span> type="number"
id="secondNumber"
<!-- <span class="title">验证码登录</span> @input="changeInput(1)"
@blur="searchChangeTwo(1)"
style="left: 20vw"
@focus="searchChange(1)"
v-model="numberTwo"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed1, wbkRed: ifRed1 }"
/>
<input
type="number"
id="threeNumber"
@input="changeInput(2)"
@blur="searchChangeTwo(2)"
style="left: 35vw"
@focus="searchChange(2)"
v-model="numberThree"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed2, wbkRed: ifRed2 }"
/>
<input
type="number"
id="fourNumber"
@input="changeInput(3)"
@blur="searchChangeTwo(3)"
style="left: 50vw"
@focus="searchChange(3)"
v-model="numberFour"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed3, wbkRed: ifRed3 }"
/>
<input
type="number"
id="fiveNumber"
@input="changeInput(4)"
@blur="searchChangeTwo(4)"
style="left: 65vw"
@focus="searchChange(4)"
v-model="numberFive"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed4, wbkRed: ifRed4 }"
/>
<input
type="number"
id="sixNumber"
@input="changeInput(5)"
@blur="searchChangeTwo(5)"
style="left: 80vw"
@focus="searchChange(5)"
v-model="numberSix"
oninput="if(value.length>1)value=value.slice(0,1)"
:class="{ wbk11: !ifRed5, wbkRed: ifRed5 }"
/>
<img
class="default-img"
v-if="ifClick == false"
src="../common/img/default-img.png"
alt=""
/>
<img
class="default-img"
v-if="ifClick == true"
@click="goTo()"
src="../common/img/new-send.png"
alt=""
/>
<span v-show="ifSend" class="send" @click="sendButton()">重新发送</span>
<span v-show="!ifSend" class="sendTwo" id="sendBtn"
>{{ count }}S重新发送</span
>
<!-- <span class="title">验证码登录</span>
<input type="number" v-model="userPhone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk1"> <input type="number" v-model="userPhone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk1">
<input type="number" v-model="verification " placeholder="输入验证码" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk2"> <input type="number" v-model="verification " placeholder="输入验证码" oninput="if(value.length>11)value=value.slice(0,11)" class="wbk2">
<span v-show="ifSend" class="send" @click="sendButton()" >发送验证码</span> <span v-show="ifSend" class="send" @click="sendButton()" >发送验证码</span>
<span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S后获取</span> <span v-show="!ifSend" class="sendTwo" id="sendBtn">{{count}}S后获取</span>
<button class="sure" @click="signButton()">登录</button> <button class="sure" @click="signButton()">登录</button>
<span class="account " @click="password">账号登录</span> --> <span class="account " @click="password">账号登录</span> -->
<div class="tips" style="display: none;"> <div class="tips" style="display: none">
<span>发送成功</span> <span>发送成功</span>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue";
import store from '../store/index'; import store from "../store/index";
import $ from 'jquery' import $ from "jquery";
import {Toast,Button} from "mint-ui"; import { Toast, Button } from "mint-ui";
import { Header } from 'mint-ui'; import { Header } from "mint-ui";
Vue.component(Button.name, Button); Vue.component(Button.name, Button);
import '../../node_modules/mint-ui/lib/style.css' import "../../node_modules/mint-ui/lib/style.css";
Vue.component(Header.name, Header); Vue.component(Header.name, Header);
export default { export default {
name: "H5LiveSign",
name: 'H5LiveSign',
data() {
return {
ifclick: true,
userPhone: this.$route.query.phone,
verification: "",
count: "",
ifRed0: false,
ifRed1: false,
ifRed2: false,
ifRed3: false,
ifRed4: false,
ifRed5: false,
ifSend: true,
ifClick: false,
device: "",
system: "",
times: null,
timestamp: Date.parse(new Date()) / 1000,
numberOne: "",
numberTwo: "",
numberThree: "",
numberFour: "",
numberFive: "",
numberSix: "",
isweixin: false,
};
},
data() { mounted() {
return { this.showLog();
ifclick:true, this.sendButton();
userPhone:this.$route.query.phone, },
verification:'',
count:'', methods: {
ifRed0:false, password() {
ifRed1:false, this.$router.push({
ifRed2:false, path: "/password",
ifRed3:false, });
ifRed4:false, },
ifRed5:false, // 判断是否为微信浏览器
ifSend:true, isWeixinBrowser() {
ifClick:false, let ua = navigator.userAgent.toLowerCase();
device:'', return /micromessenger/.test(ua) ? true : false;
system:'',
times:null,
timestamp:Date.parse(new Date())/1000,
numberOne:'',
numberTwo:'',
numberThree:'',
numberFour:'',
numberFive:'',
numberSix:'',
};
}, },
changeInput(e) {
console.log("安抚", e);
if (e == 0 && this.numberOne != "") {
console.log("哈哈");
document.getElementById("secondNumber").focus();
this.ifRed1 = true;
} else if (e == 1 && this.numberTwo != "") {
document.getElementById("threeNumber").focus();
this.ifRed2 = true;
} else if (e == 2 && this.numberThree != "") {
document.getElementById("fourNumber").focus();
this.ifRed3 = true;
} else if (e == 3 && this.numberFour != "") {
document.getElementById("fiveNumber").focus();
this.ifRed4 = true;
} else if (e == 4 && this.numberFive != "") {
document.getElementById("sixNumber").focus();
this.ifRed5 = true;
} else if (e == 5 && this.numberSix != "") {
// document.getElementById('threeNumber').focus();
// this.ifRed5=true
this.ifClick = true;
}
mounted() { if (e == 0 && this.numberOne.length == 6) {
this.showLog() let stmp = this.numberOne;
this.sendButton()
console.log("啊", stmp.slice(1, 2));
this.numberOne = stmp.slice(0, 1);
this.numberTwo = stmp.slice(1, 2);
this.numberThree = stmp.slice(2, 3);
this.numberFour = stmp.slice(3, 4);
this.numberFive = stmp.slice(4, 5);
this.numberSix = stmp.slice(5, 6);
document.getElementById("sixNumber").focus();
this.ifRed5 = true;
this.ifclick = true;
}
// if(this.numberOne==''){
// document.getElementById('firstNumber').focus();
// this.ifRed0=true
// }else if(this.numberTwo==''){
// document.getElementById('secondNumber').focus();
// this.ifRed1=true
// }else if(this.numberThree==''){
// document.getElementById('threeNumber').focus();
// this.ifRed2=true
// }else if(this.numberFour==''){
// document.getElementById('fourNumber').focus();
// this.ifRed3=true
// }else if(this.numberFive==''){
// document.getElementById('fiveNumber').focus();
// this.ifRed4=true
// }
// else{
// this.ifRed5=true
// }
}, },
searchChange(e) {
// let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix
// console.log("岸上观光",verification)
// document.getElementById('firstNumber').focus();//设置用户名的文本框为焦点。
if (e == 0) {
this.ifRed0 = true;
} else if (e == 1) {
if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
this.ifRed0 = true;
} else {
this.ifRed1 = true;
}
} else if (e == 2) {
if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
this.ifRed0 = true;
} else if (this.numberTwo == "") {
document.getElementById("secondNumber").focus();
this.ifRed1 = true;
} else {
this.ifRed2 = true;
}
} else if (e == 3) {
if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
this.ifRed0 = true;
} else if (this.numberTwo == "") {
document.getElementById("secondNumber").focus();
this.ifRed1 = true;
} else if (this.numberThree == "") {
document.getElementById("threeNumber").focus();
this.ifRed2 = true;
} else {
this.ifRed3 = true;
}
} else if (e == 4) {
if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
this.ifRed0 = true;
} else if (this.numberTwo == "") {
document.getElementById("secondNumber").focus();
this.ifRed1 = true;
} else if (this.numberThree == "") {
document.getElementById("threeNumber").focus();
this.ifRed2 = true;
} else if (this.numberFour == "") {
document.getElementById("fourNumber").focus();
this.ifRed3 = true;
} else {
this.ifRed4 = true;
}
} else if (e == 5) {
if (this.numberOne == "") {
document.getElementById("firstNumber").focus();
this.ifRed0 = true;
} else if (this.numberTwo == "") {
document.getElementById("secondNumber").focus();
this.ifRed1 = true;
} else if (this.numberThree == "") {
document.getElementById("threeNumber").focus();
this.ifRed2 = true;
} else if (this.numberFour == "") {
document.getElementById("fourNumber").focus();
this.ifRed3 = true;
} else if (this.numberFive == "") {
document.getElementById("fiveNumber").focus();
this.ifRed4 = true;
} else {
this.ifRed5 = true;
}
}
if (e == 0 && this.numberOne.length == 6) {
let stmp = this.numberOne;
methods: { console.log("啊", stmp.slice(1, 2));
this.numberOne = stmp.slice(0, 1);
password(){ this.numberTwo = stmp.slice(1, 2);
this.$router.push( this.numberThree = stmp.slice(2, 3);
{ this.numberFour = stmp.slice(3, 4);
path:'/password', this.numberFive = stmp.slice(4, 5);
this.numberSix = stmp.slice(5, 6);
}); document.getElementById("sixNumber").focus();
}, this.ifRed5 = true;
changeInput(e){ this.ifclick = true;
console.log("安抚",e) }
if(e==0&&this.numberOne!=''){ // console.log("dss双方都是",this.userPhone)
console.log("哈哈") // if(this.userPhone &&this.ifCheck==true){
document.getElementById('secondNumber').focus(); // this.ifSend=true
this.ifRed1=true
}else if(e==1&&this.numberTwo!=''){
document.getElementById('threeNumber').focus();
this.ifRed2=true
}else if(e==2&&this.numberThree!=''){
document.getElementById('fourNumber').focus();
this.ifRed3=true
}else if(e==3&&this.numberFour!=''){
document.getElementById('fiveNumber').focus();
this.ifRed4=true
}else if(e==4&&this.numberFive!=''){
document.getElementById('sixNumber').focus();
this.ifRed5=true
}else if(e==5&&this.numberSix!=''){
// document.getElementById('threeNumber').focus();
// this.ifRed5=true
this.ifClick=true
}
if(e==0&&this.numberOne.length==6){ // }else{
// this.ifSend=false
let stmp=this.numberOne // }
},
console.log('啊',stmp.slice(1,2)) searchChangeTwo(e) {
this.numberOne=stmp.slice(0,1) if (e == 0) {
this.numberTwo=stmp.slice(1,2) this.ifRed0 = false;
this.numberThree=stmp.slice(2,3) } else if (e == 1) {
this.numberFour=stmp.slice(3,4) this.ifRed1 = false;
this.numberFive=stmp.slice(4,5) } else if (e == 2) {
this.numberSix=stmp.slice(5,6) this.ifRed2 = false;
document.getElementById('sixNumber').focus(); } else if (e == 3) {
this.ifRed5=true this.ifRed3 = false;
this.ifclick=true } else if (e == 4) {
} this.ifRed4 = false;
// if(this.numberOne==''){ } else if (e == 5) {
// document.getElementById('firstNumber').focus(); let verification =
// this.ifRed0=true this.numberOne +
// }else if(this.numberTwo==''){ this.numberTwo +
// document.getElementById('secondNumber').focus(); this.numberThree +
// this.ifRed1=true this.numberFour +
// }else if(this.numberThree==''){ this.numberFive +
// document.getElementById('threeNumber').focus(); this.numberSix;
// this.ifRed2=true console.log("岸上观光", verification);
// }else if(this.numberFour==''){ this.ifRed5 = false;
// document.getElementById('fourNumber').focus(); if (verification.length == 6) {
// this.ifRed3=true this.ifClick = true;
// }else if(this.numberFive==''){ } else {
// document.getElementById('fiveNumber').focus(); this.ifClick = false;
// this.ifRed4=true }
// } }
// else{ },
// this.ifRed5=true go_get() {
// } let temp = this.qs.stringify({
}, urlTag: "nh5",
searchChange(e){ });
// let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix this.server.live.buy_code(temp).then((res) => {
// console.log("岸上观光",verification) //order成功判断内置浏览器，在微信就授权，内置微信还是浏览器 微信jsapi 浏览器h5
// document.getElementById('firstNumber').focus();//设置用户名的文本框为焦点。 console.log(res.data);
if(e==0){ if (res.data.code == 200) {
this.ifRed0=true let url = res.data.data;
}else if(e==1){ window.location.href = url;
}
if(this.numberOne==''){ });
document.getElementById('firstNumber').focus(); },
this.ifRed0=true goTo() {
}else{ let verification =
this.ifRed1=true this.numberOne +
} this.numberTwo +
}else if(e==2){ this.numberThree +
if(this.numberOne==''){ this.numberFour +
document.getElementById('firstNumber').focus(); this.numberFive +
this.ifRed0=true this.numberSix;
}else if(this.numberTwo==''){ let temp = this.qs.stringify({
document.getElementById('secondNumber').focus(); pmAppVersion: 884,
this.ifRed1=true pmModel: "iphone",
} pmSystem: "ios",
else{ pmMac: 11,
this.ifRed2=true pmOperator: "无运营商",
} pmIp: 1,
phone: this.userPhone,
}else if(e==3){ vcode: verification,
if(this.numberOne==''){ });
document.getElementById('firstNumber').focus(); this.server.login.loginByPhone(temp).then((res) => {
this.ifRed0=true let thisToken = res.data.data.token;
}else if(this.numberTwo==''){ let udPhotoFileid = res.data.data.udPhotoFileid;
document.getElementById('secondNumber').focus(); let name = res.data.data.udNickname;
this.ifRed1=true let ubId = res.data.data.ubId;
}else if(this.numberThree==''){ let isReg = res.data.data.isReg;
document.getElementById('threeNumber').focus(); let openId = res.data.data.openId;
this.ifRed2=true sessionStorage.setItem("ubId", ubId); //用户id
}
else{
this.ifRed3=true
}
}else if(e==4){
if(this.numberOne==''){
document.getElementById('firstNumber').focus();
this.ifRed0=true
}else if(this.numberTwo==''){
document.getElementById('secondNumber').focus();
this.ifRed1=true
}else if(this.numberThree==''){
document.getElementById('threeNumber').focus();
this.ifRed2=true
}else if(this.numberFour==''){
document.getElementById('fourNumber').focus();
this.ifRed3=true
}
else{
this.ifRed4=true
}
}else if(e==5){
if(this.numberOne==''){
document.getElementById('firstNumber').focus();
this.ifRed0=true
}else if(this.numberTwo==''){
document.getElementById('secondNumber').focus();
this.ifRed1=true
}else if(this.numberThree==''){
document.getElementById('threeNumber').focus();
this.ifRed2=true
}else if(this.numberFour==''){
document.getElementById('fourNumber').focus();
this.ifRed3=true
}else if(this.numberFive==''){
document.getElementById('fiveNumber').focus();
this.ifRed4=true
}
else{
this.ifRed5=true
}
}
if(e==0&&this.numberOne.length==6){
let stmp=this.numberOne
console.log('啊',stmp.slice(1,2))
this.numberOne=stmp.slice(0,1)
this.numberTwo=stmp.slice(1,2)
this.numberThree=stmp.slice(2,3)
this.numberFour=stmp.slice(3,4)
this.numberFive=stmp.slice(4,5)
this.numberSix=stmp.slice(5,6)
document.getElementById('sixNumber').focus();
this.ifRed5=true
this.ifclick=true
}
// console.log("dss双方都是",this.userPhone)
// if(this.userPhone &&this.ifCheck==true){
// this.ifSend=true
// }else{
// this.ifSend=false
// }
},
searchChangeTwo(e){
if(e==0){
this.ifRed0=false
}else if(e==1){
this.ifRed1=false
}else if(e==2){
this.ifRed2=false
}else if(e==3){
this.ifRed3=false
}else if(e==4){
this.ifRed4=false
}else if(e==5){
let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix
console.log("岸上观光",verification)
this.ifRed5=false
if(verification.length==6){
this.ifClick=true
}else{
this.ifClick=false
}
}
},
go_get(){
let temp=this.qs.stringify({
urlTag:'nh5'
})
this.server.live.buy_code(temp).then(res=>{
//order成功判断内置浏览器，在微信就授权，内置微信还是浏览器 微信jsapi 浏览器h5
console.log(res.data)
if(res.data.code==200){
let url=res.data.data
window.location.href=url
}
})
}, sessionStorage.removeItem("token");
goTo(){ window.sessionStorage.setItem("token", thisToken); //token
let verification= this.numberOne +this.numberTwo+this.numberThree+this.numberFour+this.numberFive+this.numberSix window.sessionStorage.setItem("udPhotoFileid", udPhotoFileid); //头像
let temp=this.qs.stringify({ sessionStorage.setItem("name", name); //用户昵称
pmAppVersion:884, sessionStorage.setItem("isReg", isReg); //是否注册
pmModel:'iphone', sessionStorage.setItem("openId", openId); //opendid
pmSystem:'ios', store.commit("SET_TOKEN", thisToken);
pmMac:11, // this.getLive()
pmOperator:'无运营商', // this.go_get()
pmIp:1, //判断是否是微信浏览器
phone:this.userPhone, if (this.isweixin) {
vcode:verification, this.go_get();
}) } else {
this.server.login.loginByPhone(temp).then(res=>{ this.$router.push({
let thisToken= res.data.data.token path: "/",
let udPhotoFileid=res.data.data.udPhotoFileid });
let name=res.data.data.udNickname }
let ubId=res.data.data.ubId });
let isReg=res.data.data.isReg },
let openId=res.data.data.openId getLive() {
sessionStorage.setItem("ubId", ubId);//用户id let temp = this.qs.stringify({
pmAppVersion: 884,
pmModel: "iphone",
pmSystem: "ios",
pmMac: 11,
pmOperator: "无运营商",
pmIp: 1,
// ubPhone:this.userPhone,
// vcCode:this.verification,
// udPwd:pwd,
});
this.server.live.getLive(temp).then((res) => {
let arr = res.data.data.appSingleLiveResponseVOList;
arr.forEach((i, index) => {
if (i.lvrId == 115) {
console.log("撒发达", i.lvrLiveType);
if (i.lvrLiveType == 0) {
this.$router.push({
path: "/live",
});
} else {
this.$router.push({
path: "/fullScreen",
// query:{type:i.lvrStatus}
});
}
// lvrStatus 0 未开播、1 直播中
//lvrLiveType 0 横屏、1 竖屏
}
});
});
},
sendButton() {
// console.log("撒旦发生",this.timestamp*1000)
window.sessionStorage.setItem('token', thisToken);//token var stringA =
window.sessionStorage.setItem('udPhotoFileid', udPhotoFileid);//头像 "app=douniucaijing&body=thisisbody&timestamp=" + this.timestamp;
sessionStorage.setItem("name", name);//用户昵称 let userPhone = this.userPhone;
sessionStorage.setItem("isReg", isReg);//是否注册 var sign = this.$md5(stringA);
sessionStorage.setItem("openId", openId);//opendid
store.commit("SET_TOKEN", thisToken);
// this.getLive()
this.go_get()
// this.$router.push(
// {
// path:'/',
// });
})
},
getLive(){
let temp=this.qs.stringify({
pmAppVersion:884,
pmModel:'iphone',
pmSystem:'ios',
pmMac:11,
pmOperator:'无运营商',
pmIp:1,
// ubPhone:this.userPhone,
// vcCode:this.verification,
// udPwd:pwd,
})
this.server.live.getLive(temp).then(res=>{
let arr=res.data.data.appSingleLiveResponseVOList
arr.forEach((i,index)=>{
if(i.lvrId==115){
console.log("撒发达",i.lvrLiveType)
if(i.lvrLiveType==0){
this.$router.push(
{
path:'/live',
});
}else{
this.$router.push(
{
path:'/fullScreen',
// query:{type:i.lvrStatus}
});
}
// lvrStatus 0 未开播、1 直播中
//lvrLiveType 0 横屏、1 竖屏
}
})
}) var phoneReg =
}, /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //定义邮箱的正则表达式
sendButton(){ if (!phoneReg.test(userPhone)) {
// console.log("撒旦发生",this.timestamp*1000) alert("您输入的手机号格式不正确");
} else {
let temp = this.qs.stringify({
sign: sign,
var stringA="app=douniucaijing&body=thisisbody&timestamp="+this.timestamp; timestamp: this.timestamp,
let userPhone=this.userPhone ubPhone: userPhone,
var sign = this.$md5(stringA) type: 2,
pmAppVersion: 884,
var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //定义邮箱的正则表达式 });
if (!phoneReg.test(userPhone)) { this.server.login.getMessage(temp).then((res) => {
alert("您输入的手机号格式不正确"); if (res.data.code == 200) {
$(".tips").show().delay(3000).hide(300);
const TIME_COUNT = 59;
}else{
let temp=this.qs.stringify({
sign:sign,
timestamp:this.timestamp,
ubPhone:userPhone,
type:2,
pmAppVersion:884,
})
this.server.login.getMessage(temp).then(res=>{
if(res.data.code==200){
$('.tips').show().delay(3000).hide(300)
const TIME_COUNT = 59;
if (!this.times) { if (!this.times) {
this.count = TIME_COUNT; this.count = TIME_COUNT;
this.ifSend = false; this.ifSend = false;
this.times = setInterval(() => { this.times = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) { if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--; this.count--;
} else { } else {
this.ifSend = true; this.ifSend = true;
clearInterval(this.times); clearInterval(this.times);
this.times = null; this.times = null;
}
}, 1000)
}
} }
}, 1000);
}
}
});
}
},
}) // signButton(){
// if(!this.verification){
// alert('请输入验证码')
} // }else if(!this.userPhone){
// alert('请输入手机号')
}, // }else{
// // console.log("121")
// let temp=this.qs.stringify({
// pmAppVersion:884,
// pmModel:this.device,
// pmSystem:this.system,
// pmMac:11,
// pmOperator:'无运营商',
// pmIp:1,
// phone:this.userPhone,
// vcode:this.verification,
// })
// this.server.login.loginByPhone(temp).then(res=>{
// let thisToken= res.data.data.token
// let name=res.data.data.udNickname
// let ubId=res.data.data.ubId
// sessionStorage.setItem("ubId", ubId);
// window.sessionStorage.setItem('token', thisToken);
// sessionStorage.setItem("name", name);
// store.commit("SET_TOKEN", thisToken);
// this.getLive()
// signButton(){ // })
// if(!this.verification){ // }
// alert('请输入验证码') // },
// }else if(!this.userPhone){ showLog() {
// alert('请输入手机号') // 如果是微信浏览器
// }else{ // if (this.isWeixinBrowser()) {
// // console.log("121") // this.isweixin= true;
// let temp=this.qs.stringify({
// pmAppVersion:884, // }
// pmModel:this.device, let isWeixin = this.isWeixinBrowser();
// pmSystem:this.system, if (isWeixin) {
// pmMac:11, this.isweixin = true;
// pmOperator:'无运营商', } else {
// pmIp:1, this.isweixin = false;
// phone:this.userPhone, }
// vcode:this.verification, console.log("是多少故事", isWeixin);
// }) let webLog = {};
// this.server.login.loginByPhone(temp).then(res=>{ let userAgent = navigator.userAgent;
// let thisToken= res.data.data.token // 获取微信版本
// let name=res.data.data.udNickname let m1 = userAgent.match(/MicroMessenger.*?(?= )/);
// let ubId=res.data.data.ubId if (m1 && m1.length > 0) {
// sessionStorage.setItem("ubId", ubId); webLog.wechat = m1[0];
// window.sessionStorage.setItem('token', thisToken); }
// sessionStorage.setItem("name", name); // 苹果手机
// store.commit("SET_TOKEN", thisToken); if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
// this.getLive() // 获取设备名
if (userAgent.includes("iPad")) {
// }) webLog.device = "iPad";
// } } else {
// }, webLog.device = "iPhone";
showLog(){ }
// 获取操作系统版本
let webLog = {} m1 = userAgent.match(/iPhone OS .*?(?= )/);
let userAgent = navigator.userAgent if (m1 && m1.length > 0) {
// 获取微信版本 webLog.system = m1[0];
let m1 = userAgent.match(/MicroMessenger.*?(?= )/) }
if (m1 && m1.length > 0) { }
webLog.wechat = m1[0] // 安卓手机
} if (userAgent.includes("Android")) {
// 苹果手机 // 获取设备名
if (userAgent.includes('iPhone') || userAgent.includes('iPad')) { m1 = userAgent.match(/Android.*; ?(.*(?= Build))/);
// 获取设备名 if (m1 && m1.length > 1) {
if (userAgent.includes('iPad')) { webLog.device = m1[1];
webLog.device = 'iPad'
} else {
webLog.device = 'iPhone'
}
// 获取操作系统版本
m1 = userAgent.match(/iPhone OS .*?(?= )/)
if (m1 && m1.length > 0) {
webLog.system = m1[0]
}
}
// 安卓手机
if (userAgent.includes('Android')) {
// 获取设备名
m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
if (m1 && m1.length > 1) {
webLog.device = m1[1]
}
// 获取操作系统版本
m1 = userAgent.match(/Android.*?(?=;)/)
if (m1 && m1.length > 0) {
webLog.system = m1[0]
}
}
this.device=webLog.device
this.system=webLog.system
console.log("阿斯蒂芬",webLog.device)
} }
// 获取操作系统版本
m1 = userAgent.match(/Android.*?(?=;)/);
if (m1 && m1.length > 0) {
webLog.system = m1[0];
}
}
this.device = webLog.device;
this.system = webLog.system;
console.log("阿斯蒂芬", webLog.device);
}, },
},
}; };
</script> </script>
<style scoped> <style scoped>
.black-background { .black-background {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
background-color: black; background-color: black;
opacity: 0.4; opacity: 0.4;
} }
.whit-background{ .whit-background {
height: 90vw; height: 90vw;
width: 90vw; width: 90vw;
background-color: white; background-color: white;
position: relative; position: relative;
top: 55vw; top: 55vw;
left: 5vw; left: 5vw;
border-radius:5vw; border-radius: 5vw;
} }
.tips { .tips {
width: 40vw; width: 40vw;
text-align: center; text-align: center;
height: 10vw; height: 10vw;
background: black; background: black;
color: white; color: white;
position: fixed; position: fixed;
top: 80vw; top: 80vw;
left: 30vw; left: 30vw;
border-radius: 4vw; border-radius: 4vw;
opacity: 0.6; opacity: 0.6;
line-height: 10vw; line-height: 10vw;
} }
.wbk11 { .wbk11 {
font-size: 5vw; font-size: 5vw;
text-align: center; text-align: center;
color: #797979; color: #797979;
position: absolute; position: absolute;
top: 81vw; top: 81vw;
/* border-radius: 5vw; */ /* border-radius: 5vw; */
left: 5vw; left: 5vw;
width: 10vw; width: 10vw;
height: 13vw; height: 13vw;
line-height: 10vw; line-height: 10vw;
/* padding: 0 0 0 5vw; */ /* padding: 0 0 0 5vw; */
background: none; background: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
/* background: rgb(243, 243, 243); */ /* background: rgb(243, 243, 243); */
margin-left: 4vw; margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */ /* border-color: rgb(213, 225, 245); */
border-left: 0px; border-left: 0px;
border-top: 0px; border-top: 0px;
border-bottom: 0.8vw solid #EFEFEF; border-bottom: 0.8vw solid #efefef;
border-right: 0px; border-right: 0px;
} }
.wbkRed{ .wbkRed {
font-size: 5vw; font-size: 5vw;
text-align: center; text-align: center;
color: red; color: red;
position: absolute; position: absolute;
top: 81vw; top: 81vw;
/* border-radius: 5vw; */ /* border-radius: 5vw; */
left: 5vw; left: 5vw;
width: 10vw; width: 10vw;
height: 13vw; height: 13vw;
line-height: 10vw; line-height: 10vw;
/* padding: 0 0 0 5vw; */ /* padding: 0 0 0 5vw; */
background: none; background: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
/* background: rgb(243, 243, 243); */ /* background: rgb(243, 243, 243); */
margin-left: 4vw; margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */ /* border-color: rgb(213, 225, 245); */
border-left: 0px; border-left: 0px;
border-top: 0px; border-top: 0px;
border-bottom: 0.8vw solid red; border-bottom: 0.8vw solid red;
border-right: 0px; border-right: 0px;
} }
.wbk2 { .wbk2 {
font-size: 3.7vw; font-size: 3.7vw;
color: #797979; color: #797979;
position: absolute; position: absolute;
top: 40vw; top: 40vw;
border-radius: 5vw; border-radius: 5vw;
left: 3vw; left: 3vw;
width: 65vw; width: 65vw;
height: 13vw; height: 13vw;
line-height: 10vw; line-height: 10vw;
padding: 0 3vw; padding: 0 3vw;
background: none; background: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
background: rgb(243, 243, 243); background: rgb(243, 243, 243);
margin-left: 4vw; margin-left: 4vw;
/* border-color: rgb(213, 225, 245); */ /* border-color: rgb(213, 225, 245); */
border-left: 0px; border-left: 0px;
border-top: 0px; border-top: 0px;
border-bottom: 0px; border-bottom: 0px;
border-right: 0px; border-right: 0px;
padding-left: 9vw; padding-left: 9vw;
} }
.send{ .send {
position: absolute; position: absolute;
left: 72vw; left: 72vw;
font-size: 3.8vw; font-size: 3.8vw;
top: 47vw; top: 47vw;
color: red; color: red;
} }
.sendTwo{ .sendTwo {
position: absolute; position: absolute;
left: 72vw; left: 72vw;
font-size: 3.8vw; font-size: 3.8vw;
top: 47vw; top: 47vw;
color: #8F8F8F; color: #8f8f8f;
} }
.title{ .title {
position: absolute; position: absolute;
left: 10vw; left: 10vw;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
font-weight: bolder; font-weight: bolder;
font-size: 6vw; font-size: 6vw;
top: 23vw; top: 23vw;
} }
.registerOne{ .registerOne {
position: absolute; position: absolute;
display: block; display: block;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
width: 79vw; width: 79vw;
top: 37vw; top: 37vw;
left: 10vw; left: 10vw;
color: #797979; color: #797979;
font-size: 3vw; font-size: 3vw;
} }
.registerPhone{ .registerPhone {
position: absolute; position: absolute;
left: 10vw; left: 10vw;
letter-spacing: 0.5vw; letter-spacing: 0.5vw;
font-weight: bolder; font-weight: bolder;
font-size: 5vw; font-size: 5vw;
top: 46vw; top: 46vw;
} }
.registerTwo{ .registerTwo {
position: absolute; position: absolute;
top: 70vw; top: 70vw;
left: 10vw; left: 10vw;
color: #C4C4C4; color: #c4c4c4;
font-size: 3.8vw; font-size: 3.8vw;
} }
.default-img{ .default-img {
height: 23vw; height: 23vw;
width: 23vw; width: 23vw;
position: absolute; position: absolute;
top: 112vw; top: 112vw;
left: 76vw; left: 76vw;
} }
.account{ .account {
position: absolute; position: absolute;
top: 75vw; top: 75vw;
left: 38vw; left: 38vw;
color: #797979; color: #797979;
font-size: 3.8vw; font-size: 3.8vw;
} }
.sure{ .sure {
width: 77vw; width: 77vw;
height: 13vw; height: 13vw;
border-radius: 5vw; border-radius: 5vw;
font-size: 4vw; font-size: 4vw;
border-radius: 5vw; border-radius: 5vw;
border: 0px; border: 0px;
color: white; color: white;
background: #E11E1E; background: #e11e1e;
position: absolute; position: absolute;
top: 58vw; top: 58vw;
left: 7vw; left: 7vw;
}
}
</style> </style>
\ No newline at end of file
src/views/test.vue 0 → 100644
View file @ 834c050c
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment