.NET经销商实战(八)——前端界面代码改造
前端代码结构如上图
1.在Interfaces新增ProductList.ts文件
代码如下:
点击查看代码
export interface IProductInputDto {
systemNo: string,
sort: string,
pageIndex: number,
}
export interface IProductInfo {
products: IProduct[],
belongTypes: IBelongType[],
getProducts: Function,
// tranPrice: Function(price: number): string
}
export interface IProduct {
id: number;
sysNo: string;
productNo: string;
productName: string;
typeNo: string;
typeName: string;
productPp: string;
productXh: string;
productCz: string;
productHb: string;
productHd: string;
productGy: string;
productHs: string;
productMc: string;
productDj: string;
productCd: string;
productGg: string;
productYs: string;
unitNo: string;
unitName: string;
productNote: string;
productBzgg: string;
belongTypeNo: string;
belongTypeName: string;
productPhoto: IProductPhoto;
productSale: IProductSale;
}
export interface IBelongType {
sysNo: string;
belongTypeName: string;
}
export interface IProductPhoto {
sysNo: string | null;
productNo: string;
productPhotoUrl: string;
}
export interface IProductSale {
sysNo: string;
productNo: string;
stockNo: string | null;
salePrice: number;
}
2.在HttpRequests文件夹新增ProductListRequest.ts
代码如下:
点击查看代码
import axios from 'axios'
import { IProductInputDto } from '@/Interfaces/ProductList'
axios.defaults.baseURL = "http://localhost:5011/"
export const getProduct = async (data: IProductInputDto) => {
var res = await axios.get("Product/GetProductDtos", { params: data });
return res.data;
}
export const getBelongType = async () => {
var res = await axios.get("Product/GetBelongTypes");
return res.data;
}
3.前端界面
在views中修改ProductList.vue文件如下:
点击查看代码
{{ belongType.belongTypeName }}
-
{{ product.productName }}
类别:{{ product.typeName }}
¥{{ tranPrice(product.productSale?.salePrice) }}/张
- 免漆板背板
- 免漆板
- 面板
- 木工板
- 木工板
- 木工板
- 免漆板背板
- 免漆板
- 面板
- 木工板
- 木工板
- 木工板
- 免漆板背板
- 免漆板
- 面板
- 木工板
- 木工板
- 木工板
-
颜色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色
-
颜色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色
-
颜色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色
- 胡桃色