完成设置服务信息页面

src/pages/member/service-info.vue

@@ -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;
+        display: block;
-        align-items: center;
+        font-size: 30rpx;
-        justify-content: space-between;
+        color: #2d2d2d;
-        padding: 44rpx 0;
-        border-bottom: 2rpx solid #e8e7e7;
-        .title {
-            font-size: 30rpx;
-            color: #2d2d2d;
-        }
-        .iconfont {
-            color: #a7a7a7;
-        }
     }
-    .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;
+        padding-left: 190rpx;
-        .image {
-            width: 60rpx;
-            height: 60rpx;
-            border-radius: 50%;
-            overflow: hidden;
-        }
     }
-    .input-item-section {
+}
-        padding: 44rpx 0;
+.input-item-section.license {
-        .title {
+    border-bottom: 0;
-            position: relative;
+    padding-bottom: 0;
-            display: block;
+}
-            font-size: 30rpx;
+.profile-box {
-            color: #2d2d2d;
+    width: 100%;
-        }
+    box-sizing: border-box;
-        .desc {
+    padding: 34rpx 10rpx 0 10rpx;
-            position: absolute;
+    .username {
-            top: 0;
-            left: 0;
-            font-size: 28rpx;
-            color: #c9c9c9;
-            box-sizing: border-box;
-            padding-left: 190rpx;
-        }
-    }
-    .profile-box {
         width: 100%;
-        box-sizing: border-box;
+        padding: 32rpx 0;
-        padding: 34rpx 10rpx;
+        font-size: 30rpx;
-        .username {
+        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: 120rpx;
-            font-size: 30rpx;
+            color: #cccccc;
+        }
+        .text {
+            font-size: 24rpx;
             color: #666666;
-            line-height: 30rpx;
+            line-height: 24rpx;
-            border-bottom: 2rpx solid #e8e7e7;
         }
     }
 }
+.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>