不甘寂寞 2 年之前
父節點
當前提交
bb4e7d20ee

+ 66
- 46
personal-center/setting/car-information/car-card.vue 查看文件

@@ -8,7 +8,8 @@
</view>
<view class="item-right" @click="chooseImage(1)">
<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 class="item-row">
@@ -19,48 +20,55 @@
</view>
<view class="item-right" @click="chooseImage(2)">
<view class="empty-node"></view>
<image :src="state.installImg ?? defInstallImg" ></image>
<image :src="state.installImg ?? defInstallImg"></image>
</view>
</view>
<view class="btn">
<submit-button @submit="saveHandle" title="保存" ></submit-button>
<submit-button @submit="saveHandle" title="保存"></submit-button>
</view>
</view>
</template>

<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 defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`;
const defInstallImg = `${fileURL}image/applyCard/car-fu.png`;
const state = reactive({
headstockImg:null,
installImg:null
headstockImg: null,
installImg: null
});
//选择图片
const chooseImage = (type:number) => {
const chooseImage = (type: number) => {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
//sourceType: ['album','camera'],
success: function (res) {
success: function(res) {
console.log(res.tempFilePaths);
if (type === 1) {
state.headstockImg = res.tempFilePaths[0];
} else{
} else {
state.installImg = res.tempFilePaths[0];
}
}
});
}
//下一步
const saveHandle = ()=>{
if(!state.headstockImg || !state.installImg){
const saveHandle = () => {
if (!state.headstockImg || !state.installImg) {
msg('请按照要求上传图片!');
return;
}
@@ -69,35 +77,38 @@
</script>

<style>
page{
page {
background: #F3F3F3;
}
</style>
<style lang="scss" scoped>
.main{
.main {
overflow: hidden;
.item-row{
width: calc(100% - 60rpx);
margin-left: 30rpx;

.item-row {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
background: white;
padding: 30rpx;
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;
color: #333;
font-weight: bold;
}
.desc{

.desc {
font-size: 24rpx;
color: #999;
margin: 10rpx 0;
}
.flag{

.flag {
width: 110rpx;
height: 45rpx;
line-height: 42rpx;
@@ -109,18 +120,21 @@
background: #D9F8F1;
}
}
.item-right{

.item-right {
width: 295rpx;
height: 188rpx;
position: relative;
image{

image {
position: relative;
z-index: 10;
width: 100%;
height: 188rpx;
}
&::before{
content:'';

&::before {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -128,11 +142,12 @@
border-bottom: none;
border-right: none;
z-index: 0;
left:-4rpx;
left: -4rpx;
top: -4rpx;
}
&::after{
content:'';

&::after {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -144,13 +159,15 @@
bottom: -4rpx;
}
}
.empty-node{

.empty-node {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
&::before{
content:'';

&::before {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -158,11 +175,12 @@
border-left: none;
border-bottom: none;
z-index: 0;
right:-4rpx;
right: -4rpx;
top: -4rpx;
}
&::after{
content:'';

&::after {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -175,7 +193,8 @@
}
}
}
.hint{

.hint {
display: flex;
flex-direction: row;
justify-content: center;
@@ -183,19 +202,20 @@
color: #666666;
padding: 0px 30rpx;
margin-top: 60rpx;
.icon{
.icon {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
view{

view {
width: calc(100% - 36rpx);
}
}
.btn{
margin:470rpx 40rpx 30rpx;

.btn {
margin: 470rpx 40rpx 30rpx;
}
}
</style>


+ 1
- 1
personal-center/setting/car-information/car-change.vue 查看文件

@@ -322,7 +322,7 @@ const cardImageOcr = (val: any) => {
<style lang="scss" scoped>
.content {
position: relative;
margin-top: -50rpx;
// margin-top: -50rpx;
padding: 0rpx 30rpx;
position: relative;


+ 66
- 46
personal-center/setting/personal-information/user-card.vue 查看文件

@@ -8,7 +8,8 @@
</view>
<view class="item-right" @click="chooseImage(1)">
<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 class="item-row">
@@ -19,48 +20,55 @@
</view>
<view class="item-right" @click="chooseImage(2)">
<view class="empty-node"></view>
<image :src="state.installImg ?? defInstallImg" ></image>
<image :src="state.installImg ?? defInstallImg"></image>
</view>
</view>
<view class="btn">
<submit-button @submit="saveHandle" title="保存" ></submit-button>
<submit-button @submit="saveHandle" title="保存"></submit-button>
</view>
</view>
</template>

<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 defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`;
const defInstallImg = `${fileURL}image/applyCard/guohui.png`;
const state = reactive({
headstockImg:null,
installImg:null
headstockImg: null,
installImg: null
});
//选择图片
const chooseImage = (type:number) => {
const chooseImage = (type: number) => {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
//sourceType: ['album','camera'],
success: function (res) {
success: function(res) {
console.log(res.tempFilePaths);
if (type === 1) {
state.headstockImg = res.tempFilePaths[0];
} else{
} else {
state.installImg = res.tempFilePaths[0];
}
}
});
}
//下一步
const saveHandle = ()=>{
if(!state.headstockImg || !state.installImg){
const saveHandle = () => {
if (!state.headstockImg || !state.installImg) {
msg('请按照要求上传图片!');
return;
}
@@ -69,35 +77,38 @@
</script>

<style>
page{
page {
background: #F3F3F3;
}
</style>
<style lang="scss" scoped>
.main{
.main {
overflow: hidden;
.item-row{
width: calc(100% - 60rpx);
margin-left: 30rpx;

.item-row {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
background: white;
padding: 30rpx;
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;
color: #333;
font-weight: bold;
}
.desc{

.desc {
font-size: 24rpx;
color: #999;
margin: 10rpx 0;
}
.flag{

.flag {
width: 110rpx;
height: 45rpx;
line-height: 42rpx;
@@ -109,18 +120,21 @@
background: #D9F8F1;
}
}
.item-right{

.item-right {
width: 295rpx;
height: 188rpx;
position: relative;
image{

image {
position: relative;
z-index: 10;
width: 100%;
height: 188rpx;
}
&::before{
content:'';

&::before {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -128,11 +142,12 @@
border-bottom: none;
border-right: none;
z-index: 0;
left:-4rpx;
left: -4rpx;
top: -4rpx;
}
&::after{
content:'';

&::after {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -144,13 +159,15 @@
bottom: -4rpx;
}
}
.empty-node{

.empty-node {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
&::before{
content:'';

&::before {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -158,11 +175,12 @@
border-left: none;
border-bottom: none;
z-index: 0;
right:-4rpx;
right: -4rpx;
top: -4rpx;
}
&::after{
content:'';

&::after {
content: '';
position: absolute;
width: 22rpx;
height: 22rpx;
@@ -175,7 +193,8 @@
}
}
}
.hint{

.hint {
display: flex;
flex-direction: row;
justify-content: center;
@@ -183,19 +202,20 @@
color: #666666;
padding: 0px 30rpx;
margin-top: 60rpx;
.icon{
.icon {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
view{

view {
width: calc(100% - 36rpx);
}
}
.btn{
margin:470rpx 40rpx 30rpx;

.btn {
margin: 470rpx 40rpx 30rpx;
}
}
</style>


+ 42
- 25
personal-center/setting/personal-information/user-change.vue 查看文件

@@ -1,34 +1,45 @@
<template>
<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 class="subBtn">
<submit-button title="提交绑定" form-type="submit" @submit="formSubmit">
</submit-button>
</view>
</template>
<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({
ocrData: {
'conmpany': '贵州市空间加快速度公司',
@@ -43,30 +54,36 @@
'phone': ''
},
})
const timeClick = () => {
msg('证件有效期')
}
const formSubmit = () => {
msg('提交绑定')
};
</script>

<style>
page{
page {
background-color: #EEF7F7;
padding-top: 30rpx;
}
</style>

<style lang="scss" scoped>
.content{
.content {
background-color: white;
:deep(.u-cell){

:deep(.u-cell) {
padding: 23rpx 32rpx;
}

::v-deep .u-flex-1 {
width: 100%;
}
}

.subBtn {
padding: 500rpx 40rpx 60rpx;
}

Loading…
取消
儲存