合同小程序前端代码仓库
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.
 
 
 
 
 

890 lines
26 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="clientInfo.payType === '全款'" 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 @change="onChange" class="radio-group" >
<l-radio :checked= "clientInfo.custType == 0?true:false" value="个人" 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 :checked= "clientInfo.custType == 1?true:false" value="公司" 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" @tap.prevent="uploadPositive">
<image :src="clientInfo.certFront == ''?positiveImg:certFront" >
</image>
<text v-if="certFront == ''?true:false">身份证人像面</text>
</view>
<view class="reverse" @tap.prevent="uploadReverse">
<image :src="clientInfo.certBack == ''?reverseImg:certBack" >
</image>
<text v-if="certBack == ''?true:false">身份证国徽面</text>
</view>
<view class="reverse" @tap.prevent="uploadCarCert">
<image :src="clientInfo.carPic == ''?carImg:carPic" >
</image>
<text v-if="carPic == ''?true:false">车辆合格证</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">{{ clientInfo.productName }}</text>
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">经销商</text>
<text class="value">{{ clientInfo.storeName }}</text>
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">客户姓名</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.custName" placeholder="请输入客户姓名" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">居住地址</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.custAddress" placeholder="请输入居住地址" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">身份证号码</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.custCardNo" placeholder="请输入身份证号码" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">联系方式</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.custPhone" placeholder="请输入联系方式" />
</view>
<view class="form-item">
<text class="labels">*</text>
<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.salePort === 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="labels">*</text>
<text class="label">店端销售顾问</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.saleName" 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="labels">*</text>
<text class="label">车牌车系</text>
<view class="picker" @click="getCar">
<view class="picker-text">{{ clientInfo.appOrderCarList[0].carSeries || '请选择车辆品牌 >' }}</view>
</view>
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">车辆型号</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.appOrderCarList[0].carModel" placeholder="请输入车辆型号" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">车架号</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.appOrderCarList[0].vin" placeholder="请输入车架号" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">车辆类型</text>
<picker class="picker" @change="bindCarBrandChanges" :value="carBrandIndex" :range="carType">
<view class="picker-text">{{ clientInfo.appOrderCarList[0].carType || '请选择车辆类型 >' }}</view>
</picker>
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">使用性质</text>
<picker class="picker" @change="binduseTypeChanges" :value="useTypeIndex" :range="useType">
<view class="picker-text">{{ clientInfo.appOrderCarList[0].useType || '请选择使用性质 >' }}</view>
</picker>
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">是否新车</text>
<l-radio-group @change="onChanges" class="radio-group" >
<l-radio :checked= "clientInfo.appOrderCarList[0].newCar == 1?true:false" value="是" 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 :checked= "clientInfo.appOrderCarList[0].newCar == 0?true:false" value="否" 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 class="form-item">
<text class="label">车牌号</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.appOrderCarList[0].carNo" placeholder="请输入车牌号" />
</view>
<view class="form-item">
<text class="labels">*</text>
<text class="label">发动机号</text>
<textarea auto-height :adjust-position="true" class="input" v-model="clientInfo.appOrderCarList[0].engineNo" placeholder="请输入发动机号" />
</view>
</view>
<!-- 凭证信息 -->
<view class="section">
<view class="con_size">
<image src="/static/image/矩形 5315.png" class='con_size_img' ></image>凭证信息</view>
<view class="con_size">
<text class="labels">*</text>
<text class="label">支付凭证</text>
<uv-upload
:fileList="fileList1"
name="1"
multiple
:maxCount="1"
@afterRead="afterRead"
@delete="deletePic"
><image
src="/static/image/组件 5 – 1.png"
mode="widthFix"
style="width: 100px;height: 150px;"
></image></uv-upload>
</view>
<view class="con_size">
<text class="labels">*</text>
<text class="label">发票信息</text>
<uv-upload
:fileList="fileList2"
name="2"
multiple
:maxCount="1"
@afterRead="afterRead"
@delete="deletePic"
><image
src="/static/image/组件 5 – 1.png"
mode="widthFix"
style="width: 100px;height: 150px;"
></image></uv-upload>
</view>
</view>
<view class="sections">
<view class="form-button">
<button class=" button" @click="get_to" style="width: 60%;">提交去录单</button>
</view>
</view>
</view>
</template>
<script>
import {idCardInfo,carCert,upload,getChildListBatch,add,isToken} from '@/api.uts'
export default {
data() {
return {
uploadConfig:{
// 上传地址
url:'https://gpt.aiym.run/contract/miniapp/file/upload',
// 文件字段名
name: 'file',
// 请求头
header: {},
// 附带的表单数据
formData: {
'biz': 'cert'
},
// 是否开启实际上传
enabled: true
},
clientInfo: {
appOrderCarList: [
{
buyMoney: 0,
buyTax: 0,
carModel: "",
carNo: "",
carSeries: "",
carType: "",
engineNo: "",
newCar: 0,
useType: "",
vin: ""
}
],
appOrderVoucherList: [
{
dealerAddress: "",
firstBeneficiary: "",
packageMoney: 0,
serviceMoney: 0
}
],
carPic: "",
certBack: "",
certFront: "",
custAddress: "",
custCardNo: "",
custName: "",
custPhone: "",
custType: 0,
invoiceUrl:"",
payType: '全款', // 默认选中全款
payVoucherUrl: "",
payee: "",
productName: "自动填写所选商品服务分类",
productServiceYear: 1,
saleName: "",
salePort: ''||"售前",
status: 0,
storeName: "自动填写所选择的门店"
},
fileList1:[],
fileList2:[],
departments: ['售前', '售后', '二网车'],
carType : ['燃油车','新能源'],
useType : ['非营运','营运'],
carBrandIndex: -1,
useTypeIndex: -1,
serviceAges: ['1年', '2年', '3年'],
serviceAgeIndex: -1,
payees: [],
payeeIndex: -1,
screenHeight: 0, //屏幕可视高度
curHeight: 0, //页面需要的动态高
// 扫描
positiveImg: '/static/image/组件 4 – 1.png',//自己图片路径
certFront:'',
carPic:'',
certBack:'',
// 反面身份证
reverseImg: '/static/image/组 71663.png', //自己图片路径
// 行车驾驶证
carImg: '/static/image/组件 2 – 1.png' //自己图片路径
}
},
onLoad(options) {
isToken();
this.clientInfo.storeName = getApp().storeName || "自动填写所选择的门店";
this.clientInfo.productName = getApp().productName || "自动填写所选商品服务分类";
this.clientInfo.appOrderVoucherList[0].dealerAddress = getApp().dealerAddress;
for (var index = 0; index < getApp().allMsg.length; index++) {
this.payees.push(getApp().allMsg[index].storeName);
}
this.clientInfo.payee = getApp().storeName;
this.uploadConfig.header = {
'X-Access-Token':uni.getStorageSync('token')
}
let clientInfo = JSON.parse(decodeURIComponent(options.clientInfo));
// console.log('5',clientInfo)
if(clientInfo){
this.clientInfo= JSON.parse(decodeURIComponent(options.clientInfo))
this.certFront = getApp().certFront;
this.carPic =getApp().carPic;
this.certBack = getApp().certBack;
// console.log('111',this.certFront ,this.carPic,this.certBack)
}
},
onUpload() {
// 页面销毁时移除监听
uni.offKeyboardHeightChange();
},
methods: {
// 凭证上传函数
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 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,event.name)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url,name) {
let token = uni.getStorageSync('token')
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'https://www.shengchuangyunkong.com/contract/miniapp/file/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
biz: 'test'
},
header:{
'X-Access-Token':token
},
success: (res) => {
if(name == '1'){
this.clientInfo.payVoucherUrl = JSON.parse(res.data).message;
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}else{
this.clientInfo.invoiceUrl = JSON.parse(res.data).message;
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
}
});
})
},
isEmpty(value) {
if (value === null || value === undefined ) return false;
if (typeof value === "string" && value.trim() === "") return false;
if (Array.isArray(value) && value.length === 0) return false;
if (typeof value === "object" && Object.keys(value).length === 0) return false;
return true;
},
get_to(){
console.log('suss', JSON.parse(JSON.stringify(this.clientInfo) ));
for (var i in this.clientInfo) {
if (typeof this.clientInfo[i] == 'object') {
for (var j in this.clientInfo[i]) {
for (var k in this.clientInfo[i][j]) {
if(!this.isEmpty(this.clientInfo[i][j][k])&& k!="carNo"&&k!="lender"&&k!="lenderMoney"&&k!="lenderYear"){
uni.showToast({
title: "提交失败,请检查字段是否未填!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
});
return false
}
}
}
}else{
if(!this.isEmpty(this.clientInfo[i])){
uni.showToast({
title: "提交失败,请检查字段是否未填!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
});
return false
}
}
}
add(this.clientInfo).then((res)=>{
if(res.success){
uni.showToast({
title: "提交成功",
icon: 'success',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
});
uni.switchTab (
{ url: '/pages/index/dingdan' }
)
}else{
uni.showToast({
title: "提交失败,请检查格式!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
});
}
}).catch((err)=>{
console.log('err',err);
})
},
getCar(){
getApp().flag = 1;
uni.navigateTo(
{
url: '/pages/views/carOne?clientInfo=' + encodeURIComponent(JSON.stringify(this.clientInfo))
}
)
getApp().certFront = this.certFront;
getApp().carPic = this.carPic;
getApp().certBack =this.certBack;
},
toBack(){
// console.log('111')
uni.navigateBack({delta: 1})
},
handleDepartmentChange(e) {
this.clientInfo.salePort = e;
},
// 修改车辆类型
bindCarBrandChanges(e){
this.clientInfo.appOrderCarList[0].carType = this.carType[e.detail.value];
},
// 修改车辆类型
binduseTypeChanges(e){
this.clientInfo.appOrderCarList[0].useType = this.useType[e.detail.value];
},
// 取服务年限
bindServiceAgeChange(e) {
this.serviceAgeIndex = e.detail.value
if(this.serviceAges[e.detail.value] == '1年'){
this.clientInfo.productServiceYear = 1;
}else if(this.serviceAges[e.detail.value] == '2年' ){
this.clientInfo.productServiceYear = 2;
}else{
this.clientInfo.productServiceYear = 3;
};
},
// 选择收款方
bindPayeeChange(e) {
this.payeeIndex = e.detail.value
this.clientInfo.payee= this.payees[e.detail.value];
},
msToDate (msec) {
let datetime = new Date(msec);
let year = datetime.getFullYear();
let month = datetime.getMonth();
let date = datetime.getDate();
let hour = datetime.getHours();
let minute = datetime.getMinutes();
let second = datetime.getSeconds();
let result1 = year +
'-' +
((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
'-' +
((date + 1) < 10 ? '0' + date : date) +
' ' +
((hour + 1) < 10 ? '0' + hour : hour) +
':' +
((minute + 1) < 10 ? '0' + minute : minute) +
':' +
((second + 1) < 10 ? '0' + second : second);
let result2 = year +
'-' +
((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
'-' +
((date + 1) < 10 ? '0' + date : date);
let result = {
hasTime: result1,
withoutTime: result2
};
return result;
},
// 修改生效时间
changeEffectiveTime(e){
var dateTime = new Date(e);
dateTime.setDate(dateTime.getDate() + 2);
dateTime = new Date(dateTime);
// console.log(this.msToDate(dateTime).withoutTime);
this.clientInfo.appOrderVoucherList[0].effectiveTime = this.msToDate(dateTime).withoutTime
},
changeTime(e){
console.log(e)
if(this.clientInfo.appOrderVoucherList[0].effectiveTime){
var dateTime = new Date(this.clientInfo.appOrderVoucherList[0].effectiveTime);
let year = Number(dateTime.getFullYear()) + Number(e.detail.value);
dateTime.setFullYear(year);
dateTime = new Date(dateTime);
// console.log(this.msToDate(dateTime).withoutTime);
this.clientInfo.appOrderVoucherList[0].endTime = this.msToDate(dateTime).withoutTime
}else{
uni.showToast({
title: "请先选择生效时间!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
})
}
},
changebuyTax(){
this.clientInfo.appOrderCarList[0].buyTax = (this.clientInfo.appOrderCarList[0].buyMoney/11.3).toFixed(2)
},
// 身份证正面上传
uploadPositive() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
let filePath = res.tempFilePaths[0];
let token = uni.getStorageSync('token');
this.uploadIdentify(token,'front',filePath,'sfz');
}
})
},
// 身份证反面上传
uploadReverse() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
let filePath = res.tempFilePaths[0];
let token = uni.getStorageSync('token');
this.uploadIdentify(token,'back',filePath,'sfz')
}
})
},
uploadCarCert() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
let filePath = res.tempFilePaths[0];
let token = uni.getStorageSync('token');
this.uploadIdentify(token,'',filePath,'carCert')
}
})
},
// 上传识别
uploadIdentify(token,side,filePath,type) {
uni.uploadFile({
url: 'https://www.shengchuangyunkong.com/contract/miniapp/file/upload', //仅为示例,非真实的接口地址
filePath:filePath,
name: 'file',
formData: {
'biz': 'cert'
},
header:{
'X-Access-Token':token
},
success: (res) => {
let image = JSON.parse(res.data).message;
// console.log(image);
if(type == "sfz"){
idCardInfo({'side':side,'url':JSON.parse(res.data).message}).then((res)=>{
if(res.success){
if(side == 'front'){
this.clientInfo.custName =res.result.name;
this.clientInfo.appOrderVoucherList[0].firstBeneficiary = res.result.name;
this.clientInfo.custAddress= res.result.address;
this.clientInfo.custCardNo = res.result.idCard ;
this.clientInfo.certFront = image;
this.certFront=filePath;
}else {
this.clientInfo.certBack=image;
this.certBack=filePath;
}
}else{
uni.showToast({
title: "身份证识别错误,请重新上传!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
})
}
}).catch(err => {
console.log("catch: ", err);
})
}else if(type == 'carCert' ){
// 处理车辆信息
carCert({'url':JSON.parse(res.data).message}).then((res)=>{
if(res.success){
// 车架号
this.clientInfo.appOrderCarList[0].vin = res.result.VinNo;
this.clientInfo.carPic = image;
this.carPic = filePath;
// 发动机号
this.clientInfo.appOrderCarList[0].engineNo = res.result.EngineNo;
// 车辆型号
this.clientInfo.appOrderCarList[0].carModel = res.result.CarModel;
}else{
uni.showToast({
title: "识别错误,请重新上传!",
icon: 'error',
duration: 500,
success: (res) => {
},
fail: (res) => {
},
})
}
}).catch((err)=>{
console.log("catch: ", err);
})
}
},
fail:(err)=>{
console.log(err)
}
});
},
onChange(e){
// console.log(e);
if(e == '个人'){
this.clientInfo.custType = 0;
}else{
this.clientInfo.custType = 1;
}
},
onChanges(e){
if(e == '是'){
this.clientInfo.appOrderCarList[0].newCar = 1;
}else{
this.clientInfo.appOrderCarList[0].newCar = 0;
}
}
}
}
</script>
<style scoped lang="scss">
.containers {
height: 100vh;
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;
height: 100%;
}
.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>