feat:重构模块

src/components/Product/ProductCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="life-record-card card-item">
+    <el-image :src="serviceFileRootPath + props.productItem?.imageUrl"
+              :preview-src-list="[serviceFileRootPath + props.productItem?.imageUrl]"
+              fit="contain" alt="暂无成果">
+      <template #error>
+        <div class="image-slot">
+          <span>暂无图片</span>
+        </div>
+      </template>
+    </el-image>
+
+    <div class="record-info">
+      <div class="top-container">
+        <div class="info-list">
+          <div class="info-item">
+            <span class="title">{{ props.productItem.name }}</span>
+          </div>
+
+          <div class="info-item amount-item">
+            <i class="fa-solid fa-coins"></i>
+            {{ props.productItem.price }}
+          </div>
+        </div>
+
+        <div class="button-info">
+          <el-button type="primary" :icon="Edit" circle :size="'small'"
+                     @click="editClick"/>
+          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
+                     @click="deleteClick()" />
+        </div>
+      </div>
+
+      <div class="bottom-container">
+        <div class="info-list">
+          <div class="info-item">
+            <i class="fa-solid fa-clock" style="color: #6A5ACD"></i>
+            {{ props.productItem.totalDay }}天
+          </div>
+
+          <div class="info-item">
+            <i class="fa-solid fa-chart-line" style="color: #FFA500"></i>
+            {{ props.productItem.averagePrice }}元/天
+          </div>
+
+          <div class="info-item">
+            <i class="fa-solid fa-location-dot"></i>
+            {{ props.productItem.channel }}
+          </div>
+        </div>
+        <div class="info-list">
+          <div class="info-item">
+            <i class="fa-solid fa-flag"></i>
+            {{ props.productItem.purchaser }}
+          </div>
+          <div class="info-item">
+            <i class="fa-regular fa-calendar-check"></i>
+            {{ props.productItem.purchaseDate }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Edit, DeleteFilled } from '@element-plus/icons-vue'
+import { useProductStore } from '@/store/product.ts'
+import { defineProps, onMounted, PropType } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { IProduct } from '@/types/product.ts'
+import { useRouter } from 'vue-router'
+import { serviceFileRootPath } from '@/utils'
+
+const productStore = useProductStore()
+const router = useRouter()
+
+const props = defineProps({
+  productItem: {
+    required: true,
+    type: Object as PropType<IProduct>
+  }
+})
+
+onMounted(() => {
+
+})
+
+const editClick = async () => {
+  const id = props.productItem?.id
+  productStore.productApiType = 'UPDATE'
+
+  productStore.currentProduct = props.productItem as IProduct
+  await router.push({ name: 'ProductDetailId', params: { id } })
+}
+
+const deleteClick = () => {
+  productStore.productApiType = 'DELETE'
+  commonElMessageBox(`请确认是否删除该物品: ${props.productItem?.name}?`).then(() => {
+    productStore.handleProductApi(props.productItem as IProduct)
+  })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.record.module";
+</style>

src/components/Product/ProductQuery.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mobile-common-query card-item">
+    <div class="query-item">
+      <span>分类：</span>
+      <el-segmented v-model="productStore.queryInfo.category"
+                    :options="queryCategoryList"
+                    @change="productStore.queryProductList()"/>
+    </div>
+
+    <div class="query-item">
+      <span>排序：</span>
+      <el-segmented v-model="productStore.queryInfo.order"
+                    :options="queryOrderList"
+                    @change="productStore.queryProductList()"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useProductStore } from '@/store/product.ts'
+import { ICategory } from '@/types'
+
+const productStore = useProductStore()
+
+const queryCategoryList = ref([] as ICategory[])
+
+onMounted(async () => {
+  await productStore.queryProductCategory()
+  initCategoryList()
+})
+
+const queryOrderList = [
+  {
+    label: '购买日期',
+    value: 'date'
+  }, {
+    label: '日均价格',
+    value: 'price'
+  }
+]
+
+const initCategoryList = () => {
+  queryCategoryList.value = []
+  queryCategoryList.value.push({
+    label: '全部',
+    value: ''
+  })
+  productStore.categoryList.forEach((item) => {
+    queryCategoryList.value.push({
+      label: item,
+      value: item
+    })
+  })
+}
+</script>