网站建设86215公司一般费用是多少？

网站建设86215,网站建设公司一般多少钱,淘宝客网站设计,城市建设服务中心网站文章目录12-二级类目-结果区-排序组件13-二级类目-结果区-数据加载14-二级类目-结果区-进行筛选12-二级类目-结果区-排序组件 目的#xff1a;封装排序组件#xff0c;完成排序切换效果 大致步骤#xff1a; 定义一个组件 sub-sort#xff0c;完成基础布局在 sub.vue 组件… 文章目录12-二级类目-结果区-排序组件13-二级类目-结果区-数据加载14-二级类目-结果区-进行筛选12-二级类目-结果区-排序组件 目的封装排序组件完成排序切换效果 大致步骤 定义一个组件 sub-sort完成基础布局在 sub.vue 组件使用完成切换排序时候的交换效果 落地代码 1基础布局 src/views/category/components/sub-sort.vue templatediv classsub-sortdiv classsorta hrefjavascript:;默认排序/a a hrefjavascript:;最新商品/aa hrefjavascript:;最高人气/aa hrefjavascript:;评论最多/aa hrefjavascript:;价格排序i classarrow up /i classarrow down //a/divdiv classcheckXtxCheckbox仅显示有货商品/XtxCheckboxXtxCheckbox仅显示特惠商品/XtxCheckbox/div/div /template script export default {name: SubSort } /script style scoped langless .sub-sort {height: 80px;display: flex;align-items: center;justify-content: space-between;.sort {display: flex;a {height: 30px;line-height: 28px;border: 1px solid #e4e4e4;padding: 0 20px;margin-right: 20px;color: #999;border-radius: 2px;position: relative;transition: all .3s;.active {background: xtxColor;border-color: xtxColor;color: #fff;}.arrow {position: absolute;border: 5px solid transparent;right: 8px;.up {top: 3px;border-bottom-color: #bbb;.active {border-bottom-color: xtxColor;}}.down {top: 15px;border-top-color: #bbb;.active {border-top-color: xtxColor;}}}}}.check {.xtx-checkbox {margin-left: 20px;color: #999;}} } /style使用组件src/views/category/sub.vue templatediv classsub-categorydiv classcontainer!-- 面包屑 --SubBread /!-- 筛选区 --SubFilter /!-- 结果区域 --div classgoods-list!-- 排序 --SubSort /!-- 列表 --/div/div/div /templatescript import SubBread from ./components/sub-bread import SubFilter from ./components/sub-filter import SubSort from ./components/sub-sort export default {name: SubCategory,components: { SubBread, SubFilter, SubSort} } /scriptstyle scoped langless .goods-list {background: #fff;padding: 0 25px;margin-top: 25px; } /style2交互效果 templatediv classsub-sortdiv classsorta :class{active:sortParams.sortFieldnull} clickchangeSort(null) hrefjavascript:;默认排序/aa :class{active:sortParams.sortFieldpublishTime} clickchangeSort(publishTime) hrefjavascript:;最新商品/aa :class{active:sortParams.sortFieldorderNum} clickchangeSort(orderNum) hrefjavascript:;最高人气/aa :class{active:sortParams.sortFieldevaluateNum} clickchangeSort(evaluateNum) hrefjavascript:;评论最多/aa clickchangeSort(price) hrefjavascript:;价格排序i classarrow up :class{active:sortParams.sortFieldpricesortParams.sortMethodasc} /i classarrow down :class{active:sortParams.sortFieldpricesortParams.sortMethoddesc} //a/divdiv classcheckXtxCheckbox v-modelsortParams.inventory仅显示有货商品/XtxCheckboxXtxCheckbox v-modelsortParams.onlyDiscount仅显示特惠商品/XtxCheckbox/div/div /template script import { reactive } from vue export default {name: SubSort,setup () {// 1. 根据后台需要的参数定义数据对象// 2. 根据数据对象绑定组件复选框排序按钮// 3. 在操作排序组件的时候需要反馈给数据对象// sortFieldpublishTime,orderNum,price,evaluateNum// sortMethodasc为正序 desc为倒序const sortParams reactive({inventory: false,onlyDiscount: false,sortField: null,sortMethod: null})// 改变排序const changeSort (sortField) {if (sortField price) {sortParams.sortField sortFieldif (sortParams.sortMethod null) {// 第一次点击默认是降序sortParams.sortMethod desc} else {// 其他情况根据当前排序取反sortParams.sortMethod sortParams.sortMethod desc ? asc : desc}} else {// 如果排序未改变停止逻辑 if (sortParams.sortField sortField) returnsortParams.sortField sortFieldsortParams.sortMethod null}}return { sortParams, changeSort }} } /script13-二级类目-结果区-数据加载 目的实现结果区域商品展示。 大致步骤 完成结果区域商品布局完成 xtx-infinite-loading 组件封装使用 xtx-infinite-loading 完成数据加载和渲染 落地代码src/views/category/sub.vue 1.基础布局 templatediv classsub-categorydiv classcontainer!-- 面包屑 --SubBread /!-- 筛选区 --SubFilter /!-- 结果区域 --div classgoods-list!-- 排序 --SubSort /!-- 列表 --ulli v-fori in 20 :keyi GoodsItem :goods{} //li/ul/div/div/div /templatescript import SubBread from ./components/sub-bread import SubFilter from ./components/sub-filter import SubSort from ./components/sub-sort import GoodsItem from ./components/goods-item export default {name: SubCategory,components: { SubBread, SubFilter, SubSort, GoodsItem } } /scriptstyle scoped langless .goods-list {background: #fff;padding: 0 25px;margin-top: 25px;ul {display: flex;flex-wrap: wrap;padding: 0 5px;li {margin-right: 20px;margin-bottom: 20px;:nth-child(5n) {margin-right: 0;}}} } /style2.无限列表加载组件 src/components/xtx-infinite-loading.vue templatediv classxtx-infinite-loading refcontainerdiv classloading v-ifloadingspan classimg/spanspan classtext正在加载.../span/divdiv classnone v-iffinishedspan classimg/spanspan classtext亲没有更多了/span/div/div /templatescript import { ref } from vue import { useIntersectionObserver } from vueuse/core export default {name: XtxInfiniteLoading,props: {loading: {type: Boolean,default: false},finished: {type: Boolean,default: false}},setup (props, { emit }) {const container ref(null)useIntersectionObserver(container,([{ isIntersecting }], dom) {if (isIntersecting) {if (props.loading false props.finished false) {emit(infinite)}}},{threshold: 0})return { container }} } /scriptstyle scoped langless .xtx-infinite-loading {.loading {display: flex;align-items: center;justify-content: center;height: 200px;.img {width: 50px;height: 50px;background: url(../../assets/images/load.gif) no-repeat center / contain;}.text {color: #999;font-size: 16px;}}.none {display: flex;align-items: center;justify-content: center;height: 200px;.img {width: 200px;height: 134px;background: url(../../assets/images/none.png) no-repeat center / contain;}.text {color: #999;font-size: 16px;}} } /style3.定义获取数据的API src/api/category.js /*** 获取分类下的商品带筛选条件* param {Object} params - 可参考接口文档*/ export const findSubCategoryGoods (params) {return request(/category/goods/temporary, post, params) }4.在src/views/category/sub.vue 使用组件 !-- 结果区域 --div classgoods-list!-- 排序 --GoodsSort /!-- 列表 --ulli v-foritem in list :keyitem.id GoodsItem :goodsitem //li/ul!-- 加载 --XtxInfiniteLoading :loadingloading :finishedfinished infinitegetData //divscript import SubBread from ./components/sub-bread import SubFilter from ./components/sub-filter import SubSort from ./components/sub-sort import GoodsItem from ./components/goods-item import { ref, watch } from vue import { findSubCategoryGoods } from /api/category import { useRoute } from vue-router export default {name: SubCategory,components: { SubBread, SubFilter, SubSort, GoodsItem },setup () {// 1. 基础布局// 2. 无限加载组件// 3. 动态加载数据且渲染// 4. 任何筛选条件变化需要更新列表const route useRoute()const loading ref(false)const finished ref(false)const goodsList ref([])// 查询参数let reqParams {page: 1,pageSize: 20}// 获取数据函数const getData () {loading.value truereqParams.categoryId route.params.idfindSubCategoryGoods(reqParams).then(({ result }) {if (result.items.length) {goodsList.value.push(...result.items)reqParams.page} else {// 加载完毕finished.value true}// 请求结束loading.value false})}// 切换二级分类重新加载watch(() route.params.id, (newVal) {if (newVal route.path (/category/sub/ newVal)) {goodsList.value []reqParams {page: 1,pageSize: 20}finished.value false}})return { loading, finished, goodsList, getData }} } /script14-二级类目-结果区-进行筛选 目的在做了筛选和排序的时候从新渲染商品列表。 大致步骤 排序组件当你点击了排序后 或者 复选框改变后 触发自定义事件 sort-change 传出排序参数筛选组件当你改了品牌或者其他筛选添加触发自定义事件 filter-change 传出筛选参数在sub组件分别绑定 sort-change filter-change 得到参数和当前参数合并回到第一页清空数据设置未加载完成触发加载。 落地代码 组件src/views/category/components/sub-sort.vue // 改变排序const changeSort (sortField) {// 省略代码....emit(sort-change, sortParams)} div classcheckXtxCheckbox changechangeCheck v-modelsortParams.inventory仅显示有货商品/XtxCheckboxXtxCheckbox changechangeCheck v-modelsortParams.onlyDiscount仅显示特惠商品/XtxCheckbox/divconst changeCheck (sortField) {emit(sort-change, sortParams)}组件 src/views/category/components/sub-filter.vue // 获取筛选参数const getFilterParams () {const filterParams {}const attrs []filterParams.brandId filterData.value.selectedBrandfilterData.value.saleProperties.forEach(p {const attr p.properties.find(attr attr.id p.selectedProp)if (attr attr.id ! undefined) {attrs.push({ groupName: p.name, propertyName: attr.name })}})if (attrs.length) filterParams.attrs attrsreturn filterParams}// 选择品牌const changeBrand (brandId) {if (filterData.value.selectedBrand brandId) return filterData.value.selectedBrand brandIdemit(filter-change, getFilterParams())}// 选中属性const changeAttr (p, attrId) {if (p.selectedProp attrId) returnp.selectedProp attrIdemit(filter-change, getFilterParams())}return { filterData, filterLoading, changeBrand, changeAttr }}组件 src/views/category/sub.vue SubFilter sort-changechangeFilter /GoodsSort filter-changechangeSort/// 监听筛选区改变const changeFilter (filterParams) {reqParams { ...reqParams, ...filterParams }reqParams.page 1goodsList.value []finished.value false}// 监听排序改变const changeSort (sortParams) {reqParams { ...reqParams, ...sortParams }reqParams.page 1goodsList.value []finished.value false}return { loading, finished, goodsList, getData, changeFilter, changeSort }