<template>
<div>
<!-- 头部组件 -->
<TopHeader custom-title="店铺名称" custom-fixed>
<i slot="backBtn" class="iconfont icon-fanhui"></i>
<span slot="rightBtn" class="rightBtn">店铺</span>
</TopHeader>
<!-- 聊天室 -->
<div class="chat_room" ref="uldom">
<!-- <div class="chat_item">
<img src="/static/images/details/00detailsSwiper-img01.png" class="touxiang"/>
<span class="text">您好您好您好您好</span>
</div> -->
<!-- <div class="chat_item">
<img src="/static/images/category/category-goods-img01.png" class="touxiang2"/>
<span class="text2">您好哇</span>
</div>-->
<!-- <div class="chat_item" v-for="(item,index) in chattext" :key="index">
<img :src="item.img" :class='[item.status=="2" ? "touxiang" : "touxiang2"]'/>
<span :class='[item.status=="2" ? "text" : "text2"]'>{{item.text}}</span>
</div> -->
<div class="chat_item" v-for="(item,index) in list" :key="index">
<!-- item.head_pic -->
<img :src='[item.user_id === from_info_id ? from_info_header_pic : to_info_header_pic]' :class='[item.user_id != from_info_id ? "touxiang" : "touxiang2"]'/>
<span :class='[item.user_id != from_info_id ? "text" : "text2"]' v-if='item.msg_type==="1"'>{{item.content}}</span>
<img :src="item.content" :class='[item.user_id != from_info_id ? "tupian" : "tupian2"]' v-if='item.msg_type==="2"' v-preview="item.content" preview-title-enable="true"
preview-nav-enable="true"/>
<!-- <audio ref="player" src="https://chuen.zhifengwangluo.cn/Public/weixinrecord/wxupload_15708641362349.amr" controls></audio> -->
<!-- 录音 -->
<!-- <span class="hhhhhh" v-if='item.msg_type==="5"'>
<img @click="plays(item.content)" :class='[item.user_id != from_info_id ? "imgimg" : "imgimg2"]' v-if='item.msg_type==="5"' src="/static/images/chatroom/yuyin.gif"/> -->
<!-- @pause="onPause" -->
<!-- <audio :src="item.content" :class='[item.user_id != from_info_id ? "audio" : "audioaudio"]' controls ref="audio" ></audio>
</span> -->
<!-- autoplay="true" -->
<video v-if='item.msg_type==="3"' :class='[item.user_id != from_info_id ? "videovideo" : "video"]' muted="true" autoplay="true">
<source :src="item.content" type="video/mp4">
</video>
</div>
</div>
<!-- 拍照 -->
<van-uploader class="wrapper1" v-if="lalal" :after-read="afterRead" >
<van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>
<!-- <van-uploader :after-read="afterRead" class="wrapper1" v-if="lalal" /> -->
<!-- <span type="primary" class="wrapper1">
<label class="btn" for="fileUploadimage"></label>
</span>
<input type="file" capture="camera" accept="image/*" id="fileUploadimage" style="position:absolute; clip:rect(0 0 0 0);" @change="uploadimage($event)"> -->
<!-- 视频-->
<span type="primary" class="wrapper2" v-if="lalal">
<label class="btn" for="fileUpload" ></label>
</span>
<!-- camera accept="video/*" capture="camcorder"-->
<!-- <input type="file" id="fileUpload" style="position:absolute; clip:rect(0 0 0 0);" @change="uploadVideo($event)"> -->
<!-- <input type="file" name="video" id="fileUpload" @change="uploadVideo($event)" style="position:absolute; clip:rect(0 0 0 0);"/> -->
<van-uploader style="z-index:999;position:fixed;left:95px;bottom:80px;" accept="video/*" v-if="lalal" :after-read="uploadVideo">
<van-button icon="photo" type="primary">拍摄</van-button>
</van-uploader>
<!-- 底部 -->
<div :class='[lalal==true ? "bottom2" : "bottom"]'>
<!-- @click="lule" -->
<img src="/static/images/home/jianpan.png" class="jianpan" />
<textarea class="wenbenyu" v-model="neirong" v-if="shuru"></textarea>
<!-- @click="shuohua" -->
<span class="luyin" v-if="!shuru" @touchstart.prevent="showDeleteButton()" @touchend.prevent="clearLoop()">按住说话</span>
<span class="fasong" @click="fasong">发送</span>
<img src="/static/images/home/gengduo.png" class="gengduo" @click="chuxian"/>
</div>
<!-- 功能 -->
<div class="mask" @click="shouqi" v-if="lalal">
<!-- v-if="lalal" -->
<div class="gongneng">
<div class="gongneng_item" @click="shiping">
<img src="/static/images/home/xiangce.png" class="xiangce"/>
<p class="zi">照片</p>
</div>
<div class="gongneng_item" @click="paizhao">
<img src="/static/images/home/paishe.png" class="paishe"/>
<p class="zi">视频</p>
</div>
</div>
</div>
<!-- 图片预览插件 -->
<lg-preview></lg-preview>
</div>
</template>
<script>
import Vue from 'vue'
// import AreaList from './area'
import TopHeader from "@/pages/common/header/TopHeader"
// import wx from 'weixin-js-sdk';
// import BenzAMRRecorder from 'benz-amr-recorder'
// var amr = new BenzAMRRecorder();
const _this = wx
export default {
name:'chatroom',
components:{
TopHeader
},
data(){
return {
neirong:"",
lalal:false,
shuru:true,
chattext:[
{img:'/static/images/details/00detailsSwiper-img01.png',text:'您好,您好,您好',status:2},
{img:'/static/images/category/category-goods-img01.png',text:'您好哇',status:1},
{img:'/static/images/category/category-goods-img01.png',text:'您好lalall哇',status:1}
],
Loop:null,
localId: '',
serverId: '',
downLoadId: '',
Soff: true,
time: 0,
timer: null,
isFrist:true,
toid:null,
token:this.$store.getters.optuser.Authorization,
list:[],
from_info_header_pic:'',
to_info_header_pic:'',
client_name:'',
from_info_id:null,
to_info_id:null,
login_data:null,
websoketurl:'',
biaoshi:null,
lujing:''
}
},
created(){
console.log(location.protocol)
let websoketurl = location.protocol === 'https:' ? 'wss://chat.zhifengwangluo.com:7575' : 'wss://chat.zhifengwangluo.com:7575';
this.websoketurl = websoketurl;
console.log(this.websoketurl);
this.biaoshi=this.$route.query.biaoshi
console.log("UUUUUUU",typeof(this.biaoshi))
// 店铺id
if(this.$route.query.biaoshi !='1'){
this.toid=this.$route.query.toid
}else{
this.toid=this.$route.query.to_userid
}
console.log("1111")
console.log(this.toid)
// 调用微信录音,获取签名与相关配置
var apiUrl = window.location.href
// let apiUrl = 'http://weixin.lostars.cn'
this.$axios({
method: 'get',
url: 'weixin/getSignPackage?askUrl='+apiUrl, // 写入api
})
.then((res) => {
// console.log(res.data)
let list = res.data
// console.log(list.appId)
_this.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: list.appId, // 必填,公众号的唯一标识
timestamp: list.timestamp, // 必填,生成签名的时间戳
nonceStr: list.nonceStr, // 必填,生成签名的随机串
signature: list.signature, // 必填,签名
jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'downloadVoice'] // 必填,需要使用的JS接口列表
// 接口 开始录音接口 停止录音接口 播放语音接口 暂停播放接口 停止播放接口 上传语音接口 下载语音接口 识别音频并返回识别结果接口
})
// config信息验证后才执行
_this.ready(() => {
console.log("ok")
})
// 微信sdk错误返回问题
_this.error((res) => {
alert('出错了:' + res.errMsg)// 这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
})
})
.catch((error) => {
console.log(error)
})
// 页面数据渲染
var that = this;
var params = new URLSearchParams();
params.append('toid', this.toid); //你要传给后台的参数值 key/value
params.append('token', this.token); //你要传给后台的参数值 key/value
if(this.$route.query.biaoshi === '1' || this.$route.query.biaoshi === 1){
//列表
console.log("为什么呢1")
params.append('sender', 1);
}else{
console.log("为什么呢2")
//商品详情
params.append('sender', 2);
}
var url = "chat/get_userinfo"
that.$axios({
method:"post",
url:url,
data: params
}).then((res)=>{
if(res.data.status == 200){
// console.log('ssss')
// console.log(res.data.data.from_info.head_pic)
this.from_info_header_pic= res.data.data.from_info.head_pic
this.from_info_id=res.data.data.from_info.user_id
this.to_info_id=res.data.data.to_info.user_id
console.log("to_info_id",this.to_info_id)
this.client_name=res.data.data.from_info.nick_name
this.to_info_header_pic= res.data.data.to_info.head_pic
this.lianjie()
//页面数据渲染聊天信息
var params2 = new URLSearchParams();
params2.append('token', this.token); //你要传给后台的参数值 key/value
// this.to_info_id
params2.append('toid',this.to_info_id);
var url = "chat/load"
that.$axios({
method:"post",
url:url,
data: params2
}).then((res)=>{
console.log(res.data.data)
that.list=res.data.data
setTimeout(function(){
window.scrollTo(0,document.documentElement.clientHeight)
},10)
})
}
})
},
methods:{
fasong:function(){
var that=this
that.lalal=false
// console.log(this.neirong)
if(this.neirong!=""){
var a=this.$refs.uldom.lastChild
var b=this.$refs.uldom.children
for(var i=0;i<b.length;i++){
this.$refs.uldom.children[i].style.marginBottom="0px"
}
this.list.push({head_pic:this.from_info_header_pic,content:this.neirong,user_id:this.from_info_id,msg_type:"1"})
// a.style.marginBottom="30px"
var gaodu=document.documentElement.clientHeight+300
console.log(gaodu)
setTimeout(function(){
window.scrollTo(0,gaodu)
},10)
var neinei=that.neirong
console.log("UUUUUUU")
that.lianjie(1,neinei)
}
this.neirong=[]
},
// 上传的是图片
afterRead(file) {
var that=this
// 此时可以自行将文件上传至服务器
console.log(file.content);
// 图片压缩的操作
let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
let context = canvas.getContext('2d')
let img = new Image() // 创建新的图片对象
// 指定图片的DataURL(图片的base64编码数据)
img.src = file.content
img.onload =() =>{
canvas.width =400
canvas.height =300
context.drawImage(img,0,0,400,300)
file.content =canvas.toDataURL(file.file.type,0.92)
var params2 = new URLSearchParams();
//params2.append('token', this.token); //你要传给后台的参数值 kevalue
params2.append('image', file.content);
var url = "chat/create_img"
this.$axios({
method:"post",
url:url,
data: params2
}).then((res)=>{
console.log(res.data.result)
// this.fileList.push(res.data.result)
// console.log(this.fileList)
this.lalal=false
var a=this.$refs.uldom.lastChild
a.style.marginBottom="20px"
this.list.push({head_pic:this.from_info_header_pic,content:file.content,user_id:this.from_info_id,msg_type:"2"})
var gaodu=document.documentElement.clientHeight+300
console.log(gaodu)
setTimeout(function(){
window.scrollTo(0,gaodu)
},10)
var neinei=res.data.result
that.lianjie(2,neinei)
})
}
},
// 加号
chuxian:function(){
this.lalal=true
var a=this.$refs.uldom.lastChild
a.style.marginBottom="190px"
// console.log(this.$refs.uldom.lastChild)
window.scrollTo(0,document.documentElement.clientHeight)
},
shouqi:function(){
this.lalal=false
var a=this.$refs.uldom.lastChild
var b=this.$refs.uldom.children
for(var i=0;i<b.length;i++){
this.$refs.uldom.children[i].style.marginBottom="0px"
}
a.style.marginBottom="60px"
},
// 拍视频
shiping:function(){
},
lule:function(){
this.shuru=false
},
// shuohua:function(){
// console.log("222")
// },
// 长摁开始录音
showDeleteButton:function(){
var that=this;
this.Loop = setTimeout(function() {
that.Loop = 0;
that.$toast("start")
that.time = 0
_this.startRecord({
success: function () {
// alert('成功调起录音')
that.timer = setInterval(() => {
that.time++
}, 1000)
that.vicoeEnd()
},
cancel: function () {
// alert('用户拒绝授权录音')
}
})
}, 700);
},
// 放开结束录音
clearLoop:function(){
clearTimeout(this.Loop)
this.$toast("end")
let that = this
_this.stopRecord({
success: function (res) {
// alert('暂停成功')
console.log(res)
clearInterval(that.timer)
that.localId = res.localId
that.upVoice()
},
fail: function (error) {
// alert('死啦停不了')
console.log(error)
}
})
},
// 60秒监听
vicoeEnd () {
let that = this
_this.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
// alert('60秒停止录音')
that.localId = res.localId
clearInterval(that.timer)
that.upVoice()
}
})
},
//拍照
paizhao:function(){
},
// 上传语音
upVoice () {
let that = this
//alert("上传语音")
_this.uploadVoice({
localId: that.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var apiUrl = window.location.href
//alert('上传成功')
that.serverId = res.serverId // 返回音频的服务器端ID
// that.axios({
// method: 'post',
// url: 'chat/upload',
// headers: {'Content-Type': 'application/json'},
// data: {
// media_id: res.serverId
// }
// })
// .then((data) => {
// console.log(data)
// alert(data.data)
// that.$refs.player.src = data.data
// })
// .catch((error) => {
// console.log(error)
// })
// alert("ssss")
let params = new URLSearchParams();
params.append('media_id',that.serverId);
that.$axios.post('chat/upload',params)
.then((res)=>{
console.log(res.data.path)
// 获取到的amr传给后台
//alert(res.data.path)
that.lujing=res.data.path
that.list.push({head_pic:that.from_info_header_pic,content:res.data.path,user_id:that.from_info_id,msg_type:"5"})
//滚动条置底
setTimeout(function(){
window.scrollTo(0,document.documentElement.clientHeight)
},10)
// that.list.push({head_pic:this.to_info_header_pic,content:res.data.path,user_id:this.from_info_id,msg_type:"5"})
var neinei=res.data.path
that.lianjie(5,neinei)
})
}
})
},
plays(url) {
// amr.initWithUrl(url).then(function() {
// amr.isPlaying() //返回音频的播放状态 是否正在播放 返回boolean类型
// console.log(amr.isPlaying())
// if(amr.isPlaying()){
// amr.stop();
// } else {
// amr.play();
// }
// });
console.log("播放路径为:",url)
// console.log(players.play())
// var players=document.getElementsByClassName("players")
// players.play();
// console.log(players.play())
// let audio = new Audio()
// audio.src ='https://chuen.zhifengwangluo.cn/Public/weixinrecord/wxupload_15711951466666.mp3'
// audio.play();
// this.onPlay()
},
onPlay(){
console.log("sss")
this.audio.play = true
},
uploadVideo(file) {
//e.target.value文件名
// var file = e.target.files[0];
// console.log("miaomiao")
// console.log(file)
console.log(file)
console.log(file.file)
var formdata = new FormData();
formdata.append('video', file.file);
console.log('正在上传视频...')
this.doUpload(formdata);
// // 置空input
// e.target.value = null
},
// uploadimage(e){
// //e.target.value文件名
// var file = e.target.files[0];
// console.log('正在上传照片')
// this.doUpload(formdata);
// },
doUpload(formdata) {
var that=this
// axios.post('/teacher/doUpload', formdata).then(res => {
// if (res.data.success) {
// console.log('上传成功');
// } else {
// console.log('上传失败');
// }
// }).catch(err => {
// console.log(err);
// })
console.log(formdata)
that.$axios({
method:"post",
url:'chat/upload_videos',
data: formdata
}).then((res)=>{
console.log(res.data.data.path)
that.lalal=false
var a=this.$refs.uldom.lastChild
var b=this.$refs.uldom.children
for(var i=0;i<b.length;i++){
this.$refs.uldom.children[i].style.marginBottom="0px"
}
that.lianjie(3,res.data.data.path)
that.list.push({head_pic:this.from_info_header_pic,content:res.data.data.path,user_id:this.from_info_id,msg_type:"3"})
})
},
//连接服务器
lianjie:function(type,neirongya){
var that=this
if (window.WebSocket){
let ws =new WebSocket( this.websoketurl )
ws.onopen = function (e) {
console.log("连接成功")
console.log(that.neirong)
// 如果是第一次进入聊天室
if(that.isFrist){
that.isFrist=false
//初始化时执行
// var login_data = '{"type":"login","client_name":"张耘翡","ud_type":"1","ud_id":"63"}'
console.log(that.client_name)
that.login_data = '{"type":"login","client_name":"'+that.client_name+'","ud_type":"1","ud_id":"'+that.from_info_id+'"}'
console.log("第一次连接成功")
}else{
// console.log("------------")
// console.log(that.neirong)
// console.log("------------+++++++")
console.log("type",type)
console.log("neinei",neirongya)
console.log("client_name",that.client_name)
console.log("content",neirongya)
console.log("ud_id",that.from_info_id)
console.log("to_id",that.to_info_id)
that.login_data = '{"type":"say","say_type":"'+type+'","to_client_name":"'+that.client_name+'","content":"'+neirongya+'","ud_type":"1","ud_id":"'+that.from_info_id+'","to_id":"'+that.to_info_id+'"}';
//that.login_data ='{"type":"say","say_type":"1","to_client_name":"医生_小智","content":"这个衣服多少钱","ud_type":"2","ud_id":"1418","to_id":"1403"}'
}
// console.log(that.login_data)
ws.send(that.login_data);
};
ws.onclose = function (e) {
console.log("服务器关闭")
that.$toast("网络出错,服务器关闭")
};
ws.onerror = function () {
console.log("服务器出错")
that.$toast("服务器出错,自动关闭")
};
// 服务器返回来的数据
ws.onmessage = function (e) {
console.log(e)
var info =JSON.parse(e.data)
console.log(info)
if(info.type==="login"){
ws.send('{"type":"pong"}');
return;
}
if(info.type==="ping"){
ws.send('{"type":"pong"}');
return;
}
console.log(info.content)
console.log(info.say_type)
that.list.push({head_pic:that.from_info_header_pic,content:info.content,user_id:that.to_info_id,msg_type:info.say_type})
// tianjia(info.content,info.say_type)
setTimeout(function(){
window.scrollTo(0,document.documentElement.clientHeight)
},10)
}
}
}
}
}
</script>
<style lang="stylus" scoped>
.rightBtn
color white !important
background #2095d4 !important
width 85px !important
text-align center !important
height 45px !important
line-height 44px !important
border-radius 20px !important
text-align center !important
padding-right: 0rem !important;
position: absolute !important;
right: 20px !important;
top:25px !important
font-size 25px
padding 0 !important
.chat_room
width 90%
margin-left 5%
// margin-top 145px
.chat_item
width 100%
height 80px
position relative
margin-top 50px
.touxiang
width 80px
height 80px
border-radius 50%
position absolute
top 0
bottom 0
margin auto 0
.touxiang2
width 80px
height 80px
border-radius 50%
position absolute
right 0
top 0
bottom 0
margin auto 0
.tupian
width 85px
height 85px
position absolute
top 0
bottom 0
left 95px
margin auto 0
.tupian2
width 85px
height 85px
position absolute
right 100px
top 0
bottom 0
margin auto 0
.text
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
left 100px
top 14px
margin auto 0
padding 10px 20px
.text2
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
top 14px
right 100px
margin auto 0
padding 10px 20px
.hhhhhh
width 100px
height 55px
display inline-block
// border 1px solid red
position absolute
right 100px
top 14px
.imgimg
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
right 10px
top 0px
margin auto 0
padding 10px 20px
width 50px
height 35px
z-index 2
.imgimg2
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
left 10px
top 0px
margin auto 0
padding 10px 20px
width 50px
height 35px
z-index 2
.audio
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
right 10px
top 0px
margin auto 0
padding 10px 20px
width 50px
height 35px
z-index 1
.audioaudio
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
background white
position absolute
left 10px
top 0px
margin auto 0
padding 10px 20px
width 50px
height 35px
z-index 1
.video
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
position absolute
right 70px
top -15px
margin auto 0
padding 10px 20px
width 100%
height 500px
width 100px
height 100px
.videovideo
display inline-block
padding 0px 20px
border-radius 20px
display inline-block
position absolute
left 80px
top -20px
margin auto 0
padding 10px 20px
width 100%
height 500px
width 100px
height 100px
.chat_room .chat_item:last-child
margin-bottom:145px
.wrapper1
display inline-block
height 148px
width 120px
position fixed
bottom 150px
left 25px
z-index 99
.wrapper1 >>> .van-button__text
display none
.wrapper1 >>> .van-button__icon
display none
.wrapper1 >>> .van-uploader__input-wrapper
// border 1px solid red
width 310px
height 150px
.wrapper1 >>> .btn
width 100%
height 100%
display inline-block
.wrapper1 >>> .van-button--primary
background-color: transparent;
border: 1px solid transparent;
.wrapper2
display inline-block
width 130px
height 138px
position fixed
bottom 150px
left 180px
z-index 99
.btn
width 100%
height 100%
display inline-block
.bottom
width 100%
height 88px
position fixed
bottom 0
background white
z-index 2
.jianpan
width 48px
height 48px
position absolute
left 30px
top 0
bottom 0
margin auto 0
.wenbenyu
width 450px
height 50px
line-height 50px
position absolute
left 100px
top 0
bottom 0
margin auto 0
background #f5f5f5
border none
border-radius 20px
outline:none
resize:none
text-indent 20px
.luyin
display inline-block
width 450px
height 50px
line-height 50px
position absolute
left 100px
top 0
bottom 0
margin auto 0
background #f5f5f5
border none
border-radius 20px
outline:none
resize:none
background white
text-align center
box-shadow 0 0 10px #eee
.fasong
width 100px
height 50px
line-height 50px
border-radius 20px
position absolute
right 90px
top 0
bottom 0
margin auto 0
background #2095d4
color white
text-align center
.gengduo
width 48px
height 48px
position absolute
right 30px
top 0
bottom 0
margin auto 0
.bottom2
width 100%
height 88px
position fixed
bottom 300px
background white
z-index 2
.jianpan
width 48px
height 48px
position absolute
left 30px
top 0
bottom 0
margin auto 0
.wenbenyu
width 450px
height 50px
line-height 50px
position absolute
left 100px
top 0
bottom 0
margin auto 0
background #f5f5f5
border none
border-radius 20px
outline:none
resize:none
text-indent 20px
.luyin
display inline-block
width 450px
height 50px
line-height 50px
position absolute
left 100px
top 0
bottom 0
margin auto 0
background #f5f5f5
border none
border-radius 20px
outline:none
resize:none
background white
text-align center
box-shadow 0 0 10px #eee
.fasong
width 100px
height 50px
line-height 50px
border-radius 20px
position absolute
right 90px
top 0
bottom 0
margin auto 0
background #2095d4
color white
text-align center
.gengduo
width 48px
height 48px
position absolute
right 30px
top 0
bottom 0
margin auto 0
.mask
position fixed
left 0
right 0
bottom 0
top 0
z-index 1
.gongneng
position fixed
bottom 0
z-index 1
width 100%
height 300px
background white
z-index 5
.gongneng_item
display inline-block
width 100px
text-align center
margin-top 40px
margin-left 40px
.xiangce
width 65px
height 55px
.paishe
width 65px
height 55px
.zi
padding-top 10px
.lg-preview-wrapper >>> .lg-preview-nav-arrow
width 20px !important
height 20px !important
position absolute !important
top 53% !important
.van-button--primary
color: transparent;
background-color: transparent;
border: 1px solid transparent;
.lg-preview-wrapper >>> .lg-preview-img
height 800px
width 100%
</style>