优化页面
This commit is contained in:
pengxiaolong
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="custom">
|
||||
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
|
||||
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
|
||||
<template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
|
||||
<div>
|
||||
<h1>
|
||||
@@ -9,18 +9,14 @@
|
||||
v-if="extension.hyperlinks_text"
|
||||
:href="extension.hyperlinks_text.value"
|
||||
target="view_window"
|
||||
>{{ extension.hyperlinks_text.key }}</a>
|
||||
>{{ extension.hyperlinks_text.key }}</a
|
||||
>
|
||||
</h1>
|
||||
<ul v-if="extension.item && extension.item.length > 0">
|
||||
<li
|
||||
v-for="(item, index) in extension.item"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
v-if="isUrl(item.value)"
|
||||
:href="item.value"
|
||||
target="view_window"
|
||||
>{{ item.key }}</a>
|
||||
<li v-for="(item, index) in extension.item" :key="index">
|
||||
<a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{
|
||||
item.key
|
||||
}}</a>
|
||||
<p v-else>
|
||||
{{ item.key }}
|
||||
</p>
|
||||
@@ -39,10 +35,7 @@
|
||||
:key="index"
|
||||
class="evaluate-list-item"
|
||||
>
|
||||
<Icon
|
||||
:file="star"
|
||||
class="file-icon"
|
||||
/>
|
||||
<Icon :file="star" class="file-icon" />
|
||||
</li>
|
||||
</ul>
|
||||
<article>{{ customData.comment }}</article>
|
||||
@@ -50,13 +43,8 @@
|
||||
</template>
|
||||
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
|
||||
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
|
||||
<div
|
||||
class="order"
|
||||
@click="openLink(customData.link)"
|
||||
>
|
||||
<img
|
||||
:src="customData.imageUrl"
|
||||
>
|
||||
<div class="order" @click="openLink(customData.link)">
|
||||
<img :src="customData.imageUrl" />
|
||||
<main>
|
||||
<h1>{{ customData.title }}</h1>
|
||||
<p>{{ customData.description }}</p>
|
||||
@@ -68,22 +56,27 @@
|
||||
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
|
||||
<div class="textLink">
|
||||
<p>{{ customData.text }}</p>
|
||||
<a
|
||||
:href="customData.link"
|
||||
target="view_window"
|
||||
>{{
|
||||
<a :href="customData.link" target="view_window">{{
|
||||
TUITranslateService.t("message.custom.查看详情>>")
|
||||
}}</a>
|
||||
</div>
|
||||
</template>
|
||||
<!-- `························································标记······················································ -->
|
||||
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.PK">
|
||||
<div class="pk">
|
||||
<h1>{{ customData.title }}</h1>
|
||||
<div class="button-group">
|
||||
<button class="buttonAccept">{{ customData.buttonText1 }}</button>
|
||||
<button class="buttonRefuse">{{ customData.buttonText2 }}</button>
|
||||
<div class="pk" v-if="customData.myitem !== counter.myitem.id">
|
||||
<h1>{{ customData.title }}</h1>
|
||||
<div class="button-group" v-if="customData.btnDisplay === true">
|
||||
<button @click="handleAccept(status.agree, customData)" class="buttonAccept">
|
||||
{{ customData.buttonText1 }}
|
||||
</button>
|
||||
<button @click="handleAccept(status.refuse, customData)" class="buttonRefuse">
|
||||
{{ customData.buttonText2 }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pk" v-else>
|
||||
<h1>{{ customData.mytitle }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
<!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
|
||||
@@ -95,29 +88,44 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watchEffect, ref } from '../../../../adapter-vue';
|
||||
import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
|
||||
import { isUrl, JSONToObject } from '../../../../utils/index';
|
||||
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
|
||||
import { ICustomMessagePayload } from '../../../../interface';
|
||||
import Icon from '../../../common/Icon.vue';
|
||||
import star from '../../../../assets/icon/star-light.png';
|
||||
import { watchEffect, ref } from "../../../../adapter-vue";
|
||||
import { TUITranslateService, IMessageModel } from "@tencentcloud/chat-uikit-engine";
|
||||
import { isUrl, JSONToObject } from "../../../../utils/index";
|
||||
import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
|
||||
import { ICustomMessagePayload } from "../../../../interface";
|
||||
import Icon from "../../../common/Icon.vue";
|
||||
import star from "../../../../assets/icon/star-light.png";
|
||||
import { isEnabledMessageReadReceiptGlobal } from "../../../TUIChat/utils/utils";
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUIChatService,
|
||||
} from '@tencentcloud/chat-uikit-engine';
|
||||
import { useCounterStore } from '@/stores/counter'
|
||||
const counter = useCounterStore()
|
||||
} from "@tencentcloud/chat-uikit-engine";
|
||||
import { useCounterStore } from "@/stores/counter";
|
||||
import request from "@/components/request";
|
||||
import { Message } from "@tencentcloud/chat";
|
||||
// import message from '@tencentcloud/chat-uikit-uniapp/locales/en/message';
|
||||
const counter = useCounterStore();
|
||||
|
||||
const status = { agree: 1, refuse: 2 };
|
||||
|
||||
interface Props {
|
||||
messageItem: IMessageModel;
|
||||
content: any;
|
||||
}
|
||||
//```````````````````````````````````````````````````
|
||||
// TUIChatService.getMessageList().then(() => {
|
||||
|
||||
// });
|
||||
|
||||
function handleAccept(status: number, customData: ICustomMessagePayload) {
|
||||
console.log(custom.value);
|
||||
console.log(message.value);
|
||||
message.value.payload.title = "Hello Tencent";
|
||||
TUIChatService.modifyMessage(message.value).then((res) => {
|
||||
console.log(res);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//```````````````````````````````````````````````````
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
messageItem: undefined,
|
||||
@@ -128,14 +136,13 @@ const custom = ref();
|
||||
const message = ref<IMessageModel>();
|
||||
const extension = ref();
|
||||
const customData = ref<ICustomMessagePayload>({
|
||||
businessID: '',
|
||||
businessID: "",
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
custom.value = props.content;
|
||||
message.value = props.messageItem;
|
||||
const { payload } = props.messageItem;
|
||||
customData.value = payload.data || '';
|
||||
customData.value = payload.data || "";
|
||||
customData.value = JSONToObject(payload.data);
|
||||
if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
|
||||
extension.value = JSONToObject(payload.extension);
|
||||
@@ -145,9 +152,7 @@ const openLink = (url: any) => {
|
||||
window.open(url);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../assets/styles/common";
|
||||
|
||||
@@ -214,56 +219,55 @@ a {
|
||||
height: 67px;
|
||||
}
|
||||
}
|
||||
// `````````````````````````````````````````````````````````````````````
|
||||
.pk{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
h1{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group{
|
||||
// `````````````````````````````````````````````````````````````````````
|
||||
.pk {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.buttonAccept{
|
||||
width: 40%;
|
||||
height: 60rpx;
|
||||
background-color: #84ff0055;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #26ff00;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttonRefuse{
|
||||
width: 40%;
|
||||
height: 60rpx;
|
||||
background-color: #ff000078;
|
||||
border: 2px solid #ff0000;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.buttonAccept {
|
||||
width: 40%;
|
||||
height: 60rpx;
|
||||
background-color: #84ff0055;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #26ff00;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttonRefuse {
|
||||
width: 40%;
|
||||
height: 60rpx;
|
||||
background-color: #ff000078;
|
||||
border: 2px solid #ff0000;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//``````````````````````````````````````````````````````````````````````````````````
|
||||
//``````````````````````````````````````````````````````````````````````````````````
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user