You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
6.9 KiB
126 lines
6.9 KiB
<div class="chat-room">
|
|
<div class="room" :class="{ win: !chatOptions.popup }">
|
|
<div v-drag class="head">
|
|
<div class="image">
|
|
<img :src="service && service.avatar" />
|
|
</div>
|
|
<div class="name">{{ service && service.nickname }}</div>
|
|
<div :class="[
|
|
'iconfont',
|
|
muted ? 'icon-shengyinjingyinxianxing' : 'icon-shengyinyinliang'
|
|
]" @click="muted = !muted"></div>
|
|
<div class="iconfont icon-guanbi5" @click="close"></div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="chat">
|
|
<div ref="record" class="record" @scroll="onScroll">
|
|
<ul>
|
|
<template v-for="item in records">
|
|
<li :key="item.id" :class="{ right: item.uid === myUid }">
|
|
<div v-if="item.show" class="time-tag">
|
|
{{ item._add_time }}
|
|
</div>
|
|
<div class="avatar">
|
|
<img :src="item.avatar" />
|
|
</div>
|
|
<div class="content">
|
|
<div v-if="item.msn_type === 1" class="text" v-html="item.msn"></div>
|
|
<div v-if="item.msn_type === 2" class="image">
|
|
<div class="text">
|
|
<i :class="`em ${item.msn}`"></i>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.msn_type === 3" class="image">
|
|
<img :src="item.msn" />
|
|
</div>
|
|
<div v-if="item.msn_type === 5" class="goods">
|
|
<div class="thumb">
|
|
<img :src="item.productInfo.image" />
|
|
</div>
|
|
<div class="intro">
|
|
<div class="name">
|
|
{{ item.productInfo.store_name }}
|
|
</div>
|
|
<div class="attr">
|
|
<span>库存：{{ item.productInfo.stock }}</span>
|
|
<span>销量：{{ item.productInfo.sales }}</span>
|
|
</div>
|
|
<div class="group">
|
|
<div class="money">
|
|
￥{{ item.productInfo.price }}
|
|
</div>
|
|
<nuxt-link target="_blank" :to="{
|
|
path: `/goods_detail/${item.productInfo.id}`
|
|
}">查看商品 ></nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="item.msn_type === 21">
|
|
<div v-for="itm in item.orderInfo.cartInfo" :key="itm.id" class="order">
|
|
<div class="thumb">
|
|
<img :src="itm.productInfo.image" />
|
|
</div>
|
|
<div class="intro">
|
|
<div class="name">
|
|
订单ID：{{ item.orderInfo.order_id }}
|
|
</div>
|
|
<div class="attr">商品数量：{{ itm.cart_num }}</div>
|
|
<div class="group">
|
|
<div class="money">
|
|
￥{{ itm.productInfo.price }}
|
|
</div>
|
|
<nuxt-link target="_blank" :to="{
|
|
path: '/order_detail',
|
|
query: { orderId: item.orderInfo.order_id }
|
|
}">查看订单 ></nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<div class="editor">
|
|
<div class="editor-hd">
|
|
<div>
|
|
<button class="emoji-btn" title="表情" @click.stop="emojiSwitch">
|
|
<i class="iconfont icon-biaoqing1"></i>
|
|
</button>
|
|
<button title="图片">
|
|
<el-upload :show-file-list="false" accept="image/*" :before-upload="beforeUpload">
|
|
<i class="iconfont icon-tupian1"></i>
|
|
</el-upload>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="end" @click="chatEnd">
|
|
<i class="iconfont icon-guanji"></i>结束
|
|
</button>
|
|
</div>
|
|
<div v-show="emojiShow" class="emoji-panel">
|
|
<i v-for="(emoji, index) in emojiList" :key="index" :class="`em ${emoji}`"
|
|
@click="selectEmoji(emoji)"></i>
|
|
</div>
|
|
</div>
|
|
<div class="editor-bd">
|
|
<textarea v-model="chatCont" placeholder="请输入文字内容" @keydown.enter="ctrlEnter"></textarea>
|
|
</div>
|
|
<div class="editor-ft">
|
|
<button :disabled="!chatCont" @click="sendMessage">发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notice">
|
|
<div class="rich">
|
|
<img :src="code_url" style="width: 100%;" />
|
|
</div>
|
|
<div class="copy">
|
|
<a href="https://kn.tczxkj.com/pc/" target="_blank">天诚志信提供技术支持</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<audio ref="audio" :src="audioSrc"></audio>
|
|
</div>
|
|
</div> |