Refactor(ALL):Vue3同步调整为Vue2

pkg-video/views/watch.vue

@@ -14,19 +14,18 @@
         <view class="item">
           <video :id="`video-${index}`" :src="item['video']" loop :controls="false" :show-center-play-btn="false"/>
 
-          <view class="btn-play flex jc-center ai-center" @click="controlVideo">
-            <image style="width:57rpx;height:65rpx" :src="webUrl+'/20240123093125710999.png'" mode="scaleToFill"
-                   v-if="showPlay"/>
-          </view>
+          <cover-view class="btn-play flex jc-center ai-center" @click="controlVideo">
+            <cover-image style="width:57rpx;height:65rpx" :src="webUrl+'/20240123093125710999.png'" v-if="showPlay"/>
+          </cover-view>
         </view>
 
-        <view class="fixed-footer flex jc-between ai-end"
-              :style="{'bottom':systemInfo['safeAreaInsets']['bottom']+'px'}" v-if="!showDialog">
-          <view class="flex ai-center">
+        <cover-view class="fixed-footer flex jc-between ai-end"
+                    :style="{'bottom':systemInfo['safeAreaInsets']['bottom']+'px'}" v-if="!showDialog">
+          <cover-view class="flex ai-center">
             <cover-image style="width: 80rpx;height: 80rpx;border-radius: 50%;z-index: 10" :src="item['hotelLogo']"
                          @click="navToStore(item['hotelId'])"/>
             <cover-view class="more-t">{{ item['hotelName'] }}</cover-view>
-          </view>
+          </cover-view>
 
           <cover-view class="flex ai-center">
             <cover-view class="flex flex-col ai-center" style="width:78rpx;margin-right: 16rpx;"
@@ -48,7 +47,7 @@
               <cover-view class="one-t tc">{{ item['replyCount'] }}</cover-view>
             </cover-view>
           </cover-view>
-        </view>
+        </cover-view>
       </swiper-item>
     </swiper>
 
@@ -81,210 +80,217 @@
   </view>
 </template>
 
-<script setup>
-import {ref} from '@vue/composition-api'
-import {onLoad, onShow} from '@dcloudio/uni-app'
-import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
+<script>
 import {getReplyList, likeVideo, randomList, removeFavoriteVideo, removeLikeVideo, submitReply} from "@/api/video";
 import {addVideo} from "@/api/favorite";
 import {getCurAddress, getLocation} from "@/utils/common";
 
