子组件:
<template>
<view class="container">
<uni-list v-for="(item,index) in state.dataList">
<uni-list-item :key="item.prod_log_guid" link to="/pages/vue/index/index">
<template v-slot:body>
<view class="body-width">
<uni-row :gutter="10">
<uni-col :span="6">
产线名称
</uni-col>
<uni-col :span="18">
{{item.prod_line_name}}
</uni-col>
</uni-row>
<uni-row :gutter="10">
<uni-col :span="6">
工位名称
</uni-col>
<uni-col :span="18">
{{item.station_name}}
</uni-col>
</uni-row>
</view>
</template>
</uni-list-item>
</uni-list>
<tui-nomore text="没有更多了..." v-if="state.status=='state.nomore'"></tui-nomore>
<tui-loadmore text="加载中..." v-if="state.status=='state.loading'"></tui-loadmore>
</view>
</template>
<script setup>
import {
reactive,
toRefs,
onUnmounted,
onMounted,
getCurrentInstance,
} from "vue";
import {
onLoad,
onPullDownRefresh,
onReachBottom
} from "@dcloudio/uni-app"
const {
tui
} = getCurrentInstance().appContext.config.globalProperties;
import {
boolEnumOptions
} from "@/common/enum.js"
const props = defineProps({
/**
* @description 已选项列表
* @type {String}
*/
prodSn: {
type: String,
default: () => ''
}
});
const {
prodSn
} = toRefs(props);
const state = reactive({
queryParam: {
pageNo: 1,
pageSize: 10,
prodSn: prodSn,
},
status,
hasMorePage: true,
dataList: []
})
onReachBottom(() => {
setTimeout(() => {
getList();
}, 500);
})
const getList = () => {
tui.request("/prodrecord/v1/page", "POST", state.queryParam).then((res) => {
if (res.data.success == true) {
state.dataList = res.data.list;
state.pageNo++;
state.hasMorePage = res.data.list.length != 0;
state.status = !hasMorePage.value ? "nomore" : "more";
} else {
tui.toast("获取生产记录失败");
}
}).catch((res) => {})
};
onUnmounted(()=>{
console.log("onUnmounted");
})
onMounted(() => {
console.log("onMounted");
onPullDownRefresh(function() {
console.log("onPullDownRefresh");
state.dataList.length = 0;
state.queryParam.pageNo = 1;
state.hasMorePage = true;
setTimeout(() => {
getList();
}, 500);
uni.stopPullDownRefresh();
})
});
onLoad((option) => {
console.log("onLoad");
getList();
});
</script>
<style lang="scss" scoped>
.body-width {
width: 100%;
.uni-row {
margin-top: 5px;
}
}
</style>
父组件引用:
<template>
<view class="container">
<uni-nav-bar fixed="true" leftIcon="left" @clickLeft="back" :border="false" title="产品详情">
</uni-nav-bar>
<view>
<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs>
</view>
<scroll-view class="scroll-view" scroll-y>
<prodRecord v-if="currentTab===0" :key="0"></prodRecord>
<prodRecord v-if="currentTab===1" :key="1"></prodRecord>
</scroll-view>
</view>
</template>
0 个回复