Commit c12502cf authored by mengqr's avatar mengqr

分享卡片

parent 4d6b342b
......@@ -4012,6 +4012,14 @@
"ms": "2.1.2"
}
},
"decompress-response": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
"requires": {
"mimic-response": "^3.1.0"
}
},
"deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
......@@ -6228,6 +6236,11 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
},
"js-binary-schema-parser": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz",
"integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg=="
},
"js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
......@@ -6736,6 +6749,11 @@
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
},
"mimic-response": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
......@@ -7469,6 +7487,11 @@
"callsites": "^3.0.0"
}
},
"parenthesis": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
"integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
},
"parse-asn1": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
......@@ -8755,6 +8778,21 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true
},
"simple-concat": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
},
"simple-get": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
"requires": {
"decompress-response": "^6.0.0",
"once": "^1.3.1",
"simple-concat": "^1.0.0"
}
},
"sirv": {
"version": "1.0.19",
"resolved": "https://registry.npmmirror.com/sirv/-/sirv-1.0.19.tgz",
......@@ -8975,6 +9013,14 @@
"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
},
"string-split-by": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/string-split-by/-/string-split-by-1.0.0.tgz",
"integrity": "sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A==",
"requires": {
"parenthesis": "^3.1.5"
}
},
"string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
......@@ -9813,6 +9859,47 @@
}
}
},
"vue-qr": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/vue-qr/-/vue-qr-4.0.9.tgz",
"integrity": "sha512-pAISV94T0MNEYA3NGjykUpsXRE2QfaNxlu9ZhEL6CERgqNc21hJYuP3hRVzAWfBQlgO18DPmZTbrFerJC3+Ikw==",
"requires": {
"glob": "^8.0.1",
"js-binary-schema-parser": "^2.0.2",
"simple-get": "^4.0.1",
"string-split-by": "^1.0.0"
},
"dependencies": {
"brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"requires": {
"balanced-match": "^1.0.0"
}
},
"glob": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^5.0.1",
"once": "^1.3.0"
}
},
"minimatch": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz",
"integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==",
"requires": {
"brace-expansion": "^2.0.1"
}
}
}
},
"vue-resize-sensor": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
......
......@@ -21,6 +21,7 @@
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0",
"vue-qr": "^4.0.9",
"vue-router": "^3.5.2",
"vue-video-player": "^5.0.2",
"vuex": "^4.1.0"
......
......@@ -41,6 +41,7 @@ live: {
liveDetail:function(data){
return service.post('/app/live/liveDetail', data)
},
//游客登录
tourist:function(data){
return service.post('/auth/tourist', data)
},
......
......@@ -5,13 +5,48 @@
<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==2" class="style-one" src="../../common/img/card-style-Three.png" alt="">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<!-- 信息样式 -->
<div>
<div v-if="checkType==0">
<img class="headImg" :src="headPro" alt="">
<span class="udStyle">{{udName}}</span>
<span class="udStyle">{{udName}}</span>
<img class="lvrImg" :src="lvrImg" alt="">
<span class="lvrName">{{liveName}}</span>
<vue-qr
class="qrCode"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div v-if="checkType==1">
<img class="headImgTwo" :src="headPro" alt="">
<span class="udStyle">{{udName}}</span>
<img class="lvrImgTwo" :src="lvrImg" alt="">
<span class="lvrNameTwo">{{liveName}}</span>
<vue-qr
class="qrCodeTwo"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div v-if="checkType==2">
<img class="headImgThree" :src="headPro" alt="">
<!-- <span class="udStyle">{{udName}}</span> -->
<img class="lvrImgThree" :src="lvrImg" alt="">
<span class="lvrNameThree">{{liveName}}</span>
<vue-qr
class="qrCodeThree"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div class="bottom-countent">
<div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}">
<img class="small-img" src="../../common/img/thumbnail-One.png" alt="">
......@@ -45,8 +80,12 @@
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'shareCard',
components:{
      VueQr,
   },
props:{
headPortrait:String,//头像
udNickname:String,//主播名称
......@@ -59,6 +98,8 @@ export default {
checkType:0,
copyContent:window.location.href,//需要复制的内容
ifShow:false,
imgUrl: 'https://baidu.com',//二维码地址
headPro:'',//头像图片
udName:'',//主播名称
lvrImg:'',//占位图
......@@ -115,6 +156,7 @@ this.headPro=this.headPortrait//头像图片
this.udName=this.udNickname//主播名称
this.lvrImg=this.lvrImgLargeUrl//占位图
this.liveName=this.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
}
},
};
......@@ -261,6 +303,24 @@ font-size: 4vw;
left: 22vw;
border-radius: 50%;
}
.headImgTwo{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 22vw;
border-radius: 50%;
}
.headImgThree{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 40.5vw;
border-radius: 50%;
}
.udStyle{
font-size: 5vw;
color: white;
......@@ -269,4 +329,85 @@ font-size: 4vw;
z-index: 100;
left: 22vw;
}
.lvrImg{
height: 39vw;
width: 73vw;
position: absolute;
top: 62vw;
border-radius: 1vw;
left: 13.5vw;
z-index: 100;
}
.lvrImgTwo{
height: 39vw;
width: 71vw;
position: absolute;
top: 62vw;
border-radius: 1vw;
left: 14.5vw;
z-index: 100;
}
.lvrImgThree{
height: 32vw;
width: 58vw;
position: absolute;
top: 68vw;
border-radius: 1vw;
left: 20.5vw;
z-index: 100;
}
.lvrName{
font-size: 5vw;
position: absolute;
top: 104vw;
z-index: 100;
left: 18vw;
}
.lvrNameTwo{
font-size: 5vw;
position: absolute;
top: 104vw;
color: white;
z-index: 100;
left: 18vw;
}
.lvrNameThree{
font-size: 5vw;
position: absolute;
top: 103vw;
color: white;
z-index: 100;
left: 23vw;
}
.pressShare{
height: 5vw;
width: 40vw;
position: absolute;
top: 158vw;
left: 28vw;
}
.qrCode{
position: absolute;
top: 120vw;
left: 58vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
.qrCodeTwo{
position: absolute;
top: 124vw;
left: 60.5vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
.qrCodeThree{
position: absolute;
top: 124vw;
left: 17vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
</style>
\ No newline at end of file
......@@ -175,10 +175,8 @@ export default {
},
mounted() {
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
this.getState()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
......@@ -290,6 +288,47 @@ export default {
this.url=this.urlStor
}
},
getState(){
let token=sessionStorage.getItem("token")
// let img=sessionStorage.getItem("udPhotoFileid")
if(token){
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
// if(img){
// this.ifLog=2
// this.userImg=img
// }else{
// this.ifLog=1
// }
}else{
console.log("就阿婆啊v发")
// this.ifLog=0
this.visitorLog()
}
},
//游客登录
visitorLog(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
pmMac:1,
pmIp:1,
pmOperator:'无运营商',
applicationType:4,
})
this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token
window.sessionStorage.setItem('token', thisToken);//token
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
})
},
//点击关注事件
clickFollow(){
this.ifFollow=true
......
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