feat:移植工程

src/components/Home/Product/MobileProductQuery.vue

@@ -0,0 +1,52 @@
+<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'
+
+const productStore = useProductStore()
+
+const queryCategoryList = ref([])
+
+onMounted(async () => {
+  await productStore.queryProductCategory()
+
+  queryCategoryList.value = []
+  queryCategoryList.value.push({
+    label: '全部',
+    value: ''
+  })
+  productStore.categoryList.forEach((item) => {
+    queryCategoryList.value.push({
+      label: item,
+      value: item
+    })
+  })
+})
+
+const queryOrderList = [
+  {
+    label: '购买日期',
+    value: 'date'
+  }, {
+    label: '日均价格',
+    value: 'price'
+  }
+]
+</script>