|
|
|
<template>
|
|
|
|
<!-- :style="{'height':height+'px'}" -->
|
|
|
|
<!-- style="height:600px" -->
|
|
|
|
<!-- -->
|
|
|
|
<div class="container" refs="message" id="targetbox">
|
|
|
|
<div class="sharetop flextwo" @click="back">
|
|
|
|
<div class="leftrow">
|
|
|
|
<img src="../../../assets/leftrow.png" alt />
|
|
|
|
</div>
|
|
|
|
<div class="sharemiddle">{{ coursetitle }}</div>
|
|
|
|
<div class="sharebtn" @click.stop="collect">
|
|
|
|
{{ is_favorite }}
|
|
|
|
<img src="../../../assets/starkong.png" v-if="is_favorite == 0" alt />
|
|
|
|
<img src="../../../assets/star.png" v-else alt />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nodata" v-if="recordlist.length == 0">暂无聊天记录</div>
|
|
|
|
<van-pull-refresh
|
|
|
|
v-model="isLoading"
|
|
|
|
@refresh="onRefresh"
|
|
|
|
class="messagelist"
|
|
|
|
style="height: 100%"
|
|
|
|
id="messagebox"
|
|
|
|
v-else
|
|
|
|
>
|
|
|
|
<!-- <div v-clipboard:copy="serverId" v-clipboard:success="onCopy">复制</div> -->
|
|
|
|
<!-- <p>刷新次数: {{ count }}</p> -->
|
|
|
|
|
|
|
|
<!-- <div class="wifi-symbol">
|
|
|
|
<div class="wifi-circle first"></div>
|
|
|
|
<div class="wifi-circle second"></div>
|
|
|
|
<div class="wifi-circle third"></div>
|
|
|
|
</div>-->
|
|
|
|
<!-- <div class="voice">
|
|
|
|
<div class="bg voicePlay"></div>
|
|
|
|
</div>-->
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<div v-for="(item, index) in recordlist" :key="index">
|
|
|
|
<div class="messageitem flex" v-if="item.user_id != user_id">
|
|
|
|
<div class="messageitemleft">
|
|
|
|
<img :src="item.avatar" alt />
|
|
|
|
</div>
|
|
|
|
<div class="messageitemright" v-if="item.type == 1">
|
|
|
|
<div class="messagecontent">{{ item.data }}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="messageitemright imgright"
|
|
|
|
v-if="item.type == 2"
|
|
|
|
@click="previewimg(item.data)"
|
|
|
|
>
|
|
|
|
<div class="messagecontent">
|
|
|
|
<div class="contentimg">
|
|
|
|
<img :src="item.data" alt />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="messageitemright" v-if="item.type == 3">
|
|
|
|
<div
|
|
|
|
class="messagecontent"
|
|
|
|
:style="{ width: 1.7 + 'rem' }"
|
|
|
|
v-if="item.times > 0 && item.times < 5"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshuk">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="messagecontent"
|
|
|
|
:style="{ width: 2 + 'rem' }"
|
|
|
|
v-if="item.times >= 5 && item.times < 15"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshuk">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="messagecontent"
|
|
|
|
:style="{ width: 4.5 + 'rem' }"
|
|
|
|
v-if="item.times >= 15"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshuk">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="messageitem messageitemk flex"
|
|
|
|
v-if="item.user_id == user_id"
|
|
|
|
:id="item.idkk"
|
|
|
|
>
|
|
|
|
<div class="messageitemrightk" v-if="item.type == 1">
|
|
|
|
<div class="messagecontentk">{{ item.data }}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="messageitemrightk"
|
|
|
|
v-if="item.type == 2"
|
|
|
|
@click="previewimg(item.data)"
|
|
|
|
>
|
|
|
|
<div class="messagecontentk">
|
|
|
|
<div class="contentimg">
|
|
|
|
<img :src="item.data" alt />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- v-clipboard:copy="that.serverId"
|
|
|
|
v-clipboard:success="onCopy"-->
|
|
|
|
<div class="messageitemrightk" v-if="item.type == 3">
|
|
|
|
<div
|
|
|
|
class="messagecontentk yuyink"
|
|
|
|
:style="{ width: 1 + 'rem' }"
|
|
|
|
v-if="item.times > 0 && item.times < 5"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice voiceright">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshu">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="messagecontentk yuyink"
|
|
|
|
:style="{ width: 2 + 'rem' }"
|
|
|
|
v-if="item.times >= 5 && item.times < 15"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice voiceright">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshu">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="messagecontentk yuyink"
|
|
|
|
:style="{ width: 4.5 + 'rem' }"
|
|
|
|
v-if="item.times >= 15"
|
|
|
|
@click="audioplay(item, index)"
|
|
|
|
>
|
|
|
|
<div class="voice voiceright">
|
|
|
|
<div
|
|
|
|
class="bg"
|
|
|
|
:class="item.sel == true ? 'voicePlay' : ''"
|
|
|
|
></div>
|
|
|
|
<div class="miaoshu">{{ item.times }}'</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="messageitemleftk">
|
|
|
|
<img :src="item.avatar" alt />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</van-pull-refresh>
|
|
|
|
|
|
|
|
<!-- 底部导航 -->
|
|
|
|
|
|
|
|
<!-- <div class="messagebot messagebotkk flexone" v-if="is_self == 0 && isbot == true">
|
|
|
|
<div class="messagebotleft">
|
|
|
|
<img src="../../../assets/yuyin.png" alt />
|
|
|
|
</div>
|
|
|
|
<div class="writermessage">
|
|
|
|
<input type="text" placeholder="写留言" @input="entertext" :value="text" />
|
|
|
|
</div>
|
|
|
|
<div class="sendk" @click="send">发送</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="is_self == 1">
|
|
|
|
<div class="messagebot messagebotkk flexone" v-if="sendword">
|
|
|
|
<div class="messagebotleft" @click="changeword">
|
|
|
|
<img src="../../../assets/yuyin.png" alt />
|
|
|
|
</div>
|
|
|
|
<div class="writermessage">
|
|
|
|
<input type="text" placeholder="写留言" @input="entertext" :value="text" />
|
|
|
|
</div>
|
|
|
|
<div class="sendk" @click="send">发送</div>
|
|
|
|
</div>
|
|
|
|
<div class="messagebot messagebotk flextwo" v-else>
|
|
|
|
<img src="../../../assets/yuyin.png" alt class="zhibobtn" @click="changeword" />
|
|
|
|
<img src="../../../assets/pic.png" alt class="zhibobtn" @click="choseimg" />
|
|
|
|
<img src="../../../assets/luyin.png" alt class="yuyinbtn" @click="yuyin" />
|
|
|
|
<img src="../../../assets/shangchuan.png" alt class="zhibobtn" />
|
|
|
|
<img src="../../../assets/kaiguan.png" alt class="zhibobtn" @click="stopbtn" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="manypeople">
|
|
|
|
<img src="../../../assets/manypeople.png" alt class="manypeopleimg" />
|
|
|
|
{{ group_count }}
|
|
|
|
</div>-->
|
|
|
|
|
|
|
|
<!-- 直播结束了 -->
|
|
|
|
<!-- <div class="register" v-if="iszhibo">
|
|
|
|
<div class="zhiboover">
|
|
|
|
<div class="zhibovoertop">本次直播内容同步保存到录播</div>
|
|
|
|
<div class="zhiboque" @click="overvideo">同步到录音并结束</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="register" v-if="showtips">
|
|
|
|
<div class="zhiboover">
|
|
|
|
<div class="zhibovoertop">来早了，还没到开课时间</div>
|
|
|
|
<div class="zhiboque" @click="suretips">确定</div>
|
|
|
|
</div>
|
|
|
|
</div>-->
|
|
|
|
|
|
|
|
<!-- 上传成功 -->
|
|
|
|
<div class="register" v-if="issuccess">
|
|
|
|
<div class="zhiboover">
|
|
|
|
<div class="zhibovoertop">
|
|
|
|
<img src="../../../assets/upsuccess.png" alt class="successimg" />
|
|
|
|
<div class="successname">上传成功</div>
|
|
|
|
</div>
|
|
|
|
<div class="zhiboque" @click="sureup">确认</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 开始录制 -->
|
|
|
|
<div class="register" style="z-index: 999" v-if="beginlushow" @click="hide">
|
|
|
|
<div class="luwrap" @click.stop="beginluyin">
|
|
|
|
<div class="beginlu">开始录制</div>
|
|
|
|
<div>
|
|
|
|
<img src="../../../assets/beginlu.png" alt class="beginluimg" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 正在录制 -->
|
|
|
|
<div class="register" style="z-index: 999" v-if="zhengzailu" @click="hide">
|
|
|
|
<div class="luwrap" @click.stop="finishluyin">
|
|
|
|
<div class="beginlu">正在录音：{{ time }}'</div>
|
|
|
|
<div>
|
|
|
|
<img src="../../../assets/zhengzailu.png" alt class="beginluimg" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 录制完成 -->
|
|
|
|
<div class="register" style="z-index: 999" v-if="luprocess" @click="hide">
|
|
|
|
<div class="luwrap">
|
|
|
|
<div class="beginlu">录音时长：{{ time }}'</div>
|
|
|
|
<div class="flextwo chonglu">
|
|
|
|
<div class="relu" @click="resetlu">重录</div>
|
|
|
|
<div class="send" @click.stop="sendyuyin">发送</div>
|
|
|
|
<div class="relu" @click.stop="shiting">试听</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 温馨提示 -->
|
|
|
|
<div class="register" style="z-index: 999" v-if="chonglushow">
|
|
|
|
<div class="wentipswrap">
|
|
|
|
<div class="tipsname">温馨提示</div>
|
|
|
|
<div class="waittips">您确认舍弃该录音重新录制吗</div>
|
|
|
|
<div class="waitbot flexone">
|
|
|
|
<div class="waitbotleft">取消</div>
|
|
|
|
<div class="waitbotlright">重录</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 本次录音是否上传 -->
|
|
|
|
|
|
|
|
<div class="register" style="z-index: 999" v-if="shanghcuanshow">
|
|
|
|
<div class="wentipswrap">
|
|
|
|
<div class="waittips benci">本次录音是否上传</div>
|
|
|
|
<div class="waitbot flexone">
|
|
|
|
<div class="waitbotleft" @click="hideshangchuan">直接结束</div>
|
|
|
|
<div class="waitbotlright" @click="shangyuyin">上传录音</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 是否结束录播 -->
|
|
|
|
<div class="register" style="z-index: 999" v-if="overzhibo">
|
|
|
|
<div class="wentipswrap">
|
|
|
|
<div class="waittips benci">是否结束直播</div>
|
|
|
|
<div class="waitbot flexone">
|
|
|
|
<div class="waitbotleft" @click="canclesure">取消</div>
|
|
|
|
<div class="waitbotlright" @click="surezhibo">结束</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import wx from "jweixin-1.6.0";
|
|
|
|
import Vue from "vue";
|
|
|
|
import { PullRefresh, Toast } from "vant";
|
|
|
|
Vue.use(PullRefresh);
|
|
|
|
Vue.use(Toast);
|
|
|
|
var timer = null;
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
iszhibo: false,
|
|
|
|
issuccess: false,
|
|
|
|
beginlushow: false,
|
|
|
|
luprocess: false,
|
|
|
|
chonglushow: false,
|
|
|
|
shanghcuanshow: false,
|
|
|
|
zhengzailu: false,
|
|
|
|
overzhibo: false,
|
|
|
|
id: "",
|
|
|
|
is_self: "",
|
|
|
|
user_id: "",
|
|
|
|
showtips: false,
|
|
|
|
sendword: false,
|
|
|
|
text: "",
|
|
|
|
isbot: false,
|
|
|
|
time: 1,
|
|
|
|
localId: "",
|
|
|
|
serverId: "",
|
|
|
|
number: 0,
|
|
|
|
group_count: "",
|
|
|
|
// 直播列表
|
|
|
|
page: 1,
|
|
|
|
this_page: '',
|
|
|
|
total_page: '',
|
|
|
|
isLoading: false,
|
|
|
|
recordlist: [],
|
|
|
|
baseurl: "",
|
|
|
|
height: '',
|
|
|
|
hei: '600px',
|
|
|
|
target: '',
|
|
|
|
yuyintype: '',
|
|
|
|
stopurl: '',
|
|
|
|
stopindex: 0,
|
|
|
|
coursetitle: "",
|
|
|
|
playlocalid: '',
|
|
|
|
is_favorite: 0
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
|
|
|
|
// 获取个人中心
|
|
|
|
this.getuserinfo()
|
|
|
|
// alert(location.host)
|
|
|
|
this.baseurl = 'http://' + location.host
|
|
|
|
let div = this.$refs["message-list"];
|
|
|
|
|
|
|
|
// alert(1111)
|
|
|
|
// alert(this.baseurl+
|
|
|
|
// "/redirect.html?shareRedirect=" +
|
|
|
|
// encodeURIComponent(window.location.href))
|
|
|
|
document.title = "唐元集公众号";
|
|
|
|
this.id = this.$route.query.id;
|
|
|
|
// 获取appid
|
|
|
|
this.getappid();
|
|
|
|
this.getlubodetail();
|
|
|
|
this.initWebSocket();
|
|
|
|
// 获取直播列表
|
|
|
|
this.getzhibolist()
|
|
|
|
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
let that = this
|
|
|
|
|
|
|
|
|
|
|
|
console.log(that.target, '99997878666')
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
},
|
|
|
|
beforeRouteEnter(to, from, next) {
|
|
|
|
var u = navigator.userAgent;
|
|
|
|
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
|
|
|
// XXX: 修复iOS版微信HTML5 History兼容性问题
|
|
|
|
if (isiOS && to.path !== location.pathname) {
|
|
|
|
// 此处不可使用location.replace
|
|
|
|
location.assign(to.fullPath);
|
|
|
|
} else {
|
|
|
|
next();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
//获取个人中心
|
|
|
|
getuserinfo() {
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
var url = "/api/user/index";
|
|
|
|
let param = {
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res);
|
|
|
|
that.user_id = res.data.id
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 列表自动滚到到底部
|
|
|
|
toBottom() {
|
|
|
|
// let listContainer = document.getElementById('messagebox')
|
|
|
|
let div = this.$refs["message-list"];
|
|
|
|
console.log(div.scrollHeight, 8887766543)
|
|
|
|
console.log(div.style.height, 9999)
|
|
|
|
|
|
|
|
this.height = div.clientHeight
|
|
|
|
|
|
|
|
div.scrollTop = div.scrollHeight
|
|
|
|
// let height = div.offsetHeight
|
|
|
|
// console.log(height, 9999888888)
|
|
|
|
// const listContainer = this.$refs["message-list"];
|
|
|
|
// console.log(listContainer, '9999887766543434334345454')
|
|
|
|
// listContainer.scrollTop = height;
|
|
|
|
// this.$forceUpdate()
|
|
|
|
},
|
|
|
|
// 视频上拉加载
|
|
|
|
onLoad() {
|
|
|
|
let that = this;
|
|
|
|
// 异步更新数据
|
|
|
|
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
|
|
|
setTimeout(() => {
|
|
|
|
console.log(3434);
|
|
|
|
|
|
|
|
let newpage = that.page;
|
|
|
|
newpage++;
|
|
|
|
that.page = newpage;
|
|
|
|
console.log(that.page);
|
|
|
|
that.getzhibolist();
|
|
|
|
|
|
|
|
// 加载状态结束
|
|
|
|
this.loading = false;
|
|
|
|
// 数据全部加载完成
|
|
|
|
if (that.this_page == that.total_page) {
|
|
|
|
this.finished = true;
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
onRefresh() {
|
|
|
|
let that = this;
|
|
|
|
setTimeout(() => {
|
|
|
|
this.isLoading = false;
|
|
|
|
// Toast('刷新成功');
|
|
|
|
if (that.this_page != that.total_page) {
|
|
|
|
let newpage = that.page;
|
|
|
|
newpage++;
|
|
|
|
that.page = newpage;
|
|
|
|
console.log(that.page);
|
|
|
|
that.getzhibolist();
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取appid
|
|
|
|
getappid() {
|
|
|
|
let that = this;
|
|
|
|
console.log(34734894890);
|
|
|
|
let urlk = window.location.href;
|
|
|
|
var url = "/api/user/wechat_jssdk";
|
|
|
|
let param = {
|
|
|
|
url: urlk
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res);
|
|
|
|
wx.config({
|
|
|
|
debug: false,
|
|
|
|
appId: res.data.jssdk.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
|
|
|
|
timestamp: res.data.jssdk.timestamp, // 必填，生成签名的时间戳
|
|
|
|
nonceStr: res.data.jssdk.nonceStr, // 必填，生成签名的随机串
|
|
|
|
signature: res.data.jssdk.signature, // 必填，签名，见附录1
|
|
|
|
//需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
|
|
|
|
jsApiList: [
|
|
|
|
"startRecord",
|
|
|
|
"stopRecord",
|
|
|
|
"playVoice",
|
|
|
|
"uploadVoice",
|
|
|
|
"playVoice",
|
|
|
|
"downloadVoice",
|
|
|
|
"stopVoice",
|
|
|
|
"chooseImage",
|
|
|
|
"uploadImage",
|
|
|
|
"updateAppMessageShareData",
|
|
|
|
"updateTimelineShareData",
|
|
|
|
"previewImage"
|
|
|
|
]
|
|
|
|
});
|
|
|
|
|
|
|
|
that.sharetofriend()
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 分享给朋友
|
|
|
|
sharetofriend() {
|
|
|
|
|
|
|
|
var that = this;
|
|
|
|
// 处理验证失败的信息
|
|
|
|
wx.error(function (res) {
|
|
|
|
logUtil.printLog("验证失败返回的信息:", res);
|
|
|
|
});
|
|
|
|
// 处理验证成功的信息
|
|
|
|
wx.ready(function () {
|
|
|
|
|
|
|
|
|
|
|
|
// alert(window.location.href.split('#')[0]);
|
|
|
|
// var share_title = that.sharemsg.title;
|
|
|
|
// if (share_title.indexOf("${title}") >= 0) {
|
|
|
|
// share_title = share_title.replace(
|
|
|
|
// "${title}",
|
|
|
|
// that.details.details.title
|
|
|
|
// );
|
|
|
|
// }
|
|
|
|
// var share_desc = that.sharemsg.content;
|
|
|
|
// if (share_desc.indexOf("${title}") >= 0) {
|
|
|
|
// share_desc = share_desc.replace(
|
|
|
|
// "${title}",
|
|
|
|
// that.details.details.title
|
|
|
|
// );
|
|
|
|
// }
|
|
|
|
// if (share_desc.indexOf("${text}") >= 0) {
|
|
|
|
// share_desc = share_desc.replace("${text}", that.details.details.text);
|
|
|
|
// }
|
|
|
|
// 分享到朋友圈
|
|
|
|
wx.updateTimelineShareData({
|
|
|
|
title: '分享', // 分享标题
|
|
|
|
link: that.baseurl +
|
|
|
|
"/redirect.html?shareRedirect=" +
|
|
|
|
encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
|
imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png',
|
|
|
|
|
|
|
|
// imgUrl: that.details.details.img
|
|
|
|
// ? that.details.details.img
|
|
|
|
// : that.sharemsg.img,
|
|
|
|
|
|
|
|
// 分享图标
|
|
|
|
// desc: that.sharemsg.content,
|
|
|
|
success: function (res) {
|
|
|
|
// 用户确认分享后执行的回调函数
|
|
|
|
console.log("suss");
|
|
|
|
logUtil.printLog("分享到朋友圈成功返回的信息为:", res);
|
|
|
|
that.showMsg("分享成功!");
|
|
|
|
},
|
|
|
|
cancel: function (res) {
|
|
|
|
// 用户取消分享后执行的回调函数
|
|
|
|
console.log("err");
|
|
|
|
logUtil.printLog("取消分享到朋友圈返回的信息为:", res);
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
// 分享给朋友
|
|
|
|
wx.updateAppMessageShareData({
|
|
|
|
title: '分享', // 分享标题
|
|
|
|
desc: '分享', // 分享描述
|
|
|
|
link:
|
|
|
|
that.baseurl +
|
|
|
|
"/redirect.html?shareRedirect=" +
|
|
|
|
encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
|
imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png',
|
|
|
|
|
|
|
|
// imgUrl: that.details.details.img
|
|
|
|
// ? that.details.details.img
|
|
|
|
// : that.sharemsg.img,
|
|
|
|
// 分享图标
|
|
|
|
type: "", // 分享类型,music、video或link，不填默认为link
|
|
|
|
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
|
|
|
|
success: function (res) {
|
|
|
|
// 用户确认分享后执行的回调函数
|
|
|
|
logUtil.printLog("分享给朋友成功返回的信息为:", res);
|
|
|
|
},
|
|
|
|
cancel: function (res) {
|
|
|
|
// 用户取消分享后执行的回调函数
|
|
|
|
logUtil.printLog("取消分享给朋友返回的信息为:", res);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 上传图片
|
|
|
|
choseimg() {
|
|
|
|
let that = this
|
|
|
|
wx.chooseImage({
|
|
|
|
count: 1, // 默认9
|
|
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
|
|
success: function (res) {
|
|
|
|
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
|
|
|
|
|
|
|
|
wx.uploadImage({
|
|
|
|
localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
|
|
|
|
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|
|
|
success: function (res) {
|
|
|
|
var serverId = res.serverId; // 返回图片的服务器端ID
|
|
|
|
that.serverId = res.serverId;
|
|
|
|
that.upload()
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
upload() {
|
|
|
|
let that = this;
|
|
|
|
console.log(34734894890)
|
|
|
|
|
|
|
|
var url = "/api/user/upload_media";
|
|
|
|
let param = {
|
|
|
|
type: 1,
|
|
|
|
media_id: that.serverId
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res);
|
|
|
|
that.videourl = res.data.media;
|
|
|
|
let objdata = {
|
|
|
|
lesson_id: that.id,
|
|
|
|
type: 2,
|
|
|
|
user_id: that.user_id,
|
|
|
|
times: 0,
|
|
|
|
data: that.videourl
|
|
|
|
};
|
|
|
|
objdata = JSON.stringify(objdata);
|
|
|
|
// alert(objdata);
|
|
|
|
that.websocketsend(objdata);
|
|
|
|
// alert(that.videourl)
|
|
|
|
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 预览图片
|
|
|
|
previewimg(url) {
|
|
|
|
|
|
|
|
let arr = [];
|
|
|
|
arr.push(url)
|
|
|
|
wx.previewImage({
|
|
|
|
current: url, // 当前显示图片的http链接
|
|
|
|
urls: arr// 需要预览的图片http链接列表
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 隐藏遮罩层
|
|
|
|
hide() {
|
|
|
|
this.beginlushow = false;
|
|
|
|
this.zhengzailu = false;
|
|
|
|
this.luprocess = false;
|
|
|
|
wx.pauseVoice({
|
|
|
|
localId: that.localId // 需要暂停的音频的本地ID，由stopRecord接口获得
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 返回上一页
|
|
|
|
back() {
|
|
|
|
this.$router.go(-1);
|
|
|
|
},
|
|
|
|
overvideo() {
|
|
|
|
this.iszhibo = false;
|
|
|
|
},
|
|
|
|
sureup() {
|
|
|
|
this.issuccess = false;
|
|
|
|
},
|
|
|
|
// 隐藏来早了还没开课
|
|
|
|
suretips() {
|
|
|
|
// this.$router.go(-1)
|
|
|
|
this.showtips = false;
|
|
|
|
},
|
|
|
|
// 切换语音发送还是文字发送
|
|
|
|
changeword() {
|
|
|
|
this.sendword = !this.sendword;
|
|
|
|
console.log(this.sendword);
|
|
|
|
},
|
|
|
|
|
|
|
|
// 输入文字
|
|
|
|
entertext(e) {
|
|
|
|
this.text = e.target.value;
|
|
|
|
},
|
|
|
|
// 开始录制
|
|
|
|
yuyin() {
|
|
|
|
this.beginlushow = true;
|
|
|
|
this.yuyintype = 1
|
|
|
|
},
|
|
|
|
|
|
|
|
// 开始录音
|
|
|
|
beginluyin() {
|
|
|
|
console.log(83434898989);
|
|
|
|
let that = this;
|
|
|
|
that.beginlushow = false;
|
|
|
|
that.zhengzailu = true;
|
|
|
|
let time = 0;
|
|
|
|
timer = setInterval(() => {
|
|
|
|
time++;
|
|
|
|
that.time = time;
|
|
|
|
console.log(that.time);
|
|
|
|
}, 1000);
|
|
|
|
wx.startRecord({
|
|
|
|
success: function (res) {
|
|
|
|
// alert(JSON.stringify(res))
|
|
|
|
consoel.log(res, 99977775655);
|
|
|
|
// alert('成功调起录音')
|
|
|
|
// that.timer = setInterval(() => {
|
|
|
|
// time++;
|
|
|
|
// that.time = time
|
|
|
|
// }, 1000)
|
|
|
|
// that.vicoeEnd()
|
|
|
|
},
|
|
|
|
cancel: function () {
|
|
|
|
// alert("用户拒绝授权录音");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 完成录音
|
|
|
|
finishluyin() {
|
|
|
|
let that = this;
|
|
|
|
this.zhengzailu = false;
|
|
|
|
this.luprocess = true;
|
|
|
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
|
|
|
wx.stopRecord({
|
|
|
|
success: function (res) {
|
|
|
|
var localId = res.localId;
|
|
|
|
that.localId = res.localId;
|
|
|
|
that.upyuyin();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 试听录音
|
|
|
|
shiting() {
|
|
|
|
wx.playVoice({
|
|
|
|
localId: this.localId // 需要播放的音频的本地ID，由stopRecord接口获得
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 结束本次上传
|
|
|
|
hideshangchuan() {
|
|
|
|
this.shanghcuanshow = false
|
|
|
|
},
|
|
|
|
// 发送语音
|
|
|
|
sendyuyin() {
|
|
|
|
this.shanghcuanshow = true
|
|
|
|
},
|
|
|
|
shangyuyin() {
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
|
|
|
|
this.shanghcuanshow = false
|
|
|
|
that.luprocess = false;
|
|
|
|
this.issuccess = true
|
|
|
|
let objdata = {
|
|
|
|
lesson_id: this.id,
|
|
|
|
type: 3,
|
|
|
|
user_id: this.user_id,
|
|
|
|
times: that.time,
|
|
|
|
data: that.serverId
|
|
|
|
};
|
|
|
|
objdata = JSON.stringify(objdata);
|
|
|
|
// alert(objdata);
|
|
|
|
that.websocketsend(objdata);
|
|
|
|
},
|
|
|
|
// 上传语音到后台
|
|
|
|
upyuyin() {
|
|
|
|
let that = this;
|
|
|
|
wx.uploadVoice({
|
|
|
|
localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
|
|
|
|
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|
|
|
success: function (res) {
|
|
|
|
var serverId = res.serverId; // 返回音频的服务器端ID
|
|
|
|
that.serverId = res.serverId;
|
|
|
|
// alert(that.serverId);
|
|
|
|
// that.upload()
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 重录
|
|
|
|
resetlu() {
|
|
|
|
this.time = 0;
|
|
|
|
this.luprocess = false;
|
|
|
|
this.beginlushow = true;
|
|
|
|
clearInterval(this.timer);
|
|
|
|
},
|
|
|
|
// 停止直播
|
|
|
|
stopbtn() {
|
|
|
|
this.overzhibo = true
|
|
|
|
|
|
|
|
},
|
|
|
|
canclesure() {
|
|
|
|
this.overzhibo = false
|
|
|
|
},
|
|
|
|
surezhibo() {
|
|
|
|
let that = this;
|
|
|
|
that.overzhibo = false
|
|
|
|
let objdata = {
|
|
|
|
lesson_id: this.id,
|
|
|
|
type: 3,
|
|
|
|
user_id: this.user_id,
|
|
|
|
times: that.time,
|
|
|
|
data: '', is_end: 1
|
|
|
|
};
|
|
|
|
objdata = JSON.stringify(objdata);
|
|
|
|
// alert(objdata);
|
|
|
|
this.websocketsend(objdata);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取录播详情
|
|
|
|
getlubodetail() {
|
|
|
|
let that = this;
|
|
|
|
console.log(34734894890);
|
|
|
|
var url = "/api/user/lesson_detail";
|
|
|
|
let param = {
|
|
|
|
lesson_id: that.id
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res);
|
|
|
|
that.is_self = res.data.lesson.is_self;
|
|
|
|
that.coursetitle = res.data.lesson.title;
|
|
|
|
that.is_favorite = res.data.lesson.is_favorite;
|
|
|
|
// that.user_id = res.data.lesson.user_id;
|
|
|
|
let duration = res.data.lesson.duration;
|
|
|
|
if (that.is_self == 0) {
|
|
|
|
if (duration != 0) {
|
|
|
|
that.showtips = true;
|
|
|
|
that.isbot = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
timer = setInterval(() => {
|
|
|
|
duration = duration - 1;
|
|
|
|
|
|
|
|
if (duration <= 0) {
|
|
|
|
that.showtips = false;
|
|
|
|
that.isbot = true;
|
|
|
|
clearInterval(timer);
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
collect() {
|
|
|
|
let that = this;
|
|
|
|
var url = "/api/user/favorite";
|
|
|
|
let param = {
|
|
|
|
type: 4,
|
|
|
|
favorite_id: that.id
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res);
|
|
|
|
if (that.is_favorite == false) {
|
|
|
|
that.is_favorite = true;
|
|
|
|
Toast("收藏成功");
|
|
|
|
} else {
|
|
|
|
that.is_favorite = false;
|
|
|
|
Toast("取消收藏成功");
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 链接websocket
|
|
|
|
initWebSocket() {
|
|
|
|
//初始化weosocket
|
|
|
|
// const wsuri = "ws://tangyuanji.t.brotop.cn:11001";
|
|
|
|
this.websock = new WebSocket("ws://tangyuanji.t.brotop.cn:11001");
|
|
|
|
this.websock.onmessage = this.websocketonmessage;
|
|
|
|
this.websock.onopen = this.websocketonopen;
|
|
|
|
this.websock.onerror = this.websocketonerror;
|
|
|
|
this.websock.onclose = this.websocketclose;
|
|
|
|
},
|
|
|
|
websocketonopen() {
|
|
|
|
//连接建立之后执行send方法发送数据
|
|
|
|
console.log("连接成功");
|
|
|
|
},
|
|
|
|
websocketonerror() {
|
|
|
|
//连接建立失败重连
|
|
|
|
this.initWebSocket();
|
|
|
|
},
|
|
|
|
websocketonmessage(e) {
|
|
|
|
|
|
|
|
//数据接收
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
if (this.number == 0) {
|
|
|
|
let obj = { lesson_id: this.id, user_id: this.user_id, is_group: 1, first: 1 };
|
|
|
|
obj = JSON.stringify(obj);
|
|
|
|
console.log(obj);
|
|
|
|
this.websocketsend(obj);
|
|
|
|
|
|
|
|
// let data=e.
|
|
|
|
}
|
|
|
|
this.number = this.number + 1;
|
|
|
|
this.number = this.number;
|
|
|
|
let datak = e.data
|
|
|
|
console.log(e, 88890999);
|
|
|
|
console.log(e.data)
|
|
|
|
// alert(e.data)
|
|
|
|
// alert(e.data.first)
|
|
|
|
let data = JSON.parse(e.data);
|
|
|
|
// alert(data)
|
|
|
|
console.log(data)
|
|
|
|
that.group_count = data.group_count;
|
|
|
|
// 接收数据重新渲染列表
|
|
|
|
if (data.lesson_id != undefined) {
|
|
|
|
const redata = JSON.parse(e.data);
|
|
|
|
|
|
|
|
that.group_count = redata.group_count;
|
|
|
|
if (redata.code == 0) {
|
|
|
|
Toast(redata.msg)
|
|
|
|
} else if (redata.code == 1) {
|
|
|
|
that.recordlist.push(redata);
|
|
|
|
that.recordlist = that.recordlist;
|
|
|
|
that.$forceUpdate();
|
|
|
|
console.log(that.recordlist)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
websocketsend(Data) {
|
|
|
|
//数据发送
|
|
|
|
console.log(99999);
|
|
|
|
this.websock.send(Data);
|
|
|
|
},
|
|
|
|
websocketclose(e) {
|
|
|
|
//关闭
|
|
|
|
console.log("断开连接", e);
|
|
|
|
},
|
|
|
|
// 获取直播列表
|
|
|
|
getzhibolist() {
|
|
|
|
let that = this;
|
|
|
|
console.log(34734894890)
|
|
|
|
var url = "/api/user/lesson_chat_record";
|
|
|
|
let param = {
|
|
|
|
lesson_id: that.id,
|
|
|
|
page: that.page
|
|
|
|
};
|
|
|
|
|
|
|
|
that.$axios
|
|
|
|
.post(url, param)
|
|
|
|
.then(function (res) {
|
|
|
|
console.log(res, '直播列表');
|
|
|
|
if (that.page == 1) {
|
|
|
|
// 页面滚动到某一个位置
|
|
|
|
let len = res.data.record.length;
|
|
|
|
len = len - 1
|
|
|
|
res.data.record.forEach(function (value, index, array) {
|
|
|
|
if (index == len) {
|
|
|
|
value.idkk = 'targetboxk'
|
|
|
|
that.$nextTick(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
let targetbox = document.getElementById('targetboxk');
|
|
|
|
that.target = targetbox.offsetTop;
|
|
|
|
document.body.scrollTop = that.target;
|
|
|
|
document.getElementById('targetbox').scrollTop = that.target
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 拼接数组倒叙
|
|
|
|
var arr = [...res.data.record, ...that.recordlist];
|
|
|
|
that.recordlist = arr
|
|
|
|
that.recordlist.forEach(function (value, index, array) {
|
|
|
|
value.sel = false
|
|
|
|
})
|
|
|
|
that.recordlist = that.recordlist
|
|
|
|
that.this_page = res.data.this_page
|
|
|
|
that.total_page = res.data.total_page;
|
|
|
|
|
|
|
|
})
|
|
|
|
.catch(function (err) {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
audioplay(item, index) {
|
|
|
|
let that = this;
|
|
|
|
console.log(item)
|
|
|
|
// 播放某一个语音
|
|
|
|
|
|
|
|
// that.recordlist[index].sel = !that.recordlist[index].sel;
|
|
|
|
|
|
|
|
that.recordlist.forEach(function (value, indexk, array) {
|
|
|
|
if (index == indexk) {
|
|
|
|
|
|
|
|
that.recordlist[indexk].sel = !that.recordlist[indexk].sel;
|
|
|
|
} else {
|
|
|
|
that.recordlist[indexk].sel = false
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
that.recordlist = that.recordlist;
|
|
|
|
|
|
|
|
that.$forceUpdate();
|
|
|
|
console.log(that.recordlist)
|
|
|
|
|
|
|
|
if (this.recordlist[index].sel == true) {
|
|
|
|
// 开始播放
|
|
|
|
let localId = ''
|
|
|
|
wx.downloadVoice({
|
|
|
|
serverId: item.data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
|
|
|
|
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|
|
|
success: function (res) {
|
|
|
|
|
|
|
|
localId = res.localId; // 返回音频的本地ID
|
|
|
|
that.playlocalid = localId;
|
|
|
|
that.recordlist[index].localId = localId;
|
|
|
|
that.recordlist = that.recordlist;
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
|
|
|
wx.playVoice({
|
|
|
|
localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else if (this.recordlist[index].sel == false) {
|
|
|
|
// 停止播放
|
|
|
|
wx.stopVoice({
|
|
|
|
localId: that.playlocalid // 需要暂停的音频的本地ID，由stopRecord接口获得
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 监听播放停止播放下一个
|
|
|
|
wx.onVoicePlayEnd({
|
|
|
|
success: function (res) {
|
|
|
|
var localId = res.localId; // 返回音频的本地ID
|
|
|
|
|
|
|
|
that.recordlist.forEach(function (value, index, array) {
|
|
|
|
if (localId == value.localId) {
|
|
|
|
value.sel = false
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
that.recordlist = that.recordlist
|
|
|
|
|
|
|
|
that.$forceUpdate();
|
|
|
|
|
|
|
|
index = index + 1;
|
|
|
|
|
|
|
|
if (that.recordlist[index].data != undefined) {
|
|
|
|
if (that.recordlist[index].type == 3) {
|
|
|
|
that.recordlist[index].sel = true
|
|
|
|
wx.downloadVoice({
|
|
|
|
serverId: that.recordlist[index].data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
|
|
|
|
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|
|
|
success: function (res) {
|
|
|
|
let localId = res.localId; // 返回音频的本地ID
|
|
|
|
that.recordlist[index].localId = localId;
|
|
|
|
that.recordlist[index].sel = true;
|
|
|
|
that.recordlist = that.recordlist;
|
|
|
|
that.$forceUpdate()
|
|
|
|
wx.playVoice({
|
|
|
|
localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
that.recordlist = that.recordlist;
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
// 发送文字
|
|
|
|
send() {
|
|
|
|
// var ws = new WebSocket("ws://tangyuanji.t.brotop.cn:11001");
|
|
|
|
let objdata = {
|
|
|
|
lesson_id: this.id,
|
|
|
|
type: 1,
|
|
|
|
user_id: this.user_id,
|
|
|
|
times: 0,
|
|
|
|
data: this.text
|
|
|
|
};
|
|
|
|
console.log(objdata)
|
|
|
|
objdata = JSON.stringify(objdata);
|
|
|
|
// alert(objdata)
|
|
|
|
this.websocketsend(objdata);
|
|
|
|
this.text = ''
|
|
|
|
// ws.send(objdata);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
/* 34348989 */
|
|
|
|
|
|
|
|
/* 45548548 */
|
|
|
|
.container {
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
.sendk {
|
|
|
|
width: 1.14rem;
|
|
|
|
height: 0.6rem;
|
|
|
|
background: #599158;
|
|
|
|
border-radius: 0.04rem;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 0.6rem;
|
|
|
|
margin-left: 0.16rem;
|
|
|
|
}
|
|
|
|
.waitbot {
|
|
|
|
border-top: 1px solid #f5f5f5;
|
|
|
|
margin-top: 0.48rem;
|
|
|
|
}
|
|
|
|
.waitbotlright {
|
|
|
|
width: 3.1rem;
|
|
|
|
height: 0.96rem;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
color: #579057;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
line-height: 0.96rem;
|
|
|
|
}
|
|
|
|
.waitbotleft {
|
|
|
|
width: 3.1rem;
|
|
|
|
height: 0.96rem;
|
|
|
|
border-right: 1px solid #f5f5f5;
|
|
|
|
text-align: center;
|
|
|
|
color: #323233;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
line-height: 0.96rem;
|
|
|
|
}
|
|
|
|
/* 温馨提示 */
|
|
|
|
.waittips {
|
|
|
|
color: #7d7e80;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: 0.16rem;
|
|
|
|
}
|
|
|
|
.tipsname {
|
|
|
|
color: #323233;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
font-weight: bold;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: 0.48rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.benci {
|
|
|
|
margin-top: 0.68rem;
|
|
|
|
}
|
|
|
|
.wentipswrap {
|
|
|
|
width: 6.22rem;
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
border-radius: 0.08rem 0.08rem 0 0;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
.chonglu {
|
|
|
|
padding: 0 0.84rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
margin-top: 0.2rem;
|
|
|
|
}
|
|
|
|
.relu {
|
|
|
|
width: 1.04rem;
|
|
|
|
height: 1.04rem;
|
|
|
|
border: 1px solid #72a970;
|
|
|
|
/* box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56); */
|
|
|
|
color: #5c945c;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 1.04rem;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.send {
|
|
|
|
width: 1.6rem;
|
|
|
|
height: 1.6rem;
|
|
|
|
background: linear-gradient(135deg, #87bd87 1%, #4a834a);
|
|
|
|
box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56);
|
|
|
|
border-radius: 50%;
|
|
|
|
color: #ffffff;
|
|
|
|
font-size: 0.4rem;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 1.6rem;
|
|
|
|
}
|
|
|
|
.beginlu {
|
|
|
|
color: #323233;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.beginluimg {
|
|
|
|
width: 1.6rem;
|
|
|
|
height: 1.6rem;
|
|
|
|
font-size: 0;
|
|
|
|
margin-top: 0.16rem;
|
|
|
|
}
|
|
|
|
.luwrap {
|
|
|
|
padding: 0.4rem 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
background: #fff;
|
|
|
|
z-index: 99999;
|
|
|
|
}
|
|
|
|
.successname {
|
|
|
|
color: #7d7e80;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
margin-top: 0.16rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.successimg {
|
|
|
|
width: 1.6rem;
|
|
|
|
height: 1.6rem;
|
|
|
|
font-size: 0;
|
|
|
|
}
|
|
|
|
.zhiboover {
|
|
|
|
width: 6.22rem;
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
border-radius: 0.08rem 0.08rem 0 0;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
.zhibovoertop {
|
|
|
|
padding: 0.48rem 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
color: #323233;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.zhiboque {
|
|
|
|
color: #599158;
|
|
|
|
font-size: 0.32rem;
|
|
|
|
text-align: center;
|
|
|
|
padding: 0.24rem 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.messagebot {
|
|
|
|
background: #fff;
|
|
|
|
padding: 0 0.72rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.messagebotk {
|
|
|
|
padding: 0.16rem 0.72rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.messagebotkk {
|
|
|
|
padding: 0 0.32rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.zhibobtn {
|
|
|
|
width: 0.56rem;
|
|
|
|
height: 0.56rem;
|
|
|
|
font-size: 0;
|
|
|
|
}
|
|
|
|
.yuyinbtn {
|
|
|
|
width: 0.84rem;
|
|
|
|
height: 0.84rem;
|
|
|
|
font-size: 0;
|
|
|
|
}
|
|
|
|
.manypeople {
|
|
|
|
padding: 0.14rem 0.4rem;
|
|
|
|
color: #868686;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
opacity: 0.74;
|
|
|
|
background: #f7f7f7;
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
box-shadow: 0 0.16rem 0.3rem 0 rgba(142, 190, 142, 0.33);
|
|
|
|
position: fixed;
|
|
|
|
bottom: 1.2rem;
|
|
|
|
right: 0.32rem;
|
|
|
|
z-index: 9;
|
|
|
|
}
|
|
|
|
.manypeopleimg {
|
|
|
|
width: 0.32rem;
|
|
|
|
height: 0.28rem;
|
|
|
|
font-size: 0;
|
|
|
|
}
|
|
|
|
.messagelist {
|
|
|
|
/* height: 15rem; */
|
|
|
|
/* padding-bottom: 1.5rem; */
|
|
|
|
}
|
|
|
|
.contentimg {
|
|
|
|
width: 4.15rem;
|
|
|
|
height: 2.95rem;
|
|
|
|
font-size: 0;
|
|
|
|
}
|
|
|
|
.contentimg {
|
|
|
|
widows: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.yuyink {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.sharetop {
|
|
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
.messagecontent {
|
|
|
|
/* background: #999; */
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 语音聊天 */
|
|
|
|
.voice {
|
|
|
|
/* padding-top: 12px;
|
|
|
|
padding-left: 10px; */
|
|
|
|
/* margin: 100px auto; */
|
|
|
|
/* height: 35px;
|
|
|
|
width: 150px; */
|
|
|
|
/* background: #87bd87; */
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 0 7px 7px;
|
|
|
|
color: #333;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.voiceright {
|
|
|
|
transform: rotate(-180deg);
|
|
|
|
}
|
|
|
|
.miaoshu {
|
|
|
|
position: absolute;
|
|
|
|
left: 0.6rem;
|
|
|
|
bottom: 0.15rem;
|
|
|
|
font-size: 0.22rem;
|
|
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
.miaoshuk {
|
|
|
|
position: absolute;
|
|
|
|
left: 0.55rem;
|
|
|
|
bottom: 0.12rem;
|
|
|
|
font-size: 0.12rem;
|
|
|
|
}
|
|
|
|
.bg {
|
|
|
|
/* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=)
|
|
|
|
right 0 no-repeat; */
|
|
|
|
background: url(http://tangyuanji.t.brotop.cn/assets/images/media_icon.png)
|
|
|
|
no-repeat center;
|
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
background-size: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.voicePlay {
|
|
|
|
animation-name: voicePlay;
|
|
|
|
animation-duration: 1.2s;
|
|
|
|
animation-direction: normal;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-timing-function: steps(3);
|
|
|
|
/* animation: fadeInOut 1s infinite 0.4s; */
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes voicePlay {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 0.2;
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
opacity: 0.6;
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* @keyframes voicePlay {
|
|
|
|
0% {
|
|
|
|
background-position: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
background-position: -200%;
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
|
|
|
|
.box {
|
|
|
|
width: 1.2rem;
|
|
|
|
height: 1.2rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
|
|
margin: 0.5rem auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wifi-symbol {
|
|
|
|
width: 0.5rem;
|
|
|
|
height: 0.5rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
overflow: hidden;
|
|
|
|
transform: rotate(135deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.wifi-circle {
|
|
|
|
border: 0.03rem solid #999999;
|
|
|
|
border-radius: 50%;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
.first {
|
|
|
|
width: 0.05rem;
|
|
|
|
height: 0.05rem;
|
|
|
|
background: #cccccc;
|
|
|
|
top: 0.45rem;
|
|
|
|
left: 0.45rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.second {
|
|
|
|
width: 0.25rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
top: 0.35rem;
|
|
|
|
left: 0.35rem;
|
|
|
|
animation: fadeInOut 1s infinite 0.2s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.third {
|
|
|
|
width: 0.4rem;
|
|
|
|
height: 0.4rem;
|
|
|
|
top: 0.25rem;
|
|
|
|
left: 0.25rem;
|
|
|
|
animation: fadeInOut 1s infinite 0.4s;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInOut {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
/*初始状态 透明度为0*/
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
/*结尾状态 透明度为1*/
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
.box {
|
|
|
|
width: 1.2rem;
|
|
|
|
height: 1.2rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
|
|
margin: 0.05rem auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wifi-symbol {
|
|
|
|
width: 0.05rem;
|
|
|
|
height: 0.05rem;
|
|
|
|
box-sizing: border-box;
|
|
|
|
overflow: hidden;
|
|
|
|
transform: rotate(135deg);
|
|
|
|
}
|
|
|
|
.wifi-symbolk {
|
|
|
|
transform: rotate(315deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.wifi-circle {
|
|
|
|
border: 0.05rem solid #999999;
|
|
|
|
border-radius: 50%;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
.first {
|
|
|
|
width: 0.05rem;
|
|
|
|
height: 0.05rem;
|
|
|
|
background: #cccccc;
|
|
|
|
top: 0.45rem;
|
|
|
|
left: 0.45rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.second {
|
|
|
|
width: 0.25rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
top: 0.35rem;
|
|
|
|
left: 0.35rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.third {
|
|
|
|
width: 0.4rem;
|
|
|
|
height: 0.4rem;
|
|
|
|
top: 0.25rem;
|
|
|
|
left: 0.25rem;
|
|
|
|
}
|
|
|
|
.secondan {
|
|
|
|
animation: fadeInOut 1s infinbite 0.2s;
|
|
|
|
}
|
|
|
|
.thirdan {
|
|
|
|
animation: fadeInOut 1s infinite 0.4s;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInOut {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
/* .box {
|
|
|
|
width: 120px;
|
|
|
|
height: 120px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
|
|
margin: 50px auto;
|
|
|
|
}
|
|
|
|
.wifi-symbol {
|
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
overflow: hidden;
|
|
|
|
transform: rotate(135deg);
|
|
|
|
}
|
|
|
|
.wifi-symbolk {
|
|
|
|
transform: rotate(315deg);
|
|
|
|
}
|
|
|
|
.wifi-circle {
|
|
|
|
border: 5px solid #999999;
|
|
|
|
border-radius: 50%;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.first {
|
|
|
|
width: 0.05rem;
|
|
|
|
height: 0.05rem;
|
|
|
|
background: #cccccc;
|
|
|
|
top: 45px;
|
|
|
|
left: 45px;
|
|
|
|
}
|
|
|
|
.second {
|
|
|
|
width: 0.25rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
top: 35px;
|
|
|
|
left: 35px;
|
|
|
|
animation: fadeInOut 1s infinite 0.2s;
|
|
|
|
}
|
|
|
|
.third {
|
|
|
|
width: 0.4rem;
|
|
|
|
height: 0.4rem;
|
|
|
|
top: 25px;
|
|
|
|
left: 25px;
|
|
|
|
animation: fadeInOut 1s infinite 0.4s;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInOut {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
} */
|
|
|
|
</style> |
...
|
...
|
|
