|
@@ -153,76 +153,89 @@
|
|
|
ref="dialogue_box"
|
|
ref="dialogue_box"
|
|
|
>
|
|
>
|
|
|
<!-- <div class="item loading">{{loadText}}<span>{{"第" + pageNum + "页"}}</span></div> -->
|
|
<!-- <div class="item loading">{{loadText}}<span>{{"第" + pageNum + "页"}}</span></div> -->
|
|
|
- <div
|
|
|
|
|
- v-for="(item, index) in dialogueList"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :class="
|
|
|
|
|
- item.sendType == '1'
|
|
|
|
|
- ? center_wrapper_center_item
|
|
|
|
|
- : center_wrapper_center_item_reserve
|
|
|
|
|
- "
|
|
|
|
|
- >
|
|
|
|
|
- <div class="left-item-head">
|
|
|
|
|
- <img
|
|
|
|
|
- v-if="item.sendType == '1' && userHead !== null"
|
|
|
|
|
- :src="userHead"
|
|
|
|
|
- />
|
|
|
|
|
- <img
|
|
|
|
|
- v-else-if="item.sendType == '1' && userHead == null"
|
|
|
|
|
- src="~@/assets/img/head.png"
|
|
|
|
|
- />
|
|
|
|
|
- <img v-else src="~@/assets/img/avatar.png" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 文字 -->
|
|
|
|
|
- <div class="center-item-info_wrapper" v-if="item.type == 1">
|
|
|
|
|
- <div class="center-item-tip">
|
|
|
|
|
- <div class="center-item-info">
|
|
|
|
|
- {{ item.content }}
|
|
|
|
|
|
|
+ <div v-for="(item, index) in dialogueList" :key="index">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="item.recall==0"
|
|
|
|
|
+ :class="
|
|
|
|
|
+ item.sendType == '1'
|
|
|
|
|
+ ? center_wrapper_center_item
|
|
|
|
|
+ : center_wrapper_center_item_reserve
|
|
|
|
|
+ "
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="left-item-head">
|
|
|
|
|
+ <img
|
|
|
|
|
+ v-if="item.sendType == '1' && userHead !== null"
|
|
|
|
|
+ :src="userHead"
|
|
|
|
|
+ />
|
|
|
|
|
+ <img
|
|
|
|
|
+ v-else-if="item.sendType == '1' && userHead == null"
|
|
|
|
|
+ src="~@/assets/img/head.png"
|
|
|
|
|
+ />
|
|
|
|
|
+ <img v-else src="~@/assets/img/avatar.png" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 文字 -->
|
|
|
|
|
+ <div class="center-item-info_wrapper" v-if="item.type == 1">
|
|
|
|
|
+ <div class="center-item-tip">
|
|
|
|
|
+ <div class="center-item-info">
|
|
|
|
|
+ {{ item.content }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 图片 -->
|
|
|
|
|
- <div class="center-item-info_wrapper" v-if="item.type == 2">
|
|
|
|
|
- <div class="center-item-tip">
|
|
|
|
|
- <div v-viewer>
|
|
|
|
|
- <el-popover placement="top-start" title="" trigger="hover">
|
|
|
|
|
- <img
|
|
|
|
|
- style="width: 100px; height: 100px"
|
|
|
|
|
- :src="item.content"
|
|
|
|
|
- alt=""
|
|
|
|
|
- slot="reference"
|
|
|
|
|
- />
|
|
|
|
|
- <img
|
|
|
|
|
- style="width: 300px; height: 300px"
|
|
|
|
|
- :src="item.content"
|
|
|
|
|
- alt=""
|
|
|
|
|
- />
|
|
|
|
|
- </el-popover>
|
|
|
|
|
- <!-- <img :src="item.content" alt="" width="100" height="100"> -->
|
|
|
|
|
|
|
+ <div v-if="item.sendType == '2'">
|
|
|
|
|
+ <img
|
|
|
|
|
+ src="~@/assets/img/revocation.png"
|
|
|
|
|
+ @click="revocation(item)"
|
|
|
|
|
+ title="撤回"
|
|
|
|
|
+ style="width: 20px; height: 20px;cursor: pointer;"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 图片 -->
|
|
|
|
|
+ <div class="center-item-info_wrapper" v-if="item.type == 2">
|
|
|
|
|
+ <div class="center-item-tip">
|
|
|
|
|
+ <div v-viewer>
|
|
|
|
|
+ <el-popover
|
|
|
|
|
+ placement="top-start"
|
|
|
|
|
+ title=""
|
|
|
|
|
+ trigger="hover"
|
|
|
|
|
+ >
|
|
|
|
|
+ <img
|
|
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
|
|
+ :src="item.content"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ slot="reference"
|
|
|
|
|
+ />
|
|
|
|
|
+ <img
|
|
|
|
|
+ style="width: 300px; height: 300px"
|
|
|
|
|
+ :src="item.content"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-popover>
|
|
|
|
|
+ <!-- <img :src="item.content" alt="" width="100" height="100"> -->
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 订单 -->
|
|
|
|
|
- <div class="center-item-info_wrapper" v-if="item.type == 3">
|
|
|
|
|
- <div
|
|
|
|
|
- class="center-item-tip"
|
|
|
|
|
- style="background-color: #fff;cursor: pointer;padding: 10px;border-radius: 4px;"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <!-- 订单 -->
|
|
|
|
|
+ <div class="center-item-info_wrapper" v-if="item.type == 3">
|
|
|
<div
|
|
<div
|
|
|
- class=""
|
|
|
|
|
- @click="orderDetails(item.content.split(',')[2])"
|
|
|
|
|
|
|
+ class="center-item-tip"
|
|
|
|
|
+ style="background-color: #fff;cursor: pointer;padding: 10px;border-radius: 4px;"
|
|
|
>
|
|
>
|
|
|
- <div style="display: flex">
|
|
|
|
|
- <img
|
|
|
|
|
- :src="item.content.split(',')[0]"
|
|
|
|
|
- alt=""
|
|
|
|
|
- width="40"
|
|
|
|
|
- height="40"
|
|
|
|
|
- />
|
|
|
|
|
- <div
|
|
|
|
|
- style="
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class=""
|
|
|
|
|
+ @click="orderDetails(item.content.split(',')[2])"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div style="display: flex">
|
|
|
|
|
+ <img
|
|
|
|
|
+ :src="item.content.split(',')[0]"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ width="40"
|
|
|
|
|
+ height="40"
|
|
|
|
|
+ />
|
|
|
|
|
+ <div
|
|
|
|
|
+ style="
|
|
|
width: 145px;
|
|
width: 145px;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
line-height: 20px;
|
|
line-height: 20px;
|
|
@@ -233,46 +246,48 @@
|
|
|
-webkit-line-clamp: 2;
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-orient: vertical;
|
|
|
"
|
|
"
|
|
|
- >
|
|
|
|
|
- {{ item.content.split(",")[1] }}
|
|
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.content.split(",")[1] }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <p class="hoverp" style="font-size: 13px; color: #999999">
|
|
|
|
|
+ 订单编号: {{ item.content.split(",")[3] }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p style="font-size: 13px; color: #999999">
|
|
|
|
|
+ 创建时间:{{ item.content.split(",")[4] }}
|
|
|
|
|
+ </p>
|
|
|
</div>
|
|
</div>
|
|
|
- <p class="hoverp" style="font-size: 13px; color: #999999">
|
|
|
|
|
- 订单编号: {{ item.content.split(",")[3] }}
|
|
|
|
|
- </p>
|
|
|
|
|
- <p style="font-size: 13px; color: #999999">
|
|
|
|
|
- 创建时间:{{ item.content.split(",")[4] }}
|
|
|
|
|
- </p>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 商品 -->
|
|
|
|
|
- <div class="center-item-info_wrapper" v-if="item.type == 4">
|
|
|
|
|
- <div
|
|
|
|
|
- class="center-item-tip"
|
|
|
|
|
- style="background-color: #fff; padding: 10px; border-radius: 4px"
|
|
|
|
|
- >
|
|
|
|
|
- <div class="">
|
|
|
|
|
- <img
|
|
|
|
|
- :src="item.content.split(',')[0]"
|
|
|
|
|
- alt=""
|
|
|
|
|
- width="160"
|
|
|
|
|
- height="120"
|
|
|
|
|
- />
|
|
|
|
|
- <p
|
|
|
|
|
- style="width: 160px; line-height: 20px; margin-bottom: 0"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.content.split(",")[1] }}
|
|
|
|
|
- </p>
|
|
|
|
|
- <p style="color: #f56c6c; margin-bottom: 0">
|
|
|
|
|
- ¥{{ item.content.split(",")[2] }}
|
|
|
|
|
- </p>
|
|
|
|
|
|
|
+ <!-- 商品 -->
|
|
|
|
|
+ <div class="center-item-info_wrapper" v-if="item.type == 4">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="center-item-tip"
|
|
|
|
|
+ style="background-color: #fff; padding: 10px; border-radius: 4px"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="">
|
|
|
|
|
+ <img
|
|
|
|
|
+ :src="item.content.split(',')[0]"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ width="160"
|
|
|
|
|
+ height="120"
|
|
|
|
|
+ />
|
|
|
|
|
+ <p
|
|
|
|
|
+ style="width: 160px; line-height: 20px; margin-bottom: 0"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.content.split(",")[1] }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p style="color: #f56c6c; margin-bottom: 0">
|
|
|
|
|
+ ¥{{ item.content.split(",")[2] }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="center-item-time">{{ item.createTime }}</div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
<!-- <a id="mao2"></a> -->
|
|
<!-- <a id="mao2"></a> -->
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 下面的输入框,发送 -->
|
|
<!-- 下面的输入框,发送 -->
|
|
@@ -301,7 +316,7 @@
|
|
|
:show-file-list="false"
|
|
:show-file-list="false"
|
|
|
:on-success="handleAvatarSuccess"
|
|
:on-success="handleAvatarSuccess"
|
|
|
:before-upload="beforeAvatarUpload"
|
|
:before-upload="beforeAvatarUpload"
|
|
|
- :headers="{ token: token }"
|
|
|
|
|
|
|
+ :headers="{ token: token }"
|
|
|
>
|
|
>
|
|
|
<div class="icon-item" title="发送文件">
|
|
<div class="icon-item" title="发送文件">
|
|
|
<img
|
|
<img
|
|
@@ -564,6 +579,35 @@ export default {
|
|
|
|
|
|
|
|
this.dataSelect();
|
|
this.dataSelect();
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
|
|
+ // 聊天撤回
|
|
|
|
|
+ revocation(item) {
|
|
|
|
|
+ console.log(item, "撤回");
|
|
|
|
|
+ this.$confirm(`确定撤回当前聊天记录?`, "提示", {
|
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
|
+ type: "warning"
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(() => {
|
|
|
|
|
+ this.$http({
|
|
|
|
|
+ url: this.$http.adornUrl(
|
|
|
|
|
+ `chatsContent/recall/${item.chatContentId}`
|
|
|
|
|
+ ),
|
|
|
|
|
+ method: "put"
|
|
|
|
|
+ }).then(({ data }) => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: "撤回成功",
|
|
|
|
|
+ type: "success",
|
|
|
|
|
+ duration: 1500,
|
|
|
|
|
+ onClose: () => {
|
|
|
|
|
+ this.dataSelect();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {});
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
// 点击聊天列表的某一项
|
|
// 点击聊天列表的某一项
|
|
|
clickItem(item, index) {
|
|
clickItem(item, index) {
|
|
|
console.log(item, index, "点击聊天列表的某一项");
|
|
console.log(item, index, "点击聊天列表的某一项");
|
|
@@ -588,7 +632,7 @@ export default {
|
|
|
})
|
|
})
|
|
|
}).then(({ data }) => {
|
|
}).then(({ data }) => {
|
|
|
let returnData = data.data;
|
|
let returnData = data.data;
|
|
|
- // console.log(data.data);
|
|
|
|
|
|
|
+ console.log(data.data, "聊天数据");
|
|
|
|
|
|
|
|
this.dialogueList = returnData;
|
|
this.dialogueList = returnData;
|
|
|
let ele = document.getElementById("ele");
|
|
let ele = document.getElementById("ele");
|