不甘寂寞 2 jaren geleden
bovenliggende
commit
bb4e7d20ee

+ 66
- 46
personal-center/setting/car-information/car-card.vue Bestand weergeven

</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>


+ 1
- 1
personal-center/setting/car-information/car-change.vue Bestand weergeven

<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;



+ 66
- 46
personal-center/setting/personal-information/user-card.vue Bestand weergeven

</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>


+ 42
- 25
personal-center/setting/personal-information/user-change.vue Bestand weergeven

<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;
} }

Laden…
Annuleren
Opslaan