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

pkg_user/views/myCoupons.vue

@@ -95,7 +95,7 @@ export default {
   .zero-coupons {
     position: absolute;
     left: 50%;
-    top: 50%;
+    top: 40%;
     transform: translate(-50%,-50%);
     width: 400rpx;
     height: 366rpx;

pkg_user/views/myFavorite.vue

@@ -9,10 +9,13 @@
       </view>
     </view>
 
-    <view class="manage flex jc-end ai-center" @click="changeManage">
+    <view class="manage flex jc-end ai-center" @click="changeManage" v-if="!isManage">
       <image :src="webUrl+'/20240107224533038041.png'" mode="scaleToFill"/>
       管理
     </view>
+    <view class="manage flex jc-end ai-center" style="color:#C41617" @click="changeManage" v-else>
+      退出管理
+    </view>
     <!--商品列表-->
     <scroll-view class="scroll-box" :class="{'manage-state':isManage}" scroll-y
                  @scrolltolower="fetchProduct()" v-if="tabsIndex===0">
@@ -25,11 +28,11 @@
                       v-if="isManage"/>
         <image class="cover flex-0" :src="item['image']" mode="scaleToFill" @click="navToGoods(item['productId'])"/>
 
-        <view>
-          <view class="more-t bold">{{ item['storeName'] }}</view>
-          <view class="sub">规格:{{ item['sku'] }}</view>
+        <view style="width: 100%">
+          <view class="more-t bold" @click="navToGoods(item['productId'])">{{ item['storeName'] }}</view>
+          <view class="sub" @click="navToGoods(item['productId'])">规格:{{ item['sku'] }}</view>
           <view class="flex jc-between ai-end">
-            <view class="price flex ai-end">
+            <view class="price flex ai-end" @click="navToGoods(item['productId'])">
               <text style="color:#E92727">￥</text>
               <text style="color:#E92727;font-size: 32rpx;line-height: 48rpx">{{ item['price'] }}</text>
               <text style="margin-left: 10rpx;text-decoration:line-through">￥{{ item['otPrice'] }}</text>
@@ -59,7 +62,7 @@
           <view class="flex jc-between ai-start" style="width: 594rpx">
             <view>
               <view class="one-t bold">{{ item['name'] }}</view>
-              <view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '前收藏' }}</view>
+              <view class="sub">{{ item['time'] === '刚刚' ? '刚刚' : item['time'] + '收藏' }}</view>
             </view>
             <view class="btn-nav flex jc-center ai-center" :style="{'margin-right':(isManage?48:0)+'rpx'}"
                   @click="navToStore(item['hotelId'])">进店逛逛
@@ -108,247 +111,261 @@
   </view>
 </template>
 
-<script setup>
-import {computed, onMounted, ref} from '@vue/composition-api'
-import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
+<script>
 import {getProductList, getStoreList, getVideoList, removeFavorite} from "@/api/favorite";
 import {postCartAdd} from "@/api/store";
 import CheckboxIcon from "@/components/CheckboxIcon.vue";
 
