ryx/pages/invoice/invoicedetail.nvue

<template>
	<view class="">
	<!-- 	<u-navbar
		            title="开票信息"
		            :safeAreaInsetTop="true"
					leftIconSize="45"
					:titleStyle="{'font-size':'30rpx'}"
					leftIcon="arrow-left"
					@leftClick="backBtn()"
					
		        >
		            
		        </u-navbar> -->
		<!-- <view class="statues_bar"></view> -->
		<view class="top">
			<view class="" style="width: 40%;">
				开票金额共
			</view>
			<view class="">
				￥{{total}}
			</view>
		</view>
		<view class="form" >
			<u--form labelPosition="left" :model="model1"  ref="form1">
			  <view class="">
			  	抬头类型
			  </view>
			   	<view class="btn" style="display: flex;">
			   		<view :class="state==0?'btn-item-active':'btn-item'" @click="">企业</view>	
					<view :class="state==1?'btn-item-active':'btn-item'" @click="">个人</view>
			   	</view>
			
			    <view  v-if="state==1">
					<u-form-item  label="发票抬头" prop="presonalname" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u-input v-model="presonalname"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" disabled="true">
							<!-- <template slot="suffix"><text @click="goinvoiceList">抬头薄</text> </template> -->
						</u-input>
					</u-form-item>
					<u-form-item  label="邮寄地址" prop="prsonalemail" borderBottom  ref="item1" labelWidth="160rpx"  :required="true">
						<u-input v-model="prsonalemail"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" disabled="true">
							<template slot="suffix"><text @click="goinvoiceList"></text> </template>
						</u-input>
					</u-form-item>
					<view class="" style="margin: 30rpx 0;">
						<!-- <text style="color: red;">*</text> -->
						<text>备注信息（选填）</text>
					</view>
					<u--textarea v-model="memo"
						:customStyle="{'background':'#F4F4F4','border-radius': '0px 32rpx 8rpx 32rpx'}"
						placeholder="无" placeholderStyle="color: #555555" height=120
						border="none" :required="true" disabled="true"></u--textarea>
				</view>
				
				<view class="" v-if="state==0">
					<u-form-item  label="发票抬头" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u-input v-model="model1.userInfo.name"  disabledColor="#ffffff" :placeholder="state==0?'请输入公司姓名':'请输入个人姓名'" border="none" placeholderStyle="color: #555555" disabled="true">
							<!-- <template slot="suffix"><text @click="goinvoiceList">抬头薄</text> </template> -->
						</u-input>
					</u-form-item>
					<u-form-item  label="纳税税号" prop="userInfo.tax_no" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.tax_no"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" disabled="true"></u--input>
					</u-form-item>
					<u-form-item  label="注册地址" prop="userInfo.address" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.address"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" disabled="true"></u--input>
					</u-form-item>
					<u-form-item  label="电话" prop="userInfo.phone" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.phone"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" type="number" disabled="true"></u--input>
					</u-form-item>
					<u-form-item  label="开户银行" prop="userInfo.bank_name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_name"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" disabled="true"></u--input>
					</u-form-item>
					<u-form-item  label="银行账号" prop="userInfo.bank_no" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_no"  disabledColor="#ffffff" placeholder="无" border="none" placeholderStyle="color: #555555" type="number" disabled="true"></u--input>
						
					</u-form-item>
					<u-form-item   label="邮寄地址" prop="userInfo.mail" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.mail"  disabledColor="#ffffff" placeholder="无" placeholderStyle="color: #555555" border="none" disabled="true"></u--input>
					</u-form-item>
					<view class="" style="margin: 30rpx 0;">
						<!-- <text style="color: red;">*</text> -->
						<text>备注信息（选填）</text>
					</view>
					<u--textarea v-model="model1.userInfo.memo" placeholder="无"
						:customStyle="{'background':'#F4F4F4','border-radius': '0px 32rpx 8rpx 32rpx'}"
						placeholderStyle="color: #555555" height=120 border="none" disabled="true"></u--textarea>
				</view>

				
			</u--form>
		</view>
		<view class="bottomall">
			<text>开票订单：</text>
			<view  v-for="(item,index) in model1.userInfo.orders" :key="index" class="boxfls">
				<view style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10rpx;font-size: 26rpx;">
					<text>订单号：{{item.code}}</text>
					<text class="copytype" @click="copyTap(item.code)">复制</text>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="bomimgbox">
							<image :src="item.cover_picture" mode="aspectFill"></image>
						</view>
					<view class="goodsinfo">
						<text style="font-size: 32rpx;">{{item.good_name}}</text>
						<text>X{{item.number}}</text>
						<text>￥{{item.amount}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="" style="margin-bottom: 144rpx;"></view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				state:0,
				showSex:false,
				presonalname:'',
				prsonalemail:'',
				memo:'',
				ids:[],
				total:0,
				rules:{
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'personalname': {
						type: 'string',
						required: true,
						message: '请填写个人姓名',
						trigger: ['blur', 'change']
					},
					'prsonalemail': {
						type: 'string',
						required: true,
						message: '请填写接收邮箱',
						trigger: ['blur', 'change']
					},
					'userInfo.tax_no': {
						type: 'string',
						required: true,
						message: '请填写税号',
						trigger: ['blur', 'change']
					},
					'userInfo.email': {
						type: 'string',
						required: true,
						message: '请填写接收邮箱',
						trigger: ['blur', 'change']
					},
				},
				model1: {
					userInfo: {
						name: '',
						tax_no: '',
						address: '',
						phone: '',
						bank_name: '',
						bank_no: '',
						type: '',
						email:'',
						memo:'',
						orders:[]
					},
				}
			}	
		},

		
		onLoad(o){
				
			if(o){
				let userInfo=JSON.parse(o.obj)
				this.total=userInfo.amount
				if(userInfo.type_text=="企业"){
					this.model1.userInfo=userInfo
					this.model1.userInfo.mail=userInfo.email
					this.state=0
				}else{
					this.state=1
					this.model1.userInfo=userInfo
					this.presonalname=userInfo.name
					this.prsonalemail=userInfo.email
					this.memo=userInfo.memo
				}
			}
		},
		methods:{
			// 跳转抬头列表
			goinvoiceList(){
				let obj={
					choose:true,
					state:this.state
				}
				uni.navigateTo({
					url:"/pages/invoice/invoiceAdmin?obj="+JSON.stringify(obj)
				})
			},
			backBtn(){
				uni.navigateBack({
					delta:1
				})
			},
			copyTap(code){
				uni.setClipboardData({
					data: code,
					success: function () {
					},
					
				});
			}
	    },
	}
