|
|
@@ -1,1076 +1,688 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
- <div class="chatTable" @click="chatTable">
|
|
|
-
|
|
|
- <div class="mine chatTableDiv" v-for="(item, index) in chatRecord" :key="index" :class="item.sendId == 1 ? 'rights' : 'lefts'">
|
|
|
-
|
|
|
- <!--头像(other)-->
|
|
|
- <img v-if="item.sendId == 2" class="meAvatUrl" src="/static/images/avart2.jpg">
|
|
|
-
|
|
|
- <!--文本/表情聊天内容-->
|
|
|
- <p class="chatTextContent" v-if="item.type == 0" :class="item.sendId == 1 ? 'me' : 'others'" v-html="item.content"></p>
|
|
|
-
|
|
|
- <!--图片聊天内容-->
|
|
|
- <image class="content" v-if="item.type == 1 && !chatRecord[chatRecord.length - 1].isUploadPercFlag" :src="item.content" @click="showBigPic(item.content)" mdoe="aspectFill"></image>
|
|
|
-
|
|
|
- <!--上传图片/视频时的百分比模态框-->
|
|
|
- <div class="breathDiv" v-if="picTempArr.length && picTempArr[0].isUploadPercFlag">
|
|
|
- <div class="circularDiv"></div>
|
|
|
- <div class="text" v-text="picTempArr[0].percentage">%</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--视频聊天内容-->
|
|
|
- <img v-if="item.type == 2 && !item.isUploadPercFlag" class="videoPic" src="/static/images/user.png" @click="playVideo(item.content)">
|
|
|
- <!-- <video :id="index" :src="item.content" @click="playVideo(index)"></video> -->
|
|
|
-
|
|
|
- <!--表情聊天内容-->
|
|
|
- <!-- <img class="emojiContent" v-else-if="item.type == 4" :src="item.content"> -->
|
|
|
-
|
|
|
- <!--语音聊天内容-->
|
|
|
- <div v-if="item.type == 3" class="audioPlay chatTableDiv" @click="playAudio(index)">
|
|
|
- <img :src="item.isPlay === false ? '/static/images/voiceLeft.svg' : '/static/images/vioce.gif'">
|
|
|
- <a class="audioTime">{{item.time}}"</a>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--头像(self)-->
|
|
|
- <img v-if="item.sendId == 1" class="meAvatUrl" src="/static/images/avart.jpg">
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <web-view v-if="ffff" src="https://mp.weixin.qq.com"></web-view> -->
|
|
|
-
|
|
|
- <!--发送语音时拖动取消-->
|
|
|
- <div class="cancelAudioBox chatTableDiv" v-if="cancelAudioBoxFlag">
|
|
|
- <div class="cancelAudio chatTableDiv">
|
|
|
- <p class="ppp" :class="clientMoveBottomFlag == false ? 'defaultBg' : 'cancelBg'"
|
|
|
- v-text="clientMoveBottomFlag == false ? '正在录音' : '拖动到此处取消'"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <p class="clear"></p>
|
|
|
-
|
|
|
- <!-- <div class="other" v-for="(item, index) in chatRecord" :key="index" v-if="item.sendId == 2">
|
|
|
- <img class="otherAvatUrl" src="/static/images/avart.jpg" alt="">
|
|
|
- <p v-if="item.type == 0">{{item.content}}</p>
|
|
|
- <img class="content" v-else-if="item.type == 1" :src="item.content" alt="">
|
|
|
- <video v-else :src="item.content"></video>
|
|
|
- </div> -->
|
|
|
-
|
|
|
+ <div class="cx-card">
|
|
|
+ <movable-area class="moveMenuBox">
|
|
|
+ <movable-view class="moveMenuCont" v-if="modelSwitchType == 'show'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
|
|
|
+ <img class="moveMenuPic" src="/static/images/buoy.png">
|
|
|
+ </movable-view>
|
|
|
+ <movable-view class="moveMenuCont" v-if="modelSwitchType == 'card'" :x="tran" :y="vert" @touchend="handleTouchEnd" direction="all" damping="30" friction="5" @change="handleChange">
|
|
|
+ <img class="moveMenuPic" src="/static/images/headPic5.jpg">
|
|
|
+ <p class="text">聊一聊</p>
|
|
|
+ </movable-view>
|
|
|
+ <div class="subject">
|
|
|
+ <div class="topPic">
|
|
|
+ <img class="pic" src="/static/images/Computer-Background.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="rightTopPic">
|
|
|
+ <img class="pic" src="/static/images/camera.png" @click="console.log(1111)">
|
|
|
+ <p class="title">更换图片</p>
|
|
|
+ </div>
|
|
|
+ <div class="contanter">
|
|
|
+ <div class="addCard">
|
|
|
+ <img class="addPic" src="/static/images/add.svg">
|
|
|
+ <p class="add">创建名片</p>
|
|
|
+ </div>
|
|
|
+ <div class="optionBox">
|
|
|
+ <p class="switchCard">管理/切换名片</p>
|
|
|
+ <p class="modifyCard">修改名片</p>
|
|
|
+ <p class="setStyle">设置风格</p>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="shareCardBox">
|
|
|
+ <div class="shareCard">
|
|
|
+ <p class="text">分享名片</p>
|
|
|
+ </div>
|
|
|
+ <div class="qrCodeBox">
|
|
|
+ <img class="qrCode" src="/static/images/qrCode.png">
|
|
|
+ <p class="text">名片码</p>
|
|
|
+ </div>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="modelSwitchBox">
|
|
|
+ <div class="optionsBox">
|
|
|
+ <p class="card" :class="modelSwitchType == 'card' ? 'blueCss' : 'defaultCss'" @click="card()">名片
|
|
|
+ </p>
|
|
|
+ <div class="division">|</div>
|
|
|
+ <p class="shop" :class="modelSwitchType == 'shop' ? 'blueCss' : 'defaultCss'" @click="shop()">商城
|
|
|
+ </p>
|
|
|
+ <div class="division">|</div>
|
|
|
+ <p class="show" :class="modelSwitchType == 'show' ? 'blueCss' : 'defaultCss'" @click="show()">展厅
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 名片模块 -->
|
|
|
+ <div class="cardModel" v-if="modelSwitchType == 'card'">
|
|
|
+ <div class="looksCareBox">
|
|
|
+ <div class="looksCare">
|
|
|
+ <div class="userAvatarBox">
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic1.jpg">
|
|
|
+ <img class="crown" src="/static/images/vip.png">
|
|
|
+ <img class="Authentication" src="/static/images/presonAuthen.png">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic2.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic3.jpg">
|
|
|
+ <img class="crown" src="/static/images/vip.png">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic4.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic5.jpg">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="whoLooksCareMe">
|
|
|
+ <p class="text">889人看过</p>
|
|
|
+ <p class="arrow">></p>
|
|
|
+ </div>
|
|
|
+ <div class="clear"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="looksCare" @click="showWhoCollecMe()">
|
|
|
+ <div class="userAvatarBox">
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic1.jpg">
|
|
|
+ <img class="crown" src="/static/images/vip.png">
|
|
|
+ <img class="Authentication" src="/static/images/companyAuthen.png">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic2.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic3.jpg">
|
|
|
+ <img class="crown" src="/static/images/vip.png">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic4.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="avatarBox">
|
|
|
+ <img class="avatar" src="/static/images/headPic5.jpg">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="whoLooksCareMe">
|
|
|
+ <p class="text">谁收藏了我</p>
|
|
|
+ <p class="arrow">></p>
|
|
|
+ </div>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--我的印象-->
|
|
|
+ <div class="divisionDiv">
|
|
|
+ <p class="left">—————</p>
|
|
|
+ <p class="text">我的印象</p>
|
|
|
+ <p class="right">—————</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sign">
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <span class="text">靠谱</span>
|
|
|
+ <span class="num">10</span>
|
|
|
+ </div>
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <span class="text">幽默</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <span class="text">颜值爆表</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <span class="text">有实力</span>
|
|
|
+ <span class="num">10</span>
|
|
|
+ </div>
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <span class="text">友好</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="signDetail">
|
|
|
+ <img class="pic" src="/static/images/like_noSelect.png">
|
|
|
+ <p class="text">真诚</p>
|
|
|
+ <p class="num">8</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--名片模块-->
|
|
|
+ <div class="mainContent">
|
|
|
+ <div class="modelName">
|
|
|
+ <div class="titleBox" data-index="1" @click="panel">
|
|
|
+ <div class="title">公司简介</div>
|
|
|
+ <div class="titlePicBox">
|
|
|
+ <img class="titlePic"
|
|
|
+ :src="showIndex == 1 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
|
|
|
+ </div>
|
|
|
+ <!-- <div class="more" v-if="showIndex == 1">
|
|
|
+ <img class="morePic" src="/static/images/moreOperation.svg">
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modelBox" v-if="showIndex == 1">
|
|
|
+ <div class="contDetail">
|
|
|
+ <div class="audioCont">
|
|
|
+ <div class="spot">
|
|
|
+ <img class="spotPic" src="/static/images/spot.svg">
|
|
|
+ </div>
|
|
|
+ <div class="vioceBox">
|
|
|
+ <img class="viocePic" src="/static/images/vioces.svg">
|
|
|
+ <p class="text">4:00</p>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="articleBox1">
|
|
|
+ <img class="articlePic1" src="/static/images/testPic.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="articleCont1">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="articleBox2">
|
|
|
+ <img class="articlePic2" src="/static/images/testPic2.png">
|
|
|
+ <img class="articlePic3" src="/static/images/testPic3.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="articleCont2">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="articleCont3">
|
|
|
+ <img class="articlePic4" src="/static/images/testPic3.png">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modelName">
|
|
|
+ <div class="titleBox" data-index="2" @click="panel">
|
|
|
+ <div class="title">团队成员</div>
|
|
|
+ <div class="titlePicBox">
|
|
|
+ <img class="titlePic"
|
|
|
+ :src="showIndex == 2 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
|
|
|
+ </div>
|
|
|
+ <!-- <div class="more" v-if="showIndex == 1">
|
|
|
+ <img class="morePic" src="/static/images/moreOperation.svg">
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modelBox" v-if="showIndex == 2">
|
|
|
+ <div class="teamArticleCont1">
|
|
|
+ <img class="teamArticlePic1" src="/static/images/headPic2.jpg">
|
|
|
+ <p class="text">总经理:陈浩</p>
|
|
|
+ </div>
|
|
|
+ <div class="teamArticleCont2">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="teamArticleCont3">
|
|
|
+ <img class="teamArticlePi2" src="/static/images/headPic2.jpg">
|
|
|
+ <p class="text">总经理:陈浩</p>
|
|
|
+ </div>
|
|
|
+ <div class="teamArticleCont4">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modelName">
|
|
|
+ <div class="titleBox" data-index="3" @click="panel">
|
|
|
+ <div class="title">大事件</div>
|
|
|
+ <div class="titlePicBox">
|
|
|
+ <img class="titlePic"
|
|
|
+ :src="showIndex == 3 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modelBox" v-if="showIndex == 3">
|
|
|
+ <div class="eventArticleBox">
|
|
|
+ <img class="eventArticlePic1" src="/static/images/testPic2.png">
|
|
|
+ <img class="eventArticlePic2" src="/static/images/testPic3.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--自定义-->
|
|
|
+ <div class="modelName">
|
|
|
+ <div class="titleBox" data-index="4" @click="panel">
|
|
|
+ <div class="title">自定义</div>
|
|
|
+ <div class="titlePicBox">
|
|
|
+ <img class="titlePic"
|
|
|
+ :src="showIndex == 4 ? '/static/images/arrowUp.svg' : '/static/images/arrowDown.svg'">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modelBox" v-if="showIndex == 4">
|
|
|
+ <div class="customArticle1">
|
|
|
+ <img class="customArticlePic1" src="/static/images/spot.svg">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="customArticle2">
|
|
|
+ <img class="customArticlePic2" src="/static/images/spot.svg">
|
|
|
+ <p class="text">
|
|
|
+ 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
|
|
|
+ </p>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--新增模块-->
|
|
|
+ <div class="addNewModel">
|
|
|
+ <p class="text">新增模块</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 商城模块 -->
|
|
|
+ <div class="shopModel" v-if="modelSwitchType == 'shop'">
|
|
|
+ <div class="switchDiv">
|
|
|
+ <switch class="switchPic" checked color="#53A7FA"></switch>
|
|
|
+ <p class="text">启用商城</p>
|
|
|
+ </div>
|
|
|
+ <div class="searchDiv">
|
|
|
+ <img class="searchPic" src="/static/images/search.png">
|
|
|
+ <input class="input" type="text" placeholder="按姓名、公司或职位搜索">
|
|
|
+ </div>
|
|
|
+ <div class="optionBox">
|
|
|
+ <div class="options">
|
|
|
+ <p class="text1">好课推荐</p>
|
|
|
+ <p class="text1">实用教程</p>
|
|
|
+ <p class="text1">生活美学</p>
|
|
|
+ <p class="labelText">标签设置</p>
|
|
|
+ </div>
|
|
|
+ <div class="separate"></div>
|
|
|
+ <p class="allOption">全部</p>
|
|
|
+ </div>
|
|
|
+ <div class="everyModel">
|
|
|
+
|
|
|
+ <!-- banner -->
|
|
|
+ <div class="titleBox">
|
|
|
+ <p class="text">banner</p>
|
|
|
+ <img class="arrowPic" src="/static/images/triangleArrow.png">
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bannerBox">
|
|
|
+ <div class="bannerPicBox">
|
|
|
+ <img class="bannerPic" src="/static/images/bannerImg.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 背景 -->
|
|
|
+ <div class="haveBgDiv">
|
|
|
+ <!-- 精品课程 -->
|
|
|
+ <div class="titleBox bg">
|
|
|
+ <p class="text">精品课程</p>
|
|
|
+ <img class="arrowPic" src="/static/images/triangleArrow.png">
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goodsListBox">
|
|
|
+ <div class="goodsList">
|
|
|
+ <div class="goodsImgBox">
|
|
|
+ <img class="goodsPic" src="/static/images/goodsImg.png">
|
|
|
+ <p class="goodsSign">热门</p>
|
|
|
+ </div>
|
|
|
+ <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
|
|
|
+ <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存:90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goodsList">
|
|
|
+ <div class="goodsImgBox">
|
|
|
+ <img class="goodsPic" src="/static/images/goodsImg.png">
|
|
|
+ </div>
|
|
|
+ <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
|
|
|
+ <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存：90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goodsList">
|
|
|
+ <div class="goodsImgBox">
|
|
|
+ <img class="goodsPic" src="/static/images/goodsImg.png">
|
|
|
+ </div>
|
|
|
+ <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
|
|
|
+ <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存：90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goodsList">
|
|
|
+ <div class="goodsImgBox">
|
|
|
+ <img class="goodsPic" src="/static/images/goodsImg.png">
|
|
|
+ </div>
|
|
|
+ <p class="goodsTitle">英语启蒙第一课一拼一读自然英语启蒙第一课拼读</p>
|
|
|
+ <p class="goodsDescribe">奔逃教材结合了儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材哈哈哈哈哈哈哈哈哈哈哈</p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存：90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查看更多 -->
|
|
|
+ <div class="showMoreBox">
|
|
|
+ <p class="title">查看更多</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 精品课程 -->
|
|
|
+ <div class="titleBox">
|
|
|
+ <p class="text">精品课程</p>
|
|
|
+ <img class="arrowPic" src="/static/images/triangleArrow.png">
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="BoutiqueClass">
|
|
|
+ <div class="classPicBox">
|
|
|
+ <img class="classPic" src="/static/images/testPic.jpg">
|
|
|
+ <p class="commentText">
|
|
|
+ 我想说点什么呢？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 最新课程 -->
|
|
|
+ <div class="titleBox">
|
|
|
+ <p class="text">最新课程</p>
|
|
|
+ <img class="arrowPic" src="/static/images/triangleArrow.png">
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 最新课程列表 -->
|
|
|
+ <div class="newClassBox">
|
|
|
+ <div class="classPicBox">
|
|
|
+ <img class="classPic" src="/static/images/testPic2.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="detailBox">
|
|
|
+ <p class="title">
|
|
|
+ 英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
|
|
|
+ </p>
|
|
|
+ <p class="describeText">
|
|
|
+ 本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
|
|
|
+ </p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存:90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="newClassBox">
|
|
|
+ <div class="classPicBox">
|
|
|
+ <img class="classPic" src="/static/images/testPic2.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="detailBox">
|
|
|
+ <p class="title">
|
|
|
+ 英语启蒙第一课一拼一读自然英语启蒙第一课一拼一读
|
|
|
+ </p>
|
|
|
+ <p class="describeText">
|
|
|
+ 本套教材结合课儿童好动、活泼的个性，精选了一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材一系列适合少儿综合素质培养的教材
|
|
|
+ </p>
|
|
|
+ <div class="numBox">
|
|
|
+ <p class="goodsStock">库存:90</p>
|
|
|
+ <p class="goodsPrice">￥900</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查看更多 -->
|
|
|
+ <div class="showMoreBox">
|
|
|
+ <p class="title">查看更多</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 精品课程 -->
|
|
|
+ <div class="titleBox">
|
|
|
+ <p class="text">精品课程</p>
|
|
|
+ <img class="arrowPic" src="/static/images/triangleArrow.png">
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="slideSwitch">
|
|
|
+ <div class="classRecommendBox"> <!--Recommend=>推荐-->
|
|
|
+ <div class="classRecommendPicBox">
|
|
|
+ <img class="classRecommendPic" src="/static/images/testBgPic.jpg">
|
|
|
+ <div class="topBox">
|
|
|
+ <p class="text1">好课推荐</p>
|
|
|
+ <p class="text2">共50门 | 每日更新</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text2">查看全部 50门 ></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="classRecommendBox2"> <!--Recommend=>推荐-->
|
|
|
+ <div class="classRecommendPicBox">
|
|
|
+ <img class="classRecommendPic" src="/static/images/testBgPic2.jpg">
|
|
|
+ <div class="topBox">
|
|
|
+ <p class="text1">好课推荐</p>
|
|
|
+ <p class="text2">共50门 | 每日更新</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <p class="text1">1 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text1">2 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text1">3 聪明小天才英语教学，基础班限时打折报名</p>
|
|
|
+ <p class="text2">查看全部 50门 ></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="empty"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--新增模块-->
|
|
|
+ <div class="addNewModel">
|
|
|
+ <p class="text">新增模块</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 展厅模块 -->
|
|
|
+ <div class="showModel" v-if="modelSwitchType == 'show'">
|
|
|
+ <!-- 展厅开关 -->
|
|
|
+ <div class="switchDiv">
|
|
|
+ <switch class="switchPic" color="#53A7FA"></switch>
|
|
|
+ <p class="text">启用展厅</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主体 -->
|
|
|
+ <div class="container">
|
|
|
+ <div class="region1">
|
|
|
+ <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
|
|
|
+ <div class="imgBox">
|
|
|
+ <img class="contPic" src="/static/images/testPic3.jpg">
|
|
|
+ <img class="playPic" src="/static/images/play.png">
|
|
|
+ </div>
|
|
|
+ <div class="bottomDiv">
|
|
|
+ <p class="text">2020-02-03 14:00</p>
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="region2">
|
|
|
+ <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
|
|
|
+ <div class="imgBox">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ </div>
|
|
|
+ <div class="bottomDiv">
|
|
|
+ <p class="text">2020-02-03 14:00</p>
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="region3">
|
|
|
+ <div class="imgBox">
|
|
|
+ <img class="contPic" src="/static/images/testPic5.png">
|
|
|
+ </div>
|
|
|
+ <div class="bottomDiv">
|
|
|
+ <p class="text">2020-02-03 14:00</p>
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="region4">
|
|
|
+ <p class="title">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
|
|
|
+ <div class="imgBox">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ <img class="contPic" src="/static/images/testPic4.png">
|
|
|
+ </div>
|
|
|
+ <div class="bottomDiv">
|
|
|
+ <p class="text">2020-02-03 14:00</p>
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="region5">
|
|
|
+ <div class="imgBox">
|
|
|
+ <img class="contPic" src="/static/images/testPic5.png">
|
|
|
+ <p class="text">晨练的十大好处</p>
|
|
|
+ </div>
|
|
|
+ <div class="wordDiv">
|
|
|
+ <p class="text">不管是夏天还是冬天，这一款水杯都是您出行必备神器还送迷你小风扇一台</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottomDiv">
|
|
|
+ <p class="text">2020-02-03 14:00</p>
|
|
|
+ <img class="morePic" src="/static/images/more.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </movable-area>
|
|
|
</div>
|
|
|
-
|
|
|
- <!--底部功能栏-->
|
|
|
- <view class="bottomOperation">
|
|
|
- <!--语音/文字 切换-->
|
|
|
- <div class="audio" @click="changeVT">
|
|
|
- <img :src="flag?'/static/images/vioces.svg':'/static/images/keyboard.svg'">
|
|
|
- </div>
|
|
|
- <!--聊天输入框-->
|
|
|
- <div class="chatInput" v-if="flag">
|
|
|
- <!-- <input type="text" v-model="inputContent"> -->
|
|
|
- <textarea class="textContent" v-model.lazy="inputContent" auto-height = true maxlength = 500 adjust-position = true @input="handleInput" @blur="handleBlur" @focus="handleFocus"></textarea>
|
|
|
- </div>
|
|
|
- <!-- 按住说话 -->
|
|
|
- <div class="text" v-else catchtouchmove = "true">
|
|
|
- <button :class="changeBg ? 'speakBtn' : 'btnSpeak'" v-text="changeBg ? '按住说话' : '松开结束'" @touchstart = "handleTouchStart" @touchend = "handleTouchEnd" @tap = "handleTap" @touchmove = "handleTouchMove" @longpress = "handleLongPress"
|
|
|
- ></button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--表情小图标-->
|
|
|
- <div class="expSvg">
|
|
|
- <img @click="showEmoji" src="/static/images/expression.svg">
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--发送按钮-->
|
|
|
- <div class="sendBtn" v-if="sendBtnFlag">
|
|
|
- <button type="button" @click="conn">发送</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--功能展示按钮 + -->
|
|
|
- <div class="showOper" v-if="sendBtnFlag == false">
|
|
|
- <img src="/static/images/add.svg" @click="showPopup">
|
|
|
- </div>
|
|
|
- <p class="clear"></p>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!--功能栏(发送图片、视频)-->
|
|
|
- <van-popup class="options" :show="show"
|
|
|
- position="bottom"
|
|
|
- custom-style="height: 20%;"
|
|
|
- @click="showPopup"
|
|
|
- close-icon-position="top-right">
|
|
|
- <van-row class="optionChoose">
|
|
|
- <van-col span="10">
|
|
|
- <img @click="chooseImg" src="/static/images/album.svg">
|
|
|
- <!-- <span>图片</span> -->
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- <van-row class="optionChoose">
|
|
|
- <van-col span="10">
|
|
|
- <img @click="chooseVideo()" src="/static/images/video.svg">
|
|
|
- <!-- <span>视频</span> -->
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <!--表情模态框-->
|
|
|
- <van-popup :show="shows" position="bottom" class="emojiBox" @close="onClose">
|
|
|
- <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key" @click="emoji(item.key)">
|
|
|
- <p class="clear"></p>
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <!-- <div class="emojiBox" v-if="emojiFlag" :class="emojiFlag ? 'showBox' : ''">
|
|
|
- <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key">
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <!--显示大图/视频div遮罩-->
|
|
|
- <div class="shwoBigPicBox" v-if="showBigPicVideoFlag">
|
|
|
- <p @click="closeBigPicBox">×</p>
|
|
|
- <img :src="bigPicUrl" v-if="!picOrVideoFlag">
|
|
|
- <video :src="bigVideoUrl" v-if="picOrVideoFlag" autoplay = true></video>
|
|
|
- </div>
|
|
|
-
|
|
|
- </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-let socketOpen = false
|
|
|
-let socketMsgQueue = []
|
|
|
-export default {
|
|
|
- data () {
|
|
|
- return {
|
|
|
- inputContent: '', //聊天输入框内容
|
|
|
- storageEmojiAndText: '', //存储聊天框内的表情和文字
|
|
|
- changeBg: true, //控制按住说话按钮的背景颜色
|
|
|
- audioTime: '', //录音时间
|
|
|
- percentage: 0, //上传视频/图片的圆形百分比进度数据
|
|
|
- percentageData: true, //控制上传图片/视频的百分比数据状态
|
|
|
- uploadPercFlag: false, //控制上传图片/视频时的百分比div状态 false: 隐藏
|
|
|
- sendBtnFlag: false, //监听输入框输入事件，有值则将 + 换成发送
|
|
|
- flag: true, //控制聊天框与语音按钮的切换 true: 聊天框
|
|
|
- active: false, //vant-weapp组件的模态框状态
|
|
|
- show: false, //控制功能栏弹出层的状态 true: 显示
|
|
|
- shows: false, //控制表情栏弹出层的状态 true: 显示
|
|
|
- tapOrLongTouchFlag: true, //控制触摸后立即离开或者长按事件的状态 true: tap
|
|
|
- upLoadVideoFlag: false, //控制发送视频的封面图片显示 false: 未上传成功，不显示图片
|
|
|
- clientMoveBottomFlag: false, //控制按住说话时拖动取消div的背景颜色 true: 小于365,红色
|
|
|
- cancelAudioBoxFlag: false, //控制按住说话时拖动取消div的状态 true: 显示
|
|
|
- htmlContent: '', //富文本 将内容以富文本形式转出来
|
|
|
- cursorPosition: 0, //失去焦点时获取当前光标位置
|
|
|
- clientBottom: 0, //距底部距离 用于做新消息页面滚动
|
|
|
- contentObj: {}, //遍历聊天内容后接收到的
|
|
|
- recorderManager: '', //实例化录音API
|
|
|
- audioContext: {}, //实例化音频播放
|
|
|
- videoContent: {}, //实例化视频播放
|
|
|
- audioIndex: '', //播放音频的下标
|
|
|
- videoIndex: '', //播放视频的下标
|
|
|
- showBigPicVideoFlag: false, //控制查看大图的div遮罩状态 false: 不显示
|
|
|
- bigPicUrl: '', //查看大图的div里的img的src
|
|
|
- bigVideoUrl: '', //放大播放视频div里的video的src
|
|
|
- picOrVideoFlag: false, //控制放大显示的是图片还是视频 false: 图片
|
|
|
- picTempArr: [], //上传图片时的临时数组
|
|
|
- videoTempArr: [], //上传视频时的临时数组
|
|
|
- picTempArrIndex: 0, //上传图片时临时数组里当前上传完成图片的下标
|
|
|
- videoTempArrIndex: 0, //上传视频时临时数组里当前上传完成图片的下标
|
|
|
- timeId: {}, //计时器空对象
|
|
|
- ffff: false,
|
|
|
- chatRecord: [
|
|
|
- {sendId: 1, recId: 2, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
|
|
|
- {sendId: 2, recId: 1, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
|
|
|
- {sendId: 1, recId: 2, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
|
|
|
- {sendId: 2, recId: 1, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
|
|
|
- {sendId: 1, recId: 2, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false},
|
|
|
- {sendId: 2, recId: 1, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false}
|
|
|
- ], //暂存聊天内容 sendId: 发送人ID，recId: 接收人ID，type: 0=>文本, 1=>图片, 2=>视频 , 3=>音频, 4=>表情
|
|
|
- emojiData: [
|
|
|
- {id: 0, key: '[发呆]', url: '/static/images/emoji/bl_1.png'},
|
|
|
- {id: 1, key: '[微笑]', url: '/static/images/emoji/bl_2.png'},
|
|
|
- {id: 2, key: '[呲牙]', url: '/static/images/emoji/bl_3.png'},
|
|
|
- {id: 3, key: '[亮眼]', url: '/static/images/emoji/bl_4.png'},
|
|
|
- {id: 4, key: '[惊愕]', url: '/static/images/emoji/bl_5.png'},
|
|
|
- {id: 5, key: '[鄙视]', url: '/static/images/emoji/bl_6.png'},
|
|
|
- {id: 6, key: '[色色]', url: '/static/images/emoji/bl_7.png'},
|
|
|
- {id: 7, key: '[委屈]', url: '/static/images/emoji/bl_8.png'},
|
|
|
- {id: 8, key: '[大哭]', url: '/static/images/emoji/bl_9.png'},
|
|
|
- {id: 9, key: '[害羞]', url: '/static/images/emoji/bl_10.png'},
|
|
|
- {id: 10, key: '[黑线]', url: '/static/images/emoji/bl_11.png'},
|
|
|
- {id: 11, key: '[疑问]', url: '/static/images/emoji/bl_12.png'},
|
|
|
- {id: 12, key: '[鬼脸]', url: '/static/images/emoji/bl_13.png'},
|
|
|
- {id: 13, key: '[哭笑]', url: '/static/images/emoji/bl_14.png'},
|
|
|
- {id: 14, key: '[单眼]', url: '/static/images/emoji/bl_15.png'}, //备注待确认
|
|
|
- {id: 15, key: '[偷笑]', url: '/static/images/emoji/bl_16.png'},
|
|
|
- {id: 16, key: '[大笑]', url: '/static/images/emoji/bl_17.png'},
|
|
|
- {id: 17, key: '[黑头]', url: '/static/images/emoji/bl_18.png'}, //备注待确认
|
|
|
- {id: 18, key: '[服了]', url: '/static/images/emoji/bl_19.png'}, //备注待确认
|
|
|
- {id: 19, key: '[丑脸]', url: '/static/images/emoji/bl_20.png'}, //备注待确认
|
|
|
- {id: 20, key: '[冷漠]', url: '/static/images/emoji/bl_21.png'}, //备注待确认
|
|
|
- {id: 21, key: '[抠鼻]', url: '/static/images/emoji/bl_22.png'},
|
|
|
- {id: 22, key: '[哈哈]', url: '/static/images/emoji/bl_23.png'}, //备注待确认
|
|
|
- {id: 23, key: '[骂]', url: '/static/images/emoji/bl_24.png'},
|
|
|
- {id: 24, key: '[捂脸]', url: '/static/images/emoji/bl_25.png'},
|
|
|
- {id: 25, key: '[呆滞]', url: '/static/images/emoji/bl_26.png'}, //备注待确认
|
|
|
- {id: 26, key: '[平静]', url: '/static/images/emoji/bl_27.png'}, //备注待确认
|
|
|
- {id: 27, key: '[猥琐]', url: '/static/images/emoji/bl_28.png'},
|
|
|
- {id: 28, key: '[吃瓜]', url: '/static/images/emoji/bl_29.png'},
|
|
|
- {id: 29, key: '[加油]', url: '/static/images/emoji/bl_30.png'},
|
|
|
- {id: 30, key: '[牛逼]', url: '/static/images/emoji/bl_31.png'}, //备注待确认
|
|
|
- {id: 31, key: '[汗]', url: '/static/images/emoji/bl_32.png'},
|
|
|
- {id: 32, key: '[流涕]', url: '/static/images/emoji/bl_33.png'},
|
|
|
- {id: 33, key: '[出魂]', url: '/static/images/emoji/bl_34.png'},
|
|
|
- {id: 34, key: '[哭]', url: '/static/images/emoji/bl_35.png'},
|
|
|
- {id: 35, key: '[傲慢]', url: '/static/images/emoji/bl_36.png'},
|
|
|
- {id: 36, key: '[苦脸]', url: '/static/images/emoji/bl_37.png'},
|
|
|
- {id: 37, key: '[心慌]', url: '/static/images/emoji/bl_38.png'}, //备注待确认
|
|
|
- {id: 38, key: '[口罩]', url: '/static/images/emoji/bl_39.png'},
|
|
|
- {id: 39, key: '[呕吐]', url: '/static/images/emoji/bl_40.png'},
|
|
|
- {id: 40, key: '[嘘]', url: '/static/images/emoji/bl_41.png'},
|
|
|
- {id: 41, key: '[思考]', url: '/static/images/emoji/bl_42.png'}, //备注待确认
|
|
|
- {id: 42, key: '[拜拜]', url: '/static/images/emoji/bl_43.png'},
|
|
|
- {id: 43, key: '[白眼]', url: '/static/images/emoji/bl_44.png'},
|
|
|
- {id: 44, key: '[哈欠]', url: '/static/images/emoji/bl_45.png'},
|
|
|
- {id: 45, key: '[阴险]', url: '/static/images/emoji/bl_46.png'}, //备注待确认
|
|
|
- {id: 46, key: '[奋斗]', url: '/static/images/emoji/bl_47.png'},
|
|
|
- {id: 47, key: '[酷]', url: '/static/images/emoji/bl_48.png'},
|
|
|
- {id: 48, key: '[撇嘴]', url: '/static/images/emoji/bl_49.png'},
|
|
|
- {id: 49, key: '[难过]', url: '/static/images/emoji/bl_50.png'},
|
|
|
- {id: 50, key: '[生气]', url: '/static/images/emoji/bl_51.png'}, //备注待确认
|
|
|
- {id: 51, key: '[发怒]', url: '/static/images/emoji/bl_52.png'},
|
|
|
- {id: 52, key: '[赞]', url: '/static/images/emoji/bl_53.png'},
|
|
|
- {id: 53, key: '[强壮]', url: '/static/images/emoji/bl_54.png'},
|
|
|
- {id: 54, key: '[合掌]', url: '/static/images/emoji/bl_55.png'},
|
|
|
- {id: 55, key: '[抱拳]', url: '/static/images/emoji/bl_56.png'},
|
|
|
- {id: 56, key: '[手指]', url: '/static/images/emoji/bl_57.png'},
|
|
|
- {id: 57, key: '[拥抱]', url: '/static/images/emoji/bl_58.png'},
|
|
|
- {id: 58, key: '[摊掌]', url: '/static/images/emoji/bl_59.png'},
|
|
|
- {id: 59, key: '[下跪]', url: '/static/images/emoji/bl_60.png'},
|
|
|
- {id: 60, key: '[爱心]', url: '/static/images/emoji/bl_61.png'}
|
|
|
- ] //自定义表情内容
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onLoad() {
|
|
|
- //注册音频播放实例
|
|
|
- this.audioContext = wx.createInnerAudioContext()
|
|
|
-
|
|
|
- //webSocket初始设置
|
|
|
- let socketOpen = false
|
|
|
- let socketMsgQueue = []
|
|
|
- let that = this;
|
|
|
-
|
|
|
- //连接webSocket
|
|
|
- wx.connectSocket({
|
|
|
- url: 'ws://127.0.0.1:3002',
|
|
|
- success(res){
|
|
|
- console.log('res');
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- //打开webSocket服务
|
|
|
- wx.onSocketOpen(function(res) {
|
|
|
- console.log('open')
|
|
|
- socketOpen = true
|
|
|
- for (let i = 0; i < socketMsgQueue.length; i++){
|
|
|
- sendSocketMessage(socketMsgQueue[i])
|
|
|
- }
|
|
|
- socketMsgQueue = []
|
|
|
- })
|
|
|
-
|
|
|
- //向服务端发送消息
|
|
|
- function sendSocketMessage(msg) {
|
|
|
- if (socketOpen) {
|
|
|
- wx.sendSocketMessage({
|
|
|
- data:msg
|
|
|
- })
|
|
|
- } else {
|
|
|
- socketMsgQueue.push(msg)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //接收服务端返回的消息
|
|
|
- wx.onSocketMessage(function(res){
|
|
|
- // console.log(res);
|
|
|
- that.otherMsg = res.data;
|
|
|
- let _time = new Date().getTime(),
|
|
|
- _content = res.data,
|
|
|
- _type = 0;
|
|
|
- that.chatRecord.push({sendId: 2, recId: 1, time: _time, type: _type, content: _content});
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- //发送按钮
|
|
|
- conn() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- setTimeout(function() {
|
|
|
- wx.sendSocketMessage({
|
|
|
- data: that.inputContent
|
|
|
- })
|
|
|
-
|
|
|
- let reg = /\[([\u4e00-\u9fa5])*]/;
|
|
|
- if(reg.test(that.inputContent)) {
|
|
|
-
|
|
|
- let regText = that.inputContent.match(/\[([\u4e00-\u9fa5])*]/g);
|
|
|
- regText.forEach(function(item, index) {
|
|
|
- that.emojiData.forEach(function(val, keys) {
|
|
|
- if(item === val.key) {
|
|
|
- that.inputContent = that.inputContent.replace(item, `<img class="emojiImg" src="${val.url}">`);
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- let _time = new Date().getTime(),
|
|
|
- _content = that.inputContent,
|
|
|
- _type = 0;
|
|
|
- that.chatRecord.push({sendId: 1, recId: 2, time: _time, type: _type, content: _content});
|
|
|
-
|
|
|
- that.inputContent = '';
|
|
|
- that.sendBtnFlag = false;
|
|
|
-
|
|
|
- let query = wx.createSelectorQuery()
|
|
|
- query.select('.chatTable').boundingClientRect()
|
|
|
- query.exec(function (res) {
|
|
|
- wx.pageScrollTo({
|
|
|
- scrollTop: res[0].bottom,
|
|
|
- duration: 500
|
|
|
- })
|
|
|
- })
|
|
|
- }, 200)
|
|
|
-
|
|
|
- this.cursorPosition = 0;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- //语音/文字切换
|
|
|
- changeVT() {
|
|
|
- this.flag = !this.flag;
|
|
|
- },
|
|
|
-
|
|
|
- //语音功能触摸开始事件
|
|
|
- handleTouchStart(e) {
|
|
|
- this.recorderManager = wx.getRecorderManager()
|
|
|
- this.changeBg = !this.changeBg;
|
|
|
- this.cancelAudioBoxFlag = true;
|
|
|
- this.clientMoveBottomFlag = false;
|
|
|
- console.log('开始');
|
|
|
- // console.log(e.touches[0].clientX, e.touches[0].clientY);
|
|
|
- let options = {
|
|
|
- duration: 10000,
|
|
|
- format: 'aac'
|
|
|
- }
|
|
|
-
|
|
|
- if(!this.tapOrLongTouchFlag) {
|
|
|
- this.recorderManager.start(options)
|
|
|
- this.recorderManager.onStart((res) => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.log('点击点击')
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //语音功能触摸移动事件
|
|
|
- handleTouchMove(e) {
|
|
|
- if(e.clientY < 355) {
|
|
|
- this.clientMoveBottomFlag = true
|
|
|
- } else {
|
|
|
- this.clientMoveBottomFlag = false
|
|
|
- }
|
|
|
- this.clientBottom = e.clientY
|
|
|
- },
|
|
|
-
|
|
|
- //语音功能触摸结束事件
|
|
|
- handleTouchEnd(e) {
|
|
|
- let that = this;
|
|
|
- this.changeBg = !this.changeBg;
|
|
|
- this.cancelAudioBoxFlag = false;
|
|
|
- // this.endTime = e.timeStamp;
|
|
|
- console.log('结束');
|
|
|
- this.recorderManager.stop()
|
|
|
- this.recorderManager.onStop((res) => {
|
|
|
- //路径
|
|
|
- console.log(this.clientBottom)
|
|
|
-
|
|
|
- let _time = new Date().getTime(),
|
|
|
- _content = res.tempFilePath,
|
|
|
- _type = 3;
|
|
|
-
|
|
|
- that.audioTime = parseInt((res.duration) / 1000);
|
|
|
-
|
|
|
- if (res.duration < 1200) {
|
|
|
- console.log('您的时间短');
|
|
|
- } else if(this.clientBottom !== 0 && this.clientBottom < 355) {
|
|
|
- console.log('已取消');
|
|
|
- this.clientMoveBottomFlag = false;
|
|
|
- } else {
|
|
|
- that.chatRecord.push({sendId: 1, recId: 1, time: _time, type: _type, content: _content, time: that.audioTime, isPlay: false});
|
|
|
- }
|
|
|
- that.audioTime = ''
|
|
|
- this.clientBottom = 0;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //语音功能快速点击判断事件（true: 用户快速点击了）
|
|
|
- handleTap() {
|
|
|
- this.tapOrLongTouchFlag = true;
|
|
|
- console.log('触摸后立即离开');
|
|
|
- },
|
|
|
-
|
|
|
- //触摸后超过350ms后离开
|
|
|
- handleLongPress() {
|
|
|
- console.log('超过350ms了~');
|
|
|
- this.tapOrLongTouchFlag = false;
|
|
|
- },
|
|
|
-
|
|
|
- //vant-weapp组件弹出层状态控制（底部功能栏 => + ）
|
|
|
- showPopup() {
|
|
|
- this.active = !this.active;
|
|
|
- this.show = !this.show;
|
|
|
- },
|
|
|
-
|
|
|
- //发送图片
|
|
|
- chooseImg() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- console.log('img');
|
|
|
- wx.chooseImage({
|
|
|
- count: 9,
|
|
|
- sizeType: ['original', 'compressed'],
|
|
|
- sourceType: ['album', 'camera'],
|
|
|
- success (res) {
|
|
|
-
|
|
|
- clearInterval(that.timeId);
|
|
|
-
|
|
|
- let time = new Date().getTime(),
|
|
|
- type = 1,
|
|
|
- isUploadPercFlags = true;
|
|
|
-
|
|
|
- res.tempFilePaths.forEach(item => {
|
|
|
- that.picTempArr.push({sendId: 1, recId: 2, time: time, type: type, content: item, percentage: 0, isOverUpload: false, isUploadPercFlag: isUploadPercFlags});
|
|
|
- console.log('临时数组: ', that.picTempArr);
|
|
|
- });
|
|
|
-
|
|
|
- let timer = 20;
|
|
|
-
|
|
|
- that.asyncObj();
|
|
|
- that.loopImplement(timer);
|
|
|
-
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modelSwitchType: 'card',
|
|
|
+ showIndex: 0,
|
|
|
+ tran: 350, //横轴
|
|
|
+ vert: 500 //纵轴
|
|
|
+ }
|
|
|
},
|
|
|
- fail(err) {
|
|
|
- console.log('上传图片失败!');
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- asyncObj () {
|
|
|
- setTimeout(() => {
|
|
|
- this.picTempArr[0].isOverUpload = true;
|
|
|
- }, 5000);
|
|
|
- },
|
|
|
-
|
|
|
- loopImplement(time) {
|
|
|
- this.timeId = setInterval(() => {
|
|
|
- if (this.picTempArr[0].percentage < 99) {
|
|
|
- this.picTempArr[0].percentage = this.picTempArr[0].percentage + 1;
|
|
|
- }
|
|
|
- if (!this.picTempArr[0].isOverUpload) {
|
|
|
- this.picTempArr[0].isUploadPercFlag = true;
|
|
|
- }
|
|
|
- if (this.picTempArr.length && this.picTempArr[0].percentage === 100) {
|
|
|
- this.chatRecord.push(this.picTempArr[0]);
|
|
|
- console.log('22', this.chatRecord);
|
|
|
- this.picTempArr.splice(0, 1);
|
|
|
- clearInterval(this.timeId);
|
|
|
- if (!this.picTempArr.length) return;
|
|
|
- this.loopImplement(time);
|
|
|
- this.asyncObj();
|
|
|
- } else {
|
|
|
- if (this.picTempArr[0].isOverUpload) {
|
|
|
- this.picTempArr[0].percentage = 100;
|
|
|
- this.picTempArr[0].isUploadPercFlag = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }, time);
|
|
|
- },
|
|
|
-
|
|
|
- //发送视频
|
|
|
- chooseVideo() {
|
|
|
- let that = this
|
|
|
- console.log('video')
|
|
|
- wx.chooseVideo({
|
|
|
- sourceType: ['album','camera'],
|
|
|
- maxDuration: 60,
|
|
|
- camera: 'back',
|
|
|
- success(res) {
|
|
|
- console.log(res)
|
|
|
-
|
|
|
- var time = new Date().getTime(),
|
|
|
- content = res.tempFilePath,
|
|
|
- type = 2,
|
|
|
- isUploadPercFlags = true;
|
|
|
-
|
|
|
- wx.showLoading({
|
|
|
- title: '上传中'
|
|
|
- });
|
|
|
-
|
|
|
- setTimeout(function () {
|
|
|
- wx.hideLoading();
|
|
|
- that.upLoadVideoFlag = true;
|
|
|
- that.chatRecord.push({sendId: 1, recId: 2, time: time, type: type, content: content, isPlay: false, isUploadPercFlag: isUploadPercFlags});
|
|
|
- }, 500);
|
|
|
-
|
|
|
- let timer = 20;
|
|
|
- let a = 0
|
|
|
- setTimeout(() => {
|
|
|
- a = 1
|
|
|
- }, 5000);
|
|
|
- let timeId = setInterval(function() {
|
|
|
|
|
|
- if (that.percentage < 99) {
|
|
|
- that.percentage = that.percentage + 1;
|
|
|
- }
|
|
|
+ onLoad() {
|
|
|
|
|
|
- let flag = true;
|
|
|
+ },
|
|
|
|
|
|
- if (a === 1) {
|
|
|
- that.percentage = 100;
|
|
|
- setTimeout(() => {
|
|
|
- if (that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag) {
|
|
|
- flag = false;
|
|
|
- that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag = false;
|
|
|
- flag = true;
|
|
|
- } else if(!that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag && flag){
|
|
|
- that.chatRecord[that.chatRecord.length - 1].isUploadPercFlag = false;
|
|
|
+ methods: {
|
|
|
+ card() {
|
|
|
+ this.modelSwitchType = 'card';
|
|
|
+ },
|
|
|
+ shop() {
|
|
|
+ this.modelSwitchType = 'shop';
|
|
|
+ },
|
|
|
+ show() {
|
|
|
+ this.modelSwitchType = 'show';
|
|
|
+ },
|
|
|
+ panel(e) {
|
|
|
+ console.log(e);
|
|
|
+ if (e.currentTarget.dataset.index != this.showIndex) {
|
|
|
+ this.showIndex = e.currentTarget.dataset.index;
|
|
|
+ } else {
|
|
|
+ this.showIndex = 0;
|
|
|
}
|
|
|
- that.percentage = 0;
|
|
|
- clearInterval(timeId);
|
|
|
- }, 500);
|
|
|
+ },
|
|
|
+ handleTouchEnd(e) {
|
|
|
+
|
|
|
+ //方式1：
|
|
|
+ // let xNumLeft = 20 / 750 * wx.getSystemInfoSync().windowWidth;
|
|
|
+ // let xNumRight = 680 / 750 * wx.getSystemInfoSync().windowWidth;
|
|
|
+ // let x = e.mp.changedTouches[0].pageX;
|
|
|
+ // let average = 375 / 750 * wx.getSystemInfoSync().windowWidth;
|
|
|
+ // let yNum = e.mp.changedTouches[0].pageY;
|
|
|
+
|
|
|
+ // if (x <= average) {
|
|
|
+ // this.tran = 0;
|
|
|
+ // this.vert = yNum;
|
|
|
+ // } else {
|
|
|
+ // this.tran = 700;
|
|
|
+ // this.vert = yNum;
|
|
|
+ // }
|
|
|
+
|
|
|
+ //方式2：
|
|
|
+ // this.tran = e.mp.changedTouches[0].pageX;
|
|
|
+ // this.vert = e.mp.changedTouches[0].pageY - 15;
|
|
|
+
|
|
|
+ // if (this.tran <= 188) {
|
|
|
+ // console.log('超过中间线了');
|
|
|
+ // this.tran = 0;
|
|
|
+ // } else {
|
|
|
+ // this.tran = 350;
|
|
|
+ // }
|
|
|
+ // console.log('X:', this.tran);
|
|
|
+ // console.log('Y:', this.vert);
|
|
|
+ // console.log(wx.getSystemInfoSync());
|
|
|
+ },
|
|
|
+ handleChange(e) {
|
|
|
+ // console.log(e);
|
|
|
+ this.tran = e.detail.x;
|
|
|
+ this.vert = e.detail.y;
|
|
|
+ if (this.tran <= 188) {
|
|
|
+ console.log('超过中间线了');
|
|
|
+ this.tran = 0;
|
|
|
+ } else {
|
|
|
+ this.tran = 350;
|
|
|
+ }
|
|
|
+ console.log('X:', this.tran);
|
|
|
+ console.log('Y:', this.vert);
|
|
|
+ },
|
|
|
+ showWhoCollecMe() {
|
|
|
+ wx.navigateTo({
|
|
|
+ url: './showWhoCollecMe'
|
|
|
+ });
|
|
|
}
|
|
|
- }, timer);
|
|
|
-
|
|
|
- },
|
|
|
- fail(err) {
|
|
|
- console.log('上传视频失败!')
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- handleFocus(e) {
|
|
|
- // console.log(e)
|
|
|
- },
|
|
|
-
|
|
|
- //监听聊天输入框输入事件
|
|
|
- handleInput(e) {
|
|
|
- // console.log(e);
|
|
|
- this.inputContent = e.mp.detail.value;
|
|
|
- },
|
|
|
-
|
|
|
- //监听失去焦点时的状态
|
|
|
- handleBlur(e) {
|
|
|
- this.inputContent = e.mp.detail.value;
|
|
|
- // console.log('失去焦点啦~', e)
|
|
|
- this.cursorPosition = e.mp.detail.cursor;
|
|
|
- // console.log(e.mp.detail.cursor)
|
|
|
- },
|
|
|
-
|
|
|
- //音频播放
|
|
|
- playAudio(index) {
|
|
|
- let that = this
|
|
|
- if ((this.audioIndex || this.audioIndex === 0) && this.audioIndex !== index) {
|
|
|
- this.audioContext.stop()
|
|
|
- this.chatRecord[this.audioIndex].isPlay = false
|
|
|
- }
|
|
|
- if(!this.chatRecord[index].isPlay) {
|
|
|
- console.log(this.chatRecord[index].content)
|
|
|
- this.audioIndex = index
|
|
|
- this.audioContext.src = this.chatRecord[index].content
|
|
|
- this.audioContext.play()
|
|
|
- this.audioContext.onPlay((res) => {
|
|
|
- console.log('播放开始')
|
|
|
- })
|
|
|
-
|
|
|
- this.audioContext.onEnded((res) => {
|
|
|
- console.log('播放结束')
|
|
|
- that.chatRecord[index].isPlay = false
|
|
|
- })
|
|
|
- this.chatRecord[index].isPlay = true
|
|
|
-
|
|
|
- } else {
|
|
|
- this.audioContext.stop()
|
|
|
- this.audioContext.onStop((res) => {
|
|
|
- console.log('播放停止')
|
|
|
- that.chatRecord[index].isPlay = false
|
|
|
- })
|
|
|
- this.chatRecord[index].isPlay = false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //视频播放
|
|
|
- playVideo(url) {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- this.bigVideoUrl = url;
|
|
|
- console.log(url);
|
|
|
- this.showBigPicVideoFlag = true;
|
|
|
- if (url.substr((url.length-3), url.length) != 'mp4') {
|
|
|
- this.picOrVideoFlag = false
|
|
|
- }
|
|
|
- this.picOrVideoFlag = true
|
|
|
-
|
|
|
- //注册视频播放实例
|
|
|
- this.videoContent = wx.createVideoContext('index');
|
|
|
-
|
|
|
- // this.videoContent._videoId = index;
|
|
|
-
|
|
|
- // if ((this.videoIndex || this.videoIndex === 0) && this.videoIndex !== index) {
|
|
|
- // this.videoContent.stop()
|
|
|
- // this.chatRecord[this.videoIndex].isPlay = false
|
|
|
- // }
|
|
|
-
|
|
|
- if(this.upLoadVideoFlag) {
|
|
|
- //全屏
|
|
|
- this.videoContent.requestFullScreen({direction: 0})
|
|
|
-
|
|
|
- // if(!this.chatRecord[index].isPlay) {
|
|
|
-
|
|
|
- // this.videoIndex = index;
|
|
|
- // this.videoContent.src = this.chatRecord[index].content
|
|
|
- this.videoContent.src = url
|
|
|
-
|
|
|
- setTimeout(function() {
|
|
|
- that.videoContent.play();
|
|
|
- }, 1500)
|
|
|
-
|
|
|
- // this.chatRecord[index].isPlay = true;
|
|
|
- // } else {
|
|
|
- this.videoContent.stop();
|
|
|
- // this.chatRecord[index].isPlay = false;
|
|
|
- // }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //停止语音播放
|
|
|
- stopAudio() {
|
|
|
- this.audioContext.stop()
|
|
|
- },
|
|
|
-
|
|
|
- //点击空白处关闭表情模态框
|
|
|
- chatTable() {
|
|
|
- this.emojiFlag = false;
|
|
|
- },
|
|
|
-
|
|
|
- //展示表情模态框
|
|
|
- showEmoji() {
|
|
|
- // console.log('emoji')
|
|
|
- // this.emojiFlag = true;
|
|
|
- this.active = !this.active;
|
|
|
- this.shows = !this.shows;
|
|
|
- },
|
|
|
-
|
|
|
- //关闭底部功能栏模态框 => +
|
|
|
- onClose() {
|
|
|
- this.shows = !this.shows;
|
|
|
- },
|
|
|
-
|
|
|
- //发送表情
|
|
|
- emoji(key) {
|
|
|
-
|
|
|
- let that = this;
|
|
|
- // if(this.inputContent === '') {
|
|
|
- // this.inputContent = key + '&&&'
|
|
|
- // } else if(this.inputContent !== '' && (this.inputContent.lastIndexOf('&&&') !== this.inputContent.length - 3 || this.inputContent.lastIndexOf('&&&') == -1)) {
|
|
|
- // console.log(111)
|
|
|
- // this.inputContent = this.inputContent + '&&&' + key + '&&&';
|
|
|
- // } else if(this.inputContent !== '' && this.inputContent.lastIndexOf('&&&') === this.inputContent.length - 3){
|
|
|
- // console.log(222)
|
|
|
- // this.inputContent = this.inputContent + key + '&&&';
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- if(this.inputContent == '') {
|
|
|
- this.inputContent = key;
|
|
|
- } else if(this.cursorPosition !== this.inputContent.length){
|
|
|
- let beforeText = this.inputContent.substr(0, this.cursorPosition),
|
|
|
- afterText = this.inputContent.substr(this.cursorPosition);
|
|
|
- this.inputContent = beforeText + key + afterText;
|
|
|
- } else {
|
|
|
- this.inputContent = this.inputContent + key;
|
|
|
- }
|
|
|
-
|
|
|
- // return this.inputContent
|
|
|
-
|
|
|
- this.shows = false;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- //展示放大图片/视频的div
|
|
|
- showBigPic(url) {
|
|
|
- // console.log(this.chatRecord[index].content)
|
|
|
- this.showBigPicVideoFlag = true;
|
|
|
- // this.bigPicUrl = this.chatRecord[index].content
|
|
|
- this.bigPicUrl = url;
|
|
|
- },
|
|
|
-
|
|
|
- //关闭放大图片/视频的div
|
|
|
- closeBigPicBox() {
|
|
|
- this.showBigPicVideoFlag = false;
|
|
|
- this.picOrVideoFlag = false;
|
|
|
- this.bigPicUrl = '';
|
|
|
- this.bigVideoUrl = '';
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- inputContent: {
|
|
|
- handler(newVal, oldVal) {
|
|
|
- this.inputContent = newVal;
|
|
|
- if(this.inputContent == '') {
|
|
|
- this.sendBtnFlag = false
|
|
|
- } else {
|
|
|
- this.sendBtnFlag = true
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- @width: 56rpx;
|
|
|
- @height: 56rpx;
|
|
|
- @margin: 10rpx;
|
|
|
- body {
|
|
|
- background-color: #f8f8ff;
|
|
|
- }
|
|
|
-
|
|
|
- /*聊天面板（不含底部输入框及功能栏）*/
|
|
|
- .chatTable {
|
|
|
- width: 100%;
|
|
|
- min-height: 1010rpx;
|
|
|
- padding: 15rpx;
|
|
|
- margin-bottom: 70rpx;
|
|
|
- /* border: 1px solid #ff0; */
|
|
|
- box-sizing: border-box;
|
|
|
- /* overflow-x: hidden;
|
|
|
- overflow-y: scroll; */
|
|
|
- /* position: relative; */
|
|
|
- .chatTableDiv {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- width: 100%;
|
|
|
- min-height: 40rpx;
|
|
|
- display: flex;
|
|
|
- word-break: normal;
|
|
|
- }
|
|
|
- .chatTextContent {
|
|
|
- margin: 0 15rpx 0 15rpx;
|
|
|
- padding: 15rpx 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- max-width: 500rpx;
|
|
|
- height: auto;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #000;
|
|
|
- border-radius: 20rpx;
|
|
|
- .emojiImg {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .meAvatUrl {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 72rpx;
|
|
|
- }
|
|
|
- .otherAvatUrl {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 72rpx;
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- video {
|
|
|
- max-width: 350rpx;
|
|
|
- max-height: 150rpx;
|
|
|
- }
|
|
|
- .me {
|
|
|
- margin-right: 10rpx;
|
|
|
- word-break: break-word;
|
|
|
- background-color: #00cd66;
|
|
|
- }
|
|
|
- .others {
|
|
|
- margin-left: 10rpx;
|
|
|
- word-break: break-word;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .lefts {
|
|
|
- justify-content: flex-start;
|
|
|
- }
|
|
|
- .rights {
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .mine {
|
|
|
- /* justify-content: flex-end; */
|
|
|
- /* display: flex; */
|
|
|
-
|
|
|
- img {
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- video {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- .emojiContent {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- .videoPic {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- .breathDiv {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background: rgba(0, 0, 0, .8);
|
|
|
- position: relative;
|
|
|
- .circularDiv {
|
|
|
- display: absolute;
|
|
|
- margin: 25rpx auto;
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- border-radius: 75rpx;
|
|
|
- background: transparent;
|
|
|
- box-shadow: 0 0 20rpx 20rpx #fff;
|
|
|
-
|
|
|
- animation-name: breath; /*动画名称*/
|
|
|
- animation-duration: 2s; /*执行时间*/
|
|
|
- animation-timing-function: linear; /*匀速执行*/
|
|
|
- animation-iteration-count: infinite; /*循环执行*/
|
|
|
-
|
|
|
- @keyframes breath {
|
|
|
- from { opacity: 0.1; } /* 动画开始时的不透明度 */
|
|
|
- 50% { opacity: 0.5; } /* 动画50% 时的不透明度 */
|
|
|
- to { opacity: 0.1; } /* 动画结束时的不透明度 */
|
|
|
- }
|
|
|
- }
|
|
|
- .text {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- line-height: 200rpx;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .audioPlay {
|
|
|
- width: 150rpx;
|
|
|
- height: 50rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background: #00cd66;
|
|
|
- img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
- .audioTime {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .audioLeft {
|
|
|
- margin: 8rpx 5rpx 0 10rpx;
|
|
|
- }
|
|
|
- .audioRight {
|
|
|
- margin: 8rpx 5rpx 0 109rpx;
|
|
|
- }
|
|
|
- .cancelAudioBox {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 93vh;
|
|
|
- /* border: 1px solid #f00; */
|
|
|
- background-color: rgba(220, 220, 220, .7);
|
|
|
- .cancelAudio {
|
|
|
- height: 300rpx;
|
|
|
- margin: auto 0;
|
|
|
- p {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
- line-height: 200rpx;
|
|
|
- margin: 73rpx auto;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .defaultBg {
|
|
|
- background-color: rgba(105, 105, 105, .7);
|
|
|
- }
|
|
|
- .cancelBg {
|
|
|
- background-color: rgba(243, 32, 32, 0.7);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .shwoBigPicBox {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background-color: #000;
|
|
|
- p {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- text-align: right;
|
|
|
- font-size: 64rpx;
|
|
|
- color: #fff;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 450rpx;
|
|
|
- margin: 400rpx auto;
|
|
|
- }
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*清除浮动*/
|
|
|
- .clear {
|
|
|
- clear: both;
|
|
|
- }
|
|
|
-
|
|
|
- /*底部功能选项（所有）*/
|
|
|
- .bottomOperation {
|
|
|
- width: 100%;
|
|
|
- min-height: 70rpx;
|
|
|
- max-height: 250rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- z-index: 99;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background-color: #f5f5f5;
|
|
|
- display: flex;
|
|
|
- .chatInput {
|
|
|
- margin-left: 10rpx;
|
|
|
- .textContent {
|
|
|
- width: 500rpx;
|
|
|
- min-height: 60rpx;
|
|
|
- max-height: 250rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- padding: 6rpx 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- /* border: 1px solid #f00; */
|
|
|
- background-color: #fff;
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .audio {
|
|
|
- margin-left: 5rpx;
|
|
|
- img {
|
|
|
- margin-top: @margin;
|
|
|
- width: @width;
|
|
|
- height: @height;
|
|
|
- }
|
|
|
- }
|
|
|
- .text {
|
|
|
- button {
|
|
|
- margin: 10rpx 0 0 10rpx;
|
|
|
- width: 500rpx;
|
|
|
- height: 50rpx;
|
|
|
- font-size: 25rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .speakBtn {
|
|
|
- /* background: linear-gradient(to bottom,#fff, #00cd66); */
|
|
|
- background: #00cd66;
|
|
|
- }
|
|
|
- .btnSpeak {
|
|
|
- background: #f8f8ff;
|
|
|
- }
|
|
|
- .expSvg {
|
|
|
- margin-left: 10rpx;
|
|
|
- img {
|
|
|
- margin-top: @margin;
|
|
|
- width: @width;
|
|
|
- height: @height;
|
|
|
- }
|
|
|
- }
|
|
|
- .showOper {
|
|
|
- margin-left: 15rpx;
|
|
|
- img {
|
|
|
- margin-top: @margin;
|
|
|
- width: @width;
|
|
|
- height: @height;
|
|
|
- }
|
|
|
- }
|
|
|
- .sendBtn {
|
|
|
- margin-left: 15rpx;
|
|
|
- button {
|
|
|
- padding: 0;
|
|
|
- margin-top: 10rpx;
|
|
|
- width: 90rpx;
|
|
|
- height: 50rpx;
|
|
|
- background-color: #00cd66;
|
|
|
- color: #fff;
|
|
|
- font-size: 20rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*底部 + 功能栏*/
|
|
|
- .options {
|
|
|
- /* display: flex;
|
|
|
- justify-content: center; */
|
|
|
- padding-left: 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- img {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin: 5rpx 10rpx 10rpx 0;
|
|
|
- }
|
|
|
- .optionChoose {
|
|
|
- /* flex: 1; */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*表情模态框*/
|
|
|
- .emojiBox {
|
|
|
- width: 100%;
|
|
|
- height: 210rpx;
|
|
|
- z-index: 999;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: -50vh;
|
|
|
- /* white-space: normal; */
|
|
|
- .emoji {
|
|
|
- float: left;
|
|
|
- margin: 10rpx;
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- /* .hiddenBox {
|
|
|
- bottom: -50vh;
|
|
|
- } */
|
|
|
- /* .showBox {
|
|
|
- bottom: 50vh;
|
|
|
- transition-duration: 1s;
|
|
|
- } */
|
|
|
- }
|
|
|
+
|
|
|
</style>
|
