contract-front/111/pages/index/PayPal.uvue

<template>
  <view class="containers">
	  <view class="header">
	   <view class="header_info">
	  	 <uni-icons class="header_info_icon" type="left" size="30" color="#c2d4de"  @click.native.stop.prevent="toBack"></uni-icons>
	  	 <text class="header_text">付款信息</text>
	   </view>
	  </view>
	  
	  <view class="idCard-box">
	  	<view class="reverse">
	  		<image :src="upLoadPositiveImg == ''?positiveImg:upLoadPositiveImg"    @tap.prevent="uploadPositive">
	  		</image>
	  	</view>
	  	<view class="reverse">
	  		<image :src="upLoadReverseImg == ''?reverseImg:upLoadReverseImg" @tap.prevent="uploadReverse">
	  		</image>
	  	</view>
		<view class="reverse">
			<image :src="upLoadCarImg == ''?carImg:upLoadCarImg" @tap.prevent="uploadReverse">
			</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="label">产品名称</text>
        <text class="value">{{ selectedProduct }}</text>
      </view>
      <view class="form-item">
        <text class="label">经销商</text>
        <text class="value">{{ selectedStore }}</text>
      </view>
      <view class="form-item">
        <text class="label">客户姓名</text>
        <input class="input" v-model="clientInfo.name" placeholder="请输入客户姓名" />
      </view>
      <view class="form-item">
        <text class="label">居住地址</text>
        <input class="input" v-model="clientInfo.address" placeholder="请输入居住地址" />
      </view>
      <view class="form-item">
        <text class="label">身份证号码</text>
        <input class="input" v-model="clientInfo.idNumber" placeholder="请输入身份证号码" />
      </view>
      <view class="form-item">
        <text class="label">联系方式</text>
        <input class="input" v-model="clientInfo.contact" placeholder="请输入联系方式" />
      </view>
      <view class="form-item">
        <text class="label">销售部门</text>
        <l-radio-group class="radio-group" @change="handleDepartmentChange">
          <label class="radio-label" v-for="item in departments" :key="item">
            <l-radio :value="item" :checked="clientInfo.department === item" >
			  <template #icon="{checked}">
			   <image v-show="checked" style="width:1.2rem; height:1.2rem;" src="/static/image/xuanzhong.png"></image>
			    <image v-show="!checked" style="width:1.2rem; height:1.2rem" src="/static/image/weixuanzhong.png"></image>
			</template>
			</l-radio>
            <text style="margin-left:0.2rem;">{{ item }}</text>
          </label>
        </l-radio-group>
      </view>
      <view class="form-item">
        <text class="label">促销销售顾问</text>
        <input class="input" v-model="clientInfo.salesAdvisor" placeholder="请输入店铺销售顾问" />
      </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="label">车牌车系</text>
        <picker class="picker" @change="bindCarBrandChange" :value="carBrandIndex" :range="carBrands">
          <view class="picker-text">{{ carBrands[carBrandIndex] || '请选择车辆品牌 >' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">车牌号</text>
        <input class="input" v-model="vehicleInfo.plateNumber" placeholder="456123351" />
      </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="label">产品名称</text>
        <text class="value">{{ selectedService }}</text>
      </view>
      <view class="form-item">
        <text class="label">服务年龄</text>
        <picker class="picker" @change="bindServiceAgeChange" :value="serviceAgeIndex" :range="serviceAges">
          <view class="picker-text">{{ serviceAges[serviceAgeIndex] || '请选择服务年龄 >' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">销售金额</text>
        <input class="input" v-model="productInfo.salesAmount" placeholder="请输入销售金额" />
      </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="label">收款方</text>
        <picker class="picker" @change="bindPayeeChange" :value="payeeIndex" :range="payees">
          <view class="picker-text">{{ payees[payeeIndex] || '请选择收款方 >' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">付款时间</text>
        <uni-datetime-picker class="timePiker" type="datetime" v-model="paymentInfo.paymentTime"  :clear-icon="false" :border="false">
		</uni-datetime-picker>
      </view>
    </view>
	
	
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedProduct: "自动填写所选商品服务分类",
      selectedStore: "自动填写所选择的门店",
      selectedService: "自动填写所选择的服务分类",
      
      clientInfo: {
        name: '',
        address: '',
        idNumber: '',
        contact: '',
        department: '',
        salesAdvisor: ''
      },
      
      vehicleInfo: {
        plateNumber: '456123351'
      },
      
      productInfo: {
        salesAmount: ''
      },
      
      paymentInfo: {
        paymentTime: ''
      },
      
      departments: ['售前', '售后', '二网车'],
      carBrands: ['品牌A', '品牌B', '品牌C'],
      carBrandIndex: -1,
      serviceAges: ['1年', '2年', '3年'],
      serviceAgeIndex: -1,
      payees: ['收款方A', '收款方B', '收款方C'],
      payeeIndex: -1,
	  
	  // 扫描
	  positiveImg: '/static/image/组件 4 – 1.png',//自己图片路径
	  upLoadPositiveImg: '',
	  // 反面身份证
	  reverseImg: '/static/image/组 71663.png', //自己图片路径
	  upLoadReverseImg: '',
	  // 行车驾驶证
	  carImg: '/static/image/组件 2 – 1.png', //自己图片路径
	  upLoadCarImg: '',
	  baidu_token:' '//百度token
	  
    }
  },
  methods: {
	  toBack(){
	  let canNavBack = getCurrentPages()
	  if( canNavBack && canNavBack.length>1) {  
	      uni.navigateBack() 
	  } else {  
	      history.back();  
	  } 
	  },
    handleDepartmentChange(e) {
      this.clientInfo.department = e.detail.value
    },
    bindCarBrandChange(e) {
      this.carBrandIndex = e.detail.value
    },
    bindServiceAgeChange(e) {
      this.serviceAgeIndex = e.detail.value
    },
    bindPayeeChange(e) {
      this.payeeIndex = e.detail.value
    },
	
	// file文件转base64
	getImageBase64(blob) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(blob);
			reader.onload = () => {
				const base64 = reader.result;
				resolve(base64);
			}
			reader.onerror = error => reject(error);
		});
	},
	// 身份证正面上传
	uploadPositive() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				this.upLoadPositiveImg = res.tempFilePaths[0]
				this.getImageBase64(res.tempFiles[0]).then(res => {
					this.uploadIdentify(res)
	 
				})
			}
		})
	},
	// 身份证反面上传
	uploadReverse() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				this.upLoadReverseImg = res.tempFilePaths[0]
				this.getImageBase64(res.tempFiles[0]).then(res => {
					this.uploadIdentify(res)
				})
			}
		})
	},
	// 获取百度token
	getACSS_TOKEN() {
		let that = this
		uni.request({
			// url: '/baiduApi/oauth/2.0/token',
			url: 'https://aip.baidubce.com/oauth/2.0/token',
			method: 'POST',
			data: {
				grant_type: 'client_credentials',
				client_id: '你的',
				client_secret: '你的',
			},
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			success: res => {
				this.baidu_token =  res.data.access_token
			}
		});
	},
	// 上传识别
	uploadIdentify(res) {
		uni.request({
			url: '/baiduApi/rest/2.0/ocr/v1/idcard?access_token=' + this.baidu_token,
			method: 'POST',
			data: {
				image: res,
				id_card_side: 'back' // 身份证 正反面  front：身份证含照片的一面  back：身份证带国徽的一面
			},
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			success: res => {
				console.log(res.data)
			}
		})
	},
  }
}
</script>

<style  scoped lang="scss">
.containers {
	height: 100%;
	width: 100%;
  background-color: #fff;
  	overflow-y:scroll;
  
}
.container::-webkit-scrollbar {
    display: none;
}
.section {
  // margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  margin: 0 1rem 0 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;
}

.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;
}
.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%;
			}
		}
	}
	
	/* 表单分区样式 */
	.con_size {
	  font-size: 1rem;
	  font-weight: bold;
	  margin: 1rem 0;
	  color: #000000;
	  display: flex;
	  flex-direction: row;
	}
	
	.con_size_img{
		height: 100%;
		width: 2%;
		margin-right: 2%;
	}
	
</style>