-const ready = ref(false)
-onMounted(() => {
-  ready.value = true
-  fetchProduct()
-})
-
-const navToGoods = (id) => {
-  uni.navigateTo({
-    url: "/pages/shop/GoodsCon/index?id=" + id
-  })
-}
-
-// 导航
-const tabs = ref([
-  {key: 0, label: '商品'},
-  {key: 1, label: '店铺'},
-  {key: 2, label: '视频'},
-])
-const tabsIndex = ref(0)
-const changeTabs = (index) => {
-  if (isManage.value) return
-  tabsIndex.value = index
-  page.value = 1
-  fetchData()
-}
-
-const fetchData = () => {
-  switch (tabsIndex.value) {
-    case 0:
-      fetchProduct()
-      break
-    case 1:
-      fetchStore()
-      break
-    case 2:
-      fetchVideo()
-      break
-  }
-}
-
-const tabsVertical = computed(() => {
-  if (tabsIndex.value === 0) return 1
-  if (tabsIndex.value === 1) return -1
-  if (tabsIndex.value === 2) return 0
-})
-
-// 管理
-const isManage = ref(false)
-const changeManage = () => {
-  isManage.value = !isManage.value
-}
-const isAll = ref(false)
-
-const selectCount = computed(() => {
-  let count = 0, countList
-  switch (tabsIndex.value) {
-    case 0:
-      countList = productList.value
-      break
-    case 1:
-      countList = storeList.value
-      break
-    case 2:
-      countList = videoList.value
-      break
-  }
-
-  countList.forEach(item => {
-    if (item['state']) count++
-  })
-  return count
-})
-const onChange = (state, mark) => {
-  if (mark[0] === -1) {
-    isAll.value = state
-    handleAll(state)
-    return
-  }
-
-  switch (tabsIndex.value) {
-    case 0:
-      productList.value[mark]['state'] = state
-      break
-    case 1:
-      storeList.value[mark]['state'] = state
-      break
-    case 2:
-      videoList.value[mark]['state'] = state
-      break
-  }
-}
-
-const handleAll = (state) => {
-  switch (tabsIndex.value) {
-    case 0:
-      productList.value.forEach(item => item.state = state)
-      break
-    case 1:
-      storeList.value.forEach(item => item.state = state)
-      break
-    case 2:
-      videoList.value.forEach(item => item.state = state)
-      break
-  }
-}
-
-const remove = async () => {
-  uni.showModal({
-    title: '确认删除已选项目?',
-    content: '',
-    showCancel: true,
-    cancelText: '取消',
-    confirmText: '确认',
-    success: async (r) => {
-      if (r.confirm) {
-        let ids = []
-        switch (tabsIndex.value) {
-          case 0:
-            productList.value.forEach(item => {
-              if (item['state']) ids.push(item.id)
-            })
-            break
-          case 1:
-            storeList.value.forEach(item => {
-              if (item['state']) ids.push(item.id)
-            })
-            break
-          case 2:
-            videoList.value.forEach(item => {
-              if (item['state']) ids.push(item.id)
-            })
-            break
-        }
-
-        const res = await removeFavorite(ids)
-        if (res.success) {
-          isAll.value = false
-          fetchData()
-          removeAfter()
-        }
-      }
+export default {
+  components: {CheckboxIcon},
+  data() {
+    return {
+      ready: false,
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      tabs: [
+        {key: 0, label: '商品'},
+        {key: 1, label: '店铺'},
+        {key: 2, label: '视频'},
+      ],
+      tabsIndex: 0,
+      isManage: false,
+      isAll: false,
+      page: 1,
+      productList: [],
+      storeList: [],
+      videoList: [],
     }
-  })
-}
+  },
+  computed: {
+    tabsVertical: function () {
+      if (this.tabsIndex === 0) return 1
+      if (this.tabsIndex === 1) return -1
+      if (this.tabsIndex === 2) return 0
+    },
+    selectCount: function () {
+      let count = 0, countList
+      switch (this.tabsIndex) {
+        case 0:
+          countList = this.productList
+          break
+        case 1:
+          countList = this.storeList
+          break
+        case 2:
+          countList = this.videoList
+          break
+      }
 
-const removeAfter = () => {
-  switch (tabsIndex.value) {
-    case 0:
-      productList.value = productList.value.filter(item => !item['state'])
-      break
-    case 1:
-      storeList.value = storeList.value.filter(item => !item['state'])
-      break
-    case 2:
-      videoList.value = videoList.value.filter(item => !item['state'])
-      break
+      countList.forEach(item => {
+        if (item['state']) count++
+      })
+      return count
+    }
+  },
+  mounted() {
+    this.ready = true
+    this.fetchProduct()
+  },
+  methods: {
+    navToGoods(id) {
+      uni.navigateTo({
+        url: "/pages/shop/GoodsCon/index?id=" + id
+      })
+    },
+
+    changeTabs(index) {
+      if (this.isManage) return
+      this.tabsIndex = index
+      this.page = 1
+      this.fetchData()
+    },
+
+    fetchData() {
+      switch (this.tabsIndex) {
+        case 0:
+          this.fetchProduct()
+          break
+        case 1:
+          this.fetchStore()
+          break
+        case 2:
+          this.fetchVideo()
+          break
+      }
+    },
+
+    changeManage() {
+      this.isManage = !this.isManage
+    },
+
+    onChange(state, mark) {
+      if (mark[0] === -1) {
+        this.isAll = state
+        this.handleAll(state)
+        return
+      }
+
+      switch (this.tabsIndex) {
+        case 0:
+          this.productList[mark]['state'] = state
+          this.isAll = this.selectCount === this.productList.length
+          break
+        case 1:
+          this.storeList[mark]['state'] = state
+          this.isAll = this.selectCount === this.storeList.length
+          break
+        case 2:
+          this.videoList[mark]['state'] = state
+          this.isAll = this.selectCount === this.videoList.length
+          break
+      }
+    },
+
+    handleAll(state) {
+      switch (this.tabsIndex) {
+        case 0:
+          this.productList.forEach(item => item.state = state)
+          break
+        case 1:
+          this.storeList.forEach(item => item.state = state)
+          break
+        case 2:
+          this.videoList.forEach(item => item.state = state)
+          break
+      }
+    },
+
+    async remove() {
+      let that = this
+      uni.showModal({
+        title: '确认删除已选项目?',
+        content: '',
+        showCancel: true,
+        cancelText: '取消',
+        confirmText: '确认',
+        success: async (r) => {
+          if (r.confirm) {
+            let ids = []
+            switch (that.tabsIndex) {
+              case 0:
+                that.productList.forEach(item => {
+                  if (item['state']) ids.push(item.id)
+                })
+                break
+              case 1:
+                that.storeList.forEach(item => {
+                  if (item['state']) ids.push(item.id)
+                })
+                break
+              case 2:
+                that.videoList.forEach(item => {
+                  if (item['state']) ids.push(item.id)
+                })
+                break
+            }
+
+            const res = await removeFavorite(ids)
+            if (res.success) {
+              that.isAll = false
+              that.fetchData()
+              that.removeAfter()
+            }
+          }
+        }
+      })
+    },
+
+    removeAfter() {
+      switch (this.tabsIndex) {
+        case 0:
+          this.productList = this.productList.filter(item => !item['state'])
+          break
+        case 1:
+          this.storeList = this.storeList.filter(item => !item['state'])
+          break
+        case 2:
+          this.videoList = this.videoList.filter(item => !item['state'])
+          break
+      }
+    },
+
+    async fetchProduct() {
+      let that = this
+      if (that.page === 1) {
+        that.productList = []
+      }
+      const res = await getProductList(that.page)
+      if (res.success) {
+        res.data['records']?.forEach(item => {
+          item.state = false
+          that.productList.push(item)
+        })
+        that.page++
+      }
+    },
+
+    async fetchStore() {
+      let that = this
+      if (that.page === 1) {
+        that.storeList = []
+      }
+      const res = await getStoreList(that.page)
+      if (res.success) {
+        res.data['records']?.forEach(item => {
+          item.time = uni.$u.timeFrom(Date.parse(item.createTime))
+          item.state = false
+          that.storeList.push(item)
+        })
+        that.page++
+      }
+    },
+
+    async fetchVideo() {
+      let that = this
+      if (that.page === 1) {
+        that.videoList = []
+      }
+      const res = await getVideoList(that.page)
+      if (res.success) {
+        res.data['records']?.forEach(item => {
+          item.state = false
+          that.videoList.push(item)
+        })
+        that.page++
+      }
+    },
+
+    async addCart(item) {
+      const param = {
+        productId: item.productId,
+        uniqueId: item.uniqueId,
+        cartNum: 1
+      }
+      const res = await postCartAdd(param)
+      if (res.success) {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        }).catch()
+      }
+    },
+
+    navToStore(id) {
+      uni.navigateTo({
+        url: '/pagesInn/inn/innHome?id=' + id
+      })
+    },
+
+    navToVideo(videoId) {
+      if (this.isManage) return
+      uni.navigateTo({
+        url: '/pkg-video/views/watch?videoId=' + videoId
+      })
+    }
   }
 }
 
-// 列表
-const page = ref(1)
-const productList = ref([])
-const fetchProduct = async () => {
-  if (page.value === 1) {
-    productList.value = []
-  }
-  const res = await getProductList(page.value)
-  if (res.success) {
-    res.data['records']?.forEach(item => {
-      item.state = false
-      productList.value.push(item)
-    })
-    page.value++
-  }
-}
 
-const storeList = ref([])
-const fetchStore = async () => {
-  if (page.value === 1) {
-    storeList.value = []
-  }
-  const res = await getStoreList(page.value)
-  if (res.success) {
-    res.data['records']?.forEach(item => {
-      item.time = uni.$u.timeFrom(Date.parse(item.createTime))
-      item.state = false
-      storeList.value.push(item)
-    })
-    page.value++
-  }
-}
-
-const videoList = ref([])
-const fetchVideo = async () => {
-  if (page.value === 1) {
-    videoList.value = []
-  }
-  const res = await getVideoList(page.value)
-  if (res.success) {
-    res.data['records']?.forEach(item => {
-      item.state = false
-      videoList.value.push(item)
-    })
-    page.value++
-  }
-}
-
-const addCart = async (item) => {
-  const param = {
-    productId: item.productId,
-    uniqueId: item.uniqueId,
-    cartNum: 1
-  }
-  const res = await postCartAdd(param)
-  if (res.success) {
-    uni.showToast({
-      title: res.msg,
-      icon: 'none'
-    }).catch()
-  }
-}
-
-const navToStore = (id) => {
-  uni.navigateTo({
-    url: '/pagesInn/inn/innHome?id=' + id
-  })
-}
-
-const navToVideo = (videoId) => {
-  if (isManage.value) return
-  uni.navigateTo({
-    url: '/pkg-video/views/watch?videoId=' + videoId
-  })
-}
 </script>
 
 <style scoped lang="less">

pkg_user/views/withdrawalLog.vue

@@ -31,34 +31,42 @@
   </scroll-view>
 </template>
 
-<script setup>
-import {onMounted, ref} from '@vue/composition-api'
-import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
+<script>
 import {payoutLog} from "@/api/user";
 
-const ready = ref(false)
-onMounted(() => {
-  fetchData()
-  ready.value = true
-})
-const list = ref([])
-const page = ref(1)
-const fetchData = async () => {
-  const res = await payoutLog(page.value)
-  if (res.success) {
-    let count = 0
-    for (let i = 0; i < res.data.length; i++) {
-      count++
-      list.value.push(res.data[i])
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      ready: false,
+      list: [],
+      page: 1,
+    }
+  },
+  mounted() {
+    this.fetchData()
+    this.ready = true
+  },
+  methods: {
+    async fetchData() {
+      const res = await payoutLog(this.page)
+      if (res.success) {
+        let count = 0
+        for (let i = 0; i < res.data.length; i++) {
+          count++
+          this.list.push(res.data[i])
+        }
+        if (count < 10 && this.page === 1) this.scrollToLower()
+      }
+    },
+
+    scrollToLower() {
+      this.page++
+      this.fetchData()
     }
-    if (count < 10 && page.value === 1) scrollToLower()
   }
 }
 
-const scrollToLower = () => {
-  page.value++
-  fetchData()
-}
 </script>
 
 <style scoped lang="less">