</script>

<style lang="less">

	// .u-textarea.data-v-81cd9d32{
	// 	background-color:#F4F4F4 !important; 
	// 	border-radius: 0px 32rpx 8rpx 32rpx !important;
	// }
	.bottomall{
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 32rpx;
		margin: 30rpx;
		padding: 40rpx;
		margin-top: 10rpx;
		font-size: 26rpx;
		.copytype{
			padding: 5rpx 10rpx;
			border: 1rpx solid #000;
			border-radius: 10rpx;
			margin-left: 20rpx;
		}
		.boxfls{
			display: flex;
			// flex-direction: row;
			margin-top: 20rpx;
		}
		.bomimgbox{
			width: 180rpx;
			height: 120rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.goodsinfo{
			padding-left: 20rpx;
			padding-top: 10rpx;
		}
	}
	.top{
			background: #FFFFFF;
			border-radius: 8rpx 32rpx 8rpx 8rpx;
			margin: 30rpx;
			padding: 40rpx;
			display: flex;
			// margin-top: 160rpx;
		}
	page{
		background-color: #F4F4F4;
		font-size: 30rpx;
	}
	.form{
		background-color: #fff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		margin-bottom: 20rpx;
		
	}
	.btn{
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #E3E3E3;
		padding: 30rpx 0;
		.btn-item{
			text-align: center;
			line-height: 60rpx;
			width: 176rpx;
			height: 60rpx;
			background: #F4F4F4;
			border-radius: 30rpx;
			margin:0 10rpx;
		}
		.btn-item-active{
			text-align: center;
			line-height: 58rpx;
			width: 174rpx;
			height: 58rpx;
			background: rgba(30, 159, 106, 0.1);
			border-radius: 30rpx;
			border: 1px solid #1E9F6A;
			color: #1E9F6A;
			margin:0 10rpx;
		}
	}
	.navbar{
		padding: 30rpx 0;
		text-align: center;
		background:#1E9F6A ;
		color: #fff;
		bottom: 0;
		margin: 0 auto;
		left: 0;
		position: fixed;
		width: 100%;
		border-radius: 16rpx 16rpx 0px 0px;
		
	}
</style>