完成服务类型多选

src/core/models/user.js

@@ -99,7 +99,8 @@ export default {
                             avatar: response.data.worker.avatar,
                             province: response.data.worker.province,
                             city: response.data.worker.city,
-                            cateId: response.data.worker.service,
+                            area: response.data.worker.region,
+                            cateIds: response.data.worker.service,
                             carTypeId: response.data.worker.car,
                             name: response.data.worker.name,
                             mobile: response.data.worker.mobile,

src/pages/member/service-info.vue

@@ -28,8 +28,8 @@
                             popup-title="请选择服务区域"
                             @change="changeArea"
                         >
-                            <block v-if="province && city">
+                            <block v-if="province && city && area">
-                                <text class="preview">{{ province }} - {{ city }}</text>
+                                <text class="preview">{{ province }}-{{ city }}-{{ area }}</text>
                             </block>
                             <!-- #ifdef MP-WEIXIN -->
                             <block v-else>
@@ -72,20 +72,13 @@
                     </picker>
                     <text class="iconfont icon-jinru"></text>
                 </view>
-                <view class="input-item">
+                <view class="input-item" @click="selectCateModal = true">
                     <text class="title">*服务类型</text>
-                    <picker
+                    <view class="select-widget" :class="{ active: currentCateText.length > 0 }">
-                        mode="selector"
-                        :range="cateList"
-                        range-key="name"
-                        @change="changeCate"
-                        class="select-widget"
-                        :class="{ active: cateText.length > 0 }"
-                    >
                         <view class="picker-view limit-line clamp-1">
-                            {{ cateText ? cateText : "请选择服务类型" }}
+                            {{ currentCateText ? currentCateText : "请选择服务类型" }}
                         </view>
-                    </picker>
+                    </view>
                     <text class="iconfont icon-jinru"></text>
                 </view>
                 <view class="input-item-section">
@@ -139,21 +132,39 @@
                 <view class="btn" @click="submit">提交审核</view>
             </view>
         </view>
+        <widget-modal title="选择服务类型" v-show="selectCateModal" @close="selectCateModal = false">
+            <view class="current-cate-modal">
+                <view class="cate-picker">
+                    <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-cate-item" v-for="(item, index) in currentCateList" :key="index" @click="delCate(index)">
+                        {{ item.name }}
+                    </view>
+                </view>
+                <view class="btn" @click="selectCateModal = false">确定</view>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import WidgetTips from "@/components/widgets/tips";
+import WidgetModal from "@/components/widgets/modal";
 import { mapState } from "vuex";
 export default {
     name: "member-service-info",
     data() {
         return {
             maxContentLength: 300,
+            selectCateModal: false,
             avatar: "",
             province: "",
             city: "",
+            area: "",
             cityList: [],
             serviceType: 0,
             serviceTypeText: "",
@@ -162,9 +173,9 @@ export default {
                 { id: 2, name: "配送" },
                 { id: 3, name: "安装+配送" },
             ],
-            cateId: 0,
-            cateText: "",
             cateList: [],
+            currentCateText: "",
+            currentCateList: [],
             carTypeId: 0,
             carTypeText: "",
             carTypeList: [],
@@ -178,6 +189,7 @@ export default {
     components: {
         AppLayout,
         WidgetTips,
+        WidgetModal,
     },
     computed: {
         ...mapState({
@@ -191,17 +203,14 @@ export default {
             this.avatar = this.userInfo.worker.avatar;
             this.province = this.userInfo.worker.province;
             this.city = this.userInfo.worker.city;
-            this.cateId = this.userInfo.worker.cateId;
+            this.area = this.userInfo.worker.area;
             this.carTypeId = this.userInfo.worker.carTypeId;
             this.name = this.userInfo.worker.name;
             this.idcardA = this.userInfo.worker.idcardA;
             this.idcardB = this.userInfo.worker.idcardB;
             this.license = this.userInfo.worker.license;
             this.content = this.userInfo.worker.content;
-
-            this.cateText = this.userInfo.worker.cateId;
             this.carTypeText = this.userInfo.worker.carTypeId;
-
             this.serviceType = this.userInfo.worker.serviceType;
             this.serviceTypeList.forEach((item) => {
                 if (item.id === this.serviceType) {
@@ -214,10 +223,14 @@ export default {
             this.cateList = list;
             if (this.finishInfo) {
                 list.forEach((item) => {
-                    if (item.id == this.userInfo.worker.cateId) {
+                    if (this.userInfo.worker.cateIds.split(",").indexOf(item.id + "") >= 0) {
-                        this.cateText = item.name;
+                        this.currentCateList.push({
+                            id: item.id,
+                            name: item.name,
+                        });
                     }
                 });
+                this.updateCurrentCateText();
             }
         });
         this.$models.service.getCarType().then((list) => {
@@ -280,6 +293,7 @@ export default {
         changeArea(e) {
             this.province = e.detail.value[0].text;
             this.city = e.detail.value[1].text;
+            this.area = e.detail.value[2].text;
         },
         changeServiceType(e) {
             this.serviceTypeList.forEach((item, index) => {
@@ -293,20 +307,48 @@ export default {
                 this.carTypeText = "";
             }
         },
-        changeCate(e) {
+        selectCate(e) {
-            this.cateId = this.cateList[e.detail.value].id;
+            let id = this.cateList[e.detail.value].id,
-            this.cateText = this.cateList[e.detail.value].name;
+                flag = false;
+            this.currentCateList.forEach((item) => {
+                if (item.id == id) {
+                    flag = true;
+                }
+            });
+            if (!flag) {
+                this.currentCateList.push({
+                    id: this.cateList[e.detail.value].id,
+                    name: this.cateList[e.detail.value].name,
+                });
+                this.updateCurrentCateText();
+            }
+        },
+        delCate(index) {
+            this.currentCateList.splice(index, 1);
+            this.updateCurrentCateText();
+        },
+        updateCurrentCateText() {
+            let cateArr = [];
+            this.currentCateList.forEach((item) => {
+                cateArr.push(item.name);
+            });
+            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) => {
+                cateIds.push(item.id);
+            });
             let saveData = {
                 avatar: this.avatar,
                 province: this.province,
                 city: this.city,
-                service: this.cateId,
+                region: this.area,
+                service: cateIds.join(","),
                 name: this.name,
                 mobile: this.mobile,
                 imga: this.idcardA,
@@ -335,6 +377,52 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.current-cate-modal {
+    .cate-picker {
+        width: 100%;
+        border-bottom: 2rpx solid #d6d6d6;
+        .picker-view {
+            color: #666666;
+            font-size: 28rpx;
+            padding: 10rpx 0 20rpx 0;
+            text-align: center;
+        }
+    }
+    .current-cate-list {
+        margin: 30rpx 0 20rpx 0;
+        .current-cate-item {
+            position: relative;
+            display: inline-block;
+            background-color: #ffa800;
+            box-sizing: border-box;
+            padding: 10rpx;
+            color: #ffffff;
+            margin-right: 10rpx;
+            margin-bottom: 10rpx;
+            font-size: 28rpx;
+            line-height: 28rpx;
+        }
+        .current-cate-item::after {
+            position: relative;
+            top: -3rpx;
+            display: inline-block;
+            content: "x";
+            color: #ebebeb;
+            margin-left: 10rpx;
+            font-size: 30rpx;
+            text-align: center;
+        }
+    }
+    .btn {
+        width: 535rpx;
+        height: 68rpx;
+        background: #7286f1;
+        font-size: 32rpx;
+        line-height: 68rpx;
+        text-align: center;
+        color: #ffffff;
+    }
+}
 .service-info-container {
     width: 710rpx;
     margin: 0 auto;