h5实战例子

/*

*/

import React from ‘react’;
import Scoll from ‘@/components/Scoll’;
import http from ‘…/services/http’;
import styles from ‘…/assets/css/visitPerson.less’;
import {Modal, Toast} from ‘antd-mobile’;

let initX: number; //触摸位置

let moveX: number; //滑动时的位置

let X:number = 0; //移动距离

let objX: number = 0; //目标对象位置

export default class VisitPerson extends React.Component {
constructor (props: Readonly<{}>) {
super(props);
}

state = {
loading: false,
pageNumber: 0,
pageCount: 1,
list: []
}

componentDidMount (): void {
document.title = ‘选择就诊人’
this.getPersonList();
}

getPersonList = () => {
this.setState({loading: true, pageNumber: this.state.pageNumber + 1 }, () => {
http.post(‘接口’,
{memberId: JSON.parse(sessionStorage.member).id,pageNumber: this.state.pageNumber, pageSize: this.state.pageSize}
).then((res: any) => {
if (!res.errors || res.errors.length === 0) {
// console.log(res.data.result)
setTimeout(() => {
this.setState({loading: false, list: res.data.result, pageCount: Math.ceil(parseInt(res.data.totalCount) / this.state.pageSize)});
}, 1500);
}
});
});
}

//滑动删除list
slidingUpDeletion = (event: any) => {
let obj = event.target.parentNode.parentNode;
initX = event.targetTouches[0].pageX;
if (obj.className == “list”) {
initX = event.targetTouches[0].pageX;
objX = (obj.style.WebkitTransform.replace(/translateX(/g, “”).replace(/px)/g, “”)) * 1;
}
if (objX === 0) {
event.target.addEventListener(‘touchmove’, function(event: any) {
// event.preventDefault();
let obj = event.target.parentNode.parentNode;
if (obj.className == “list”) {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X >= 0) {
obj.style.WebkitTransform = “translateX(” + 0 + “px)”;
} else if (X < 0) {
let l = Math.abs(X);
obj.style.WebkitTransform = “translateX(” + -l + “px)”;
if (l > 80) {
l = 80;
obj.style.WebkitTransform = “translateX(” + -l + “px)”;
}
}
}
});
} else if (objX < 0) {
event.target.addEventListener(‘touchmove’, function(event: any) {
// event.preventDefault();
let obj = event.target.parentNode.parentNode;
if (obj.className == “list”) {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X >= 0) {
let r = -80 + Math.abs(X);
obj.style.WebkitTransform = “translateX(” + r + “px)”;
if (r > 0) {
r = 0;
obj.style.WebkitTransform = “translateX(” + r + “px)”;
}
} else { //向左滑动
obj.style.WebkitTransform = “translateX(” + -80 + “px)”;
}
}
});
}
}

slidingDownDeletion = (event: any) => {
let obj = event.target.parentNode;
if (obj.className == “list-li”) {
objX = (obj.style.WebkitTransform.replace(/translateX(/g, “”).replace(/px)/g, “”)) * 1;
if (objX > -40) {
obj.style.WebkitTransform = “translateX(” + 0 + “px)”;
objX = 0;
} else {
obj.style.WebkitTransform = “translateX(” + -80 + “px)”;
objX = -80;
}
}
}

//删除就诊人
deleteVisitPerson = (event: any, data: any) => {
event.stopPropagation();
Modal.alert(‘删除’, ‘确定要删除吗?’, [{ text: ‘否’}, { text: ‘是’, onPress: () => {
Toast.loading(‘删除中,请等待…’);
http.post(‘接口’, {id:data.id}).then((res: any) => {
if (!res.errors || res.errors.length === 0) {
Toast.hide();
Toast.info(‘删除成功’, 1.5);
this.getPersonList();
}
})
}}])
}

render () {
return (

= this.state.pageCount} data={this.state.list} scollCallBack={()=>{}} onRenderElem={(item: any, index: number)=>(

• {this.slidingUpDeletion(e)}} onTouchEnd={(e)=>{this.slidingDownDeletion(e)}}>
  this.props['history'].push('/medical?patientId=xxxxx')}>

  {item.name} {item.relation=='SELF'?'自己':''} {item.relation=='FATER'?'父亲':''} {item.relation=='SON'?'母亲':''} {item.relation=='DAUTHER'?'女儿':''} {item.relation=='RELATIVE'?'亲戚':''} {item.relation=='FRIEND'?'朋友':''} {item.relation=='OTHER'?'其他':''}

  {item.gender=='M'?'男':'女'} | {item.age}岁 | {item.mobilePhone}

  )|(^\d{18}KaTeX parse error: Undefined control sequence: \d at position 5: )|(^\̲d̲{17}(\d|X|x))/.test(this.state.certificatesNumber)) return Toast.info(‘请输入正确证件号’);
  if (this.state.certificatesType === ‘2’ && !/( 1{1}\d{8}$)/.test(this.state.certificatesNumber)) return Toast.info(‘请输入正确证件号’);
  if (this.props[‘location’].query.id) return this.editVisitPerson();
  return this.createVisitPerson();
  }

  //新增就诊人
  createVisitPerson(){
  let data={
  name:this.state.name,
  mobilePhone:this.state.phone,
  gender:this.state.sex,
  birthDate:moment(this.state.birth).format(‘YYYY-MM-DD HH:mm:ss’),
  relation:this.state.relationship,
  memberId:userInfo.id,
  indentityType:this.state.certificatesType,
  indentityNumber:this.state.certificatesNumber,
  remark:this.state.remark
  }
  console.log(data)
  http.post(‘接口’, data).then((res: any) => {
  if (!res.errors || res.errors.length === 0) {
  Toast.success(“新增成功”,0.5,()=>
  this.props.history.replace(’/visitPerson’)
  )
  }else{
  Toast.fail(res.errors)
  }
  });
  }

  //编辑就诊人
  editVisitPerson = () => {}

  render () {
  let emptyList: any = Object.keys(this.state).filter((item: any)=> (typeof this.state[item] === ‘string’) && this.state[item] === ‘’);

  return (

  • 姓名

  {emptyList.length === 0 &&

  <label className={styles.active} onClick={()=>this.confirmSubmitVisitPerson()}>添加患者信息

  }

  {emptyList.length > 0 &&

  添加患者信息

  }

  ) } }

  ---

  1. A-Z ↩︎