<template>
<view class="progress">
<view class="top">
<view class="top-t">
<view class="top-item">
<image src="../../static/icon/x1.png" mode=""></image>
<view class="item-tit">1.项目创建</view>
</view>
<view class="top-item">
<image src="../../static/icon/x2.png" mode=""></image>
<view class="item-tit">2.项目审核</view>
</view>
<view class="top-item">
<image src="../../static/icon/x3.png" mode=""></image>
<view class="item-tit">3.捐赠响应</view>
</view>
<view class="top-item">
<image src="../../static/icon/x4.png" mode=""></image>
<view class="item-tit">4.捐赠审核</view>
</view>
</view>
<view class="top-t">
<view class="top-item">
<image src="../../static/icon/x5.png" mode=""></image>
<view class="item-tit">5.捐赠品入库</view>
</view>
<view class="top-item">
<image src="../../static/icon/x6.png" mode=""></image>
<view class="item-tit">6.捐赠品出库</view>
</view>
<view class="top-item">
<image src="../../static/icon/x7.png" mode=""></image>
<view class="item-tit">7.发往受捐者</view>
</view>
<view class="top-item">
<image src="../../static/icon/x8.png" mode=""></image>
<view class="item-tit">8.受捐者反馈</view>
</view>
</view>
</view>
<view class="main">
<view class="line"></view>
<view class="item">
<image src="../../static/icon/xq2.png" mode=""></image>
<view class="item-info">
<view class="item-tit">新建项目</view>
<view class="item-time">{{proInfo.createtime | time}} {{proInfo.title}}</view>
</view>
<view class="line1"></view>
</view>
<view class="item">
<image src="../../static/icon/xq2.png" mode="" ref="firstitem"></image>
<view class="item-info">
<view class="item-tit">
审核时间
<text>已通过</text>
</view>
<view class="item-time">{{proInfo.createtime | time}} {{proInfo.title}}</view>
</view>
</view>
<view class="item">
<image src="../../static/icon/xq3.png" mode=""></image>
<view class="item-info">
<view class="item-tit">捐赠审核</view>
<scroll-view scroll-y="true" class="item-num" @scrolltolower="loadDate" :class="[list.length <= 2 ? 'less': 'better']" v-if="list.length>0">
<view class="item-wrapper">
<!-- <empty v-if="list.length === 0"></empty> -->
<template v-for="(item, index) in list">
<view :key="index" class="jzr-item" :class="[index % 4 === 0 ? 'bg1' : index % 4 === 1 ? 'bg2' : index % 4 === 2 ? 'bg3' : 'bg4']" @click="navTo('/pages/donate/progresst?item='+JSON.stringify(item))">
<view class="item-title clamp">{{ item.name }}</view>
<view class="item-status">捐赠响应{{item.status_txt === '拒绝'?'未通过':item.status_txt==='待审核'?'待审核':'已通过'}}</view>
</view>
</template>
<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
</view>
</scroll-view>
</view>
</view>
<view class="item">
<image src="../../static/icon/xq10.png" mode=""></image>
<view class="item-info">
<view class="item-tit">统计信息</view>
<view class="all-info flex">
<view class="" style="width: 45%;">
捐赠进度
<text class="jd"> {{+proInfo.project_progress*100 }}%</text>
</view>
<view class="" style="width: 55%;">
捐赠笔数
<text>{{count}}次</text>
</view>
<view class="" style="width: 45%;">
总计估值
<text>{{+proInfo.assessment == 0?'': '￥'}}{{+proInfo.assessment||'暂无数据'}}</text>
</view>
<!-- <view class="">
物流累计
<text>20次</text>
</view> -->
<view class="" style="width: 55%;">
上线时间
<text>{{proInfo.start_time |time}}</text>
</view>
</view>
</view>
<view class="line2"></view>
<view class="line6"></view>
</view>
</view>
</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { getProjectInfo, createProject, getDonationInfo, getAllOrder} from '../../api/money.js';
import empty from '@/components/empty';
export default {
components: {
empty,
uniLoadMore
},
data() {
return {
peopleList: [],
isShow: false,
list: [],
proId: 0,//项目Id
proInfo: {},//项目基础信息
page: 1,
limit: 10,
loadingType: 'more',
loaded: false,
count: 0
};
},
filters: {
time(val) {
let date = new Date(val * 1000);
let Y = date.getFullYear();
let M = date.getMonth()>9?(date.getMonth()+1):'0'+(date.getMonth()+1);
let D = date.getDate()>9?date.getDate():'0'+date.getDate();
return Y + '年' + M + '月' + D + '日';
},
type(val,typeList) {
let str = ''
let arr = typeList
let len = arr.length
for(let i = 0;i< len ; i++){
if(arr[i].id === val) {
return str = arr[i].name
}
}
},
name(val,typeList) {
let str = ''
if(val) {
str = val.substr(0,1)
}
return str + '**'
},
item(val,typeList) {
let str = ''
let arr = val.map(item => {
for(let i = 0; i< typeList.length ;i++){
if(item.project_donation_id == typeList[i].id){
str = str + typeList[i].name + ' '+item.project_donation_num +' '+' '
}
}
})
return str
}
},
onLoad(opt) {
this.proId = opt.id
this.getBaseInfo()
this.loadDate()
},
methods: {
getBaseInfo() {
getProjectInfo({
id: this.proId
}).then(res => {
this.proInfo = res.data;
console.log(this.proInfo)
})
},
loadDate() {
if(this.loadingType == 'more'){
getAllOrder({
page: this.page,
limit: this.limit,
project_id: this.proId*1
}).then(({data}) => {
console.log(data,'999999999999999999999999')
// let list = data.list
this.list = this.list.concat(data.list)
this.count = data.count
this.page++
if(data.list.length ==this.limit ){
this.loadingType = 'more';
return
}else {
this.loadingType = 'noMore';
}
this.$set(this, 'loaded', true);
console.log(this.list,'777777777777777777')
// this.newItem = data.list[0]
// console.log(this.newItem,'88888888888888888')
})
}
},
navTo(url) {
uni.navigateTo({
url: url
})
}
}
};
</script>
<style lang="scss" scoped>
.top {
padding: 40rpx 0;
background-color: #fff;
margin: 20rpx 0;
.top-t {
display: flex;
justify-content: space-between;
padding: 0 55rpx;
.top-item {
width: 160rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 30rpx;
image {
width: 160rpx;
height: 160rpx;
background: #ffffff;
border-radius: 14px;
margin-bottom: 15rpx;
}
.item-tit {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 1;
}
}
}
}
.main {
background-color: #fff;
padding-right: 30rpx;
height: 100%;
position: relative;
.line {
width: 2rpx;
// height: 60rpx;
height: 100%;
background-color: #fa7e67;
position: absolute;
left: 60rpx;
}
.item {
position: relative;
image {
width: 45rpx;
height: 45rpx;
background: #fa7e67;
border-radius: 50%;
position: absolute;
top: 49rpx;
left: 40rpx;
z-index: 3;
}
.item-info {
width: 600rpx;
position: relative;
left: 112rpx;
padding-bottom: 34rpx;
border-bottom: 1px solid #ededed;
.item-tit {
padding-top: 39rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 1;
text {
display: inline-block;
width: 87rpx;
height: 33rpx;
border: 1px solid #0ec400;
border-radius: 5rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #0ec400;
text-align: center;
line-height: 30rpx;
margin-left: 10rpx;
}
}
.item-time {
padding-top: 17rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #bfbfbf;
line-height: 1;
}
.item-num {
margin-top: 21rpx;
// height: 392rpx;
width: 592rpx;
// background-color: red;
.item-wrapper {
display: flex;
flex-wrap: wrap;
width: 592rpx;
.jzr-item {
height: 196rpx;
width: 296rpx;
background-color: #fff;
background-size: 100% 100%;
padding-top: 33rpx;
padding-left: 28rpx;
.item-title {
font-size: 27rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 1;
}
.item-status {
padding-top: 20rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 1;
}
}
}
.bg1 {
background-image: url(../../static/img/bg1.png);
}
.bg2 {
background-image: url(../../static/img/bg2.png);
}
.bg3 {
background-image: url(../../static/img/bg3.png);
}
.bg4 {
background-image: url(../../static/img/bg4.png);
}
}
.all-info {
margin-top: 20rpx;
width: 601rpx;
height: 130rpx;
border: 1px solid #cccccc;
border-radius: 10rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
align-items: center;
flex-wrap: wrap;
view {
flex-shrink: 0;
width: 50%;
padding-left: 20rpx;
text {
display: inline-block;
margin-left: 5rpx;
color: #000000;
}
.jd {
color: #e80000;
}
}
}
}
.line1 {
position: absolute;
width: 2rpx;
height: 61rpx;
background-color: #fff;
top: 0;
left: 60rpx;
z-index: 2;
}
.line2 {
position: absolute;
width: 2rpx;
height: 250rpx;
background-color: #fff;
bottom: 0;
left: 60rpx;
}
.line5 {
position: absolute;
width: 2rpx;
height: 100%;
background-color: #fa7e67;
top: 0;
left: 60rpx;
z-index: 1;
}
.line6 {
position: absolute;
width: 2rpx;
height: 61rpx;
background-color: #fa7e67;
top: 0;
left: 60rpx;
}
}
}
.less {
height: 196rpx;
}
.better {
height: 392rpx;
}
</style>