React后端管理系统-商品详情detail组件
- import React from 'react';
- import MUtil from 'util/mm.jsx'
- import Product from 'service/product-service.jsx'
- import PageTitle from 'component/page-title/index.jsx';
- import CategorySelector from './category-selector.jsx';
- import './save.scss';
- const _mm = new MUtil();
- const _product = new Product();
- class ProductDetail extends React.Component{
- constructor(props){
- super(props);
- this.state = {
- id : this.props.match.params.pid,
- name : '',
- subtitle : '',
- categoryId : 0,
- parentCategoryId : 0,
- subImages : [],
- price : '',
- stock : '',
- detail : '',
- status : 1 //商品状态1为在售
- }
- }
- componentDidMount(){
- this.loadProduct();
- }
- // 加载商品详情
- loadProduct(){
- // 有id的时候,表示是编辑功能,需要表单回填
- if(this.state.id){
- _product.getProduct(this.state.id).then((res) => {
- let images = res.subImages.split(',');
- res.subImages = images.map((imgUri) => {
- return {
- uri: imgUri,
- url: res.imageHost + imgUri
- }
- });
- this.setState(res);
- }, (errMsg) => {
- _mm.errorTips(errMsg);
- });
- }
- }
- render(){
- return (
- <div id="page-wrapper">
- <PageTitle title="添加商品" />
- <div className="form-horizontal">
- <div className="form-group">
- <label className="col-md-2 control-label">商品名称</label>
- <div className="col-md-5">
- <p className="form-control-static">{this.state.name}</p>
- </div>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">商品描述</label>
- <div className="col-md-5">
- <p className="form-control-static">{this.state.subtitle}</p>
- </div>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">所属分类</label>
- <CategorySelector
- readOnly
- categoryId={this.state.categoryId}
- parentCategoryId={this.state.parentCategoryId}/>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">商品价格</label>
- <div className="col-md-3">
- <div className="input-group">
- <input type="number" className="form-control"
- value={this.state.price} readOnly/>
- <span className="input-group-addon">元</span>
- </div>
- </div>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">商品库存</label>
- <div className="col-md-3">
- <div className="input-group">
- <input type="number" className="form-control"
- value={this.state.stock} readOnly/>
- <span className="input-group-addon">件</span>
- </div>
- </div>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">商品图片</label>
- <div className="col-md-10">
- {
- this.state.subImages.length ? this.state.subImages.map(
- (image, index) => (
- <div className="img-con" key={index}>
- <img className="img" src={image.url} />
- </div>)
- ) : (<div>暂无图片</div>)
- }
- </div>
- </div>
- <div className="form-group">
- <label className="col-md-2 control-label">商品详情</label>
- <div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}}></div>
- </div>
- </div>
- </div>
- )
- }
- }
- export default ProductDetail;
React后端管理系统-商品详情detail组件的更多相关文章
- React后台管理系统-商品管理列表组件
1.商品列表页面结构 <div id="page-wrapper"> <PageTitle title="商品列表" ...
- React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
- React后台管理系统-订单管理
1.订单管理页面和商品管理页面类似,都是一个搜索组件+列表组件 2.搜索框search组件 import React from 'react'; class ListSearch extends ...
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
- React后台管理系统-rich-editor组件
1.Simditor组件的github地址:https://github.com/mycolorway/simditor 网址:http://simditor.tower.im/ 2.在util里边新 ...
- react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置
现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...
- 商品详情页系统的Servlet3异步化实践
http://jinnianshilongnian.iteye.com/blog/2245925 博客分类: 架构 在京东工作的这一年多时间里,我在整个商品详情页系统(后端数据源)及商品详情页统一 ...
- [springboot 开发单体web shop] 8. 商品详情&评价展示
上文回顾 上节 我们实现了根据搜索关键词查询商品列表和根据商品分类查询,并且使用到了mybatis-pagehelper插件,讲解了如何使用插件来帮助我们快速实现分页数据查询.本文我们将继续开发商品详 ...
- Webpact打包React后端Node+Express
Webpact打包React后端Node+Express 前言 React官方推荐用Browserify或者Webpack 来开发React组件. Webpack 是什么?是德国开发者 Tobias ...
随机推荐
- DTCMS 网站管理系统
dtcms适合开发一些简单小型网站 开发的过程中遇见了各种问题,下面总结下我遇见的问题 1.遇见提示未开启生成静态功能 在系统设置里面将“伪URL重写”为“生成静态”可以解决 2.在生成静态页面的时候 ...
- elastic search语句
基本匹配: { "query":{ "match":{ "title" : "quick" } } } ES语法结构: ...
- CAD安装失败怎样卸载CAD 2014?错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- Murano Setup Steps
1. Select a Linux Distribution Only Ubuntu 14.04 (Trusty), Fedora 21 (or Fedora 22) and CentOS/RHEL ...
- Ruby on Rails 中你使用了Kaminari 后,千万不要再引入will_pagination 这个Gem 了
今日做开发的时候发现的这个问题 发现无论怎样配置都不能使用Kaminari 的Per 这个功能,分页大小也固定在了30 最开始还以为是Ransack 这个Gem 影响的,上网搜了很久发现没有 最后仔细 ...
- httpd 的坑
Httpd服务器的坑 在/etc/httpd/conf/httpd.conf中的配置信息, 有时注释到的内容仍然会生效 配置Auth时, 允许htpasswd规定的文件中的所有的用户, Require ...
- C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法
主要介绍了C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法,本文分别给出了使用微软语言包.手动编码实现两种实现方式,需要的朋友可以参考下 本文刚发布时,只写了一个实现方式,使用的是微软的语言包,但 ...
- c#实体转化
经常会遇到把一个实体转化成另一个实体这样的情况,实体的属性一个一个手写去转化不反对,但不是啥好的方法:可以使用反射写一个通用的实体转化类,针对任何实体转化,不用再去自己手写. public stati ...
- case when then[转]
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- 随机练习:C#实现维吉尼亚加密与解密(解密前提为已知密匙)
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...