kanjia

src/common/Course/index.js

@@ -8,7 +8,7 @@ const Course = (props) => {
             {props.top}
             <Link to={`/detail?id=${props.id}`}>
                 <img src={props.img} alt=""/>
-                <p className="course-title">{props.title}</p>
+                <p className={`course-title ${props.className}`}>{props.title}</p>
             </Link>
             {props.bottom}
         </li>

src/components/bargainMiddlePage/bargain-middle-page.scss

@@ -46,10 +46,20 @@
 
     .bargain-area {
       width: 355px;
-            height: 247px;
       background: $white;
       border-radius: 3px;
       margin-bottom: 10px;
+      padding-bottom: 20px;
+
+      .bargain-tip {
+        width: 100%;
+        height: 45px;
+        line-height: 45px;
+        padding-left: 10px;
+        border-bottom: 1px solid $sp_e7eaf1;
+        color: $redprice;
+        font-size: 14px;
+      }
 
       .des {
         display: flex;
@@ -133,7 +143,6 @@
             top: 0;
             display: inline-block;
             height: 100%;
-                        width: 10%;
             background: $bg_FADD29;
           }
         }
@@ -159,9 +168,10 @@
           -webkit-appearance: none;
         }
 
-                .invalid-btn{
+        .invalid-btn {
           background: $bg_999;
           color: $white;
+          font-size: 16px;
           box-shadow: none;
         }
       }
@@ -199,7 +209,7 @@
           align-items: center;
         }
 
-                img {
+        .avatar {
           width: 30px;
           height: 30px;
           border-radius: 50%;
@@ -209,6 +219,10 @@
         .nickname {
           margin-right: 10px;
           font-size: $font_14;
+          max-width: 130px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap
         }
 
         .rank-tag {
@@ -217,6 +231,7 @@
           color: $white;
           font-size: $font_12;
           flex: 0 0 auto;
+          border-radius: 2px;
         }
       }
     }
@@ -257,12 +272,11 @@
     }
 
     .course-title {
-            margin-bottom: 20px;
+      margin-bottom: 10px;
+      min-height: 38px;
     }
 
     .course-price {
-            display: flex;
-            justify-content: space-between;
       margin-bottom: 10px;
     }
 
@@ -302,14 +316,26 @@
         border-radius: 2px;
         border: none;
         -webkit-appearance: none;
+
       }
     }
   }
 
-    .more {
+  .preferential {
+    display: inline-block;
+    width: 100%;
+    height: 46px;
+    line-height: 46px;
     font-size: $font_16;
     color: $color_555;
     text-align: center;
-        line-height: 46px;
   }
+
+  .kanjia-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
 }
\ No newline at end of file

src/components/bargainMiddlePage/ranking/index.js

