Files
dvcp_v2_wxcp_app/src/apps/AppHelpEffect/AppHelpEffect.vue
shijingjing a49d80c794 防返贫
2022-07-21 15:03:23 +08:00

144 lines
3.8 KiB
Vue

<template>
<div class="AppHelpEffect">
<AiTopFixed>
<div class="search"><u-search placeholder="请输入姓名、身份证号" v-model="name" :show-action="false"></u-search></div>
<div class="select">
<div class="left">
<AiSelect v-model="declareReason" :list="areaList" @data="areaSelect">
<span v-if="!declareReason" style="color: #999;">地区筛选</span>
<span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
<u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
</AiSelect>
</div>
<div class="right">
<AiSelect v-model="declareReason" :list="typeList" @data="typeSelect">
<span v-if="!declareReason" style="color: #999;">户型类型</span>
<span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
<u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
</AiSelect>
</div>
</div>
</AiTopFixed>
<div class="cardList">
<div class="card" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
<p class="user">
<span class="name">{{ item.name }}</span>
<span :style="{color: item.houseType==1? '#FF6300': '#00D25D'}">{{ $dict.getLabel('', item.houseType) }}</span>
</p>
<div class="idCard">{{ item.idNumber.replace(/(.{6}).*(.{4})/, '$1********$2') }}</div>
<div class="tel" @click="callPhone()"><img src="./images/dh@2x.png" alt="">{{ item.phone}}</div>
<div class="address"><img src="./images/dz@2x.png" alt="">
{{ item.countyName + item.townName + item.villageName }}{{ item.currentAddress || '' }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AppHelpEffect",
appName: '帮扶成效',
data() {
return {
name: "",
current: 1,
declareReason: "",
areaList: [],
typeList: [],
houseType: 1,
provertyStatus: 0,
list: [],
}
},
methods: {
areaSelect() {},
typeSelect() {},
callPhone(phone) {
uni.makePhoneCall({phoneNumber: phone})
},
getList() {
this.$http.post('/app/appgirdmemberpoverty/listByGirdMember', null, {
params: {
current: this.current,
provertyStatus: this.provertyStatus,
name: this.name,
},
}).then((res) => {
if (res?.data) {
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
}
})
},
toDetail(id) {
uni.navigateTo({url: `./helpDetail?id=${id}`})
},
onReachBottom() {
this.current ++
this.getList()
}
},
onShow() {
document.title = '帮扶成效'
this.getList()
}
}
</script>
<style lang="scss" scoped>
.AppHelpEffect {
.search {
height: 100px;
line-height: 100px;
}
.select {
width: 100%;
display: flex;
height: 60px;
line-height: 60px;
::v-deep .AiSelect .display {
justify-content: center;
}
.left,
.right {
width: 50%;
}
}
.cardList {
padding: 32px;
box-sizing: border-box;
.card {
padding: 32px;
box-sizing: border-box;
margin-bottom: 32px;
background: #FFF;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.0200);
border-radius: 16px;
.user {
display: flex;
justify-content: space-between;
.name {
font-size: 36px;
font-weight: 600;
}
}
.idCard,
.tel,
.address {
margin-top: 8px;
color: #999999;
img {
width: 28px;
height: 28px;
}
}
}
}
}
</style>