apply-assistant-v3/root/detail/fellow.vue

<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: false,
					},
					{
						icon: '',
						label: '性别',
						result: '',
						value: info.sex,
						path: '',
						tip: 'slot-sex',
						type: 'slot',
						pColumn: 12,
						require: false,
						customRequire: true,
					},
					{
						icon: '',
						label: '年龄',
						result: '',
						value: info.age,
						path: '',
						tip: 'slot-age',
						placeholder: '请输入年龄',
						type: 'slot',
						pColumn: 8,
						require: false,
					},
					{
						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 g_mr_10 g_mt_4" :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: false,
					},
				]" @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.tel && !that.info.idCard) {
        uni.showToast({
          icon: 'none',
          title: '请输入手机号或身份证号',
        })
        return false
      }
      if (that.info.tel &&!that.G.setReg(that.info.tel, 'tel')) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号',
        })
        return false
      }
   	  if (that.info.idCard && !that.G.isValidIdCard(that.info.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,
		userApplyOrderFiles:(that.imgList && that.imgList.length > 0)
		                    ? 
							that.imgList.map(item => { return item.url }).join(',') 
							: 
							''
      }
      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>