|
@@ -1,68 +1,144 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="donate-wrapper">
|
|
<view class="donate-wrapper">
|
|
|
- <view class="top-select flex">
|
|
|
|
|
|
|
+ <view class="top-select flex" style=" position: relative; z-index: 99;">
|
|
|
<view class="">选择地区</view>
|
|
<view class="">选择地区</view>
|
|
|
- <picker @change="bindAreaChange" :range="areas">
|
|
|
|
|
|
|
+ <picker @change="bindAreaChange" :range="areas" range-key="name">
|
|
|
<view class="area select" :class="{ action: area }">{{ area || '点击选择地区' }}</view>
|
|
<view class="area select" :class="{ action: area }">{{ area || '点击选择地区' }}</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
<picker @change="bindStatusChange" :range="statuss">
|
|
<picker @change="bindStatusChange" :range="statuss">
|
|
|
<view class="status select" :class="{ action: status }">{{ status }}</view>
|
|
<view class="status select" :class="{ action: status }">{{ status }}</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="item-wrapper">
|
|
|
|
|
- <view class="item flex" v-for="item in showList">
|
|
|
|
|
- <view class="item-left"><image :src="item.img" mode=""></image></view>
|
|
|
|
|
- <view class="item-right">
|
|
|
|
|
- <view class="item-title clamp">{{ item.title }}</view>
|
|
|
|
|
- <view class="item-content clamp2">{{ item.info }}</view>
|
|
|
|
|
- <view class="item-status">
|
|
|
|
|
- 捐赠进度
|
|
|
|
|
- <text>{{ item.project_progress }}%</text>
|
|
|
|
|
|
|
+ <scroll-view scroll-y="true" :style="{ height: height }" class="item-wrapper" >
|
|
|
|
|
+ <!-- <view class="item-wrapper"> -->
|
|
|
|
|
+ <empty v-if="showList.length === 0"></empty>
|
|
|
|
|
+ <template>
|
|
|
|
|
+ <view class="item flex" v-for="item in showList" >
|
|
|
|
|
+ <view class="item-left"><image :src="item.img" mode=""></image></view>
|
|
|
|
|
+ <view class="item-right">
|
|
|
|
|
+ <view class="item-title clamp">{{ item.title }}</view>
|
|
|
|
|
+ <view class="item-content clamp2">{{ item.info }}</view>
|
|
|
|
|
+ <view class="item-status">
|
|
|
|
|
+ 捐赠进度
|
|
|
|
|
+ <text>{{ item.project_progress }}%</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="item-btn" :class="{ 'btn-active': item.status === 0 }" @click="join(item.id)">{{ item.status === 0 ? '我要捐赠' : '已结束' }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="item-btn" :class="{ 'btn-active': item.status === 0 }" @click="join(item.id)">{{ item.status === 0 ? '我要捐赠' : '已结束' }}</view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <!-- </view> -->
|
|
|
|
|
+
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { getProjectList, getProjectInfo ,getAllArea} from '../../api/money.js';
|
|
|
|
|
|
|
+import empty from '../../components/empty.vue';
|
|
|
|
|
+import { getProjectList, getProjectInfo, getAllArea } from '../../api/money.js';
|
|
|
export default {
|
|
export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ empty
|
|
|
|
|
+ },
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- areas: ['沙市区红十字会', '荆州区红十字会', '石首区红十字会', '洪湖区红十字会', '松滋区红十字会', '监利区红十字会', '公安县红十字会', '江陵县红十字会'],
|
|
|
|
|
|
|
+ areas: [],
|
|
|
area: '',
|
|
area: '',
|
|
|
|
|
+ select_area: 0,
|
|
|
area_id: 0,
|
|
area_id: 0,
|
|
|
statuss: ['全部', '进行中', '已结束'],
|
|
statuss: ['全部', '进行中', '已结束'],
|
|
|
status: '全部',
|
|
status: '全部',
|
|
|
- status_id: 0,
|
|
|
|
|
|
|
+ select_status: 0,
|
|
|
list: [],
|
|
list: [],
|
|
|
- showList: []
|
|
|
|
|
|
|
+ height: 0
|
|
|
|
|
+ // showList: []
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
- async onLoad() {
|
|
|
|
|
- let a = await this.loadDate();
|
|
|
|
|
- this.showList = this.list;
|
|
|
|
|
- this.getAllArea()
|
|
|
|
|
|
|
+ onReady(res) {
|
|
|
|
|
+ var _this = this;
|
|
|
|
|
+ uni.getSystemInfo({
|
|
|
|
|
+ success: resu => {
|
|
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
|
|
+ query.select('.item-wrapper').boundingClientRect();
|
|
|
|
|
+ query.exec(function(res) {
|
|
|
|
|
+ console.log(res, 'ddddddddddddd');
|
|
|
|
|
+ _this.height = resu.windowHeight - res[0].top + 'px';
|
|
|
|
|
+ console.log('打印页面的剩余高度', _this.height);
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: res => {}
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ showList() {
|
|
|
|
|
+ let obj = this;
|
|
|
|
|
+ if (obj.list.length === 0) {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (obj.select_area === 0) {
|
|
|
|
|
+ if (obj.select_status === 0) {
|
|
|
|
|
+ return obj.list;
|
|
|
|
|
+ } else if (obj.select_status === 1) {
|
|
|
|
|
+ return obj.list.filter(item => {
|
|
|
|
|
+ return item.status !== 4;
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return obj.list.filter(item => {
|
|
|
|
|
+ return item.status === 4;
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (obj.select_status === 0) {
|
|
|
|
|
+ return obj.list.filter(item => {
|
|
|
|
|
+ return item.project_area === obj.select_area;
|
|
|
|
|
+ });
|
|
|
|
|
+ }else if(obj.select_status === 1){
|
|
|
|
|
+ return obj.list.filter(item => {
|
|
|
|
|
+ return item.project_area === obj.select_area && item.status !== 4
|
|
|
|
|
+ });
|
|
|
|
|
+ }else {
|
|
|
|
|
+ return obj.list.filter(item => {
|
|
|
|
|
+ return item.project_area === obj.select_area && item.status === 4
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ this.loadDate();
|
|
|
|
|
+ // this.showList = this.list;
|
|
|
|
|
+ this.getAllArea();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
bindAreaChange(e) {
|
|
bindAreaChange(e) {
|
|
|
console.log(e.target);
|
|
console.log(e.target);
|
|
|
- this.area = this.areas[e.target.value];
|
|
|
|
|
|
|
+ this.area = this.areas[e.target.value].name;
|
|
|
|
|
+ this.select_area = this.areas[e.target.value].id;
|
|
|
},
|
|
},
|
|
|
bindStatusChange(e) {
|
|
bindStatusChange(e) {
|
|
|
console.log(e.target);
|
|
console.log(e.target);
|
|
|
- if (this.status !== this.statuss[e.target.value]) {
|
|
|
|
|
- this.status = this.statuss[e.target.value];
|
|
|
|
|
- if(this.status == '全部') {
|
|
|
|
|
- this.showList = this.list
|
|
|
|
|
- }else if(this.status == '进行中'){
|
|
|
|
|
- this.showList = this.list.map( item => {
|
|
|
|
|
- return item
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.status = this.statuss[e.target.value];
|
|
|
|
|
+ if (this.status == '已结束') {
|
|
|
|
|
+ this.select_status = 4;
|
|
|
|
|
+ }else if(this.status == '全部'){
|
|
|
|
|
+ this.select_status = 0;
|
|
|
|
|
+ }else {
|
|
|
|
|
+ this.select_status = 1;
|
|
|
|
|
+ console.log(this.select_status,'this.select_status+++++++++++++')
|
|
|
}
|
|
}
|
|
|
|
|
+ // if (this.status !== this.statuss[e.target.value]) {
|
|
|
|
|
+ // this.status = this.statuss[e.target.value];
|
|
|
|
|
+ // if(this.status == '全部') {
|
|
|
|
|
+ // this.showList = this.list
|
|
|
|
|
+ // }else if(this.status == '进行中'){
|
|
|
|
|
+ // this.showList = this.list.map( item => {
|
|
|
|
|
+ // return item
|
|
|
|
|
+ // })
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }
|
|
|
},
|
|
},
|
|
|
join(id) {
|
|
join(id) {
|
|
|
console.log(id);
|
|
console.log(id);
|
|
@@ -74,7 +150,7 @@ export default {
|
|
|
loadDate() {
|
|
loadDate() {
|
|
|
getProjectList({
|
|
getProjectList({
|
|
|
page: 1,
|
|
page: 1,
|
|
|
- limit: 1000
|
|
|
|
|
|
|
+ limit: 10000
|
|
|
}).then(({ data }) => {
|
|
}).then(({ data }) => {
|
|
|
// console.log(res,'+++++++++++++++++')
|
|
// console.log(res,'+++++++++++++++++')
|
|
|
let list = [];
|
|
let list = [];
|
|
@@ -85,7 +161,7 @@ export default {
|
|
|
let data = JSON.parse(res.msg);
|
|
let data = JSON.parse(res.msg);
|
|
|
// console.log( data.project_progress,'999999999999999')
|
|
// console.log( data.project_progress,'999999999999999')
|
|
|
item.project_progress = data.project_progress;
|
|
item.project_progress = data.project_progress;
|
|
|
- item.info = item.info.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g,'').replace(/<[^>]+>/g, '');
|
|
|
|
|
|
|
+ item.info = item.info.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, '').replace(/<[^>]+>/g, '');
|
|
|
console.log(item);
|
|
console.log(item);
|
|
|
this.list.push(item);
|
|
this.list.push(item);
|
|
|
return item;
|
|
return item;
|
|
@@ -94,16 +170,27 @@ export default {
|
|
|
console.log(this.list, '5555555');
|
|
console.log(this.list, '5555555');
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- select(area,status) {
|
|
|
|
|
- if(atea!== '') {
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- },
|
|
|
|
|
getAllArea() {
|
|
getAllArea() {
|
|
|
- getAllArea().then(res => {
|
|
|
|
|
- console.log(res,'6666666666')
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getAllArea().then(({ data }) => {
|
|
|
|
|
+ console.log(data, '6666666666');
|
|
|
|
|
+ this.areas = data;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ isShow(item) {
|
|
|
|
|
+ let obj = this;
|
|
|
|
|
+ if (obj.select_area === 0) {
|
|
|
|
|
+ if (obj.select_status === 0) {
|
|
|
|
|
+ return true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return item.status === obj.select_status ? true : false;
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (obj.select_status === 0) {
|
|
|
|
|
+ return obj.select_area === item.project_area ? true : false;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return obj.select_area === item.project_area && item.status === obj.select_status ? true : false;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|