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.
592 lines
15 KiB
592 lines
15 KiB
<template> |
|
<!--pages/demandHall/createProject/index.wxml--> |
|
<view class="createProject-page"> |
|
<view class="resource-info-box"> |
|
<view class="title">资源信息</view> |
|
<view class="company-card-box acea-row-nowrap"> |
|
<image :src="projectInfo.projectResource.logo" class="company-logo" mode="aspectFill"></image> |
|
<view class="info"> |
|
<view class="company-name line1">{{projectInfo.projectResource.name}}</view> |
|
<view class="tags-box"> |
|
<view class="tag-item">网站建设</view> |
|
</view> |
|
<view class="slogan">{{projectInfo.projectResource.content}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="project-name-box"> |
|
<view class="title">项目名称</view> |
|
<view class="inp-box" v-if="state == 1 || !state"> |
|
<input type="text" placeholder="请填写项目名称" :value="projectName" @input="inpChange" data-t="n"> |
|
</view> |
|
<view v-if="state == 3 || state == 2">{{projectName}}</view> |
|
</view> |
|
<view class="project-name-box"> |
|
<view class="title acea-row row-middle">项目编号 <view class="num">{{projectInfo.projectCode}}</view></view> |
|
</view> |
|
<view class="project-name-box"> |
|
<view class="title acea-row row-middle"> |
|
<text>合作模式</text> |
|
<view class="mode-box acea-row"> |
|
<view v-for="(item, index) in modeList" :key="index" :class="'mode-item ' + (modeActive == item.id ? 'mode-item-a' : '')" :data-id="item.id" :data-nums="item.stageNums" @tap="modeClick">{{item.name}}</view> |
|
</view> |
|
</view> |
|
<view class="mode-detail"> |
|
<view class="m-tit">合作规则-定金尾款模式</view> |
|
<text>{{modeList[modeActive - 1].content}}</text> |
|
</view> |
|
</view> |
|
<view class="project-name-box"> |
|
<view class="title acea-row row-middle">交付成果</view> |
|
<view class="area-box" :style="projectId ? 'background:#fff;border:4rpx solid #EEEEEE;' : ''"> |
|
<view class="p-title acea-row row-middle"> |
|
<view>总金额</view> |
|
<input type="text" :disabled="state != 0" :value="totalMoney" @input="inpChange" data-t="t"> |
|
<text>元</text> |
|
</view> |
|
<textarea placeholder="请描述交付成果" :disabled="state != 0" class="area" :value="resultContent" @input="inpChange" data-t="c"></textarea> |
|
<view clsas="progress-box" v-if="modeActive > 1"> |
|
<view v-for="(mode, index) in stageResultsDtoList" :key="index" class="progress-item"> |
|
<view class="p-title acea-row row-middle"> |
|
<view>阶段{{index+1}}</view> |
|
<input type="text" :value="mode.money" :disabled="state != 0" @input="changePrice" :data-i="index"> |
|
<text>元</text> |
|
</view> |
|
<input type="text" class="desc" placeholder="本阶段将提供。" :disabled="state != 0" :value="mode.content" @input="changeContent" :data-i="index"> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <view class="project-name-box"> |
|
<view class="title acea-row row-middle">项目资金</view> |
|
<view class="item acea-row row-between row-middle"> |
|
<view class="label">总金额</view> |
|
<view class="item-r acea-row row-between row-middle"> |
|
<input type="text" placeholder="请输入总金额" /> |
|
<text>元</text> |
|
</view> |
|
</view> |
|
<view class="item acea-row row-between row-middle"> |
|
<view class="label">定金</view> |
|
<view class="item-r acea-row row-between row-middle"> |
|
<input type="text" placeholder="请输入总定金" /> |
|
<text>元</text> |
|
</view> |
|
</view> |
|
<view class="item acea-row row-between row-middle"> |
|
<view class="label">尾款</view> |
|
<view class="item-r acea-row row-between row-middle"> |
|
<input type="text" placeholder="请输入总尾款" /> |
|
<text>元</text> |
|
</view> |
|
</view> |
|
</view> --> |
|
<view class="project-name-box"> |
|
<view class="title acea-row row-middle">项目发起方（供方）</view> |
|
<view class="fqifang-box"> |
|
<view class="f-name">{{projectInfo.projectProvider.name}}</view> |
|
<view class="f-item acea-row row-middle"> |
|
<view class="f-item-label">银行账户</view> |
|
<view>{{projectInfo.projectProvider.bankNum}}</view> |
|
</view> |
|
<view class="f-item acea-row row-middle"> |
|
<view class="f-item-label">开户信息</view> |
|
<view>{{projectInfo.projectProvider.bankInfo}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="project-name-box"> |
|
<view class="title acea-row row-middle">合作方</view> |
|
<view class="hezuofang-box acea-row row-middle row-between"> |
|
<view class="header-box acea-row row-middle"> |
|
<image :src="projectInfo.projectReceiver.photoPath"></image> |
|
<view>{{projectInfo.projectReceiver.name}}</view> |
|
</view> |
|
<view class="call" @tap="call" :data-phone="projectInfo.projectReceiver.phone"><image src="/static/images/home/call.png"></image></view> |
|
</view> |
|
</view> |
|
<view class="btn-box acea-row row-right" v-if="state != 3"> |
|
<view class="submit-btn" @tap="submit" v-if="state == 0 || state == 1">确认并发起</view> |
|
<view class="submit-btn" @tap="confirm" v-if="state == 2 && canConfirm == true">待确认</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
// pages/demandHall/createProject/index.js |
|
const app = getApp(); |
|
|
|
export default { |
|
data() { |
|
return { |
|
state: 0, |
|
//未申请 |
|
communicateId: null, |
|
projectId: null, |
|
detail: [], |
|
projectInfo: {}, |
|
modeList: [], |
|
modeActive: 1, |
|
projectName: '', |
|
resultContent: '', |
|
totalMoney: '', |
|
stageResultsDtoList: [], |
|
canConfirm: false |
|
}; |
|
}, |
|
|
|
components: {}, |
|
props: {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面加载 |
|
*/ |
|
onLoad: function (options) { |
|
console.log(options); |
|
let id = options.id; // 立项 |
|
|
|
let state = options.state || 0; // 项目书状态，1已申请，2等待立项，3已成立 |
|
|
|
this.setData({ |
|
communicateId: id, |
|
state: state |
|
}); |
|
this.getModeList(); |
|
|
|
if (state == 0) { |
|
this.getProjectInfo(); |
|
} else { |
|
this.getProjectDetail(); |
|
} |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面初次渲染完成 |
|
*/ |
|
onReady: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面显示 |
|
*/ |
|
onShow: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面隐藏 |
|
*/ |
|
onHide: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面卸载 |
|
*/ |
|
onUnload: function () {}, |
|
|
|
/** |
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
*/ |
|
onPullDownRefresh: function () {}, |
|
|
|
/** |
|
* 页面上拉触底事件的处理函数 |
|
*/ |
|
onReachBottom: function () {}, |
|
|
|
/** |
|
* 用户点击右上角分享 |
|
*/ |
|
onShareAppMessage: function () {}, |
|
methods: { |
|
inpChange(e) { |
|
let t = e.currentTarget.dataset.t; |
|
let value = e.detail.value; |
|
|
|
if (t == 'n') { |
|
this.setData({ |
|
projectName: value |
|
}); |
|
} else if (t == 't') { |
|
this.setData({ |
|
totalMoney: value |
|
}); |
|
} else if (t == 'c') { |
|
this.setData({ |
|
resultContent: value |
|
}); |
|
} |
|
}, |
|
|
|
modeClick(e) { |
|
let id = e.currentTarget.dataset.id; |
|
let nums = e.currentTarget.dataset.nums; |
|
|
|
if (this.state != 0) { |
|
return; |
|
} |
|
|
|
this.setData({ |
|
stageResultsDtoList: [] |
|
}); |
|
let p = this.stageResultsDtoList; |
|
|
|
for (var j = 0; j < nums; j++) { |
|
p.push({ |
|
name: j + 1, |
|
money: '', |
|
content: '' |
|
}); |
|
} |
|
|
|
this.setData({ |
|
modeActive: id, |
|
stageResultsDtoList: p |
|
}); |
|
}, |
|
|
|
changePrice(e) { |
|
let idx = Number(e.currentTarget.dataset.i); |
|
let stageResultsDtoList = this.stageResultsDtoList; |
|
stageResultsDtoList[idx].money = e.detail.value; |
|
this.setData({ |
|
stageResultsDtoList |
|
}); |
|
}, |
|
|
|
changeContent(e) { |
|
let idx = Number(e.currentTarget.dataset.i); |
|
let stageResultsDtoList = this.stageResultsDtoList; |
|
stageResultsDtoList[idx].content = e.detail.value; |
|
this.setData({ |
|
stageResultsDtoList |
|
}); |
|
}, |
|
|
|
submit() { |
|
let data = { |
|
resourcesId: this.projectInfo.projectResource.resourceId, |
|
projectName: this.projectName, |
|
projectCode: this.projectInfo.projectCode, |
|
cooperationModeId: this.modeActive, |
|
resultContent: this.resultContent, |
|
stageResultsDtoList: this.stageResultsDtoList, |
|
totalMoney: this.totalMoney, |
|
providerId: this.projectInfo.projectProvider.prividerId, |
|
receiverId: this.projectInfo.projectReceiver.receiverId, |
|
communicateId: this.communicateId |
|
}; |
|
|
|
if (data.projectName == '') { |
|
uni.showToast({ |
|
title: '请填写项目名称！', |
|
icon: 'none' |
|
}); |
|
return; |
|
} else if (data.totalMoney == '') { |
|
uni.showToast({ |
|
title: '请填写项目总金额！', |
|
icon: 'none' |
|
}); |
|
return; |
|
} else if (data.resultContent == '') { |
|
uni.showToast({ |
|
title: '请描述交付成果！', |
|
icon: 'none' |
|
}); |
|
return; |
|
} |
|
|
|
app.http('post', 'Project/create', data).then(res => { |
|
if (res.data.success) { |
|
uni.showToast({ |
|
title: '操作成功！', |
|
duration: 2000 |
|
}); |
|
setTimeout(() => { |
|
uni.navigateBack({ |
|
delta: 1 |
|
}); |
|
}, 2000); |
|
} |
|
}); // console.log(this.data.stageResultsDtoList) |
|
}, |
|
|
|
//获取合作模式 |
|
getModeList() { |
|
app.http('get', 'CooperationMode/listCooperationMode').then(res => { |
|
if (res.data.success) { |
|
this.setData({ |
|
modeList: res.data.data |
|
}); |
|
} |
|
}); |
|
}, |
|
|
|
//获取资源信息 |
|
getProjectInfo() { |
|
console.log(this.communicateId); |
|
app.http('get', 'Project/toCreateProject', { |
|
communicateId: this.communicateId |
|
}).then(res => { |
|
if (res.data.success) { |
|
this.setData({ |
|
projectInfo: res.data.data |
|
}); |
|
} |
|
}); |
|
}, |
|
|
|
//获取立项书详情 |
|
getProjectDetail() { |
|
app.http('get', 'Communicate/getProjectInfo', { |
|
communicateId: this.communicateId |
|
}).then(res => { |
|
if (res.data.success) { |
|
let data = res.data.data; |
|
this.setData({//['projectInfo.projectResource']: data.projectResource |
|
//['projectInfo.projectProvider']: data.projectProvider |
|
//['projectInfo.projectReceiver']: data.projectReceiver |
|
|
|
projectName: data.projectName, |
|
stageResultsDtoList: data.stageResultsDtoList, |
|
modeActive: data.stageResultsDtoList.length, |
|
resultContent: data.resultContent, |
|
totalMoney: data.totalMoney, |
|
canConfirm: data.canConfirm, |
|
projectId: data.id, |
|
}); |
|
//try fix |
|
this['projectInfo.projectReceiver'] = data.projectReceiver; |
|
//try fix |
|
this['projectInfo.projectProvider'] = data.projectProvider; |
|
//try fix |
|
this['projectInfo.projectResource'] = data.projectResource; |
|
} |
|
}); |
|
}, |
|
|
|
confirm() { |
|
let that = this; |
|
uni.showModal({ |
|
title: '提示！', |
|
content: '是否确认立项？', |
|
|
|
success(res) { |
|
if (res.confirm) { |
|
app.http('GET', 'Communicate/aggreProject', { |
|
projectId: that.projectId |
|
}).then(res => { |
|
if (res.data.success) { |
|
uni.showToast({ |
|
title: '操作成功！', |
|
duration: 2000 |
|
}); |
|
setTimeout(() => { |
|
uni.navigateBack({ |
|
delta: 1 |
|
}); |
|
}, 2000); |
|
} |
|
}); |
|
} |
|
} |
|
|
|
}); |
|
}, |
|
|
|
call(e) { |
|
uni.makePhoneCall({ |
|
phoneNumber: e.currentTarget.dataset.phone |
|
}); |
|
} |
|
|
|
} |
|
}; |
|
</script> |
|
<style> |
|
/* pages/demandHall/createProject/index.wxss */ |
|
.createProject-page{ |
|
width: 100%; |
|
padding: 0 40rpx 180rpx; |
|
font-size: 28rpx; |
|
} |
|
.company-card-box { |
|
width: 100%; |
|
padding: 30rpx 12rpx; |
|
background: #FFFFFF; |
|
border: 2px solid #EEEEEE; |
|
border-radius: 12rpx; |
|
margin-bottom: 32rpx; |
|
} |
|
.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; |
|
} |
|
.title{ |
|
margin-bottom: 26rpx; |
|
font-weight: 500; |
|
line-height: 40rpx; |
|
color: #1D1D1D; |
|
} |
|
.num,.mode-box{ |
|
margin-left: 38rpx; |
|
} |
|
.project-name-box{ |
|
margin-bottom: 32rpx; |
|
} |
|
.inp-box{ |
|
width: 100%; |
|
height: 60rpx; |
|
padding: 10rpx 20rpx; |
|
background: #eee; |
|
} |
|
.inp-box input{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.mode-item{ |
|
width: 122rpx; |
|
height: 40rpx; |
|
border: 1rpx solid #707070; |
|
text-align: center; |
|
line-height: 38rpx; |
|
font-size: 24rpx; |
|
color: #707070; |
|
border-radius: 8rpx; |
|
margin-right: 10rpx; |
|
} |
|
.mode-item:nth-last-child(1){ |
|
margin-right: 0; |
|
} |
|
.mode-item-a{ |
|
border-color: #FF6D31; |
|
color: #FF6D31; |
|
} |
|
.mode-detail{ |
|
width: 670rpx; |
|
height: 176rpx; |
|
background: #FFF5F0; |
|
border: 2rpx solid #FF5100; |
|
border-radius: 12rpx; |
|
font-size: 24rpx; |
|
color: #666; |
|
padding: 24rpx 20rpx; |
|
} |
|
.m-tit{ |
|
font-weight: 500; |
|
line-height: 34rpx; |
|
color: #707070; |
|
margin-bottom: 20rpx; |
|
} |
|
.area-box{ |
|
width: 100%; |
|
/* height: 446rpx; */ |
|
background: #eee; |
|
border-radius: 8rpx; |
|
padding:28rpx 22rpx; |
|
font-size: 24rpx; |
|
} |
|
.area-box textarea{ |
|
width: 100%; |
|
height: 116rpx; |
|
border-bottom: 2rpx solid #BFBFBF; |
|
margin-top: 24rpx; |
|
} |
|
.progress-item{ |
|
width: 100%; |
|
height: 138rpx; |
|
border-bottom: 2rpx solid #BFBFBF; |
|
padding: 24rpx 0; |
|
} |
|
.p-title input{ |
|
width: 115rpx; |
|
margin-left: 14rpx; |
|
text-align: center; |
|
border-bottom: 2rpx solid #BFBFBF; |
|
} |
|
.desc{ |
|
width: 100%; |
|
margin-top: 20rpx; |
|
} |
|
|
|
.item{ |
|
color: #666; |
|
margin-bottom: 26rpx; |
|
} |
|
.item-r{ |
|
width: 538rpx; |
|
height: 60rpx; |
|
padding: 10rpx 20rpx; |
|
background: #eee; |
|
} |
|
.faqifang-box{ |
|
color: #1D1D1D; |
|
} |
|
.f-item{ |
|
margin-top: 22rpx; |
|
} |
|
.f-item-label{ |
|
color: #707070; |
|
margin-right: 28rpx; |
|
} |
|
|
|
.header-box image{ |
|
width: 92rpx; |
|
height: 92rpx; |
|
margin-right: 24rpx; |
|
} |
|
.call image{ |
|
width: 54rpx; |
|
height: 54rpx; |
|
} |
|
.btn-box{ |
|
width: 750rpx; |
|
height: 160rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.04); |
|
padding-top: 24rpx; |
|
padding-right: 40rpx; |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
z-index: 99; |
|
} |
|
.submit-btn{ |
|
width: 223rpx; |
|
height: 76rpx; |
|
background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%); |
|
border-radius: 38rpx; |
|
text-align: center; |
|
line-height: 76rpx; |
|
font-size: 32rpx; |
|
color: #fff; |
|
font-weight: 500; |
|
} |
|
</style> |