修改师傅多区域选择

src/core/models/user.js

@@ -104,9 +104,7 @@ export default {
                             id: response.data.worker.id,
                             uid: response.data.worker.uid,
                             avatar: response.data.worker.avatar,
-                            province: response.data.worker.province,
+                            area: response.data.worker.area,
-                            city: response.data.worker.city,
-                            area: response.data.worker.region,
                             cateIds: response.data.worker.service,
                             carTypeId: response.data.worker.car,
                             name: response.data.worker.name,

src/pages/member/service-info.vue

@@ -19,24 +19,12 @@
                     <!-- #endif -->
                     <text class="iconfont icon-jinru"></text>
                 </view>
-                <view class="input-item">
+                <view class="input-item" @click="selectAreaModal = true">
                     <text class="title">*服务区域</text>
-                    <view class="select-widget">
+                    <view class="select-widget" :class="{ active: currentAreaText.length > 0 }">
-                        <uni-data-picker
+                        <view class="picker-view limit-line clamp-1">
-                            :localdata="cityList"
+                            {{ currentAreaText ? currentAreaText : "请选择服务区域" }}
-                            placeholder="请选择服务区域"
+                        </view>
-                            popup-title="请选择服务区域"
-                            @change="changeArea"
-                        >
-                            <block v-if="province && city && area">
-                                <text class="preview">{{ province }}-{{ city }}-{{ area }}</text>
-                            </block>
-                            <!-- #ifdef MP-WEIXIN -->
-                            <block v-else>
-                                <text>请选择服务区域</text>
-                            </block>
-                            <!-- #endif -->
-                        </uni-data-picker>
                     </view>
                     <text class="iconfont icon-jinru"></text>
                 </view>
@@ -132,15 +120,35 @@
                 <view class="btn" @click="submit">提交审核</view>
             </view>
         </view>
+        <widget-modal title="选择服务区域" v-show="selectAreaModal" @close="selectAreaModal = false">
+            <view class="current-modal">
+                <view class="picker-box">
+                    <uni-data-picker
+                        :localdata="areaList"
+                        placeholder="选择服务区域"
+                        popup-title="选择服务区域"
+                        @change="changeArea"
+                    >
+                        <view class="picker-view">点击添加服务区域</view>
+                    </uni-data-picker>
+                </view>
+                <view class="current-list">
+                    <view class="current-item" v-for="(item, index) in currentAreaList" :key="index" @click="delArea(index)">
+                        {{ item }}
+                    </view>
+                </view>
+                <view class="btn" @click="selectAreaModal = false">确定</view>
+            </view>
+        </widget-modal>
         <widget-modal title="选择服务类型" v-show="selectCateModal" @close="selectCateModal = false">
-            <view class="current-cate-modal">
+            <view class="current-modal">
-                <view class="cate-picker">
+                <view class="picker-box">
                     <picker mode="selector" :range="cateList" range-key="name" @change="selectCate">
                         <view class="picker-view limit-line clamp-1">点击添加服务类型</view>
                     </picker>
                 </view>
-                <view class="current-cate-list">
+                <view class="current-list">
-                    <view class="current-cate-item" v-for="(item, index) in currentCateList" :key="index" @click="delCate(index)">
+                    <view class="current-item" v-for="(item, index) in currentCateList" :key="index" @click="delCate(index)">
                         {{ item.name }}
                     </view>
                 </view>
@@ -160,12 +168,12 @@ export default {
     data() {
         return {
             maxContentLength: 300,
+            selectAreaModal: false,
             selectCateModal: false,
             avatar: "",
-            province: "",
+            areaList: [],
-            city: "",
+            currentAreaText: "",
-            area: "",
+            currentAreaList: [],
-            cityList: [],
             serviceType: 0,
             serviceTypeText: "",
             serviceTypeList: [
@@ -203,9 +211,6 @@ export default {
         await this.$store.dispatch("user/info", true);
         if (this.finishInfo) {
             this.avatar = this.userInfo.worker.avatar;
-            this.province = this.userInfo.worker.province;
-            this.city = this.userInfo.worker.city;
-            this.area = this.userInfo.worker.area;
             this.carTypeId = this.userInfo.worker.carTypeId;
             this.name = this.userInfo.worker.name;
             this.idcardA = this.userInfo.worker.idcardA;
@@ -219,8 +224,15 @@ export default {
                     this.serviceTypeText = item.name;
                 }
             });
+            let currentAreaList = this.userInfo.worker.area.split(",");
+            currentAreaList.forEach((item) => {
+                if (item) {
+                    this.currentAreaList.push(item);
                 }
-        this.cityList = this.$models.system.getCity();
+            });
+            this.updatecurrentAreaText();
+        }
+        this.areaList = this.$models.system.getCity();
         this.$models.service.getInstallCate().then((list) => {
             this.cateList = list;
             if (this.finishInfo) {
@@ -251,6 +263,9 @@ export default {
     onShareTimeline() {},
     onShareAppMessage() {},
     methods: {
+        /**
+         * 上传头像
+         */
         uploadHeadImg() {
             this.$utils.chooseImage(1).then((tempFiles) => {
                 tempFiles.forEach((item) => {
@@ -260,11 +275,17 @@ export default {
                 });
             });
         },
+        /**
+         * 上传头像
+         */
         uploadAvatar(e) {
             this.$models.system.upload(e.detail.avatarUrl).then((response) => {
                 this.avatar = response.img;
             });
         },
+        /**
+         * 上传身份证
+         */
         uploadIdCardA() {
             this.$utils.chooseImage(1).then((tempFiles) => {
                 tempFiles.forEach((item) => {
@@ -274,6 +295,9 @@ export default {
                 });
             });
         },
+        /**
+         * 上传身份证
+         */
         uploadIdCardB() {
             this.$utils.chooseImage(1).then((tempFiles) => {
                 tempFiles.forEach((item) => {
@@ -283,6 +307,9 @@ export default {
                 });
             });
         },
+        /**
+         * 上传资质
+         */
         uploadLicense() {
             this.$utils.chooseImage(1).then((tempFiles) => {
                 tempFiles.forEach((item) => {
@@ -292,11 +319,34 @@ export default {
                 });
             });
         },
+        /**
+         * 选择服务区域
+         */
         changeArea(e) {
-            this.province = e.detail.value[0].text;
+            let data = e.detail.value;
-            this.city = e.detail.value[1].text;
+            let value = data[data.length - 1].text;
-            this.area = e.detail.value[2].text;
+            if (!this.currentAreaList.includes(value)) {
+                this.currentAreaList.push(value);
+            }
+            this.updatecurrentAreaText();
         },
+        /**
+         * 删除服务区域
+         */
+        delArea(index) {
+            this.currentAreaList.splice(index, 1);
+            this.updatecurrentAreaText();
+        },
+        updatecurrentAreaText() {
+            let areaArr = [];
+            this.currentAreaList.forEach((item) => {
+                areaArr.push(item);
+            });
+            this.currentAreaText = areaArr.join();
+        },
+        /**
+         * 选择服务分类
+         */
         changeServiceType(e) {
             this.serviceTypeList.forEach((item, index) => {
                 if (index == e.detail.value) {
@@ -309,6 +359,9 @@ export default {
                 this.carTypeText = "";
             }
         },
+        /**
+         * 选择服务
+         */
         selectCate(e) {
             let id = this.cateList[e.detail.value].id,
                 flag = false;
@@ -325,6 +378,9 @@ export default {
                 this.updateCurrentCateText();
             }
         },
+        /**
+         * 删除服务
+         */
         delCate(index) {
             this.currentCateList.splice(index, 1);
             this.updateCurrentCateText();
@@ -336,10 +392,16 @@ export default {
             });
             this.currentCateText = cateArr.join();
         },
+        /**
+         * 修改车型
+         */
         changeCarType(e) {
             this.carTypeId = this.carTypeList[e.detail.value].id;
             this.carTypeText = this.carTypeList[e.detail.value].name;
         },
+        /**
+         * 提交
+         */
         submit() {
             let cateIds = [];
             this.currentCateList.forEach((item) => {
@@ -347,10 +409,8 @@ export default {
             });
             let saveData = {
                 avatar: this.avatar,
-                province: this.province,
-                city: this.city,
-                region: this.area,
                 service: cateIds.join(","),
+                area: this.currentAreaList.join(","),
                 name: this.name,
                 mobile: this.mobile,
                 imga: this.idcardA,
@@ -379,8 +439,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.current-cate-modal {
+.current-modal {
-    .cate-picker {
+    .picker-box {
         width: 100%;
         border-bottom: 2rpx solid #d6d6d6;
         .picker-view {
@@ -390,9 +450,9 @@ export default {
             text-align: center;
         }
     }
-    .current-cate-list {
+    .current-list {
         margin: 30rpx 0 20rpx 0;
-        .current-cate-item {
+        .current-item {
             position: relative;
             display: inline-block;
             background-color: #ffa800;
@@ -404,7 +464,7 @@ export default {
             font-size: 28rpx;
             line-height: 28rpx;
         }
-        .current-cate-item::after {
+        .current-item::after {
             position: relative;
             top: -3rpx;
             display: inline-block;
@@ -416,7 +476,7 @@ export default {
         }
     }
     .btn {
-        width: 535rpx;
+        width: 100%;
         height: 68rpx;
         background: #7286f1;
         font-size: 32rpx;
@@ -455,15 +515,16 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
     display: flex;
     align-items: center;
     font-size: 28rpx;
     color: #c9c9c9;
+    box-sizing: border-box;
+    padding: 44rpx 44rpx 44rpx 190rpx;
     .picker-view,
     /deep/.uni-data-tree-input {
-        width: 670rpx;
+        width: 100%;
-        box-sizing: border-box;
-        padding: 44rpx 0 44rpx 190rpx;
     }
     /deep/.uni-data-tree-input {
         .preview {

src/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue

@@ -25,7 +25,6 @@
                         @click="handleNodeClick(item, i, j)"
                     >
                         <text class="item-text">{{ item[map.text] }}</text>
-                        <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
                     </view>
                 </scroll-view>
             </template>