uni-item-manage/pages/entry-app/index.vue

<template>
  <view class="pb-50 text grey " >
    <tm-menubars title="访客申请" color="bg-gradient-blue-accent" :showback="false"></tm-menubars>
    <tm-message ref="toast"></tm-message>
      <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
        <view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" >
          <text class="text-size-n text-weight-b ">当前设备编号：{{sn}}</text>
        </view>
        <tm-input name="title" required title="访客姓名" v-model="reqData.userName"></tm-input>
        <tm-input name="title" required title="访客手机号" v-model="reqData.tel"></tm-input>
        <view class="mx-32 my-12 border-b-1  pb-12 flex-between" >
          <text class="text-size-n ">性别</text>
          <tm-groupradio >

            <tm-radio :name="item.title" v-for="(item,index) in shifoushiguche" :key="index" v-model="item.checked" :label="item.title"></tm-radio>
          </tm-groupradio>
        </view>
        <tm-input name="title" required title="接待人姓名" v-model="reqData.receiver"></tm-input>
        <tm-pickers :default-value.sync="reqData.reasonVisit" rang-key="title" :list="chelianglis">
          <tm-input name="reasonVisit"  required title="访问事由" placeholder="请选择" disabled :value="obTstr2(reqData.reasonVisit)" right-icon="icon-angle-right"></tm-input>
        </tm-pickers>

        <view class="px-24">
          <tm-button navtie-type="form" theme="bg-gradient-blue-accent" @click="submit" block >提交数据</tm-button>
          <view class="py-32 text-size-s text-grey text-align-center">请注意资料的上传，必填项。</view>
        </view>
      </tm-sheet>

  </view>
</template>
<script>
export default {
  data() {
    return {
      sn:'',
      chelianglis:[
        {title:"商务洽谈",id:21},
        {title:"人才招聘",id:31},
        {title:"市场推广",id:41},
        {title:"文化交流",id:51},
      ],
      shifoushiguche:[
        {title:"男",checked:false,value:0},
        {title:"女",checked:false,value:1},
        {title:"未知",checked:true,value:-1},
      ],
      reqData:{
        receiver:'',
        reasonVisit:[],
        tel:'',
        userName:'',
        gender:0,
      }
    }
  },
  mounted() {
    this.$nextTick(function(){
      // console.log(this.$refs.citypieek.getSelectedValue());
    })
  },
  onLoad(options){
    this.sn=options.sn
  },
  computed:{
    cityDisplay:function(){
      if(typeof this.reqData.city[0] ==='object'){
        let ds = [];
        this.reqData.city.forEach(item=>{
          ds.push(item.text)
        })
        return ds.join('/')
      }else if(typeof this.reqData.city[0] ==='string'){

        return this.reqData.city.join('/')
      }
    }
  },
  methods: {
    submit(){
      if (!this.reqData.userName?.trim()){
        uni.showToast({ title: '请输入访客姓名', icon: 'none' });
        return
      }
      if (!this.reqData.tel?.trim()){
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return
      }
      if (!this.reqData.receiver?.trim()){
        uni.showToast({ title: '请输入接待人姓名', icon: 'none' });
        return
      }
      if (!this.reqData.reasonVisit?.[0]?.title?.trim()){
        uni.showToast({ title: '请选择访问事由', icon: 'none' });
        return
      }
    this.$refs.toast.show({model:'load',mask:true})
      uni.request({
        method:'post',
        url:'https://erpapi.fontree.cn/secret/visitor',
        data:{...this.reqData,gender: this.shifoushiguche.find(x=>x.checked).value,sn:this.sn,reasonVisit:this.reqData.reasonVisit?.[0]?.title},
        complete:(res)=>{
          this.$refs.toast.hide()
          if (res.data.code===200){
            uni.showToast({ title: '提交成功', icon: 'none' });
          }else {
            if (!res.data.msg){
              uni.showToast({ title: '服务器错误', icon: 'none' });
            }else {
              uni.showToast({ title: res.data.msg, icon: 'none' });
            }
          }
        }
      })
    },
    async getData(e){
      let d = await this.$refs.formData.getFormData();
      uni.showModal({
        title:"数据如下",
        content:JSON.stringify(d),
        showCancel:false
      })
    },
    success(e){
      //提交成功 。
      uni.$tm.toast(e.msg)
    },
    obTstr2(o){
      if(Array.isArray(o)){
        if(o.length.length===0) return "";
        return o[0]?.title??""
      }
      return ''
    },
    chuchangchange(e){
      this.$set(this.reqData,'chuchangtime',e.year+"-"+e.month+"-"+e.day)
    },
  }
}
</script>