chore: update

package.json

@@ -17,11 +17,11 @@
   "dependencies": {
     "@vueuse/core": "^9.4.0",
     "axios": "^1.1.3",
-    "element-plus": "^2.2.19",
-    "pinia": "^2.0.23",
+    "element-plus": "^2.2.21",
+    "pinia": "^2.0.24",
     "qrcode.vue": "^3.3.3",
     "swiper": "^8.4.4",
-    "vue": "^3.2.41",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "sass": "^1.55.0",
     "typescript": "~4.7.4",
     "unplugin-auto-import": "^0.11.4",
-    "vite": "^3.2.0",
+    "vite": "^3.2.4",
     "vue-tsc": "^1.0.9"
   }
 }

src/modules/shop/components/CourseList.vue

@@ -8,12 +8,13 @@ const props = defineProps({
     type: String
   }
 })
-const courseListAll: any = ref([])
-if (props.type === '') {
-  courseListAll.value = JSON.parse(JSON.stringify(props.courseList))
-} else {
-  courseListAll.value = props.courseList?.filter((item: any) => item.category === props.type)
-}
+const courseListAll = computed<any>(() => {
+  if (props.type) {
+    props.courseList?.filter((item: any) => item.category === props.type)
+  } else {
+    return props.courseList
+  }
+})
 </script>
 
 <template>

src/modules/shop/views/Index.vue

@@ -2,7 +2,7 @@
 import CourseList from '../components/CourseList.vue'
 import { useShopStore } from '@/stores/shop'
 
-const { filters, shopList } = useShopStore()
+const shopStore = useShopStore()
 const handleTabClick = (tab: any) => {
   if (tab.index === '4') {
     window.open('https://prp.ezijing.com')
@@ -17,11 +17,11 @@ const handleTabClick = (tab: any) => {
     <div class="shop_con">
       <div class="con_tab">
         <el-tabs class="my-tabs" @tab-click="handleTabClick">
-          <el-tab-pane v-for="(item, index) in filters" :key="index" lazy>
+          <el-tab-pane v-for="(item, index) in shopStore.filters" :key="index" lazy>
             <template #label>
               {{ item.label }}
             </template>
-            <CourseList :type="item.value" :courseList="shopList" :key="index" />
+            <CourseList :type="item.value" :courseList="shopStore.shopList" />
           </el-tab-pane>
         </el-tabs>
       </div>

src/stores/shop.ts

 import { defineStore } from 'pinia'
-// import { useUserStore } from './user'
-// const { courses } = useUserStore()
+import { useUserStore } from './user'
 interface ShopFilter {
   label: string
   value: string
@@ -8,50 +7,44 @@ interface ShopFilter {
 }
 type ShopListItem = Record<string, any>
 
-interface State {
-  filters: ShopFilter[]
-  list: ShopListItem[]
-}
+export const useShopStore = defineStore('shop', () => {
+  const route = useRoute()
+  const userStore = useUserStore()
+  // 筛选列表
+  const filters = ref<ShopFilter[]>((window as any).SHOP.SHOP_FILTERS)
+  // 商品列表
+  const list = ref<ShopListItem[]>((window as any).SHOP.SHOP_LIST)
 
-export const useShopStore = defineStore({
-  id: 'shop',
-  state: (): State => ({
-    filters: (window as any).SHOP.SHOP_FILTERS, // 筛选列表
-    list: (window as any).SHOP.SHOP_LIST // 商品列表
-  }),
-  getters: {
-    shopList({ list }) {
-      return list.map(item => {
-        // const { courses } = useUserStore()
-        const courses = JSON.parse(localStorage.getItem('courses') as string)
-        item.isBuy = !!courses.find((course: any) => course.course_id === item.course_id)
-        return item
+  // 计算后的商品列表，是否购买
+  const shopList = computed<ShopListItem[]>(() => {
+    return list.value.map(item => {
+      const isBuy = !!userStore.courses.find((course: any) => course.course_id === item.course_id)
+      return { ...item, isBuy }
     })
-    },
-    shopItem(): ShopListItem | undefined {
-      const route = useRoute()
-      const found = this.shopList.find(item => item.id === route.params.id)
+  })
+
+  // 详情页面的单个商品
+  const shopItem = computed(() => {
+    const found = shopList.value.find(item => item.id === route.params.id)
     if (found) {
       found.course_list =
         found.child_ids && found.child_ids.length
-            ? found.child_ids.map((id: string) => this.shopList.find(item => item.id === id))
-            : this.shopList.filter(item => item.child_ids?.includes(found.id))
+          ? found.child_ids.map((id: string) => shopList.value.find(item => item.id === id))
+          : shopList.value.filter(item => item.child_ids?.includes(found.id))
     }
     return found
-    },
-    shopRelatedList(): ShopListItem[] {
-      return this.shopList.filter((item: ShopListItem) => item.category !== this.shopItem?.category)
-    },
-    shopRelatedListOther(): ShopListItem[] {
-      return this.shopList.filter(
-        (item: ShopListItem) => item.category === this.shopItem?.category && item.id !== this.shopItem?.id
+  })
+
+  // 相关推荐商品列表
+  const shopRelatedList = computed(() => {
+    return shopList.value.filter(item => item.category !== shopItem.value?.category)
+  })
+
+  const shopRelatedListOther = computed(() => {
+    return shopList.value.filter(
+      (item: ShopListItem) => item.category === shopItem.value?.category && item.id !== shopItem.value?.id
     )
-    }
-  },
-  actions: {
-    // async getShopList() {
-    //   const shop = await import('https://webapp-pub.ezijing.com/project_online/fi/shop.js')
-    //   console.log(shop)
-    // }
-  }
+  })
+
+  return { filters, list, shopList, shopItem, shopRelatedList, shopRelatedListOther }
 })

src/stores/user.ts

@@ -10,7 +10,7 @@ export const useUserStore = defineStore({
   id: 'user',
   state: (): State => ({
     user: null,
-    courses: [] || JSON.parse(localStorage.getItem('courses') as string)
+    courses: []
   }),
   getters: {
     isLogin: state => !!state.user,
@@ -28,7 +28,6 @@ export const useUserStore = defineStore({
       const res = await getUser()
       try {
         this.courses = await getBuyShop()
-        localStorage.setItem('courses', JSON.stringify(this.courses))
       } catch (error) {
         console.log(error)
       }