daoji_h5/technician/pages/edit.vue

700 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="apply-pages" v-if="isLoad">
<view class="apply-form">
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>姓名</view>
<input v-model="form.coach_name" type="text" class="item-input flex-1" maxlength="20"
:placeholder="rule[0].errorMsg" />
</view>
<view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>性别</view>
<view class="item-input flex-1 flex-y-center">
<view @tap.stop="form.sex = index" class="flex-y-center" :class="[{'mr-lg':index==0}]"
:style="{color:form.sex == index ? primaryColor:''}" v-for="(item,index) in ['男','女']"
:key="index"><i class="iconfont icon-xuanze mr-sm"
:class="[{'icon-xuanze-fill':form.sex == index}]"></i>{{item}}
</view>
</view>
</view>
<view class="flex-between ml-lg mr-lg b-1px-b">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>生日</view>
<view class="item-input text flex-1">
<picker @change="pickerChange($event,'birthday')" mode="date" :end="endYear"
:value="form.birthday">
<view class="flex-between">
{{form.birthday||'请选择'}}
<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
</view>
</picker>
</view>
</view>
<view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>手机号</view>
<input v-model="form.mobile" type="text" class="item-input flex-1" maxlength="11"
:placeholder="rule[2].errorMsg" />
</view>
<view class="flex-between pl-lg pr-lg b-1px-b"
v-if="configInfo.short_code_status && form.mobile.length==11 &&form.mobile !== old_phone">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>验证码</view>
<view class="flex-between">
<input v-model="form.short_code" type="text" class="item-input flex-1" maxlength="6"
placeholder="请输入验证码" />
<view @tap.stop="toSend" :style="{color:primaryColor}">
{{authTime>0?`重新获取(${authTime}s)`:'获取验证码'}}
</view>
</view>
</view>
<view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>从业年份</view>
<input v-model="form.work_time" type="number" class="item-input flex-1"
:placeholder="rule[3].errorMsg" />
</view>
<view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center" style="width:230rpx"><i
class="iconfont icon-required c-warning"></i>意向工作城市</view>
<view class="item-input text flex-1">
<picker @change="pickerChange($event,'city')" :value="cityIndex" :range="cityList"
range-key="title">
<view class="flex-between">
{{cityIndex!=-1?cityList[cityIndex].title:'请选择'}}
<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
</view>
</picker>
</view>
</view>
<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
<view class="item-text flex-y-center" style="width:230rpx"><i
class="iconfont icon-required c-warning"></i>出行配置</view>
<view class="item-input text flex-1">
<view @tap.stop="$util.goUrl({url:`/technician/pages/time-set`})" class="flex-between">
<view>{{`点击进行设置`}}</view>
<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
</view>
</view>
</view> -->
<view class="flex-between pl-lg pr-lg b-1px-b" v-if="configInfo.plugAuth.store && form.admin_id">
<view class="item-text">挂靠门店</view>
<view class="item-input text flex-1">
<picker @change="pickerChange($event,'store')" :value="storeIndex" :range="storeList"
range-key="title">
<view class="flex-between">
<view class="max-400 ellipsis">{{storeIndex!=-1?storeList[storeIndex].title:'请选择'}}
</view>
<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
</view>
</picker>
</view>
</view>
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>所在地址</view>
<view class="item-input text flex-1">
<view @tap.stop="toChooseLocation" class="flex-between">
<view>{{form.address || `点击右边图标设置`}}</view>
<i class="iconfont iconjuli ml-sm" :style="{color: primaryColor}"></i>
</view>
</view>
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center" style="width:auto"><i
class="iconfont icon-required c-warning"></i>{{$t('action.attendantName')}}简介</view>
<input :disabled="true" type="text" class="item-input flex-1" />
</view>
<textarea v-model="form.text" class="item-textarea pd-lg" maxlength="300"
:placeholder="'输入'+$t('action.attendantName')+'简介'" />
<view class="text-right pb-lg pr-lg">
{{form.text.length>300?300:form.text.length}}/300
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>身份证号</view>
<input v-model="form.id_code" type="text" class="item-input flex-1"
:placeholder="rule[7].errorMsg" />
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>身份证照片</view>
<view class="item-input flex-1">图片大小不超过10M</view>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" :imagelist="form.id_card" imgtype="id_card" imgclass="md" text="身份证人像面"
:imgsize="1"></upload>
<upload @upload="imgUpload" :imagelist="form.id_card_fan" imgtype="id_card_fan" imgclass="md"
text="身份证国徽面" :imgsize="1"></upload>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" :imagelist="form.id_card_people" imgtype="id_card_people" imgclass="md"
text="手持身份证照片" :imgsize="1"></upload>
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>资格证书</view>
<view class="item-input flex-1">图片大小不超过10M</view>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.license" imgtype="license" text="上传图片"
:imgsize="15">
</upload>
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>工作形象照</view>
<view class="item-input flex-1">图片建议尺寸: 750 * 750大小不超过10M</view>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" :imagelist="form.work_img" imgtype="work_img" text="上传图片" :imgsize="1">
</upload>
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>个人生活照</view>
<view class="item-input flex-1">图片建议尺寸: 750 * n大小不超过10M</view>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.self_img" filetype="picture"
imgtype="self_img" text="上传图片" :imgsize="9">
</upload>
</view>
</view>
<view class="fill-base mt-md radius-16">
<view class="flex-between pl-lg pr-lg">
<view class="item-text">个人视频介绍</view>
<view class="item-input flex-1">视频大小不超过50M</view>
</view>
<view class="flex-between pl-lg pr-lg pb-md">
<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.video" filetype="video"
imgtype="video" text="上传视频" :imgsize="1">
</upload>
</view>
</view>
<view class="flex-center f-caption c-caption pd-lg">
编辑资料将进入重新审核审核通过之前将显示原资料
</view>
</view>
<view class="space-max-footer"></view>
<fix-bottom-button @confirm="submit" :text="[{text:'确定申请',type:'confirm'}]" bgColor="#fff">
</fix-bottom-button>
</view>
</template>
<script>
import wPicker from "@/components/w-picker/w-picker.vue";
import {
mapState,
mapActions,
mapMutations
} from "vuex"
export default {
components: {
wPicker
},
data() {
return {
isLoad: false,
options: {},
cityList: [],
cityIndex: -1,
storeList: [],
storeIndex: 0,
old_phone: '',
authTime: 0,
timer: null,
coach_status: 0,
form: {
id: 0,
admin_id: 0,
coach_name: '', //姓名
mobile: '', //手机号
short_code: '',
sex: 0, //性别
birthday: '',
work_time: '', //从业年份
city_id: '', //城市
store_id: '', //门店
lng: '',
lat: '',
address: '', //详细地址
text: '', //备注
id_code: '', //身份证号
id_card: [], //身份证
id_card_fan: [], // 身份证反面
id_card_people: [], //手持身份证
license: [], //资格证书
work_img: [], // 工作照
self_img: [], // 生活照
city_id: '', // 城市 id
video: [],
},
rule: [{
name: "coach_name",
checkType: "isNotNull",
errorMsg: "输入您的姓名",
regType: 2
}, {
name: "birthday",
checkType: "isNotNull",
errorMsg: "请选择您的生日",
regType: 2
}, {
name: "mobile",
checkType: "isMobile",
errorMsg: "输入手机号"
}, {
name: "work_time",
checkType: "isNotNull",
errorMsg: "请输入从业年份例如5"
}, {
name: "city_id",
checkType: "isNotNull",
errorMsg: "请选择意向工作城市"
},
{
name: "address",
checkType: "isNotNull",
errorMsg: "请选择所在地址"
}, {
name: "text",
checkType: "isNotNull",
errorMsg: "请输入" + this.$t('action.attendantName') + "简介",
regType: 2
}, {
name: "id_code",
checkType: "isIdCard",
errorMsg: "输入您的身份证号码"
},
{
name: "id_card",
checkType: "isNotNull",
errorMsg: "请上传身份证人像面"
},
{
name: "id_card_fan",
checkType: "isNotNull",
errorMsg: "请上传身份证国徽面"
},
{
name: "id_card_people",
checkType: "isNotNull",
errorMsg: "请上传手持身份证照片"
},
{
name: "license",
checkType: "isNotNull",
errorMsg: "请上传资格证书"
},
{
name: "work_img",
checkType: "isNotNull",
errorMsg: "请上传工作形象照"
},
{
name: "self_img",
checkType: "isNotNull",
errorMsg: "请上传个人生活照"
},
],
lockTap: false
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
userInfo: state => state.user.userInfo,
location: state => state.user.location,
}),
async onLoad(options) {
let {
admin_id = 0,
is_edit = 0
} = options
options.is_edit = is_edit
options = admin_id ? await this.updateCommonOptions(options) : options
this.options = options
this.form.admin_id = admin_id
this.$util.showLoading()
await this.initIndex()
this.isLoad = true
},
onUnload() {
if (this.timer) clearInterval(this.timer)
},
methods: {
...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions']),
...mapMutations(['updateUserItem']),
async initIndex(refresh = false) {
// #ifdef H5
if (!refresh && this.$jweixin.isWechat()) {
await this.$jweixin.initJssdk();
this.$jweixin.wxReady(() => {
this.$jweixin.hideOptionMenu()
})
}
// #endif
if (!this.configInfo.id || !this.configInfo.hasOwnProperty(
'plugAuth') || (this.configInfo.hasOwnProperty(
'plugAuth') && !this.configInfo.plugAuth.hasOwnProperty(
'store')) || refresh) {
await this.getConfigInfo()
}
await this.getCityList()
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
let data = await this.$api.technician.coachInfo()
this.form.admin_id = data.id ? data.admin_id : 0
await this.getStoreList()
if (data && !data.id) {
this.$util.hideAll()
return
}
let imgArr = ['id_card', 'license', 'self_img']
imgArr.map(item => {
data[item] = data[item] && data[item].length > 0 ? data[item].map(aitem => {
return {
path: aitem
}
}) : []
})
if (data.id_card && data.id_card.length > 1) {
data.id_card_fan = [data.id_card[1]]
data.id_card_people = [data.id_card[2]]
data.id_card.splice(1, 3)
}
let imgArrs = ['work_img', 'video']
imgArrs.map(item => {
data[item] = data[item] && data[item].length > 0 ? [{
path: data[item]
}] : []
})
data.birthday = data.birthday ? this.$util.formatTime(data.birthday * 1000, 'YY-M-D') : ''
for (let key in this.form) {
this.form[key] = data[key]
}
let textArr = ['mobile', 'status']
textArr.map(item => {
this[item == 'mobile' ? `old_phone` : 'coach_status'] = data[
item]
})
this.cityIndex = this.cityList.findIndex(item => {
return item.id == data.city_id
})
this.storeIndndex = this.storeList.findIndex(item => {
return item.id == data.store_id
})
this.$util.hideAll()
},
initRefresh() {
this.initIndex(true)
},
async getCityList() {
let {
location
} = this
if (!location.lat) {
// #ifdef H5
if (this.$jweixin.isWechat()) {
this.$util.showLoading()
// await this.$jweixin.initJssdk();
await this.$jweixin.wxReady2();
let {
latitude: lat = 0,
longitude: lng = 0
} = await this.$jweixin.getWxLocation()
location = {
lng,
lat,
address: '定位失败',
province: '',
city: '',
district: ''
}
if (lat && lng) {
let key = `${lat},${lng}`
let data = await this.$api.base.getMapInfo({
location: key
})
let {
status,
result
} = JSON.parse(data)
if (status == 0) {
let {
address,
address_component
} = result
let {
province,
city,
district
} = address_component
location = {
lng,
lat,
address,
province,
city,
district
}
}
}
}
// #endif
// #ifndef H5
location = await this.$util.getBmapLocation()
// #endif
this.updateUserItem({
key: 'location',
val: location
})
}
let {
lng = 0,
lat = 0
} = location
if (lat && lng) {
let city = await this.$api.base.getCity({
lng,
lat
})
this.$util.hideAll()
this.cityList = city
this.form.city_id = city.length > 0 ? city[0].id : 0
}
},
async getStoreList() {
let {
admin_id = 0
} = this.form
if (!admin_id) return
let data = await this.$api.mine.getStoreSelect({
admin_id
})
data.unshift({
id: 0,
title: '不挂靠门店'
})
this.storeList = data
},
pickerChange(e, key) {
let ind = e.target.value
if (key === 'birthday') {
let unix = this.$util.DateToUnix(ind)
if (unix > new Date(Math.ceil(new Date().getTime())) / 1000) {
this.$util.showToast({
title: `不能选择未来时间哦`
})
return
}
this.form[key] = ind
return
}
this[`${key}Index`] = ind
this.form[`${key}_id`] = this[`${key}List`][ind].id
},
// 发送验证码
async toSend() {
let {
authTime
} = this
if (authTime) return
let {
mobile = ''
} = this.form
if (mobile == null || !/^(1[0-9]{10})$/.test(mobile)) {
this.$util.showToast({
title: mobile == null ? `请输入手机号` : `${mobile} 手机号无效`
});
return;
}
if (this.lockTap) return
this.lockTap = true
this.$util.showLoading()
try {
await this.$api.user.sendShortMsg({
phone: mobile
})
this.$util.hideAll()
this.lockTap = false
let time = 60
this.timer = setInterval(() => {
if (time === 0) {
clearInterval(this.timer)
return
}
time--
this.authTime = time
}, 1000)
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
}
},
imgUpload(e) {
let {
imagelist,
imgtype
} = e;
this.form[imgtype] = imagelist;
},
// 选择地区
async toChooseLocation(e) {
await this.$util.checkAuth({
type: 'userLocation'
})
let {
lat: locaLat = '',
lng: locaLng = ''
} = this.location
let {
id = 0,
lat: addrLat,
lng: addrLng
} = this.form
if (id) {
locaLat = addrLat
locaLng = addrLng
}
let param = {}
if (!locaLat && !locaLng) {
// #ifdef H5
if (this.$jweixin.isWechat()) {
this.$util.showLoading()
await this.$jweixin.wxReady2();
let {
latitude,
longitude
} = await this.$jweixin.getWxLocation()
locaLat = latitude
locaLng = longitude
}
// #endif
// #ifdef APP-PLUS
let location = await this.$util.getBmapLocation()
locaLat = location.lat
locaLng = location.lng
// #endif
}
// #ifndef MP-WEIXIN
param = {
latitude: locaLat,
longitude: locaLng
}
// #endif
let [, {
address = '',
longitude,
latitude
}] = await uni.chooseLocation(param);
if (!address) return
this.form.address = address
this.form.lng = longitude
this.form.lat = latitude
},
//表单验证
validate(param) {
let validate = new this.$util.Validate();
this.rule.map(item => {
let {
name,
} = item
validate.add(param[name], item);
})
let message = validate.start();
return message;
},
async submit() {
let param = this.$util.deepCopy(this.form)
let arr = ['id_card', 'id_card_fan', 'id_card_people', 'work_img', 'video']
arr.map(item => {
param[item] = param[item] && param[item].length > 0 ? param[item][0].path : ''
})
param.license = param.license.map(item => {
return item.path
})
param.self_img = param.self_img.map(item => {
return item.path
})
let msg = this.validate(param);
if (msg) {
this.$util.showToast({
title: msg
});
return;
}
param.birthday = this.$util.DateToUnix(param.birthday)
param.id_card = [param.id_card, param.id_card_fan, param.id_card_people]
delete param.id_card_fan
delete param.id_card_people
delete param.admin_id
let {
old_phone
} = this
let {
short_code_status
} = this.configInfo
if (short_code_status && old_phone != param.mobile && (param.short_code == null || param.short_code
.length != 6)) {
this.$util.showToast({
title: `请输入6位数短信验证码`
})
return
}
if (!short_code_status || old_phone == param.mobile) {
delete param.short_code
}
if (this.lockTap) return
this.lockTap = true
this.$util.showLoading()
try {
await this.$api.technician.coachUpdateV2(param)
this.$util.hideAll()
this.$util.showToast({
title: `提交成功`
})
if (this.timer) {
clearInterval(this.timer)
}
setTimeout(() => {
if (getCurrentPages().length > 1) {
this.$util.back()
}
this.$util.goUrl({
url: '/pages/mine',
openType: `reLaunch`
})
}, 2000)
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
}
}
}
}
</script>
<style lang="scss">
</style>