.NET经销商实战(十二)——优化用户体验,完善产品列表查询


商品列表查询时,查询条件显示在url后面

1.在商品列表页面中引入useRouter()

代码如下:
import { useRouter,useRoute } from 'vue-router'
var router = useRouter()
var route = useRoute()

2.前端查询方法代码如下:

点击查看代码
search: async () => {
        clearTimeout(productInfo.timer)
        productInfo.timer = setTimeout(async () => {
          router.push(`productList?keyword=${productInfo.searchText}`)
          // productInfo.products = await getProduct({
          //   searchText: productInfo.searchText,
          //   systemNo: productInfo.systemIndex,
          //   productType: productInfo.typeSelected,
          //   sort: 'ProductName',
          //   pageIndex: 1,
          // })
        }, 1000)
      },

3.ProductList.vue完整代码如下:

点击查看代码






4.修改Layout.vue代码如下:

埋种子

点击查看代码






5.输入搜索框你要搜索的内容进行立刻刷新

商品列表代码如下:

点击查看代码






6.优化产品类型查询

商品列表代码如下:

点击查看代码






7.产品左侧菜单栏查询优化

代码如下:

点击查看代码






8.抽离search方法,抽离出setRouter方法:

点击查看代码
search: async () => {
        clearTimeout(productInfo.timer)
        productInfo.timer = setTimeout(async () => {
          setRouter()
        }, 1000)
      },

const setRouter = () => {
      var url = `/productList?belongType=${productInfo.systemIndex}`
      if (productInfo.searchText?.trim() != '') {
        url += `&keyword=${productInfo.searchText}`
      }
      if (productInfo.typeSelected?.trim() != '') {
        url += `&type=${productInfo.typeSelected}`
      }
      router.push(url)
    }

9.selectType方法更新如下:

productList.vue代码如下:

点击查看代码
selectType: async (typeNo: string) => {
        if (productInfo.typeSelected != typeNo) {
          productInfo.typeSelected = typeNo
        }

        setRouter()
        // await productInfo.getProducts(
        //   productInfo.systemIndex,
        //   productInfo.typeSelected,
        //   null
        // )
        console.log('productInfo.typeSelected: ' + productInfo.typeSelected)
      },

10.为左侧筛选框增加样式

点击查看代码






11.修复前端bug,左侧筛选框,url地址拼接失败问题

点击查看代码






12.后端改造

ProductController
public async Task> GetProductDtosAsync(
			string? searchText,
			string? productType,
			string? systemNo = "板材",
			string? props = "",
			string? sort = "",
			int pageIndex = 1,
			int pageSize = 30,
			OrderType orderType = OrderType.Asc)
		{
			Dictionary dicProductProps = new();
			var arrproductProps = props?.Split('^') ?? new string[0];
			foreach (var item in arrproductProps)
			{
				var key = item.Split('_')[0];
				var value = item.Split('_')[1];
				dicProductProps.Add(key, value);
			}
			sort ??= "ProductName";
			var data = await ProductService.GetProductDto(searchText, productType, systemNo, dicProductProps, new PageWithSortDto
			{
				Sort = sort,
				PageIndex = pageIndex,
				PageSize = pageSize,
				OrderType = orderType
			});
			return data;
		}

productService代码如下:

点击查看代码
public async Task> GetProductDto(string searchText, string? productType, string systemNo, Dictionary dicProductProps, PageWithSortDto dto)
		{
			dto.Sort ??= "ProductName";
			int skipNum = (dto.PageIndex - 1) * dto.PageSize;
			var bzgg = dicProductProps.ContainsKey("ProductBZGG") ? dicProductProps["ProductBZGG"] : null;
			dicProductProps.TryGetValue("ProductCd", out string cd);
			dicProductProps.TryGetValue("ProductPp", out string pp);
			dicProductProps.TryGetValue("ProductXh", out string xh);
			dicProductProps.TryGetValue("ProductCz", out string cz);
			dicProductProps.TryGetValue("ProductHb", out string hb);
			dicProductProps.TryGetValue("ProductHd", out string hd);
			dicProductProps.TryGetValue("ProductGy", out string gy);
			dicProductProps.TryGetValue("ProductHs", out string hs);
			dicProductProps.TryGetValue("ProductMc", out string mc);
			dicProductProps.TryGetValue("ProductDj", out string dj);
			dicProductProps.TryGetValue("ProductGg", out string gg);
			dicProductProps.TryGetValue("ProductYs", out string ys);

			// var products = (from p in (await ProductRepo.GetListAsync())
			// 				orderby p.GetType().GetProperty(sort).GetValue(p)
			// 				select p).Skip(skipNum).Take(pageSize).ToList();
			//获取商品主档信息
			var products = ProductRepo.GetQueryable().Where(
				s => (s.TypeNo == productType || string.IsNullOrWhiteSpace(productType))
				&& (s.SysNo == systemNo || string.IsNullOrWhiteSpace(systemNo))
				&& (s.ProductName.Contains(searchText) || string.IsNullOrWhiteSpace(searchText))
				&& (bzgg == null || s.ProductBzgg == bzgg)
				&& (cd == null || s.ProductCd == cd)
				&& (pp == null || s.ProductPp == pp)
				&& (xh == null || s.ProductXh == xh)
				&& (cz == null || s.ProductCz == cz)
				&& (hb == null || s.ProductHb == hb)
				&& (hd == null || s.ProductHd == hd)
				&& (gy == null || s.ProductGy == gy)
				&& (hs == null || s.ProductHs == hs)
				&& (mc == null || s.ProductMc == mc)
				&& (dj == null || s.ProductDj == dj)
				&& (gg == null || s.ProductGg == gg)
				&& (ys == null || s.ProductYs == ys))
				.OrderBy(s => dto.Sort).Skip(skipNum).Take(dto.PageSize);

			var dtos = Mapper.Map>(products);
			var productPhotos = await GetProductPhotosByProductNo(dtos.Select(s => s.ProductNo).ToArray());
			var productSales = await GetProductSalesByProductNo(dtos.Select(s => s.ProductNo).ToArray());
			dtos.ForEach(s =>
			{
				s.ProductPhoto = productPhotos.FirstOrDefault(c => c.ProductNo == s.ProductNo);
				s.ProductSale = productSales.FirstOrDefault(c => c.ProductNo == s.ProductNo);
			});
			//根据productId取到属性
			return dtos;
		}

13.前端代码如下:

点击查看代码







相关