</view> | </view> | ||||
<view class="item-right" @click="chooseImage(1)"> | <view class="item-right" @click="chooseImage(1)"> | ||||
<view class="empty-node"></view> | <view class="empty-node"></view> | ||||
<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg" ></image> | |||||
<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg"> | |||||
</image> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="item-row"> | <view class="item-row"> | ||||
</view> | </view> | ||||
<view class="item-right" @click="chooseImage(2)"> | <view class="item-right" @click="chooseImage(2)"> | ||||
<view class="empty-node"></view> | <view class="empty-node"></view> | ||||
<image :src="state.installImg ?? defInstallImg" ></image> | |||||
<image :src="state.installImg ?? defInstallImg"></image> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="btn"> | <view class="btn"> | ||||
<submit-button @submit="saveHandle" title="保存" ></submit-button> | |||||
<submit-button @submit="saveHandle" title="保存"></submit-button> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { reactive } from "vue"; | |||||
import { msg, navTo } from '@/utils/utils'; | |||||
import {fileURL} from "@/datas/fileURL.js"; | |||||
import { | |||||
reactive | |||||
} from "vue"; | |||||
import { | |||||
msg, | |||||
navTo | |||||
} from '@/utils/utils'; | |||||
import { | |||||
fileURL | |||||
} from "@/datas/fileURL.js"; | |||||
const height = uni.getSystemInfoSync().windowHeight | const height = uni.getSystemInfoSync().windowHeight | ||||
const defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`; | const defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`; | ||||
const defInstallImg = `${fileURL}image/applyCard/car-fu.png`; | const defInstallImg = `${fileURL}image/applyCard/car-fu.png`; | ||||
const state = reactive({ | const state = reactive({ | ||||
headstockImg:null, | |||||
installImg:null | |||||
headstockImg: null, | |||||
installImg: null | |||||
}); | }); | ||||
//选择图片 | //选择图片 | ||||
const chooseImage = (type:number) => { | |||||
const chooseImage = (type: number) => { | |||||
uni.chooseImage({ | uni.chooseImage({ | ||||
count: 1, | count: 1, | ||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | ||||
//sourceType: ['album','camera'], | //sourceType: ['album','camera'], | ||||
success: function (res) { | |||||
success: function(res) { | |||||
console.log(res.tempFilePaths); | console.log(res.tempFilePaths); | ||||
if (type === 1) { | if (type === 1) { | ||||
state.headstockImg = res.tempFilePaths[0]; | state.headstockImg = res.tempFilePaths[0]; | ||||
} else{ | |||||
} else { | |||||
state.installImg = res.tempFilePaths[0]; | state.installImg = res.tempFilePaths[0]; | ||||
} | } | ||||
} | } | ||||
}); | }); | ||||
} | } | ||||
//下一步 | //下一步 | ||||
const saveHandle = ()=>{ | |||||
if(!state.headstockImg || !state.installImg){ | |||||
const saveHandle = () => { | |||||
if (!state.headstockImg || !state.installImg) { | |||||
msg('请按照要求上传图片!'); | msg('请按照要求上传图片!'); | ||||
return; | return; | ||||
} | } | ||||
</script> | </script> | ||||
<style> | <style> | ||||
page{ | |||||
page { | |||||
background: #F3F3F3; | background: #F3F3F3; | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.main{ | |||||
.main { | |||||
overflow: hidden; | overflow: hidden; | ||||
.item-row{ | |||||
width: calc(100% - 60rpx); | |||||
margin-left: 30rpx; | |||||
.item-row { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-top: 30rpx; | margin-top: 30rpx; | ||||
background: white; | background: white; | ||||
padding: 30rpx; | padding: 30rpx; | ||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223,223,223,0.8); | |||||
.item-left{ | |||||
.title{ | |||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||||
margin: 30rpx; | |||||
.item-left { | |||||
.title { | |||||
font-size: 34rpx; | font-size: 34rpx; | ||||
color: #333; | color: #333; | ||||
font-weight: bold; | font-weight: bold; | ||||
} | } | ||||
.desc{ | |||||
.desc { | |||||
font-size: 24rpx; | font-size: 24rpx; | ||||
color: #999; | color: #999; | ||||
margin: 10rpx 0; | margin: 10rpx 0; | ||||
} | } | ||||
.flag{ | |||||
.flag { | |||||
width: 110rpx; | width: 110rpx; | ||||
height: 45rpx; | height: 45rpx; | ||||
line-height: 42rpx; | line-height: 42rpx; | ||||
background: #D9F8F1; | background: #D9F8F1; | ||||
} | } | ||||
} | } | ||||
.item-right{ | |||||
.item-right { | |||||
width: 295rpx; | width: 295rpx; | ||||
height: 188rpx; | height: 188rpx; | ||||
position: relative; | position: relative; | ||||
image{ | |||||
image { | |||||
position: relative; | position: relative; | ||||
z-index: 10; | z-index: 10; | ||||
width: 100%; | width: 100%; | ||||
height: 188rpx; | height: 188rpx; | ||||
} | } | ||||
&::before{ | |||||
content:''; | |||||
&::before { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
border-bottom: none; | border-bottom: none; | ||||
border-right: none; | border-right: none; | ||||
z-index: 0; | z-index: 0; | ||||
left:-4rpx; | |||||
left: -4rpx; | |||||
top: -4rpx; | top: -4rpx; | ||||
} | } | ||||
&::after{ | |||||
content:''; | |||||
&::after { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
bottom: -4rpx; | bottom: -4rpx; | ||||
} | } | ||||
} | } | ||||
.empty-node{ | |||||
.empty-node { | |||||
position: absolute; | position: absolute; | ||||
z-index: 0; | z-index: 0; | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
&::before{ | |||||
content:''; | |||||
&::before { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
border-left: none; | border-left: none; | ||||
border-bottom: none; | border-bottom: none; | ||||
z-index: 0; | z-index: 0; | ||||
right:-4rpx; | |||||
right: -4rpx; | |||||
top: -4rpx; | top: -4rpx; | ||||
} | } | ||||
&::after{ | |||||
content:''; | |||||
&::after { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.hint{ | |||||
.hint { | |||||
display: flex; | display: flex; | ||||
flex-direction: row; | flex-direction: row; | ||||
justify-content: center; | justify-content: center; | ||||
color: #666666; | color: #666666; | ||||
padding: 0px 30rpx; | padding: 0px 30rpx; | ||||
margin-top: 60rpx; | margin-top: 60rpx; | ||||
.icon{ | |||||
.icon { | |||||
width: 36rpx; | width: 36rpx; | ||||
height: 36rpx; | height: 36rpx; | ||||
margin-right: 10rpx; | margin-right: 10rpx; | ||||
} | } | ||||
view{ | |||||
view { | |||||
width: calc(100% - 36rpx); | width: calc(100% - 36rpx); | ||||
} | } | ||||
} | } | ||||
.btn{ | |||||
margin:470rpx 40rpx 30rpx; | |||||
.btn { | |||||
margin: 470rpx 40rpx 30rpx; | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.content { | .content { | ||||
position: relative; | position: relative; | ||||
margin-top: -50rpx; | |||||
// margin-top: -50rpx; | |||||
padding: 0rpx 30rpx; | padding: 0rpx 30rpx; | ||||
position: relative; | position: relative; | ||||
</view> | </view> | ||||
<view class="item-right" @click="chooseImage(1)"> | <view class="item-right" @click="chooseImage(1)"> | ||||
<view class="empty-node"></view> | <view class="empty-node"></view> | ||||
<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg" ></image> | |||||
<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg"> | |||||
</image> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="item-row"> | <view class="item-row"> | ||||
</view> | </view> | ||||
<view class="item-right" @click="chooseImage(2)"> | <view class="item-right" @click="chooseImage(2)"> | ||||
<view class="empty-node"></view> | <view class="empty-node"></view> | ||||
<image :src="state.installImg ?? defInstallImg" ></image> | |||||
<image :src="state.installImg ?? defInstallImg"></image> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="btn"> | <view class="btn"> | ||||
<submit-button @submit="saveHandle" title="保存" ></submit-button> | |||||
<submit-button @submit="saveHandle" title="保存"></submit-button> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { reactive } from "vue"; | |||||
import { msg, navTo } from '@/utils/utils'; | |||||
import {fileURL} from "@/datas/fileURL.js"; | |||||
import { | |||||
reactive | |||||
} from "vue"; | |||||
import { | |||||
msg, | |||||
navTo | |||||
} from '@/utils/utils'; | |||||
import { | |||||
fileURL | |||||
} from "@/datas/fileURL.js"; | |||||
const height = uni.getSystemInfoSync().windowHeight | const height = uni.getSystemInfoSync().windowHeight | ||||
const defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`; | const defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`; | ||||
const defInstallImg = `${fileURL}image/applyCard/guohui.png`; | const defInstallImg = `${fileURL}image/applyCard/guohui.png`; | ||||
const state = reactive({ | const state = reactive({ | ||||
headstockImg:null, | |||||
installImg:null | |||||
headstockImg: null, | |||||
installImg: null | |||||
}); | }); | ||||
//选择图片 | //选择图片 | ||||
const chooseImage = (type:number) => { | |||||
const chooseImage = (type: number) => { | |||||
uni.chooseImage({ | uni.chooseImage({ | ||||
count: 1, | count: 1, | ||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | ||||
//sourceType: ['album','camera'], | //sourceType: ['album','camera'], | ||||
success: function (res) { | |||||
success: function(res) { | |||||
console.log(res.tempFilePaths); | console.log(res.tempFilePaths); | ||||
if (type === 1) { | if (type === 1) { | ||||
state.headstockImg = res.tempFilePaths[0]; | state.headstockImg = res.tempFilePaths[0]; | ||||
} else{ | |||||
} else { | |||||
state.installImg = res.tempFilePaths[0]; | state.installImg = res.tempFilePaths[0]; | ||||
} | } | ||||
} | } | ||||
}); | }); | ||||
} | } | ||||
//下一步 | //下一步 | ||||
const saveHandle = ()=>{ | |||||
if(!state.headstockImg || !state.installImg){ | |||||
const saveHandle = () => { | |||||
if (!state.headstockImg || !state.installImg) { | |||||
msg('请按照要求上传图片!'); | msg('请按照要求上传图片!'); | ||||
return; | return; | ||||
} | } | ||||
</script> | </script> | ||||
<style> | <style> | ||||
page{ | |||||
page { | |||||
background: #F3F3F3; | background: #F3F3F3; | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.main{ | |||||
.main { | |||||
overflow: hidden; | overflow: hidden; | ||||
.item-row{ | |||||
width: calc(100% - 60rpx); | |||||
margin-left: 30rpx; | |||||
.item-row { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-top: 30rpx; | margin-top: 30rpx; | ||||
background: white; | background: white; | ||||
padding: 30rpx; | padding: 30rpx; | ||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223,223,223,0.8); | |||||
.item-left{ | |||||
.title{ | |||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||||
margin: 30rpx; | |||||
.item-left { | |||||
.title { | |||||
font-size: 34rpx; | font-size: 34rpx; | ||||
color: #333; | color: #333; | ||||
font-weight: bold; | font-weight: bold; | ||||
} | } | ||||
.desc{ | |||||
.desc { | |||||
font-size: 24rpx; | font-size: 24rpx; | ||||
color: #999; | color: #999; | ||||
margin: 10rpx 0; | margin: 10rpx 0; | ||||
} | } | ||||
.flag{ | |||||
.flag { | |||||
width: 110rpx; | width: 110rpx; | ||||
height: 45rpx; | height: 45rpx; | ||||
line-height: 42rpx; | line-height: 42rpx; | ||||
background: #D9F8F1; | background: #D9F8F1; | ||||
} | } | ||||
} | } | ||||
.item-right{ | |||||
.item-right { | |||||
width: 295rpx; | width: 295rpx; | ||||
height: 188rpx; | height: 188rpx; | ||||
position: relative; | position: relative; | ||||
image{ | |||||
image { | |||||
position: relative; | position: relative; | ||||
z-index: 10; | z-index: 10; | ||||
width: 100%; | width: 100%; | ||||
height: 188rpx; | height: 188rpx; | ||||
} | } | ||||
&::before{ | |||||
content:''; | |||||
&::before { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
border-bottom: none; | border-bottom: none; | ||||
border-right: none; | border-right: none; | ||||
z-index: 0; | z-index: 0; | ||||
left:-4rpx; | |||||
left: -4rpx; | |||||
top: -4rpx; | top: -4rpx; | ||||
} | } | ||||
&::after{ | |||||
content:''; | |||||
&::after { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
bottom: -4rpx; | bottom: -4rpx; | ||||
} | } | ||||
} | } | ||||
.empty-node{ | |||||
.empty-node { | |||||
position: absolute; | position: absolute; | ||||
z-index: 0; | z-index: 0; | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
&::before{ | |||||
content:''; | |||||
&::before { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
border-left: none; | border-left: none; | ||||
border-bottom: none; | border-bottom: none; | ||||
z-index: 0; | z-index: 0; | ||||
right:-4rpx; | |||||
right: -4rpx; | |||||
top: -4rpx; | top: -4rpx; | ||||
} | } | ||||
&::after{ | |||||
content:''; | |||||
&::after { | |||||
content: ''; | |||||
position: absolute; | position: absolute; | ||||
width: 22rpx; | width: 22rpx; | ||||
height: 22rpx; | height: 22rpx; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.hint{ | |||||
.hint { | |||||
display: flex; | display: flex; | ||||
flex-direction: row; | flex-direction: row; | ||||
justify-content: center; | justify-content: center; | ||||
color: #666666; | color: #666666; | ||||
padding: 0px 30rpx; | padding: 0px 30rpx; | ||||
margin-top: 60rpx; | margin-top: 60rpx; | ||||
.icon{ | |||||
.icon { | |||||
width: 36rpx; | width: 36rpx; | ||||
height: 36rpx; | height: 36rpx; | ||||
margin-right: 10rpx; | margin-right: 10rpx; | ||||
} | } | ||||
view{ | |||||
view { | |||||
width: calc(100% - 36rpx); | width: calc(100% - 36rpx); | ||||
} | } | ||||
} | } | ||||
.btn{ | |||||
margin:470rpx 40rpx 30rpx; | |||||
.btn { | |||||
margin: 470rpx 40rpx 30rpx; | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
<template> | <template> | ||||
<view class="content"> | <view class="content"> | ||||
<u-field required labelWidth="180" v-model="state.ocrData.conmpany" input-align='right' label="姓名" | |||||
disabled=true :fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="性别" :fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.card" input-align='right' label="身份证号" :fieldStyle="fieldStyle"> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.conmpany" input-align='right' label="姓名" disabled=true | |||||
:fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="性别" | |||||
:fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.card" input-align='right' label="身份证号" | |||||
:fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="地址" :fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-cell-item required title="证件有效期" :borderBottom="false" @click="timeClick" | |||||
:titleStyle="{fontSize:'28rpx',color:'#777777'}" | |||||
:valueStyle="{fontSize:'28rpx',color:'#333333'}" | |||||
:value="state.ocrData.type"></u-cell-item> | |||||
<u-field required labelWidth="180" :borderTop="true" v-model="state.ocrData.type" input-align='right' label="联系方式" :fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
</u-field> | |||||
<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="地址" | |||||
:fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
<u-cell-item required title="证件有效期" :borderBottom="false" @click="timeClick" | |||||
:titleStyle="{fontSize:'28rpx',color:'#777777'}" :valueStyle="{fontSize:'28rpx',color:'#333333'}" | |||||
:value="state.ocrData.type"></u-cell-item> | |||||
<u-field required labelWidth="180" :borderTop="true" v-model="state.ocrData.type" input-align='right' | |||||
label="联系方式" :fieldStyle="fieldStyle"> | |||||
</u-field> | |||||
</view> | </view> | ||||
<view class="subBtn"> | <view class="subBtn"> | ||||
<submit-button title="提交绑定" form-type="submit" @submit="formSubmit"> | <submit-button title="提交绑定" form-type="submit" @submit="formSubmit"> | ||||
</submit-button> | </submit-button> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import {reactive} from "vue"; | |||||
import { msg } from "@/utils/utils"; | |||||
import { | |||||
reactive | |||||
} from "vue"; | |||||
import { | |||||
msg | |||||
} from "@/utils/utils"; | |||||
const fieldStyle = {height:'60rpx',color:'#333333',fontSize:'28rpx'}; | |||||
const fieldStyle = { | |||||
height: '60rpx', | |||||
color: '#333333', | |||||
fontSize: '28rpx' | |||||
}; | |||||
const state = reactive({ | const state = reactive({ | ||||
ocrData: { | ocrData: { | ||||
'conmpany': '贵州市空间加快速度公司', | 'conmpany': '贵州市空间加快速度公司', | ||||
'phone': '' | 'phone': '' | ||||
}, | }, | ||||
}) | }) | ||||
const timeClick = () => { | const timeClick = () => { | ||||
msg('证件有效期') | msg('证件有效期') | ||||
} | } | ||||
const formSubmit = () => { | const formSubmit = () => { | ||||
msg('提交绑定') | msg('提交绑定') | ||||
}; | }; | ||||
</script> | </script> | ||||
<style> | <style> | ||||
page{ | |||||
page { | |||||
background-color: #EEF7F7; | background-color: #EEF7F7; | ||||
padding-top: 30rpx; | padding-top: 30rpx; | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.content{ | |||||
.content { | |||||
background-color: white; | background-color: white; | ||||
:deep(.u-cell){ | |||||
:deep(.u-cell) { | |||||
padding: 23rpx 32rpx; | padding: 23rpx 32rpx; | ||||
} | } | ||||
::v-deep .u-flex-1 { | |||||
width: 100%; | |||||
} | |||||
} | } | ||||
.subBtn { | .subBtn { | ||||
padding: 500rpx 40rpx 60rpx; | padding: 500rpx 40rpx 60rpx; | ||||
} | } |