完成设置服务信息页面
This commit is contained in:
parent
f64ddec11d
commit
a13c1110b0
|
|
@ -14,7 +14,14 @@
|
|||
</view>
|
||||
<view class="input-item">
|
||||
<text class="title">*服务区域</text>
|
||||
<picker mode="selector" :range="areaList" range-key="name" @change="changeArea" class="select-widget">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="areaList"
|
||||
range-key="name"
|
||||
@change="changeArea"
|
||||
class="select-widget"
|
||||
:class="{ active: areaText.length > 0 }"
|
||||
>
|
||||
<text class="limit-line clamp-1">
|
||||
{{ areaText ? areaText : "请选择服务区域" }}
|
||||
</text>
|
||||
|
|
@ -23,7 +30,14 @@
|
|||
</view>
|
||||
<view class="input-item">
|
||||
<text class="title">*服务分类</text>
|
||||
<picker mode="selector" :range="cateList" range-key="name" @change="changeCate" class="select-widget">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="cateList"
|
||||
range-key="name"
|
||||
@change="changeCate"
|
||||
class="select-widget"
|
||||
:class="{ active: cateText.length > 0 }"
|
||||
>
|
||||
<text class="limit-line clamp-1">
|
||||
{{ cateText ? cateText : "请选择服务分类" }}
|
||||
</text>
|
||||
|
|
@ -32,7 +46,14 @@
|
|||
</view>
|
||||
<view class="input-item">
|
||||
<text class="title">车辆类型</text>
|
||||
<picker mode="selector" :range="carTypeList" range-key="name" @change="changeCarType" class="select-widget">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="carTypeList"
|
||||
range-key="name"
|
||||
@change="changeCarType"
|
||||
class="select-widget"
|
||||
:class="{ active: carTypeText.length > 0 }"
|
||||
>
|
||||
<text class="limit-line clamp-1">
|
||||
{{ carTypeText ? carTypeText : "请选择车辆类型" }}
|
||||
</text>
|
||||
|
|
@ -47,6 +68,7 @@
|
|||
range-key="name"
|
||||
@change="changeServiceType"
|
||||
class="select-widget"
|
||||
:class="{ active: serviceTypeText.length > 0 }"
|
||||
>
|
||||
<text class="limit-line clamp-1">
|
||||
{{ serviceTypeText ? serviceTypeText : "请选择服务类型" }}
|
||||
|
|
@ -61,8 +83,43 @@
|
|||
class="username"
|
||||
v-model="username"
|
||||
placeholder="请输入您的姓名"
|
||||
placeholder-class="placeholder-style-6"
|
||||
placeholder-class="placeholder-style-5"
|
||||
/>
|
||||
<text class="upload-title">请上传您的身份证</text>
|
||||
<view class="upload-idcard">
|
||||
<view class="idcard-item" @click="uploadIdCardA">
|
||||
<image v-show="idcardA" class="image" :src="idcardA" mode="aspectFill" />
|
||||
<view v-show="!idcardA" class="icon">
|
||||
<text class="iconfont icon-shenfenzhengzhengmian"></text>
|
||||
<view class="text">上传身份证正面</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="idcard-item" @click="uploadIdCardB">
|
||||
<image v-show="idcardB" class="image" :src="idcardB" mode="aspectFill" />
|
||||
<view v-show="!idcardB" class="icon">
|
||||
<text class="iconfont icon-shenfenzhengzhengmian"></text>
|
||||
<view class="text">上传身份证反面</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item-section license noborder">
|
||||
<text class="title">服务资质<text class="desc">电工相关服务分类必上传</text></text>
|
||||
<view class="section-content-box">
|
||||
<view class="upload-image" @click="uploadLicense">
|
||||
<image v-show="license" :src="license" mode="aspectFill" />
|
||||
<view v-show="!license" class="icon">
|
||||
<text class="iconfont icon-shangchuantupian"></text>
|
||||
<view class="text">上传资质</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item-section noborder">
|
||||
<text class="title">*自我介绍<text class="desc">请输入个人的简要介绍</text></text>
|
||||
<view class="section-content-box">
|
||||
<textarea :maxlength="maxContentLength" class="textarea" v-model="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -80,6 +137,7 @@ export default {
|
|||
name: "member-service-info",
|
||||
data() {
|
||||
return {
|
||||
maxContentLength: 300,
|
||||
headimg: require("@/static/temp/member/2.png"),
|
||||
areaList: [
|
||||
{
|
||||
|
|
@ -121,6 +179,10 @@ export default {
|
|||
carTypeText: "",
|
||||
serviceTypeId: 0,
|
||||
serviceTypeText: "",
|
||||
idcardA: "",
|
||||
idcardB: "",
|
||||
license: "",
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -136,6 +198,15 @@ export default {
|
|||
uploadHeadImg() {
|
||||
uni.chooseImage({});
|
||||
},
|
||||
uploadIdCardA() {
|
||||
uni.chooseImage({});
|
||||
},
|
||||
uploadIdCardB() {
|
||||
uni.chooseImage({});
|
||||
},
|
||||
uploadLicense() {
|
||||
uni.chooseImage({});
|
||||
},
|
||||
changeArea(e) {
|
||||
this.areaText = this.areaList[e.detail.value].name;
|
||||
},
|
||||
|
|
@ -163,82 +234,162 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 0 16rpx;
|
||||
background-color: #ffffff;
|
||||
.input-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.input-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 44rpx 0;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
.input-item {
|
||||
.iconfont {
|
||||
color: #a7a7a7;
|
||||
}
|
||||
}
|
||||
.select-widget {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 190rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #c9c9c9;
|
||||
}
|
||||
.select-widget.active {
|
||||
color: #666666;
|
||||
}
|
||||
.headimg-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-right: 60rpx;
|
||||
.image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.input-item-section {
|
||||
padding: 44rpx 0;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
.title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 44rpx 0;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
.iconfont {
|
||||
color: #a7a7a7;
|
||||
}
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
.select-widget {
|
||||
.desc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 190rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #c9c9c9;
|
||||
}
|
||||
.headimg-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-right: 60rpx;
|
||||
.image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
padding-left: 190rpx;
|
||||
}
|
||||
.input-item-section {
|
||||
padding: 44rpx 0;
|
||||
.title {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
.desc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 28rpx;
|
||||
color: #c9c9c9;
|
||||
box-sizing: border-box;
|
||||
padding-left: 190rpx;
|
||||
}
|
||||
}
|
||||
.profile-box {
|
||||
}
|
||||
.input-item-section.license {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.profile-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 34rpx 10rpx 0 10rpx;
|
||||
.username {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 34rpx 10rpx;
|
||||
.username {
|
||||
padding: 32rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 30rpx;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
}
|
||||
}
|
||||
.upload-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 30rpx;
|
||||
margin: 44rpx 0;
|
||||
}
|
||||
.upload-idcard {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.idcard-item:first-child {
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
.idcard-item {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.image,
|
||||
.icon {
|
||||
width: 273rpx;
|
||||
height: 164rpx;
|
||||
}
|
||||
.icon {
|
||||
text-align: center;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 32rpx 0;
|
||||
font-size: 30rpx;
|
||||
font-size: 120rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 30rpx;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-content-box {
|
||||
margin-top: 40rpx;
|
||||
padding: 0 10rpx;
|
||||
.upload-image {
|
||||
display: inline-block;
|
||||
border: 1rpx solid #999999;
|
||||
}
|
||||
.image,
|
||||
.icon {
|
||||
width: 136rpx;
|
||||
height: 136rpx;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.iconfont {
|
||||
font-size: 60rpx;
|
||||
color: #999999;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 164rpx;
|
||||
border: 2rpx solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
padding: 10rpx;
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue