Files
jurong_circle_front_app/pages/program/programDetail.vue
Sun_sun e51649e559 2025-10-24
金融修改
2025-10-24 16:44:01 +08:00

727 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>