.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完整代码如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ formatKey(key) }}
-
{{ value }}
4.修改Layout.vue代码如下:
埋种子
点击查看代码
5.输入搜索框你要搜索的内容进行立刻刷新
商品列表代码如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ formatKey(key) }}
-
{{ value }}
6.优化产品类型查询
商品列表代码如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ formatKey(key) }}
-
{{ value }}
7.产品左侧菜单栏查询优化
代码如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ formatKey(key) }}
-
{{ value }}
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.为左侧筛选框增加样式
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ getPropKey(key, 1) }}
-
{{ value }}
11.修复前端bug,左侧筛选框,url地址拼接失败问题
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ getPropKey(key, 1) }}
-
{{ value }}
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.前端代码如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
-
{{ productType.typeName }}
-
{{ getPropKey(key, 1) }}
-
{{ value }}