Browse Source

优化我的抵用卷列表展示

liting2017 6 years ago
parent
commit
ab7a51cfad

+ 10 - 7
js/component/account/ticket/coupon.jsx

@@ -17,7 +17,7 @@ class DemandList extends Component {
                 defaultCurrent: 1,
                 defaultPageSize: 10,
                 showQuickJumper: true,
-                pageSize: 6,
+                pageSize:8,
                 onChange: function (page) {
                     this.loadData(page);
                 }.bind(this),
@@ -170,13 +170,16 @@ class DemandList extends Component {
                             <Row gutter={20}>
                                {
                                    this.state.dataSource.map(item=>{
-                                     return <Col span={8} style={{marginBottom:10}}>
+                                     return <Col span={6} style={{marginBottom:10}}>
                                             <Card>
-                                                <p>优惠额 : ¥{item.money} 元</p>
-                                                <p>名称 : {item.name}</p>
-                                                <p>生效日期 : {item.starTime}</p>
-                                                <p>截止日期 : {item.endTime}</p>
-                                                <p>有效天数 : {item.durationDay}</p>
+                                                <div className="discountList">
+                                                    <p>¥<span>{parseInt(item.money)}</span> 元</p>
+                                                    <div className="intro">
+                                                        <p>名称 : {item.name}</p>
+                                                        <p>有效天数 : {item.durationDay}</p>
+                                                    </div>
+                                                </div>
+                                                <p>有效日期 : {(item.starTime.split(' ')[0]).replace(/-/g,'.')} - {(item.endTime.split(' ')[0]).replace(/-/g,'.')}</p>
                                             </Card>
                                         </Col>
                                     })

+ 39 - 4
js/component/account/ticket/coupon.less

@@ -32,8 +32,43 @@
     }
 }
 .cardCode{
-    text-align: center;
-    p{
-        line-height: 30px;
+    .ant-card-body{
+        background: #69afeb;
+        color: #fff;
+        >p{
+            clear: both;
+            text-align: center;
+            font-size: 16px;
+            padding-top: 20px;
+            border-top: 1px solid #cccccc;
+        }
+    }
+    .discountList{
+        display: flex;
+        display: -webkit-flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        >p{
+            width: 124px;
+            overflow: hidden;
+            height: 68px;
+            text-align: center;
+            span{
+                font-size: 40px;
+            }
+        }
     }
-}
+    .intro {
+        width: 180px;
+        margin-top: 10px;
+        p{
+            font-size: 16px;
+            text-align: left;
+            margin-bottom: 5px;
+            overflow: hidden;
+            white-space:nowrap; 
+            text-overflow:ellipsis; 
+            -o-text-overflow:ellipsis;
+        }
+    }
+}

+ 2 - 1
js/component/account/ticket/vouchers.jsx

@@ -346,7 +346,8 @@ const DemandList = React.createClass({
                                         {...formItemLayout}
                                         label={<span><strong style={{color:'#f00'}}> * </strong>面额</span>}>
                                         <div><InputNumber value={this.state.money} 
-                                        onChange={(e)=>{this.setState({money:e})}} min={0} max={999999} step={0} placeholder="输入面额."/><span> 元</span></div>
+                                        onChange={(e)=>{this.setState({money:e})}} min={0} max={999999} step={0
+                                        } placeholder="输入面额."/><span> 元</span></div>
                                     </FormItem>
                                     <FormItem 
                                         {...formItemLayout}