change select to radio

client/components/CommonComponent/PopupComponent/index.css

@@ -134,8 +134,8 @@
 }
 
 .popupChildComponent {
-    width: 10rem;
-    height: 6.666666666666667rem;
+    width: 12rem;
+    height: 8rem;
     background: #fff;
     border-radius: 0.08333333333333333rem;
     left: 50%;
@@ -144,7 +144,7 @@
             transform: translate(-50%, -50%);
     position: absolute;
     text-align: center;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .popupChildComponent .popupTitle {

client/containers/PageContainer/PageContainer.jsx

@@ -124,6 +124,7 @@ class PageContainer extends React.Component {
         this.handleSelectStore = this.handleSelectStore.bind(this); //选择新的门店
         this.showQrcodePop = this.showQrcodePop.bind(this); //展示扫码开门二维码弹窗
         this.startWork = this.startWork.bind(this); //展示扫码开门二维码弹窗
+        this.changeStore = this.changeStore.bind(this);//radio选择store
         /*以下是二期方法 end*/
 
 
@@ -777,30 +778,40 @@ class PageContainer extends React.Component {
         }
         dispatch(fetchStoreInfo(storeId));
     }
+    changeStore(e){
+        console.log("change storeid to:", e.target.value);
+        this.setState({
+            storeValue : e.target.value
+        })
+    }
     // 选择门店拉取任务
     showStoreSelectPop(){
         let {state} = this.props;
         let storeList = state.storeInfo && state.storeInfo.storeList ? state.storeInfo.storeList : [];
         if(storeList && storeList.length > 0){
             let storeDom = storeList.map((store,index)=>{
-                return <option key={"storeListPop"+index} value = {store.id}>{store.name}</option>
+                return <span key={"storeListPop"+index}>
+                    <label style={{"width":"200px","textAlign":"left","marginBottom":UTILPATH.getRemByPx(10)}}>
+                        <input className="radio_type" type="radio" id={"storeRadio"+store.id} name="storeRadio" value = {store.id}
+                        defaultChecked={index==0?true:false} />
+                    {store.name}</label></span>
             });
             let btnWidth = UTILPATH.getRemByPx(240);
             let btnMiddle = UTILPATH.getRemByPx(40)
-            let btnMarginLeft = UTILPATH.getRemByPx(30);
-            let btnBorderRadius = UTILPATH.getRemByPx(10);
             let border = "2px solid #e5e5e5"
-            let btnDom = <Button key={"showStoreListBtn"} style={{'width':btnWidth,'border':border,'marginRight':btnMiddle,'marginTop':'12%','display':'inline-block'}} text={"确定"} option={this.handleSelectStore}/>
-            let cancelBtnDom = <Button key={"cancelStoreListBtn"} style={{'width':btnWidth,'border':border,'marginTop':'12%','display':'inline-block'}} text={"取消"} option={this.hidePopup}/>
+            let btnDom = <Button key={"showStoreListBtn"} style={{'width':btnWidth,'border':border,'marginRight':btnMiddle,'marginTop':'5%','display':'inline-block'}} text={"确定"} option={this.handleSelectStore}/>
+            let cancelBtnDom = <Button key={"cancelStoreListBtn"} style={{'width':btnWidth,'border':border,'marginTop':'5%','display':'inline-block'}} text={"取消"} option={this.hidePopup}/>
             let dom = <PopModel popupTitle={"门店任务拉取"} classContainer={"recoveryPopInfo"}>
-                <div className={"font36"} style={{'marginTop':'12%'}}>
-                    <span className={"font"}>选择当前门店 </span>
-                    <select
-                        defaultValue=""
-                        onChange={this.handleStoreChange}
-                    >
+                <div className={"font36"} style={{'marginTop':'2%'}}>
+                    <div className={"font"} style={{"marginBottom":UTILPATH.getRemByPx(40)}}>请选择当前门店 </div>
+                    {/*<RadioGroup onChange={this.onGroupe.bChangind(this)} active={this.state.active}>*/}
+                    {/*    <Radio value={1}>使用余额支付</Radio>*/}
+                    {/*    <Radio value={2}>使用微信支付</Radio>*/}
+                    {/*</RadioGroup>*/}
+                    <div style={{'width':UTILPATH.getRemByPx(1800), 'textAlign':'left'}} onChange={this.changeStore}>
+
                         {storeDom}
-                    </select>
+                    </div>
                 </div>
                 {btnDom}{cancelBtnDom}
             </PopModel>;

client/containers/PageContainer/index.css

@@ -11,4 +11,52 @@
 .popupExtClass .defaultPopup .defaultPopupText{
     margin-top: 0.525rem !important;
 }
+label{
+    line-height: 20px;
+    display: inline-block;
+    margin-left: 5px;
+    margin-right:15px;
+    color: #777;
+}
+.radio_type{
+    width: 20px;
+    height: 20px;
+}
+.radio_type:before{
+    content: '';
+    width: 20px;
+    height: 20px;
+    border: 1px solid #7d7d7d;
+    display: inline-block;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+.radio_type:checked:before{
+    content: '';
+    width: 20px;
+    height: 20px;
+    border: 1px solid #c59c5a;
+    background:#c59c5a;
+    display: inline-block;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+.radio_type:checked:after{
+    content: '';
+    width: 10px;
+    height:5px;
+    border: 2px solid white;
+    border-top: transparent;
+    border-right: transparent;
+    text-align: center;
+    display: block;
+    position: relative;
+    top: 6px;
+    left:5px;
+    vertical-align: middle;
+    transform: rotate(-45deg);
+}
+.radio_type:checked+label{
+    color: #c59c5a;
+}
 /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLG1CQUFtQjtJQUNuQixhQUFhO0lBQ2IsWUFBWTtJQUNaLGdDQUF3QjtZQUF4Qix3QkFBd0I7Q0FDM0I7QUFDRDtJQUNJLDBCQUEwQjtDQUM3QjtBQUNEO0lBQ0ksZ0NBQWdDO0NBQ25DIiwiZmlsZSI6ImluZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5wYWdlQ29udGFpbmVye1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICB0cmFuc2Zvcm0tb3JpZ2luOiAwIDAgMDtcclxufVxyXG4ucGFnZUNvbnRhaW5lci5iYWNrQ29sZmZme1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcclxufVxyXG4ucG9wdXBFeHRDbGFzcyAuZGVmYXVsdFBvcHVwIC5kZWZhdWx0UG9wdXBUZXh0e1xyXG4gICAgbWFyZ2luLXRvcDogMC41MjVyZW0gIWltcG9ydGFudDtcclxufSJdfQ== */
\ No newline at end of file

webpack.config.js

@@ -35,7 +35,7 @@ let baseConfig = {
                 use: ['file-loader?name=[name].[ext]']
             },
             {
-                test: /\.css$/,
+                test: /\.(css|sass|scss)$/,
                 use: ["style-loader", "css-loader","postcss-loader"]
             },
             {