perfect

src/components/foodCards/ShopNoteCard/index.jsx

 
   useEffect(() => {
     if (item == []) {
-      console.log('asdasdsadasd');
     }
-    setValueList(travelMine.records)
+    setValueList(travelMine?.records)
 
 
-  }, [travelMine.records, item])
+  }, [travelMine?.records, item])
 
   const onClose = () => {
     //关闭当前套餐详情弹窗
 
   const numberTrave = (new Array(traveCoumun).fill()).map((_, index) => ({ id: index + 1, title: `第 ${index + 1} 天` }))
 
-  const array = [valueList, travelMine.records == '' ? [] : numberTrave]
+  const array = [valueList, travelMine?.records == '' ? [] : numberTrave]
 
 
   const handleColumn = e => {
 
 
 
-    if (travelMine.records == '') {
+    if (travelMine?.records == '') {
 
 
       console.log('没有行程');
 
 
   const handlePayClick = () => {
-    if (travelMine.records == '') {
+    if (travelMine?.records == '') {
       Taro.showToast({
         title: '暂无行程，已自动创建',
         icon: 'none',

src/pages/details/NoteDetails/index.jsx

 
   // 推荐套餐列表
   const [recommend, setRecommend] = useState([])
-
+  //视频
+  const [videoHeight, setVideoHeight] = useState()
+  const [getVideoWidth, setGetVideoWidth] = useState()
+  const [proportion, setProportion] = useState()
 
   //引导显隐
   const [guidance, setGuidance] = useState('shareOff')
+
   useEffect(() => {
+
+    Taro.nextTick(() => {
+      // 在当前同步流程结束后，下一个时间片执行
+      //绑定video 标签，拿到他实际的宽度，然后和 取到的高度，计算，才能得到正确的数值
+      Taro.createSelectorQuery().selectAll('.get-Video-Width').boundingClientRect(function (rects) {
+        rects.forEach(function (rect) {
+          setGetVideoWidth(rect.width)
+          console.log("🚀 ~ file: index.jsx ~ line 72 ~ rect", rect)
+
+        })
+      }).exec()
+
+    })
+  }, [])
+
+
+  useEffect(() => {
+
+
     if (router.params.enterType === "share") {
       setGuidance('shareOn')
     }
   }, [router.params.enterType])
+
+
   const resourceList = () => {
     getNoteID(id).then((res) => {
       setDetail(res)
 
     })
 
+  }
+
+  useEffect(() => {
+    //算出当前宽度下高度的数值
+    if (getVideoWidth || proportion) {
+      const videoHeights = proportion * getVideoWidth;
+      setVideoHeight(videoHeights)
+    }
+
+  }, [getVideoWidth, proportion])
+
+  const hanleLoade = (e) => {
+
+    //视频的高
+    const height = e.detail.height;
+    //视频的宽
+    const width = e.detail.width;
+    //算出视频的比例
+    setProportion(height / width)
+    //res.windowWidth为手机屏幕的宽。
+    // const windowWidth = res.windowWidth;
+
+
+
+
+
   }
 
   useEffect(() => {
                     controls
                     autoplay={false}
                     loop={false}
-                    muted={false} style={{ width: "100%", height: '200px' }} src={detail.videoUrl}
+                    className='get-Video-Width'
+                    poster={detail.poster}
+                    onLoadedmetadata={hanleLoade}
+                    muted={false} style={{ width: "100%", height: `${videoHeight}px` }} src={detail.videoUrl}
                   >
                   </Video>
               }
           <TabIcon icon={isSaved > 0 ? ax : good} text={isSaved > 0 ? "已收藏" : "加入收藏"} />
         </view>
       </view>
-    </view>
+    </view >
   )
 })