625 lines
21 KiB
Vue
625 lines
21 KiB
Vue
<template>
|
|
<app-layout title="设置服务信息">
|
|
<view class="service-info-container">
|
|
<view class="tips-box">
|
|
<widget-tips text="完成入驻后，平台将会根据您所设置的服务信息推送消息" textColor="#ffa800" />
|
|
</view>
|
|
<view class="service-form-container">
|
|
<view class="input-item">
|
|
<text class="title">*我的头像</text>
|
|
<!-- #ifdef H5 -->
|
|
<view class="headimg-box" @click="uploadHeadImg">
|
|
<image class="image" :src="avatar" mode="aspectFill" />
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button open-type="chooseAvatar" @chooseavatar="uploadAvatar" class="headimg-box">
|
|
<image class="image" :src="avatar" mode="aspectFill" />
|
|
</button>
|
|
<!-- #endif -->
|
|
<text class="iconfont icon-jinru"></text>
|
|
</view>
|
|
<view class="input-item">
|
|
<text class="title">*服务区域</text>
|
|
<view class="select-widget">
|
|
<uni-data-picker
|
|
:localdata="cityList"
|
|
placeholder="请选择服务区域"
|
|
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>
|
|
<view class="input-item">
|
|
<text class="title">*服务分类</text>
|
|
<picker
|
|
mode="selector"
|
|
:range="serviceTypeList"
|
|
range-key="name"
|
|
@change="changeServiceType"
|
|
class="select-widget"
|
|
:class="{ active: serviceTypeText.length > 0 }"
|
|
>
|
|
<view class="picker-view limit-line clamp-1">
|
|
{{ serviceTypeText ? serviceTypeText : "请选择服务分类" }}
|
|
</view>
|
|
</picker>
|
|
<text class="iconfont icon-jinru"></text>
|
|
</view>
|
|
<view v-if="serviceType == 2 || serviceType == 3" class="input-item">
|
|
<text class="title">车辆类型</text>
|
|
<picker
|
|
mode="selector"
|
|
:range="carTypeList"
|
|
range-key="name"
|
|
@change="changeCarType"
|
|
class="select-widget"
|
|
:class="{ active: carTypeText.length > 0 }"
|
|
>
|
|
<view class="picker-view limit-line clamp-1">
|
|
{{ carTypeText ? carTypeText : "请选择车辆类型" }}
|
|
</view>
|
|
</picker>
|
|
<text class="iconfont icon-jinru"></text>
|
|
</view>
|
|
<view class="input-item" @click="selectCateModal = true">
|
|
<text class="title">*服务类型</text>
|
|
<view class="select-widget" :class="{ active: currentCateText.length > 0 }">
|
|
<view class="picker-view limit-line clamp-1">
|
|
{{ currentCateText ? currentCateText : "请选择服务类型" }}
|
|
</view>
|
|
</view>
|
|
<text class="iconfont icon-jinru"></text>
|
|
</view>
|
|
<view class="input-item-section">
|
|
<text class="title">*认证资料<text class="desc">请录入身份资料</text></text>
|
|
<view class="profile-box">
|
|
<input
|
|
class="username"
|
|
v-model="name"
|
|
placeholder="请输入您的姓名"
|
|
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-if="license" class="icon" :src="license" mode="aspectFill" />
|
|
<view v-if="!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>
|
|
<view class="common-save-form-btn">
|
|
<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: "",
|
|
serviceTypeList: [
|
|
{ id: 1, name: "安装" },
|
|
{ id: 2, name: "配送" },
|
|
{ id: 3, name: "安装+配送" },
|
|
],
|
|
cateList: [],
|
|
currentCateText: "",
|
|
currentCateList: [],
|
|
carTypeId: 0,
|
|
carTypeText: "",
|
|
carTypeList: [],
|
|
name: "",
|
|
idcardA: "",
|
|
idcardB: "",
|
|
license: "",
|
|
content: "",
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
WidgetTips,
|
|
WidgetModal,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userInfo: (state) => state.user.info,
|
|
finishInfo: (state) => state.user.finishInfo,
|
|
}),
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
async onReady() {
|
|
await this.$store.dispatch("user/info");
|
|
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;
|
|
this.idcardB = this.userInfo.worker.idcardB;
|
|
this.license = this.userInfo.worker.license;
|
|
this.content = this.userInfo.worker.content;
|
|
this.carTypeText = this.userInfo.worker.carTypeId;
|
|
this.serviceType = this.userInfo.worker.serviceType;
|
|
this.serviceTypeList.forEach((item) => {
|
|
if (item.id === this.serviceType) {
|
|
this.serviceTypeText = item.name;
|
|
}
|
|
});
|
|
}
|
|
this.cityList = this.$models.system.getCity();
|
|
this.$models.service.getInstallCate().then((list) => {
|
|
this.cateList = list;
|
|
if (this.finishInfo) {
|
|
list.forEach((item) => {
|
|
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) => {
|
|
this.carTypeList = list;
|
|
if (this.finishInfo) {
|
|
list.forEach((item) => {
|
|
if (item.id == this.userInfo.worker.carTypeId) {
|
|
this.carTypeText = item.name;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
uploadHeadImg() {
|
|
this.$utils.chooseImage(1).then((tempFiles) => {
|
|
tempFiles.forEach((item) => {
|
|
this.$models.system.upload(item.path).then((response) => {
|
|
this.avatar = response.img;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
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) => {
|
|
this.$models.system.upload(item.path).then((response) => {
|
|
this.idcardA = response.img;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
uploadIdCardB() {
|
|
this.$utils.chooseImage(1).then((tempFiles) => {
|
|
tempFiles.forEach((item) => {
|
|
this.$models.system.upload(item.path).then((response) => {
|
|
this.idcardB = response.img;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
uploadLicense() {
|
|
this.$utils.chooseImage(1).then((tempFiles) => {
|
|
tempFiles.forEach((item) => {
|
|
this.$models.system.upload(item.path).then((response) => {
|
|
this.license = response.img;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
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) => {
|
|
if (index == e.detail.value) {
|
|
this.serviceType = item.id;
|
|
this.serviceTypeText = item.name;
|
|
}
|
|
});
|
|
if (this.serviceType == 1) {
|
|
this.carTypeId = 0;
|
|
this.carTypeText = "";
|
|
}
|
|
},
|
|
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,
|
|
region: this.area,
|
|
service: cateIds.join(","),
|
|
name: this.name,
|
|
mobile: this.mobile,
|
|
imga: this.idcardA,
|
|
imgb: this.idcardB,
|
|
imgc: this.license,
|
|
desc: this.content,
|
|
types: this.serviceType,
|
|
};
|
|
if (this.serviceType == 2 || this.serviceType == 3) {
|
|
saveData.car = this.carTypeId;
|
|
}
|
|
this.$models.user
|
|
.setServiceInfo(saveData)
|
|
.then((message) => {
|
|
this.$store.dispatch("user/info", true);
|
|
this.$utils.toast(message).then(() => {
|
|
this.$utils.toPage("/pages/member/member", {}, "switch");
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
.service-form-container {
|
|
width: 100%;
|
|
margin-top: 14rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.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;
|
|
}
|
|
.iconfont {
|
|
color: #a7a7a7;
|
|
}
|
|
}
|
|
.select-widget {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #c9c9c9;
|
|
.picker-view,
|
|
/deep/.uni-data-tree-input {
|
|
width: 670rpx;
|
|
box-sizing: border-box;
|
|
padding: 44rpx 0 44rpx 190rpx;
|
|
}
|
|
/deep/.uni-data-tree-input {
|
|
.preview {
|
|
color: #666666;
|
|
}
|
|
.placeholder {
|
|
color: #c9c9c9;
|
|
font-size: 28rpx;
|
|
}
|
|
.input-value-border {
|
|
border: 0;
|
|
}
|
|
.input-value {
|
|
padding: 0;
|
|
height: auto;
|
|
font-size: 28rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
.arrow-area,
|
|
.uniui-clear {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
button.headimg-box {
|
|
background-color: unset;
|
|
}
|
|
button.headimg-box::after {
|
|
border: unset;
|
|
}
|
|
.input-item-section {
|
|
padding: 44rpx 0;
|
|
border-bottom: 2rpx solid #e8e7e7;
|
|
.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;
|
|
}
|
|
}
|
|
.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%;
|
|
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;
|
|
font-size: 0;
|
|
}
|
|
.image,
|
|
.icon {
|
|
width: 273rpx;
|
|
height: 164rpx;
|
|
}
|
|
.icon {
|
|
text-align: center;
|
|
.iconfont {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 120rpx;
|
|
color: #cccccc;
|
|
}
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
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> |