aiot-app/pages/sparepart/order/OrderTask.vue

<template>
	<view class="marginTop">
		<view class="" v-for="(item,index) in list" :key="item.id" v-show="list.length !== 0">
			<view @click="goDetail(item.id)">
				<OrderList 
					lable1="" :value1="item.code" 
					lable2="" :value2="'领取数量'" 
					lable3="来源:" :value3="item.source.type.name" 
					lable4="" :value4="item.appointTime" 
					:btnText="getBtnText(item.type)" :btnClass="getBtnClass(item.type)"></OrderList>
			</view>
		</view>
		<view v-show="list.length === 0" class="no_data">
				<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import CellTip from '@/components/CellTip.vue'
	import OrderList from '../components/OrderList.vue'
	export default {
		components: {
			CellTip,
			OrderList
		},
		props:{
			list:{
				type: Array,
				default:[]
			}
		},
		data() {
			return {
				options: [{
					text: '接单',
					style: {
						"backgroundColor": '#157A2C',
						"fontSize": "14px",
						"disableScroll": true,
						"app-plus": {
							"bounce": "none"
						}
					}
				}]
				
			}
		},
		methods: {
			getBtnText(type){
				let text = '';
				switch (type){
					case '1':
						text = '未归还'
						break;
					case '2':
						text = '已归还'
						break;
					case '3':
						text = '已使用'
						break;
				}
				return text
			},
			getBtnClass(type){
				let classText = '';
				switch (type){
					case '1':
						classText = 'btn-warning'
						break;
					case '2':
						classText = 'btn-success'
						break;
					case '3':
						classText = 'btn-primary'
						break;
				}
				return classText
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			goDetail(id){
				uni.navigateTo({
					url:'../detail/detail?id=' +id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.marginTop {
		border-top: 20rpx solid $page-bg;
	}
	.center{
		text-align: center;
		margin-bottom: 10rpx;
		color: #999;
	}
	.no_data{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #999;
		font-size: 28rpx;
	}
</style>