增加统一的列表处理类

This commit is contained in:
aixianling
2023-01-10 15:06:12 +08:00
parent 95aa779de1
commit cf21392f70
3 changed files with 51 additions and 39 deletions

View File

@@ -0,0 +1,36 @@
import http from "./http";
class List {
constructor(action) {
this.action = action
this.current = 1
this.total = 0
this.list = []
}
getData(params) {
const {action} = this
return http.post(action, null, {params})
}
init(params) {
this.getData({...params, current: 1}).then(res => {
if (res?.data) {
this.list = res.data.records
this.total = res.data.total
}
})
}
loadMore(params) {
if (this.list.length < this.total) {
this.getData({...params, current: ++this.current}).then(res => {
if (res?.data) {
this.list = [...this.list, ...res.data.records]
}
})
}
}
}
export default List

View File

@@ -22,11 +22,11 @@
<u-icon name="arrow-down" size="28" color="#333333" :custom-style="{marginLeft:'8px'}"></u-icon>
</span>
<div class="total">
<em>{{ total }}</em>个农产品
<em>{{ list.total }}</em>个农产品
</div>
</header>
<div class="card-list" v-if="list.length">
<div class="card" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
<div class="card-list">
<div class="card" v-for="(item,index) in list.list" :key="index" @click="toDetail(item)">
<div class="top">
<div class="title">{{ item.title }}
</div>
@@ -47,7 +47,7 @@
</div>
</div>
</div>
<AiEmpty v-else/>
<AiEmpty v-if="!list.list.length"/>
<div class="btn-wrapper">
<div class="btn" @click="suport" hover-class="text-hover">我要发布</div>
</div>
@@ -57,6 +57,8 @@
</template>
<script>
import List from "dvcp-wui/utils/list";
export default {
name: "AppAgProducts",
appName: "晒农产品",
@@ -64,11 +66,9 @@ export default {
return {
index: 0,
show: false,
current: 1,
type: "",
typeName: "",
list: [],
total: 0,
}
},
@@ -96,7 +96,6 @@ export default {
},
onChange(val) {
this.index = val;
this.current = 1;
if (!!this.index) {
this.getMine();
} else this.getAll();
@@ -107,36 +106,19 @@ export default {
confirm(val) {
this.type = val[0].value;
this.typeName = val[0].label;
this.current = 1;
if (!!this.index) {
this.getMine();
} else this.getAll();
},
getAll() {
this.$instance.post("/app/appshowagriculturalproduce/list", null, {
params: {
type: this.type,
current: this.current,
}
}).then(res => {
if (res?.data) {
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
this.total = res.data.total;
}
})
const {type} = this
this.list = new List("/app/appshowagriculturalproduce/list")
this.list.init({type})
},
getMine() {
this.$instance.post("/app/appshowagriculturalproduce/listByWx", null, {
params: {
type: this.type,
current: this.current,
}
}).then(res => {
if (res?.data) {
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
this.total = res.data.total;
}
})
const {type} = this
this.list = new List("/app/appshowagriculturalproduce/listByWx")
this.list.init({type})
},
toDetail({id}) {
uni.navigateTo({
@@ -150,7 +132,6 @@ export default {
}
},
onShow() {
this.current = 1;
if (!!this.index) {
this.getMine();
} else {
@@ -158,12 +139,8 @@ export default {
}
},
onReachBottom() {
this.current++;
if (!!this.index) {
this.getMine();
} else {
this.getAll();
}
const {type} = this
this.list.loadMore({type})
}
}
</script>
@@ -299,7 +276,6 @@ export default {
box-sizing: border-box;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 32px;
& > img {

View File

@@ -16,7 +16,7 @@ const configs = {
dev: {
areaId: '341021104000',
areaName: '郑村镇',
baseUrl: 'http://192.168.1.87:59998'
baseUrl: 'http://192.168.1.87:9000'
}
}
// 当前选中配置