+import React, {Component} from 'react'
+import './index.scss'
+
+class Ranking extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            kanjiaIcon: require('../image/kanjia_icon.png')
+        }
+    }
+
+    // 关闭更多窗口
+    closeMore = () => {
+        this.props.boxHide(false);
+    }
+
+    render() {
+        return (
+            <div className={'ranking-box'}>
+                {
+                    this.props.isShowMore &&
+                    <MoreList list={this.props.list} limitPeople={this.props.limitPeople} closeMore={this.closeMore}
+                              img={this.props.icon}/>
+                }
+            </div>
+        );
+    }
+}
+
+function MoreList(props) {
+    return (
+        <div className="moreMbc">
+            <div className="content">
+                <div className="title-box">
+                    好友助力详情
+                </div>
+                <ul className='more-bargain-list'>
+                    {
+                        props.list && props.list.length > 0 && props.list.map((item, index) => {
+                            return (
+                                <li key={index} className='bargain-item'>
+                                    <img className='avatar' src={item.avatar_file} alt=""/>
+                                    <p className='name'>{item.user_name}</p>
+                                    <p className='bargain-status'>
+                                        <img className='kanjia-icon' src={props.img} alt=""/>
+                                        砍掉<span className={'price'}>{item.amount}</span>
+                                    </p>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+                <div className='more-bargain-dec'>
+                    超过{props.limitPeople}位好友助力可获得【砍价神器】
+                </div>
+            </div>
+            <i onClick={props.closeMore} className={'iconfont iconiconfront-2 close'}></i>
+        </div>
+    )
+}
+
+export default Ranking
\ No newline at end of file

src/components/bargainMiddlePage/ranking/index.scss

+.ranking-box {
+  .moreMbc {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .6);
+    z-index: 2;
+
+    .content {
+      width: 300px;
+      height: 340px;
+      background-color: $white;
+      border-radius: 3px;
+      margin: 130px auto 20px auto;
+      position: relative;
+
+      .title-box {
+        width: 100%;
+        height: 45px;
+        text-align: center;
+        color: $color_202426;
+        font-size: 16px;
+        line-height: 45px;
+      }
+
+      .more-bargain-list {
+        width: 100%;
+        height: 253px;
+        overflow: auto;
+        border-top: 1px solid $sp_e7eaf1;
+        padding: 0 15px;
+        background-color: $bg_f5f5f5;
+
+        .bargain-item {
+          border-bottom: 1px solid $sp_e7eaf1;
+          height: 50px;
+          display: flex;
+          position: relative;
+
+          .avatar {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            margin-top: 10px;
+            margin-right: 10px;
+          }
+
+
+          .name {
+            font-size: 14px;
+            color: $color_333;
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 50px;
+          }
+
+          .bargain-status {
+            line-height: 50px;
+            color: $color_333;
+            font-size: 14px;
+            position: absolute;
+            right: 0;
+          }
+        }
+
+      }
+
+    }
+
+    .more-bargain-dec {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      height: 42px;
+      font-size: 12px;
+      color: $color_FF4000;
+      text-align: center;
+      line-height: 42px;
+    }
+
+
+    .close {
+      color: #fff;
+      font-size: 22px;
+      position: relative;
+      left: 50%;
+      margin-left: -11px;
+    }
+  }
+
+  .kanjia-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
+}
\ No newline at end of file

src/components/detail/bargain/bargain.scss

@@ -25,7 +25,7 @@
 
   .intro-inner {
     width: 341px;
-        height: 114px;
+    height: 118px;
     padding-top: 15px;
     background: $bg_FFF8EB;
     border: 1px solid $color_FE2F2F;
@@ -67,13 +67,25 @@
 
   .status-outer {
     width: 360px;
-        height: 134px;
+    padding: 5px;
     background: $bg_FE2F2F;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
+  .status-over {
+    height: 99px !important;
+
+    .time-tobuy {
+      color: $color_FF4000;
+      font-size: 12px;
+      text-align: center;
+      line-height: 48px;
+    }
+
+  }
+
   .status-inner {
     width: 350px;
     height: 124px;
@@ -83,10 +95,22 @@
 
     .first-row {
       @include row-common;
-            padding: 10px 0;
+      padding: 13px 0;
       display: flex;
       justify-content: space-between;
 
+      .bargain-over {
+        display: inline-block;
+        margin-left: 10px;
+        padding: 0 4px;
+        height: 18px;
+        line-height: 18px;
+        background-color: $bg_666;
+        border-radius: 2px;
+        font-size: 12px;
+        color: $white;
+      }
+
       .time {
         display: inline-block;
         width: 20px;
@@ -138,6 +162,15 @@
         font-size: $font_12;
         color: $redprice;
       }
+
+      .name {
+        font-size: 14px;
+        color: $color_333;
+        max-width: 130px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
     .third-row {
@@ -160,19 +193,24 @@
   }
 }
 
-.bargain-success {
-    display: flex;
-    flex-flow: column;
-    position: absolute;
-    top: 100px;
+.overlay .bargain-close {
+  color: #fff;
+  font-size: 22px;
+  position: relative;
   left: 50%;
-    transform: translateX(-50%);
+  margin-left: -11px;
+}
+
+.bargain-success {
+
   width: 290px;
   height: 109px;
   padding: 15px 33px;
   background: $white;
   border-radius: 5px;
   text-align: center;
+  margin: 100px auto 20px auto;
+
 
   .title {
     font-size: $font_16;
@@ -191,4 +229,172 @@
   .indicator {
     color: $color_FE2F2F;
   }
+
+
+  .moreMbc {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .6);
+    z-index: 2;
+
+    .content {
+      width: 300px;
+      height: 340px;
+      background-color: $white;
+      border-radius: 3px;
+      margin: 130px auto 20px auto;
+      position: relative;
+
+      .title-box {
+        width: 100%;
+        height: 45px;
+        text-align: center;
+        color: $color_202426;
+        font-size: 16px;
+        line-height: 45px;
+      }
+
+      .more-bargain-list {
+        width: 100%;
+        height: 253px;
+        overflow: auto;
+        border-top: 1px solid $sp_e7eaf1;
+        padding: 0 15px;
+        background-color: $bg_f5f5f5;
+
+        .bargain-item {
+          border-bottom: 1px solid $sp_e7eaf1;
+          height: 50px;
+          display: flex;
+          position: relative;
+
+          .avatar {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            margin-top: 10px;
+            margin-right: 10px;
+          }
+
+
+          .name {
+            font-size: 14px;
+            color: $color_333;
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 50px;
+          }
+
+          .bargain-status {
+            line-height: 50px;
+            color: $color_333;
+            font-size: 14px;
+            position: absolute;
+            right: 0;
+          }
+        }
+
+      }
+
+    }
+
+    .more-bargain-dec {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      height: 42px;
+      font-size: 12px;
+      color: $color_FF4000;
+      text-align: center;
+      line-height: 42px;
+    }
+
+
+    .close {
+      color: #fff;
+      font-size: 22px;
+      position: relative;
+      left: 50%;
+      margin-left: -11px;
+    }
+  }
+
+}
+
+.artifact-box, .use-artifact-box {
+  padding: 20px 0;
+  background-color: $bg_fff;
+  border-radius: 3px;
+  text-align: center;
+  margin: 200px auto 20px auto;
+
+  .top-tip {
+    font-size: 16px;
+    color: $color_333;
+    height: 16px;
+    line-height: 16px;
+  }
+
+  .middle-tip {
+    font-size: 14px;
+    color: $color_333;
+    height: 14px;
+    line-height: 14px;
+    margin-top: 15px;
+  }
+
+  .btm-tip {
+    font-size: 14px;
+    color: $color_666;
+    height: 14px;
+    line-height: 14px;
+    margin-top: 10px;
+  }
+
+  .use-artifact {
+    background-color: $bg_fff;
+    width: 84px;
+    height: 24px;
+    font-size: 14px;
+    border: 1px solid $redprice;
+    border-radius: 12px;
+    margin: 20px auto 0 auto;
+    color: $redprice;
+  }
+
+  .tubuy {
+    display: inline-block;
+    margin-top: 17px;
+    width: 81px;
+    height: 24px;
+    background-color: $redprice;
+    border-radius: 12px;
+    font-size: 16px;
+    color: $white;
+    border: none;
+  }
+
+  .indicator {
+    color: $color_FE2F2F;
+  }
+}
+
+.artifact-box {
+  width: 300px;
+  height: 130px;
+}
+
+.use-artifact-box {
+  width: 300px;
+  height: 148px;
+
+  .middle-tip {
+    color: $color_666;
+  }
+
 }
\ No newline at end of file

src/components/detail/bargain/bargainInfo/index.js

@@ -20,4 +20,4 @@ const BargainInfo = () => {
     );
 };
 
-export default BargainInfo;
+export default BargainInfo
\ No newline at end of file

src/components/detail/index.js

@@ -53,8 +53,6 @@ class Detail extends Component {
     }
 
 
-
-
     // 自组件传给父组件的boxHide
     boxHide = (val) => {
         this.setState({auditionBox: val, singleBox: val})
@@ -145,7 +143,10 @@ class Detail extends Component {
 
 
                 {/*砍价*/}
+                {
+                    this.props.courseInfo && this.props.courseInfo.is_bargain &&
                     <Bargain/>
+                }
 
                 {/*课程介绍、大纲*/}
                 <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>

src/components/detail/single/index.js

@@ -294,4 +294,4 @@ class Single extends Component {
 
 }
 
-export default Single;
+export default Single