daoji_h5/technician/pages/edit.vue

701 lines
21 KiB
Vue
Raw Normal View History

2024-03-21 05:53:51 +00:00
<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">
2024-04-03 02:04:52 +00:00
<picker @change="pickerChange($event,'birthday')" mode="date"
2024-03-21 05:53:51 +00:00
: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>
2024-04-03 02:04:52 +00:00
<!-- <view class="fill-base mt-md radius-16">
2024-03-21 05:53:51 +00:00
<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>
2024-04-03 02:04:52 +00:00
</view> -->
2024-03-21 05:53:51 +00:00
<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
2024-04-03 02:04:52 +00:00
}
// {
// 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: "请上传个人生活照"
// },
2024-03-21 05:53:51 +00:00
],
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>