jurong_circle_front_app/pages/program/programDetail.vue

<template>
	<scroll-view class="detail-contrainer" scroll-y="true">
		<u-navbar :is-fixed="false" title="项目详情" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#fff" title-color="#fff">
			<template v-slot:right>
				<image @click="handleCollect" class="collection"
					:src="isCollect?'/static/icon/Bookmark-active.png':'/static/icon/Bookmark.png'" mode=""></image>
			</template>
		</u-navbar>

		<view class="head-text">
			<view class="text-name">
				{{program.name}}
			</view>
			<view class="text-date">
				起止时间：{{program.startDate}}至{{program.endDate}}
			</view>
			<view class="text-progress">
				项目进度
				<u-line-progress :show-percent="false" class="progress-line" active-color="#65AD72" height="8"
					:percent="70"></u-line-progress>
				1980/2505
			</view>
		</view>

		<view class="card u-m-t-10">
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">所在地</u-col>
				<u-col span="6" class="card-value">浙江-杭州</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">详细地址</u-col>
				<u-col span="6" class="card-value">{{program.address}}</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">联系人</u-col>
				<u-col span="6" class="card-value">{{program.user.username}}</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">结算方式</u-col>
				<u-col span="6" class="card-value">{{program.paymentMethod}}</u-col>
			</u-row>
			<u-row>
				<u-col span="6" class="card-name">项目企业</u-col>
				<u-col span="6" class="card-value">{{program.company}}</u-col>
			</u-row>
		</view>

		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				项目简介<span></span>
			</view>
			<view class="u-m-t-10 editor-content-view">
				<view v-html="program.introduction"></view>
			</view>
		</view>

		<!-- 		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				项目需求<span>（4）</span>
			</view>
			<view class="card-body">
				<u-row class="sub-title u-m-b-20">
					<u-col span="12">需求名称</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">规格</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">限价</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">时间</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row>
					<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
			</view>
		</view>

		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				投资动态
			</view>
			<view class="card-body">
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
					<u-col span="6" class="card-value">2025-09-13</u-col>
				</u-row>
				<u-row>
					<u-col span="6" text-align="left" class="card-name">参与单位</u-col>
					<u-col span="6" class="card-value">5家</u-col>
				</u-row>
			</view>
		</view> -->

		<u-row justify="flex-end" class="u-m-r-40 btn-group">
			<u-col span="3"><u-button class="btn" type="primary"
					@click="handleChat">{{isChat?"继续聊":"聊一聊"}}</u-button></u-col>
			<u-col span="3"><u-button class="btn" type="success" @click="handleOpen">立刻融</u-button></u-col>
		</u-row>

		<view class="change-next u-m-t-60">
			<u-link @click="handleChange">不感兴趣？换一个</u-link>
		</view>

		<!-- 占位 -->
		<view style="height: 20rpx;">
		</view>


		<u-modal v-model="showWarning" border-radius="20" ref="warningRef" :mask-close-able="true"
			:show-confirm-button="false" :show-title="false">
			<view class="slot-content">
				<image class="dialog-icon" src="/static/icon/ring.png" mode=""></image>
				<image @click="handleClose" class="dialog-close" src="/static/icon/close.png" mode=""></image>
				<view class="dialog-title">温馨提示</view>
				<view class="dialog-content">
					<view>请务必仔细核对您的投资所选项目，以免发生误选</view>
					<u-checkbox v-model="is_agree" style="margin-top: 20rpx;" icon-size="25" :label-disabled="true"
						label-size="20">
						<div @click="openFile">协议内容《协议123》</div>
					</u-checkbox>
					<view class="err-msg" v-if="showErrMsg">
						请先勾选协议内容
					</view>
				</view>
				<u-button @click="handleChose" type="primary" shape="circle" class="dialog-btn">确认选择</u-button>
			</view>
		</u-modal>

		<u-modal v-model="showFile" border-radius="20" :show-confirm-button="false" :show-title="false">
			<view class="file-content">
				<view class="file-title">
					协议内容
				</view>
				<scroll-view class="file-main" scroll-y="true">
					<view class="text">
						在您同意前述协议并开始使用我们的服务之前，我们恳请您仔细阅读以下核心约定条款的摘要。本摘要旨在帮助您更好地理解您的权利和义务，但最终法律效力以完整的《用户协议》和《隐私政策》文本为准。<br />
						1. 账户与注册<br />
						您承诺注册时提供真实、准确、完整的信息，并及时更新。您应对您的账户安全和所有活动承担全部责任。<br />
						2. 用户行为规范<br />
						您同意遵守所有适用的法律法规，并承诺不会利用我们的服务进行任何非法、侵权或违反公序良俗的活动。<br />
						禁止的行为包括但不限于：传播病毒、发送垃圾信息、侵犯他人知识产权、进行未经授权的广告或推销、干扰服务的正常运行等。<br />
						3. 隐私与数据保护<br />
						我们将严格按照《隐私政策》收集、使用、存储和保护您的个人信息。您的个人信息可能用于：提供和优化服务、与您沟通、进行安全验证、以及根据政策进行的内部分析与广告推送。<br />
						我们可能会使用Cookies和类似技术来提升您的用户体验。<br />
						在法律法规要求或为提供服务所必需的情况下，您的信息可能会被分享给我们的关联公司或可信的第三方合作伙伴。<br />
						4. 知识产权<br />
						服务中包含的所有内容（包括但不限于文本、图形、logo、软件、音频、视频等）的知识产权均归我们或我们的许可方所有。<br />
						在遵守协议条款的前提下，我们授予您有限的、非排他的、不可转让的许可，以使用我们提供的服务。<br />
						5. 免责声明与责任限制<br />
						服务将按“现状”和“可用”提供。我们不承诺服务绝对无中断、及时、安全或无误。<br />
						在法律允许的最大范围内，我们不对因使用服务而导致的任何间接、偶然、特殊或后果性损害承担责任。<br />
						6. 协议的变更与终止<br />
						我们保留随时修改《用户协议》和《隐私政策》的权利。变更将通过适当渠道（如网站公告、邮件通知等）公布。若您在新条款生效后继续使用服务，即表示您接受变更后的协议。<br />
						您或我们均有权根据协议规定终止服务。<br />
						7. 适用法律与争议解决<br />
						本协议的解释与执行均适用中华人民共和国法律。<br />
						因本协议引起的或与之相关的任何争议，双方应首先尝试友好协商解决；协商不成的，任何一方均有权将争议提交至本协议签订地（通常为公司住所地）有管辖权的人民法院诉讼解决。<br />
						8. 其他<br />
						如果您是未成年人，请在法定监护人的陪同下阅读并判断是否同意本协议。<br />
					</view>
				</scroll-view>
				<view class="btn-group">
					<u-button @click="handleDisagree" class="btn" style="background: #CADBFF;" hover-class="none"
						shape="circle">不同意</u-button>
					<u-button @click="handleAgreeFile" class="btn" style="background: #7B99FF;" hover-class="none"
						shape="circle">同意并继续</u-button>
				</view>
			</view>
		</u-modal>

		<u-toast ref="pdMsgRef" />
	</scroll-view>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue';
	import {
		getUserInfo
	} from '../../util/common';
	import {
		programAPI
	} from '../../api/program';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		groupAPI
	} from '../../api/group';
	// #ifdef APP 
	import '@/static/css/wangeditor.css'
	// #endif

	const pdMsgRef = ref()

	const userId = ref()
	const programId = ref()
	const isChat = ref(false)
	const program = ref({
		name: '',
		linkmanId: '',
		company: '',
		introduction: '',
		address: '',
		startDate: '',
		endDate: '',
		paymentMethod: '',
		remark: '',
		createDate: '',
		user: {}
	})
	const isCollect = ref(false)

	// 是否收藏项目
	const isCollectMethod = () => {
		let params = {
			programId: programId.value,
			userId: userId.value
		}
		programAPI.isCollect(params).then(res => {
			if (res.code == 200) {
				isCollect.value = res.data.isCollect
			} else {
				pdMsgRef.value.show({
					title: res.msg,
					type: 'error'
				})
			}
		})
	}

	// 收藏项目
	const handleCollect = () => {
		let data = {
			programId: programId.value,
			userId: userId.value
		}
		if (isCollect.value) {
			programAPI.unCollect(data).then(res => {
				if (res.code == 200) {
					isCollect.value = false
					pdMsgRef.value.show({
						title: "取消收藏",
						type: 'success'
					})
				} else {
					pdMsgRef.value.show({
						title: res.msg,
						type: 'error'
					})
				}
			})
		} else {
			programAPI.collect(data).then(res => {
				if (res.code == 200) {
					isCollect.value = true
					pdMsgRef.value.show({
						title: "收藏成功",
						type: 'success'
					})
				} else {
					pdMsgRef.value.show({
						title: res.msg,
						type: 'error'
					})
				}
			})
		}
	}

	const loadData = () => {
		programAPI.isChat({
			userId: userId.value,
			programId: programId.value
		}).then(res => {
			if (res.code == 200) {
				isChat.value = res.data.isChat
			}
		})
		programAPI.getProgram(programId.value).then(res => {
			program.value = res.data
			// 解决上传视频宽度问题
			program.value.introduction = program.value.introduction.replace(
				/<video([^>]*)width\s*=\s*["'][^"']*["']([^>]*)>/gi,
				'<video$1width="100%"$2>'
			);

			// 同时确保没有width属性的video也设置宽度
			program.value.introduction = program.value.introduction.replace(
				/<video((?!(width))[^>]*)>/gi,
				'<video width="100%" $1>'
			);
		})
	}
	onLoad((val) => {
		programId.value = val.programId
		let user = getUserInfo()
		userId.value = user.id
	})

	onMounted(() => {
		isCollectMethod()
		loadData()
	})

	const handleChat = () => {
		if (isChat.value) {
			// 继续聊
			groupAPI.getOne({
				programId: programId.value,
				userId: userId.value
			}).then(res => {
				if (res.code == 200) {
					// 进入聊天
					uni.redirectTo({
						url: '/pages/message/chat?groupId=' + res.data.groupId
					})
				}
			})
		} else {
			// 开启群组聊天
			groupAPI.add({
				programId: programId.value,
				userId: userId.value
			}).then(res => {
				if (res.code == 200) {
					// 创建成功，进入聊天
					uni.redirectTo({
						url: '/pages/message/chat?groupId=' + res.data.groupId
					})
				} else {
					pdMsgRef.value.show({
						title: res.msg,
						type: 'error'
					})
				}
			})
		}
	}


	// 立刻融 弹窗
	const showWarning = ref(false)
	const showErrMsg = ref(false)
	const is_agree = ref(false)

	// 立刻融 打开弹窗
	const handleOpen = () => {
		is_agree.value = false
		showErrMsg.value = false
		showWarning.value = true
	}

	// 立刻融 关闭弹窗
	const handleClose = () => {
		showWarning.value = false
		showErrMsg.value = false
		is_agree.value = false
	}

	// 立刻融 确认选择
	const handleChose = () => {
		if (!is_agree.value) {
			showErrMsg.value = true
			return
		}
		// TODO 同意协议
		pdMsgRef.value.show({
			title: '立刻融',
			type: 'success'
		})
		showWarning.value = false
	}

	const showFile = ref(false)

	// 打开协议弹窗
	const openFile = () => {
		showFile.value = true
		showWarning.value = false
	}

	// 不同意协议
	const handleDisagree = () => {
		showFile.value = false
		showWarning.value = true
	}

	// 同意协议
	const handleAgreeFile = () => {
		is_agree.value = true
		showFile.value = false
		showWarning.value = true
	}

	// 不感兴趣，换一个
	const handleChange = () => {
		const params = {
			userId: userId.value,
			programId: programId.value
		}
		programAPI.randomNext(params).then(res => {
			if (res.code == 200) {
				const nextPid = res.data.id
				uni.redirectTo({
					url: '/pages/program/programDetail?programId=' + nextPid
				})
			} else {
				pdMsgRef.value.show({
					title: res.msg,
					type: 'error'
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	// @import "../../static/fontsFamily/ht.css";
	// @import "../../static/fontsFamily/fs.css";
	// @import "../../static/fontsFamily/kt.css";
	// @import "../../static/fontsFamily/bkt.css";
	// @import "../../static/fontsFamily/hwfs.css";
	// @import "../../static/fontsFamily/hwkt.css";
	// @import "../../static/fontsFamily/st.css";
	// @import "../../static/fontsFamily/wryh.css";
	.detail-contrainer {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);

		.collection {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.head-text {
			color: #fff;
			margin: 0 80rpx;

			.text-name {
				font-family: SF Pro;
				font-weight: 400;
				font-style: Regular;
				font-size: 32rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;
			}

			.text-date {
				font-family: SF Pro;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;
			}

			.text-progress {
				font-family: SF Pro;
				font-weight: 30;
				font-style: Expanded Ultralight;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;

				display: flex;
				align-items: center;
				white-space: nowrap;

				.progress-line {
					margin: 0 10rpx;
				}
			}
		}

		.card {
			margin: 0 40rpx 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.card-title {
				display: flex;
				align-items: center;
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 24rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #000;

				.icon {
					width: 38rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				span {
					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 24rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					color: #8F8F8F;
				}
			}

			.card-body {
				margin-top: 20rpx;
				background: #E9EEF8;
				border-radius: 16rpx;
				padding: 20rpx;

				.sub-title {
					font-family: Inter;
					font-weight: 600;
					font-style: Semi Bold;
					font-size: 24rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: 0%;

				}
			}

			.card-name {
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #8F8F8F;
			}

			.card-value {
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #2A2A2A;
			}
		}

		.change-next {
			text-align: center;
		}

		// 按钮设置
		.btn-group {
			font-family: Work Sans;
			font-weight: 400;
			font-style: Regular;
			font-size: 28rpx;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: -2%;

			.btn {
				height: 56rpx;
			}
		}

		// 提示框
		.slot-content {
			height: 420rpx;
			background: radial-gradient(118.57% 118.57% at 50% -18.57%, rgba(255, 255, 255, 0) 0%, #FFFFFF 61.13%),
				linear-gradient(270deg, #65D1FF 5.45%, #FF68DE 108.14%);

			.dialog-icon {
				width: 181rpx;
				height: 142rpx;
				transform: translate(26rpx, -48rpx);
				// translate: 26rpx;
			}

			.dialog-close {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top: 14rpx;
				right: 28rpx;
			}

			.dialog-title {
				font-family: SF Pro;
				font-weight: 700;
				font-style: Expanded Bold;
				font-size: 32rpx;
				leading-trim: NONE;
				line-height: 48rpx;
				letter-spacing: 10%;
				-webkit-text-stroke: 4rpx transparent;
				background: #fff;
				-webkit-background-clip: text;
				position: absolute;
				top: 54rpx;
				left: 0;
				right: 0;
				text-align: center;
				color: linear-gradient(180deg, #2A2A2A 0%, #737373 59.62%, #2A2A2A 100%);
			}

			.dialog-content {
				padding: 0 80rpx;
				font-family: Work Sans;
				font-weight: 700;
				font-style: Regular;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 40rpx;
				letter-spacing: 4%;

				.err-msg {
					margin-top: 10rpx;
					font-family: Work Sans;
					font-weight: 100;
					font-style: Thin;
					font-size: 16rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					color: #FF5B5B;

				}
			}

			.dialog-btn {
				margin-top: 20rpx;
				width: 168rpx;
				height: 54rpx;
				font-size: 26rpx;
			}
		}

		// 协议
		.file-content {
			background: linear-gradient(180deg, #CADBFF 0%, #FFFFFF 100%);
			padding: 16rpx 32rpx 32rpx;

			.file-title {
				font-family: SF Pro;
				font-weight: 700;
				font-style: Expanded Bold;
				font-size: 24rpx;
				leading-trim: NONE;
				line-height: 48rpx;
				letter-spacing: 10%;
				-webkit-text-stroke: 8rpx transparent;
				font-style: italic;
				background: #fff;
				-webkit-background-clip: text;
				text-align: center;
				color: linear-gradient(180deg, #2A2A2A 0%, #737373 59.62%, #2A2A2A 100%);
			}

			.file-main {
				margin-top: 10rpx;
				// padding: 20rpx;
				background-color: #fff;
				height: 262rpx;
				border-radius: 10rpx;

				.text {
					margin: 10rpx 20rpx;
					font-family: Work Sans;
					font-weight: 700;
					font-style: Regular;
					font-size: 12rpx;
					leading-trim: NONE;
					line-height: 20rpx;
					letter-spacing: 4%;
				}
			}

			.btn-group {
				margin-top: 20rpx;
				display: flex;

				.btn {
					padding: 4rpx 20rpx;

					font-family: Work Sans;
					font-weight: 700;
					font-style: Regular;
					font-size: 12rpx;
					leading-trim: NONE;
					line-height: 20rpx;
					letter-spacing: 4%;
					color: #fff;
				}

			}
		}
	}
</style>