You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
13 KiB
470 lines
13 KiB
<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>
|
|
<l-radio :checked="paymentMethod === '全款'" label="全款" fontSize="1rem" style="transform: scale(0.7);">
|
|
<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>
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">经销商</text>
|
|
<l-radio-group v-model="checked" @change="onChange" class="radio-group" >
|
|
<l-radio value="Beijing" label="个人" fontSize="1rem" style="margin-right: 1rem; transform: scale(0.7);">
|
|
<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>
|
|
<l-radio value="Shanghai" label="公司" fontSize="1rem" style="transform: scale(0.7);">
|
|
<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>
|
|
</l-radio-group>
|
|
</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 class="con_size">
|
|
<text class="label">上传凭证</text>
|
|
<wht-img-upload v-model="imageList" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="section">
|
|
<view class="form-button">
|
|
<button class=" button" @click="get_to" style="width: 60%;">提交去录单</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedProduct: "自动填写所选商品服务分类",
|
|
selectedStore: "自动填写所选择的门店",
|
|
selectedService: "自动填写所选择的服务分类",
|
|
paymentMethod: '全款', // 默认选中全款
|
|
customerType: '个人' , // 默认选中个人
|
|
clientInfo: {
|
|
name: '',
|
|
address: '',
|
|
idNumber: '',
|
|
contact: '',
|
|
department: '',
|
|
salesAdvisor: ''
|
|
},
|
|
imageList:[],
|
|
|
|
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: {
|
|
get_to(){
|
|
console.log(111);
|
|
},
|
|
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%;
|
|
}
|
|
|
|
|
|
.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>
|