1220 lines
34 KiB
Vue
1220 lines
34 KiB
Vue
<template>
|
||
<view class="page" :style="themeColor">
|
||
<view
|
||
class="flex flex-direction flex-wrap align-stretch benben-position-layout flex demandDetails_flex_0"
|
||
:style="{ height: 88 + StatusBarRpx + 'rpx', paddingTop: StatusBarRpx + 'rpx' }"
|
||
>
|
||
<view class="flex flex-wrap align-center demandDetails_fd0_0">
|
||
<view class="flex flex-wrap align-center demandDetails_fd0_0_c0" @tap.stop="handleJumpDiy" data-type="back" data-url="1">
|
||
<text class="fu-iconfont2 demandDetails_fd0_0_c0_c0"></text>
|
||
</view>
|
||
<view class="flex flex-wrap align-center justify-center flex-sub">
|
||
<view class="names">{{ toName }}</view>
|
||
</view>
|
||
<view class="flex align-center justify-end" @click="handleReport">
|
||
举报
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view :style="{ height: 500 + StatusBarRpx + 'rpx' }"></view> -->
|
||
<!---flex布局flex布局开始-->
|
||
<view class="content" @touchstart="hideDrawer" >
|
||
<scroll-view
|
||
class="msg-list"
|
||
scroll-y="true"
|
||
:style="{paddingTop:88 + StatusBarRpx + 'rpx'}"
|
||
:scroll-with-animation="scrollAnimation"
|
||
:scroll-top="scrollTop"
|
||
:scroll-into-view="scrollToView"
|
||
@scrolltoupper="loadHistory"
|
||
upper-threshold="50"
|
||
>
|
||
<!-- 加载历史数据waitingUI -->
|
||
<!-- <view class="loading" v-if="msgList.length">
|
||
<view class="spinner">
|
||
<view class="rect1"></view>
|
||
<view class="rect2"></view>
|
||
<view class="rect3"></view>
|
||
<view class="rect4"></view>
|
||
<view class="rect5"></view>
|
||
</view>
|
||
</view> -->
|
||
<view class="row" v-for="(row, index) in msgList" :key="index" :id="'msg' + row.aid">
|
||
<!-- 系统消息 -->
|
||
<!-- <block v-if="row.type == 'system'">
|
||
<view class="system">
|
||
|
||
<view v-if="row.msg.type == 'text'" class="text">{{ row.msg.content.text }}</view>
|
||
</view>
|
||
</block> -->
|
||
<!-- 用户消息 -->
|
||
<block>
|
||
<!-- 消息类型 0 文字 1图片 2 视频 3录音 -->
|
||
<!-- 自己发出的消息 -->
|
||
<view class="my" v-if="row.uid == myuid">
|
||
<!-- 左-消息 -->
|
||
<view class="left">
|
||
<!-- 文字消息 -->
|
||
<view v-if="row.content.type == '0'" class="bubble"><rich-text :nodes="row.content.text"></rich-text></view>
|
||
<!-- 语言消息 :class="playMsgid == row.aid ? 'play' : ''"-->
|
||
<view v-else-if="row.content.type == '3'" class="bubble voice" @tap="playVoice(row)">
|
||
<view class="length">{{ row.content.length }}</view>
|
||
<view class="icon my-voice"></view>
|
||
</view>
|
||
|
||
<view v-if="row.content.type == '4'" class="bubble">
|
||
|
||
<!-- <jyf-parser :html="row.content.text"></jyf-parser> -->
|
||
<rich-text :nodes="row.content.text"></rich-text>
|
||
</view>
|
||
<!-- 图片消息 -->
|
||
<view v-else-if="row.content.type == '1'" class="bubble img" @tap="showPic(row.content.url)">
|
||
<image mode="aspectFit" :src="row.content.url" :style="{ width: row.content.w + 'px', height: row.content.h + 'px' }"></image>
|
||
</view>
|
||
|
||
<!-- <view class="bubble" style="background-color: transparent;" v-else-if="row.type == '4'"><telInfo :obj="row.content"></telInfo></view> -->
|
||
</view>
|
||
<!-- 右-头像 -->
|
||
<view class="right"><image mode="aspectFill" :src="row.avatar"></image></view>
|
||
</view>
|
||
<!-- 别人发出的消息 -->
|
||
<view class="other" v-if="row.uid != myuid">
|
||
<!-- 左-头像 -->
|
||
<view class="left"><image mode="aspectFill" :src="row.avatar"></image></view>
|
||
<!-- 右-用户名称-时间-消息 -->
|
||
<view class="right">
|
||
<view class="username">
|
||
<view class="name">{{ row.nickname }}</view>
|
||
<view class="time">{{ row.create_time }}</view>
|
||
</view>
|
||
|
||
<!-- 文字消息 -->
|
||
<view v-if="row.content.type == '0'" class="bubble"><rich-text :nodes="row.content.text"></rich-text></view>
|
||
<!-- 语音消息 :class="playMsgid == row.aid ? 'play' : ''" -->
|
||
|
||
<view v-if="row.content.type == 3" class="bubble voice" @tap="playVoice(row)">
|
||
<view class="icon other-voice"></view>
|
||
<view class="length">{{ row.content.length }}</view>
|
||
</view>
|
||
<view v-if="row.content.type == '4'" class="bubble">
|
||
<rich-text v-html="row.content.text" ></rich-text>
|
||
<!-- <jyf-parser :html="row.content.text"></jyf-parser> -->
|
||
</view>
|
||
<!-- 图片消息 -->
|
||
<view v-else-if="row.content.type == '1'" class="bubble img" @tap="showPic(row.content.url)">
|
||
<image mode="aspectFit" :src="row.content.url" :style="{ width: row.content.w + 'rpx', height: row.content.h + 'rpx' }"></image>
|
||
</view>
|
||
<view v-else-if="row.content.type == '6'" class="bubble flex align-center" @tap.stop="handleJumpDiy"
|
||
data-type="navigateTo" :data-url="`/pages/shouye/healthEncyclopediaDetails/healthEncyclopediaDetails?id=` + row.content.cycId">
|
||
<image style="width: 108rpx;height: 108rpx;" v-if="row.content.url" :src='row.content.url'></image>
|
||
<view class="margin-left-sm flex flex-sub">
|
||
{{row.content.title}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="bubble" style="background-color: transparent;" v-else-if="row.type == '4'"><telInfo :obj="row.content"></telInfo></view> -->
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <view class="" style="font-size: 36rpx;">
|
||
😀😃😄😁😆😅🤣😠 😂🙂🙃😉😊😇😕😟 🙁😮😯😲😳🥺😦😧 😨😰😥😢😭😱😖😣 😞😓😩😫🥱😤😡🤬 😈👿😗😚😙😋😛😜 🤪😝🤑🤗🤭🤫🤔🤐 🤨😐😑😶😶😏😒🙄 😬🤥😌😔😪🤤😴😷 🤒🤕🤢🤮🤧🥵🥴😵
|
||
🤯🤠🥳😎🤓🧐🙏👍
|
||
</view> -->
|
||
<!-- 抽屉栏 -->
|
||
<view class="popup-layer" v-if="mytype==1" :class="popupLayerClass" @touchmove.stop.prevent="discard">
|
||
<!-- -->
|
||
<!-- <view class="" style="width: 100%;height: 40vw;background-color: darkred;">
|
||
<scroll-view scroll-y="true">
|
||
<view class="popup-layer-list">
|
||
<block v-for="(item, i) in emojArr" :key="i">
|
||
<view class="popup-layer-list-item" @tap="addEmoji(item)" style="font-size: 50rpx;display: inline-block;line-height: 80rpx;margin-right: 20rpx;">
|
||
{{ item }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
-->
|
||
<!-- 表情 -->
|
||
<swiper class="emoji-swiper" :class="{ hidden: hideEmoji }" indicator-dots="true" duration="150">
|
||
<swiper-item v-for="(page, pid) in emojArr" :key="pid">
|
||
<view style="font-size: 48rpx;" v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">{{ em }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 更多功能 相册-拍照-红包 -->
|
||
<view class="more-layer" :class="{ hidden: hideMore }">
|
||
<view class="list">
|
||
<view class="list-box">
|
||
|
||
<view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
|
||
<view class="list-box-title">图片</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="box" @tap="camera"><view class="icon paizhao"></view></view>
|
||
<view class="list-box-title">拍摄</view>
|
||
</view>
|
||
<!-- <view class="list-box">
|
||
<view class="box" @tap="shangpin">
|
||
<image mode="aspectFit" src="https://ljzp-files.oss-cn-hangzhou.aliyuncs.com/wxImage/lianjie.png" style="width: 35px;height: 35px;"></image>
|
||
</view>
|
||
<view class="list-box-title">{{i18n['商品']}}</view>
|
||
</view> -->
|
||
<!-- <view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部输入栏 -->
|
||
|
||
<view class="input-box" :class="{ activesss: isIos, popupLayerClass }" @touchmove.stop.prevent="discard" v-if="mytype==1">
|
||
<!-- H5下不能录音，输入栏布局改动一下 -->
|
||
<!-- #ifndef H5 -->
|
||
<!-- <view class="voice"><view class="icon" :class="isVoice ? 'jianpan' : 'yuyin'" @tap="switchVoice"></view></view> -->
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<view class="more" @tap="showMore"><view class="icon add"></view></view>
|
||
<!-- #endif -->
|
||
<view class="textbox">
|
||
<view
|
||
class="voice-mode"
|
||
:class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']"
|
||
@touchstart="voiceBegin"
|
||
@touchmove.stop.prevent="voiceIng"
|
||
@touchend="voiceEnd"
|
||
@touchcancel="voiceCancel"
|
||
>
|
||
{{ voiceTis }}
|
||
</view>
|
||
<view class="text-mode" :class="isVoice ? 'hidden' : ''">
|
||
<view class="box">
|
||
<textarea auto-height="true" :cursor-spacing="20" :adjust-position="true" v-model="textMsg" @focus="textareaFocus" />
|
||
</view>
|
||
<!-- <view class="em" @tap="chooseEmoji"><view class="icon biaoqing"></view></view> -->
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<view class="more" @tap="showMore"><view class="icon add"></view></view>
|
||
<!-- #endif -->
|
||
<view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText"><view class="btn">发送</view></view>
|
||
</view>
|
||
<!-- 录音UI效果 -->
|
||
<view class="record" :class="recording ? '' : 'hidden'">
|
||
<view class="ing" :class="willStop ? 'hidden' : ''"><view class="icon luyin2"></view></view>
|
||
<view class="cancel" :class="willStop ? '' : 'hidden'"><view class="icon chehui"></view></view>
|
||
<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
|
||
</view>
|
||
|
||
|
||
<!-- 举报弹窗 -->
|
||
<benben-position-popup ref="benbenPositionPopup1666085213316" :width="142" :height="65" :mask-hide="false" popup-origin="left top">
|
||
<view class="flex flex-direction align-stretch benben-flex-position-popup flex myComments_popup_2">
|
||
<view class="flex flex-wrap align-center justify-center myComments_positionPopup2_c0" @click="goReplorts">
|
||
<image class="myComments_positionPopup2_c0_c0" mode="aspectFit" :src="STATIC_URL + '75.png'"></image>
|
||
<text class="myComments_positionPopup2_c0_c1">{{ i18n['举报'] }}</text>
|
||
</view>
|
||
</view>
|
||
</benben-position-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import telInfo from './tel-info.vue';
|
||
import { host } from '../../../common/config.js'
|
||
export default {
|
||
components: {
|
||
telInfo
|
||
},
|
||
data() {
|
||
return {
|
||
//文字消息
|
||
textMsg: '',
|
||
//消息列表
|
||
isHistoryLoading: false,
|
||
scrollAnimation: false,
|
||
scrollTop: 0,
|
||
scrollToView: '',
|
||
msgList: [],
|
||
msgImgList: [],
|
||
myuid: 0,
|
||
|
||
//录音相关参数
|
||
// #ifndef H5
|
||
//H5不能录音
|
||
RECORDER: uni.getRecorderManager(),
|
||
// #endif
|
||
isVoice: false,
|
||
voiceTis: '按住 说话',
|
||
recordTis: '手指上滑 取消发送',
|
||
recording: false,
|
||
willStop: false,
|
||
initPoint: { identifier: 0, Y: 0 },
|
||
recordTimer: null,
|
||
recordLength: 0,
|
||
|
||
//播放语音相关参数
|
||
AUDIO: uni.createInnerAudioContext(),
|
||
playMsgid: null,
|
||
VoiceTimer: null,
|
||
// 抽屉参数
|
||
popupLayerClass: '',
|
||
// more参数
|
||
hideMore: true,
|
||
//表情定义
|
||
hideEmoji: true,
|
||
isIos: false,
|
||
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
// 😴
|
||
// 🤒🤕🤢🤮🤧
|
||
// 🤠🥳😎🤓🧐🙏👍
|
||
|
||
emojArr: [
|
||
['😎', '😃', '😄', '😁', '😆', '😅', '🤣', '🙄', '😠', '😂', '🙂', '🙃', '😉', '😊', '😇', '😬', '😕', '😟', '🙁', '😮', '😯', '😲', '😳', '😬'],
|
||
['😬', '😦', '😧', '😨', '😰', '😥', '😢', '😵', '😭', '😱', '😖', '😣', '😞', '😓', '😬', '🤤', '😷', '😔', '😤', '😡', '🤬', '😈', '😴', '🤯'],
|
||
['😗', '😚', '😙', '😋', '😛', '😜', '🤪', '🤥', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '😌', '🤨', '😐', '😑', '😶', ' 😶', '👍', '😏', '😪']
|
||
|
||
// '😒',
|
||
|
||
// '','','','','','','','',
|
||
// '','','','','','','','',
|
||
// '','','','','','','','',
|
||
],
|
||
emojiList: [
|
||
[
|
||
{ url: '100.gif', alt: '[微笑]' },
|
||
{ url: '101.gif', alt: '[伤心]' },
|
||
{ url: '102.gif', alt: '[美女]' },
|
||
{ url: '103.gif', alt: '[发呆]' },
|
||
{ url: '104.gif', alt: '[墨镜]' },
|
||
{ url: '105.gif', alt: '[哭]' },
|
||
{ url: '106.gif', alt: '[羞]' },
|
||
{ url: '107.gif', alt: '[哑]' },
|
||
{ url: '108.gif', alt: '[睡]' },
|
||
{ url: '109.gif', alt: '[哭]' },
|
||
{ url: '110.gif', alt: '[囧]' },
|
||
{ url: '111.gif', alt: '[怒]' },
|
||
{ url: '112.gif', alt: '[调皮]' },
|
||
{ url: '113.gif', alt: '[笑]' },
|
||
{ url: '114.gif', alt: '[惊讶]' },
|
||
{ url: '115.gif', alt: '[难过]' },
|
||
{ url: '116.gif', alt: '[酷]' },
|
||
{ url: '117.gif', alt: '[汗]' },
|
||
{ url: '118.gif', alt: '[抓狂]' },
|
||
{ url: '119.gif', alt: '[吐]' },
|
||
{ url: '120.gif', alt: '[笑]' },
|
||
{ url: '121.gif', alt: '[快乐]' },
|
||
{ url: '122.gif', alt: '[奇]' },
|
||
{ url: '123.gif', alt: '[傲]' }
|
||
],
|
||
[
|
||
{ url: '124.gif', alt: '[饿]' },
|
||
{ url: '125.gif', alt: '[累]' },
|
||
{ url: '126.gif', alt: '[吓]' },
|
||
{ url: '127.gif', alt: '[汗]' },
|
||
{ url: '128.gif', alt: '[高兴]' },
|
||
{ url: '129.gif', alt: '[闲]' },
|
||
{ url: '130.gif', alt: '[努力]' },
|
||
{ url: '131.gif', alt: '[骂]' },
|
||
{ url: '132.gif', alt: '[疑问]' },
|
||
{ url: '133.gif', alt: '[秘密]' },
|
||
{ url: '134.gif', alt: '[乱]' },
|
||
{ url: '135.gif', alt: '[疯]' },
|
||
{ url: '136.gif', alt: '[哀]' },
|
||
{ url: '137.gif', alt: '[鬼]' },
|
||
{ url: '138.gif', alt: '[打击]' },
|
||
{ url: '139.gif', alt: '[bye]' },
|
||
{ url: '140.gif', alt: '[汗]' },
|
||
{ url: '141.gif', alt: '[抠]' },
|
||
{ url: '142.gif', alt: '[鼓掌]' },
|
||
{ url: '143.gif', alt: '[糟糕]' },
|
||
{ url: '144.gif', alt: '[恶搞]' },
|
||
{ url: '145.gif', alt: '[什么]' },
|
||
{ url: '146.gif', alt: '[什么]' },
|
||
{ url: '147.gif', alt: '[累]' }
|
||
]
|
||
],
|
||
//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
|
||
onlineEmoji: {
|
||
'100.gif': 'AbNQgA.gif',
|
||
'101.gif': 'AbN3ut.gif',
|
||
'102.gif': 'AbNM3d.gif',
|
||
'103.gif': 'AbN8DP.gif',
|
||
'104.gif': 'AbNljI.gif',
|
||
'105.gif': 'AbNtUS.gif',
|
||
'106.gif': 'AbNGHf.gif',
|
||
'107.gif': 'AbNYE8.gif',
|
||
'108.gif': 'AbNaCQ.gif',
|
||
'109.gif': 'AbNN4g.gif',
|
||
'110.gif': 'AbN0vn.gif',
|
||
'111.gif': 'AbNd3j.gif',
|
||
'112.gif': 'AbNsbV.gif',
|
||
'113.gif': 'AbNwgs.gif',
|
||
'114.gif': 'AbNrD0.gif',
|
||
'115.gif': 'AbNDuq.gif',
|
||
'116.gif': 'AbNg5F.gif',
|
||
'117.gif': 'AbN6ET.gif',
|
||
'118.gif': 'AbNcUU.gif',
|
||
'119.gif': 'AbNRC4.gif',
|
||
'120.gif': 'AbNhvR.gif',
|
||
'121.gif': 'AbNf29.gif',
|
||
'122.gif': 'AbNW8J.gif',
|
||
'123.gif': 'AbNob6.gif',
|
||
'124.gif': 'AbN5K1.gif',
|
||
'125.gif': 'AbNHUO.gif',
|
||
'126.gif': 'AbNIDx.gif',
|
||
'127.gif': 'AbN7VK.gif',
|
||
'128.gif': 'AbNb5D.gif',
|
||
'129.gif': 'AbNX2d.gif',
|
||
'130.gif': 'AbNLPe.gif',
|
||
'131.gif': 'AbNjxA.gif',
|
||
'132.gif': 'AbNO8H.gif',
|
||
'133.gif': 'AbNxKI.gif',
|
||
'134.gif': 'AbNzrt.gif',
|
||
'135.gif': 'AbU9Vf.gif',
|
||
'136.gif': 'AbUSqP.gif',
|
||
'137.gif': 'AbUCa8.gif',
|
||
'138.gif': 'AbUkGQ.gif',
|
||
'139.gif': 'AbUFPg.gif',
|
||
'140.gif': 'AbUPIS.gif',
|
||
'141.gif': 'AbUZMn.gif',
|
||
'142.gif': 'AbUExs.gif',
|
||
'143.gif': 'AbUA2j.gif',
|
||
'144.gif': 'AbUMIU.gif',
|
||
'145.gif': 'AbUerq.gif',
|
||
'146.gif': 'AbUKaT.gif',
|
||
'147.gif': 'AbUmq0.gif'
|
||
},
|
||
|
||
toUserID: '',
|
||
toName: '',
|
||
page: 1,
|
||
ossObj: uni.getStorageSync('jianadaOss'),
|
||
myuid: '',
|
||
user: '',
|
||
msg_id: '',
|
||
|
||
showEmji: false,
|
||
showHandle: true,
|
||
mytype:1,
|
||
userInfo:""
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return this.$store.getters.themeColor;
|
||
},
|
||
...mapGetters(['isLogin', 'userInfo', 'token', 'getLNG', 'getLAT', 'getCurrentAddress'])
|
||
},
|
||
onLoad(options) {
|
||
const self = this;
|
||
this.toName = options.name;
|
||
this.toUserID = options.id;
|
||
this.mytype = options.mytype?options.mytype:1;
|
||
let platform = uni.getSystemInfoSync().platform;
|
||
if (platform == 'android') {
|
||
this.isIos = false;
|
||
} else {
|
||
this.isIos = true;
|
||
}
|
||
|
||
// if (this.toUserID == this.userInfo.user_id) {
|
||
// uni.showToast({
|
||
// title: i18n['不能和自己聊天'],
|
||
// mask: true,
|
||
// icon: 'none',
|
||
// duration: 1500
|
||
// });
|
||
|
||
// setTimeout(() => {
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// });
|
||
// }, 1500);
|
||
// }
|
||
|
||
this.getMsgList();
|
||
//语音自然播放结束
|
||
this.AUDIO.onEnded(res => {
|
||
this.playMsgid = null;
|
||
});
|
||
// #ifndef H5
|
||
//录音开始事件
|
||
this.RECORDER.onStart(e => {
|
||
this.recordBegin(e);
|
||
});
|
||
//录音结束事件
|
||
this.RECORDER.onStop(e => {
|
||
this.recordEnd(e);
|
||
});
|
||
//#endif
|
||
let user_data = uni.getStorageSync('USER_INFO');
|
||
this.userInfo = uni.getStorageSync('USER_INFO');
|
||
console.log(user_data)
|
||
if (user_data) {
|
||
this.myuid = 'user-' + user_data.id;
|
||
this.user = {
|
||
id: user_data.id,
|
||
name: user_data.store_name,
|
||
avatar: user_data.logo
|
||
};
|
||
}
|
||
|
||
uni.$on('receiveMsg', data => {
|
||
// this.is_show1 = true;
|
||
// this.is_show = false;
|
||
console.log('receiveMsg=======', data);
|
||
console.log(this.myuid)
|
||
if (data.user_id == this.myuid) return;
|
||
if (data.type == '0') {
|
||
console.log(1111111111111)
|
||
// let msgContent = self.replaceEmoji(data.content.text);
|
||
data.content = data.contents;
|
||
data.uid = data.user_id;
|
||
data.avatar = data.head_img;
|
||
self.msgList.push(data);
|
||
} else {
|
||
data.uid = data.user_id;
|
||
data.avatar = data.head_img;
|
||
self.msgList.push(data);
|
||
}
|
||
console.log('------msglist', self.msgList);
|
||
self.$nextTick(function() {
|
||
self.scrollTop = this.scrollTop += 999;
|
||
self.scrollAnimation = true;
|
||
});
|
||
});
|
||
},
|
||
onShow() {
|
||
this.scrollTop = 9999999;
|
||
},
|
||
onUnload() {
|
||
uni.$off('chatChange');
|
||
},
|
||
onBackPress(e) {
|
||
uni.$off('receiveMsg');
|
||
uni.$emit('backEmit');
|
||
},
|
||
methods: {
|
||
handleReport() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: '确定要进行举报？',
|
||
cancelText:"取消",
|
||
confirmText:"确定",
|
||
confirmColor:"#FF9300",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
that.$message.info('您已举报成功， 请等待处理结果')
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
getValue(item){
|
||
let data = JSON.parse(item)
|
||
data = `<div class="flex flex-wrap align-stretch" style="display: flex;flex-wrap: wrap;align-items: stretch;">
|
||
<img class="imghddd" style="width: 140rpx;height: 120rpx;" src="${data.thumb}" />
|
||
<div class="p2" style="width: calc(100% - 180rpx);display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-left: 10rpx;">${data.name}</div>
|
||
</div>`
|
||
data = {text:data}
|
||
this.sendMsg(data,4)
|
||
|
||
console.log()
|
||
},
|
||
shangpin(){
|
||
uni.navigateTo({
|
||
url: '/pages/market/mallSearchResults/mallSearchResults?type=1'
|
||
});
|
||
},
|
||
goReplorts() {
|
||
const self = this;
|
||
uni.navigateTo({
|
||
url: '/pages/circle/report/report?source=4&id=' + self.userInfo.user_id
|
||
});
|
||
|
||
self.$refs.benbenPositionPopup1666085213316.close();
|
||
},
|
||
|
||
//触发滑动到顶部(加载历史信息记录)
|
||
loadHistory(e) {
|
||
const self = this;
|
||
if (this.isHistoryLoading) {
|
||
return;
|
||
}
|
||
this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
|
||
this.scrollAnimation = false; //关闭滑动动画
|
||
|
||
console.log('加载下一页');
|
||
|
||
this.$api
|
||
.post(global.apiUrls.post5f601350edaa4, {
|
||
// page: self.page,
|
||
toid: 'user-' + self.toUserID,
|
||
msg_id: this.msg_id,
|
||
list_rows: 15
|
||
})
|
||
.then(res => {
|
||
console.log(res, '聊天记录列表');
|
||
if (res.data.code == 1) {
|
||
let newlist = res.data.data.reverse();
|
||
for (var i = 0; i < newlist.length; i++) {
|
||
newlist[i].content = JSON.parse(newlist[i].content);
|
||
}
|
||
console.log(newlist);
|
||
|
||
if (newlist.length) this.msg_id = newlist[0].msgid;
|
||
this.msgList = [...newlist, ...this.msgList];
|
||
}
|
||
});
|
||
uni.stopPullDownRefresh();
|
||
setTimeout(() => {
|
||
this.isHistoryLoading = false;
|
||
}, 500);
|
||
},
|
||
// 加载初始页面消息
|
||
getMsgList() {
|
||
// 消息列表
|
||
const self = this;
|
||
var urls = '';
|
||
urls = global.apiUrls.post5f601350edaa4;
|
||
var data1 = {
|
||
toid: 'user-' + self.toUserID,
|
||
list_rows: 15
|
||
};
|
||
self.$api
|
||
.post(urls, data1)
|
||
.then(res => {
|
||
if (res.data.code == 1) {
|
||
var data = res.data.data;
|
||
for (var i = 0; i < data.length; i++) {
|
||
data[i].content = JSON.parse(data[i].content);
|
||
}
|
||
console.log('聊天记录====', data);
|
||
uni.$emit('read');
|
||
self.msgList = data.reverse();
|
||
console.log('asasas', self.msgList);
|
||
self.msg_id = self.msgList[0].msgid;
|
||
self.$nextTick(function() {
|
||
self.scrollTop = 99999;
|
||
self.scrollAnimation = true;
|
||
});
|
||
}
|
||
})
|
||
.catch(err => {});
|
||
},
|
||
//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
|
||
setPicSize(content) {
|
||
// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
|
||
let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
|
||
let maxH = uni.upx2px(350); //350是定义消息图片最大高度
|
||
if (content.w > maxW || content.h > maxH) {
|
||
let scale = content.w / content.h;
|
||
content.w = scale > 1 ? maxW : maxH * scale;
|
||
content.h = scale > 1 ? maxW / scale : maxH;
|
||
}
|
||
return content;
|
||
},
|
||
|
||
//更多功能(点击+弹出)
|
||
showMore() {
|
||
this.isVoice = false;
|
||
this.hideEmoji = true;
|
||
if (this.hideMore) {
|
||
this.hideMore = false;
|
||
this.openDrawer();
|
||
} else {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
// 打开抽屉
|
||
openDrawer() {
|
||
this.popupLayerClass = 'showLayer';
|
||
},
|
||
// 隐藏抽屉
|
||
hideDrawer() {
|
||
this.popupLayerClass = '';
|
||
setTimeout(() => {
|
||
this.hideMore = true;
|
||
this.hideEmoji = true;
|
||
}, 150);
|
||
},
|
||
// 选择图片发送
|
||
chooseImage() {
|
||
this.getImage('album');
|
||
},
|
||
//拍照发送
|
||
camera() {
|
||
this.getImage('camera');
|
||
},
|
||
|
||
//选照片 or 拍照
|
||
getImage(type) {
|
||
const self = this;
|
||
this.hideDrawer();
|
||
uni.chooseImage({
|
||
sourceType: [type],
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
success: res => {
|
||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||
uni.getImageInfo({
|
||
src: res.tempFilePaths[i],
|
||
success: image => {
|
||
let msg = { url: res.tempFilePaths[i], w: image.width, h: image.height };
|
||
self.updatePic(msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
updatePic(picUrl) {
|
||
const self = this;
|
||
uni.showLoading({
|
||
title: i18n['加载中'],
|
||
mask: true
|
||
});
|
||
// console.log(self.globalUrl , global.apiUrls.UPLOAD_IMAGE_URL,111111111111)
|
||
uni.uploadFile({
|
||
url: host + '/api/' + global.apiUrls.UPLOAD_IMAGE_URL,
|
||
filePath: picUrl.url,
|
||
methods: 'post',
|
||
name: 'file',
|
||
header: {
|
||
'user-token': uni.getStorageSync('USER_TOKEN')
|
||
},
|
||
success: function(uploadFileRes) {
|
||
uni.hideLoading();
|
||
if (uploadFileRes.statusCode == 200) {
|
||
let resData = JSON.parse(uploadFileRes.data);
|
||
if (resData.code == 1) {
|
||
picUrl.url = resData.data[0].path;
|
||
self.sendMsg(picUrl, '1');
|
||
} else {
|
||
uni.showToast({
|
||
title: resData.msg,
|
||
icon: 'none',
|
||
mask: true
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 选择表情
|
||
chooseEmoji() {
|
||
this.hideMore = true;
|
||
if (this.hideEmoji) {
|
||
this.hideEmoji = false;
|
||
this.openDrawer();
|
||
} else {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
//添加表情
|
||
addEmoji(em) {
|
||
this.textMsg += em;
|
||
// this.textMsg += em.alt;
|
||
},
|
||
|
||
//获取焦点，如果不是选表情ing,则关闭抽屉
|
||
textareaFocus() {
|
||
if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
// 发送文字消息
|
||
sendText() {
|
||
this.hideDrawer(); //隐藏抽屉
|
||
if (!this.textMsg) {
|
||
return;
|
||
}
|
||
let content = this.replaceEmoji(this.textMsg);
|
||
let msg = { text: content };
|
||
this.sendMsg(msg, '0');
|
||
this.textMsg = ''; //清空输入框
|
||
},
|
||
//替换表情符号为图片
|
||
replaceEmoji(str) {
|
||
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
|
||
for (let i = 0; i < this.emojiList.length; i++) {
|
||
let row = this.emojiList[i];
|
||
for (let j = 0; j < row.length; j++) {
|
||
let EM = row[j];
|
||
if (EM.alt == item) {
|
||
//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
|
||
//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
|
||
let onlinePath = 'https://s2.ax1x.com/2019/04/12/';
|
||
let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
|
||
console.log('imgstr: ' + imgstr);
|
||
return imgstr;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
return '<div class="tttt" style="">' + replacedStr + '</div>';
|
||
},
|
||
|
||
// 发送消息
|
||
sendMsg(content, type) {
|
||
const self = this;
|
||
|
||
// 消息类型 0 文字 1图片 2 视频 3录音
|
||
//实际应用中，此处应该提交长连接，模板仅做本地处理。
|
||
var obj = content;
|
||
var urls = '';
|
||
urls = global.apiUrls.post5f5ee8e86c27b;
|
||
var data1 = {};
|
||
if(type == 4){
|
||
obj.type = 4
|
||
data1 = {
|
||
toid: 'user-' + self.toUserID,
|
||
content: JSON.stringify(obj),
|
||
type: type
|
||
}
|
||
}else{
|
||
obj.type = type;
|
||
data1 = {
|
||
toid: 'user-' + self.toUserID,
|
||
content: JSON.stringify(obj),
|
||
type: type
|
||
}
|
||
}
|
||
self.$api.post(urls, data1)
|
||
.then(res => {
|
||
if (res.data.code == 1) {
|
||
var data = res.data.data.message;
|
||
// this.getMsgList()
|
||
let msg = {
|
||
user_id: data.uid, //我的ID
|
||
type: type,
|
||
content: obj,
|
||
nickname: data.nickname,
|
||
head_img: this.user.avatar,
|
||
contents: obj
|
||
};
|
||
|
||
self.$socket.emit('sendmsg', {
|
||
uid: 'user-' + self.toUserID,
|
||
msg: msg
|
||
});
|
||
|
||
|
||
this.showMsg(msg, type);
|
||
this.hideKeyboard(); // 隐藏软键盘
|
||
this.showHandle = false;
|
||
this.showEmji = false;
|
||
}
|
||
})
|
||
.catch(err => {});
|
||
},
|
||
showMsg(data, type) {
|
||
let that = this;
|
||
var nowDate = new Date();
|
||
let lastid = 0,
|
||
content = '';
|
||
if (this.msgList.length > 0) {
|
||
lastid = Number(this.msgList[this.msgList.length - 1].msgid);
|
||
}
|
||
console.log('lastid==========', lastid);
|
||
lastid++;
|
||
content = data.content;
|
||
let msg = {
|
||
id: lastid,
|
||
uid: data.user_id,
|
||
username: data.nickname,
|
||
avatar: data.head_img,
|
||
create_time: nowDate.getHours() + ':' + nowDate.getMinutes(),
|
||
type: type ? type : '0',
|
||
msg: content,
|
||
content: content
|
||
};
|
||
console.log('mgs===========', msg);
|
||
setTimeout(function() {
|
||
console.log(1111111111);
|
||
if (!that.is_show1) {
|
||
that.is_show = true;
|
||
that.$nextTick(() => {
|
||
that.scrollTop += 9999;
|
||
that.scrollAnimation = true;
|
||
});
|
||
}
|
||
}, 1000);
|
||
this.screenMsg(msg);
|
||
}, // 接受消息(筛选处理)
|
||
screenMsg(msg) {
|
||
console.log('处理消息', msg);
|
||
//从长连接处转发给这个方法，进行筛选处理
|
||
if (msg.uid != this.myuid) {
|
||
uni.vibrateLong();
|
||
}
|
||
|
||
switch (msg.type) {
|
||
case '0':
|
||
console.log('添加文字===');
|
||
this.addTextMsg(msg);
|
||
break;
|
||
case '1':
|
||
console.log('添加图片');
|
||
this.addImgMsg(msg);
|
||
break;
|
||
case '3':
|
||
this.addImgMsg(msg);
|
||
break;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.scrollTop += 9999;
|
||
this.scrollAnimation = true;
|
||
// this.scrollToView = 'msg' + msg.id;
|
||
});
|
||
// 储存聊天记录
|
||
var key = this.kf_id + '-' + this.user.id;
|
||
var localMsg = this.getCacheChat(key);
|
||
if (localMsg == null || localMsg.length == 0) {
|
||
localMsg = [];
|
||
}
|
||
localMsg.push(msg);
|
||
this.setCacheChat({ key: key, data: localMsg });
|
||
},
|
||
getCacheChat(key) {
|
||
return uni.getStorageSync(key);
|
||
},
|
||
setCacheChat(obj) {
|
||
uni.setStorageSync(obj.key, obj.data);
|
||
},
|
||
// 添加文字消息到列表
|
||
addTextMsg(msg) {
|
||
this.msgList.push(msg);
|
||
},
|
||
// 添加语音消息到列表
|
||
addVoiceMsg(msg) {
|
||
this.msgList.push(msg);
|
||
},
|
||
// 添加图片消息到列表
|
||
addImgMsg(msg) {
|
||
console.log('====addImgMsg=======', msg);
|
||
msg.content = this.setPicSize(msg.content);
|
||
this.msgImgList.push(msg.content);
|
||
this.msgList.push(msg);
|
||
},
|
||
addRedEnvelopeMsg(msg) {
|
||
this.msgList.push(msg);
|
||
},
|
||
// 添加系统文字消息到列表
|
||
addSystemTextMsg(msg) {
|
||
this.msgList.push(msg);
|
||
},
|
||
|
||
// 预览图片
|
||
showPic(msg) {
|
||
uni.previewImage({
|
||
urls: [msg]
|
||
});
|
||
// uni.previewImage({
|
||
// indicator: 'none',
|
||
// current: msg.content.url,
|
||
// urls: this.msgImgList
|
||
// });
|
||
},
|
||
// 播放语音
|
||
playVoice(msg) {
|
||
this.playMsgid = msg.aid;
|
||
this.AUDIO.src = msg.content.url;
|
||
this.$nextTick(function() {
|
||
this.AUDIO.play();
|
||
});
|
||
},
|
||
// 录音开始
|
||
voiceBegin(e) {
|
||
if (e.touches.length > 1) {
|
||
return;
|
||
}
|
||
this.initPoint.Y = e.touches[0].clientY;
|
||
this.initPoint.identifier = e.touches[0].identifier;
|
||
this.RECORDER.start({ format: 'mp3' }); //录音开始,
|
||
},
|
||
//录音开始UI效果
|
||
recordBegin(e) {
|
||
this.recording = true;
|
||
this.voiceTis = '松开 结束';
|
||
this.recordLength = 0;
|
||
this.recordTimer = setInterval(() => {
|
||
this.recordLength++;
|
||
}, 1000);
|
||
},
|
||
// 录音被打断
|
||
voiceCancel() {
|
||
this.recording = false;
|
||
this.voiceTis = '按住 说话';
|
||
this.recordTis = '手指上滑 取消发送';
|
||
this.willStop = true; //不发送录音
|
||
this.RECORDER.stop(); //录音结束
|
||
},
|
||
// 录音中(判断是否触发上滑取消发送)
|
||
voiceIng(e) {
|
||
if (!this.recording) {
|
||
return;
|
||
}
|
||
let touche = e.touches[0];
|
||
//上滑一个导航栏的高度触发上滑取消发送
|
||
if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
|
||
this.willStop = true;
|
||
this.recordTis = '松开手指 取消发送';
|
||
} else {
|
||
this.willStop = false;
|
||
this.recordTis = '手指上滑 取消发送';
|
||
}
|
||
},
|
||
// 结束录音
|
||
voiceEnd(e) {
|
||
if (!this.recording) {
|
||
return;
|
||
}
|
||
this.recording = false;
|
||
this.voiceTis = '按住 说话';
|
||
this.recordTis = '手指上滑 取消发送';
|
||
this.RECORDER.stop(); //录音结束
|
||
},
|
||
//录音结束(回调文件)
|
||
recordEnd(e) {
|
||
const self = this;
|
||
clearInterval(this.recordTimer);
|
||
if (!this.willStop) {
|
||
console.log('e: ' + JSON.stringify(e));
|
||
let msg = {
|
||
length: 0,
|
||
url: e.tempFilePath
|
||
};
|
||
let min = parseInt(this.recordLength / 60);
|
||
let sec = this.recordLength % 60;
|
||
min = min < 10 ? '0' + min : min;
|
||
sec = sec < 10 ? '0' + sec : sec;
|
||
msg.length = min + ':' + sec;
|
||
|
||
// {
|
||
// "length": "00:03",
|
||
// "url": "_doc/uniapp_temp_1671788952633/recorder/1671788965462.mp3"
|
||
// }
|
||
console.log('录音------------------', msg);
|
||
self.updateMp3(msg);
|
||
|
||
// this.sendMsg(msg, '3');
|
||
} else {
|
||
console.log('取消发送录音');
|
||
}
|
||
this.willStop = false;
|
||
},
|
||
|
||
updateMp3(picUrl) {
|
||
const self = this;
|
||
uni.showLoading({
|
||
title: i18n['加载中'],
|
||
mask: true
|
||
});
|
||
|
||
var timestamp = new Date().getTime();
|
||
let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
|
||
let tmp = '',
|
||
i = 0,
|
||
l = str.length;
|
||
for (i = 0; i < 30; i++) {
|
||
tmp += str.charAt(Math.floor(Math.random() * l));
|
||
}
|
||
timestamp = timestamp + tmp;
|
||
|
||
let uploadTask = uni.uploadFile({
|
||
url: self.ossObj.host,
|
||
filePath: picUrl.url,
|
||
name: 'file',
|
||
formData: {
|
||
name: timestamp,
|
||
key: self.ossObj.key + timestamp,
|
||
policy: self.ossObj.policy,
|
||
OSSAccessKeyId: self.ossObj.OSSAccessKeyId,
|
||
success_action_status: '200', //让服务端返回200,不然，默认会返回204
|
||
signature: self.ossObj.signature
|
||
},
|
||
success: res => {
|
||
uni.hideLoading();
|
||
if (res.statusCode == '200') {
|
||
console.log('============', self.ossObj.host + self.ossObj.key + timestamp);
|
||
picUrl.url = self.ossObj.host + self.ossObj.key + timestamp;
|
||
self.sendMsg(picUrl, '3');
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
mask: true,
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
}
|
||
},
|
||
fail: err => {}
|
||
});
|
||
|
||
// {
|
||
// "length": "00:03",
|
||
// "url": "_doc/uniapp_temp_1671788952633/recorder/1671788965462.mp3"
|
||
// }
|
||
},
|
||
// 切换语音/文字输入
|
||
switchVoice() {
|
||
this.hideDrawer();
|
||
this.isVoice = this.isVoice ? false : true;
|
||
},
|
||
discard() {
|
||
return;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" >
|
||
@import './HM-chat/css/style.scss';
|
||
.imghddd{
|
||
width: 140rpx;
|
||
height: 120rpx;
|
||
}
|
||
rich-text {
|
||
.imghddd{
|
||
width: 140rpx;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
.p2{
|
||
width: calc(100% - 180rpx);
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
overflow: hidden;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.popup-layer{
|
||
top:calc(100% - 20rpx)
|
||
}
|
||
.popup-layer-list {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.popup-layer-list-item {
|
||
height: 90rpx;
|
||
|
||
margin: 0 20rpx 10rpx 0;
|
||
width: calc((100% - 60rpx) / 8);
|
||
|
||
min-width: calc((100% - 60rpx) / 8);
|
||
max-width: calc((100% - 60rpx) / 8);
|
||
text-align: center;
|
||
&:nth-child(8n + 8) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
min-height: calc(100vh - var(--window-bottom));
|
||
background: #fff;
|
||
background-size: 100% auto !important;
|
||
background-color: #f6f7f9;
|
||
}
|
||
.myComments_popup_2 {
|
||
background: #fff;
|
||
background-size: 100% !important;
|
||
box-shadow: 0rpx 4rpx 24rpx rgba(50, 50, 51, 0.12);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
width: 142rpx;
|
||
height: 65rpx;
|
||
background-size: 100% auto !important;
|
||
.myComments_positionPopup2_c1_c1 {
|
||
color: #1f1f1f;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin: 0rpx 0rpx 0rpx 15rpx;
|
||
}
|
||
.myComments_positionPopup2_c1_c0 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.myComments_positionPopup2_c1 {
|
||
padding: 23rpx 0rpx 22rpx 0rpx;
|
||
}
|
||
.myComments_positionPopup2_c0_c1 {
|
||
color: #1f1f1f;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin: 0rpx 0rpx 0rpx 15rpx;
|
||
}
|
||
.myComments_positionPopup2_c0_c0 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.myComments_positionPopup2_c0 {
|
||
padding: 16rpx 0rpx 19rpx 0rpx;
|
||
}
|
||
}
|
||
.demandDetails_fd0_0_c2_c1 {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
}
|
||
.demandDetails_flex_0 {
|
||
background: #fff;
|
||
background-size: 100% !important;
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
top: 0rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.demandDetails_fd0_0_c0_c0 {
|
||
font-size: 36rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.demandDetails_fd0_0_c0 {
|
||
width: 50rpx;
|
||
}
|
||
|
||
.demandDetails_fd0_0 {
|
||
padding: 0rpx 32rpx 0rpx 32rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
/deep/ .not_nvue_animation_show {
|
||
left: 590rpx !important;
|
||
top: 90rpx !important;
|
||
}
|
||
|
||
.names {
|
||
max-width: 200px;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
.activesss {
|
||
padding-bottom: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|