From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/chat/index.vue | 404 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 244 insertions(+), 160 deletions(-)
diff --git a/src/page/chat/index.vue b/src/page/chat/index.vue
index c1de81d..78c8f65 100644
--- a/src/page/chat/index.vue
+++ b/src/page/chat/index.vue
@@ -7,27 +7,35 @@
</template>
<template #title>
<div class="flex items-center">
- <img class="w-32 h-32" :src="detail.c2cUserHeadImg" alt="">
- <span class="ml-11 font-700 font-28">{{ detail.c2cUserNickName }}</span>
+ <img class="w-32 h-32" :src="detail.c2cUserHeadImg" alt="" />
+ <span class="ml-11 font-700 font-28">{{
+ detail.c2cUserNickName
+ }}</span>
</div>
</template>
</order-nav>
<div class="pt-30 px-32 pb-32 tabBackground">
<template v-if="detail.direction == 'buy'">
<template v-if="detail.state == 0">
- <div class="font-40 c2cColor" v-if="time > 0">{{ $t('订单将在倒计时结束时取消。') }} <span class="text-blue">{{ time |
- format }}</span></div>
+ <div class="font-40 c2cColor" v-if="time > 0">
+ {{ $t("订单将在倒计时结束时取消。") }} <span
+ class="text-blue"
+ >{{ time | format }}</span
+ >
+ </div>
- <div class="font-40 c2cColor" v-else>{{ $t('您的订单已超时') }}</div>
+ <div class="font-40 c2cColor" v-else>
+ {{ $t("您的订单已超时") }}
+ </div>
<van-count-down class="flex font-700 mx-10" :time="time">
- <template #default="timeData">
- <span class="block">{{ timeData.hours }}</span>
- <span class="colon">:</span>
- <span class="block">{{ timeData.minutes }}</span>
- <span class="colon">:</span>
- <span class="block">{{ timeData.seconds }}</span>
- </template>
- </van-count-down>
+ <template #default="timeData">
+ <span class="block">{{ timeData.hours }}</span>
+ <span class="colon">:</span>
+ <span class="block">{{ timeData.minutes }}</span>
+ <span class="colon">:</span>
+ <span class="block">{{ timeData.seconds }}</span>
+ </template>
+ </van-count-down>
<!-- <span class="block" v-if="time.hours">{{
time.hours
}}</span>
@@ -45,41 +53,88 @@
</template>
<div class="flex justify-between items-center mt-31">
<div class="font-26 text-black">
- <span class="text-grey">{{ $t('金额') }}</span>
- <span class="ml-14 c2cColor">{{ detail.currency }} {{ detail.amount && (detail.amount).toFixed(2) }}</span>
+ <span class="text-grey">{{ $t("金额") }}</span>
+ <span class="ml-14 c2cColor"
+ >{{ detail.currency }}
+ {{ detail.amount && detail.amount.toFixed(2) }}</span
+ >
</div>
- <div class="font-30 text-blue" @click="$router.push('/appeal')">{{ $t('举报') }}</div>
+ <div class="font-30 text-blue" @click="$router.push('/appeal')">
+ {{ $t("举报") }}
+ </div>
</div>
- <van-button v-if="detail.direction == 'buy' && detail.state == 0" class="w-full mt-44 font-31 rounded-lg"
- color="#1D91FF" type="info" @click="gotoPay">{{ $t('去付款') }}</van-button>
+ <van-button
+ v-if="detail.direction == 'buy' && detail.state == 0"
+ class="w-full mt-44 font-31 rounded-lg"
+ color="#1D91FF"
+ type="info"
+ @click="gotoPay"
+ >{{ $t("去付款") }}</van-button
+ >
</div>
</div>
<div class="content flex-1 pb-200">
<div class="flex flex-col px-32 box-border">
- <div class="w-full py-10 text-grey text-center pt-100" @click="onMore"
- :style="{ 'visibility': finished ? 'hidden' : 'visiable' }">
- {{ $t('历史消息') }}</div>
+ <div
+ class="w-full py-10 text-grey text-center pt-100"
+ @click="onMore"
+ :style="{ visibility: finished ? 'hidden' : 'visiable' }"
+ >
+ {{ $t("历史消息") }}
+ </div>
<ul class="flex flex-col pt-20">
- <li v-for="(item, index) in list" :key="item.id" class="flex flex-col mt-20">
- <p class="font-26 text-center py-20 text-grey" v-if="showTime(index)">{{ item.createtime &&
- item.createtime.split(' ')[0] }}</p>
- <div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
-
+ <li
+ v-for="(item, index) in list"
+ :key="item.id"
+ class="flex flex-col mt-20"
+ >
+ <p
+ class="font-26 text-center py-20 text-grey"
+ v-if="showTime(index)"
+ >
+ {{ item.createtime && item.createtime.split(" ")[0] }}
+ </p>
+ <div
+ class="flex"
+ :class="item.send_receive === 'send' ? 'justify-end' : ''"
+ >
<template v-if="item.send_receive === 'receive'">
<img :src="detail.c2cUserHeadImg" class="w-81 h-81 mr-40" />
- <div class="responser bg-grey px-50 py-35 font-30 rounded-lg font-26 chatBg bg-right"
- style="border-radius: 20px 20px 20px 0">
- <p class="break-word textColor" style="max-width: 230px; word-break: break-word;"
- v-if="item.type === 'text'">{{ item.content }}</p>
- <img v-else :src="item.content" class="w-200 h-200" @click="onPreview(item.content)" />
+ <div
+ class="responser bg-grey px-50 py-35 font-30 rounded-lg font-26 chatBg bg-right"
+ style="border-radius: 20px 20px 20px 0"
+ >
+ <p
+ class="break-word textColor"
+ style="max-width: 230px; word-break: break-word"
+ v-if="item.type === 'text'"
+ >
+ {{ item.content }}
+ </p>
+ <span v-else @click="onPreview(item.content)">
+ <img :src="item.content" class="w-200 h-200" />
+ </span>
</div>
</template>
- <div class="py-25 px-50 rounded-lg flex flex-col chatBg bg-right" style="border-radius: 20px 20px 0 20px"
- v-else>
- <img :src="`${item.content}`" class="w-200 h-200" v-if="item.type === 'img'"
- @click="onPreview(item.content)" />
- <p class="break-word textColor" v-else style="max-width: 230px; word-break: break-word;color: #fff">
- {{ item.content }}</p>
+ <div
+ class="py-25 px-50 rounded-lg flex flex-col chatBg bg-right"
+ style="border-radius: 20px 20px 0 20px"
+ v-else
+ >
+ <span
+ v-if="item.type === 'img'"
+ @click="onPreview(item.content)"
+ >
+ <img :src="`${item.content}`" class="w-200 h-200" />
+ </span>
+
+ <p
+ class="break-word textColor"
+ v-else
+ style="max-width: 230px; word-break: break-word; color: #fff"
+ >
+ {{ item.content }}
+ </p>
</div>
</div>
</li>
@@ -102,14 +157,23 @@
</div> -->
<div class="fixed bottom-0 bottom-box left-0 w-full px-32 box-border pb-80">
<div
- class="pl-30 flex justify-between relative w-full h-120 items-center pr-140 box-border rounded-xl tabBackground chat-input">
- <van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead">
+ class="pl-30 flex justify-between relative w-full h-120 items-center pr-140 box-border rounded-xl tabBackground chat-input"
+ >
+ <van-uploader
+ :max-size="10000 * 1024"
+ @oversize="onOversize"
+ :after-read="afterRead"
+ >
<img src="@/assets/image/service/photo.png" class="w-72 h-72" />
</van-uploader>
- <input class="w-full h-full font-32 pl-40 inputBackground c2cColor" type="text" v-model="message"
- :placeholder="$t('请输入您的消息...')">
+ <input
+ class="w-full h-full font-32 pl-40 inputBackground c2cColor"
+ type="text"
+ v-model="message"
+ :placeholder="$t('请输入您的消息...')"
+ />
<div class="right-34 chat-icon" @click="send('text', message)">
- <img class="w-54" src="~@/assets/image/c2c/Vector(1).png" alt="">
+ <img class="w-54" src="~@/assets/image/c2c/Vector(1).png" alt="" />
</div>
</div>
</div>
@@ -117,19 +181,14 @@
</template>
<script>
-import {
- Icon,
- Button,
- Uploader, ImagePreview,
- CountDown
-} from "vant";
+import { Icon, Button, Uploader, ImagePreview, CountDown } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
-import { _uploadImage } from '@/API/fund.api'
+import { _uploadImage } from "@/API/fund.api";
import otcApi from "@/API/otc.js";
export default {
name: "ChatIndex",
- props: ['type'], // 标识买家还是卖家
+ props: ["type"], // 标识买家还是卖家
components: {
[Icon.name]: Icon,
[Button.name]: Button,
@@ -140,181 +199,206 @@
data() {
return {
list: [],
- lastMsgId: '',
+ lastMsgId: "",
finished: false, // 没有历史消息
- message: '',
- orderNo: '',
+ message: "",
+ orderNo: "",
detail: {},
inter: null,
timerData: null,
- time: '' // 剩余时间
- }
+ time: "", // 剩余时间
+ };
},
filters: {
format(val) {
- return Math.floor(val / 60) + ':' + val % 60
- }
+ return Math.floor(val / 60) + ":" + (val % 60);
+ },
},
async created() {
- this.orderNo = this.$store.state.c2c.order_no
- const res = await otcApi.ctcOrderGetDetail({ order_no: this.orderNo, language: this.$i18n.locale });
- this.detail = res.data
- const { autoCancelTimeRemain } = this.detail
- this.time = autoCancelTimeRemain
+ this.orderNo = this.$store.state.c2c.order_no;
+ const res = await otcApi.ctcOrderGetDetail({
+ order_no: this.orderNo,
+ language: this.$i18n.locale,
+ });
+ this.detail = res.data;
+ const { autoCancelTimeRemain } = this.detail;
+ this.time = autoCancelTimeRemain;
if (this.time > 0) {
this.timerData = setInterval(() => {
- this.time--
+ this.time--;
if (this.time <= 0) {
- clearInterval(this.timerData)
+ clearInterval(this.timerData);
}
- }, 2000)
+ }, 2000);
}
- this.fetchList()
+ this.fetchList();
},
methods: {
fixStrSell() {
- let str = ''
+ let str = "";
if (this.detail.state == 0) {
- str = this.$t('等待买家付款')
+ str = this.$t("等待买家付款");
} else if (this.detail.state == 1) {
- str = this.$t('请放行')
+ str = this.$t("请放行");
} else if (this.detail.state == 2) {
- str = this.$t('申诉中')
+ str = this.$t("申诉中");
} else if (this.detail.state == 3) {
- str = this.$t('已完成')
+ str = this.$t("已完成");
} else if (this.detail.state == 4) {
- str = this.$t('已取消')
+ str = this.$t("已取消");
} else if (this.detail.state == 5) {
- str = this.$t('已超时')
+ str = this.$t("已超时");
}
- return str
+ return str;
},
fixStrBuy() {
- let str = ''
+ let str = "";
if (this.detail.state == 1) {
- str = this.$t('等待卖家放行')
+ str = this.$t("等待卖家放行");
} else if (this.detail.state == 2) {
- str = this.$t('申诉中')
+ str = this.$t("申诉中");
} else if (this.detail.state == 3) {
- str = this.$t('已完成')
+ str = this.$t("已完成");
} else if (this.detail.state == 4) {
- str = this.$t('已取消')
+ str = this.$t("已取消");
} else if (this.detail.state == 5) {
- str = this.$t('已超时')
+ str = this.$t("已超时");
}
- return str
+ return str;
},
gotoPay() {
if (this.detail.state == 0) {
- this.$router.push({ path: '/paymentBuy' })
+ this.$router.push({ path: "/paymentBuy" });
}
},
onOversize(file) {
console.log(file);
- this.$toast(this.$t('文件大小不能超过10m'));
+ this.$toast(this.$t("文件大小不能超过10m"));
},
- onPreview(url) { // 预览
- ImagePreview([url])
+ onPreview(url) {
+ // 预览
+ ImagePreview([url]);
},
- showTime(index) { // 时间显示
+ showTime(index) {
+ // 时间显示
if (index === 0) {
- return true
+ return true;
}
if (index === this.list.length - 1) {
- return false
+ return false;
}
- if (this.list[index].createtime.split(' ')[0] === this.list[index + 1].createtime.split(' ')[1]) {
- return false
+ if (
+ this.list[index].createtime.split(" ")[0] ===
+ this.list[index + 1].createtime.split(" ")[1]
+ ) {
+ return false;
}
},
- afterRead(file) { // 文件上传
- this.$toast.loading({ duration: 0 })
+ afterRead(file) {
+ // 文件上传
+ this.$toast.loading({ duration: 0 });
_uploadImage(file, (percent) => {
- console.log(percent)
- }).then(data => {
- this.$toast.clear()
- this.send('img', data)
- }).catch(() => {
- this.$toast.clear()
+ console.log(percent);
})
+ .then((data) => {
+ this.$toast.clear();
+ this.send("img", data);
+ })
+ .catch(() => {
+ this.$toast.clear();
+ });
},
- fetchList(message_id = '') { // 获取消息列表
- otcApi.otcOnlinechatList({
- messageId: message_id,
- orderNo: this.detail.orderNo
- }).then(res => { // this.lastMsgId
- if (!this.lastMsgId) {
- this.lastMsgId = res.data.length && res.data[res.data.length - 1]['id']
- }
- if (res.data.length) {
- if (message_id) { // 加载更多
- this.lastMsgId = res.data[res.data.length - 1]['id']
- this.list = [...res.data.reverse(), ...this.list]
+ fetchList(message_id = "") {
+ // 获取消息列表
+ otcApi
+ .otcOnlinechatList({
+ messageId: message_id,
+ orderNo: this.detail.orderNo,
+ })
+ .then((res) => {
+ // this.lastMsgId
+ if (!this.lastMsgId) {
+ this.lastMsgId =
+ res.data.length && res.data[res.data.length - 1]["id"];
+ }
+ if (res.data.length) {
+ if (message_id) {
+ // 加载更多
+ this.lastMsgId = res.data[res.data.length - 1]["id"];
+ this.list = [...res.data.reverse(), ...this.list];
+ } else {
+ this.list = [...this.list, ...res.data.reverse()];
+ let hash = {};
+ this.list = this.list.reduce(function (preVal, curVal) {
+ hash[curVal.id]
+ ? " "
+ : (hash[curVal.id] = true && preVal.push(curVal));
+ return preVal;
+ }, []);
+ }
+ if (res.data.length < 10) {
+ this.finished = true;
+ }
} else {
- this.list = [...this.list, ...res.data.reverse()]
- let hash = {};
- this.list = this.list.reduce(function (preVal, curVal) {
- hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
- return preVal
- }, []);
+ this.list = [];
}
- if (res.data.length < 10) {
- this.finished = true
+ if (!message_id) {
+ this.clearInterval();
+ this.inter = setInterval(() => {
+ this.fetchList();
+ }, 2000);
}
- } else {
- this.list = []
- }
- if (!message_id) {
- this.clearInterval()
- this.inter = setInterval(() => {
- this.fetchList()
- }, 2000)
- }
- })
-
+ });
},
- onMore() { // 加载更多
- this.fetchList(this.lastMsgId)
+ onMore() {
+ // 加载更多
+ this.fetchList(this.lastMsgId);
},
clearInterval() {
if (this.inter) {
- clearInterval(this.inter)
- this.inter = null
+ clearInterval(this.inter);
+ this.inter = null;
}
},
- send(type = 'text', content = '') { // 发送消息, img 也当消息text
+ send(type = "text", content = "") {
+ // 发送消息, img 也当消息text
if (!content) {
- this.$toast(this.$t('请输入消息内容'))
- return
+ this.$toast(this.$t("请输入消息内容"));
+ return;
}
- otcApi.otcOnlinechat({
- orderNo: this.detail.orderNo,
- type,
- content
- }).then(data => {
- console.log(data)
- this.message = ''
- // document.getElementById('bottom').click()
- this.fetchList()
- setTimeout(() => {
- this.bottomScrollClick()
- },1000)
- // setTimeout(() => {
- // window.scrollTo(0, document.documentElement.scrollHeight)
- // }, 1000)
- })
+ otcApi
+ .otcOnlinechat({
+ orderNo: this.detail.orderNo,
+ type,
+ content,
+ })
+ .then((data) => {
+ console.log(data);
+ this.message = "";
+ // document.getElementById('bottom').click()
+ this.fetchList();
+ setTimeout(() => {
+ this.bottomScrollClick();
+ }, 1000);
+ // setTimeout(() => {
+ // window.scrollTo(0, document.documentElement.scrollHeight)
+ // }, 1000)
+ });
},
bottomScrollClick() {
this.$nextTick(() => {
let scrollEl = this.$refs.mianscroll;
- scrollEl.scrollTo({ top: scrollEl.scrollHeight + 400, behavior: 'smooth' });
+ scrollEl.scrollTo({
+ top: scrollEl.scrollHeight + 400,
+ behavior: "smooth",
+ });
});
- }
+ },
},
beforeDestroy() {
- this.clearInterval()
- }
-}
+ this.clearInterval();
+ },
+};
</script>
<style lang="scss" scoped>
@@ -323,7 +407,7 @@
}
.bg-right {
- background: #1D91FF !important;
+ background: #1d91ff !important;
}
.sell {
@@ -341,7 +425,7 @@
outline: none;
}
}
-.chat-page{
+.chat-page {
overflow: auto;
}
@@ -350,7 +434,7 @@
top: 50%;
transform: translateY(-50%);
}
-.bottom-box{
+.bottom-box {
@include themify() {
background: themed("main_background") !important;
}
--
Gitblit v1.9.3