From scratch, build a simple shopping platform (10):
https://blog.csdn.net/time_____/article/details/108442619
Project source code (continuous update): https://gitee.com/DieHunter/myCode/ The tree/master/shopping
article follows the order management back-end interface of the previous article to implement the front-end functions. The main functions are: new orders, order list, order deletion, order status modification.
front end:
- First realize the new order function, modify some codes according to the previous method of adding users and products, and modify the submitted form. There is a function of dynamically adding or subtracting nested fields in the AntD form , which can be used for orders. The increase and decrease of products
use Form.List to provide a rendering function, which has two parameters, which are the array to be operated and the operation mode object (add: add, remove: delete, move: move)
Achieve effect<Form.List name="shopList"> {(shopList, { add, remove }) => ( <div> {shopList.map((field) => ( <Row gutter={20} key={field.key}> <Col span={10}> <Form.Item {...field} name={[field.name, "shopName"]} fieldKey={[field.fieldKey, "shopName"]} rules={[{ required: true, message: "请输入商品名称" }]} > <Input placeholder="请输入商品名称" allowClear /> </Form.Item> </Col> <Col span={8}> <Form.Item {...field} name={[field.name, "shopCount"]} fieldKey={[field.fieldKey, "shopCount"]} rules={[{ required: true, message: "请输入购买数量" }]} > <InputNumber style={ { width: "100%" }} min={1} max={99} placeholder="数量" allowClear /> </Form.Item> </Col> <Col span={2}> <MinusCircleOutlined onClick={() => { remove(field.name); }} /> </Col> </Row> ))} <Row gutter={20}> <Col span={20}> <Button type="dashed" onClick={() => { add(); }} style={ { width: "100%" }} > <PlusOutlined /> 添加商品 </Button> </Col> </Row> </div> )} </Form.List>
- Realize the submission function and docking interface. The submission function is the same as the previous new users and new products, but the parameters are different, so it can be reused directly. The submitted function and shopList structure and data structure are as follows
sendData(val) { console.log(val.shopList) if (!val.shopList || !val.shopList.length) { message.warning("请选择至少一件商品"); return; } val.token = this.$utils.getStorage(StorageName.token); console.log(val) Bussiness.sendInfo.bind(this, ServerApi.order.addOrder, val)(); }
- After the new function is completed, the display function of the order list is realized below, which is the same as the previous table display. Different parameters (ie form fields and configuration) are passed in the table component to achieve the effect of different table display. Here is a table embedded Set of problems, each order corresponds to multiple different products, so the front-end effect should be like this,
the sub-table involved here can be displayed with a new table sub-component, and a new component is created under the table component. Named expandTab.js, used to display the list of items purchased in the order
Make an adaptation in the Table component, where the expandable attribute is a new attribute, and the order list display status is judged according to whether it is order. The function of the showOrderItem function is to generate a sub-tableimport React from "react"; import config from "../../config/config"; import ShopType from "../../config/shopType"; const { shopType } = ShopType; const { FilePath } = config; export default class expandTab { constructor(_this) { return [ { align: "center", title: "商品名", key: "shopName", dataIndex: "shopName", width: 50, }, { align: "center", title: "商品类型", key: "shopType", dataIndex: "shopType", width: 50, render: (text) => { return <div>{shopType[text].name}</div>; }, }, { align: "center", title: "商品图片", key: "shopPic", dataIndex: "shopPic", width: 60, render: (imgPath) => { return ( <img src={FilePath + imgPath} alt="" style={ { width: 60, margin: "0 auto" }} /> ); }, }, { align: "center", title: "单价", key: "shopPrice", dataIndex: "shopPrice", width: 30, render: (price) => { return <div>{price + "元"}</div>; }, },{ align: "center", title: "购买数量", key: "shopCount", dataIndex: "shopCount", width: 30, }, ]; } }<Table scroll={ { x: 1000 }} rowKey={(record) => record._id} columns={this.state.columns} dataSource={this.state.list} expandable={ this.state.tableType === "order" ? { indentSize: 0, expandedRowRender: this.showOrderItem, } : null } pagination={false} ></Table>showOrderItem function (generate a new Table subcomponent)
The rest of the functions are the same as functions, products and user managementshowOrderItem = (record) => { return ( <Table rowKey={(record) => record._id} scroll={ { x: 1000 }} columns={new expandTab(this)} dataSource={record.shopList} pagination={false} ></Table> ); }; - Modify the order status and delete the order. To delete the order, you can directly add a button in the above-generated table to execute the delete event to the main interface. A clickHandler function was written before in table.js
The clickHandler function (used to summarize all operations on the table data, and then distribute it to the main page to trigger the corresponding event):{ align: "center", title: "操作", width: 50, fixed: "right", render: (record) => { return ( <div> <Popconfirm title="是否删除？" onConfirm={_this.clickHandler.bind(_this, record, "delete")} okText="是" cancelText="否" disabled={record.userType === "admin" ? true : false} > <Button type="danger" disabled={record.userType === "admin" ? true : false} > 删除 </Button> </Popconfirm> </div> ); }, },
The following is the method in the main page of order management:clickHandler(record, type) { switch (type) { case "add": //添加 this.props.addInfo(); break; case "change": //修改 this.props.changeInfo(record); break; case "delete": //删除 this.props.deleteInfo(record); break; case "allow": //冻结 this.props.freezeInfo(record); break; case "state": //订单状态 this.props.orderState(...arguments); break; default: break; } }
Bind these methods to the properties of the parent component as the partial methods of the child component for the child component to call. Modifying the order is the same as deleting. The following effects are achieved. The drop-down list modification event should be added when modifying, and the clickHandler function should also be executed. Pass to the backend through the interfaceaddOrder = () => {//新增订单，触发bussiness中的新增接口 Events.emit(EventName.ADD_ORDER, FormDefaultVal.shop); this.drawerChild.showDrawer("addOrder"); }; changePage = (pageConfig) => {//分页 this.setState({ pageConfig }); this.getList(); }; orderState = (data, type, state) => {//修改订单状态，触发bussiness中的修改接口 data.token = this.$utils.getStorage(StorageName.token); data.orderState = state; Bussiness.orderState.bind(this, ServerApi.order.updateOrder, data)(); }; getList = () => {//获取订单列表，触发bussiness中的获取列表函数 Bussiness.getInfo.bind(this, ServerApi.order.orderList)(); }; deleteOrder = (record) => {//删除订单，触发bussiness中的删除接口 Bussiness.delInfo.bind(this, ServerApi.order.delOrder, record)(); };
- The above is all the content of the new front-end order management
The next issue will start the introduction of the front-end section of the mall, and later will be packaged and used in conjunction with App and uniapp