Browse Source

fix style

KaysonCui 5 years ago
parent
commit
e5485af759

+ 2 - 2
front/project/h5/components/Money/index.js

@@ -4,9 +4,9 @@ import { formatMoney } from '@src/services/Tools';
 
 export default class Money extends Component {
   render() {
-    const { className = '', size = 'basic', theme = 'default', value = '0' } = this.props;
+    const { className = '', disabled, size = 'basic', theme = 'default', value = '0' } = this.props;
     return (
-      <div className={`g-money ${className} ${size} ${theme}`}>
+      <div className={`g-money ${className} ${size} ${theme} ${disabled ? 'disabled' : ''}`}>
         ¥<span>{formatMoney(value)}</span>
       </div>
     );

+ 5 - 0
front/project/h5/components/Money/index.less

@@ -33,4 +33,9 @@
   span {
     font-size: 16px;
   }
+}
+
+.g-money.default.disabled {
+  color: unset;
+  text-decoration: line-through;
 }

+ 10 - 4
front/project/h5/components/Radio/index.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import './index.less';
+import Icon from '../Icon';
 
 export class SpecialRadio extends Component {
   render() {
-    const { checked, children, onClick } = this.props;
+    const { checked, children, onClick, theme = '' } = this.props;
     return (
-      <div className={`g-special-radio-wrapper ${checked ? 'checked' : ''}`}>
+      <div className={`g-special-radio-wrapper ${theme} ${checked ? 'checked' : ''}`}>
         <div className="g-special-radio" onClick={() => onClick && onClick()}>
           {children}
+          <Icon type="check" />
         </div>
       </div>
     );
@@ -21,12 +23,16 @@ export class SpecialRadioGroup extends Component {
   }
 
   render() {
-    const { list = [], value, values = [] } = this.props;
+    const { list = [], value, values = [], theme } = this.props;
     return (
       <div className="g-special-radio-group">
         {list.map(item => {
           return (
-            <SpecialRadio checked={value === item.value || values.indexOf(item.value) >= 0} onClick={() => this.onClickItem(item.value)}>
+            <SpecialRadio
+              theme={theme}
+              checked={value === item.value || values.indexOf(item.value) >= 0}
+              onClick={() => this.onClickItem(item.value)}
+            >
               {item.label}
             </SpecialRadio>
           );

+ 51 - 0
front/project/h5/components/Radio/index.less

@@ -13,6 +13,19 @@
     min-width: 60px;
     border-radius: 6px;
     font-size: 12px;
+    position: relative;
+    overflow: hidden;
+
+    i {
+      display: none;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      color: #fff;
+      z-index: 1;
+      font-size: 10px;
+      transform: scale(0.8);
+    }
   }
 }
 
@@ -21,6 +34,44 @@
   .g-special-radio {
     background: #E7F5FD;
     color: #40A8E2;
+
+    i {
+      display: block;
+    }
+  }
+
+  .g-special-radio::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border: 8px solid;
+    border-color: transparent #40A8E2 #40A8E2 transparent;
+  }
+}
+
+.g-special-radio-wrapper.theme {
+
+  .g-special-radio {
+    border: 1px solid #ECEDEE;
+  }
+}
+
+.g-special-radio-wrapper.checked.theme {
+
+  .g-special-radio {
+    background: #40A8E2;
+    color: #fff;
+    border: 1px solid #40A8E2;
+
+    i {
+      color: #40A8E2;
+    }
+  }
+
+  .g-special-radio::after {
+    border-color: transparent #fff #fff transparent;
   }
 }
 

+ 22 - 0
front/project/h5/routes/page/identity/index.less

@@ -24,4 +24,26 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
+  .finish {
+    text-align: center;
+    padding-top: 100px;
+
+    .icon {
+      font-size: 80px;
+      color: #6EC64B;
+    }
+
+    .title {
+      color: #303036;
+      font-size: 16px;
+      margin-bottom: 30px;
+    }
+
+    .desc {
+      font-size: 12px;
+      color: #686872;
+      margin-bottom: 10px;
+    }
+  }
 }

+ 32 - 13
front/project/h5/routes/page/identity/page.js

@@ -4,6 +4,7 @@ import Page from '@src/containers/Page';
 import Assets from '@src/components/Assets';
 import { asyncSMessage } from '@src/services/AsyncTools';
 import { dataURLtoBlob } from '@src/services/Tools';
+import Icon from '../../../components/Icon';
 import { Common } from '../../../stores/common';
 import { My } from '../../../stores/my';
 
@@ -14,10 +15,9 @@ export default class extends Page {
 
   init() {
     this.wx = null;
-    Common.readyWechat(window.location.href, ['chooseImage', 'getLocalImgData'])
-      .then((wx) => {
-        this.wx = wx;
-      });
+    Common.readyWechat(window.location.href, ['chooseImage', 'getLocalImgData']).then(wx => {
+      this.wx = wx;
+    });
   }
 
   submitFront() {
@@ -29,7 +29,7 @@ export default class extends Page {
         success(response) {
           wx.getLocalImgData({
             localId: response.localIds[0].toString(),
-            success: (res) => {
+            success: res => {
               const { localData } = res;
               let imageBase64 = '';
               if (localData.indexOf('data:image') === 0) {
@@ -65,7 +65,7 @@ export default class extends Page {
         success(response) {
           wx.getLocalImgData({
             localId: response.localIds[0].toString(),
-            success: (res) => {
+            success: res => {
               const { localData } = res;
               let imageBase64 = '';
               if (localData.indexOf('data:image') === 0) {
@@ -113,22 +113,41 @@ export default class extends Page {
         </div>
         <div className="id-card-1">
           <Assets name="IDcard" />
-          <Assets className="scan" src={this.state.front} name="scan1" onClick={() => {
-            this.submitFront();
-          }} />
+          <Assets
+            className="scan"
+            src={this.state.front}
+            name="scan1"
+            onClick={() => {
+              this.submitFront();
+            }}
+          />
         </div>
         <div className="id-card-2">
           <Assets name="IDcard2" />
-          <Assets className="scan" src={this.state.back} name="scan2" onClick={() => {
-            this.submitBack();
-          }} />
+          <Assets
+            className="scan"
+            src={this.state.back}
+            name="scan2"
+            onClick={() => {
+              this.submitBack();
+            }}
+          />
         </div>
       </div>
     );
   }
 
   renderFinish() {
-    return <div />;
+    return (
+      <div className="finish">
+        <div className="icon">
+          <Icon type="check-circle" />
+        </div>
+        <div className="title">认证完成!</div>
+        <div className="desc">180天VIP权限已赠送至您的账户</div>
+        <div className="desc">生效时间:2019-06-15</div>
+      </div>
+    );
   }
 
   renderView() {

+ 11 - 0
front/project/h5/routes/product/coursePackage/index.less

@@ -61,6 +61,17 @@
 
     .fee {
       display: inline-block;
+
+      .o-m {
+        display: inline-block;
+        margin-right: 10px;
+      }
+
+      .t-m {
+        display: inline-block;
+        font-size: 16px;
+        color: #F5B44A;
+      }
     }
   }
 }

+ 41 - 25
front/project/h5/routes/product/coursePackage/page.js

@@ -10,7 +10,7 @@ import { Course } from '../../../stores/course';
 import { ServiceKey, ServiceParamMap } from '../../../../Constant';
 
 export default class extends Page {
-  init() { }
+  init() {}
 
   initData() {
     const { id } = this.params;
@@ -20,18 +20,14 @@ export default class extends Page {
     });
   }
 
-  buy() {
-
-  }
+  buy() {}
 
   renderView() {
     const { data = {} } = this.state;
     return (
       <div>
         <div className="title">{data.title}</div>
-        <div className="tags">
-          {data.isNovice > 0 && <Tag size="small">适合新手</Tag>}
-        </div>
+        <div className="tags">{data.isNovice > 0 && <Tag size="small">适合新手</Tag>}</div>
         <div className="detail-title">授课老师</div>
         <div className="name">
           {/* <Avatar name="scan1" /> */}
@@ -40,13 +36,15 @@ export default class extends Page {
           })}
         </div>
         <div className="detail-title">课程介绍</div>
-        <div className="desc">
-          {data.description}
-        </div>
+        <div className="desc">{data.description}</div>
         <div className="detail-title">包含课程</div>
         <div className="detail-tags">
           {(data.courses || []).map(row => {
-            return <Tag theme="border">{row.title}({row.noNumber}课时)</Tag>;
+            return (
+              <Tag theme="border">
+                {row.title}({row.noNumber}课时)
+              </Tag>
+            );
           })}
         </div>
         <div className="detail-title">配套服务</div>
@@ -56,24 +54,42 @@ export default class extends Page {
         </div>
         <div className="detail-title">赠送服务</div>
         <div className="detail-tags">
-          {data.gift && ServiceKey.map(row => {
-            if (!data.gift[row.value]) return null;
-            const list = ServiceParamMap[row.value];
-            if (list) {
-              const map = getMap(list, 'value', 'label');
-              return <Tag theme="border">{row.label}×{map[data.gift[row.value]]}</Tag>;
-            }
-            return <Tag theme="border">{row.label}×{data.gift[row.value]}</Tag>;
-          })}
+          {data.gift &&
+            ServiceKey.map(row => {
+              if (!data.gift[row.value]) return null;
+              const list = ServiceParamMap[row.value];
+              if (list) {
+                const map = getMap(list, 'value', 'label');
+                return (
+                  <Tag theme="border">
+                    {row.label}×{map[data.gift[row.value]]}
+                  </Tag>
+                );
+              }
+              return (
+                <Tag theme="border">
+                  {row.label}×{data.gift[row.value]}
+                </Tag>
+              );
+            })}
         </div>
         <div className="fixed">
           <div className="fee">
-            原价: <Money value={data.originPrice} size="lager" />
-            套餐价: <Money value={data.price} size="lager" />
+            <div className="o-m">
+              原价: <Money value={data.originPrice} disabled />
+            </div>
+            <div className="t-m">
+              套餐价: <Money value={data.price} size="lager" />
+            </div>
           </div>
-          <Button width={110} className="f-r" radius onClick={() => {
-            this.buy();
-          }}>
+          <Button
+            width={110}
+            className="f-r"
+            radius
+            onClick={() => {
+              this.buy();
+            }}
+          >
             立即购买
           </Button>
         </div>

+ 87 - 68
front/project/h5/routes/product/courseVideo/page.js

@@ -20,7 +20,7 @@ export default class extends Page {
   }
 
   init() {
-    Main.dataStruct().then((list) => {
+    Main.dataStruct().then(list => {
       list = list.map(row => {
         row.title = `${row.titleZh} ${row.titleEn}`;
         row.label = row.title;
@@ -39,15 +39,14 @@ export default class extends Page {
   }
 
   initData() {
-    return this.initListKeys(['video', 'package'])
-      .then(() => {
-        return this.getList('video', 1);
-      });
+    return this.initListKeys(['video', 'package']).then(() => {
+      return this.getList('video', 1);
+    });
   }
 
   initListKeys(keys) {
     const { listMap } = this.state;
-    keys.forEach((key) => {
+    keys.forEach(key => {
       listMap[key] = new ListData();
     });
     this.setState({ listMap });
@@ -62,22 +61,22 @@ export default class extends Page {
         handler = Course.listVideo(Object.assign({ page }, this.state.search));
         break;
       case 'package':
-        handler = Course.listPackage(Object.assign({ page }, this.state.search))
-          .then(result => {
-            const { structMap } = this.state;
-            result.list = result.list.map(row => {
-              row.tag = (structMap[row.structId] || {}).title;
-              return row;
-            });
-            return result;
+        handler = Course.listPackage(Object.assign({ page }, this.state.search)).then(result => {
+          const { structMap } = this.state;
+          result.list = result.list.map(row => {
+            row.tag = (structMap[row.structId] || {}).title;
+            return row;
           });
+          return result;
+        });
         break;
       default:
         return;
     }
-    handler.then((result) => {
+    handler.then(result => {
       const { listMap } = this.state;
-      if (page === 1) { // todo 是否重新读取第一页为刷新所有数据
+      if (page === 1) {
+        // todo 是否重新读取第一页为刷新所有数据
         listMap[key] = new ListData();
       }
       listMap[key].get(page, result, this.state.search.size);
@@ -102,10 +101,13 @@ export default class extends Page {
         onOpenChange={isOpen => this.setState({ filter: isOpen })}
       >
         <div className="top">
-          <Tabs onChange={(value) => {
-            this.changeStruct(null);
-            this.getList(value.key, 1);
-          }} tabs={[{ title: '单次', key: 'video' }, { title: '套餐', key: 'package' }]} />
+          <Tabs
+            onChange={value => {
+              this.changeStruct(null);
+              this.getList(value.key, 1);
+            }}
+            tabs={[{ title: '单次', key: 'video' }, { title: '套餐', key: 'package' }]}
+          />
           <div className="right" onClick={() => this.setState({ filter: true })}>
             筛选
             <Assets name="screen" />
@@ -122,7 +124,7 @@ export default class extends Page {
       case 'video':
         return <CourseBlock data={rowData} />;
       case 'package':
-        return <CoursePackageBlock data={rowData} />;
+        return <CoursePackageBlock data={rowData} theme="not" />;
       default:
         return <div />;
     }
@@ -134,33 +136,37 @@ export default class extends Page {
     if (!data) return <div />;
     const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = data;
     if (total === 0) return this.renderEmpty();
-    return <ListView
-      className="list"
-      ref={el => { this.lv = el; }}
-      dataSource={dataSource}
-      renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
-        {loading ? '加载中...' : (bottom ? '没有更多了' : '')}
-      </div>)}
-      renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
-      style={{
-        height: this.state.height,
-        overflow: 'auto',
-      }}
-      pageSize={this.state.search.size}
-      scrollRenderAheadDistance={500}
-      onEndReached={() => {
-        if (loading) return;
-        if (bottom) {
-          if (!finish) {
-            data.finish = true;
-            // this.setState({ time: new Date() })
+    return (
+      <ListView
+        className="list"
+        ref={el => {
+          this.lv = el;
+        }}
+        dataSource={dataSource}
+        renderFooter={() => (
+          <div style={{ padding: 30, textAlign: 'center' }}>{loading ? '加载中...' : bottom ? '没有更多了' : ''}</div>
+        )}
+        renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
+        style={{
+          height: this.state.height,
+          overflow: 'auto',
+        }}
+        pageSize={this.state.search.size}
+        scrollRenderAheadDistance={500}
+        onEndReached={() => {
+          if (loading) return;
+          if (bottom) {
+            if (!finish) {
+              data.finish = true;
+              // this.setState({ time: new Date() })
+            }
+            return;
           }
-          return;
-        }
-        this.getList(tab, maxSectionId + 1);
-      }}
-      onEndReachedThreshold={10}
-    />;
+          this.getList(tab, maxSectionId + 1);
+        }}
+        onEndReachedThreshold={10}
+      />
+    );
   }
 
   renderEmpty() {
@@ -174,31 +180,44 @@ export default class extends Page {
         <div className="body">
           <div className="sub">
             <div className="title">筛选学科</div>
-            {(tab === 'package' ? packageTree : videoTree).map((row) => {
-              return <div className="item">
-                <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
-                {row.children.length > 0 && <div className="value">
-                  <SpecialRadioGroup
-                    list={row.children}
-                    value={search.structId}
-                    onChange={(value) => {
-                      this.changeStruct(value);
-                    }}
-                  />
-                </div>}
-                {row.children.length === 0 && <div className="value right">
-                  <Checkbox checked={search.structId === row.id} onClick={() => {
-                    this.changeStruct(row.id);
-                  }} />
-                </div>}
-              </div>;
+            {(tab === 'package' ? packageTree : videoTree).map(row => {
+              return (
+                <div className="item">
+                  <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
+                  {row.children.length > 0 && (
+                    <div className="value">
+                      <SpecialRadioGroup
+                        list={row.children}
+                        value={search.structId}
+                        onChange={value => {
+                          this.changeStruct(value);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {row.children.length === 0 && (
+                    <div className="value right">
+                      <Checkbox
+                        checked={search.structId === row.id}
+                        onClick={() => {
+                          this.changeStruct(row.id);
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
             })}
           </div>
         </div>
         <div className="footer">
-          <Button radius width={90} onClick={() => {
-            this.getList(tab, 1);
-          }}>
+          <Button
+            radius
+            width={90}
+            onClick={() => {
+              this.getList(tab, 1);
+            }}
+          >
             确定
           </Button>
         </div>

+ 132 - 95
front/project/h5/routes/product/data/page.js

@@ -22,13 +22,18 @@ export default class extends Page {
   }
 
   init() {
-    Main.dataStruct().then((list) => {
-      const structTree = formatTreeData(list.map(row => {
-        row.title = `${row.titleZh} ${row.titleEn}`;
-        row.label = row.title;
-        row.key = row.id;
-        return row;
-      }), 'id', 'title', 'parentId');
+    Main.dataStruct().then(list => {
+      const structTree = formatTreeData(
+        list.map(row => {
+          row.title = `${row.titleZh} ${row.titleEn}`;
+          row.label = row.title;
+          row.key = row.id;
+          return row;
+        }),
+        'id',
+        'title',
+        'parentId',
+      );
       this.setState({ structTree });
     });
 
@@ -38,15 +43,14 @@ export default class extends Page {
   }
 
   initData() {
-    return this.initListKeys(['data'])
-      .then(() => {
-        return this.getList('data', 1);
-      });
+    return this.initListKeys(['data']).then(() => {
+      return this.getList('data', 1);
+    });
   }
 
   initListKeys(keys) {
     const { listMap = {} } = this.state;
-    keys.forEach((key) => {
+    keys.forEach(key => {
       listMap[key] = new ListData();
     });
     this.setState({ listMap });
@@ -54,15 +58,15 @@ export default class extends Page {
   }
 
   getList(key, page) {
-    Course.listData(Object.assign({ page }, this.state.search))
-      .then((result) => {
-        const { listMap = {} } = this.state;
-        if (page === 1) { // todo 是否重新读取第一页为刷新所有数据
-          listMap[key] = new ListData();
-        }
-        listMap[key].get(page, result, this.state.search.size);
-        this.setState({ listMap });
-      });
+    Course.listData(Object.assign({ page }, this.state.search)).then(result => {
+      const { listMap = {} } = this.state;
+      if (page === 1) {
+        // todo 是否重新读取第一页为刷新所有数据
+        listMap[key] = new ListData();
+      }
+      listMap[key].get(page, result, this.state.search.size);
+      this.setState({ listMap });
+    });
   }
 
   changeOrder(order, direction) {
@@ -103,27 +107,38 @@ export default class extends Page {
 
   renderView() {
     const { filter, search = {} } = this.state;
-    return (<Drawer
-      style={{ minHeight: document.documentElement.clientHeight }}
-      position="right"
-      open={filter}
-      sidebar={this.renderFilter()}
-      onOpenChange={isOpen => this.setState({ filter: isOpen })}
-    >
-      <div className="top">
-        <div className={search.order === 'saleNumber' ? 'tab active' : 'tab'} onClick={() => {
-          if (search.order !== 'saleNumber') this.changeOrder('saleNumber', 'desc');
-        }}>销量</div>
-        <div className={search.order === 'updateTime' ? 'tab active' : 'tab'} onClick={() => {
-          if (search.order !== 'updateTime') this.changeOrder('updateTime', 'desc');
-        }}>更新时间</div>
-        <div className="right" onClick={() => this.setState({ filter: true })}>
-          筛选
+    return (
+      <Drawer
+        style={{ minHeight: document.documentElement.clientHeight }}
+        position="right"
+        open={filter}
+        sidebar={this.renderFilter()}
+        onOpenChange={isOpen => this.setState({ filter: isOpen })}
+      >
+        <div className="top">
+          <div
+            className={search.order === 'saleNumber' ? 'tab active' : 'tab'}
+            onClick={() => {
+              if (search.order !== 'saleNumber') this.changeOrder('saleNumber', 'desc');
+            }}
+          >
+            销量
+          </div>
+          <div
+            className={search.order === 'updateTime' ? 'tab active' : 'tab'}
+            onClick={() => {
+              if (search.order !== 'updateTime') this.changeOrder('updateTime', 'desc');
+            }}
+          >
+            更新时间
+          </div>
+          <div className="right" onClick={() => this.setState({ filter: true })}>
+            筛选
             <Assets name="screen" />
+          </div>
         </div>
-      </div>
-      {this.renderList()}
-    </Drawer>
+        {this.renderList()}
+      </Drawer>
     );
   }
 
@@ -136,33 +151,37 @@ export default class extends Page {
     const { data = {} } = listMap;
     const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = data;
     if (total === 0) return this.renderEmpty();
-    return <ListView
-      className="list"
-      ref={el => { this.lv = el; }}
-      dataSource={dataSource}
-      renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
-        {loading ? '加载中...' : (bottom ? '没有更多了' : '')}
-      </div>)}
-      renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
-      style={{
-        height: this.state.height,
-        overflow: 'auto',
-      }}
-      pageSize={this.state.search.size}
-      scrollRenderAheadDistance={500}
-      onEndReached={() => {
-        if (loading) return;
-        if (bottom) {
-          if (!finish) {
-            data.finish = true;
-            // this.setState({ time: new Date() })
+    return (
+      <ListView
+        className="list"
+        ref={el => {
+          this.lv = el;
+        }}
+        dataSource={dataSource}
+        renderFooter={() => (
+          <div style={{ padding: 30, textAlign: 'center' }}>{loading ? '加载中...' : bottom ? '没有更多了' : ''}</div>
+        )}
+        renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
+        style={{
+          height: this.state.height,
+          overflow: 'auto',
+        }}
+        pageSize={this.state.search.size}
+        scrollRenderAheadDistance={500}
+        onEndReached={() => {
+          if (loading) return;
+          if (bottom) {
+            if (!finish) {
+              data.finish = true;
+              // this.setState({ time: new Date() })
+            }
+            return;
           }
-          return;
-        }
-        this.getList('data', maxSectionId + 1);
-      }}
-      onEndReachedThreshold={10}
-    />;
+          this.getList('data', maxSectionId + 1);
+        }}
+        onEndReachedThreshold={10}
+      />
+    );
   }
 
   renderEmpty() {
@@ -177,17 +196,23 @@ export default class extends Page {
           <div className="item">
             <div className="label left">适合新手</div>
             <div className="value right">
-              <Switch checked={search.isNovice} onClick={() => {
-                this.changeNovice();
-              }} />
+              <Switch
+                checked={search.isNovice}
+                onClick={() => {
+                  this.changeNovice();
+                }}
+              />
             </div>
           </div>
           <div className="item">
             <div className="label left">原创资料</div>
             <div className="value right">
-              <Switch checked={search.isOriginal} onClick={() => {
-                this.changeOriginal();
-              }} />
+              <Switch
+                checked={search.isOriginal}
+                onClick={() => {
+                  this.changeOriginal();
+                }}
+              />
             </div>
           </div>
           <div className="item">
@@ -196,7 +221,7 @@ export default class extends Page {
               <SpecialRadioGroup
                 list={DataType}
                 value={search.dataType}
-                onChange={(value) => {
+                onChange={value => {
                   this.changeDataType(value);
                 }}
               />
@@ -204,32 +229,44 @@ export default class extends Page {
           </div>
           <div className="sub">
             <div className="title">筛选学科</div>
-            {structTree.map((row) => {
-              return <div className="item">
-                <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
-                {row.children.length > 0 && <div className="value">
-                  <SpecialRadioGroup
-                    list={row.children}
-                    value={search.structId}
-                    onChange={(value) => {
-                      this.changeStruct(value);
-                    }}
-                  />
-                </div>}
-                {row.children.length === 0 && <div className="value right">
-                  <Checkbox checked={search.structId === row.id} onClick={() => {
-                    this.changeStruct(row.id);
-                  }} />
-                </div>}
-
-              </div>;
+            {structTree.map(row => {
+              return (
+                <div className="item">
+                  <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
+                  {row.children.length > 0 && (
+                    <div className="value">
+                      <SpecialRadioGroup
+                        list={row.children}
+                        value={search.structId}
+                        onChange={value => {
+                          this.changeStruct(value);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {row.children.length === 0 && (
+                    <div className="value right">
+                      <Checkbox
+                        checked={search.structId === row.id}
+                        onClick={() => {
+                          this.changeStruct(row.id);
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
             })}
           </div>
         </div>
         <div className="footer">
-          <Button radius width={90} onClick={() => {
-            this.getList('data', 1);
-          }}>
+          <Button
+            radius
+            width={90}
+            onClick={() => {
+              this.getList('data', 1);
+            }}
+          >
             确定
           </Button>
         </div>

+ 26 - 13
front/project/h5/routes/product/serviceDetail/page.js

@@ -15,15 +15,14 @@ export default class extends Page {
 
   initData() {
     const { service } = this.params;
-    Main.getService(service)
-      .then(result => {
-        result.package = (result.package || []).map((row, index) => {
-          row.label = row.title;
-          row.value = index;
-          return row;
-        });
-        this.setState({ data: result });
+    Main.getService(service).then(result => {
+      result.package = (result.package || []).map((row, index) => {
+        row.label = row.title;
+        row.value = index;
+        return row;
       });
+      this.setState({ data: result });
+    });
   }
 
   buy() {
@@ -44,11 +43,20 @@ export default class extends Page {
         <div className="detail">
           {data.package.length > 1 && <div className="title">可选套餐</div>}
 
-          {data.package.length > 1 && <SpecialRadioGroup list={data.package} value={index} onChange={(value) => this.setState({ index: value })} />}
+          {data.package.length > 1 && (
+            <SpecialRadioGroup
+              theme="theme"
+              list={data.package}
+              value={index}
+              onChange={value => this.setState({ index: value })}
+            />
+          )}
           {data.package.length > 1 && <div className="division" />}
           <div className="title">服务介绍</div>
           <h2>服务</h2>
-          <p>{item.description} {item.expire_info}</p>
+          <p>
+            {item.description} {item.expire_info}
+          </p>
           <h2>退款政策</h2>
           <p>{item.refund_policy}</p>
           <h2>版权说明</h2>
@@ -58,9 +66,14 @@ export default class extends Page {
           <div className="fee">
             总额: <Money value={item.price} size="lager" />
           </div>
-          <Button width={110} className="f-r" radius onClick={() => {
-            this.buy();
-          }}>
+          <Button
+            width={110}
+            className="f-r"
+            radius
+            onClick={() => {
+              this.buy();
+            }}
+          >
             立即购买
           </Button>
         </div>

+ 5 - 0
front/project/www/routes/paper/process/base/index.less

@@ -391,6 +391,10 @@
             .block-text {
               margin-bottom: 30px;
             }
+
+            i {
+              display: none;
+            }
           }
 
           .block-item-body.active {
@@ -400,6 +404,7 @@
               position: absolute;
               top: 5px;
               left: 5px;
+              display: block;
             }
           }