tra-app/src/pages/sparring/talk.vue

<template>
	<talkCom ref="talkComRef" />
	<ImagePreview class="show-box-avatar" :src="detailInfo.ossAddr" :isCache="true">
	</ImagePreview>
	<view class="show-box">
		<view class="role-info">

			<ImagePreview class="role-avatar" :src="detailInfo.ossAddr" :isCache="true">
			</ImagePreview>
			<view class="role-name">{{ detailInfo.chaName }}</view>
			<view class="title-time">{{ timeShow }}</view>
		</view>
		<view class="body-scene">
			<!-- 场景描述 -->
			{{ detailInfo.sceneDesc }}
		</view>
		<view class="close-btn" @click="closeTalking"></view>
		<!-- phone-icon.png -->
	</view>
</template>
<script setup>
	import {
		onLoad,
		onBackPress
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed
	} from 'vue'
	import talkCom from './talkCom.nvue'
	import {
		queryTraPartnerCharacterInfoById,
		partnerChatReportTrigger
	} from "@/api/sparring.js"
	import ImagePreview from '@/components/image-preview/image-preview.vue';
	import common from '@/common/common';

	const traId = ref('')
	const chaId = ref('')
	const talkingType = ref('')
	const isPreview = ref(false)
	const talkComRef = ref()
	const detailInfo = ref({})
	const getDetailInfo = () => {
		queryTraPartnerCharacterInfoById({
			traId: traId.value,
			chaId: chaId.value
		}).then(res => {
			detailInfo.value = {
				...res.body
			}
			talkComRef.value.prepare({
				traId: traId.value,
				chaId: chaId.value,
				traTyp: talkingType.value
			})
		})
	}
	const timeShow = ref('12:11')
	const closeTalking = () => {
		talkComRef.value.close()
		overTalking()
	}
	const overTalking = () => {
		partnerChatReportTrigger({
			execId: execId.value,
			traId: traId.value,
			talkingType: isPreview.value? 'preview' : 'practice'
		}).then(res=>{
			common.navigateTo('/pages/sparring/result?isOver=1&traId=' 
			+ traId.value 
			+ '&execId=' 
			+ execId.value 
			+ '&type=' 
			+ talkingType.value 
			+ '&isPreview=' 
			+ (isPreview.value ?'1':''))
		})
	}
	onLoad((params) => {
		traId.value = params.traId;
		chaId.value = params.chaId;
		talkingType.value = params.type;
		isPreview.value = params.isPreview === '1'
		getDetailInfo()
	});
	onBackPress((res) => res.from === 'backbutton');
</script>
<style scoped lang="scss">
	.show-box {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(120deg, #333333cc 0%, #666666cc 50%, #333333cc 100%);
		backdrop-filter: blur(10px);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.show-box-avatar {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
	}

	.role-info {
		position: absolute;
		top: calc(var(--status-bar-height) + 240rpx);
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 210rpx;
		text-align: center;
		color: #fff;
		line-height: 58rpx;
		font-size: 38rpx;

		.role-avatar {
			width: 185rpx;
			height: 185rpx;
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
		}

		.role-name {
			margin-bottom: 26rpx;
		}
	}

	.body-scene {
		position: absolute;
		bottom: 280rpx;
		width: calc(100% - 90rpx);
		left: 45rpx;
		padding: 25rpx;
		color: rgba(255, 255, 255, .8);
		border: 2px dashed rgba(255, 255, 255, .3);
		border-radius: 15rpx;
	}

	.close-btn {
		width: 118rpx;
		height: 118rpx;
		// background-color: red;
		background-image: url(@/static/images/sparring/close-talk.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 50%;
		// transform: rotateZ(140deg);
		position: absolute;
		bottom: 112rpx;
		left: 50%;
		margin-left: -59rpx;
	}
</style>