yiliangyiyun-app/pages/user/contractLook/salesContract.vue

<template>
	<view>
		<view style='background:#fff;padding:15px 10px;border-radius:0 0 10px 10px;'>
			<u-search bgColor='#F5F6F9' @change='keyWordChange' :show-action="false" placeholder="请输入合同编号或客户名称" v-model="searchKeyWord"></u-search>
		</view>
		
		<view class='content'>
			<view class='content-item' v-for='item in contractList'>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">合同编号</view>
					<view>{{item.contractNo}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">客户</view>
					<view>{{item.buyer}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">合同重量（吨）</view>
					<view>{{item.weight}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">合同单价（元）</view>
					<view>{{item.unitContractPrice}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">合同总价（元）</view>
					<view>{{item.totalContractPrice}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">已付款（元）</view>
					<view>{{item.mildewGrain}}</view>
				</view>
				<view style='padding:10px 0;' class="flex justify-between">
					<view class="title">已开发票 （元）</view>
					<view>{{item.goodsNames}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartlist: [],
				carCount1: '',
				carCount2: '',
				carCount3: '',
				inventoryCost: '',
				inventoryValue: '',
				ZChart: {},
				// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
				url: '',
				flag: true,
				chartData: {},
				ringoptions: {},
				contractType:1,
				contractList:[],
				currentPage:1,
				pageSize:10,
				searchKeyWord:''
			}
		},
		onLoad: function(option) {
			uni.showLoading({
				title: "加载中",
				mask: true
			})
			this.init()
		},
		methods: {
			keyWordChange(e){
				this.searchKeyWord=e
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.init()
			},
			init() {
				this.$api.doRequest('get', '/contractManagementInfo/selectInfo',
				{compId:uni.getStorageSync('pcUserInfo').compId,
				contractType: this.contractType,goodsType:1,currentPage: this.currentPage,pageSize: this.pageSize,searchKeyWord:this.searchKeyWord}).then(res => {
					uni.hideLoading()
					this.contractList=res.data.data.records
				})
			},
			getdata(e) {
				console.log(e)
			}
		}
	}
</script>



<style scoped lang="scss">
	.content{
		background:#F5F6FA;
	}
	.content-item{
		background:#fff;
		margin:10px;
		padding:10px;
		border-radius:6px;
		font-size:14px;
		.title {
			color:#9698A2;
			font-size:26rpx;
		}
	}
	charts-box {
		// background: black;
		position: relative;
		// top: 70vh;
	}

	.content2 .row,
	.content4 .row {
		display: flex;
		justify-content: space-around;
		background: #24262d;
		padding: 40rpx 20rpx;

		.item-top,
		.item-bottom {
			color: #d5d5d5;
		}

		.item-bottom {
			display: flex;
			align-items: center;
		}
	}

	.bottom-tip {
		position: absolute;
		z-index: 11;
		color: #8c8c8d;
		right: 10px;
		bottom: 10px;
	}

	.title-margin {
		bottom: 120rpx;
	}
</style>