新增个人中心、个人信息、电子证件、服务范围

master
chen 2022-03-18 08:54:51 +08:00
parent ab5d7053a0
commit 066e471515
15 changed files with 259 additions and 15 deletions

View File

@ -33,6 +33,11 @@
.width46{width: 46%;}
.width45{width: 45%;}
.width33{width: 33%;}
.width30{width: 30%;}
.width29{width: 29%;}
.width28{width: 28%;}
.width27{width: 27%;}
.width26{width: 26%;}
.width25{width: 25%;}
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
@ -314,6 +319,10 @@ button:after{content: none!important;}
.pad-s36{padding-top: 36rpx;}
.pad-s40{padding-top: 40rpx;}
.pad-s50{padding-top: 50rpx;}
.pad-s120{padding-top: 120rpx;}
.pad-s140{padding-top: 140rpx;}
.pad-s160{padding-top: 160rpx;}
.pad-s180{padding-top: 180rpx;}
/* 下---内边距 */
.pad-x10{padding-bottom: 10rpx;}
.pad-x20{padding-bottom: 20rpx;}

View File

@ -220,4 +220,58 @@ uni-radio .uni-radio-input {border: 1rpx solid #444444;}
color: #FFFFFF;
margin-top: 40rpx;
}
/* 个人信息页面 */
.gender-box {margin-right: 80rpx;color: #333333;}
.gender-box view{
position: relative;
width: 20rpx;
height: 20rpx;
border: 4rpx solid #818181;
border-radius: 100%;
margin-right: 10rpx;
}
.gender-box view::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
content: '';
display: block;
width: 14rpx;
height: 14rpx;
background-color: #818181;
border-radius: 100%;
}
.gender-active view{
border: 4rpx solid #d81e06!important;
}
.gender-active view::before {
background-color: #d81e06!important;
}
.person-btn {
margin: 0 40rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
border-radius: 88rpx;
background-color: #03affb;
color: #FFFFFF;
margin-top: 40rpx;
}
/* 电子证件 */
.electronic-head{
background-color: #03affb;
padding-top: 80rpx;
}
/* 服务范围 */
.service-range-status {
background-color: #cdcdcd;
color: #333333;
padding: 6rpx 20rpx;
border-radius: 6rpx;
}
.service-range-activeStatus {
background-color: #03affb;
color: #FFFFFF;
}

View File

@ -180,7 +180,7 @@
.return-box i {font-size: 56rpx;}
.tab-title{
width: 100%;
font-size: 38rpx;
font-size: 32rpx;
display: flex;
}
.tab-title .title-box{margin-top: -4rpx;}

View File

@ -4,8 +4,11 @@ import App from './App';
import nothingPage from './components/nothing/nothing-page.vue';//引入无内容组件
Vue.component('nothing-page',nothingPage);//全局注册无内容组件
import footTabOne from './components/foot-tabs/foot-tab-one.vue';//引入容器组件
Vue.component('foot-tab',footTabOne);//全局注册容器组件
import statusNav from './components/status-nav.vue';//引入头部状态栏与导航栏组件
Vue.component('status-nav',statusNav);//全局注册头部状态栏与导航栏组件
import containerSubgroupTwo from './components/containers/container-subgroup-two.vue';//引入头部状态栏与导航栏组件
Vue.component('container-subgroup',containerSubgroupTwo);//全局注册头部状态栏与导航栏组件
import share from './jsFile/share.js';// 全局注册分享事件
Vue.mixin(share);

View File

@ -32,8 +32,8 @@
}, {
"path": "pages/tabbar/my/my",
"style": {
"navigationBarTitleText": "个人中心",
"navigationStyle": "custom" //
"navigationBarTitleText": "个人中心"
}
}, {
"path": "pages/login/agreement",
@ -176,6 +176,12 @@
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF", //
"backgroundColor": "#FFFFFF" //
"backgroundColor": "#FFFFFF" ,//
"navigationStyle": "custom" ,//
"app-plus": {
"titleNView": false, //APPH5
"bounce": "none",
"scrollIndicator": "none"
}
}
}

View File

