完成服务类型多选
This commit is contained in:
parent
f8882ea09f
commit
56e7b66308
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
popup-title="请选择服务区域"
|
||||
@change="changeArea"
|
||||
>
|
||||
<block v-if="province && city">
|
||||
<text class="preview">{{ province }} - {{ city }}</text>
|
||||
<block v-if="province && city && area">
|
||||
<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
|
||||
mode="selector"
|
||||
:range="cateList"
|
||||
range-key="name"
|
||||
@change="changeCate"
|
||||
class="select-widget"
|
||||
:class="{ active: cateText.length > 0 }"
|
||||
>
|
||||
<view class="select-widget" :class="{ active: currentCateText.length > 0 }">
|
||||
<view class="picker-view limit-line clamp-1">
|
||||
{{ cateText ? cateText : "请选择服务类型" }}
|
||||
{{ currentCateText ? currentCateText : "请选择服务类型" }}
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<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) {
|
||||
this.cateText = item.name;
|
||||
if (this.userInfo.worker.cateIds.split(",").indexOf(item.id + "") >= 0) {
|
||||
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) {
|
||||
this.cateId = this.cateList[e.detail.value].id;
|
||||
this.cateText = this.cateList[e.detail.value].name;
|
||||
selectCate(e) {
|
||||
let id = this.cateList[e.detail.value].id,
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue