contract-front/pages/index/PayPal_xq.uvue

<template>
  <view class="containers" >
	  <view class="header">
	   <view class="header_info">
		 <view class="header_info_icon" @click.native.stop.prevent="toBack" style="display: flex; justify-content: center; align-items: center;">
		 	<uni-icons  type="left" size="30" color="#c2d4de"  > </uni-icons>
		 </view>
				  <text class="header_text">信息录入</text>
	   </view>
	  </view>
	  
	  <view class="section" style="margin-top: 5%;">
	       <view class="form-item">
	         <text class="label">付款方式</text>
	         <text>
				 {{records[0].payType}}
		    </text>
	       </view>
	       <view class="form-item">
	         <text class="label">客户类型</text>
	         <text  @change="onChange" class="radio-group" >
				 {{records[0].custType == 0 ? "个人" : "公司"}}
	         </text>
	       </view>
	    </view>
	  
	  <view class="idCard-box">
	  	<view class="reverse"  @tap.prevent="uploadPositive">
	  		<image :src="records[0].certFront"   >
	  		</image>
	  	</view>
	  	<view class="reverse" @tap.prevent="uploadReverse">
	  		<image :src="records[0].certBack" >
	  		</image>
	  	</view>
		<view class="reverse" @tap.prevent="uploadCarCert">
			<image :src="records[0].carPic" >
			</image>
		</view>
	  </view>
	  
    <!-- 客户基本信息 -->
    <view class="section">
    <view class="con_size">
		  <image src="/static/image/矩形 5315.png"  class='con_size_img' ></image>
		  客户基本信息
		  </view>
      <view class="form-item">
		 <text class="labels">*</text> 
        <text class="label">产品名称</text>
        <text class="value">{{ records[0].productName }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">经销商</text>
        <text class="value">{{ records[0].storeName }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">客户姓名</text>
		         <text class="value">{{ records[0].custName }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">居住地址</text>
		         <text class="value">{{ records[0].custAddress }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">身份证号码</text>
		         <text class="value">{{ records[0].custCardNo }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">联系方式</text>
		         <text class="value">{{ records[0].custPhone }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">销售端口</text>
         <text class="value">{{ records[0].storeName }}</text>
      </view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">店端销售顾问</text>
				  <text class="value">{{ records[0].saleName }}</text>
      </view>
    </view>

    <!-- 车辆信息 -->
    <view class="section">
            <view class="con_size">
		  <image src="/static/image/矩形 5315.png"  class='con_size_img' ></image>车辆信息</view>
      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">车牌车系</text>
	    <text class="value">{{cars[0].saleName}}</text>
      </view>
	  <view class="form-item">
	  		  <text class="labels">*</text> 
	    <text class="label">车辆型号</text>
		 <text class="value">{{cars[0].carModel}}</text>
	  </view>

      <view class="form-item">
		  <text class="labels">*</text> 
        <text class="label">车架号</text>
         <text class="value">{{cars[0].vin}}</text>
      </view>
	  
	  <view class="form-item">
	  		  <text class="labels">*</text> 
	    <text class="label">车辆类型</text>
			 <text class="value">{{cars[0].carType}}</text>
	  </view>
	  
	  <view class="form-item">
	  		  <text class="labels">*</text> 
	    <text class="label">使用性质</text>
		<text class="value">{{cars[0].useType}}</text>
	  </view>
	  <view class="form-item">
	  		  <text class="labels">*</text> 
	    <text class="label">是否新车</text>
		<text class="value">{{cars[0].newCar==0?"否":"是" }}</text>
	  </view>

	  <view class="form-item">
	    <text class="label">车牌号</text>
		 <text class="value">{{cars[0].carNo}}</text>
	  </view>
	  <view class="form-item">
	  		  <text class="labels">*</text> 
	    <text class="label">发动机号</text>
		 <text class="value">{{cars[0].engineNo}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">里程</text>
		   <text class="value">{{cars[0].mileage}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">购车时间</text>
			   <text class="value">{{cars[0].buyTime}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">车辆购置价</text>
		   <text class="value">{{cars[0].buyMoney}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">购置税</text>
		<text class="value">{{cars[0].buyTax}}</text>
	  </view>
    </view>
	
	
	<!-- 凭证信息 -->
	<view class="section">
	        <view class="con_size">
		  <image src="/static/image/矩形 5315.png"  class='con_size_img' ></image>凭证信息</view>
      <view class="form-item" v-if="productTypeFlag">
	 		  <text class="labels">*</text> 
	   <text class="label">第一受益人</text>
	   <text class="value">{{vouchers[0].firstBeneficiary}}</text>
	 </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">服务费</text>
		<text class="value">{{vouchers[0].serviceMoney}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
		  <text class="labels">*</text> 
	    <text class="label">生效时间</text>
		<text class="value">{{vouchers[0].effectiveTime}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">失效时间</text>
		<text class="value">{{vouchers[0].endTime}}</text>
	  </view>
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">服务年限</text>
		<text class="value">{{vouchers[0].serviceYear}}</text>
	  </view>
	
	  <view class="form-item" v-if="productTypeFlag">
	  		  <text class="labels">*</text> 
	    <text class="label">付款时间</text>
		<text class="value">{{vouchers[0].payTime}}</text>
	  </view>
	  
	  
	  <view class="con_size" >
	  		  <text class="labels">*</text> 
	  		  <text class="label">支付凭证</text><image 
	  			:src="records[0].payVoucherUrl" 
	  			mode="widthFix" 
	  			style="width: 100px;height: 150px;"
				@click="clickImg"
	  		></image>
	  </view>
	  
	  <view class="con_size">
	  		  <text class="labels">*</text> 
	  		  <text class="label">发票信息</text><image 
	  			:src="records[0].invoiceUrl" 
	  			mode="widthFix" 
	  			style="width: 100px;height: 150px;"
	  				@click="clickImg"
	  		></image>
	  </view>
	  
	  </view>
	  
	  <view class="section" v-if="productTypeFlag">
	          <view class="con_size">
	  	  <image src="/static/image/矩形 5315.png"  class='con_size_img' ></image>金融信息</view>
	   <view class="form-item">
	     <text class="label">贷款机构</text>
		 <text class="value">{{Finances[0].lender||0}}</text>
	   </view>
	    <view class="form-item">
	      <text class="label">贷款金额</text>
		  <text class="value">{{Finances[0].lenderMoney||0}}</text>
	    </view>
	    <view class="form-item">
	      <text class="label">贷款期限</text>
		  <text class="value">{{Finances[0].lenderYear||0}}</text>
	    </view>
	  </view>
  </view>
</template>

<script>
	import {isToken,list,queryAppOrderCarByMainId,queryAppOrderFinanceByMainId,queryAppOrderVoucherByMainId} from '@/api.uts'
export default {
  data() {
    return {
		 records: [
		      {
		        id: "1897277583591075841",
		        orderNum: "CXSC20250305302395",
		        productName: "畅行无忧",
		        productServiceYear: "1",
		        productMoney: null,
		        productContractTemp: "https://img.augcl.com/temp/test_car_1741181182533.pdf",
		        productType: "普通产品",
		        storeName: "上海测试门店",
		        custName: "陈朋涛",
		        custAddress: "山东省滕州市龙阳镇",
		        custCardNo: "532101198906010015",
		        custPhone: "13456788765",
		        salePort: "售前",
		        createBy: "tanzs",
		        saleName: "lj",
		        payType: "全款",
		        custType: 0,
		        certFront: "https://img.augcl.com/cert/4uUVhHO3qByFbeb95285d2741f5437d370fea46a67b9_1740859563993.jpg",
		        certBack: "https://img.augcl.com/cert/J4X2ZFsgotLXdcc88281956f0b3fb63708bb497c1698_1740859570051.jpg",
		        carPic: "https://img.augcl.com/cert/w2Aoeo53vXfBb3f85e86690e90e240e1111c770e6f26_1740859575127.jpg",
		        busLicense: null,
		        createTime: "2025-03-05 21:26:39",
		        updateBy: null,
		        updateTime: null,
		        sysOrgCode: null,
		        status: 1,
		        contractUrl: "https://img.augcl.com/contract/CXSC20250305302395_1741181199845.pdf",
		        payee: "上海测试门店",
		        payeeTime: null,
		        payVoucherUrl: "https://img.augcl.com/test/F5n9sMOVIOBs363af867a4affb43fcf1cc64bb01916d_1740859625764.png",
		        salePort_dictText: "售前",
		        custType_dictText: "个人",
		        status_dictText: "已生效"
		      }
		    ],
			cars:[
				{
				   id: "1897277583754653697",
				   carSeries: "比亚迪海狮05 EV2025款 低配版",
				   vin: "LC0CE6DB8S4040471",
				   carType: "燃油车",
				   useType: "非营运",
				   newCar: 1,
				   carModel: "BYD7008BEVB1",
				   carNo: "fg6545",
				   engineNo: "2V4003609",
				   mileage: "10000",
				   buyTime: "2025-03-02 04:06:50",
				   buyMoney: 10000,
				   buyTax: 885,
				   orderFkId: "1897277583591075841",
				   updateBy: null,
				   createTime: "2025-03-05 21:26:40",
				   updateTime: null,
				   sysOrgCode: null,
				   createBy: "tanzs"}
			],
			vouchers:[],
			Finances:[],
			productTypeFlag:true
			
    }
  },
  onLoad(options) {
	  isToken();
		list({id:getApp().id}).then((res)=>{
			this.records = res.result.records
		})
		queryAppOrderCarByMainId({id:getApp().id}).then((res)=>{
			this.cars = res.result
		})
		queryAppOrderFinanceByMainId({id:getApp().id}).then((res)=>{
			 this.Finances = res.result
		})
		queryAppOrderVoucherByMainId({id:getApp().id}).then((res)=>{
			
			this.vouchers = res.result
		})
		console.log('111',JSON.parse(this.cars));
		this.productTypeFlag = getApp().productTypeFlag;
  },

      onUpload() {
          // 页面销毁时移除监听
          uni.offKeyboardHeightChange();
      },
  methods: {
	  keyboardheightchange(e){
		  // this.changeBottomVal = e.detail.height + 'px'
	  },
	  clickImg(){
		  uni.previewImage({
		  urls: [this.records[0].payVoucherUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
		  current: '', // 当前显示图片的http链接，默认是第一个
		  success: function(res) {},
		  fail: function(res) {},
		  complete: function(res) {},
		  })
	  },
	  toBack(){
		  // console.log('111')
	    uni.navigateBack({delta: 1}) 
	  }
  }
}
</script>

<style  scoped lang="scss">
.containers {
	height: 100%;
	width: 100%;
  background-color: #fff;
  	overflow-y:scroll;
  
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
}

.container::-webkit-scrollbar {
    display: none;
}
.section {
  // margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  margin: 0 1rem 0 1rem;
}

.sections{
	  margin: 0 1rem 1rem 1rem;
}
.form-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 0.1rem solid #f2f2f2;
  color: #767676;
}
.labels{
	color: red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
}

.input {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #737373;
}

.picker {
  flex: 1;
}

.picker-text {
  text-align: right;
  color: #737373;
  font-size: 0.8rem;
}

.radio-group {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  flex-direction: row;
}

.radio-label {
padding: 0;
  margin-left: 10rpx;
  display: flex;
  flex-direction: row;
  font-size: 1rem;
  transform: scale(0.7);
}

.value {
  flex: 1;
  text-align: right;
  color: #737373;
  font-size: 0.8rem;
}
// .timePiker{
// 	display: flex;
// 	justify-content: center;
// 	align-items: center; 
// 	color: #3f3f3f;
// }

.idCard-box {
	margin-top: 10%;
		width: 100%;
		height: 50%;
		display: flex;
		flex-direction: row;
		/* background-color: red; */
       flex-wrap: wrap;
 
		.reverse {
			height: 30%;
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
            // background-color: blue;
			margin: 0 5% 0 5%;
			image {
				width: 100%;
				height: 100%;
			}
			text{
				position: absolute;
				text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
				  font-size: 0.8rem; 
				  color:#fff;
			}
		}
	}
	
	/* 表单分区样式 */
	.con_size {
	  font-size: 1rem;
	  font-weight: bold;
	  margin: 1rem 0;
	  color: #000000;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.con_size_img{
		height: 100%;
		width: 2%;
		margin-right: 2%;
	}
	
	
	.form-button{
		width: 100%;
		height:100%;
		// background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.button{
		height: 100%;
		width: 100%;
		background-color: #044f7a;
		color: #ffffff;
		border-radius: 1rem;
	}
</style>