alhj/pages/alldeatil/addbill.vue

<template>
	<view class="content">

		<view v-for="(item,index) in contractDrafts" :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.draftNo" 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"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">出票人</text>
				<view class="chosbox">
					<uni-data-select v-model="item.drawersId" :localdata="range" @change="changedrPerson"></uni-data-select>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">金额</text>
				<view class="inbox">
					<input type="text" v-model="item.money" 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.acceptDate}}</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.issueDate}}</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.expireDate}}</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.expectDiscountDate}}</text>
				</view>
			</view>
			<view class="listitem">
				<text class="lys">最高贷款额度</text>
				<view class="inbox" v-if="form.serviceRate&&form.interestRate">
					<input type="text" v-model="form.loanLimit" placeholder="请输入最高贷款额度" placeholder-style="color:#BEBDBB"
						disabled="true" />
				</view>
				<view class="inbox" v-else>
					<input type="text" v-model="form.loanLimit" placeholder="请输入最高贷款额度" placeholder-style="color:#BEBDBB"
						disabled="true" />
				</view>
			</view>
			<view class="flex4">
				<view class="listitem">
					<text class="lys">服务费率</text>
					<view class="inbox">
						<input type="text" v-model="form.serviceRate" placeholder="输入费率" placeholder-style="color:#BEBDBB"
							 />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">服务费</text>
					<view class="inbox">
						<input type="text" v-model="form.serviceMoney" 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.interestRate" placeholder="输入利率" placeholder-style="color:#BEBDBB"
							 />
					</view>
				</view>
				<view class="listitem">
					<text class="lys">利息</text>
					<view class="inbox">
						<input type="text" v-model="form.interest" 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" @click="checkIndex(index)"></u-upload>
				</view>
			</view>
		</view>
		
		<view class="addnewbill" @click="addNewBill">
			+ 新增汇票
		</view>
		<view class="safebt"></view>
		<view class="newbill flex1">
			<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()),
				allindex:'',
				fileList1: [],
				contractDrafts:[
					{
						name: '',
						draftNo: '',
						acceptorId:'',
						drawersId:'',
						money: '',
						acceptDate: '',
						issueDate: '',
						expireDate: '',
						loanLimit:'',
						expectDiscountDate: '',
						picUrls: [],
					},
				],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
				 {
						value: 2,
						text: "游泳"
					},
				],	
			}
		},
		computed:{
			
		},
		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.contractDrafts.forEach(item=>{
				item.acceptDate = nowDate
				item.issueDate = nowDate
				item.expireDate = nowDate
				item.expectDiscountDate = nowDate
			})
			this.init()
		},
		methods: {
			addNewBill(){
				let form={
						name: '',
						draftNo: '',
						acceptorId:'',
						drawersId:'',
						money: '',
						acceptDate: '',
						issueDate: '',
						expireDate: '',
						expectDiscountDate: '',
						picUrls: [],
					}
				this.contractDrafts.push(form)
			},
			init(){
				
				uni.$u.http.post('/api/Acceptor/search',{
					pageIndex:1,
					pageSize:10,
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
				}).catch((err) => {
				})
			},
			checkIndex(index){
				this.allindex=index
			},
			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.contractDrafts[this.index].acceptDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 2) {
					this.contractDrafts[this.index].issueDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 3) {
					this.contractDrafts[this.index].expireDate = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.opdanum == 4) {
					this.contractDrafts[this.index].expectDiscountDate = 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
					}))
					this[`fileList${event.name}`].forEach(item=>{
						this.form[this.index].picUrls.push(item.url)
					})
					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>