You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
6.8 KiB
2 lines
6.8 KiB
"use strict";(self["webpackChunkabcdf"]=self["webpackChunkabcdf"]||[]).push([[4],{9004:function(e,t,a){a.r(t),a.d(t,{default:function(){return n}});a(8111),a(116);var s=function(){var e=this,t=e._self._c;return t("div",{staticClass:"product-grid-page"},[e.showFilter?t("div",{staticClass:"filter-bar"},[t("el-select",{staticClass:"filter-select",attrs:{placeholder:"全部分类"},on:{change:e.handleCategoryChange},model:{value:e.selectedCategory,callback:function(t){e.selectedCategory=t},expression:"selectedCategory"}},e._l(e.categories,function(e){return t("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t("el-select",{staticClass:"filter-select",attrs:{placeholder:"综合排序"},on:{change:e.handleSortChange},model:{value:e.selectedSort,callback:function(t){e.selectedSort=t},expression:"selectedSort"}},[t("el-option",{attrs:{label:"综合排序",value:"default"}}),t("el-option",{attrs:{label:"销量↑",value:"sales_asc"}}),t("el-option",{attrs:{label:"销量↓",value:"sales_desc"}}),t("el-option",{attrs:{label:"价格↑",value:"price_asc"}}),t("el-option",{attrs:{label:"价格↓",value:"price_desc"}})],1)],1):e._e(),"search"==e.type?t("div",{staticClass:"result-stats"},[t("span",[e._v("全部结果 >")]),e.searchKeyword?t("span",{staticClass:"keyword"},[e._v('"'+e._s(e.searchKeyword)+'"')]):e._e(),e.selectedCategory&&e.categories.find(t=>t.value===e.selectedCategory)?t("span",{staticClass:"category"},[e._v(' "'+e._s(e.categories.find(t=>t.value===e.selectedCategory).label)+'" ')]):e._e(),t("span",[e._v("共"+e._s(e.totalProducts)+"个结果")])]):e._e(),t("div",{staticClass:"product-grid"},[e._l(e.visibleProducts,function(a,s){return t("div",{key:a.id,staticClass:"product-card",on:{click:function(t){return e.goToDetail(a.id)}}},[t("el-image",{directives:[{name:"lazy",rawName:"v-lazy",value:a.image,expression:"product.image"}],staticClass:"product-img",attrs:{alt:a.name,lazy:"",fit:"cover"}},[t("div",{staticClass:"image-placeholder",attrs:{slot:"placeholder"},slot:"placeholder"},[t("i",{staticClass:"el-icon-loading"})])]),a.tag?t("div",{staticClass:"tag",style:{backgroundColor:a.tagColor}},[e._v(" "+e._s(a.tag)+" ")]):e._e(),t("div",{staticClass:"product-info"},[t("div",{staticClass:"product-name"},[e._v(e._s(a.name))]),t("div",{staticClass:"price-row"},[t("span",{staticClass:"current-price"},[e._v("¥"+e._s(a.price.toFixed(2)))]),a.originalPrice?t("span",{staticClass:"original-price"},[e._v("¥"+e._s(a.originalPrice.toFixed(2)))]):e._e()]),a.sales>0?t("div",{staticClass:"sales-volume"},[t("i",{staticClass:"el-icon-shopping-cart"}),e._v(" 已售 "+e._s(a.sales)+" ")]):e._e(),t("el-button",{staticClass:"cart-btn",attrs:{type:"primary",size:"mini"},on:{click:function(t){return t.preventDefault(),e.addToCart(a)}}},[e._v(" 加入购物车 ")])],1)],1)}),0===e.visibleProducts.length?t("div",{staticClass:"empty-state"},[t("el-empty",{attrs:{description:"暂无符合条件的商品"}})],1):e._e()],2),e.totalProducts>0?t("div",{staticClass:"pagination-container"},[t("el-pagination",{attrs:{"current-page":e.currentPage,"page-sizes":[12,24,36],"page-size":e.pageSize,layout:"total, sizes, prev, pager, next, jumper",total:e.totalProducts},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange}})],1):e._e()])},i=[],r=(a(4114),a(2489),a(3518)),c={name:"ProductGridPage",data(){return{type:"",searchKeyword:"",selectedCategory:"",selectedSort:"default",showFilter:!0,currentPage:1,pageSize:12,products:[{id:1,name:"无线蓝牙耳机 主动降噪长续航",image:"https://picsum.photos/id/101/300/300",price:359,originalPrice:499,category:"digital",tag:"限时折扣",tagColor:"#FF6B6B",sales:120},{id:2,name:"智能手表 心率监测运动计步",image:"https://picsum.photos/id/102/300/300",price:259,originalPrice:329,category:"digital",tag:"新品",tagColor:"#4ECDC4",sales:86},{id:3,name:"纯棉短袖T恤 宽松休闲",image:"https://picsum.photos/id/103/300/300",price:89,originalPrice:129,category:"life",sales:320},{id:4,name:"新鲜水果礼盒 当季混合装",image:"https://picsum.photos/id/104/300/300",price:159,category:"food",tag:"热销",tagColor:"#FF9F1C",sales:215},{id:5,name:"全自动咖啡机 家用小型",image:"https://picsum.photos/id/105/300/300",price:1299,originalPrice:1599,category:"life",sales:45},{id:6,name:"高清投影仪 家用办公两用",image:"https://picsum.photos/id/106/300/300",price:2499,category:"digital",tag:"推荐",tagColor:"#2EC4B6",sales:78},{id:7,name:"进口红酒 赤霞珠干红",image:"https://picsum.photos/id/107/300/300",price:199,originalPrice:258,category:"food",sales:63},{id:8,name:"瑜伽垫 防滑专业健身垫",image:"https://picsum.photos/id/108/300/300",price:129,category:"life",sales:156},{id:9,name:"机械键盘 青轴游戏专用",image:"https://picsum.photos/id/109/300/300",price:299,originalPrice:399,category:"digital",tag:"限时折扣",tagColor:"#FF6B6B",sales:92},{id:10,name:"有机蔬菜礼盒 新鲜配送",image:"https://picsum.photos/id/110/300/300",price:89,category:"food",sales:205},{id:11,name:"北欧风落地灯 客厅卧室",image:"https://picsum.photos/id/111/300/300",price:199,category:"life",sales:57},{id:12,name:"便携式充电宝 20000mAh",image:"https://picsum.photos/id/112/300/300",price:129,originalPrice:169,category:"digital",sales:310}],categories:[{label:"全部",value:""},{label:"美食",value:"food"},{label:"生活",value:"life"},{label:"数码",value:"digital"}]}},computed:{...(0,r.L8)(["getSearchText"]),filteredProducts(){return this.products.filter(e=>{const t=!this.selectedCategory||e.category===this.selectedCategory,a=!this.searchKeyword||e.name.toLowerCase().includes(this.searchKeyword.toLowerCase());return t&&a})},sortedProducts(){const e=[...this.filteredProducts];switch(console.log(...this.filteredProducts,e),this.selectedSort){case"price_asc":return e.sort((e,t)=>e.price-t.price);case"price_desc":return e.sort((e,t)=>t.price-e.price);case"sales_asc":return e.sort((e,t)=>e.sales-t.sales);case"sales_desc":return e.sort((e,t)=>t.sales-e.sales);default:return e.sort((e,t)=>e.id-t.id)}},visibleProducts(){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;return this.sortedProducts.slice(e,t)},totalProducts(){return this.sortedProducts.length}},watch:{getSearchText(e,t){e!==t&&(this.searchKeyword=e,this.fetchProducts())}},created(){this.type=this.$route.query?.type,this.searchKeyword=this.getSearchText,this.fetchProducts()},methods:{async fetchProducts(){console.log(this.getSearchText)},handleSearch(){this.currentPage=1},handleCategoryChange(){this.currentPage=1},handleSortChange(){this.currentPage=1},handleSizeChange(e){this.pageSize=e,this.currentPage=1},handleCurrentChange(e){this.currentPage=e,window.scrollTo(0,0)},addToCart(e){this.$message.success(`${e.name} 已加入购物车`)},goToDetail(e){this.$router.push(`/product/${e}`)}}},l=c,o=a(1656),d=(0,o.A)(l,s,i,!1,null,"16ce8d0c",null),n=d.exports}}]);
|
|
//# sourceMappingURL=4.e0df9c1a.js.map
|