<template>
|
<div class="w-full h-full flex flex-col chat-page" ref="mianscroll">
|
<div class="w-full">
|
<order-nav>
|
<template #left>
|
<van-icon name="cross" class="font-700" color="#868D9A" />
|
</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>
|
</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-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>
|
<!-- <span class="block" v-if="time.hours">{{
|
time.hours
|
}}</span>
|
<span class="colon" v-if="time.hours">:</span>
|
<span class="block">{{ time.minutes }}</span>
|
<span class="colon">:</span>
|
<span class="block">{{ time.seconds }}</span> -->
|
</template>
|
<template v-else>
|
<div class="font-40 font-600 c2cColor">{{ fixStrBuy() }}</div>
|
</template>
|
</template>
|
<template v-else>
|
<div class="font-40 c2cColor">{{ fixStrSell() }}</div>
|
</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
|
>
|
</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
|
>
|
</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>
|
<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' : ''"
|
>
|
<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>
|
<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
|
>
|
<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>
|
</ul>
|
</div>
|
</div>
|
<!-- <div class="flex-1 w-full overflow-auto bg-f5">
|
<div class="w-full pt-43">
|
<div class="font-24 text-grey text-center">2022-07-07 20：18：10</div>
|
<div class="px-30 mt-45">
|
<div class="flex items-end">
|
<img class="w-64 h-64 mr-26" src="~@/assets/image/c2c/Group11762.png" alt="">
|
<div class="h-100 pl-38 pr-52 py-32 box-border bg-white sell">{{$t('银行卡三天流水明细截图')}}</div>
|
</div>
|
<div class="flex justify-end mt-58">
|
<div class="buyer bg-blue text-white py-32 px-48">{{$t('误划，取消！')}}</div>
|
</div>
|
</div>
|
</div>
|
</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"
|
>
|
<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('请输入您的消息...')"
|
/>
|
<div class="right-34 chat-icon" @click="send('text', message)">
|
<img class="w-54" src="~@/assets/image/c2c/Vector(1).png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Icon, Button, Uploader, ImagePreview, CountDown } from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import { _uploadImage } from "@/API/fund.api";
|
import otcApi from "@/API/otc.js";
|
|
export default {
|
name: "ChatIndex",
|
props: ["type"], // 标识买家还是卖家
|
components: {
|
[Icon.name]: Icon,
|
[Button.name]: Button,
|
OrderNav,
|
[Uploader.name]: Uploader,
|
[CountDown.name]: CountDown,
|
},
|
data() {
|
return {
|
list: [],
|
lastMsgId: "",
|
finished: false, // 没有历史消息
|
message: "",
|
orderNo: "",
|
detail: {},
|
inter: null,
|
timerData: null,
|
time: "", // 剩余时间
|
};
|
},
|
filters: {
|
format(val) {
|
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;
|
if (this.time > 0) {
|
this.timerData = setInterval(() => {
|
this.time--;
|
if (this.time <= 0) {
|
clearInterval(this.timerData);
|
}
|
}, 2000);
|
}
|
this.fetchList();
|
},
|
methods: {
|
fixStrSell() {
|
let str = "";
|
if (this.detail.state == 0) {
|
str = this.$t("等待买家付款");
|
} else if (this.detail.state == 1) {
|
str = this.$t("请放行");
|
} else if (this.detail.state == 2) {
|
str = this.$t("申诉中");
|
} else if (this.detail.state == 3) {
|
str = this.$t("已完成");
|
} else if (this.detail.state == 4) {
|
str = this.$t("已取消");
|
} else if (this.detail.state == 5) {
|
str = this.$t("已超时");
|
}
|
return str;
|
},
|
fixStrBuy() {
|
let str = "";
|
if (this.detail.state == 1) {
|
str = this.$t("等待卖家放行");
|
} else if (this.detail.state == 2) {
|
str = this.$t("申诉中");
|
} else if (this.detail.state == 3) {
|
str = this.$t("已完成");
|
} else if (this.detail.state == 4) {
|
str = this.$t("已取消");
|
} else if (this.detail.state == 5) {
|
str = this.$t("已超时");
|
}
|
return str;
|
},
|
gotoPay() {
|
if (this.detail.state == 0) {
|
this.$router.push({ path: "/paymentBuy" });
|
}
|
},
|
onOversize(file) {
|
console.log(file);
|
this.$toast(this.$t("文件大小不能超过10m"));
|
},
|
onPreview(url) {
|
// 预览
|
ImagePreview([url]);
|
},
|
showTime(index) {
|
// 时间显示
|
if (index === 0) {
|
return true;
|
}
|
if (index === this.list.length - 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 });
|
_uploadImage(file, (percent) => {
|
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];
|
} 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 = [];
|
}
|
if (!message_id) {
|
this.clearInterval();
|
this.inter = setInterval(() => {
|
this.fetchList();
|
}, 2000);
|
}
|
});
|
},
|
onMore() {
|
// 加载更多
|
this.fetchList(this.lastMsgId);
|
},
|
clearInterval() {
|
if (this.inter) {
|
clearInterval(this.inter);
|
this.inter = null;
|
}
|
},
|
send(type = "text", content = "") {
|
// 发送消息, img 也当消息text
|
if (!content) {
|
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)
|
});
|
},
|
bottomScrollClick() {
|
this.$nextTick(() => {
|
let scrollEl = this.$refs.mianscroll;
|
scrollEl.scrollTo({
|
top: scrollEl.scrollHeight + 400,
|
behavior: "smooth",
|
});
|
});
|
},
|
},
|
beforeDestroy() {
|
this.clearInterval();
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.bg-left {
|
background: #fff !important;
|
}
|
|
.bg-right {
|
background: #1d91ff !important;
|
}
|
|
.sell {
|
border-radius: 10.0022px 10.0022px 10.0022px 0;
|
}
|
|
.buyer {
|
border-radius: 10.0022px 10.0022px 0 10.0022px;
|
//transform: matrix(-1, 0, 0, 1, 0, 0);
|
}
|
|
.chat-input {
|
input {
|
border: none;
|
outline: none;
|
}
|
}
|
.chat-page {
|
overflow: auto;
|
}
|
|
.chat-icon {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.bottom-box {
|
@include themify() {
|
background: themed("main_background") !important;
|
}
|
}
|
</style>
|
