uni-app D5

14 阅读1分钟

1.交付

image.png

1.1 获取接口所需的数据

image.png

image.png

1.2 条件判断来对提交做一个条件判断

image.png image.png

1.3 调用一个封装接口的方法

image.png

image.png

image.png

1.4

status=2才为交付状态 image.png

image.png 渲染出图片 image.png

1.4 出车时间

image.png

image.png

1.4.1 传递(时间)参数(先将actualDepartuerTime传到url中)

image.png

image.png

image.png

1.4.2 获取传递的时间,并显示出来

image.png

image.png

1.5 回车时间

image.png

image.png

1.6 组件交互

image.png 组件内有个名为types的变量接收items.types的内容 image.png 再将types传给封装好的组件(使用defineProps的方法)

image.png 遍历数组便于渲染页面 image.png

1.6.1 由于封装的组件是公共的,许多部分都会用到这个组件,所以为了在给后端传数据的时候更加明确,该给不同的加上key值

image.png

image.png

image.png

1.6.2 明确数据含义

image.png

image.png

image.png

image.png

image.png

1.6.3 组件中的数据通讯(使用pinia)

组件通讯的方法:
·兄弟组件可以先兄弟a传递给父组件,父组件再传递给兄弟b组件
·使用pinia或者vuex

这里使用pinia 组件数据需要传到最外层 image.png

image.png

1.6.3.1 使用pinia,store定义需要用到的字段并且retun

image.png

1.6.3.2 使用store,存入数据

image.png

image.png

1.6.3.3 接口需要的不是文字而是数字,即id

image.png

image.png

image.png

image.png

将transportTaskId也存入pinia中 image.png

1.7 提交表单数据

1.7.1 调用接口

image.png

image.png