@ -6,7 +6,12 @@
</template>
<script>
//
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
export default {
components:{
'foot-tab' :footTabOne
},
data() {
return {

View File

@ -58,8 +58,9 @@
//
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
//
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
export default {
components:{statusNavSlot,cmdProgress},
components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne},
data() {
return {
backgroudColor:'rgba(255,255,255,0)',

View File

@ -213,11 +213,13 @@
import pitera from '@/components/nothing/pitera.vue';
//
import lwNotice from '@/components/lw-notice/lw-notice.vue';
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
export default {
components:{
pitera,
statusNavSlot,
lwNotice
lwNotice,
'foot-tab' :footTabOne
},
data() {
return {

View File

@ -6,7 +6,12 @@
</template>
<script>
//
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
export default {
components:{
'foot-tab' :footTabOne
},
data() {
return {

View File

@ -1,6 +1,28 @@
<template>
<view>
<status-nav navBarTitle="电子证件" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content">
<view class="mar-s40 mar-zy10" style="box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.3);">
<view class="bacf" style="padding: 4rpx;border-radius: 30rpx;">
<view class="electronic-head disjcac fc">
<image src="/static/public/icon-electronic-logo.png" mode="widthFix" lazy-load style="width: 347rpx;height: 85rpx;"></image>
<view class="colf fon52 mar-sx30" style="letter-spacing: 6rpx;">IDCW-0000</view>
<image class="mar-s20" src="/static/deleteImg/flying-img06.png" mode="aspectFill" style="width: 258rpx;height: 258rpx;border-radius: 100%;margin-bottom: -130rpx;border: 6rpx solid #edf1ff;background-color: #edf1ff;"></image>
</view>
<view class="pad-s140 mar-s30 disjcac fc">
<view class="col3 fon68">姓名</view>
<view class="fon32 col6 mar-sx30">市场部门 | 技术支持</view>
<view class="fon22 col3 tcenter line-h36" style="margin: 60rpx 0 60rpx 0;">
<view>+86 123 4567 8910</view>
<view>12345678910qwer@890.com</view>
<view>WWW.12345678910.com</view>
</view>
</view>
</view>
</view>
</view>
</container-subgroup>
</view>
</template>

View File

@ -1,18 +1,93 @@
<template>
<view>
<status-nav navBarTitle="个人信息" returnColor="#c2c2c2"></status-nav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -30rpx;">
<view class="mar-s20 fon28">
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30">我的昵称</view>
<view style="color: #8b8b8b;">156****0510</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30">姓名</view>
<view style="color: #8b8b8b;">156****0510</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30">性别</view>
<view class="disac">
<view @tap="chooseGender(1)" class="disac gender-box" :class="genderNum==1 ? 'gender-active' : ''">
<view></view>
<text></text>
</view>
<view @tap="chooseGender(2)" class="disac gender-box" :class="genderNum==2 ? 'gender-active' : ''">
<view></view>
<text></text>
</view>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30">联系电话</view>
<view style="color: #8b8b8b;">15616330510</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30">电子邮箱</view>
<view style="color: #8b8b8b;">7607640@qq.com</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot mar-s10">
<view class="bold width30">身份证号码</view>
<view style="color: #8b8b8b;">430225199708210800</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">身份证正反面</view>
<view style="color: #f26803;" class="width100 disjbac">
<text>查看</text>
<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">意外险材料</view>
<view style="color: #f26803;" class="width100 disjbac">
<text>查看</text>
<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold flexs mar-y40">签署工程师合作协议</view>
<view style="color: #f26803;" class="width100 disjbac">
<text>查看</text>
<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">技能证书</view>
<view style="color: #f26803;" class="width100 disjbac">
<text>查看</text>
<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
</view>
<view class="person-btn">提交保存</view>
</view>
</container-subgroup-two>
</view>
</template>
<script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default {
components:{
containerSubgroupTwo
},
data() {
return {
genderNum:1 // 1 2
}
},
methods: {
//
chooseGender(index){
this.genderNum = index;
}
}
}
</script>

View File

@ -1,6 +1,49 @@
<template>
<view>
<status-nav navBarTitle="服务范围" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: 20rpx -30rpx 0rpx -30rpx;padding-bottom: 120rpx;" class="fon28 bacf">
<view class="bbot disac pad-sx30 pad-zy30">
<view class="mar-y30">人员状态 <text style="color: red;">*</text></view>
<view class="disac">
<view @tap="chooseStatus(index,0)" v-for="(item,index) in personnelStatus" :key="index" class="service-range-status mar-y10" :class="statusNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
</view>
</view>
<view class="bbot disac pad-sx30 pad-zy30">
<view class="mar-y30">工作时段 <text style="color: red;">*</text></view>
<view class="disac">
<view @tap="chooseStatus(index,1)" v-for="(item,index) in workingHours" :key="index" class="service-range-status mar-y10" :class="hoursNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
</view>
</view>
<view class="bbot disac pad-sx30 pad-zy30">
<view class="mar-y30"> <text style="margin-left: 58rpx;"></text> <text style="color: red;">*</text></view>
<view class="disjbac width100">
<view>湖南省株洲市芦淞区</view>
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
</view>
</view>
<view class="bbot disac pad-sx30 pad-zy30">
<view class="mar-y30">详细地址 <text style="color: red;">*</text></view>
<view class="disac">
<input class="fon28" type="text" placeholder="请输入详细地址" placeholder-style="font-size:28rpx;"/>
</view>
</view>
<view class="bbot disac pad-sx30 pad-zy30">
<view class="mar-y30 flexs">服务范围 <text style="color: red;">*</text></view>
<scroll-view scroll-x style="width: 76%;">
<view class="disac">
<view @tap="chooseStatus(index,2)" v-for="(item,index) in serviceRange" :key="index" class="service-range-status mar-y10 flexs" :class="rangeNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
</view>
</scroll-view>
</view>
<view class="bbot disjcac fc pad-sx30 pad-zy30">
<textarea class="fon28" v-model="remarkText" maxlength="50" placeholder="特殊情况请备注" placeholder-style="font-size: 28rpx;color:#bbbbbb;" style="height: 160rpx;width: 100%;" />
<view class="col9">{{remarkText.length}}/50</view>
</view>
</view>
</container-subgroup>
<!-- 提交保存 -->
<view class="person-btn" style="margin-top: -60rpx;">提交保存</view>
</view>
</template>
@ -8,11 +51,30 @@
export default {
data() {
return {
personnelStatus:['工作状态','休息状态'],
statusNum:0,
workingHours:['不限','白天','晚上'],
hoursNum:0,
serviceRange:['30KM','80KM','1500KM','其他','其他','其他','其他'],
rangeNum:0,
remarkText:''
}
},
methods: {
//
chooseStatus(index,num){
switch (num){
case 0:
this.statusNum = index;
break;
case 1:
this.hoursNum = index;
break;
case 2:
this.rangeNum = index;
break;
}
},
}
}
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB