You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

420 lines
9.5 KiB

3 years ago
<template>
<!--pages/demandHall/applyDetail/index.wxml-->
<view class="applyDetail-page">
<view class="top-box">
<view class="company-card-box acea-row-nowrap">
<image :src="detail.resourceInfo.logo" class="company-logo" mode="aspectFill"></image>
<view class="info">
<view class="company-name line1">{{detail.resourceInfo.name}}</view>
<view class="tags-box">
<view class="tag-item">网站建设</view>
</view>
<view class="slogan">{{detail.resourceInfo.content}}</view>
</view>
</view>
</view>
<view class="content-box acea-row">
<view class="content-l">
<scroll-view style="height:100%;" scroll-y="true" :scroll-into-view="toView">
<view v-for="(item, index) in userList" :key="index" :class="'l-item ' + (active == index ? 'l-item-a' : '')" @tap="itemClick" :data-i="index" :data-id="item.communicateId">
<view class="headerImg-box">
<image :src="item.headImg"></image>
</view>
</view>
</scroll-view>
</view>
<view class="content-r">
<view class="copany-info-box">
<view class="c-name">
<text>{{content.name}}</text>
</view>
<view class="apply-word">{{content.demandInfo.content}}</view>
<view class="need-item" v-if="content.demandInfo" @tap="toNeedDetail" :data-id="content.demandInfo.resourceId">
<view class="n-title-box acea-row row-between row-middle">
<view class="word line1">{{content.demandInfo.name}}</view>
<view class="colO">详情</view>
</view>
<view class="n-tags acea-row">
<view class="n-tag-item">场地租赁</view>
</view>
<view class="price-box acea-row row-between row-middle">
<view>需求预算 <text class="colO">{{content.demandInfo.budget}}</text></view>
<view>{{content.createTime}}</view>
</view>
</view>
<view class="need-item" v-if="content.projectListDto != null" @tap="toCreateProject">
<view class="n-title-box acea-row row-between row-middle">
<view class="word line1">{{content.projectListDto.projectName}}</view>
<view class="colO">详情</view>
</view>
<view class="n-tags acea-row">
<view class="n-tag-item">场地租赁</view>
</view>
<view class="price-box acea-row row-between row-middle">
<view class="desc line1">{{content.projectListDto.partner}}</view>
<view>{{content.createTime}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="btn-box acea-row row-right">
<view class="btn-item bgO" @tap="createProject" v-if="content.haveRight">发起项目</view>
<view class="btn-item bgO" @tap="call" v-if="content.comminuteState == 2">立即沟通</view>
<view class="btn-item" @tap="cancelClick" v-if="content.comminuteState == 1">忽略</view>
<view class="btn-item" v-if="content.comminuteState == 4">项目已取消</view>
</view>
</view>
</template>
<script>
// pages/demandHall/applyDetail/index.js
const app = getApp();
export default {
data() {
return {
active: 0,
detail: [],
userList: [],
communicateId: '',
content: null,
toView: ""
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let data = JSON.parse(decodeURIComponent(options.data));
this.setData({
detail: data
});
this.getUserList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.getApplyDetail();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
itemClick(e) {
let i = e.currentTarget.dataset.i;
let id = e.currentTarget.dataset.id;
this.setData({
active: i,
communicateId: id
});
this.getApplyDetail();
},
getApplyDetail() {
app.http('get', 'Communicate/getCommunicateInfo', {
communicateId: this.communicateId
}).then(res => {
if (res.data.success) {
this.setData({
content: res.data.data
});
uni.stopPullDownRefresh();
}
});
},
getUserList() {
// console.log(this.data.detail)
app.http('get', 'Communicate/communicateHeadList', {
resourceId: this.detail.resourceInfo.resourceId
}).then(res => {
if (res.data.success) {
this.setData({
userList: res.data.data,
communicateId: res.data.data[0].communicateId
});
this.getApplyDetail();
}
});
},
toNeedDetail(e) {
let id = e.currentTarget.dataset.id;
uni.navigateTo({
url: '/pages/demandHall/needsDetail/index?id=' + id
});
},
//查看立项书
toCreateProject() {
let content = this.content;
uni.navigateTo({
url: '/pages/demandHall/createProject/index?state=' + content.comminuteState + '&id=' + content.communicateId
});
},
// 立项
createProject() {
let id = this.communicateId;
uni.showModal({
title: "提示!",
content: '是否确认发起项目?',
success(res) {
if (res.confirm) {
uni.navigateTo({
url: '/pages/demandHall/createProject/index?id=' + id
});
}
}
});
},
call() {
console.log();
uni.makePhoneCall({
phoneNumber: this.content.phone
});
},
//忽略
cancelClick() {
let content = this.content;
uni.showModal({
title: "提示",
content: '是否确认忽略该申请',
success: res => {
if (res.confirm) {
app.http('GET', 'Communicate/cancelCommunicates', {
communicateId: content.communicateId
}).then(result => {
if (result.data.success) {
uni.showToast({
title: '操作成功',
duration: 1500
});
setTimeout(() => {
this.getUserList();
}, 1500);
}
});
}
}
});
}
}
};
</script>
<style>
/* pages/demandHall/applyDetail/index.wxss */
page{
width: 100%;
height: 100%;
}
.applyDetail-page{
height: 100%;
}
.top-box{
width: 100%;
padding: 40rpx 40rpx 62rpx;
background: linear-gradient(180deg, #FF5100 0%, #FFA782 100%);
}
.company-card-box {
width: 100%;
padding: 30rpx 12rpx;
background: #FFFFFF;
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
border-radius: 12rpx;
}
.info{
width: 70%;
}
.company-logo{
width: 154rpx;
height: 154rpx;
margin-right: 20rpx;
}
.company-name{
font-size: 28rpx;
line-height: 56rpx;
font-weight: 500;
color: #1D1D1D;
}
.slogan{
font-size: 24rpx;
line-height: 34rpx;
color: #666;
margin: 4rpx 0 12rpx;
}
.tags-box{
margin: 6rpx 0 10rpx;
}
.tag-item{
width: 112rpx;
height: 36rpx;
line-height: 34rpx;
text-align: center;
border: 1rpx solid #FFAA00;
color: #FFAA00;
border-radius: 4rpx;
margin-right: 8rpx;
font-size: 24rpx;
}
.content-box{
width: 100%;
height: calc(100% - 490rpx);
overflow: hidden;
}
.content-l{
width: 152rpx;
height: 100%;
padding-left: 22rpx;
background: #EEEEEE;
overflow: hidden;
}
.l-item{
width: 100%;
height: 136rpx;
display: flex;
align-items: center;
justify-content: center;
}
.headerImg-box{
width: 92rpx;
height: 92rpx;
border-radius: 8rpx;
overflow: hidden;
position: absolute;
}
.headerImg-box image{
width: 100%;
height: 100%;
}
.l-item-a{
background: #fff;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.content-r{
width: calc(100% - 152rpx);
padding: 46rpx 30rpx;
font-size: 28rpx;
}
.apply-word{
color: #666;
line-height: 44rpx;
margin-top: 24rpx;
}
.btn-box{
width: 100%;
height: 160rpx;
padding-top: 24rpx;
position: absolute;
bottom: 0;
}
.btn-item{
width: 190rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
font-size: 32rpx;
color: #fff;
font-weight: 400;
background: #BFBFBF;
border-radius: 12rpx;
margin-right: 16rpx;
}
.bgO{
background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%);
}
.need-item{
width: 100%;
padding: 10rpx 0;
background: #FFFFFF;
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
border-radius: 12rpx;
margin: 32rpx 0;
}
.n-title-box{
padding: 0 26rpx 10rpx;
font-size: 28rpx;
color: #1D1D1D;
margin: 16rpx 0 12rpx;
border-bottom: 2px solid #E2E2E2;
}
.word{
width: 340rpx;
font-size: 28rpx;
}
.colO{
color: #FF5100;
font-size: 500;
}
.n-tags{
padding: 0 26rpx;
margin-bottom: 10rpx;
}
.n-tag-item{
width: 112rpx;
height: 36rpx;
line-height: 34rpx;
text-align: center;
border: 1rpx solid #FFAA00;
color: #FFAA00;
border-radius: 4rpx;
margin-right: 8rpx;
font-size: 24rpx;
}
.bgG{
border: 1rpx solid #3A9EFA;
color: #3A9EFA;
}
.bgR{
border: 1rpx solid #FC9367;
color: #FC9367;
}
.price-box{
color: #707070;
padding: 0 20rpx;
}
.desc{
width: 370rpx;
}
</style>