iot-platform-app/pages/supplyChain/sale/sale.vue

<template>
	<view class="home bg-f9">
		<header-bar addUrl="/sale/add" title="销售订单"></header-bar>
		<uni-search-bar v-model="req.keyword" placeholder="输入关键词" @confirm="search" @cancel="cancel" bgColor="#fff"
			cancel-text="取消">
		</uni-search-bar>
		<view class="common-list-box" v-for="(i,index) in dataList" :key="i.index" @click="toDtl(i)">
			<view class="text">
				<view class="text-list"  v-for="(j,jndex) in config"  :key="jndex">
					<span class="label">
						{{j.label}}
					</span>
					<span class="value">
						{{i[j.key]}}
					</span>
				</view>
			</view>
			<view class="more success">
				<view class="common-stat-box">
					已出货
				</view>
				<uni-icons type="forward" class="icon" size="30"></uni-icons>
			</view>
		</view>
		<button type="default" @click="getList()" style="margin-top:10rpx">
			{{status == 'more' ? '点击加载更多' : status == 'noMore' ? '已经到底了' : '加载中..'}}
		</button>
	</view>
</template>

<script>
	import headerBar from '../../../components/header-bar/index.vue'
	import commonList from '../../../components/common-list/common-list.vue'
	import {formateObjToParamStr} from '../../../util/uitl.js'
	import Vue from 'vue'
	export default {
		components: {
			headerBar,
			commonList
		},
		data() {
			return {
				status: 'more',
				config: [{
						label: "客户名称",
						key: 'typeName',
					},
					{
						label: "下单日期",
						key: 'name',
					},
					{
						label: "订单金额",
						key: 'unit',
					}
				],
				dataList: [],
				req: {
					pageNum: 1,
					pageSize: 10,
					keyword: null,
				},
			}
		},
		onLoad() {
			this.search()
			
		},
		onShow() {
			if(this.needRefresh) this.search();
			
			
		},
		methods: {
			toDtl(i){
				console.log(i)
				uni.navigateTo({
					url: '/pages/supplyChain/sale/add?' + formateObjToParamStr(i)
				})
			},
			cancel() {
				this.req.keyword = null
			},
			search() {
				this.req.pageNum = 1
				this.status = 'more'
				this.dataList = []
				this.getList()
			},
			getList() {
				const v = this
				if (v.status === 'more') {
					v.status = 'loading'
				} else {
					return
				}
				v.$post('/api/basics/product/page', v.req).then(res => {
					res.data.records.map(items => {
						items.typeName = (items.type === 0) ? '半成品' : '成品'
					})
					v.dataList = [...v.dataList, ...res.data.records]
					if (res.data.pages === v.req.pageNum || res.data.pages === 0) {
						v.status = 'noMore'
					} else {
						v.status = 'more'
						v.req.pageNum++
					}
				})
			},

		},
	}
</script>

<style lang="less">
/deep/.bg-f9{
	background-color: #f9f9f9;
	min-height: 100vh;
}

/deep/.uni-forms-item{
	background-color: #fff;
	margin-bottom: 6rpx!important;
	padding: 6rpx 24rpx 26rpx!important;
}

/deep/.is-input-border{
	border:none!important;
}
.common-list-box{
	background-color: #fff;
	padding: 24rpx;
	margin-top: 6rpx;
	display: flex;
	justify-content: space-between;
	.text{
		.text-list{
			line-height: 60rpx;
			.label{
				color: #999999;
			}
			.value{
				color: #000;
				margin-left: 20rpx;
			}
		}
	}
	.common-stat-box{
		border:6rpx solid red;
		height: 80rpx;
		width: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 50%;
		position: relative;
		font-size: 20rpx;
		transform:rotate(-25deg);
	}
	.common-stat-box::before{
		display: block;
		position: absolute;
		width: 68rpx;
		height: 68rpx;
		left: 6rpx;
		top: 6rpx;
		border:2rpx solid red;
		border-radius: 50%;
		content: ' ';
	}
	.more{
		display: flex;
		align-items: center;
	}
	.success{
		.common-stat-box{
			border-color: #39C55A;
			color: #39C55A;
		}
		.common-stat-box::before{
			border-color: #39C55A;
		}
	}
	.error{
		.common-stat-box{
			border-color: #F94539;
			color: #F94539;
		}
		.common-stat-box::before{
			border-color: #F94539;
		}
	}
	.warning{
		.common-stat-box{
			border-color: #FF9315;
			color: #FF9315;
		}
		.common-stat-box::before{
			border-color: #FF9315;
		}
	}
}
</style>