<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>