uniapp 实现销售订单页面-风格1

1.效果图片

 2.源代码

<template>
	<view class="container">
	   <u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff" 
			:is-fixed="true" :is-back="true" 
			:back-text-style="{'color':'#fff'}"
			:background="background"  
			:custom-back="goback">
		    <view class="slot-wrap">
		    	<view class="search-wrap" >
		    		<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
		    		<u-search v-model="selectParams.keyWord" 
					@search="search()"  :placeholder="placeholder" 
					:show-action="false"  height="56" 
					:action-style="{color: '#fff'}"></u-search>
		    	</view>
		    </view>		
		</u-navbar>
	   <scroll-view scroll-y  style="height: 100%;width: 100%;" 
	      @scrolltolower="reachBottom" enable-back-to-top>
		   <!-- 正文内容 -->  
		   <view class="content"> 
		       <view   v-for="(item,index) in dataList" :key="index">
			   <view class="item">
				     <view class="item-top">
				     		<view class="item-top-left">
								{{msgType}}
							</view>
							<view class="item-top-right">
							   •••
							</view>
				     </view>
					 <view class="item-content">
					 	  <view class="item-content-item">
							  {{cmpName}}
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">客户:</view>
							  <view class="item-content-item-right">
								  {{item.khaname_long}}
							  </view>
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">单号:</view>
							  <view class="item-content-item-right">
								  {{item.prdacode}}
							  </view>
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">项数:</view>
							  <view class="item-content-item-right">
								  {{item.items}}
							  </view>
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">数量:</view>
							  <view class="item-content-item-right">
								  {{item.qty}}
							  </view>
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">金额:</view>
							  <view class="item-content-item-right">
								  {{item.sy}} 元
							  </view>
						  </view>
						  <view class="item-content-item">
							  <view class="item-content-item-left">备注:</view>
							  <view class="item-content-item-right">
								  {{item.remark}}
							  </view>
						  </view>
					 </view>
					 <view class="item-btn" @click="showItem(item)">
					 		<view class="item-btn-left">查看详情</view>		 
							<u-icon name="arrow-right" class="item-btn-right"></u-icon>
					 </view>
			     </view>
		      </view>	   
		    </view>	   
		   <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2">  
		   </u-loadmore>
	      </scroll-view>

	</view>		
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				placeholder:"客户名称，生产单号，客户单号",
				selectParams:{
					keyWord:'',
					pageSize:3,
					pageIndex:1
				},
				list:[{
						name: '销售订单'
					}],
				current:0,
				swiperCurrent:0,
				totalPages:0,
				dataList:[],
				loadStatus: ['loadmore','loadmore','loadmore'],
				msgType:"销售订单通知",
				cmpName:"佛山市金属制品有限公司-销售订单"
				
			}
		},
		
		onLoad() {
			this.getOrderList()
		},
		
		methods: {		
			goback(){
				uni.reLaunch({url:'/pages/index/index'}) //要用这个才可以
			},
			async getOrderList(){
				const res = await this.$u.api.xsbillddList(this.selectParams)
				for(let i = 0,length = res.length;i<length;i++)
				{
					res[i].sy = parseFloat(res[i].sy).toFixed(2)
					res[i].qty = parseFloat(res[i].qty).toFixed(2)
					this.dataList.push(res[i])
				}
				if(res.length>0)
				{
					this.totalPages =Math.ceil(res[0].guid_count/
					this.selectParams.pageSize)
				}
				this.loadStatus.splice(0,1,"loadmore")
				
			},
			search(){
				this.selectParams.pageIndex = 1
				this.totalPages = 0
				this.dataList = []
				this.getOrderList()
			},
			reachBottom(){
				this.loadStatus.splice(0,1,"loading")
				setTimeout(() => {
					if(this.selectParams.pageIndex<this.totalPages)
					{
					   this.selectParams.pageIndex  = this.selectParams.pageIndex  + 1
					   this.getOrderList();	
					}
					else{
						this.loadStatus.splice(0,1,"nomore")
					}
				}, 500);
			},
			// 查看详情
			showItem(item){
				const aguid = item.aguid
				console.log(aguid)
				const option = {aguid}
				this.$u.route('/pages/xsbilldd/xsbillddDetail',option)
			}
		}
	}
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	
    .container{
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		.slot-wrap{
			display: flex;
			align-items: center;
			flex: 1;
			.search-wrap{
				margin: 0 20rpx;
				flex: 1;
			}
		}
		.content{
			flex:1;
			.item{
				height:650rpx;
				margin-left: 49rpx;
				margin-top:15rpx;
				margin-right:49rpx;
				border-radius: 15rpx;
				background-color:#FFFF;
				.item-top{
					padding-left: 52rpx;
					padding-right: 52rpx;
					padding-top: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-top-left{
						font-size: 44rpx;
					}
					.item-top-right {
						font-size: 44rpx;
					}
				}
				.item-content{
					height: 450rpx;
					border-bottom:1rpx solid #e8e8e8 ;
					background-color: #FFFFFF;
					.item-content-item{
						color: #777777;
						padding-left: 52rpx;
						padding-top: 20rpx;
						font-size:32rpx ;
						display:flex;
						flex-direction: row;
						.item-content-item-left{
							color:#8b8b8b;
							padding-right: 35rpx;
						}
						.item-content-item-right{
							color:#1b286e;
						}
					}
					
				}
				.item-btn{
					height: 60rpx;
					font-size: 36rpx;
					padding-top: 20rpx;
					padding-left: 52rpx;
					background-color: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-btn-right{
						margin-right: 50rpx;
						color:#e8e8e8;
					}
				}
			}
		}
	}
</style>