-const systemInfo = ref()
-
-onLoad((options) => {
-  uni.getSystemInfo({
-    success(res) {
-      systemInfo.value = res
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      systemInfo: null,
+      ready: false,
+      cityName: '',
+      videoId: '',
+      list: [],
+      current: 0,
+      showPlay: false,
+      currentContext: null,
+      showDialog: false,
+      comment: '',
+      page: 1,
+      replyList: []
     }
-  })
-
-  videoId.value = options.videoId || ''
-  const name = options.name
-  if (name) {
-    cityName.value = name
-    fetchList()
-  } else {
-    getMapData()
-  }
-})
-
-onShow(() => {
-  ready.value = false
-  setTimeout(() => {
-    if (cityName.value) fetchList()
-  }, 1000)
-})
-
-const ready = ref(false)
-const cityName = ref('')
-const videoId = ref('')
-
-const navToCity = () => {
-  uni.redirectTo({url: '/pkg-video/views/city'})
-}
-
-const navToHome = () => {
-  uni.switchTab({url: '/pages/home/index'})
-}
-
-const navToStore = (id) => {
-  console.log(typeof id, id)
-  uni.navigateTo({url: '/pagesInn/inn/innHome?id=' + id})
-}
-
-const getMapData = async () => {
-  const map = await getLocation();
-  if (map.length > 1) {
-    const {latitude, longitude} = map[1];
-    const address = await getCurAddress(latitude, longitude);
-    cityName.value = address[1].data.result['ad_info']['city']
-  }
-
-  await fetchList()
-}
-
-const list = ref([])
-const fetchList = async () => {
-  let param
-  if (videoId.value) {
-    param = {
-      videoId: videoId.value,
-      limit: 2
-    }
-  } else {
-    param = {
-      cityName: cityName.value,
-      limit: 2
-    }
-  }
-  const res = await randomList(param)
-  if (res.success) {
-    res.data?.forEach(item => list.value.push(item))
-    if (!ready.value && list.value.length === 0) {
-      uni.showModal({
-        title: '',
-        content: '当前城市还没有视频，可以先看看其他城市的喔~',
-        cancelText: '返回',
-        cancelColor: '#3A87FC',
-        confirmText: '选择城市',
-        confirmColor: '#3A87FC',
-        success(res) {
-          if (res.confirm) {
-            navToCity()
-          } else if (res.cancel) {
-            navToHome()
-          }
-        }
-      })
-    }
-    ready.value = true
-    if (list.value.length > 0) handleVideoPlay()
-  }
-}
-
-const changeLike = async (item) => {
-  const videoId = item['id']
-  if (item['hasLike']) {
-    const res = await removeLikeVideo(videoId)
-    if (res.success) {
-      item['hasLike'] = false
-      item['likeCount'] = res.data['likeCount']
-    }
-  } else {
-    const res = await likeVideo(videoId)
-    if (res.success) {
-      item['hasLike'] = true
-      item['likeCount'] = res.data['likeCount']
-    }
-  }
-}
-
-const changeFav = async (item) => {
-  const videoId = item['id']
-  if (item['hasFavorite']) {
-    const res = await removeFavoriteVideo(videoId)
-    if (res.success) {
-      item['hasFavorite'] = false
-      item['favoriteCount'] = res.data['favoriteCount']
-    }
-  } else {
-    const res = await addVideo(videoId)
-    if (res.success) {
-      item['hasFavorite'] = true
-      item['favoriteCount'] = res.data['favoriteCount']
-    }
-  }
-}
-
-const current = ref(0)
-const onChange = (event) => {
-  current.value = event.detail.current
-  if (current.value + 2 >= list.value.length) fetchList()
-  handleVideoPlay()
-}
-
-const showPlay = ref(false)
-const currentContext = ref()
-const handleVideoPlay = () => {
-  for (let i = 0; i < list.value.length; i++) {
-    let id = `video-${i}`
-    let videoContext = uni.createVideoContext(id)
-    videoContext.pause()
-    if (current.value === i) videoContext.play()
-  }
-}
-const controlVideo = () => {
-  let id = `video-${current.value}`
-  currentContext.value = uni.createVideoContext(id)
-  if (showPlay.value) {
-    currentContext.value.play()
-  } else {
-    currentContext.value.pause()
-  }
-  showPlay.value = !showPlay.value
-}
-
-const showDialog = ref(false)
-const dialogClose = () => {
-  showDialog.value = false
-}
-const dialogOpen = () => {
-  comment.value = ''
-  page.value = 1
-  replyList.value = []
-  fetchReply()
-}
-const comment = ref('')
-const page = ref(1)
-
-const replyList = ref([])
-const fetchReply = async () => {
-  const id = list.value[current.value]['id']
-  const res = await getReplyList(id, page.value)
-  if (res.success && res.data['records']?.length > 0) {
-    res.data['records']?.forEach(item => {
-      item.time = uni.$u.timeFrom(Date.parse(item.createTime))
-      replyList.value.push(item)
-    })
-    page.value++
-  }
-}
-
-const onSubmit = async () => {
-  if (comment.value.trim().length === 0) return
-  const videoId = list.value[current.value]['id']
-  const res = await submitReply(videoId, comment.value)
-  if (res.success) {
-    uni.showToast({
-      title: '评论已发布',
-      icon: 'none',
-      success() {
-        list.value[current.value]['replyCount']++
-        showDialog.value = false
+  },
+  onLoad(options) {
+    let that = this
+    uni.getSystemInfo({
+      success(res) {
+        that.systemInfo = res
       }
     })
+
+    that.videoId = options.videoId || ''
+    const name = options.name
+    if (name) {
+      that.cityName = name
+      that.fetchList()
+    } else {
+      that.getMapData()
+    }
+  },
+  onShow() {
+    this.ready = false
+    setTimeout(() => {
+      if (this.cityName) this.fetchList()
+    }, 1000)
+  },
+  methods: {
+    navToCity() {
+      uni.redirectTo({url: '/pkg-video/views/city'})
+    },
+
+    navToHome() {
+      uni.switchTab({url: '/pages/home/index'})
+    },
+
+    navToStore(id) {
+      uni.navigateTo({url: '/pagesInn/inn/innHome?id=' + id})
+    },
+
+    async getMapData() {
+      const map = await getLocation();
+      if (map.length > 1) {
+        const {latitude, longitude} = map[1];
+        const address = await getCurAddress(latitude, longitude);
+        this.cityName = address[1].data.result['ad_info']['city']
+      }
+
+      await this.fetchList()
+    },
+
+    async fetchList() {
+      let that = this
+      let param
+      if (this.videoId) {
+        param = {
+          videoId: this.videoId,
+          limit: 2
+        }
+      } else {
+        param = {
+          cityName: this.cityName,
+          limit: 2
+        }
+      }
+      const res = await randomList(param)
+      if (res.success) {
+        res.data?.forEach(item => this.list.push(item))
+        if (!this.ready && this.list.length === 0) {
+          uni.showModal({
+            title: '',
+            content: '当前城市还没有视频，可以先看看其他城市的喔~',
+            cancelText: '返回',
+            cancelColor: '#3A87FC',
+            confirmText: '选择城市',
+            confirmColor: '#3A87FC',
+            success(res) {
+              if (res.confirm) {
+                that.navToCity()
+              } else if (res.cancel) {
+                that.navToHome()
+              }
+            }
+          })
+        }
+        that.ready = true
+        if (that.list.length > 0) that.handleVideoPlay()
+      }
+    },
+
+    async changeLike(item) {
+      const videoId = item['id']
+      if (item['hasLike']) {
+        const res = await removeLikeVideo(videoId)
+        if (res.success) {
+          item['hasLike'] = false
+          item['likeCount'] = res.data['likeCount']
+        }
+      } else {
+        const res = await likeVideo(videoId)
+        if (res.success) {
+          item['hasLike'] = true
+          item['likeCount'] = res.data['likeCount']
+        }
+      }
+    },
+
+    async changeFav(item) {
+      const videoId = item['id']
+      if (item['hasFavorite']) {
+        const res = await removeFavoriteVideo(videoId)
+        if (res.success) {
+          item['hasFavorite'] = false
+          item['favoriteCount'] = res.data['favoriteCount']
+        }
+      } else {
+        const res = await addVideo(videoId)
+        if (res.success) {
+          item['hasFavorite'] = true
+          item['favoriteCount'] = res.data['favoriteCount']
+        }
+      }
+    },
+
+    onChange(event) {
+      this.current = event.detail.current
+      if (this.current + 2 >= this.list.length) this.fetchList()
+      this.handleVideoPlay()
+    },
+
+    handleVideoPlay() {
+      for (let i = 0; i < this.list.length; i++) {
+        let id = `video-${i}`
+        let videoContext = uni.createVideoContext(id)
+        videoContext.pause()
+        if (this.current === i) videoContext.play()
+      }
+    },
+
+    controlVideo() {
+      let id = `video-${current.value}`
+      this.currentContext = uni.createVideoContext(id)
+      if (this.showPlay) {
+        this.currentContext.play()
+      } else {
+        this.currentContext.pause()
+      }
+      this.showPlay = !this.showPlay
+    },
+
+    dialogClose() {
+      this.showDialog = false
+    },
+
+    dialogOpen() {
+      this.comment = ''
+      this.page = 1
+      this.replyList = []
+      this.fetchReply()
+    },
+
+    async fetchReply() {
+      const id = this.list[this.current]['id']
+      const res = await getReplyList(id, this.page)
+      if (res.success && res.data['records']?.length > 0) {
+        res.data['records']?.forEach(item => {
+          item.time = uni.$u.timeFrom(Date.parse(item.createTime))
+          this.replyList.push(item)
+        })
+        this.page++
+      }
+    },
+
+    async onSubmit() {
+      if (this.comment.trim().length === 0) return
+      const videoId = this.list[this.current]['id']
+      const res = await submitReply(videoId, this.comment)
+      if (res.success) {
+        uni.showToast({
+          title: '评论已发布',
+          icon: 'none',
+          success() {
+            this.list[this.current]['replyCount']++
+            this.showDialog = false
+          }
+        })
+      }
+    }
   }
 }
+
+
 </script>
 
 <style scoped lang="less">
@@ -328,6 +334,7 @@ video {
     color: #FFFFFF;
     font-size: 36rpx;
     line-height: 52rpx;
+    white-space: pre-wrap;
     z-index: 10;
   }