|
|
@@ -0,0 +1,248 @@
|
|
|
+<template>
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="chat-top-wrap">
|
|
|
+ <scroll-view class="chat-list-wrap" scroll-y :style="{height: scrollHei}">
|
|
|
+ <div class="chat-list" :class="[index == 2 ? 'chat-list-l' : 'chat-list-r' ]" v-for="(item, index) in 4" :key="index">
|
|
|
+ <div class="list-time">15:20</div>
|
|
|
+ <div class="list-blo">
|
|
|
+ <!-- 左边时 -->
|
|
|
+ <div class="list-attr" v-if="index == 2">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt />
|
|
|
+ </div>
|
|
|
+ <div class="list-content" v-if="index == 2">哇哈哈哈~ 拉~</div>
|
|
|
+ <div class="list-content list-img" v-else>
|
|
|
+ <div class="list-content-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/extension.png`" alt mode="center" />
|
|
|
+ </div>
|
|
|
+ <div class="list-img-text">注册会员</div>
|
|
|
+ </div>
|
|
|
+ <!-- 右边时 -->
|
|
|
+ <div class="list-attr" v-if="index != 2">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="chat-bottom-wrap app-footer">
|
|
|
+ <!-- 快捷 -->
|
|
|
+ <div class="tool-wrap">
|
|
|
+ <div class="tool-tit">我想</div>
|
|
|
+ <div class="tool-list" @click="linkShow = true">发链接</div>
|
|
|
+ <div class="tool-list">发商品图</div>
|
|
|
+ <div class="tool-list">发照片</div>
|
|
|
+ </div>
|
|
|
+ <div class="input-wrap">
|
|
|
+ <app-search-module placeholder="输入消息..." :isIcon="false" backColor="#fff" :height="70" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 发链接弹窗 -->
|
|
|
+ <modal-module :show="linkShow" @cancel="modalCancel" :custom="true" padding="20px 44px">
|
|
|
+ <div class="link-modal-wrap">
|
|
|
+ <div class="link-tit">发链接</div>
|
|
|
+ <div class="btn-wrap">
|
|
|
+ <button class="button-com default big">注册会员</button>
|
|
|
+ <button class="button-com default big">快速付款</button>
|
|
|
+ <button class="button-com default big">商城</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </modal-module>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import AppSearchModule from '@/components/module/app-search'
|
|
|
+ import ModalModule from '@/components/plugin/modal'
|
|
|
+ import chat from '@/utils/chat'
|
|
|
+ export default {
|
|
|
+ name: 'chat-index',
|
|
|
+ components: {
|
|
|
+ AppSearchModule,
|
|
|
+ ModalModule
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ linkShow: false,
|
|
|
+ // === chat
|
|
|
+ messagehandler: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {},
|
|
|
+ destroyed() {
|
|
|
+ this.messagehandler && this.messagehandler.destroy()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ scrollHei() {
|
|
|
+ return uni.upx2px(1334 - 170) + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ console.log('chat', chat)
|
|
|
+ //建立messagesocket连接
|
|
|
+ this.messagehandler = chat()
|
|
|
+ this.messagehandler.watch(this.messagehandler.MESSAGE_TYPE.CART, (type, data, source, target) => {
|
|
|
+ // let message
|
|
|
+ // if (type === 1) {
|
|
|
+ // message = this._socketDataToMessageAdapter(data)
|
|
|
+ // }
|
|
|
+ // if (message == null) return
|
|
|
+ // let self = this
|
|
|
+ // this.messages.unshift(message)
|
|
|
+ // this.$notify.info({
|
|
|
+ // title: '提示',
|
|
|
+ // message: message.ms_content,
|
|
|
+ // onClick() {
|
|
|
+ // self.checkMessage(message)
|
|
|
+ // },
|
|
|
+ // duration: 3000
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.linkShow = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .chat-top-wrap {
|
|
|
+ height: calc(100% - 170px);
|
|
|
+ .chat-list {
|
|
|
+ width: calc(100% - 52px);
|
|
|
+ padding: 0 26px;
|
|
|
+ .list-time {
|
|
|
+ color: $fontColor3;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .list-blo {
|
|
|
+ @include disFlex(flex-start, flex-start);
|
|
|
+ margin-top: 20px;
|
|
|
+ .list-attr {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 50%;
|
|
|
+ img {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-content {
|
|
|
+ padding: 18px 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 30px;
|
|
|
+ position: relative;
|
|
|
+ color: #000;
|
|
|
+ max-width: 66%;
|
|
|
+ line-height: 1.4;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ top: 16px;
|
|
|
+ border: 12px solid #fff;
|
|
|
+ }
|
|
|
+ &.list-img {
|
|
|
+ background-color: #fff !important;
|
|
|
+ .list-content-img {
|
|
|
+ width: 260px;
|
|
|
+ height: 260px;
|
|
|
+ img {
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-img-text {
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 左边的消息
|
|
|
+ .chat-list-l {
|
|
|
+ .list-content {
|
|
|
+ margin-left: 26px;
|
|
|
+ &::before {
|
|
|
+ right: 100%;
|
|
|
+ border-color: transparent #fff transparent transparent !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 右边的消息
|
|
|
+ .chat-list-r {
|
|
|
+ .list-blo {
|
|
|
+ justify-content: flex-end;
|
|
|
+ .list-content {
|
|
|
+ margin-right: 26px;
|
|
|
+ background-color: #a9e368;
|
|
|
+ &::before {
|
|
|
+ left: 100%;
|
|
|
+ border-color: transparent transparent transparent #a9e368 !important;
|
|
|
+ }
|
|
|
+ &.list-img {
|
|
|
+ &::before {
|
|
|
+ border-color: transparent transparent transparent #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chat-bottom-wrap {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: 170px;
|
|
|
+ padding: 0 20px;
|
|
|
+ background-color: $backColor;
|
|
|
+ display: block;
|
|
|
+ // 快捷
|
|
|
+ .tool-wrap {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-bottom: 26px;
|
|
|
+ margin-left: 4px;
|
|
|
+ .tool-tit {
|
|
|
+ }
|
|
|
+ .tool-list {
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ border: 1px solid $borderColor;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding: 0 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 输入框
|
|
|
+ .input-wrap {
|
|
|
+ /deep/.app-search-module {
|
|
|
+ height: 70px;
|
|
|
+ input {
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 发链接弹窗
|
|
|
+ .link-modal-wrap {
|
|
|
+ .link-tit {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ .btn-wrap {
|
|
|
+ .button-com {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
shish