You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
apply-assistant-v3/root/detail/fellow.vue

482 lines
12 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="p-root-detail-fellow g_w_all g_h_all g_bg_f_5 g_kuaishou">
<view>
<view class="g_h_10"></view>
<g-panel-form-slot
:list="[
{
icon: '',
label: '姓名',
result: '',
value: info.name,
path: '',
tip: 'slot-upID',
img: info.idCardImageUrl,
placeholder: '手动输入或拍照自动识别 → ',
type: 'slot',
pColumn: 8,
require: true,
},
{
icon: '',
label: '身份证号',
result: '',
value: info.idCard,
path: '',
tip: 'slot-code-idcard',
placeholder: '请输入身份证号',
type: 'slot',
pColumn: 8,
require: true,
},
{
icon: '',
label: '性别',
result: '',
value: info.sex,
path: '',
tip: 'slot-sex',
type: 'slot',
pColumn: 12,
require: true,
customRequire: true,
},
{
icon: '',
label: '年龄',
result: '',
value: info.age,
path: '',
tip: 'slot-age',
placeholder: '请输入年龄',
type: 'slot',
pColumn: 8,
require: true,
},
{
icon: '',
label: '民族',
result: '',
value: info.nation,
nationIndex: nationIndex,
path: '',
tip: 'slot-nation',
pColumn: 12,
require: false,
type: 'slot',
customRequire: true,
},
{
icon: '',
label: '家庭住址',
result: '',
value: info.address,
placeholder: '请输入家庭住址',
path: '',
tip: 'slot-address',
type: 'slot',
pColumn: 8,
},
{
icon: '',
label: '上传附件',
result: '',
path: '',
type: 'slot',
tip: 'slot-update-file',
pColumn: 16,
},
]"
@changeName="handleClickName"
@changeSex="handleClickSex"
@changeAge="handleClickAge"
@changeNation="handleClickNation"
@changeIDcard="handleClickIDcard"
@changeAddress="handleClickAddress"
@updateFile="updateFile"
@updateIDInfo="handlerIDInfo"
>
<template v-slot:after>
<view class="g_flex_row_start g_p_10" v-if="imgList.length > 0">
<view v-for="(item, index) in imgList" class="g_position_rela" :class="index <= 2 ? 'g_mr_18' : ''" :key="index">
<i class="iconfont icon-guanbi img-close" @click="delImg(index, item.id)"></i>
<image :src="item.url" class="g_w_56 g_h_56 g_radius_8" />
</view>
</view>
</template>
</g-panel-form-slot>
<view class="g_h_10"></view>
<g-panel-form-slot :list="[
{
icon: '',
label: '老乡电话',
result: '',
path: '',
value: info.tel,
tip: 'slot-mobile',
placeholder: '请输入联系电话',
type: 'slot',
pColumn: 8,
require: true,
},
]" @changeMobile="handleClickMobile"></g-panel-form-slot>
<g-panel-fixed>
<slot>
<view class="g_pl_12 g_pr_12">
<!-- <g-button btnText="取消" class="g_mr_16" size="small" type="default" @clickBtn="goReturn"></g-button> -->
<g-button btnText="确定" class @clickBtn="handleSubmit" size="auto" type="primary"></g-button>
</view>
</slot>
</g-panel-fixed>
</view>
</view>
</template>
<script>
// import gPanelFormSlot from "@/components/formSlot.vue";
import { nationlist } from '../../utils/nation.js'
export default {
onReady() {
this.G.setNavStyle()
},
onShareAppMessage() {
return this.G.shareFun()
},
components: {
// gPanelFormSlot,
},
data() {
return {
cdnBaseImg: this.G.store().cdnBaseImg,
info: {
nation: '汉族',
},
nation: nationlist.map((item, index) => {
return item.name
}),
nationIndex: 0,
imgList: [],
newAddImg: [],
}
},
props: {
// info: {
// type: Object,
// default: {},
// },
},
onLoad(options) {
let that = this
console.log('快速报名:', options)
if (options) {
if (options.sex) {
options.sex = Number(options.sex)
} else {
options.sex = 1
}
if (!options.nation) {
options.nation = '汉族'
}
this.info = options
// if (this.info.imgs) {
// this.imgList = this.info.imgs.split(",");
// }
}
console.log('获取老乡信息:', options)
},
onShow() {
let that = this
that.getImg()
// that.nation.forEach((item, index) => {
// if (item == that.info.nation) {
// console.log(that.info.nation);
// console.log(index);
// that.nationIndex = index;
// }
// });
// that.speed = 0;
// setTimeout(() => {
// }, 300);
},
created() {
let that = this
},
methods: {
handleClickName(e) {
this.info.name = this.info.userName = e
this.changeInfo()
},
handleClickSex(e) {
this.info.sex = e
this.changeInfo()
},
handleClickAge(e) {
this.info.age = e
this.changeInfo()
},
handleClickMobile(e) {
this.info.tel = e
this.changeInfo()
},
handleClickNation(e) {
let that = this
console.log(e.name)
this.info.nation = e.name
that.nation.forEach((item, index) => {
if (item == e.name) {
// console.log(that.info.nation)
// console.log(index)
that.nationIndex = index
}
})
this.changeInfo()
},
changeInfo() {
this.$emit('changeInfo', this.info)
},
/**
* 获取上传的身份信息
*/
handlerIDInfo(res) {
console.log('res', res)
let that = this
that.info.name = res.info.name
that.info.sex = res.info.sex ? (res.info.sex == '男' ? 1 : 2) : ''
that.info.age = res.info.age
that.info.nation = res.info.nationality + '族'
that.info.idCard = res.info.num
that.info.idCardImageUrl = res.image
that.info.userName = res.info.name
that.info.address = res.info.address
that.nation.forEach((item, index) => {
console.log('item1', item)
console.log('that.info.nation + "族"', that.info.nation + '族')
if (item == that.info.nation) {
console.log('item2', item)
that.nationIndex = index
}
})
this.changeInfo()
console.log('that.info', that.info)
console.log('that.nationIndex', that.nationIndex)
},
getImg() {
let that = this
uni.request({
url: that.G.ajaxUrl + `/imgs/list/${that.info.userId}?type=20`,
method: 'GET',
header: Object.assign(
{
Authorization: 'Bearer ' + uni.getStorageSync('apply-token'),
},
that.G.setPublicParams()
),
success: (res) => {
if (res.statusCode === 200) {
console.log(res.data.data.userImgs)
that.imgList = res.data.data.userImgs
console.log(that.imgList)
} else {
console.error('Failed to fetch images:', res)
}
},
fail: (error) => {
console.error('Error fetching images:', error)
},
})
},
// 删除图片
delImg(ind, id) {
let that = this
uni.showModal({
title: '提示',
content: '确定要删除该图片?',
success: function (res) {
if (res.confirm) {
that.imgList.splice(
that.imgList.findIndex((item, index) => index == ind),
1
)
uni.request({
url: that.G.ajaxUrl + `/imgs/del/${id}`,
method: 'GET',
header: Object.assign(
{
Authorization: 'Bearer ' + uni.getStorageSync('apply-token'),
},
that.G.setPublicParams()
),
success: (res) => {
if (res.statusCode === 200) {
console.log(res.data.data.userImgs)
// 如果需要更新 imgList可以在这里处理
// that.imgList = res.data.data.userImgs;
} else {
console.error('Failed to fetch images:', res)
}
},
fail: (error) => {
console.error('Error fetching images:', error)
},
})
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
},
// 上传图片
updateFile(e) {
let that = this
if (that.imgList.length < 4) {
that.imgList.push({ url: e, id: -999 })
// that.info.imgs = that.imgList;
that.newAddImg.push(e)
that.changeInfo()
uni.hideLoading()
} else {
uni.showToast({
title: '最多只能上传4张',
icon: 'none',
})
}
},
handleClickIDcard(e) {
this.info.idCard = e
if (this.info.idCard.length == 15 || this.info.idCard.length == 18) {
let info = this.G.getInfoByIDcard(this.info.idCard)
this.info.age = info.age
this.info.sex = info.sex ? (info.sex == '男' ? 1 : 2) : ''
}
this.changeInfo()
// console.log(this.G.getInfoByIDcard(this.info.idCard));
},
handleClickAddress(e) {
this.info.address = e
this.changeInfo()
},
goReturn() {
uni.navigateBack()
},
handleSubmit() {
let that = this
console.log('that.info.imgs', that.info.imgs)
console.log('that.imgList', that.imgList)
if (!that.info.name) {
uni.showToast({
icon: 'none',
title: '请输入姓名',
})
return false
}
if (!that.info.sex) {
uni.showToast({
icon: 'none',
title: '请选择性别',
})
return false
}
if (!that.info.age) {
uni.showToast({
icon: 'none',
title: '请输入年龄',
})
return false
}
if (!that.info.nation) {
uni.showToast({
icon: 'none',
title: '请选择民族',
})
return false
}
if (!that.G.setReg(that.info.tel, 'tel')) {
uni.showToast({
icon: 'none',
title: '请输入正确的手机号',
})
return false
}
if (!that.G.setReg(that.info.idCard, 'idcard')) {
uni.showToast({
icon: 'none',
title: '请输入正确的身份证号',
})
return false
}
console.log(that.info)
if (that.imgList.length > 0) {
that.info.imgs = that.newAddImg.toString()
}
let submitInfo = {
name: that.info.userName,
sex: that.info.sex,
age: that.info.age,
nation: that.info.nation,
tel: that.info.tel,
idCard: that.info.idCard,
address: that.info.address,
idCardImageUrl: that.info.idCardImageUrl ? that.info.idCardImageUrl : '',
userName: that.info.userName,
userId: that.info.userId,
orderId: that.info.id,
}
let url = 'order_submitFellowNew'
that.G.Post(that.api[url], submitInfo, (res) => {
uni.showToast({
icon: 'success',
title: '保存成功',
})
uni.$emit('infoUpdate')
uni.navigateBack()
})
// uni.$emit("getTownsman", { info: that.info });
// uni.navigateBack();
},
handleClickInfo() {
let that = this
that.G.uploadImg((res) => {
console.log('res', res)
that.info.name = res.info.name
that.info.sex = res.info.sex ? (res.info.sex == '男' ? 1 : 2) : ''
that.info.age = res.info.age
that.info.nation = res.info.nationality
that.info.idCard = res.info.num
that.info.idCardImageUrl = res.image
that.info.userName = res.info.name
that.info.address = res.info.address
that.nation.forEach((item, index) => {
if (item == that.info.nation) {
that.nationIndex = index
}
})
}, 'idcard')
},
},
}
</script>
<style>
.img-close {
position: absolute;
width: 18px;
height: 18px;
right: -6px;
top: -6px;
z-index: 99;
background-color: #666;
color: #fff;
font-size: 8px;
text-align: center;
line-height: 18px;
border-radius: 50%;
}
</style>