增加渠道产品详情页的展示

src/common/router.js

@@ -158,7 +158,7 @@ export const getRouterData = (app) => {
       name: '创建商品',
     },
     '/goods/edit': {
-      component: dynamicWrapper(app, ['mproduct/detail', 'goods', 'tag/tag'], () => import('../routes/MProduct/Edit')),
+      component: dynamicWrapper(app, ['mproduct/detail', 'mproduct/detail', 'goods', 'tag/tag'], () => import('../routes/MProduct/Edit')),
       name: '修改商品',
     },
     '/trade/order': {

src/models/mproduct/detail.js

@@ -1,5 +1,6 @@
 import { message } from 'antd';
 import { queryOne, createMerchantProduct } from '../../services/mproduct';
+import * as pro from '../../services/product';
 import pathToRegexp from 'path-to-regexp';
 import queryString from 'query-string';
 import { Codes } from '../../utils/config';
@@ -11,6 +12,8 @@ export default {
     filters: {},
     currentItem: {},
     itemLoading: false,
+    productItem: {},
+    productLoad: false,
   },
 
   subscriptions: {
@@ -20,6 +23,7 @@ export default {
         if (match) {
           const params = queryString.parse(search);
           dispatch({ type: 'queryOne', payload: { ...params } });
+          dispatch({ type: 'queryOneProduct', payload: { ...params } });
           dispatch({ type: 'saveFilters', payload: state });
         }
         if (pathname == '/goods/add') {
@@ -35,10 +39,18 @@ export default {
       yield put({ type: 'changeLoading', payload: { itemLoading: true } });
       const { data, success } = yield call(queryOne, payload);
       if (success) {
-        yield put({ type: 'querySuccess', payload: { ...data } });
+        yield put({ type: 'querySuccess', payload: { currentItem: data } });
       }
       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 } });
+    },
     // 创建渠道方产品 {pid:'xxx', merchantId:'xxx', status:'NORMAL'}
     * createMerchantProduct ({ payload, callback }, { call, put }) {
       const { data, success } = yield call(createMerchantProduct, payload);
@@ -54,8 +66,8 @@ export default {
     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/Edit/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Divider, Modal, Table, Form, Card, Button, Tag } from 'antd';
+import { Divider, Popover, Modal, Table, Form, Card, Button, Tag, Icon } from 'antd';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import queryString from 'query-string';
@@ -8,7 +8,7 @@ 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;
 const confirm = Modal.confirm;
@@ -20,6 +20,200 @@ const confirm = Modal.confirm;
   tagModel: state.tagModel,
 }))
 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 :
+                          <Card
+                            hoverable
+                            bordered
+                            cover={<img alt="" src={data.coverUrl.startsWith('http') ? data.coverUrl : `${ossHost}/${data.coverUrl}`} />}
+                            style={{ width: 200 }}
+                          >
+                          </Card>}
+                    </Description>
+                    <Description term="课程背景图片">
+                        {!data.bgUrl ? null :
+                          <Card
+                            hoverable
+                            bordered
+                            cover={<img alt="" src={data.bgUrl.startsWith('http') ? data.bgUrl : `${ossHost}/${data.bgUrl}`} />}
+                            style={{ width: 200 }}
+                          >
+                          </Card>}
+                    </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({
@@ -154,7 +348,7 @@ export default class MerchantProductEdit extends PureComponent {
 
   render(){
     const { mproductDetail, goodsModel, tagModel, location } = this.props;
-    const { currentItem } = mproductDetail;
+    const { currentItem, productItem } = mproductDetail;
     const { modalShow, tagModalShow, operation, goodsItem } = goodsModel;
     const { list, listLoading, pagination } = tagModel;
     const { goods, tags, type, code, name, merchantName } = currentItem;
@@ -226,13 +420,7 @@ export default class MerchantProductEdit extends PureComponent {
           bordered={false}
           title="详情"
           style={{ marginBottom: 15 }}
-        >
-          <DescriptionList size="large" col={2} style={{ marginBottom: 32 }}>
-            <Description term="商品编号">{code}</Description>
-            <Description term="商品名称">{name}</Description>
-            <Description term="商品类型">{productType[type]}</Description>
-            <Description term="渠道名称">{merchantName}</Description>
-          </DescriptionList>
+        >{this.handleProductDetail(productItem)}
         </Card>
         <Card
           bordered={false}

src/utils/config.js

@@ -44,8 +44,7 @@ Codes.CODE_SEASON = '季';
 Codes.CODE_ITEM = '件';
 
 module.exports = {
-  // apiHost: 'http://tt-cms.api.ai160.com',
-  apiHost: 'http://192.168.1.40:8500',
+  apiHost: 'http://tt-cms.ai160.com/api/v1',
   ossHost: 'http://efunimgs.oss-cn-beijing.aliyuncs.com',
   // 每页返回数据量
   pageSize: 20,