alhj/pages/alldeatil/upcontract.vue

<template>
	<view class="content">
		<view class="listitem">
			<text class="lys">合同名称</text>
			<view class="inbox">
				<input type="text" v-model="form.name" placeholder="请输入合同的名称" placeholder-style="color:#BEBDBB" />
			</view>
		</view>
		<view class="listitem">
			<text class="lys">合同编号</text>
			<view class="inbox flex2">
				<input type="text" v-model="form.tax_no" placeholder="请输入合同的编号" placeholder-style="color:#BEBDBB" />
				<view class="flex7">
					<text style="color: #E8E8E8;">|</text>
					<text style="padding-left: 20rpx;display: block;">待确认</text>
				</view>
			</view>
		</view>
		<view class="listitem" >
			<view class="" style="display: flex;align-content: center;">
				<text class="lys">合同附件</text>
				<text
					style="font-size: 24rpx; color:#D05C39;padding-top: 45rpx;padding-left: 20rpx;">*支持上传pdf、jpg/jpeg、png格式</text>
			</view>
		
			<view class="inbox" style="border: none;padding-bottom: 0">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" width="100" height="100"></u-upload>
			</view>
		</view>
		<view class="listitem" style="border: none;">
			<view class="" style="display: flex;align-content: center;">
				<text class="lys">发票附件</text>
				<text
					style="font-size: 24rpx; color:#D05C39;padding-top: 45rpx;padding-left: 20rpx;">*支持上传pdf、jpg/jpeg、png格式</text>
			</view>
		
			<view class="inbox" style="border: none;padding-bottom: 0">
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" width="100" height="100"></u-upload>
			</view>
		</view>
		<view class="listitem" >
			<view class="" style="display: flex;align-content: center;">
				<text class="lys">贸易合同</text>
				<text
					style="font-size: 24rpx; color:#D05C39;padding-top: 45rpx;padding-left: 20rpx;">*支持上传pdf、jpg/jpeg、png格式</text>
			</view>
		
			<view class="inbox" style="border: none;padding-bottom: 0">
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" width="100" height="100"></u-upload>
			</view>
		</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="addtitle flex6">
				<text class="ty">汇票{{index+1}}</text>
				<!-- <text class="tde">删除</text> -->
			</view>
			<view class="listitem">
				<text class="lys">汇票名称</text>
				<view class="inbox">
					<input type="text" v-model="item.name" placeholder="请输入汇票的名称" placeholder-style="color:#BEBDBB" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">汇票号码</text>
				<view class="inbox">
					<input type="text" v-model="item.tax_no" placeholder="请输入汇票的号码" placeholder-style="color:#BEBDBB" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">兑换人</text>
				<view class="chosbox">
					<uni-data-select v-model="item.accepter" :localdata="range" @change="changeacPerson" :showas="false" :plname="'搜索兑换人名称'"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">出票人</text>
				<view class="chosbox">
					<uni-data-select v-model="item.drawer" :localdata="range" @change="changedrPerson" :plname="'搜索出票人名称'"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">金额</text>
				<view class="inbox">
					<input type="text" v-model="item.amount" placeholder="请输入汇票的金额" placeholder-style="color:#BEBDBB" />
				</view>
			</view>
			<view class="listitem">
				<text class="lys">承兑日期</text>
				<view class="calender" @click="openTime(index,1)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.value1}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">出票日期</text>
				<view class="calender" @click="openTime(index,2)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.value2}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">汇票到期日</text>
				<view class="calender" @click="openTime(index,3)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.value3}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">预计贴现日</text>
				<view class="calender" @click="openTime(index,4)">
					<view class="canicon">
						<image src="../../static/img/canlen.png" mode="aspectFill"></image>
					</view>
					<text>{{item.value4}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">最高贷款额度</text>
				<view class="inbox">
					<input type="text" v-model="form.name" placeholder="48542.00元" placeholder-style="color:#1F242A"
						disabled="true" />
				</view>
			</view>
			<view class="flex4">
				<view class="listitem">
					<text class="lys">服务费率</text>
					<view class="inbox">
						<input type="text" v-model="form.name" placeholder="显示对于费率" placeholder-style="color:#BEBDBB"
							disabled="true" />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">服务费</text>
					<view class="inbox">
						<input type="text" v-model="form.name" placeholder="自动计算得出" placeholder-style="color:#BEBDBB"
							disabled="true" />
					</view>
				</view>
			</view>
			<view class="flex4">
				<view class="listitem">
					<text class="lys">利率</text>
					<view class="inbox">
						<input type="text" v-model="form.name" placeholder="显示对于利率" placeholder-style="color:#BEBDBB"
							disabled="true" />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">利息</text>
					<view class="inbox">
						<input type="text" v-model="form.name" placeholder="自动计算得出" placeholder-style="color:#BEBDBB"
							disabled="true" />
					</view>
				</view>
			</view>
			<view class="listitem">
				<view class="" style="display: flex;align-content: center;">
					<text class="lys">上传附件</text>
					<text
						style="font-size: 24rpx; color:#D05C39;padding-top: 45rpx;padding-left: 20rpx;">*支持上传pdf、jpg/jpeg、png格式</text>
				</view>
			
				<view class="inbox" style="border: none;padding-bottom: 0;">
					<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10" width="100" height="100"></u-upload>
				</view>
			</view>
		</view>
		
		<view class="addnewbill" @click="addNewBill">
			+ 新增汇票
		</view>
		<view class="safebt"></view>
		<view class="newbill flex1" @click="upAll">
			<view class="newbillbtn">
				<text>确认上传</text>
			</view>

		</view>
		<u-datetime-picker :show="dateshow" mode="date" @confirm="confirm" @cancel="closeDate" v-model="start">
		</u-datetime-picker>
	</view>
</template>

<script>
	
	import calllips from "@/componet/calllips/calllips.vue"
	export default {
		components: {
			calllips
		},
		data() {
			return {
				
				editall: false,
				quan: false,
				dateshow: false,
				opdanum: '',
				state: '',
				index:0,
				start: Number(new Date()),
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				list:[
					{
						name: '',
						tax_no: '',
						accepter:'',
						drawer:'',
						amount: '',
						value1: '',
						value2: '',
						value3: '',
						value4: '',
						fileList4: [],
					},
				],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
				 {
						value: 2,
						text: "游泳"
					},
				],	
			}
		},
		onLoad() {
			let myDate = new Date()
			let wk = myDate.getDay()
			let yy = String(myDate.getFullYear())
			let mm = myDate.getMonth() + 1
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
			let nowDate = yy + '-' + mm + '-' + dd
			
			this.list.forEach(item=>{
				console.log(item)
				item.value1 = nowDate
				item.value2 = nowDate
				item.value3 = nowDate
				item.value4 = nowDate
			})
			
		},
		methods: {
			upAll(){
				console.log()
				uni.$u.http.post('/api/Contract', {
					custom: {
						auth: true
					}
				}).then((res) => {
					
				}).catch((err) => {
					console.log(err)
				})
			},
			addNewBill(){
				let form={
					name: '',
					tax_no: '',
					accepter:'',
					drawer:'',
					amount: '',
					value1: '',
					value2: '',
					value3: '',
					value4: '',
				}
				this.list.push(form)
			},
			changeacPerson(e){
				this.accepter=e
			},
			changedrPerson(e){
				this.drawer=e
			},
			openTime(index,value) {
				this.dateshow = true
				this.index=index
				this.opdanum = value
			},
			closeDate() {
				this.dateshow = false
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				if (this.opdanum == 1) {
					this.list[this.index].value1 = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 2) {
					this.list[this.index].value2 = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 3) {
					this.list[this.index].value3 = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 4) {
					this.list[this.index].value4 = timeFormat(e.value, 'yyyy-mm-dd')
				}
				console.log(this.index,this.opdanum)
				this.dateshow = false
			},
			 change(e) {
			      console.log("e:", e);
			    },
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.addtitle {
		font-weight: 600;
		padding-top: 58rpx;
		font-size: 36rpx;

		.ty {
			color: #D8AB5A;
		}

		.tde {
			color: #D05C39;
		}
	}

	.listitem {
		.lys {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			padding-top: 40rpx;
			padding-bottom: 30rpx;
		}

		.inbox {
			padding-bottom: 20rpx;
			width: 100%;
			font-size: 30rpx;
			border-bottom: 1rpx solid #E8E8E8;
		}

		.chosbox {
			border-radius: 20rpx;
			// border: 1rpx solid #BEBDBB;
		}

		.calender {
			border-radius: 20rpx;
			width: 690rpx;
			height: 80rpx;
			border-radius: 20rpx;
			border: 1rpx solid #BEBDBB;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			font-size: 32rpx;
			box-sizing: border-box;

			.canicon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.addnewbill {
		width: 200rpx;
		height: 78rpx;
		border-radius: 45rpx;
		border: 1rpx solid #E8E8E8;
		line-height: 78rpx;
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 200rpx;
	}
</style>