增加产品详情显示

src/models/mproduct/detail.js

@@ -1,6 +1,7 @@
 import pathToRegexp from 'path-to-regexp';
 import queryString from 'query-string';
 import { queryOne } from '../../services/mproduct';
+import * as pro from '../../services/product';
 
 export default {
   namespace: 'mproductDetail',
@@ -9,6 +10,8 @@ export default {
     filters: {},
     currentItem: {},
     itemLoading: false,
+    productItem: {},
+    productLoad: false,
   },
 
   subscriptions: {
@@ -17,7 +20,9 @@ export default {
         const match = pathToRegexp('/products/view').exec(pathname);
         if (match) {
           const params = queryString.parse(search);
+          const { pid } = params;
           dispatch({ type: 'queryOne', payload: { ...params } });
+          dispatch({ type: 'queryOneProduct', payload: { id: pid } });
           dispatch({ type: 'saveFilters', payload: state });
         }
       });
@@ -34,14 +39,22 @@ export default {
       }
       yield put({ type: 'changeLoading', payload: { itemLoading: false } });
     },
+    * queryOneProduct ({ payload }, { call, put }) {
+      yield put({ type: 'changeLoading', payload: { productLoad: true } });
+      const { data, success } = yield call(pro.queryOne, payload);
+      if (success) {
+        yield put({ type: 'querySuccess', payload: { productItem: data } });
+      }
+      yield put({ type: 'changeLoading', payload: { productLoad: false } });
+    },
   },
 
   reducers: {
     changeLoading(state, { payload }) {
       return { ...state, ...payload };
     },
-    querySuccess(state, { payload }) {
-      return { ...state, currentItem: payload };
+    querySuccess(state, action) {
+      return { ...state, ...action.payload };
     },
     saveFilters(state, { payload: filters }) {
       return { ...state, filters };

src/routes/MProduct/View/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Divider, Table, Form, Card, Button, Tag } from 'antd';
+import { Divider, Table, Form, Card, Button, Tag, Popover, Icon } from 'antd';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import queryString from 'query-string';
@@ -8,13 +8,205 @@ import FooterToolbar from '../../../components/FooterToolbar';
 import DescriptionList from '../../../components/DescriptionList';
 import NewPriceModal from './price';
 import TagSelectModal from './tags';
-import { pageSize, productType, Codes } from '../../../utils/config';
+import { pageSize, productType, Codes, ossHost } from '../../../utils/config';
 
 const { Description } = DescriptionList;
 
 @Form.create()
 @connect(state => ({ mproductDetail: state.mproductDetail }))
 export default class MerchantProductEdit extends PureComponent {
+  handleProductDetail = (data) => {
+    const lessonTableColumns = [{
+      title: '课编号',
+      dataIndex: 'code',
+      key: 'code',
+      width: '40%',
+    },{
+      title: '课名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '60%',
+    }];
+    const supportTableColumns = [{
+      title: '配套编号',
+      dataIndex: 'code',
+      key: 'code',
+      width: '40%',
+    },{
+      title: '配套名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '60%',
+    }];
+    const imgTableColumns = [{
+      title: '位置',
+      dataIndex: 'sort',
+      key: 'sort',
+      render: (text, record, index) => index + 1,
+    },{
+      title: '缩略图',
+      dataIndex: 'path',
+      key: 'path',
+      render: (text, record) => (
+          <Popover
+            content={<img alt="" src={`${ossHost}/${text}`} width={350} />}
+            title={record.name}
+          >
+            <img alt="" src={`${ossHost}/${text}`} width={70} />
+          </Popover>
+      ),
+    }];
+    const comboTableColumns = [{
+      title: '编号',
+      dataIndex: 'code',
+      key: 'code',
+      width: '30%',
+    },{
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '40%',
+    },{
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      render: (text, record) => productType[text],
+      width: '30%',
+    }];
+    if (!data) {
+        return '暂无数据';
+    } else if (data.type === Codes.CODE_COURSE) {
+        return (
+            <div>
+                <DescriptionList size="large" col={2}>
+                    <Description term="课程编号">{data.code}</Description>
+                    <Description term="课程名称">{data.name}</Description>
+                    <Description term="课程简介">{data.digest}</Description>
+                    <Description term="课程详情">{data.detail}</Description>
+                    <Description term="课程子标题">{data.subTitle}</Description>
+                    <Description term="面包屑导航">{data.breadCrumb}</Description>
+                    <Description term="课程封面图片">
+                        {!data.coverUrl ? null :
+                            <img
+                                alt=""
+                                src={data.coverUrl.startsWith('http') ? data.coverUrl : `${ossHost}/${data.coverUrl}`}
+                                style={{ width: 200 }}
+                            />
+                        }
+                    </Description>
+                    <Description term="课程背景图片">
+                        {!data.bgUrl ? null :
+                            <img
+                                alt=""
+                                src={data.bgUrl.startsWith('http') ? data.bgUrl : `${ossHost}/${data.bgUrl}`}
+                                style={{ width: 200 }}
+                            />
+                        }
+                    </Description>
+                    <Description term="课程内课列表">
+                        <Table
+                          locale={{
+                            emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                              该课程下不包含任何课!</span>
+                          }}
+                          dataSource={data.subItemList || []}
+                          columns={lessonTableColumns}
+                          rowKey={record => record.id}
+                          bordered
+                          pagination={false}
+                        />
+                    </Description>
+                    <Description term="相关配套列表">
+                        <Table
+                          locale={{
+                            emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                              该课程无任何相关配套!</span>
+                          }}
+                          dataSource={data.supportList || []}
+                          columns={supportTableColumns}
+                          rowKey={record => record.id}
+                          bordered
+                          pagination={false}
+                        />
+                    </Description>
+                </DescriptionList>
+            </div>
+        );
+    } else if (data.type === Codes.CODE_SUPPORT) {
+        return (
+            <div>
+                <DescriptionList size="large" col={2}>
+                    <Description term="配套编号">{data.code}</Description>
+                    <Description term="配套名称">{data.name}</Description>
+                    <Description term="配套简介">{data.digest}</Description>
+                    <Description term="配套详情">{data.detail}</Description>
+                </DescriptionList>
+                <DescriptionList size="large" col={1}>
+                    <Description term="配套封面图片">
+                        {!data.coverUrl ? null :
+                            <img
+                                alt=""
+                                src={data.coverUrl.startsWith('http') ? data.coverUrl : `${ossHost}/${data.coverUrl}`}
+                                style={{ width: 200 }}
+                            />
+                        }
+                    </Description>
+                </DescriptionList>
+                <DescriptionList size="large" col={2} style={{ marginTop: 20 }}>
+                    <Description term="配套图片列表">
+                        <Table
+                          locale={{
+                            emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                              该配套不包含任何图片!</span>
+                          }}
+                          dataSource={(data.imgList || []).map((item,index) => ({ id: index, path: item }))}
+                          columns={imgTableColumns}
+                          rowKey={record => record.id}
+                          bordered
+                          pagination={false}
+                        />
+                    </Description>
+                    <Description term="相关配套列表">
+                        <Table
+                          locale={{
+                            emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                              该配套无任何相关配套!</span>
+                          }}
+                          dataSource={data.supportList || []}
+                          columns={supportTableColumns}
+                          rowKey={record => record.id}
+                          bordered
+                          pagination={false}
+                        />
+                    </Description>
+                </DescriptionList>
+            </div>
+        );
+    } else {
+        return (
+            <div>
+                <DescriptionList size="large" col={1}>
+                    <Description term="课程包编号">{data.code}</Description>
+                    <Description term="课程包名称">{data.name}</Description>
+                    <Description term="课程包内容">
+                        <Table
+                          simple
+                          bordered
+                          columns={comboTableColumns}
+                          dataSource={data.products || []}
+                          pagination={false}
+                          rowKey={record => record.id}
+                          locale={{
+                            emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                              该课程包内暂无相关内容!</span>
+                          }}
+                        />
+                    </Description>
+                </DescriptionList>
+            </div>
+        );
+    }
+  }
   handleAddPriceClick = () => {
     this.props.dispatch({
       type: 'goodsModel/showModal',
@@ -151,7 +343,7 @@ export default class MerchantProductEdit extends PureComponent {
 
   render() {
     const { mproductDetail } = this.props;
-    const { currentItem } = mproductDetail;
+    const { currentItem, productItem } = mproductDetail;
     const { goods, tags, type, code, name, merchantName } = currentItem;
 
     const listTableProps = {
@@ -181,12 +373,7 @@ export default class MerchantProductEdit extends PureComponent {
           bordered={false}
           title="产品详情"
           style={{ marginBottom: 15 }}
-        >
-          <DescriptionList size="large" col={3} style={{ marginBottom: 32 }}>
-            <Description term="商品编号">{code}</Description>
-            <Description term="商品名称">{name}</Description>
-            <Description term="商品类型">{productType[type]}</Description>
-          </DescriptionList>
+        >{this.handleProductDetail(productItem)}
         </Card>
         <Card
           bordered={false}

src/services/product.js

@@ -1,13 +1,6 @@
 import { stringify } from 'qs';
 import request from '../utils/request';
-import { product, savePackage } from '../utils/api';
-
-/**
- * @desc 获取全部产品 /product
- */
-export async function query(params) {
-  return request(`${product}?${stringify(params)}`);
-}
+import { product } from '../utils/api';
 
 /**
  * @desc 获取一个产品 /product/<productId>
@@ -15,57 +8,3 @@ export async function query(params) {
 export async function queryOne({ id }) {
   return request(`${product}/${id}`);
 }
-
-/**
- * @desc 创建一个产品
- */
-export async function create(params) {
-  const { type, ...rest } = params;
-  const options = {
-    method: 'POST',
-    body: JSON.stringify(rest),
-  };
-  return request(`${product}?type=${type}`, options);
-}
-
-/**
- * @desc 修改一个产品 put /product/<productId>
- */
-export async function update(params) {
-  const { id, ...rest } = params;
-  const options = {
-    method: 'PUT',
-    body: JSON.stringify(rest),
-  };
-  return request(`${product}/${id}`, options);
-}
-
-/**
- * @desc 下架一个产品 delete /product/<productId>
- */
-export async function remove({ id }) {
-  const options = { method: 'DELETE' };
-  return request(`${product}/${id}`, options);
-}
-
-/**
- * @desc 创建课程包 post /package
- */
-export async function createPackage(params) {
-  const options = {
-    method: 'POST',
-    body: JSON.stringify(params),
-  };
-  return request(`${savePackage}`, options);
-}
-
-/**
- * @desc 修改课程包 put /package/<packageId>
- */
-export async function updatePackage({ id, ...rest }) {
-  const options = {
-    method: 'PUT',
-    body: JSON.stringify(params),
-  };
-  return request(`${savePackage}/${id}`, options);
-}

src/utils/api.js

@@ -13,6 +13,7 @@ module.exports = {
   merchantProducts: `${config.apiHost}/merchant/product`,
   merchantProduct: `${config.apiHost}/merchant/product/detail`,
   merchantProductCreate: `${config.apiHost}/merchant/product/status`,
+  product: `${config.apiHost}/product`,
   order: `${config.apiHost}/order`,
   subOrder: `${config.apiHost}/order/detail`,
   orderPay: `${config.apiHost}/order/pay`,