frontend-app/pages/rwa_package/dongjian/check.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="查看合同" />
		<view class="contract-view">
			<view class="top-info flex-r-lr">
				<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/he.png"></image>
				<view class="right-view">
					<text class="text-36 text-zu">{{ obj.contractName }}</text>
					<view class="bottom-panel">
						<view class="flex-r-lr mt-24" v-for="(item, index) in dataList" :key="dataList.value">
							<text class="text-fu text-24">{{ item.text }}</text>
							<view class="list-right">
								<text class="text-24" :class="{ 'text-lu': index == 0, 'text-zu': index != 0 }">{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<text class="text-zu text-32 mt-32" style="margin-left:38rpx">合同签约人信息</text>
			<view class="bottom">
				<view class="bottom-lsit" v-for="(item, index) in bottomList" :key="item.value">
					<text class="text-24 text-fu" style="min-width:184rpx;display: inline-block;">{{ item.text }}</text>
					<text class="text-24 text-zu">{{ item.value }}</text>
				</view>
			</view>
			<view class="bottom-btn">

				<view class="right-btn flex-c" @click="onOpen">
					<text class="text-white text-32">下载合同</text>
				</view>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import ContractItem from './components/contract-item.vue'
import { getContractList, fileUrls } from '@/api/contract.js'
import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe, ContractItem },
	data() {
		return {
			dataList: [
				{ text: '合同状态', value: '签约完成' },
				{ text: '合同编号', value: '' },
				{ text: '发起方', value: '信任桥（深圳）网络科技有限公司' },
				{ text: '发起时间', value: '' },
				{ text: '完成时间', value: '' },
			],
			bottomList: [
				{ text: '签约人', value: '信任桥会员 章三' },
				{ text: '状态', value: '已签署' },
				{ text: '时间', value: '2025-08-11 12:00:00' },
			],
			obj: null,
			url: ''
		};
	},
	onLoad(option) {
		this.init();
	},
	methods: {
		init() {
			this.isSignContract()
		},
		getfileUrls() {
			let params = {
				businessType: 'FLOW',
				businessIds: [this.obj.flowId]
			}
			fileUrls(params).then(res => {
				if (res.bizcode == 100) {
					this.url = res.data.fileUrls[0].url;
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
				}
			})
		},
		isSignContract() {

			getContractList().then(res => {
				if (res.bizcode == 100) {
					this.obj = JSON.parse(JSON.stringify(res.data[0]));
					this.obj.time = func.formatDate(new Date(res.data[0].signatureTime), 2);
					this.obj.details.startTime = func.formatDate(new Date(res.data[0].details.startTime), 2);
					this.obj.details.endTime = func.formatDate(new Date(res.data[0].details.endTime), 2);
					// this.dataList[2].value = this.obj.flowId;

					this.dataList[0].value = this.obj.state ? '已签署' : '未签署';
					this.dataList[1].value = this.obj.flowId;
					this.dataList[3].value = this.obj.details.startTime;
					this.dataList[4].value = this.obj.details.endTime;
					this.bottomList[0].value = this.obj.signatureName;
					this.bottomList[1].value = this.obj.state ? '已签署' : '未签署';
					this.bottomList[2].value = this.obj.time;
					this.getfileUrls();
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
				}
			})
		},
		onOpen() {
			// #ifdef APP-PLUS
			uni.downloadFile({
				url: this.url,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (res) => {
								uni.openDocument({
									filePath: res.savedFilePath,
									success: (res) => {
										console.log('打开文档成功')
									}
								})
							}
						})
					}
				}
			})
			// #endif
			// #ifdef H5
			window.open(this.url, '_blank')
			// #endif
		},

	}
}
</script>

<style lang="scss" scoped>
.contract-view {
	width: 100%;
	height: calc(100% - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	// padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;

	.bottom-btn {
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 80rpx;
		flex-direction: row;
		justify-content: center;

		.left-btn {
			width: 48%;
			background: #E4D6FD;
			border-radius: 8rpx;
		}

		.right-btn {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: linear-gradient(270deg, #B164FB 0%, #7934F6 100%);
			border-radius: 8rpx;
		}
	}

	.bottom {
		display: flex;
		padding: 40rpx 46rpx;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 24rpx;
		background-color: #fff;
		width: 100%;
		min-height: 216rpx;
	}

	.top-info {
		width: 100%;
		min-height: 440rpx;
		padding: 68rpx 32rpx 64rpx;
		box-sizing: border-box;
		background-color: #fff;

		.right-view {
			height: 100%;
			flex: 1;
			flex-direction: column;
			display: flex;
			margin-left: 46rpx;

			.bottom-panel {
				width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;

				.list-right {
					width: 255rpx;
					margin-left: 25rpx;
					word-break: break-all;
					display: flex;
				}
			}
		}

		image {
			width: 200rpx;
			height: 260rpx;
		}

	}
}
</style>